/* /en/kitchen — Production Kitchen Room Hub */

const KitchenHero = () => (
  <section className="kr-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=2400&q=85')" }} />
    <div className="kr-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Kitchen
      </span>
      <span className="ctr">The Kitchen Edition</span>
      <span className="right">№ 04 / Spring 2026</span>
    </div>
    <div className="kr-cover">
      <div>
        <div className="eyebrow">Room Guide · Kitchen</div>
        <h1>The room that <em>earns its keep.</em></h1>
      </div>
      <div>
        <p className="deck">
          Every guide we've ever written for the busiest room in the house — sorted by what you came here to do, not by what we wanted to sell you.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Kitchen</span></div>
          <div><span className="k">Guides</span><span className="v">312 total</span></div>
          <div><span className="k">Reading time</span><span className="v">12 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's broken.",
    lede: "The leak under the sink, the burner that won't light, the disposal that hums. We'll diagnose first, then fix.",
    bg: "https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1400&q=80",
    examples: "Leaky faucet · Garbage disposal jam · Loose cabinet hinge · Dishwasher won't drain · Burner ignition · Slow drain",
    count: 64,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what's new.",
    lede: "Backsplashes, faucets, under-cabinet lighting, and the appliances you finally bought after six months of saving.",
    bg: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1400&q=80",
    examples: "Tile backsplash · New faucet · Pot filler · Under-cabinet LEDs · Range hood · Dishwasher · Pendant lights",
    count: 78,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from scratch.",
    lede: "Open shelves, a butcher block island, the breakfast nook bench. Saw-and-screw projects, paced for the weekend warrior.",
    bg: "https://images.unsplash.com/photo-1556909195-d5b56c8f2e07?w=1400&q=80",
    examples: "Open shelving · Kitchen island · Breakfast nook · Spice drawer insert · Pull-out pantry · Wine rack",
    count: 41,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what won't quit.",
    lede: "Burnt-on grease, mineral spots, the inside of an oven you've been avoiding. Boring, satisfying, well-tested.",
    bg: "https://images.unsplash.com/photo-1556910103-1c02745aae4d?w=1400&q=80",
    examples: "Oven (self-clean & manual) · Cast iron · Grout · Hood filter · Disposal smell · Quartz stains · Stainless streaks",
    count: 56,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the chaos.",
    lede: "Pantry overhauls, drawer dividers that actually fit, and a junk-drawer system that survives the second week.",
    bg: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=1400&q=80",
    examples: "Pantry reset · Drawer dividers · Tupperware system · Spice wall · Under-sink fix · Fridge zones · Junk drawer",
    count: 38,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the room.",
    lede: "Paint, hardware, art, and the small swaps that make a kitchen feel like the room you actually want to be in.",
    bg: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=1400&q=80",
    examples: "Paint cabinets · Cabinet hardware · Open-shelf styling · Art over the sink · Window treatments · Counter styling",
    count: 35,
  },
];

