/* Sam's article — Smart Home Without Subscriptions
 * Format: Sam editorial — Crumbs, Hero, Lede, WhatYouNeed, Steps, Affiliate, HotTakes, Signoff.
 * Judgment/buying piece. Affiliate: /go/sam-smart-home-hub (Amazon smart home hubs), rel=sponsored nofollow,
 * disclosure directly below. Her verdict lines and the safety note stay editorial — the link lives only in the Affiliate card.
 */

const SamSays = ({ children }) => (
  <div className="sa-step-says">
    <span className="who">- Sam</span>
    <p>{children}</p>
  </div>
);

const heroImage = "cover.jpg";
const imgProtocol = "sam-fig-protocol.jpg";
const imgCamera = "sam-fig-camera.jpg";
const imgSensors = "sam-fig-sensors.jpg";
const imgHub = "sam-fig-hub.jpg";

const Crumbs = () => (
  <nav className="sa-crumbs" aria-label="Breadcrumb">
    <div className="l">
      <a href="/">Home</a>
      <span>/</span>
      <a href="/en/contributors/sam/">Sam</a>
      <span>/</span>
      <span>Install</span>
      <span>/</span>
      <span style={{ color: "#EFE5CF" }}>Smart home without subscriptions</span>
    </div>
    <div className="r">
      <span>Issue 07 | Summer '26</span>
      <span className="by">written by Sam</span>
    </div>
  </nav>
);

const STATS = [
  { stat: "$0/mo", note: "what a correctly chosen sensor costs to keep running, forever" },
  { stat: "4 questions", note: "the buying filter, before you look at a single price" },
  { stat: "1", note: "the number of subscriptions in this article I think is worth paying" }
];

const Hero = () => (
  <section className="sa-hero">
    <div className="img" style={{ backgroundImage: `url('${heroImage}')` }} />
    <div className="sa-hero-wrap">
      <div>
        <div className="sa-hero-kicker">
          <span>Sam</span>
          <span className="dot">*</span>
          <span>Smart Home + Buying</span>
          <span className="dot">*</span>
          <span className="sig">written by Sam</span>
        </div>
        <h1>
          I added up what my house charges me every month. It was <em>$31.</em>
        </h1>
        <p className="standfirst">
          four devices, four separate monthly fees, and none of them doing anything my house couldn't do for free. here's how to build the version that doesn't bill you.
        </p>
      </div>
      <div className="sa-hero-side">
        {STATS.map((s) => (
          <div className="row" key={s.stat} style={{ gap: 18, alignItems: "baseline" }}>
            <span style={{ textTransform: "none", letterSpacing: "0.03em", lineHeight: 1.45, maxWidth: "26ch" }}>{s.note}</span>
            <span className="v" style={{ flexShrink: 0, whiteSpace: "nowrap" }}>{s.stat}</span>
          </div>
        ))}
        <div className="row">
          <span>Updated</span>
          <span className="v">July '26</span>
        </div>
      </div>
    </div>
    <div className="sa-hero-scribble" style={{ top: "16%", bottom: "auto", right: "5%" }}>
      the hardware isn't the product. <u>you are.</u>
      <svg viewBox="0 0 60 30" fill="none">
        <path d="M2 22 C 12 8, 28 4, 56 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        <path d="M48 6 L 56 12 L 50 20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      </svg>
    </div>
  </section>
);

const Lede = () => (
  <section className="sa-lede">
    <div className="sa-lede-wrap">
      <aside className="sa-lede-side">
        <div className="marker">In this one</div>
        <ul>
          <li>The four questions</li>
          <li>Learn three words</li>
          <li>Fix cameras first</li>
          <li>The boring devices</li>
          <li>Pick the hub last</li>
          <li>Worth it / not worth it</li>
        </ul>
      </aside>

      <div className="sa-lede-body">
        <p className="dropcap">
          i got a video doorbell as a hand-me-down. loved it. then one day it told me i needed to subscribe to see the clip of the person who had just been at my door. not to record it — it had already recorded it. to <em>watch</em> it.
        </p>
        <div className="sa-pullquote">
          <p>
            that's the business. the hardware is cheap because the hardware isn't the product. you are.
          </p>
        </div>
        <p>
          so i went through the house with a notepad, which is a deeply unglamorous saturday, and added it up: doorbell, camera, one lock feature that used to be free, and a vacuum that wanted money to remember the shape of my apartment. thirty-one dollars a month. three hundred and seventy-two dollars a year, to be <em>allowed</em> to use things i already owned.
        </p>
        <p>
          you can build almost all of this so it never charges you again. it takes slightly more thought at the buying stage and zero extra work afterward. that's the trade.
        </p>
      </div>

      <aside className="sa-margin">
        <span className="lab">Sam's note</span>
        <h4>$31 a month</h4>
        <p>
          three hundred and seventy-two dollars a year, to be allowed to use things i already owned.
        </p>
      </aside>
    </div>
  </section>
);

