/* /en/clean — Production Clean L1 Hub */

const CleanHero = () => (
  <section className="cln-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=2400&q=85')" }} />
    <div className="cover-masthead">
      <span>HowTo Quarterly · Vol. VI</span>
      <span className="ctr">The Clean Issue</span>
      <span className="right">№ 06 / Spring 2026</span>
    </div>
    <div className="cover-content">
      <div>
        <div className="cover-eyebrow">Clean · A Field Guide</div>
        <h1>The room you'd <em>photograph.</em></h1>
      </div>
      <div>
        <p className="deck">
          The room you live in vs. the room you'd photograph. 196 deep-clean guides for every surface in your home — tile grout, hardwood floors, oven interiors, mattresses, and everything in between.
        </p>
        <div className="cover-meta">
          <div><span className="k">Section</span><span className="v">Clean</span></div>
          <div><span className="k">Guides</span><span className="v">196 and counting</span></div>
          <div><span className="k">Reading time</span><span className="v">9 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 Clean Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="essay-grid">
        <aside className="essay-side">
          <h2>The gap between the room you <em>have</em> and the room you want.</h2>
          <div className="by">By the Editors · 9 min read</div>
        </aside>
        <div className="essay-body">
          <p className="dropcap">
            Every room in your house exists in two states simultaneously. There's the room you live in — the one where grease accumulates behind the stove and the tile grout has slowly turned from white to the color of old concrete and the mattress has been on the bed for four years without a single baking soda treatment. And there's the room you'd photograph — the one where the light comes through the window and hits a floor that actually reflects, where the bathroom tile looks the way it did the week it was installed, where opening the oven to preheat it doesn't immediately smell like the last six months of cooking.
          </p>
          <p>
            The gap between those two rooms is not a renovation. It's a deep clean. That's the whole thesis of this lane: most of what makes a home feel worn and tired is not structural, not irreversible, and not expensive to address. It's accumulated. It responds to the right product, the right tool, and the willingness to spend a Saturday morning on your knees with a grout brush and a bowl of oxygen bleach paste.
          </p>
          <div className="pull">
            "The bathroom looks different. Not renovated. Recovered."
          </div>
          <p>
            That's the specific satisfaction of a deep clean — and it's different from any other project in this house. Install gives you something new. Build gives you something you made. Clean gives you back something that was already there.
          </p>
          <p>
            Below, the menu. Pick a room. Pick a surface. We'll show you how to get it back.
          </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-1584622781867-1c5fe959b541?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 Clean · Bathroom</div>
        <h3>How to deep-clean tile <em>grout.</em></h3>
        <p>
          The single most visible deep-clean project in any bathroom — and the one with the sharpest before-and-after. Oxygen bleach paste, a grout brush, and forty-five minutes of actual effort. The grout lines go from gray to white. The bathroom looks renovated when nothing has been replaced.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Beginner</span>
          <span><span className="dot"></span>60–90 min</span>
          <span><span className="dot"></span>$10 in supplies</span>
        </div>
        <a href="/en/bathroom/clean/how-to-deep-clean-grout/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const CLEAN_ROOMS = [
  { name: "Kitchen",      slug: "kitchen",      desc: "Oven interiors, range hoods, tile grout, refrigerator coils — the surfaces where grease accumulates out of sight.", count: 32, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",     slug: "bathroom",     desc: "Grout, glass shower doors, soap scum on chrome, exhaust fans, and the showerhead that needs a vinegar soak.", count: 28, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Bedroom",      slug: "bedroom",      desc: "Mattress deep-cleans, pillow washing, duvet care, closets, ceiling fans, and the blinds that collect dust along their faces.", count: 18, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Living Room",  slug: "living-room",  desc: "Upholstery, hardwood floors, carpet stains, baseboards, window treatments, and the TV screen that accumulates its own layer.", count: 22, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", desc: "Tool cleaning and sharpening, planter soil refresh, birdbath algae, patio umbrellas, and end-of-season bed cleanup.", count: 26, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Garage",       slug: "garage",       desc: "Concrete floor degreasing, tool rust removal, cabinet wipe-down, and the car interior detail that replaces a professional appointment.", count: 14, img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     desc: "Surface mold remediation, musty-odor elimination, sump pit cleaning, and dryer vent maintenance.", count: 12, img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",        slug: "attic",        desc: "Attic fan cleaning, ventilation-path clearing, and the safety-first protocols for working in high-heat stored spaces.", count: 6, img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     desc: "Power-washing siding, gutter cleaning, no-streak window washing, concrete stain removal, and deck cleaning before refinishing.", count: 22, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Deck & Patio", slug: "deck-patio",   desc: "Composite vs. wood deck cleaning, natural stone patio care, concrete paver maintenance, and outdoor fabric rescue.", count: 16, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
];

