/* /en/kitchen/install — Install × Kitchen L3 intersection page */

const IK_ACCENT = { brass: "#C8A164", steel: "#8FA2A8" };

/* ===================== HERO ===================== */
const IKHero = () => (
  <section className="ik-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=2400&q=85')" }} />
    <div className="ik-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  <a href="/en/kitchen/">Kitchen</a>  ·  Install
      </span>
      <span className="ctr">The Kitchen Install Edition</span>
      <span className="right">№ 04 / Spring 2026</span>
    </div>
    <div className="ik-cover">
      <div>
        <div className="eyebrow">Install · Kitchen · A Field Guide</div>
        <h1>Things worth installing <em>in your kitchen,</em> yourself.</h1>
      </div>
      <div>
        <p className="deck">
          Seventy-eight install guides for the busiest room in your house — backsplashes, faucets, range hoods, pendants, and the dishwasher you've been meaning to swap out since November.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Kitchen / Install</span></div>
          <div><span className="k">Guides</span><span className="v">78 total</span></div>
          <div><span className="k">Reading time</span><span className="v">14 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== TOP 5 — the SEO money block ===================== */
const TOP5 = [
  {
    rank: "01",
    query: "how to install a kitchen backsplash",
    monthly: "201,000",
    diff: "Intermediate",
    time: "2 days",
    cost: "$180 — $420",
    blurb:
      "The single highest-impact install in a kitchen, and the one most readers come here looking for. Subway, mosaic, or large-format — the layout math is the same.",
    link: "Read the backsplash guide",
    href: "/en/kitchen/install/how-to-tile-a-kitchen-backsplash/",
  },
  {
    rank: "02",
    query: "how to install a kitchen faucet",
    monthly: "165,000",
    diff: "Beginner",
    time: "60 — 90 min",
    cost: "$120 — $480",
    blurb:
      "A like-for-like swap is one of the most satisfying ninety-minute jobs in the house. Two adjustable wrenches, a basin wrench, plumber's tape — and a flashlight, because under there is dark.",
    link: "Read the faucet guide",
    href: "/en/kitchen/install/how-to-install-a-kitchen-faucet/",
  },
  {
    rank: "03",
    query: "how to install a dishwasher",
    monthly: "110,000",
    diff: "Intermediate",
    time: "2 — 3 hrs",
    cost: "$0 — $150 + appliance",
    blurb:
      "Built-in or freestanding, water-line in, drain-line out, hardwired or plugged. We walk through both layouts and the part where you have to level it just right so the door doesn't swing open on its own.",
    link: "Read the dishwasher guide",
    href: "/en/kitchen/install/how-to-install-a-dishwasher/",
  },
  {
    rank: "04",
    query: "how to install a range hood",
    monthly: "74,000",
    diff: "Intermediate",
    time: "3 — 5 hrs",
    cost: "$80 — $260 + hood",
    blurb:
      "Ducted, ductless, under-cabinet, wall-mount, or chimney style. The wiring is straightforward; the duct path is what makes or breaks the install. Bring a buddy for the lifting.",
    link: "Read the range hood guide",
    href: "/en/kitchen/install/how-to-install-a-range-hood/",
  },
  {
    rank: "05",
    query: "how to install pendant lights over an island",
    monthly: "60,500",
    diff: "Beginner",
    time: "45 — 90 min each",
    cost: "$40 — $200 each",
    blurb:
      "If a junction box is already there, this is an evening project. Spacing math, height-above-counter (30–36\"), and the part where you finally pick a bulb that doesn't read green.",
    link: "Read the pendant guide",
    href: "/en/kitchen/install/how-to-install-pendant-lights-over-an-island/",
  },
];