const WhatYouNeed = () => (
  <section className="sa-need">
    <div className="sa-need-wrap">
      <div>
        <div className="sa-need-head">00 / Before you look at a price</div>
        <h2>
          The four questions, <em>before the price</em>
        </h2>
        <p className="body">
          before anything else, you need the four questions. write them on your hand if you have to. every device gets asked all four, and any device that fails question one goes back on the shelf.
        </p>
        <p className="body">
          hardware-wise, the short list: a hub that speaks local protocols, a handful of cheap sensors, and cameras that record to a card or a drive in your house. that's it. that's the build.
        </p>

        <div className="sa-need-dont">
          <span className="lab">Do not buy</span>
          <ul>
            <li>
              Devices that are Wi-Fi-only and cloud-only
              <span className="why">those are the ones that stop working when a company changes its mind.</span>
            </li>
          </ul>
        </div>
      </div>

      <ul className="sa-need-list">
        <li>
          <span className="item">
            does it work if the company goes away?
            <span className="why">startups die. features get "sunset." if the device is useless without their servers, you're renting it.</span>
          </span>
          <span className="qty">Q1</span>
        </li>
        <li>
          <span className="item">
            does it work if the internet drops?
            <span className="why">your lights should turn on in a storm. this is called local control and it's the whole ballgame.</span>
          </span>
          <span className="qty">Q2</span>
        </li>
        <li>
          <span className="item">
            what's free today that could get moved behind a tier tomorrow?
            <span className="why">if a feature is the reason you're buying, assume it's the feature they'll charge for.</span>
          </span>
          <span className="qty">Q3</span>
        </li>
        <li>
          <span className="item">
            can i get my video and my data out?
            <span className="why">if the footage lives only in their cloud, it isn't your footage.</span>
          </span>
          <span className="qty">Q4</span>
        </li>
      </ul>
    </div>
  </section>
);

const STEPS = [
  {
    n: "01",
    phase: "Protocols | three words",
    title: "Learn three words and you'll never get trapped again.",
    flip: false,
    body: (
      <>
        <p>
          the words are Matter, Thread, and Zigbee. skip the marketing, here's what they actually mean for you.
        </p>
        <p>
          <strong>Matter</strong> is the newer standard that means a device will talk to whichever app you already use instead of demanding its own. <strong>Thread</strong> is the low-power radio a lot of Matter devices use — it needs a "border router" in your house, which you probably already own if you have a recent smart speaker or streaming box. <strong>Zigbee</strong> and <strong>Z-Wave</strong> are older, extremely reliable, and need a hub — and they were doing local control before it was fashionable.
        </p>
        <p>
          what you're avoiding: devices that are Wi-Fi-only and cloud-only. those are the ones that stop working when a company changes its mind. the box usually won't tell you, but the app store reviews will — search the reviews for the word "subscription" and read what people are angry about. that's your due diligence, and it takes four minutes.
        </p>
      </>
    ),
    tip: { lab: "four minutes of homework", text: "search the app store reviews for the word \"subscription\" and read what people are angry about. that's your due diligence." },
    fig: { img: imgProtocol, tag: "Fig 01 | Protocols", cap: "matter, thread, zigbee. three words, and you never get trapped again." },
    says: "the box usually won't tell you. the app store reviews will."
  },
  {
    n: "02",
    phase: "Cameras | where it leaks",
    title: "Cameras are where the money leaks, so fix cameras first.",
    flip: true,
    body: (
      <>
        <p>
          this is the big one. video is expensive to store, which is why every camera company would love to store it for you at $3 to $10 a month per camera. per camera. do the math on three cameras and a five-year ownership.
        </p>
        <p>
          what to look for instead: a camera that records to a microSD card in the camera, or to a drive in your house, and that supports RTSP or ONVIF — two ugly acronyms that just mean "this camera will talk to software other than its own app." with those, you own the footage and the recurring cost is a card you buy once.
        </p>
        <p>
          pro tip, delivered flatly: on-device person detection is now normal on mid-range cameras. if a company is charging you monthly to tell the difference between a person and a cat, they are charging you for last decade's technology.
        </p>
      </>
    ),
    tip: { lab: "two ugly acronyms", text: "RTSP or ONVIF just mean \"this camera will talk to software other than its own app.\" with those, you own the footage." },
    fig: { img: imgCamera, tag: "Fig 02 | Local recording", cap: "a card in the camera, or a drive in your house. the recurring cost is a card you buy once." }
  },
  {
    n: "03",
    phase: "Sensors | the boring ones",
    title: "The boring devices are the ones that actually change your life.",
    flip: false,
    body: (
      <>
        <p>
          everyone starts with cameras and speakers. the things i'd genuinely miss are $12 each and have no app of their own.
        </p>
        <p>
          contact sensors on doors and windows. a motion sensor in the hallway so nobody has to find a light switch at 2am. a leak sensor under the kitchen sink and behind the washing machine, which is the single highest-value smart device in this entire article and costs about fifteen dollars. a temperature sensor if you have a room that lies about how cold it is.
        </p>
        <p>
          these are Zigbee or Z-Wave or Thread, they run for a year or two on a coin cell, and they will never ask you for money. this is the part of the smart home that's actually smart.
        </p>
      </>
    ),
    warn: { lab: "The fifteen-dollar one", text: "a leak sensor under the kitchen sink and behind the washing machine is the single highest-value smart device in this entire article." },
    fig: { img: imgSensors, tag: "Fig 03 | Sensors", cap: "$12 each, a coin cell a year, and they will never ask you for money." },
    says: "this is the part of the smart home that's actually smart."
  },
  {
    n: "04",
    phase: "Hub | pick it last",
    title: "Pick the hub last, once you know what you're plugging into it.",
    flip: true,
    body: (
      <>
        <p>
          people buy the hub first and then buy devices that fit it. do it the other way.
        </p>
        <p>
          three honest options. <strong>the one you already own</strong> — a recent smart speaker or streaming box may already be a Thread border router and a Matter controller, which means your hub cost is zero. <strong>a dedicated Zigbee/Z-Wave hub</strong>, if you're going the cheap-sensor route, which is a one-time purchase and then silence. <strong>or a local-first home server</strong>, which is the enthusiast answer: it runs on a mini PC or a small single-board computer in a closet, keeps everything in your house, and is genuinely more work to set up. worth it if you like this stuff. not worth it if you want the lights to just work.
        </p>
        <p>
          whichever you choose, the test is the same: unplug your router and see what still responds. that's your real smart home. everything else was a subscription with a plug on it.
        </p>
      </>
    ),
    tip: { lab: "the only test that matters", text: "unplug your router and see what still responds. that's your real smart home. everything else was a subscription with a plug on it." },
    fig: { img: imgHub, tag: "Fig 04 | The hub", cap: "buy it last. it decides which devices you can buy for the next five years." }
  }
];

