/* /en/repair — Production Repair L1 Hub */

const RepairHero = () => (
  <section className="rep-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504148455328-c376907d081c?w=2400&q=85')" }} />
    <div className="rep-cover-masthead">
      <span>HowTo Quarterly · Vol. IV</span>
      <span className="ctr">The Repair Issue</span>
      <span className="right">№ 04 / Spring 2026</span>
    </div>
    <div className="rep-cover-content">
      <div>
        <div className="rep-cover-eyebrow">Repair · A Field Guide</div>
        <h1>Things break on a schedule. Fix them on <em>yours.</em></h1>
      </div>
      <div>
        <p className="rep-deck">
          A handpicked, carefully written library of repair guides — from the dripping faucet you've been ignoring since Tuesday, to the weekend-long drywall project that finally gets the wall back.
        </p>
        <div className="rep-cover-meta">
          <div><span className="k">Section</span><span className="v">Repair</span></div>
          <div><span className="k">Guides</span><span className="v">312 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={`rep-essay ${dropcap ? "" : "rep-no-dropcap"}`}>
    <div className="rep-essay-wrap">
      <div className="rep-section-folio">
        <span>Editor's Note · The Repair Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="rep-essay-grid">
        <aside className="rep-essay-side">
          <h2>Why we repair <em>ourselves.</em></h2>
          <div className="by">By the Editors · 8 min read</div>
        </aside>
        <div className="rep-essay-body">
          <p className="dropcap">
            There's a particular kind of satisfaction in fixing a thing with your own hands — one you don't get from calling someone else. It lives somewhere between the moment you finally hear the toilet stop running and the moment you realize the drip under the kitchen sink hasn't come back in three weeks. Not pride, exactly. More like competence. The quiet, lasting kind.
          </p>
          <p>
            Most home repairs feel more intimidating than they are. The problem isn't difficulty — it's unfamiliarity. Once you've replaced a flapper valve for the first time and understood why the toilet was running, the second one takes twelve minutes. Once you've patched a drywall hole and understood how joint compound cures, you stop dreading the next one.
          </p>
          <div className="rep-pull">
            "A repaired house is not a fixed house. It's a known house."
          </div>
          <p>
            That's the real payoff. Not just the thing that isn't dripping anymore, but the fact that you now know how it works. A repaired house is not a fixed house — it's a <em>known</em> house. You've opened the wall. You've seen the pipes. You understand the system. That knowledge compounds: every repair you do makes the next one easier, cheaper, and faster. The tenth time you've reset a GFCI outlet takes forty-five seconds. The first time took twenty minutes of uncertainty.
          </p>
          <p>
            Below, the menu. Pick a room. Pick a repair. We'll show you exactly how.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const EditorsPick = () => (
  <section className="rep-pick">
    <div className="rep-pick-spread">
      <div className="rep-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=1800&q=85')" }}>
        <div className="rep-stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="rep-pick-text">
        <div className="rep-eyebrow">Featured Repair · Kitchen</div>
        <h3>How to fix a leaky kitchen <em>faucet.</em></h3>
        <p>
          The single most-reported repair in American households, and one of the most satisfying to fix yourself. A steady drip wastes up to 3,000 gallons a year — and most faucet leaks trace to a worn cartridge or O-ring that costs $8 at the hardware store.
        </p>
        <div className="rep-meta">
          <span><span className="rep-dot"></span>Beginner</span>
          <span><span className="rep-dot"></span>30–90 min</span>
          <span><span className="rep-dot"></span>$5–30 in parts</span>
        </div>
        <a href="/en/kitchen/repair/how-to-fix-a-leaky-kitchen-faucet/" className="rep-read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const REP_ROOMS = [
  { name: "Kitchen",      slug: "kitchen",      desc: "Leaky faucets, broken garbage disposals, failing drain seals, and the cabinet door that's been off its hinge since spring.", count: 58, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",     slug: "bathroom",     desc: "Running toilets, slow drains, cracked caulk, and the exhaust fan that stopped exhausting three winters ago.", count: 49, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Bedroom",      slug: "bedroom",      desc: "Squeaky floors, sticking doors, broken closet hardware, and the window that stopped latching after the last paint job.", count: 22, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Living Room",  slug: "living-room",  desc: "Scratched hardwood, sagging outlets, cracked plaster, and the ceiling fan that wobbles loud enough to hear from the kitchen.", count: 28, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", desc: "Broken sprinkler heads, splintered fence rails, gate hinges that gave up, and irrigation lines that went from drip to gush.", count: 27, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Garage",       slug: "garage",       desc: "Opener remotes, broken springs, unresponsive sensors, and the concrete floor crack that's been spreading since the freeze.", count: 31, img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     desc: "Sump pump failures, water intrusion at the base of the wall, humidity control, and the sump that runs every four minutes.", count: 24, img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",        slug: "attic",        desc: "Air leaks around hatch frames, insulation compression, rodent entry points, and ventilation that's been blocked by the previous owners.", count: 11, img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     desc: "Cracked caulk around windows, peeling paint, loose siding, broken gutters, and the downspout that drains directly into the foundation.", count: 38, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Deck & Patio", slug: "deck-patio",   desc: "Splintered boards, loose railings, popped deck screws, and the concrete patio crack that opened up after last winter's frost heave.", count: 24, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
];

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

        <div className="rep-rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="rep-acc-row" key={rowIdx}>
              {REP_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}/repair/`}
                    className={`rep-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 RepairFilters = () => (
  <section className="rep-filters">
    <div className="rep-filters-grid">
      <div className="rep-filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>What have you fixed before?</h3>
        <div className="filter-pills">
          <a href="/en/repair/" className="pill">Beginner <span className="ct">142</span></a>
          <a href="/en/repair/" className="pill">Intermediate <span className="ct">118</span></a>
          <a href="/en/repair/" className="pill">Advanced <span className="ct">52</span></a>
        </div>
      </div>
      <div className="rep-filter-block">
        <span className="label">Sort · By Time</span>
        <h3>How much time before guests arrive?</h3>
        <div className="filter-pills">
          <a href="/en/repair/" className="pill">Under 30 min <span className="ct">87</span></a>
          <a href="/en/repair/" className="pill">Under 2 hours <span className="ct">109</span></a>
          <a href="/en/repair/" className="pill">A Saturday <span className="ct">76</span></a>
          <a href="/en/repair/" className="pill">Multi-day <span className="ct">40</span></a>
        </div>
      </div>
    </div>
  </section>
);