const CleanRooms = () => {
  const total = CLEAN_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 surface.</em></h2>
          <p className="deck">{total} clean guides across {CLEAN_ROOMS.length} rooms — every one written by someone who has actually done the scrubbing.</p>
        </div>

        <div className="rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="acc-row" key={rowIdx}>
              {CLEAN_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 CleanFilters = () => (
  <section className="filters">
    <div className="filters-grid">
      <div className="filter-block">
        <span className="label">Sort · By Time Available</span>
        <h3>How much time do you have today?</h3>
        <div className="filter-pills">
          <a href="/en/clean/" className="pill">Under an hour <span className="ct">68</span></a>
          <a href="/en/clean/" className="pill">A morning <span className="ct">74</span></a>
          <a href="/en/clean/" className="pill">A full day <span className="ct">38</span></a>
          <a href="/en/clean/" className="pill">Overnight soak <span className="ct">16</span></a>
        </div>
      </div>
      <div className="filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>How hands-on are you ready to get?</h3>
        <div className="filter-pills">
          <a href="/en/clean/" className="pill">Beginner <span className="ct">142</span></a>
          <a href="/en/clean/" className="pill">Intermediate <span className="ct">44</span></a>
          <a href="/en/clean/" className="pill">Advanced <span className="ct">10</span></a>
        </div>
      </div>
    </div>
  </section>
);

const CleanDecide = () => (
  <section className="decide">
    <div className="section-folio">
      <span>The Decision · DIY vs. Call a Pro</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="decide-head">
      <h2>When to clean it <em>yourself</em>, and when to call.</h2>
      <p className="deck">The honest list. Most cleaning is within reach. A few situations genuinely aren't — and conflating them is how you make a small problem into a bigger one.</p>
    </div>
    <div className="decide-cols">
      <div className="decide-col">
        <span className="label">Clean it · Yourself</span>
        <h3>Go for it if <em>you can…</em></h3>
        <ul>
          <li>Clean tile grout, glass, porcelain, and chrome fixtures</li>
          <li>Deep-clean ovens, range hoods, and refrigerator coils</li>
          <li>Remove surface mold from bathroom caulk and basement walls (under 10 sq ft)</li>
          <li>Refresh hardwood floors, clean upholstery and mattresses</li>
          <li>Power-wash siding, clean gutters, wash exterior windows</li>
          <li>Clean and degrease concrete floors and garden tools</li>
        </ul>
      </div>
      <div className="decide-col">
        <span className="label">Call a Pro · For These</span>
        <h3>Hire a professional <em>when…</em></h3>
        <ul>
          <li>Mold covers more than 10 square feet or is inside walls or HVAC</li>
          <li>Post-construction dust remediation (requires HEPA industrial vacuuming)</li>
          <li>Sewage backup or biohazard cleanup</li>
          <li>Chimney cleaning and creosote removal</li>
          <li>Hoarding cleanout — the logistics and sensitivity require trained crews</li>
          <li>Any remediation where you'd need to wear a respirator all day</li>
        </ul>
      </div>
    </div>
  </section>
);

const CleanMistakes = () => {
  const items = [
    { h: "Over-wetting hardwood floors",            p: "Steam mops and sopping-wet mops force moisture past the finish and into the wood. A wrung-almost-dry cloth is the correct technique. If you can see standing water, you've already applied too much." },
    { h: "Using acid on natural stone",             p: "White vinegar, lemon juice, and many bathroom sprays will chemically etch marble, limestone, and travertine on contact. The dull, frosted patch left behind cannot be fixed without professional re-polishing. Use pH-neutral stone cleaner only." },
    { h: "Skipping the dwell time",                 p: "Spraying and immediately wiping is roughly 40% as effective as applying, waiting 5–10 minutes, and then wiping. Oxygen bleach on grout needs 15–20 minutes of contact before you scrub. Read the label." },
    { h: "Using chlorine bleach on grout",          p: "Chlorine bleach whitens grout for about three weeks, then degrades the grout itself with repeated use. Oxygen bleach (sodium percarbonate) cleans more effectively, lasts longer, and doesn't damage the grout." },
    { h: "Scrubbing pads on porcelain",             p: "Green abrasive scrubbies scratch through the porcelain glaze over time, creating a rough surface that traps stains permanently. Use soft cloths, grout brushes, or a wet pumice stone for hard water rings only." },
    { h: "Cleaning wet over dry",                   p: "Vacuum or dry-brush loose debris before applying any liquid cleaner. Spraying a dusty surface with a liquid cleaner turns dust into a paste that is harder to remove than either the dust or the grime alone." },
    { h: "Spraying cleaner directly onto screens",  p: "Spray the cloth, not the surface. Liquid that runs into the bezel of a TV screen or the control panel of an appliance has destroyed more screens and circuits than anyone would like to admit." },
    { h: "Forgetting the rinse",                    p: "Soap residue on tile and grout re-attracts dirt within days. The bathroom looks freshly cleaned and gray again within a week because the cleaning solution was never fully rinsed. Rinse with clean water. Then dry. Then done." },
  ];
  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 cleaning 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 CleanFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the difference between cleaning and deep-cleaning?",
      a: "Daily and weekly cleaning is maintenance — counters, floors, the bathroom quick-clean. Deep cleaning addresses the accumulation that maintenance cleaning doesn't reach: grout lines, oven interiors, mattress surfaces, refrigerator coils, drain vents. This lane covers the latter. The frequency varies by surface: some deep cleans are monthly, some quarterly, some annual. The guides specify when each project should happen." },
    { q: "Is white vinegar really that useful, or is it overhyped?",
      a: "It's both, depending on the task. White vinegar is genuinely excellent at descaling mineral deposits and hard water buildup — showerheads, faucet aerators, kettle interiors. It also works as a glass cleaner cut 1:1 with water. What it's not good for: natural stone (it etches marble and limestone on contact), anything where you need a surfactant to cut grease (vinegar is acid, not soap), and any surface where you've already applied a bleach-based product. Never mix vinegar and bleach — the combination produces chlorine gas." },
    { q: "How do I actually get grout white again without bleach?",
      a: "Oxygen bleach paste. Buy sodium percarbonate powder (OxiClean or similar), mix to a thick paste with warm water, apply to the grout lines, let it dwell for 15–20 minutes, scrub with a dedicated grout brush, and rinse. For heavily darkened grout, a second application the same day often finishes the job the first pass didn't. The results last significantly longer than chlorine bleach and don't degrade the grout with repeated use." },
    { q: "Can I use a steam mop on hardwood floors?",
      a: "No. Steam forces moisture past the finish and into the wood grain, causing swelling, warping, and eventual finish failure. This is true even for engineered hardwood and most premium LVT, despite what some steam mop marketing suggests. For hardwood, use a specifically formulated hardwood floor cleaner (Bona is widely available and well-regarded) with a barely-damp mop. The damp, not wet, distinction is the whole key." },
    { q: "My oven has baked-on black spots that nothing removes. What works?",
      a: "For truly baked-on carbonized spots, the baking-soda-paste overnight method is the right first step — but it sometimes needs two applications for thick carbon. After the paste treatment, a plastic scraper (not metal — it scratches the oven enamel) removes the loosened carbon. For spots that survive two paste treatments, a commercial oven cleaner with sodium hydroxide applied with ventilation and gloves typically finishes the job. The self-clean cycle is a last resort — it produces significant smoke and odor, and the heat stress can damage oven seals." },
    { q: "What's the safest way to clean surface mold in a bathroom?",
      a: "For mold on caulk lines and tile, a diluted bleach solution (1 tablespoon bleach per cup of water) applied with a spray bottle, allowed to dwell for 10 minutes, and wiped away with ventilation handles most bathroom mold. Wear gloves and run the exhaust fan. If the mold is growing on the substrate behind the caulk (visible as dark staining that comes back within weeks of re-caulking), the old caulk needs to be fully removed, the surface treated, dried completely, and re-caulked. If mold covers more than about 10 square feet, that's a professional remediation call." },
  ];
  return (
    <section className="faq">
      <div className="faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they start.</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 CleanColophon = () => (
  <section className="colophon">
    <h2>Found the room you want to <em>recover?</em></h2>
    <p>Pick a room from the menu above and start with the guide that's been sitting in the back of your mind longest. The grout knows.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.CleanHero      = CleanHero;
window.Essay          = Essay;
window.EditorsPick    = EditorsPick;
window.CleanRooms     = CleanRooms;
window.CleanFilters   = CleanFilters;
window.CleanDecide    = CleanDecide;
window.CleanMistakes  = CleanMistakes;
window.CleanFaq       = CleanFaq;
window.CleanColophon  = CleanColophon;