/* /en/garage — Production Garage Room Hub */

const GarageHero = () => (
  <section className="gr-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=2400&q=85')" }} />
    <div className="gr-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Garage
      </span>
      <span className="ctr">HowTo Quarterly · Vol. VI / The Garage Issue</span>
      <span className="right">№ 06 / Spring 2026</span>
    </div>
    <div className="gr-cover">
      <div>
        <div className="eyebrow">Room Guide · Garage</div>
        <h1>The most flexible square footage <em>you own.</em></h1>
      </div>
      <div>
        <p className="deck">
          Every guide we've ever written for the garage — sorted by what you came here to do, not by what you can buy at a big box store.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Garage</span></div>
          <div><span className="k">Guides</span><span className="v">148 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 GARAGE_ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's broken.",
    lede: "The opener that's lost sync, the spring that groans, the floor crack that's grown since last winter. Diagnose first, fix second.",
    bg: "https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1400&q=80",
    examples: "Garage door spring · Opener alignment · Slab crack · Outlet that trips · Fluorescent fixture · Water infiltration",
    count: 31,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what's new.",
    lede: "Slatwall panels, overhead racks, a utility sink, a new circuit, an EV charger rough-in. Every install adds capacity or safety.",
    bg: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80",
    examples: "Slatwall system · Overhead racks · New 20A outlet · Utility sink · Pegboard · LED shop lights · Sub-panel",
    count: 33,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from scratch.",
    lede: "A workbench that doesn't wobble, a rolling tool base, a lumber cart, the built-in storage wall. Projects for the room that can take it.",
    bg: "https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1400&q=80",
    examples: "Garage workbench · Rolling tool base · Lumber cart · French cleat wall · Bike pulley · Built-in cabinet wall",
    count: 38,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what won't quit.",
    lede: "Oil stains on concrete, rust rings, sawdust in every crack, and the floor prep that determines whether your epoxy bonds or peels.",
    bg: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1400&q=80",
    examples: "Concrete degreasing · Oil stains · Rust removal · Shelf wipe-down · Seasonal clean-out · Drain maintenance",
    count: 14,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the chaos.",
    lede: "Zone planning, bin systems, the seasonal rotation that keeps summer gear in reach. Most garages aren't disorganized — they just lack a system.",
    bg: "https://images.unsplash.com/photo-1565538810643-b5bdb714032a?w=1400&q=80",
    examples: "Zone design · Seasonal rotation · Sports gear · Power tool storage · Hardware bins · Overhead/wall/floor hierarchy",
    count: 28,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the room.",
    lede: "Epoxy floor that changes everything, wall paint that takes a ding, the finish that makes a workshop feel intentional.",
    bg: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80",
    examples: "Epoxy floor · Garage paint · Wall markings · Shop color scheme · Safety striping · Floor zones",
    count: 4,
  },
];