const RepairDecide = () => (
  <section className="rep-decide">
    <div className="rep-section-folio">
      <span>The Decision · Repair vs. Call a Pro</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="rep-decide-head">
      <h2>When to fix it <em>yourself</em>, and when to call.</h2>
      <p className="rep-deck">A short, honest list. We'd rather you call a plumber than flood the subfloor on our behalf.</p>
    </div>
    <div className="rep-decide-cols">
      <div className="rep-decide-col">
        <span className="label">Fix it · Yourself</span>
        <h3>Go for it if <em>you can…</em></h3>
        <ul>
          <li>Replace a faucet cartridge, O-ring, or aerator</li>
          <li>Fix a running toilet (flapper, fill valve, or flush valve)</li>
          <li>Patch drywall holes up to about 6 inches across</li>
          <li>Reset a tripped GFCI outlet or reset a tripped breaker</li>
          <li>Re-caulk a tub, shower surround, or window frame</li>
          <li>Balance a wobbly ceiling fan, rehang a cabinet door</li>
          <li>Repair a splintered deck board or popped screw</li>
          <li>Unclog a drain (P-trap first, then augur if needed)</li>
        </ul>
      </div>
      <div className="rep-decide-col">
        <span className="label">Hire it · Out</span>
        <h3>Call a pro <em>when…</em></h3>
        <ul>
          <li>The pipe is in the wall, not under the sink</li>
          <li>You smell gas. Stop, leave, call the gas company.</li>
          <li>The panel is involved — a breaker that keeps tripping needs an electrician</li>
          <li>The crack in the foundation is new, wide, or wet</li>
          <li>The roof has active damage — tarping is fine, repairs aren't</li>
          <li>HVAC refrigerant or heat exchanger work</li>
          <li>Your gut says no. Trust the gut.</li>
        </ul>
      </div>
    </div>
  </section>
);