const IKTop5 = () => (
  <section className="ik-top5">
    <div className="ik-top5-wrap">
      <div className="section-folio">
        <span>The Charts · Top 5 Kitchen Install Searches</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="ik-top5-head">
        <div>
          <h2>The five things people <em>actually search for.</em></h2>
          <p className="deck">
            Pulled from twelve months of search data and our own server logs. If you came here from Google, you came here for one of these.
          </p>
        </div>
        <div className="legend">
          <span><span className="dot" style={{background: IK_ACCENT.brass}}/> Difficulty</span>
          <span><span className="dot" style={{background: IK_ACCENT.steel}}/> Time</span>
          <span><span className="dot" style={{background: '#a98c5c'}}/> Materials</span>
        </div>
      </div>

      <div className="ik-top5-list">
        {TOP5.map(t => (
          <article className="ik-top5-row" key={t.rank}>
            <div className="rank">№ {t.rank}</div>
            <div className="query">
              <h3>{t.query}</h3>
              <p>{t.blurb}</p>
              <a href={t.href} className="read">{t.link} →</a>
            </div>
            <div className="stats">
              <div className="stat">
                <span className="k">Monthly searches</span>
                <span className="v">{t.monthly}</span>
              </div>
              <div className="stat">
                <span className="k">Difficulty</span>
                <span className="v">{t.diff}</span>
              </div>
              <div className="stat">
                <span className="k">Time</span>
                <span className="v">{t.time}</span>
              </div>
              <div className="stat">
                <span className="k">Materials</span>
                <span className="v">{t.cost}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== ESSAY ===================== */
const IKEssay = () => (
  <section className="ik-essay">
    <div className="ik-essay-wrap">
      <div className="section-folio" style={{ borderColor: 'rgba(201,184,158,0.35)' }}>
        <span>Editor's Note · Kitchen, Installed</span>
        <span className="pg">PG. 08</span>
      </div>
      <div className="ik-essay-grid">
        <aside className="ik-essay-side">
          <h2>The room where <em>install pays off.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. install ROI</span><strong>+71%</strong></div>
            <div className="row"><span>Most-googled install</span><strong>Backsplash</strong></div>
            <div className="row"><span>Cheapest, biggest win</span><strong>Hardware swap</strong></div>
            <div className="row"><span>Hardest, most worth it</span><strong>Range hood</strong></div>
          </div>
        </aside>
        <div className="ik-essay-body">
          <p className="dropcap">
            If you only ever do one DIY install in your home, do it in the kitchen. Not because the kitchen is the easiest room to install things in — it's not, the plumbing alone — but because the kitchen is the room where you'll <em>see</em> the install every single day. You will load a dishwasher you installed. You will run your hand along a backsplash you grouted. You will turn on a pendant you wired and feel, briefly, taller.
          </p>
          <p>
            And the kitchen is the room where install ROI is the highest, both emotionally and on Zillow. A new faucet costs less than dinner out and reads as a renovation. A backsplash, done in a weekend, will be the first thing every guest comments on for a year. A pair of pendants over the island is the cheapest way to make a kitchen look like a magazine sent a stylist.
          </p>
          <div className="pull">
            "If you can follow a recipe, you can install a faucet. If you can install a faucet, you can install almost anything."
          </div>
          <p>
            Below: the five searches that brought 80% of you here, the projects ranked by impact, the tools you'll actually need (it's fewer than you think), what to budget, what to skip, and the eight install mistakes our readers have written in to warn you about. Pick a project. We'll show you how.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== TOOL KIT ===================== */
const TOOLS = [
  { n: "01", name: "Cordless drill / driver", note: "Two batteries. The second one is the one you actually need.", req: "Required" },
  { n: "02", name: "Basin wrench",             note: "The only tool that reaches the back of a faucet nut. $14 at any hardware store.", req: "Faucets, sinks" },
  { n: "03", name: "1/4\" tile spacers",       note: "Get more than you think. They live in the bottom of every kitchen toolbox forever.", req: "Backsplash" },
  { n: "04", name: "Notched trowel (1/4\" V)", note: "For thinset. The notch size depends on the tile size — V for mosaic, square for large format.", req: "Backsplash" },
  { n: "05", name: "Stud finder (real one)",   note: "The phone app is wrong half the time. A $25 magnetic finder is right every time.", req: "Hoods, cabinets" },
  { n: "06", name: "Voltage tester",           note: "Non-contact, pen-style. Click before you touch any wire, every time, no exceptions.", req: "Pendants, hoods" },
  { n: "07", name: "Bubble level (24\")",      note: "Phone levels are close. Real levels are right. For anything you'll look at every day, real.", req: "Cabinets, pendants" },
  { n: "08", name: "Plumber's tape",           note: "Three wraps clockwise on every threaded fitting. Bring a fresh roll, the old one is brittle.", req: "Plumbing" },
  { n: "09", name: "Caulk gun + silicone",     note: "100% silicone for kitchen wet edges. Acrylic latex for paint-grade trim. Don't mix them up.", req: "Most installs" },
  { n: "10", name: "Drop cloth, gloves, vac",  note: "The boring three. Skip them and the install becomes a clean.", req: "Always" },
];

const IKTools = () => (
  <section className="ik-tools">
    <div className="ik-tools-wrap">
      <div className="section-folio">
        <span>The Tool Kit · Kitchen Install</span>
        <span className="pg">PG. 16</span>
      </div>
      <div className="ik-tools-head">
        <h2>Ten tools that handle <em>most kitchen installs.</em></h2>
        <p className="deck">If you own these ten things, you can do roughly 90% of every project on this page. Buy the cheap version of each, then upgrade only the ones you reach for twice.</p>
      </div>
      <div className="ik-tools-grid">
        {TOOLS.map(t => (
          <div className="ik-tool" key={t.n}>
            <div className="head">
              <span className="n">№ {t.n}</span>
              <span className="req">{t.req}</span>
            </div>
            <h4>{t.name}</h4>
            <p>{t.note}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== TIME × COST MATRIX ===================== */
const MATRIX = [
  { p: "Cabinet hardware swap",          diff: 1, time: "1 hr",        cost: "$60 — $200",     impact: 4 },
  { p: "Kitchen faucet (like-for-like)", diff: 2, time: "60 — 90 min", cost: "$120 — $480",    impact: 4 },
  { p: "Pendant over island",            diff: 2, time: "45 — 90 min", cost: "$40 — $200 ea",  impact: 4 },
  { p: "Under-cabinet LED strip",        diff: 2, time: "2 — 3 hrs",   cost: "$60 — $180",     impact: 5 },
  { p: "Pot filler (with rough-in)",     diff: 3, time: "Half day",    cost: "$220 — $600",    impact: 3 },
  { p: "Dishwasher (new built-in)",      diff: 3, time: "2 — 3 hrs",   cost: "+$120 hardware", impact: 4 },
  { p: "Range hood (ducted)",            diff: 4, time: "3 — 5 hrs",   cost: "+$160 ducting",  impact: 4 },
  { p: "Tile backsplash (subway)",       diff: 3, time: "Weekend",     cost: "$180 — $320",    impact: 5 },
  { p: "Tile backsplash (mosaic)",       diff: 3, time: "Weekend +",   cost: "$240 — $420",    impact: 5 },
  { p: "Quartz countertop (slab)",       diff: 5, time: "Hire a pro",  cost: "$2,400 — $5k",   impact: 5 },
];

const Dots = ({ n, max = 5, color = IK_ACCENT.brass }) => (
  <span className="ik-dots">
    {Array.from({length: max}).map((_, i) => (
      <span key={i} className="d" style={{ background: i < n ? color : 'rgba(239,229,207,0.18)' }} />
    ))}
  </span>
);

const IKMatrix = () => (
  <section className="ik-matrix">
    <div className="ik-matrix-wrap">
      <div className="section-folio">
        <span>The Decision Matrix · By Difficulty, Time, Cost</span>
        <span className="pg">PG. 22</span>
      </div>
      <div className="ik-matrix-head">
        <h2>Ten kitchen installs, <em>ranked.</em></h2>
        <p className="deck">A working table to scan before you start. Difficulty assumes you've never done it before. Costs are materials only — no labor, no surprise plumber, no extra trip to the store.</p>
      </div>
      <div className="ik-matrix-table">
        <div className="ik-matrix-row head">
          <div>Project</div>
          <div>Difficulty</div>
          <div>Time</div>
          <div>Materials</div>
          <div>Impact</div>
          <div></div>
        </div>
        {MATRIX.map((m, i) => (
          <div className="ik-matrix-row" key={i}>
            <div className="proj"><span className="num">{String(i+1).padStart(2,'0')}</span>{m.p}</div>
            <div><Dots n={m.diff} color={IK_ACCENT.brass} /></div>
            <div className="mono">{m.time}</div>
            <div className="mono">{m.cost}</div>
            <div><Dots n={m.impact} color={IK_ACCENT.steel} /></div>
            <div className="go"><a href="/en/kitchen/install/">Read →</a></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== TIPS ===================== */
const TIPS = [
  {
    n: "01", h: "Dry-fit everything, twice.",
    p: "Lay every tile out on the floor before any thinset comes out. Set the faucet on the deck before you crawl under the sink. Hold the pendant up to the ceiling before you cut the wire. The dry fit catches mistakes that adhesive locks in.",
  },
  {
    n: "02", h: "Start at the most-visible point.",
    p: "On a backsplash, that's the wall behind the range — the one you'll see in every photo for the next decade. Plan your tile layout from there outward, so the cuts land in the corners where nobody looks.",
  },
  {
    n: "03", h: "Buy 15% more tile than the calculator says.",
    p: "Cut waste, breakage, and the one tile you'll inevitably want to replace in three years. Tile dye lots vary — buying a single extra box now is cheaper than matching a box later.",
  },
  {
    n: "04", h: "Shutoffs first, every time.",
    p: "Before you touch anything plumbing, close the shutoff and open the faucet to verify. Old shutoffs sometimes only mostly close. Find that out now, with a bucket, not later, with a flooded cabinet.",
  },
  {
    n: "05", h: "Label, then label again.",
    p: "Two pieces of painter's tape on every wire and every supply line, named on both ends. \"Hot in,\" \"hot out,\" \"neutral,\" \"ground.\" Future-you, working under the sink with a flashlight in your mouth, will be very grateful.",
  },
  {
    n: "06", h: "The caulk line is the install.",
    p: "A perfect tile job with a sloppy caulk line reads as a sloppy tile job. Tape both edges of every wet seam, lay a thin clean bead, smooth with a wet finger, peel the tape while the silicone is still soft. Ten minutes, transformative.",
  },
  {
    n: "07", h: "Use 100% silicone, not 'kitchen and bath.'",
    p: "Read the tube. \"Kitchen and bath\" is sometimes a watered-down acrylic-latex blend with a marketing label. Real silicone says 100% silicone on the tube and lasts ten times longer in a wet zone.",
  },
  {
    n: "08", h: "Stop at 90% and leave it overnight.",
    p: "Almost every install benefits from a sleep. Caulk cures, thinset sets, your eyes recalibrate. Come back in the morning with fresh eyes and a coffee — the last 10% always goes faster the second day.",
  },
];

const IKTips = () => (
  <section className="ik-tips">
    <div className="ik-tips-wrap">
      <div className="section-folio" style={{ marginBottom: 0 }}>
        <span>Field Notes · Eight Tips, From Eight Installs</span>
        <span className="pg">PG. 28</span>
      </div>
      <div className="ik-tips-head">
        <h2>Pro tips, written down so you <em>don't have to learn them twice.</em></h2>
        <div className="num">№ 01 — 08</div>
      </div>
      <div className="ik-tips-grid">
        {TIPS.map(t => (
          <div className="ik-tip" key={t.n}>
            <div className="badge">№ {t.n}</div>
            <h4>{t.h}</h4>
            <p>{t.p}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== MISTAKES ===================== */
const IKMistakes = () => {
  const items = [
    { h: "Tiling over wallpaper",                  p: "We've now seen this three times. Thinset doesn't bond to vinyl. Strip the paper, skim-coat the drywall, then tile. The shortcut is not a shortcut." },
    { h: "Not checking for shutoff valves first",  p: "If your existing kitchen sink doesn't have working shutoffs, that's a separate small project — and one you have to finish before the faucet swap. Don't discover this with the water already off at the main." },
    { h: "Buying a faucet that doesn't fit",       p: "Single-hole, three-hole, eight-inch spread. Count and measure the holes in your existing deck before you fall in love with a fixture you can't actually install." },
    { h: "Skipping the deck plate decision",       p: "Going from a three-hole faucet to a single-hole? You either need a deck plate (cheap, easy) or a new sink (not). Decide before you order." },
    { h: "Mounting upper cabinets to drywall",     p: "Studs, every time, with a ledger board to hold the cabinet level while you screw. Drywall anchors are not the move on a loaded upper cabinet." },
    { h: "Forgetting about the dishwasher airgap", p: "Some jurisdictions require an air gap; some allow a high loop. Know which yours does before the inspector tells you in person." },
    { h: "Wiring a hood without checking duct path", p: "A ducted hood is only ducted if the duct goes somewhere. Trace the path through cabinets, ceiling, soffit before you cut a hole in the wall." },
    { h: "Quitting before the trim and caulk",     p: "A perfect install with no trim and a wavy caulk line reads as half a project. The last hour is the install — give it to yourself." },
  ];
  return (
    <section className="ik-mistakes">
      <div className="ik-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Kitchen Install Mistakes We've Seen</span>
          <span className="pg">PG. 36</span>
        </div>
        <div className="ik-mistakes-head">
          <h2>Eight install mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="ik-mistakes-grid">
          {items.map((m, i) => (
            <div className="ik-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>
  );
};

/* ===================== BUYING GUIDE ===================== */
const BUYING = [
  { cat: "Faucets",        pick: "Single-hole pull-down",        note: "Most flexible for any sink layout. Look for ceramic disc valves and a metal (not plastic) sprayer head.",
    avoid: "Fashion-finishes that aren't actually a finish. Brushed gold from a no-name brand will spot in six months." },
  { cat: "Tile",           pick: "Subway 3×6 ceramic",           note: "Cheapest, easiest, and the most forgiving layout. Stone or glass mosaic for accent zones only.",
    avoid: "Large-format on a busy wall — every cut shows. Save large-format for floors and feature walls with no outlets." },
  { cat: "Range hood",     pick: "Ducted, 600+ CFM",             note: "Match your range. A 36\" gas range needs at least 600 CFM and a ducted run to outside. Ductless is a Band-Aid.",
    avoid: "Recirculating hoods on gas ranges. Oversized fans without makeup air — they backdraft your water heater." },
  { cat: "Pendants",       pick: "Small (5–10\") trio over a 4-foot island", note: "Hang 30–36\" above the counter. Three small pendants almost always look better than two big ones.",
    avoid: "Pendants without dimming. Buy LED-compatible dimmer-rated bulbs from day one." },
  { cat: "Under-cab LEDs", pick: "Hardwired, 2700K, dimmable",  note: "Hardwired beats plug-in for clean look. 2700K is warm; 3000K is the upper bound before it reads cold.",
    avoid: "Battery-powered \"easy\" strips — they're convenient until the battery dies, which is always when company is over." },
];

const IKBuyingGuide = () => (
  <section className="ik-buy">
    <div className="ik-buy-wrap">
      <div className="section-folio">
        <span>The Buying Guide · What Actually to Buy</span>
        <span className="pg">PG. 42</span>
      </div>
      <div className="ik-buy-head">
        <h2>What to buy, <em>and what to skip.</em></h2>
        <p className="deck">A short, biased, well-researched shopping list — written by editors who've installed each of these in their own kitchens at least twice.</p>
      </div>
      <div className="ik-buy-grid">
        {BUYING.map(b => (
          <div className="ik-buy-cell" key={b.cat}>
            <div className="cat">{b.cat}</div>
            <div className="block pick">
              <span className="label">Buy</span>
              <h4>{b.pick}</h4>
              <p>{b.note}</p>
            </div>
            <div className="block avoid">
              <span className="label">Skip</span>
              <p>{b.avoid}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== FAQ ===================== */
const IKFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "How long does it take to install a kitchen backsplash?",
      a: "For a typical 30-square-foot run behind a kitchen counter, plan a full weekend. Friday evening for layout, prep, and the first cuts; Saturday for tiling; Sunday for grout, caulk, and the last touches. First-timers should add half a day; pros do it in a single afternoon." },
    { q: "Can I install a new kitchen faucet myself?",
      a: "Almost always, for a like-for-like swap. If your existing faucet has working shutoffs and the same hole pattern as the new one, it's a 60–90 minute job with two adjustable wrenches, a basin wrench, and a roll of plumber's tape. Hire a plumber if your shutoffs are seized or you're moving the supply lines." },
    { q: "Do I need a permit to install a dishwasher or range hood?",
      a: "For a like-for-like dishwasher swap on an existing line, almost never. For a new dishwasher install (no existing rough-in) or a hood that needs new ducting through a wall or ceiling, often yes — particularly if the install crosses a fire-rated assembly. Check your local building department's website; almost every jurisdiction has a one-page kitchen permit summary." },
    { q: "What's the highest-impact kitchen install for the lowest cost?",
      a: "Cabinet hardware. One Saturday afternoon, $80 worth of pulls and knobs, and the room reads as updated for the price of a single takeout dinner. A close second: under-cabinet LEDs, which transform the room more than any other lighting upgrade." },
    { q: "Do I need to turn off the water at the main, or is the under-sink shutoff enough?",
      a: "Under-sink shutoffs are enough — if they actually shut off. Test by closing them and opening the faucet; the flow should stop within 5–10 seconds. If it doesn't, replace those shutoffs first, with the water off at the main, before doing the rest of the project." },
    { q: "Can I tile over an existing backsplash?",
      a: "Technically possible if the existing tile is perfectly flat, well-bonded, and not glossy — but we don't recommend it for first-timers. Glossy surfaces don't bond well to thinset, and you'll add 1/4\" of depth that shows at every outlet and edge. Demo, prep, then tile; it's a half-day extra now and a clean install forever." },
    { q: "How much should I budget for materials on a typical kitchen install?",
      a: "Faucet swap: $120–$480. Backsplash (30 sq ft): $180–$420. Pendant pair: $80–$400. Range hood: $200–$800. Dishwasher: $0–$150 in install hardware on top of the appliance. Build in a 15% buffer for the things you'll forget on the first hardware-store run." },
    { q: "What kitchen installs should I just hire a pro for?",
      a: "Anything that touches gas (gas range, pot filler with new line), anything that adds a circuit at the panel, slab countertops (the lift alone is a two-pro job), and any plumbing that requires re-routing supply lines through walls. The honest answer: if you can't picture every step out loud, that's the signal to call." },
  ];
  return (
    <section className="ik-faq">
      <div className="section-folio">
        <span>Reader Questions · Kitchen Install, Answered</span>
        <span className="pg">PG. 48</span>
      </div>
      <div className="ik-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they install.</em></h2>
      </div>
      <div className="ik-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`ik-faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="ik-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="ik-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ===================== RELATED — cross-link Kitchen verbs + Install rooms ===================== */
const IKRelated = () => (
  <section className="ik-related">
    <div className="ik-related-wrap">
      <div className="ik-related-col">
        <div className="section-folio" style={{ marginBottom: 16 }}>
          <span>Other things to do · in the Kitchen</span>
          <span className="pg">A</span>
        </div>
        <h3>You're in the kitchen. <em>Pick a different verb.</em></h3>
        <div className="ik-related-list">
          <a href="/en/kitchen/repair/"    className="row"><span className="n">01</span><span className="t">Repair the kitchen</span><span className="ct">64 guides</span></a>
          <a href="/en/kitchen/install/"   className="row current"><span className="n">02</span><span className="t">Install in the kitchen</span><span className="ct">78 guides — you are here</span></a>
          <a href="/en/kitchen/build/"     className="row"><span className="n">03</span><span className="t">Build for the kitchen</span><span className="ct">41 guides</span></a>
          <a href="/en/kitchen/clean/"     className="row"><span className="n">04</span><span className="t">Clean the kitchen</span><span className="ct">56 guides</span></a>
          <a href="/en/kitchen/organize/"  className="row"><span className="n">05</span><span className="t">Organize the kitchen</span><span className="ct">38 guides</span></a>
          <a href="/en/kitchen/decorate/"  className="row"><span className="n">06</span><span className="t">Decorate the kitchen</span><span className="ct">35 guides</span></a>
        </div>
      </div>
      <div className="ik-related-col">
        <div className="section-folio" style={{ marginBottom: 16 }}>
          <span>Install something else · Other Rooms</span>
          <span className="pg">B</span>
        </div>
        <h3>Or install <em>somewhere else.</em></h3>
        <div className="ik-related-list">
          <a href="/en/install/bathroom/"     className="row"><span className="n">01</span><span className="t">Install in the bathroom</span><span className="ct">51 guides</span></a>
          <a href="/en/install/living-room/"  className="row"><span className="n">02</span><span className="t">Install in the living room</span><span className="ct">47 guides</span></a>
          <a href="/en/install/bedroom/"      className="row"><span className="n">03</span><span className="t">Install in the bedroom</span><span className="ct">38 guides</span></a>
          <a href="/en/install/lawn-garden/"  className="row"><span className="n">04</span><span className="t">Install in the lawn / garden</span><span className="ct">56 guides</span></a>
          <a href="/en/install/garage/"       className="row"><span className="n">05</span><span className="t">Install in the garage</span><span className="ct">33 guides</span></a>
          <a href="/en/install/exterior/"     className="row"><span className="n">06</span><span className="t">Install on the exterior</span><span className="ct">41 guides</span></a>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== COLOPHON ===================== */
const IKColophon = () => (
  <section className="ik-colophon">
    <h2>Found what you're <em>installing?</em></h2>
    <p>Save a project to your profile and we'll send you the prep checklist the night before — plus a single, well-edited follow-up if you tell us how it went. No newsletter spam, no upsells, no eight-step launch sequence.</p>
    <a href="/en/kitchen/" className="go">Back to Kitchen →</a>
  </section>
);

window.IKHero        = IKHero;
window.IKTop5        = IKTop5;
window.IKEssay       = IKEssay;
window.IKTools       = IKTools;
window.IKMatrix      = IKMatrix;
window.IKTips        = IKTips;
window.IKMistakes    = IKMistakes;
window.IKBuyingGuide = IKBuyingGuide;
window.IKFaq         = IKFaq;
window.IKRelated     = IKRelated;
window.IKColophon    = IKColophon;