const GarageMenu = () => (
  <section className="gr-menu">
    <div className="gr-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Garage, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="gr-menu-head">
        <h2>Six things to do <em>in a garage.</em></h2>
        <p className="deck">
          Every project on this site lives at the intersection of a room and a verb. You're in the garage — pick a verb.
        </p>
      </div>
      <div className="gr-actions">
        {GARAGE_ACTIONS.map(a => (
          <a key={a.name} href={`/en/garage/${a.slug}/`} className="gr-act">
            <div className="gr-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 GarageEssay = () => (
  <section className="gr-essay">
    <div className="gr-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(180,140,90,0.35)" }}>
        <span>Editor's Note · The Garage, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="gr-essay-grid">
        <aside className="gr-essay-side">
          <h2>The room that <em>can be anything.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. sq ft in US</span><strong>440</strong></div>
            <div className="row"><span>Used for cars</span><strong>30%</strong></div>
            <div className="row"><span>Most-searched verb</span><strong>"build"</strong></div>
            <div className="row"><span>Top project</span><strong>Workbench</strong></div>
          </div>
        </aside>
        <div className="gr-essay-body">
          <p className="dropcap">
            The garage is the only room in the house that hasn't been assigned a purpose. Every other room has a clear social contract: the kitchen makes food, the bedroom is for sleeping, the bathroom is self-explanatory. The garage is whatever you need it to be — workshop, storage unit, gym, mudroom, car barn, hobby room, overflow pantry — and most garages are currently all of these at once, which is to say: none of them particularly well.
          </p>
          <p>
            That's the garage problem in a sentence. Not lack of space, but lack of system. The same square footage that frustrates you every time you want to find the drill stores a full workshop, a year's worth of seasonal gear, a car, and still leaves you room to work — if the systems are right. And the systems are all fixable.
          </p>
          <div className="pull">
            "The same square footage that frustrates you stores a full workshop and a car — if the systems are right."
          </div>
          <p>
            Which is why we built this hub around the verbs: <a href="/en/garage/repair/">repair</a>, <a href="/en/garage/install/">install</a>, <a href="/en/garage/build/">build</a>, <a href="/en/garage/clean/">clean</a>, <a href="/en/garage/organize/">organize</a>, <a href="/en/garage/decorate/">decorate</a>. The 148 guides here are organized by what you came to do, not by what's sold in the "garage" section of a home improvement store. Pick a verb and we'll show you the guides that live under it.
          </p>
          <p>
            Below: the seasonal project pick, the most-searched garage guides of the month, the six mistakes we see most often (and the specific ways to avoid them), a zone-by-zone anatomy of what to work on first, and the tools that pay for themselves inside the first project. The garage is the most under-appreciated room in most homes. These are the 148 ways to change that.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const GaragePick = () => (
  <section className="gr-pick">
    <div className="gr-pick-spread">
      <div className="gr-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="gr-pick-text">
        <div className="eyebrow">Featured Project · Garage, Build</div>
        <h3>How to build a garage <em>workbench</em> that earns its place.</h3>
        <p>
          The anchor project of any working garage. A bench that's flat, solid, at the right height for your body, and built to take the abuse of real projects. Dimensional lumber, lag bolts, a sacrificial top layer — done in a day.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>1 day</span>
          <span><span className="dot"></span>$120–280 in materials</span>
          <span><span className="dot"></span>Built to last</span>
        </div>
        <a href="/en/garage/build/how-to-build-a-garage-workbench/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

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

const GarageIndex = () => {
  const cols = [
    {
      title: "Most-read this month",
      count: "One per lane",
      items: [
        ["01", "How to fix a garage door opener",            "Repair · 45 min"],
        ["02", "How to install overhead storage racks",      "Install · 90 min"],
        ["03", "How to build a garage workbench",            "Build · 1 day"],
        ["04", "How to degrease a concrete garage floor",    "Clean · 2 hrs"],
        ["05", "How to organize a garage with zones",        "Organize · 1 day"],
        ["06", "How to epoxy-coat a garage floor",           "Decorate · 2 days"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to repair a garage door spring",         "Repair · call a pro"],
        ["02", "How to install slatwall storage",            "Install · half day"],
        ["03", "How to build a French cleat wall",           "Build · weekend"],
        ["04", "How to remove oil stains from concrete",     "Clean · 1 hr"],
        ["05", "How to store seasonal gear overhead",        "Organize · 2 hrs"],
        ["06", "How to paint a garage floor",                "Decorate · weekend"],
      ],
    },
  ];
  return (
    <section className="gr-index">
      <div className="gr-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read garage guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="gr-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="gr-index-grid">
          {cols.map(c => (
            <div className="gr-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="gr-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={garageLaneHref(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 GarageMistakes = () => {
  const items = [
    { h: "Anchoring overhead racks to drywall, not ceiling joists",
      p: "Drywall anchors hold fine — until the load hits. Every overhead rack must lag-bolt directly into ceiling joists rated for the weight. Find every joist, mark it, and lag through. The pull-through failure mode is all-at-once, not gradual." },
    { h: "Hanging slatwall without finding the studs",
      p: "A loaded slatwall panel with tools and bins can hit 50–80 lbs. Drywall anchors don't carry that load with the leverage of protruding hooks. Find every stud, screw into every stud, predrill to avoid splitting the MDF core." },
    { h: "Skipping floor prep before epoxy",
      p: "Any oil between the concrete and the epoxy creates a release plane. Any pores the acid etch didn't open prevent adhesion. Degrease, acid-etch, let dry completely. Two days of patient prep — or six months to peel-up and start over." },
    { h: "Leaving the door opener trolley misaligned",
      p: "A slightly misaligned trolley runs fine at room temperature. On a cold morning when the metal has contracted, it jumps the rail. Align the trolley before tensioning the drive chain or belt — five minutes now versus a stuck door at 7 AM." },
    { h: "Running an extension cord as permanent wiring",
      p: "Cords aren't rated for continuous load at anything close to peak amperage. They heat up at the plug and degrade faster than fixed wiring. If you need a permanent outlet on the workshop wall, install a permanent outlet — or call an electrician." },
    { h: "Parking without accounting for working clearance",
      p: "Measure the car-to-bench clearance. Now measure it again with the top drawer fully extended, the cabinet door swung open, and your body in the working position. Map every footprint plus every operating envelope before you park." },
  ];
  return (
    <section className="gr-mistakes">
      <div className="gr-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Garage Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="gr-mistakes-head">
          <h2>Six garage mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="gr-mistakes-grid">
          {items.map((m, i) => (
            <div className="gr-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 GarageFilters = () => (
  <section className="gr-filters">
    <div className="gr-filters-grid">
      <div className="gr-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="gr-pills">
          <a href="/en/garage/" className="gr-pill">Beginner <span className="ct">54</span></a>
          <a href="/en/garage/" className="gr-pill">Intermediate <span className="ct">72</span></a>
          <a href="/en/garage/" className="gr-pill">Advanced <span className="ct">22</span></a>
        </div>
      </div>
      <div className="gr-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="gr-pills">
          <a href="/en/garage/" className="gr-pill">Under an hour <span className="ct">28</span></a>
          <a href="/en/garage/" className="gr-pill">A morning <span className="ct">36</span></a>
          <a href="/en/garage/" className="gr-pill">A weekend <span className="ct">58</span></a>
          <a href="/en/garage/" className="gr-pill">Multi-day <span className="ct">26</span></a>
        </div>
      </div>
      <div className="gr-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="gr-pills">
          <a href="/en/garage/" className="gr-pill">$0 — $50 <span className="ct">32</span></a>
          <a href="/en/garage/" className="gr-pill">$50 — $200 <span className="ct">48</span></a>
          <a href="/en/garage/" className="gr-pill">$200 — $1k <span className="ct">52</span></a>
          <a href="/en/garage/" className="gr-pill">$1k+ <span className="ct">16</span></a>
        </div>
      </div>
    </div>
  </section>
);

const GarageAnatomy = () => {
  const parts = [
    { n: "01", h: "Vehicle bay", em: "& floor.",
      d: "Clear space, slab surface, door clearance, and the sealed floor that makes everything easier to clean.",
      links: [["Epoxy floor", "decorate"], ["Slab crack repair", "repair"], ["Door clearance", "organize"], ["Floor drain", "repair"], ["Seal concrete", "clean"]] },
    { n: "02", h: "Workshop wall", em: "& bench.",
      d: "The workbench, the tool wall above it, and the miter station if you do woodworking.",
      links: [["Build workbench", "build"], ["Install slatwall", "install"], ["French cleat wall", "build"], ["Miter station", "build"], ["Tool wall", "install"]] },
    { n: "03", h: "Overhead", em: "& ceiling.",
      d: "Seasonal storage above head height. Racks, pulley systems, and the joists that carry it all.",
      links: [["Overhead racks", "install"], ["Bike pulley", "build"], ["Seasonal storage", "organize"], ["Joist load", "install"], ["Ceiling rack", "install"]] },
    { n: "04", h: "Wall storage", em: "& slatwall.",
      d: "Slatwall, pegboard, French cleats, and the hooks, bins, and shelves that attach to them.",
      links: [["Slatwall install", "install"], ["Pegboard mount", "install"], ["Storage bins", "organize"], ["Tool hooks", "install"], ["Sports gear wall", "organize"]] },
    { n: "05", h: "Garage door", em: "& opener.",
      d: "Springs, trolley, drive type, safety sensors, and the opener that was installed in 2004.",
      links: [["Opener sync", "repair"], ["Trolley alignment", "repair"], ["Spring safety", "repair"], ["Sensor align", "repair"], ["Weather seal", "repair"]] },
    { n: "06", h: "Utility zone", em: "& panel.",
      d: "Water heater, breaker panel or sub-panel, sump pump, and the mudroom threshold.",
      links: [["Sub-panel", "install"], ["New circuit", "install"], ["Water heater", "repair"], ["Sump pump", "repair"], ["EV charger rough-in", "install"]] },
    { n: "07", h: "Lighting", em: "& outlets.",
      d: "Shop lighting, dedicated circuits for tools, and the GFCI that should be on every garage outlet.",
      links: [["LED shop lights", "install"], ["20A outlet", "install"], ["GFCI install", "install"], ["Dimmer switch", "install"], ["Work light", "install"]] },
    { n: "08", h: "Organization", em: "& zones.",
      d: "Zone layout, the storage hierarchy, seasonal rotation, and labels that survive a garage.",
      links: [["Zone planning", "organize"], ["Seasonal rotation", "organize"], ["Label system", "organize"], ["Sports gear", "organize"], ["Hardware bins", "organize"]] },
  ];
  return (
    <section className="gr-anatomy">
      <div className="gr-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Garage, By the Zone</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="gr-anatomy-head">
          <h2>Eight parts of a garage, <em>and the guides that fix them.</em></h2>
          <p className="deck">Came with a specific part of the garage in mind? Start with the zone. We'll route you to the right verb from there.</p>
        </div>
        <div className="gr-anatomy-grid">
          {parts.map(p => (
            <div className="gr-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/garage/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const GarageFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the highest-impact, lowest-cost garage project?",
      a: "Slatwall on the workshop wall. One weekend, $180–400 in materials, and every tool that was in a pile on the floor now has a dedicated hook or bin. After that: epoxy floor (two days including cure, $200–500, and the room genuinely looks different), then an overhead rack for seasonal gear ($80–180 per rack, 90 minutes, seasonal storage problem solved)." },
    { q: "Can I install overhead storage racks myself?",
      a: "Yes — with one non-negotiable: every mounting point must lag-bolt into a ceiling joist, not into drywall. Find the joists with a stud finder before you buy anything. Mark them, measure the rack spacing to hit as many joists as possible, and use the lag bolts specified by the rack manufacturer for the load rating you need. The install itself is a 90-minute job per rack. The joist-find is the whole game." },
    { q: "Does epoxy floor actually hold up, or does it peel?",
      a: "It holds up if the prep is done correctly. The two prep steps that determine everything: degreasing (any oil contamination between the concrete and the epoxy creates a release plane) and acid-etching (opens the surface profile so the epoxy has something to bond to mechanically). Skip either step and you're peeling epoxy in 6–18 months. Do both correctly and a quality two-part epoxy system lasts a decade." },
    { q: "Should I replace the garage door springs myself?",
      a: "We recommend against it. Torsion springs (the horizontal spring above the door) are under enormous tension — a spring that releases unexpectedly during replacement can cause serious injury. Extension springs (the two springs on the sides, above the horizontal tracks) are slightly lower stakes but still carry meaningful risk. The job takes a licensed garage door technician 45 minutes and costs $150–300. It's the one garage task where the risk/reward calculation consistently favors the pro." },
    { q: "How do I know if my garage needs a permit for new electrical work?",
      a: "Any new circuit or sub-panel work requires a permit in almost every jurisdiction. Like-for-like outlet replacement (same amperage, same location) usually doesn't. EV charger installation on a dedicated 240V circuit almost always requires a permit and a licensed electrician. Check your local building department's website — they almost all have a one-page residential electrical permit guide. The permit for a new circuit is typically $50–100 and the inspection is a 15-minute walkthrough." },
    { q: "What's the right workbench height for garage work?",
      a: "Stand with your arms at your sides. Your workbench top should be at wrist height — typically 34–36 inches for most adults. Too low and you're hunching over for cuts and assembly; too high and you lose leverage on anything that needs downward pressure. If you're also using a bench vise, account for the vise jaw height when you build — the vise jaw face should be flush with the top surface when the vise is open, not above it." },
  ];
  return (
    <section className="gr-faq">
      <div className="section-folio">
        <span>Reader Questions · Garage, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="gr-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they garage.</em></h2>
      </div>
      <div className="gr-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`gr-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="gr-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="gr-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const GARAGE_SISTERS = [
  { name: "Kitchen",      slug: "kitchen",      ct: "312 guides", img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     ct: "128 guides", img: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     ct: "176 guides", img: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?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: "Deck & Patio", slug: "deck-patio",   ct: "138 guides", img: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&q=80" },
];

const GarageSisters = () => (
  <section className="gr-sisters">
    <div className="gr-sisters-wrap">
      <div className="gr-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="gr-sisters-grid">
        {GARAGE_SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="gr-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 GarageColophon = () => (
  <section className="gr-colophon">
    <h2>Found what you're <em>building?</em></h2>
    <p>Every garage guide on HowTo is written by someone who did the project in their own space. Pick a verb and start exploring.</p>
    <a href="#gr-menu" className="go">Browse garage projects  →</a>
  </section>
);

window.GarageHero      = GarageHero;
window.GarageMenu      = GarageMenu;
window.GarageEssay     = GarageEssay;
window.GaragePick      = GaragePick;
window.GarageIndex     = GarageIndex;
window.GarageMistakes  = GarageMistakes;
window.GarageFilters   = GarageFilters;
window.GarageAnatomy   = GarageAnatomy;
window.GarageFaq       = GarageFaq;
window.GarageSisters   = GarageSisters;
window.GarageColophon  = GarageColophon;