const KitchenMenu = () => (
  <section className="kr-menu">
    <div className="kr-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Kitchen, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="kr-menu-head">
        <h2>Six things to do <em>in a kitchen.</em></h2>
        <p className="deck">
          Every project on this site lives at the intersection of a room and a verb. You're in the kitchen — pick a verb.
        </p>
      </div>
      <div className="kr-actions">
        {ACTIONS.map(a => (
          <a key={a.name} href={`/en/kitchen/${a.slug}/`} className="kr-act">
            <div className="kr-act-bg" style={{ backgroundImage: `url(${a.bg})` }} />
            <div className="num">№ {a.n} — Layer 01</div>
            <h3>{a.name} <em>{a.em}</em></h3>
            <p className="lede">{a.lede}</p>
            <p className="examples">{a.examples}</p>
            <div className="foot">
              <span><strong>{a.count}</strong> guides</span>
              <span className="arr">Browse {a.name.toLowerCase()} →</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const KitchenEssay = () => (
  <section className="kr-essay">
    <div className="kr-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(201,184,158,0.35)" }}>
        <span>Editor's Note · The Kitchen, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="kr-essay-grid">
        <aside className="kr-essay-side">
          <h2>The room that <em>does the most.</em></h2>
          <div className="by">By the Editors · 6 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. visits per day</span><strong>27</strong></div>
            <div className="row"><span>Hours / week in use</span><strong>21</strong></div>
            <div className="row"><span>Most-googled verb</span><strong>"fix"</strong></div>
            <div className="row"><span>Search volume / mo</span><strong>1.4M</strong></div>
          </div>
        </aside>
        <div className="kr-essay-body">
          <p className="dropcap">
            The kitchen is the most-used, most-googled, and most-procrastinated room in your house — usually all at once. It's the room where small problems become daily problems faster than anywhere else: a faucet that drips becomes a faucet that drips into your water bill; a drawer that sticks becomes the drawer you stop opening; a backsplash you never finished becomes the backdrop of every photo you take of your dinner for the next three years.
          </p>
          <p>
            Which is why we organized this page the way you actually search. Most rooms on this site are sorted by project type — a list of how-tos, a few featured stories, a sidebar. The kitchen is different. The kitchen is where you arrive with a verb already in your head: <em>repair</em> the dishwasher. <em>Install</em> the backsplash. <em>Clean</em> the oven before your in-laws come over. <em>Organize</em> the pantry, finally, this Saturday, no exceptions.
          </p>
          <div className="pull">
            "The kitchen is the room where small problems become daily problems faster than anywhere else."
          </div>
          <p>
            So we built the menu around the verbs. <a href="/en/kitchen/repair/">Repair</a>, <a href="/en/kitchen/install/">install</a>, <a href="/en/kitchen/build/">build</a>, <a href="/en/kitchen/clean/">clean</a>, <a href="/en/kitchen/organize/">organize</a>, <a href="/en/kitchen/decorate/">decorate</a> — six layers, each a complete library, each written by someone who did the thing in their own kitchen with their own kid asking for snacks every nine minutes. We don't pretend it was clean. We just wrote down the part where it worked.
          </p>
          <p>
            Below: the seasonal pick, the most-read projects of the month, the eight mistakes our readers tell us they wish they'd known about, and an anatomy diagram you can use to find the guide for the part of the kitchen that's currently bothering you. Pick a verb. Pick a part. We'll show you how.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const KitchenPick = () => (
  <section className="kr-pick">
    <div className="kr-pick-spread">
      <div className="kr-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="kr-pick-text">
        <div className="eyebrow">Featured Project · Kitchen, Install</div>
        <h3>How to install a tile <em>backsplash</em> in a single weekend.</h3>
        <p>
          The single highest-impact thing you can do to a kitchen, and one of the most forgiving for first-timers. Layout, thinset, and the part where you finally get to grout — with the dust to prove it. Friday evening prep, Saturday tile, Sunday grout.
        </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>
          <span><span className="dot"></span>12 steps</span>
        </div>
        <a href="/en/kitchen/install/how-to-tile-a-backsplash/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const LANE_SLUGS = { "Repair": "repair", "Install": "install", "Build": "build", "Clean": "clean", "Organize": "organize", "Decorate": "decorate" };
const laneHref = label => `/en/kitchen/${LANE_SLUGS[label.split(" · ")[0]] || "install"}/`;

const KitchenIndex = () => {
  const cols = [
    {
      title: "Most-read this month",
      count: "One per lane",
      items: [
        ["01", "How to fix a leaky kitchen faucet",    "Repair · 25 min"],
        ["02", "How to install a tile backsplash",     "Install · 2 days"],
        ["03", "How to build open kitchen shelves",    "Build · weekend"],
        ["04", "How to clean a self-cleaning oven",    "Clean · 4 hrs"],
        ["05", "How to organize a deep pantry",        "Organize · 3 hrs"],
        ["06", "How to paint kitchen cabinets",        "Decorate · weekend"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to fix slow-draining sink",        "Repair · 30 min"],
        ["02", "How to replace a kitchen faucet",      "Install · 90 min"],
        ["03", "How to build a kitchen island",        "Build · weekend"],
        ["04", "How to deep-clean a range hood",       "Clean · 1 hr"],
        ["05", "How to organize Tupperware",           "Organize · 90 min"],
        ["06", "How to swap cabinet hardware",         "Decorate · 1 hr"],
      ],
    },
  ];
  return (
    <section className="kr-index">
      <div className="kr-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read kitchen guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="kr-index-head">
          <h2>What people came here <em>to do.</em></h2>
          <div className="right">As of <strong>April 2026</strong> · live ranking</div>
        </div>
        <div className="kr-index-grid">
          {cols.map(c => (
            <div className="kr-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="kr-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={laneHref(m)}><span className="n">{n}</span><span className="t-text">{t}</span><span className="t">{m}</span></a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const KitchenMistakes = () => {
  const items = [
    { h: "Painting cabinets without degreasing first",      p: "Kitchens are oilier than you think. Skip the TSP-and-rinse step and your beautiful new finish will start peeling at the corner near the stove inside of a year." },
    { h: "Buying a faucet that doesn't fit your sink",      p: "Single-hole, three-hole, eight-inch spread — measure the existing deck and count the holes before you fall in love with a fixture you can't actually install." },
    { h: "Tiling over wallpaper",                           p: "Yes, somebody we know did this. No, the thinset will not bond. Strip the wallpaper, skim-coat the drywall, then tile. The shortcut isn't a shortcut." },
    { h: "Forgetting to turn off the water under the sink", p: "The valves under your sink are there for a reason. Use them before you start, then check that they actually held — old shutoffs sometimes don't." },
    { h: "Disposing of grease down the drain",              p: "The single biggest cause of slow-draining kitchen sinks we see. Wipe the pan with a paper towel before you wash it. Future-you will not need to snake the trap." },
    { h: "Using the wrong cleaner on stone",                p: "Vinegar etches marble and limestone. Bleach pits granite seal. Read the label, and when in doubt: warm water, mild dish soap, microfiber. That's almost always the answer." },
    { h: "Mounting upper cabinets to drywall only",         p: "A loaded upper cabinet is heavy. Studs, every time, with a ledger board to hold the weight while you screw. Anchors are not the move here." },
    { h: "Quitting before the caulk line",                  p: "A perfect install with a sloppy caulk line reads as a sloppy install. The caulk line is the install. Take the extra ten minutes." },
  ];
  return (
    <section className="kr-mistakes">
      <div className="kr-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Kitchen Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="kr-mistakes-head">
          <h2>Eight kitchen mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="kr-mistakes-grid">
          {items.map((m, i) => (
            <div className="kr-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 KitchenFilters = () => (
  <section className="kr-filters">
    <div className="kr-filters-grid">
      <div className="kr-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="kr-pills">
          <a href="/en/kitchen/" className="kr-pill">Beginner <span className="ct">142</span></a>
          <a href="/en/kitchen/" className="kr-pill">Intermediate <span className="ct">128</span></a>
          <a href="/en/kitchen/" className="kr-pill">Advanced <span className="ct">42</span></a>
        </div>
      </div>
      <div className="kr-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="kr-pills">
          <a href="/en/kitchen/" className="kr-pill">Under an hour <span className="ct">86</span></a>
          <a href="/en/kitchen/" className="kr-pill">A morning <span className="ct">74</span></a>
          <a href="/en/kitchen/" className="kr-pill">A weekend <span className="ct">112</span></a>
          <a href="/en/kitchen/" className="kr-pill">Multi-day <span className="ct">40</span></a>
        </div>
      </div>
      <div className="kr-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="kr-pills">
          <a href="/en/kitchen/" className="kr-pill">$0 — $50 <span className="ct">98</span></a>
          <a href="/en/kitchen/" className="kr-pill">$50 — $200 <span className="ct">124</span></a>
          <a href="/en/kitchen/" className="kr-pill">$200 — $1k <span className="ct">68</span></a>
          <a href="/en/kitchen/" className="kr-pill">$1k+ <span className="ct">22</span></a>
        </div>
      </div>
    </div>
  </section>
);

const KitchenAnatomy = () => {
  const parts = [
    { n: "01", h: "Sink", em: "& fixtures.",
      d: "The most-touched object in the room. Faucets, sprayers, drains, traps.",
      links: [["Leaky faucet", "repair"], ["Replace faucet", "install"], ["Slow drain", "repair"], ["Caulk a sink", "install"], ["Garbage disposal", "repair"]] },
    { n: "02", h: "Counter", em: "& backsplash.",
      d: "Surfaces, edges, and the wall above them. Quartz, granite, butcher block, tile.",
      links: [["Tile backsplash", "install"], ["Seal granite", "clean"], ["Quartz stains", "clean"], ["Refinish butcher block", "build"], ["Edge repair", "repair"]] },
    { n: "03", h: "Cabinets", em: "& hardware.",
      d: "The room's biggest visual surface and the easiest one to upgrade.",
      links: [["Paint cabinets", "decorate"], ["Swap hardware", "decorate"], ["Hinge tighten", "repair"], ["Slide-out shelves", "organize"], ["Cabinet refacing", "decorate"]] },
    { n: "04", h: "Range", em: "& hood.",
      d: "Cooktops, ovens, ventilation, and the burnt-on stuff above it all.",
      links: [["Self-clean oven", "clean"], ["Burner ignition", "repair"], ["Range hood deep-clean", "clean"], ["Vent install", "install"], ["Drip pan swap", "repair"]] },
    { n: "05", h: "Dishwasher", em: "& under-sink.",
      d: "The plumbing zone. Drains, water lines, the cabinet where everything leaks.",
      links: [["Install dishwasher", "install"], ["Won't drain", "repair"], ["Under-sink fix", "repair"], ["Water line repair", "repair"], ["Detergent dispenser", "repair"]] },
    { n: "06", h: "Pantry", em: "& storage.",
      d: "Where the food lives. Where the chaos starts. Where the systems pay off.",
      links: [["Pantry reset", "organize"], ["Pull-out shelves", "organize"], ["Spice wall", "organize"], ["Tupperware system", "organize"], ["Deep pantry hacks", "organize"]] },
    { n: "07", h: "Lighting", em: "& outlets.",
      d: "Pendants, under-cabinet, recessed, and the GFCI you should already have.",
      links: [["Pendant install", "install"], ["Under-cabinet LEDs", "install"], ["GFCI outlet", "install"], ["Switch upgrade", "install"], ["Dimmer install", "install"]] },
    { n: "08", h: "Floors", em: "& walls.",
      d: "The frame around everything. Tile, paint, baseboard, the dent in the drywall.",
      links: [["Patch drywall", "repair"], ["Paint trim", "decorate"], ["Refinish floor", "build"], ["Replace tile", "install"], ["Baseboard caulk", "repair"]] },
  ];
  return (
    <section className="kr-anatomy">
      <div className="kr-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Kitchen, By the Part</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="kr-anatomy-head">
          <h2>Eight parts of a kitchen, <em>and the guides that fix them.</em></h2>
          <p className="deck">If you came here with a problem in a specific part of the kitchen — start with the part. We'll route you to the verb from there.</p>
        </div>
        <div className="kr-anatomy-grid">
          {parts.map(p => (
            <div className="kr-anatomy-cell" key={p.n}>
              <div className="n">№ {p.n}</div>
              <h4>{p.h} <em>{p.em}</em></h4>
              <p>{p.d}</p>
              <div className="links">
                {p.links.map(([label, lane], i) => (
                  <React.Fragment key={label}>
                    <a href={`/en/kitchen/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const KitchenFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the highest-impact, lowest-cost kitchen project?",
      a: "Cabinet hardware. A weekend afternoon, $80 in pulls and knobs, and the room reads as updated for the price of a single takeout dinner. After that: paint cabinets (a long weekend, $200, transformative) and a tile backsplash (one weekend, around $220, life-changing)." },
    { q: "Do I need to hire a plumber to install a new faucet?",
      a: "Almost never, for a like-for-like swap. If your existing faucet has shutoffs that work and you're putting in a faucet with the same hole pattern, it's a 90-minute job with two adjustable wrenches and some plumber's tape. Hire a plumber if you're moving the supply lines, adding a pot filler, or your shutoffs are seized — that last one is the most common reason a swap turns into a service call." },
    { q: "Can I install a backsplash over existing tile or wallpaper?",
      a: "Tile-over-tile is technically possible if the existing tile is dead flat and well-bonded — but we don't recommend it for first-timers. Wallpaper, never. Strip it, skim-coat the drywall, then tile. The hour you save by tiling over the old surface is the hour you'll spend re-doing the entire wall in two years." },
    { q: "What's the right way to clean stone countertops?",
      a: "Warm water, a drop of mild dish soap, microfiber cloth. That's it. Skip vinegar (etches marble, limestone, travertine), bleach (degrades sealer on granite), and the entire aisle of \"natural stone cleaners\" — most are marketing. Reseal granite once a year; quartz never needs sealing." },
    { q: "How do I know if my kitchen needs a permit for a renovation?",
      a: "If you're moving plumbing, gas, or electrical circuits, almost certainly yes. If you're swapping like-for-like (faucet, dishwasher, range), almost certainly no. Cabinets and surfaces fall in between — most jurisdictions don't require a permit for finish-only work, but check your local building department's website. They almost all have a one-pager for kitchen remodels." },
    { q: "Should I refinish my cabinets or replace them?",
      a: "If the boxes are solid wood, plywood, or in good condition, refinish. You'll spend 10–20% of replacement cost for 80% of the visual impact. Replace if the boxes are particle board that's swollen from leaks, the layout doesn't work for how you cook, or you're going from face-frame to frameless. Otherwise: paint, hardware, and call it a remodel." },
  ];
  return (
    <section className="kr-faq">
      <div className="section-folio">
        <span>Reader Questions · Kitchen, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="kr-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they kitchen.</em></h2>
      </div>
      <div className="kr-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`kr-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="kr-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="kr-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const SISTERS = [
  { name: "Bathroom",    slug: "bathroom",    ct: "284 guides", img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Living Room", slug: "living-room", ct: "247 guides", img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Bedroom",     slug: "bedroom",     ct: "198 guides", img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", ct: "172 guides", img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Garage",      slug: "garage",      ct: "133 guides", img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
];

const KitchenSisters = () => (
  <section className="kr-sisters">
    <div className="kr-sisters-wrap">
      <div className="kr-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="kr-sisters-grid">
        {SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="kr-sister">
            <div className="img" style={{ backgroundImage: `url(${s.img})` }} />
            <div className="meta">
              <div className="nm">{s.name}</div>
              <div className="ct">{s.ct}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const KitchenColophon = () => (
  <section className="kr-colophon">
    <h2>Found what you're <em>fixing?</em></h2>
    <p>Every kitchen guide on HowTo is written by someone who did the project in their own home. Pick a verb and start exploring.</p>
    <a href="#kr-menu" className="go">Browse kitchen projects  →</a>
  </section>
);

window.KitchenHero      = KitchenHero;
window.KitchenMenu      = KitchenMenu;
window.KitchenEssay     = KitchenEssay;
window.KitchenPick      = KitchenPick;
window.KitchenIndex     = KitchenIndex;
window.KitchenMistakes  = KitchenMistakes;
window.KitchenFilters   = KitchenFilters;
window.KitchenAnatomy   = KitchenAnatomy;
window.KitchenFaq       = KitchenFaq;
window.KitchenSisters   = KitchenSisters;
window.KitchenColophon  = KitchenColophon;