/* /en/bathroom — Production Bathroom Room Hub */

const BathroomHero = () => (
  <section className="br-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=2400&q=85')" }} />
    <div className="br-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Bathroom
      </span>
      <span className="ctr">HowTo Quarterly · Vol. II / The Bathroom Issue</span>
      <span className="right">№ 02 / Spring 2026</span>
    </div>
    <div className="br-cover">
      <div>
        <div className="eyebrow">Room Guide · Bathroom</div>
        <h1>The smallest room with the <em>highest stakes.</em></h1>
      </div>
      <div>
        <p className="deck">
          163 bathroom guides across six task lanes — repair, install, build, clean, organize, decorate — every one written by someone who did it in their own bathroom with the water shut off.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Bathroom</span></div>
          <div><span className="k">Guides</span><span className="v">163 total</span></div>
          <div><span className="k">Reading time</span><span className="v">10 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const BATH_ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's leaking.",
    lede: "The dripping showerhead, the running toilet, the grout that's crumbling. Bathroom repair is mostly water — diagnose before you tear into it.",
    bg: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=1400&q=80",
    examples: "Running toilet · Dripping showerhead · Caulk failure · Slow drain · Loose towel bar · Cracked tile",
    count: 49,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what's new.",
    lede: "Toilets, showerheads, vanity lights, exhaust fans, tile, mirrors. Install is the bathroom's biggest lane — and the highest-ROI one.",
    bg: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1400&q=80",
    examples: "Toilet · Showerhead · Vanity light · Exhaust fan · Tile shower wall · Mirror · Towel warmer · GFCI outlet",
    count: 51,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from scratch.",
    lede: "A floating vanity, a teak shower bench, the built-in niche that replaced the corner caddy. Small room, precise work.",
    bg: "https://images.unsplash.com/photo-1560185007-cde436f6a4d0?w=1400&q=80",
    examples: "Shower niche · Floating vanity · Teak bench · Mirror frame · Built-in shelves · Linen tower",
    count: 9,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what won't quit.",
    lede: "Grout that's gone gray, hard-water rings, soap scum on glass, mildew behind the toilet. Boring. Necessary. Well-tested.",
    bg: "https://images.unsplash.com/photo-1563453392212-326f5e854473?w=1400&q=80",
    examples: "Tile grout · Shower glass · Hard water stains · Toilet deep clean · Exhaust fan · Drain smell · Caulk mildew",
    count: 28,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the chaos.",
    lede: "Under-sink disasters, medicine cabinets that won't close, towels piled on towel bars, products with nowhere to go.",
    bg: "https://images.unsplash.com/photo-1588854337236-6889d631faa8?w=1400&q=80",
    examples: "Under-sink bins · Medicine cabinet reset · Towel system · Counter edit · Door hooks · Linen closet overhaul",
    count: 15,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the room.",
    lede: "Paint, mirrors, hardware finishes, lighting upgrades. Small rooms amplify every decision — the choices that look effortless take the most care.",
    bg: "https://images.unsplash.com/photo-1619542402915-dcaf30e4e2a1?w=1400&q=80",
    examples: "Paint small bathroom · Swap hardware · Mirror upgrade · Vanity lighting · Wallpaper accent · Art placement",
    count: 11,
  },
];