const Step = ({ data }) => (
  <article className={`sa-step ${data.flip ? "flip" : ""}`}>
    <div className="sa-step-text">
      <div className="sa-step-meta">
        <span className="sa-step-num">{data.n}</span>
        <span className="sa-step-phase">{data.phase}</span>
      </div>
      <h3>{data.title}</h3>
      <div className="sa-step-body">{data.body}</div>
      {data.tip && (
        <div className="sa-step-tip">
          <span className="lab">{data.tip.lab}</span>
          <p>{data.tip.text}</p>
        </div>
      )}
      {data.warn && (
        <div className="sa-step-warn">
          <span className="lab">{data.warn.lab}</span>
          <p>{data.warn.text}</p>
        </div>
      )}
    </div>
    <figure className="sa-step-fig">
      <div className="frame">
        <span className="tag">{data.fig.tag}</span>
        <img src={data.fig.img} alt="" loading="lazy" />
      </div>
      <figcaption>{data.fig.cap}</figcaption>
      {data.says && <SamSays>{data.says}</SamSays>}
    </figure>
  </article>
);

const Steps = () => (
  <section className="sa-steps">
    <div className="sa-steps-wrap">
      <header className="sa-steps-head">
        <h2>
          The build that <em>doesn't bill you</em>
        </h2>
        <span className="count">04 MOVES | PROTOCOLS, CAMERAS, SENSORS, HUB</span>
      </header>
      {STEPS.map((s) => (
        <Step key={s.n} data={s} />
      ))}
    </div>
  </section>
);