const RepairMistakes = () => {
  const items = [
    { h: "Fixing the symptom, not the source",        p: "A leaking drain pipe under the sink is easy to spot. A failing wax ring, cracked supply line, or rusted shutoff valve behind the drip is why the symptom keeps coming back. Follow the water up before you patch." },
    { h: "Skipping the shutoff test",                 p: "Before you start any plumbing repair, turn the shutoff valve, then open the faucet. Confirm the water is fully off. A shutoff that's been stuck open for ten years may not fully close — find out before you've disconnected the supply line." },
    { h: "Matching by look instead of part number",   p: "Faucet cartridges, flapper valves, and toilet fill valves look interchangeable until they're not. Bring the old part to the hardware store, or photograph the model number on the fixture before leaving the house." },
    { h: "Skipping the drywall cure time",            p: "Joint compound isn't dry when it looks dry. It's dry when it's bright white all the way through — which can take 24 hours per coat in humid conditions. Sand before it cures and the compound tears. Prime before it dries and the paint bubbles." },
    { h: "Over-tightening compression fittings",      p: "The supply line nut under a toilet or sink gets snug plus a quarter turn. Not snug-plus-everything-you-have. Over-tightened compression fittings crack and leak; under-tightened ones drip. Hand-tight plus quarter-turn is the correct torque." },
    { h: "Calling it done before testing under load", p: "Turn the water back on, fill the tank, flush twice, and stay on the floor with a dry paper towel underneath for five minutes. An absence of visible drip at low pressure is not the same as no leak. Test under actual working conditions before packing up tools." },
    { h: "Painting over cracked caulk instead of replacing it", p: "Caulk that has separated from the substrate will separate again after painting. The correct sequence: remove all old caulk with a plastic scraper and solvent, let dry 24 hours, apply new caulk in one smooth bead, let cure per the manufacturer spec, then — and only then — prime and paint." },
    { h: "Ignoring the repair until it gets worse",   p: "A dripping faucet at one drip per second wastes about 3,000 gallons per year. A running toilet wastes 200 gallons per day. Most repairs double or triple in cost and complexity when deferred six months. The best time to fix it was the day you noticed it. The second best time is today." },
  ];
  return (
    <section className="rep-mistakes">
      <div className="rep-mistakes-wrap">
        <div className="rep-section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · From Our Editors</span>
          <span className="pg">PG. 32</span>
        </div>
        <div className="rep-mistakes-head">
          <h2>Eight repair mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="rep-mistakes-grid">
          {items.map((m, i) => (
            <div className="rep-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 RepairFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Do I need to turn off the main water to fix a faucet?",
      a: "Not usually. Every sink and toilet in a modern home has its own shutoff valve — the oval-handled valve under the sink or behind the toilet. Turn that, test that the water is off at the faucet, and work from there. The main shutoff is only necessary when the individual shutoff is broken or missing." },
    { q: "What tools do I actually need for most home repairs?",
      a: "A cordless drill, a set of flat and Phillips screwdrivers, needle-nose pliers, an adjustable wrench, a putty knife, a utility knife, a small hacksaw, a bubble level, and a non-contact voltage tester. That kit covers roughly 80% of the repairs on this site. Add a plumber's snake and a drywall repair kit and you're at 95%." },
    { q: "How do I know if a crack in the wall is cosmetic or structural?",
      a: "Hairline cracks in drywall or plaster — especially horizontal ones near windows and doors — are almost always cosmetic settling. Wide cracks (over 1/4 inch), diagonal cracks running from window corners, or any crack that keeps reopening after repair are worth a structural inspection. New cracks that appeared after heavy rain, a nearby excavation, or a hard freeze are also worth professional eyes." },
    { q: "Is a running toilet actually worth fixing myself?",
      a: "Yes, immediately. A running toilet can waste 200 gallons of water per day — at most U.S. utility rates, that's $10–$30 extra per month. A replacement flapper costs $4 and takes 10 minutes. A replacement fill valve costs $12 and takes 25 minutes. Even if you've never opened a toilet tank before, this is the single highest-ROI repair on the site." },
    { q: "How long does drywall joint compound take to dry?",
      a: "At least 24 hours per coat in normal conditions — longer in humid rooms, basements, or bathrooms. The compound will look lighter at the edges and darker in the center until it's fully cured. Do not sand or apply the next coat until the entire patched area is uniformly bright white. Rushing this step is the most common reason drywall repairs need to be redone." },
    { q: "What if I start a repair and discover something unexpected behind the wall?",
      a: "Stop, photograph everything you can see, and step back. Unexpected finds usually fall into one of three categories: old pipe materials (galvanized steel, lead), wiring that doesn't match the switch/outlet you were touching, or moisture damage that's been there a while. In all three cases the repair scope has changed — this is a pro call, and the photo documentation will help them quote accurately." },
  ];
  return (
    <section className="rep-faq">
      <div className="rep-faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they repair.</em></h2>
      </div>
      <div className="rep-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`rep-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="rep-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="rep-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const RepairColophon = () => (
  <section className="rep-colophon">
    <h2>Found what you're <em>repairing?</em></h2>
    <p>Every guide on HowTo is written by someone who did the repair in their own home. Pick a room and stop putting it off.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.RepairHero      = RepairHero;
window.Essay           = Essay;
window.EditorsPick     = EditorsPick;
window.RepairRooms     = RepairRooms;
window.RepairFilters   = RepairFilters;
window.RepairDecide    = RepairDecide;
window.RepairMistakes  = RepairMistakes;
window.RepairFaq       = RepairFaq;
window.RepairColophon  = RepairColophon;