const BathroomMenu = () => (
  <section className="br-menu">
    <div className="br-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Bathroom, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="br-menu-head">
        <h2>Six things to do <em>in a bathroom.</em></h2>
        <p className="deck">
          Every project on this site lives at the intersection of a room and a verb. You're in the bathroom — pick a verb.
        </p>
      </div>
      <div className="br-actions">
        {BATH_ACTIONS.map(a => (
          <a key={a.name} href={`/en/bathroom/${a.slug}/`} className="br-act">
            <div className="br-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 BathroomEssay = () => (
  <section className="br-essay">
    <div className="br-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(107,138,168,0.28)" }}>
        <span>Editor's Note · The Bathroom, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="br-essay-grid">
        <aside className="br-essay-side">
          <h2>The room with the <em>highest stakes.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. visits per day</span><strong>12</strong></div>
            <div className="row"><span>Sq ft (avg bath)</span><strong>50</strong></div>
            <div className="row"><span>Most-googled verb</span><strong>"fix"</strong></div>
            <div className="row"><span>Water leak risk</span><strong>high</strong></div>
          </div>
        </aside>
        <div className="br-essay-body">
          <p className="dropcap">
            The bathroom is the smallest room in the house and the most demanding one per square foot. Every surface is in constant contact with water. Every electrical outlet has to be GFCI-protected or code doesn't care that it was installed in 1998. Every tile joint is a potential water intrusion point. The stakes are real — a bathroom leak that goes unnoticed for six months is a mold remediation and a subfloor replacement, not a weekend project. This is the room where the word "waterproof" is not decorative.
          </p>
          <p>
            Which is why we organized this hub the way you actually need it. If you came here with a dripping faucet, go straight to <a href="/en/bathroom/repair/">Repair</a>. If you finally bought that showerhead you've been eyeing, go to <a href="/en/bathroom/install/">Install</a>. If the grout has been going gray for two years and it's starting to bother you every single morning, <a href="/en/bathroom/clean/">Clean</a> is exactly what it sounds like.
          </p>
          <div className="pull">
            "In the bathroom, every shortcut comes out eventually — usually through the ceiling of the room below."
          </div>
          <p>
            Below: the featured project of the season, the most-read bathroom guides, six specific mistakes that show up on our reader inbox more than any others, and a zone diagram you can use to find the guide for the specific part of the bathroom that's giving you trouble. Pick a verb. Pick a zone. We'll show you how it's done — carefully, with the water off.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const BathroomPick = () => (
  <section className="br-pick">
    <div className="br-pick-spread">
      <div className="br-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="br-pick-text">
        <div className="eyebrow">Featured Project · Bathroom, Install</div>
        <h3>How to install a <em>toilet</em> — the right way, the first time.</h3>
        <p>
          A toilet swap is one of the most satisfying bathroom installs a homeowner can do. The wax ring, the bolts, the water supply line — done right in two hours, never touched again. We cover every step, including the one where you check the flange before you set anything.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>2 hours</span>
          <span><span className="dot"></span>$150–500</span>
          <span><span className="dot"></span>10 steps</span>
        </div>
        <a href="/en/bathroom/install/how-to-install-a-toilet/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

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

const BathroomIndex = () => {
  const cols = [
    {
      title: "Most-read this month",
      count: "One per lane",
      items: [
        ["01", "How to fix a running toilet",              "Repair · 30 min"],
        ["02", "How to install a showerhead",              "Install · 20 min"],
        ["03", "How to build a shower niche",              "Build · weekend"],
        ["04", "How to deep-clean tile grout",             "Clean · 60 min"],
        ["05", "How to organize under the sink",           "Organize · 2 hrs"],
        ["06", "How to paint a small bathroom",            "Decorate · 4 hrs"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to re-caulk a bathtub surround",       "Repair · 2 hrs"],
        ["02", "How to install a toilet",                  "Install · 2 hrs"],
        ["03", "How to frame a bathroom mirror",           "Build · afternoon"],
        ["04", "How to remove hard water stains",          "Clean · 45 min"],
        ["05", "How to reset a medicine cabinet",          "Organize · 1 hr"],
        ["06", "How to swap vanity hardware",              "Decorate · 1 hr"],
      ],
    },
  ];
  return (
    <section className="br-index">
      <div className="br-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read bathroom guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="br-index-head">
          <h2>What people came here <em>to fix.</em></h2>
          <div className="right">As of <strong>April 2026</strong> · live ranking</div>
        </div>
        <div className="br-index-grid">
          {cols.map(c => (
            <div className="br-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="br-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={bathLaneHref(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 BathroomMistakes = () => {
  const items = [
    { h: "Caulking before the silicone has cured — and using the shower in 24 hours",
      p: "Silicone caulk needs a full 24 hours to cure before water exposure. Use the bathroom before that and you've compromised the seal before it had a chance to form. Budget the 24 hours. Use the other bathroom or the gym. It's one day." },
    { h: "Using sanded grout in joints under 1/8 inch",
      p: "Sanded grout contains fine aggregate that's sized for joints 1/8 inch and wider. Use it in a narrow joint and it cracks as it cures — you'll see it within a month. Narrow joints (shower tile, mosaic, subway tile) need unsanded grout. Read the bag." },
    { h: "Installing a bathroom fan without ducting it outside",
      p: "A fan vented into the attic is a moisture delivery system. You're pumping warm, humid air directly into your insulation and roof decking — which means mold, rot, and eventually a structural problem. Every bathroom exhaust fan must terminate outdoors through a wall cap or roof vent. No exceptions." },
    { h: "Over-tightening the toilet hold-down bolts",
      p: "The toilet base is vitreous china — ceramic, essentially. Crank the hold-down bolts too tight and you'll crack the base right at the flange. Snug is enough: hand-tight plus about a quarter turn. If it still rocks, the floor is uneven — use shims, don't torque." },
    { h: "Painting a bathroom before sealing the tub and shower surround",
      p: "Steam and splash from the bathtub wick behind paint at the seam between tub and drywall. Seal first — fresh bead of silicone caulk, fully cured — then paint. If you paint first, moisture gets behind the paint at the seam and peels the wall. Do it in the right order." },
    { h: "Reusing the old wax ring when re-setting a toilet",
      p: "A wax ring is a single-use part. It costs $4 at any hardware store and takes 30 seconds to install. Reusing the old one, even if it looks fine, is a gamble on a $4 part that, if it loses, means raw sewage under your bathroom floor. Always. New. Ring." },
  ];
  return (
    <section className="br-mistakes">
      <div className="br-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Bathroom Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="br-mistakes-head">
          <h2>Six bathroom mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="br-mistakes-grid">
          {items.map((m, i) => (
            <div className="br-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 BathroomFilters = () => (
  <section className="br-filters">
    <div className="br-filters-grid">
      <div className="br-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="br-pills">
          <a href="/en/bathroom/" className="br-pill">Beginner <span className="ct">74</span></a>
          <a href="/en/bathroom/" className="br-pill">Intermediate <span className="ct">68</span></a>
          <a href="/en/bathroom/" className="br-pill">Advanced <span className="ct">21</span></a>
        </div>
      </div>
      <div className="br-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="br-pills">
          <a href="/en/bathroom/" className="br-pill">Under an hour <span className="ct">38</span></a>
          <a href="/en/bathroom/" className="br-pill">A morning <span className="ct">44</span></a>
          <a href="/en/bathroom/" className="br-pill">A full day <span className="ct">52</span></a>
          <a href="/en/bathroom/" className="br-pill">A weekend <span className="ct">29</span></a>
        </div>
      </div>
      <div className="br-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="br-pills">
          <a href="/en/bathroom/" className="br-pill">$0 — $25 <span className="ct">42</span></a>
          <a href="/en/bathroom/" className="br-pill">$25 — $200 <span className="ct">66</span></a>
          <a href="/en/bathroom/" className="br-pill">$200 — $800 <span className="ct">38</span></a>
          <a href="/en/bathroom/" className="br-pill">$800+ <span className="ct">17</span></a>
        </div>
      </div>
    </div>
  </section>
);

const BathroomAnatomy = () => {
  const parts = [
    { n: "01", h: "Wet zone", em: "shower & tub.",
      d: "The highest-stakes square footage in the room. Tile, caulk, waterproofing, grout.",
      links: [["Tile shower wall", "install"], ["Re-caulk tub", "repair"], ["Clean grout", "clean"], ["Build shower niche", "build"], ["Showerhead install", "install"]] },
    { n: "02", h: "Vanity zone", em: "sink, mirror, light.",
      d: "Faucet, drain, mirror, vanity light, the basin itself. High-ROI upgrades all live here.",
      links: [["Install vanity light", "install"], ["Replace faucet", "install"], ["Frame a mirror", "build"], ["Swap hardware", "decorate"], ["Fix slow drain", "repair"]] },
    { n: "03", h: "Toilet zone", em: "the fixture.",
      d: "Toilet, flange, wax ring, supply line, tank internals. More DIY-able than most people think.",
      links: [["Install toilet", "install"], ["Fix running toilet", "repair"], ["Replace fill valve", "repair"], ["Clean toilet deep", "clean"], ["Caulk toilet base", "repair"]] },
    { n: "04", h: "Storage zone", em: "linen & medicine.",
      d: "Medicine cabinet, linen closet, behind-the-door rack, the vanity cabinet under the sink.",
      links: [["Organize under sink", "organize"], ["Reset medicine cabinet", "organize"], ["Install towel bar", "install"], ["Add over-toilet shelf", "build"], ["Behind-door hooks", "organize"]] },
  ];
  return (
    <section className="br-anatomy">
      <div className="br-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Bathroom, By the Zone</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="br-anatomy-head">
          <h2>Four zones of a bathroom, <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 bathroom — start with the zone. We'll route you to the right verb from there.</p>
        </div>
        <div className="br-anatomy-grid">
          {parts.map(p => (
            <div className="br-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/bathroom/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BathroomFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Can I install tile in a shower myself?",
      a: "Yes, with conditions. The tile itself is intermediate DIY — layout, thinset, setting, grouting. The part that requires more experience is the waterproofing membrane behind the tile. If you're retiling an existing shower with intact cement board backer, you can tile over it. If you're starting from drywall, stop and install cement board or RedGard first. Tiling over unprotected drywall in a wet area is how people end up with mold inside their walls." },
    { q: "How do I know if my toilet flange is damaged before I install a new toilet?",
      a: "Remove the toilet and inspect visually. A good flange is flat, flush with the floor, and has no cracks. If it's broken, recessed below the floor (common after tile work), or corroded, address it before setting the new toilet. Flange repair kits run $10–40 depending on damage severity. A new toilet on a bad flange will rock and leak at the wax ring within months." },
    { q: "What's the right exhaust fan size for my bathroom?",
      a: "The rule of thumb: 1 CFM per square foot of floor area, minimum 50 CFM. A 50-square-foot bathroom needs a 50 CFM fan; a 100-square-foot bathroom needs 100 CFM. If the bathroom has a separate toilet compartment, add 50 CFM for that room. Humidity sensor fans are worth the extra $20-30 — they run until the humidity actually drops rather than on a 15-minute timer, which is usually too short." },
    { q: "Should I hire a plumber to move the toilet drain?",
      a: "Yes. Moving a toilet drain requires cutting into the subfloor or concrete slab and repositioning the drain stack. In most jurisdictions this requires a permit and licensed plumber work. The rough-in dimension (distance from wall to center of drain) is fixed once the house is built — designing around the existing rough-in is always cheaper than moving it." },
    { q: "What's the difference between sanded and unsanded grout?",
      a: "Sanded grout contains fine silica sand for strength and dimensional stability in wider joints (1/8 inch and up). Unsanded grout is smoother and appropriate for narrow joints (under 1/8 inch) like those between subway tile, glass tile, and mosaic. Using sanded in a narrow joint causes cracking. Using unsanded in a wide joint causes shrinking and cracking. Read the bag — the manufacturer's recommended joint width is always printed on it." },
    { q: "How often does a bathroom need to be re-caulked?",
      a: "Around the tub and shower surround, inspect annually and recaulk whenever you see mold that won't scrub out, cracking, separation from the tile or tub surface, or discoloration that's penetrated the caulk rather than sitting on top of it. In practice, most bathroom caulk lasts 3–5 years before needing replacement. The joint between tub/shower and the wall is always a movement joint — the tub flexes with weight and temperature. It will always need periodic recaulking." },
  ];
  return (
    <section className="br-faq">
      <div className="section-folio">
        <span>Reader Questions · Bathroom, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="br-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they bathroom.</em></h2>
      </div>
      <div className="br-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`br-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="br-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="br-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const BATH_SISTERS = [
  { name: "Kitchen",    slug: "kitchen",    ct: "312 guides", img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?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: "Garage",     slug: "garage",     ct: "133 guides", img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?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" },
];

const BathroomSisters = () => (
  <section className="br-sisters">
    <div className="br-sisters-wrap">
      <div className="br-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="br-sisters-grid">
        {BATH_SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="br-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 BathroomColophon = () => (
  <section className="br-colophon">
    <h2>Found what you're <em>fixing?</em></h2>
    <p>Every bathroom guide on HowTo is written by someone who did the project in their own home — with the water off, a bucket on standby, and no regrets.</p>
    <a href="#br-menu" className="go">Browse bathroom projects  →</a>
  </section>
);

window.BathroomHero      = BathroomHero;
window.BathroomMenu      = BathroomMenu;
window.BathroomEssay     = BathroomEssay;
window.BathroomPick      = BathroomPick;
window.BathroomIndex     = BathroomIndex;
window.BathroomMistakes  = BathroomMistakes;
window.BathroomFilters   = BathroomFilters;
window.BathroomAnatomy   = BathroomAnatomy;
window.BathroomFaq       = BathroomFaq;
window.BathroomSisters   = BathroomSisters;
window.BathroomColophon  = BathroomColophon;