/* /en/install — Production Install L1 Hub */

const InstallHero = () => (
  <section className="inst-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=2400&q=85')" }} />
    <div className="cover-masthead">
      <span>HowTo Quarterly · Vol. III</span>
      <span className="ctr">The Install Issue</span>
      <span className="right">№ 03 / Spring 2026</span>
    </div>
    <div className="cover-content">
      <div>
        <div className="cover-eyebrow">Install · A Field Guide</div>
        <h1>Things worth installing <em>yourself.</em></h1>
      </div>
      <div>
        <p className="deck">
          A handpicked, carefully written library of install guides — from the satisfying small jobs you can finish before lunch, to the weekend-long projects worth the sawdust.
        </p>
        <div className="cover-meta">
          <div><span className="k">Section</span><span className="v">Install</span></div>
          <div><span className="k">Guides</span><span className="v">428 and counting</span></div>
          <div><span className="k">Reading time</span><span className="v">8 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const Essay = ({ dropcap }) => (
  <section className={`essay ${dropcap ? "" : "no-dropcap"}`}>
    <div className="essay-wrap">
      <div className="section-folio">
        <span>Editor's Note · The Install Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="essay-grid">
        <aside className="essay-side">
          <h2>Why we install <em>ourselves.</em></h2>
          <div className="by">By the Editors · 8 min read</div>
        </aside>
        <div className="essay-body">
          <p className="dropcap">
            There's a particular kind of pride that comes with doing it yourself. Not the bragging-rights kind, but the quiet kind: the way a closet shelf you hung holds your sweaters a little better than one you bought, because you know exactly which stud it's anchored to. The way a dimmer you wired makes the room feel like <em>yours</em>, not just somewhere you live.
          </p>
          <p>
            Installing things in your own home used to be a default, not a flex. Somewhere between the rise of one-day delivery and the disappearance of high school shop class, we collectively forgot that most of the work that happens inside our walls — hanging a fixture, swapping a faucet, mounting a TV, replacing a thermostat — is, with the right guide and the right tools, well within reach.
          </p>
          <div className="pull">
            "If you can follow a recipe, you can install a light fixture."
          </div>
          <p>
            That's not a slogan. It's actually our editorial bar. Every install guide on this site has been written, photographed, and pressure-tested by someone who did the project — usually for the first time — in their own home. They got things wrong, then they got things right, then they wrote it down. We don't pretend the dust isn't real. We just trust that you can handle a vacuum after.
          </p>
          <p>
            Below, the menu. Pick a room. Pick a project. We'll show you how.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const EditorsPick = () => (
  <section className="pick">
    <div className="pick-spread">
      <div className="pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="pick-text">
        <div className="eyebrow">Featured Install · Kitchen</div>
        <h3>How to install a tile <em>backsplash</em> in a weekend.</h3>
        <p>
          The single highest-impact install you can do in a kitchen, and one of the most forgiving for first-timers. Sam walks through layout, thinset, and the part where you finally get to grout — with the dust to prove it.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>2 days</span>
          <span><span className="dot"></span>$220 in materials</span>
        </div>
        <a href="/en/install/kitchen/how-to-tile-a-backsplash/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const ROOMS = [
  { name: "Kitchen",      slug: "kitchen",      desc: "Faucets, fixtures, backsplashes, and the under-cabinet lighting you'll wonder how you lived without.", count: 64, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",     slug: "bathroom",     desc: "Showerheads, vanities, tile, and the great unsung pleasure of a properly-mounted toilet paper holder.", count: 51, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Bedroom",      slug: "bedroom",      desc: "Closets, headboards, blackout shades, and the kind of dimmer that earns back its install in three nights.", count: 38, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Living Room",  slug: "living-room",  desc: "TV mounts, floating shelves, picture rails, and the floor lamp wiring you've been meaning to redo.", count: 47, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", desc: "Raised beds, drip irrigation, fence posts, and gates that latch like they cost more than they did.", count: 56, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Garage",       slug: "garage",       desc: "Slat walls, overhead racks, outlets, and a workbench that doesn't wobble when you actually need it.", count: 33, img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     desc: "Sump pumps, egress windows, dehumidifiers, and the framing-from-scratch projects that finally finish a space.", count: 22, img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",        slug: "attic",        desc: "Insulation, pull-down stairs, ventilation, and turning the dustiest room in the house into the quietest.", count: 14, img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     desc: "House numbers, mailboxes, smart locks, and the porch light that makes the whole front of the house make sense.", count: 41, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Deck & Patio", slug: "deck-patio",   desc: "Pavers, pergolas, string lights, and the outdoor outlet that turns a backyard into a room.", count: 29, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
];

const InstallRooms = () => {
  const total = ROOMS.reduce((s, r) => s + r.count, 0);
  const [accOpen, setAccOpen] = React.useState({ 0: 0, 1: 0 });
  return (
    <section className="rooms-section" id="rooms">
      <div className="rooms-wrap">
        <div className="section-folio" style={{ marginBottom: 0, borderBottom: "none" }}>
          <span>The Menu · Browse by Room</span>
          <span className="pg">PG. 12</span>
        </div>
        <div className="rooms-head">
          <h2>Pick a room. <em>Pick a project.</em></h2>
          <p className="deck">{total} install guides across {ROOMS.length} rooms — every one written by someone who did it themselves, in their own home, the first time.</p>
        </div>

        <div className="rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="acc-row" key={rowIdx}>
              {ROOMS.slice(rowIdx * 5, rowIdx * 5 + 5).map((r, i) => {
                const globalIdx = rowIdx * 5 + i;
                const open = accOpen[rowIdx] === i;
                return (
                  <a
                    key={r.name}
                    href={`/en/${r.slug}/`}
                    className={`acc-panel ${open ? "is-open" : ""}`}
                    onMouseEnter={() => setAccOpen(s => ({ ...s, [rowIdx]: i }))}
                    onClick={e => {
                      if (!open) {
                        e.preventDefault();
                        setAccOpen(s => ({ ...s, [rowIdx]: i }));
                      }
                    }}
                  >
                    <div className="ap-img" style={{ backgroundImage: `url(${r.img})` }} />
                    <div className="ap-num">№ {String(globalIdx + 1).padStart(2, "0")}</div>
                    <div className="ap-vname">{r.name}</div>
                    <div className="ap-content">
                      <h3>{r.name}</h3>
                      <p className="ap-desc">{r.desc}</p>
                      <div className="ap-meta">
                        <span><strong>{r.count}</strong> guides</span>
                        <span className="arrow">Browse  →</span>
                      </div>
                    </div>
                  </a>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Filters = () => (
  <section className="filters">
    <div className="filters-grid">
      <div className="filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>What have you done before?</h3>
        <div className="filter-pills">
          <a href="/en/install/" className="pill">Beginner <span className="ct">186</span></a>
          <a href="/en/install/" className="pill">Intermediate <span className="ct">174</span></a>
          <a href="/en/install/" className="pill">Advanced <span className="ct">68</span></a>
        </div>
      </div>
      <div className="filter-block">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="filter-pills">
          <a href="/en/install/" className="pill">Under an hour <span className="ct">112</span></a>
          <a href="/en/install/" className="pill">A morning <span className="ct">98</span></a>
          <a href="/en/install/" className="pill">A weekend <span className="ct">154</span></a>
          <a href="/en/install/" className="pill">Multi-day <span className="ct">64</span></a>
        </div>
      </div>
    </div>
  </section>
);

const Decide = () => (
  <section className="decide">
    <div className="section-folio">
      <span>The Decision · Install vs. Hire a Pro</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="decide-head">
      <h2>When to do it <em>yourself</em>, and when to call.</h2>
      <p className="deck">A short, honest list. We'd rather you stop reading and call an electrician than have you light something on fire on our behalf.</p>
    </div>
    <div className="decide-cols">
      <div className="decide-col">
        <span className="label">Install it · Yourself</span>
        <h3>Go for it if <em>you can…</em></h3>
        <ul>
          <li>Replace fixtures that don't change the wiring or plumbing path</li>
          <li>Mount things to drywall or studs (TVs, shelves, art)</li>
          <li>Swap faucets, showerheads, garbage disposals</li>
          <li>Install dimmers, smart switches, thermostats</li>
          <li>Build raised garden beds, fence panels, planters</li>
          <li>Lay peel-and-stick tile, LVT, or floating floors</li>
        </ul>
      </div>
      <div className="decide-col">
        <span className="label">Hire it · Out</span>
        <h3>Call a pro <em>when…</em></h3>
        <ul>
          <li>You're moving plumbing or running new gas lines</li>
          <li>The breaker box is involved, or you're adding circuits</li>
          <li>Anything load-bearing, structural, or roof-related</li>
          <li>HVAC work that touches refrigerant</li>
          <li>It's behind drywall and you don't know what's behind it</li>
          <li>Your gut says no. Trust the gut.</li>
        </ul>
      </div>
    </div>
  </section>
);

const Mistakes = () => {
  const items = [
    { h: "Skipping the stud finder",              p: "More installs are killed by drywall anchors that pretended to hold than by anything else. Stud first, anchor as a last resort." },
    { h: "Buying tools the day of",               p: "If your install needs a specific bit, blade, or sealant, get it the day before. The Saturday hardware run is where projects go to die." },
    { h: "Forgetting to turn off the breaker",    p: "If you can't tell which breaker the circuit is on, label them now, before you need to know. Future-you is going to be very grateful." },
    { h: "Trusting the level on your phone",      p: "Phone levels are close. Real levels are right. For anything you're going to look at every day, real level." },
    { h: "Cutting before the second measurement", p: "Measure once, then measure again to make sure you measured what you thought you measured. Then cut." },
    { h: "Underestimating the dry fit",           p: "Lay out tile, set the vanity, hang the shelf — without adhesive, without screws — first. Most install regrets show up in the dry fit if you let them." },
    { h: "Ignoring the manufacturer's spec",      p: "Every install instruction in the box is in there because somebody, somewhere, tried it the other way and learned the hard way." },
    { h: "Quitting at 90%",                       p: "Trim, caulk, touch-up paint, the cap on the screw. The last 10% is what makes an install look installed instead of installed-by-you." },
  ];
  return (
    <section className="mistakes">
      <div className="mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · From Our Editors</span>
          <span className="pg">PG. 32</span>
        </div>
        <div className="mistakes-head">
          <h2>Eight install mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="mistakes-grid">
          {items.map((m, i) => (
            <div className="mistake" key={i}>
              <div className="n">{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h4>{m.h}</h4>
                <p>{m.p}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const InstallFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Do I need a permit to install something in my own home?",
      a: "It depends on what and where. Most cosmetic installs (lighting fixtures, faucets, shelving) don't require permits. Anything structural, electrical-circuit-level, or plumbing-rerouting usually does. The fastest answer is your local building department's website — most have a one-pager listing exactly what triggers a permit." },
    { q: "What tools do I actually need to install most things?",
      a: "A good cordless drill with a driver bit set, a real bubble level (24\" is the sweet spot), a stud finder, a tape measure, a utility knife, and a putty knife. That covers maybe 80% of installs. Add a multi-tool and an inexpensive multimeter and you're at 95%." },
    { q: "Is it cheaper to install it myself, or to buy a higher-quality version installed?",
      a: "Roughly: a pro install adds 40–80% to the cost of the item. For things you'll use every day (faucets, lighting, hardware) the math often favors buying the better version and installing it yourself. For things you'll touch once a decade (HVAC, roofing) the math favors paying the pro for the warranty alone." },
    { q: "What's the most common install I'll mess up the first time?",
      a: "Mounting a TV, in our reader survey. Specifically: not finding both studs, picking a mount that doesn't accommodate the TV's VESA pattern, or forgetting to thread the cables through the wall before locking the mount in. Read the install guide before you buy the mount." },
    { q: "How do I know if I should attempt a project or call a pro?",
      a: "If you can describe to yourself, out loud, exactly what's going to happen at every step — power off, remove cover, disconnect, install, reconnect, test — you can probably do it. If any step is fuzzy, especially around electrical or plumbing, that's the signal to either read more or call." },
    { q: "What if I start an install and realize I'm in over my head?",
      a: "Stop. Take pictures of the current state. Make it safe (water off, breaker off). Call a pro and tell them exactly where you stopped. Most will respect the honesty and finish the job at a fair rate. The worst install is the one you forced yourself to finish." },
  ];
  return (
    <section className="faq">
      <div className="faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they install.</em></h2>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const Colophon = () => (
  <section className="colophon">
    <h2>Found what you're <em>installing?</em></h2>
    <p>Every guide on HowTo is written by someone who did the project in their own home. Pick a room and start exploring.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.InstallHero   = InstallHero;
window.InstallEssay  = Essay;
window.EditorsPick   = EditorsPick;
window.InstallRooms  = InstallRooms;
window.InstallFilters = Filters;
window.InstallDecide = Decide;
window.InstallMistakes = Mistakes;
window.InstallFaq    = InstallFaq;
window.InstallColophon = Colophon;