const Affiliate = () => (
  <section
    style={{
      background: "var(--sa-bg-soft)",
      borderTop: "1px solid var(--sa-rule)",
      borderBottom: "1px solid var(--sa-rule)",
      padding: "56px 24px"
    }}
  >
    <div
      style={{
        maxWidth: 780,
        margin: "0 auto",
        background: "var(--sa-bg-card)",
        border: "1px solid var(--sa-rule)",
        borderLeft: "3px solid var(--sa-marker)",
        borderRadius: 4,
        padding: "32px 34px"
      }}
    >
      <span
        style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 10,
          letterSpacing: "0.3em",
          textTransform: "uppercase",
          color: "var(--sa-marker)"
        }}
      >
        The one-time purchase
      </span>
      <p
        style={{
          fontFamily: "'Playfair Display', serif",
          fontSize: 23,
          lineHeight: 1.35,
          color: "var(--sa-cream)",
          margin: "14px 0 18px"
        }}
      >
        if you're starting from nothing, the hub is the piece worth getting right, because it decides which devices you can buy for the next five years. look for Matter and Thread support on the box, and Zigbee or Z-Wave if you want the cheap sensors.
      </p>
      <a
        href="/go/sam-smart-home-hub"
        rel="sponsored nofollow"
        style={{
          display: "inline-block",
          background: "var(--sa-marker)",
          color: "#100E0B",
          fontFamily: "'DM Sans', sans-serif",
          fontWeight: 700,
          fontSize: 14,
          letterSpacing: "0.02em",
          textDecoration: "none",
          padding: "12px 26px",
          borderRadius: 999
        }}
      >
        smart home hubs with Matter + Thread →
      </a>
      <p
        style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: 12,
          lineHeight: 1.5,
          color: "var(--sa-mute)",
          margin: "18px 0 0"
        }}
      >
        some links on this page are affiliate links — if you buy through one, we earn a commission at no extra cost to you.
      </p>
    </div>
  </section>
);

const HotTakes = () => (
  <section className="sa-hottakes">
    <div className="sa-hottakes-wrap">
      <header className="sa-hottakes-head">
        <span className="lab">Sam's verdicts</span>
        <h2>
          Worth it, <em>and not.</em>
        </h2>
      </header>
      <div className="sa-hottakes-list">
        <div className="sa-take">
          <div className="num">i.</div>
          <h3>Worth it: professional monitoring</h3>
          <p>
            if you actually want someone to call the fire department when you're on a plane. that's a real service performed by real people and it's the one subscription on this page i'd sign. roughly $20–30/mo and it should include cellular backup.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">ii.</div>
          <h3>Not worth it: paying monthly to watch video your own camera already recorded</h3>
          <p>
            $3–10/mo, per camera, forever.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iii.</div>
          <h3>Not worth it: a vacuum that charges you to remember your floor plan</h3>
          <p>
            it mapped your apartment. the map is of your apartment.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">iv.</div>
          <h3>Not worth it: any lock whose app-unlock lives behind a tier</h3>
          <p>
            buy the one with a physical key and local control and sleep fine.
          </p>
        </div>
        <div className="sa-take">
          <div className="num">v.</div>
          <h3>Genuinely worth $15: a leak sensor under the sink</h3>
          <p>
            i have said this three times in this article and i'll say it a fourth.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const Signoff = () => (
  <section className="sa-signoff">
    <div className="sa-signoff-wrap">
      <div>
        <div className="sa-step-warn" style={{ marginBottom: 32 }}>
          <span className="lab">Not a smart home device</span>
          <p>
            smoke and carbon monoxide detectors are not smart home devices, they're life safety devices. buy real ones, replace them on schedule, and do not treat a phone notification as the alarm. a smart alert is a nice extra on top of a loud noise in your hallway. it is not a substitute for the loud noise.
          </p>
        </div>
        <h2>
          Unplug the router. <em>See what's left.</em>
        </h2>
        <p>
          thirty-one dollars a month, for the record, is a very good dinner. i'd rather have the dinner.
        </p>
        <div className="sig">— sam</div>
        <div className="ctas" style={{ marginTop: 28 }}>
          <a href="/en/contributors/sam/" className="btn primary">
            More from Sam
          </a>
          <a href="/contact/" className="btn ghost">
            Ask Sam a question
          </a>
        </div>
      </div>
      <div className="sa-readnext">
        <span className="lab">Read next</span>
        <a href="/en/contributors/sam/the-first-hour-of-water-damage/">
          <span>The first hour of water damage</span>
          <span className="m">SAM</span>
        </a>
        <a href="/en/contributors/sam/first-home-insurance/">
          <span>Insure your first home without overpaying</span>
          <span className="m">SAM</span>
        </a>
        <a href="/en/contributors/sam/the-90-minute-backyard/">
          <span>The 90-minute backyard</span>
          <span className="m">SAM</span>
        </a>
        <a href="/en/contributors/sam/">
          <span>All of Sam's guides</span>
          <span className="m">PROFILE</span>
        </a>
      </div>
    </div>
  </section>
);

const Article = () => (
  <div className="sa">
    <Crumbs />
    <Hero />
    <Lede />
    <WhatYouNeed />
    <Steps />
    <Affiliate />
    <HotTakes />
    <Signoff />
  </div>
);

ReactDOM.createRoot(document.getElementById("root")).render(<Article />);
