/* /en/garage/build — Build × Garage L3 intersection page */

const BG_GREEN  = "#5C7A3E";
const BG_BRONZE = "#B47A3D";
const BG_ORANGE = "#E8640A";

/* ===================== HERO ===================== */
const BuildGarageHero = () => (
  <section className="bg-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=2400&q=85')" }} />
    <div className="bg-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  <a href="/en/garage/">Garage</a>  ·  Build
      </span>
      <span className="ctr">HowTo Quarterly · Build × Garage</span>
      <span className="right">Spring 2026</span>
    </div>
    <div className="bg-cover">
      <div>
        <div className="eyebrow">Build · Garage · The Workshop Origin</div>
        <h1>Where every other build in the house <em>actually gets built.</em></h1>
      </div>
      <div>
        <p className="deck">
          Thirty-eight build guides for the garage — the room that makes every other room in the house possible. Workbenches, tool walls, overhead storage, miter stations. The shop that builds the shop.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Garage / Build</span></div>
          <div><span className="k">Guides</span><span className="v">38 total</span></div>
          <div><span className="k">Reading time</span><span className="v">16 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== MENU / CATEGORIES ===================== */
const BG_CATS = [
  {
    n: "01", ct: "8 guides",
    title: "Workbenches", em: "& work surfaces",
    lede: "The first build in any garage. Get this right and every project after it goes better.",
    links: [
      { href: "/en/garage/build/how-to-build-a-garage-workbench/", t: "How to build a garage workbench" },
      { href: "/en/garage/build/how-to-build-a-folding-workbench/", t: "How to build a folding workbench" },
      { href: "/en/garage/build/how-to-build-a-plywood-workbench-with-drawer/", t: "Workbench with drawer system" },
      { href: "/en/garage/build/how-to-build-a-workbench-with-pegboard/", t: "Workbench with pegboard back" },
    ],
  },
  {
    n: "02", ct: "10 guides",
    title: "Tool storage", em: "& walls",
    lede: "French cleats, pegboard, shadow boards. Tools have a home — build it.",
    links: [
      { href: "/en/garage/build/how-to-build-a-french-cleat-tool-wall/", t: "How to build a French cleat tool wall" },
      { href: "/en/garage/build/how-to-build-a-pegboard-tool-wall/", t: "How to build a pegboard tool wall" },
      { href: "/en/garage/build/how-to-build-a-shadow-board/", t: "How to build a shadow board" },
      { href: "/en/garage/build/how-to-build-wall-mounted-tool-holders/", t: "Wall-mounted tool holders" },
    ],
  },
  {
    n: "03", ct: "5 guides",
    title: "Mobile carts", em: "& rolling stations",
    lede: "Everything that moves. A cart that rolls beats a shelf you have to carry.",
    links: [
      { href: "/en/garage/build/how-to-build-a-rolling-tool-cart/", t: "How to build a rolling tool cart" },
      { href: "/en/garage/build/how-to-build-a-rolling-workbench/", t: "How to build a rolling workbench" },
      { href: "/en/garage/build/how-to-build-a-rolling-lumber-cart/", t: "How to build a rolling lumber cart" },
    ],
  },
  {
    n: "04", ct: "6 guides",
    title: "Overhead", em: "& ceiling storage",
    lede: "The ceiling is the most underused storage surface in most garages. Fix that.",
    links: [
      { href: "/en/garage/build/how-to-build-overhead-storage-platforms/", t: "How to build overhead storage platforms" },
      { href: "/en/garage/build/how-to-build-ceiling-mounted-storage/", t: "Ceiling-mounted storage bins" },
      { href: "/en/garage/build/how-to-build-a-bike-storage-lift/", t: "How to build a bike storage lift" },
    ],
  },
  {
    n: "05", ct: "5 guides",
    title: "Shop infrastructure", em: "dust, lighting, power",
    lede: "The unglamorous work that makes every other project possible. Dust kills lungs. Do this.",
    links: [
      { href: "/en/garage/build/how-to-build-a-dust-collection-ductwork-system/", t: "How to build dust collection ductwork" },
      { href: "/en/garage/build/how-to-build-a-shop-lighting-system/", t: "Shop lighting system" },
      { href: "/en/garage/build/how-to-build-a-garage-electrical-circuit/", t: "Dedicated circuit for shop tools" },
    ],
  },
  {
    n: "06", ct: "4 guides",
    title: "Specialty stations", em: "miter, table saw, drill press",
    lede: "Stations built around specific tools. Project 5 in the sequence, never project 1.",
    links: [
      { href: "/en/garage/build/how-to-build-a-miter-saw-station/", t: "How to build a miter saw station" },
      { href: "/en/garage/build/how-to-build-a-table-saw-outfeed-table/", t: "Table saw outfeed table" },
      { href: "/en/garage/build/how-to-build-a-drill-press-stand/", t: "Drill press stand with storage" },
    ],
  },
];

const BuildGarageMenu = () => (
  <section className="bg-menu-sec">
    <div className="bg-menu-wrap">
      <div className="bg-section-folio">
        <span>The Full Menu · Build Projects by Category</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="bg-menu-head">
        <div>
          <h2>Thirty-eight builds, <em>six categories.</em></h2>
          <p className="deck">
            Everything in the garage that you build from scratch — workbenches first, infrastructure second, specialty stations when you're ready.
          </p>
        </div>
      </div>
      <div className="bg-cat-grid">
        {BG_CATS.map(c => (
          <div className="bg-cat" key={c.n}>
            <div className="cat-num">
              <span>№ {c.n}</span>
              <span className="ct">{c.ct}</span>
            </div>
            <h3>{c.title} <em>{c.em}</em></h3>
            <p className="cat-lede">{c.lede}</p>
            <ul className="cat-links">
              {c.links.map((l, i) => (
                <li key={i}>
                  <a href={l.href}>
                    <span className="lnk-n">{String(i+1).padStart(2,'0')}</span>
                    {l.t}
                  </a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== ESSAY ===================== */
const BuildGarageEssay = () => (
  <section className="bg-essay">
    <div className="bg-essay-wrap">
      <div className="bg-section-folio" style={{ borderColor: 'rgba(180,122,61,0.35)' }}>
        <span>Editor's Note · The Garage That Makes the Rest Possible</span>
        <span className="pg">PG. 08</span>
      </div>
      <div className="bg-essay-grid">
        <aside className="bg-essay-side">
          <h2>The room where <em>every build begins.</em></h2>
          <div className="by">By the Editors · 6 min read</div>
          <div className="stat-list">
            <div className="row"><span>Garage builds tracked</span><strong>38</strong></div>
            <div className="row"><span>Highest-search build</span><strong>Workbench</strong></div>
            <div className="row"><span>Cheapest, biggest win</span><strong>French cleat wall</strong></div>
            <div className="row"><span>Do this first</span><strong>Workbench, always</strong></div>
          </div>
        </aside>
        <div className="bg-essay-body">
          <p className="dropcap">
            The garage is the room that builds the rest of the house. Not metaphorically — literally. The workbench you built last spring is where the kitchen cabinet doors got sanded. The miter saw station is where the living room trim got cut. The French cleat wall is where the router lives between sessions. The garage isn't a storage room. It's a <em>manufacturing facility</em> for everything else.
          </p>
          <p>
            That changes how you think about building in it. Most garage builds aren't about the garage. They're about the capability you're adding to every future project. A flat, level workbench doesn't just give you a place to work — it gives you a reference surface that makes every cut, every assembly, every test-fit more accurate. A French cleat wall doesn't just store tools — it teaches you where every tool lives, which means you spend 30 fewer minutes per project hunting for the Kreg jig.
          </p>
          <div className="pull">
            "The workbench is the first build. It builds every build after it."
          </div>
          <p>
            Build the garage shop in the right order and it compounds. Start with the workbench (4×8 plywood top, 2×4 frame, shelf below — one Saturday, $80 in lumber). Follow with the French cleat wall on the wall behind it. Add a shop vac with HEPA filter before you touch sheet goods. Then specialty stations — miter saw station with outfeed wings, then table saw outfeed table — but only after you understand where the car needs to park and how the garage door clears everything at full swing. The order matters more than the individual builds.
          </p>
          <p>
            The five mistakes that follow are garage-build-specific. They're not the general woodworking mistakes — they're the ones that come from building inside a space that also parks a car, houses a water heater, and has a concrete slab that's almost certainly not level. Read them before you pick up a 2×4.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== PICK (featured spread) ===================== */
const BuildGaragePick = () => (
  <section className="bg-pick">
    <div className="bg-pick-spread">
      <div className="bg-pick-img"
        style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504148455328-c376907d081c?w=2000&q=85')" }}>
        <div className="stamp">Editor's Pick<small>FEATURED BUILD</small></div>
      </div>
      <div className="bg-pick-text">
        <div className="eyebrow">№ 01 · Highest Search · Intermediate</div>
        <h3>How to build a <em>garage workbench</em></h3>
        <p>
          The first build in any garage shop. A 4×8 Baltic birch top on a 2×4 frame with a lower shelf for sheet goods. One day's work. Flat enough to be a reference surface, strong enough to beat on. This is the build that makes every other build better.
        </p>
        <div className="meta">
          <span><span className="dot"></span>1 day</span>
          <span><span className="dot"></span>$120 – $280</span>
          <span><span className="dot"></span>Intermediate</span>
        </div>
        <a href="/en/garage/build/how-to-build-a-garage-workbench/" className="read">
          Read the workbench guide →
        </a>
      </div>
    </div>
  </section>
);

/* ===================== TOP 5 — SEO money block ===================== */
const BG_TOP5 = [
  {
    rank: "01",
    query: "how to build a garage workbench",
    diff: "Intermediate",
    time: "1 day",
    cost: "$120 – $280",
    blurb: "The first build in any garage. Baltic birch top, 2×4 frame, shelf below. Build this flat and level — it becomes the reference surface for everything else. Wrong height or unlevel slab = crooked cuts forever.",
    link: "Read the workbench guide",
    href: "/en/garage/build/how-to-build-a-garage-workbench/",
  },
  {
    rank: "02",
    query: "how to build overhead storage platforms",
    diff: "Intermediate",
    time: "half day",
    cost: "$80 – $180",
    blurb: "The ceiling is underused in nearly every garage. 2×4 ledger boards into joists, 3/4\" ply platform, 12\" lip. Stores seasonal gear above head height. Find the joists first — a stud finder on a drywall ceiling, or use the framing if it's open.",
    link: "Read the overhead storage guide",
    href: "/en/garage/build/how-to-build-overhead-storage-platforms/",
  },
  {
    rank: "03",
    query: "how to build a french cleat tool wall",
    diff: "Intermediate",
    time: "4 hr",
    cost: "$40 – $80",
    blurb: "45° bevel on 3/4\" ply strips, spaced 4\" on-center across a full wall. Matching 45° bevel on every custom holder — slides on, locks by gravity, zero fasteners. The most flexible tool-storage system that has ever existed. Also: the math for weight distribution is simple and actually worth doing.",
    link: "Read the French cleat guide",
    href: "/en/garage/build/how-to-build-a-french-cleat-tool-wall/",
  },
  {
    rank: "04",
    query: "how to build a miter saw station",
    diff: "Intermediate",
    time: "1 day",
    cost: "$150 – $300",
    blurb: "A fixed miter saw station with outfeed wings at the exact height of the saw table, built-in storage for accessories, and a back fence that accepts stop blocks. This is project 5 in the sequence. Do not make it project 1.",
    link: "Read the miter station guide",
    href: "/en/garage/build/how-to-build-a-miter-saw-station/",
  },
  {
    rank: "05",
    query: "how to build a rolling tool cart",
    diff: "Intermediate",
    time: "half day",
    cost: "$90 – $180",
    blurb: "Shop-built rolling cart on four 3\" locking swivel casters. 3/4\" ply carcass, one or two drawers if you have a Kreg K5, or open shelves if you don't. Gets the detail work off the main bench and mobile.",
    link: "Read the rolling cart guide",
    href: "/en/garage/build/how-to-build-a-rolling-tool-cart/",
  },
];

const BuildGarageTop5 = () => (
  <section className="bg-top5">
    <div className="bg-top5-wrap">
      <div className="bg-section-folio">
        <span>The Charts · Top 5 Garage Build Searches</span>
        <span className="pg">PG. 14</span>
      </div>
      <div className="bg-top5-head">
        <div>
          <h2>The five builds people <em>actually search for.</em></h2>
          <p className="deck">
            Pulled from twelve months of search data. If you came from Google, you came for one of these.
          </p>
        </div>
        <div className="legend">
          <span><span className="dot" style={{background: BG_GREEN}}/> Difficulty</span>
          <span><span className="dot" style={{background: BG_BRONZE}}/> Time + Cost</span>
        </div>
      </div>
      <div className="bg-top5-list">
        {BG_TOP5.map(t => (
          <article className="bg-top5-row" key={t.rank}>
            <div className="rank">№ {t.rank}</div>
            <div className="query">
              <h3>{t.query}</h3>
              <p>{t.blurb}</p>
              <a href={t.href} className="read">{t.link} →</a>
            </div>
            <div className="stats">
              <div className="stat"><span className="k">Difficulty</span><span className="v">{t.diff}</span></div>
              <div className="stat"><span className="k">Time</span><span className="v">{t.time}</span></div>
              <div className="stat"><span className="k">Materials</span><span className="v">{t.cost}</span></div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== MISTAKES ===================== */
const BuildGarageMistakes = () => {
  const items = [
    {
      h: "Building a workbench without leveling the slab first",
      p: "A concrete slab that looks flat is rarely flat. Every cut you make on an unlevel workbench will be slightly off — and that error compounds across every subsequent build. Chalk a level line, identify the high and low points, shim the bench feet. One hour. Non-negotiable.",
    },
    {
      h: "Using construction-grade plywood for tool surfaces",
      p: "CDX ply is what you use for framing and subfloor. It is not flat. It has voids. For a workbench top or a saw station surface, you want Baltic birch or MDF. Baltic birch is dimensionally stable and resists abuse. MDF is the flattest option and cheapest. CDX will warp by month three.",
    },
    {
      h: "Skipping the dust collection plan",
      p: "Fine wood dust — anything under 10 microns — is a lung hazard and an electronics killer. A shop vac with a HEPA filter catches it at the tool. A dedicated dust collector with 4\" ducting catches it at every stationary tool simultaneously. Plan the dust collection before you start running power tools. The sawdust that lands on the concrete is the part you can see. The part you breathe is invisible.",
    },
    {
      h: "Anchoring shelves into drywall instead of joists in an unfinished garage",
      p: "An unfinished garage often has exposed framing. Hit the wood — every time, no exception. In a finished garage (drywall ceiling and walls), use a stud finder and hit studs for anything carrying real weight. Wall anchors are for pictures. A French cleat wall holding a 20-lb router is not a picture.",
    },
    {
      h: "Building before measuring the garage door swing arc and car clearance",
      p: "Every garage build that blocks the car or catches the garage door on the way down gets torn out. Measure the garage door's full swing arc (sectional doors typically need 4\" headroom clearance when open). Measure open-door clearance for the car on both sides. Draw it on the floor with chalk. Then design within that space.",
    },
  ];
  return (
    <section className="bg-mistakes">
      <div className="bg-mistakes-wrap">
        <div className="bg-section-folio">
          <span>Field Notes · Five Mistakes Specific to Garage Builds</span>
          <span className="pg">PG. 24</span>
        </div>
        <div className="bg-mistakes-head">
          <h2>Five mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 05</div>
        </div>
        <div className="bg-mistakes-grid">
          {items.map((m, i) => (
            <div className="bg-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>
  );
};

/* ===================== TOOLS ===================== */
const BG_TOOLS = [
  { n: "01", name: "Cordless miter saw + stand",    price: "$350", note: "Every garage build starts with crosscuts. A cordless 10\" sliding miter saw on a folding stand handles 95% of dimensional lumber and sheet-good trim." },
  { n: "02", name: "Pocket-hole jig (Kreg K5)",     price: "$130", note: "Garage builds rarely need pretty joints. The K5 drills and clamps in one step. Fast, strong enough for shelving and carts, and the screws are self-tapping into solid wood." },
  { n: "03", name: "4-foot bar clamps × 4",         price: "$80", note: "Gluing big panels needs real clamps. Four 4-foot Bessey or Irwin bar clamps are the minimum for a workbench top or a French cleat panel. Spring clamps don't count." },
  { n: "04", name: "Track saw or circular saw + edge guide", price: "$200", note: "Breaks down 4×8 sheet goods on the slab. A 50\" track saw is the clean solution. A Skilsaw with a straight 8' board clamped as a fence is the $0 solution. Both work." },
  { n: "05", name: "Shop vac with HEPA filter",      price: "$120", note: "Collects fine dust as you work. The HEPA filter matters — standard shop vac filters recirculate the fine particles (the ones that cause damage) back into the air. Buy the HEPA version once." },
];

const BuildGarageTools = () => (
  <section className="bg-tools">
    <div className="bg-tools-wrap">
      <div className="bg-section-folio">
        <span>The Tool Kit · Five Tools That Earn Their Place</span>
        <span className="pg">PG. 30</span>
      </div>
      <div className="bg-tools-head">
        <h2>Five tools that earn their place in <em>garage builds specifically.</em></h2>
        <p className="deck">Not the general woodworking kit — the tools that show up on every garage build project. Own these five and you can build anything on this page.</p>
      </div>
      <div className="bg-tools-grid">
        {BG_TOOLS.map(t => (
          <div className="bg-tool" key={t.n}>
            <div className="head">
              <span className="n">№ {t.n}</span>
              <span className="price">{t.price}</span>
            </div>
            <h4>{t.name}</h4>
            <p>{t.note}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== SEQUENCE ===================== */
const BG_SEQ = [
  { sn: "01", h: "Simple plywood workbench (4×8 + 2×4 frame)", p: "The first build. Flat top, shelf below, shimmed to level. Everything else builds on this.", tag: "Start here" },
  { sn: "02", h: "French cleat tool wall (1 wall)",  p: "Hang it on the wall behind the workbench. Every tool gets a home before the next project starts.", tag: "Day 2" },
  { sn: "03", h: "Pegboard backer",                  p: "Fill gaps the French cleat misses. Screwdrivers, chisels, small hand tools. Cheap, instant.", tag: "Same weekend" },
  { sn: "04", h: "Rolling tool cart on 4 casters",   p: "Gets the detail work mobile. Follows you to the car, to the door, to the project.", tag: "Week 2" },
  { sn: "05", h: "Miter saw station with wings",     p: "Now that the workbench is built, you can build the station. Not before.", tag: "Project 5" },
  { sn: "06", h: "Overhead storage platform",        p: "Reclaim the ceiling. Seasonal gear goes up, floor space opens. Needs finished framing or joists.", tag: "Month 2" },
  { sn: "07", h: "Shop dust collection ductwork",    p: "Branch 4\" PVC or flex duct from the collector to each stationary tool. Do this before the shop gets full.", tag: "Priority 3" },
  { sn: "08", h: "Sliding panel storage rack",       p: "Vertical storage for sheet goods and trim. Next to the miter station.", tag: "Month 3" },
  { sn: "09", h: "Shop-built clamp rack",            p: "Bar clamps and pipe clamps want a wall mount. Build one from scrap 2×4. One Saturday.", tag: "Anytime" },
  { sn: "10", h: "Drawer system under the workbench", p: "The last refinement. Drawers built to house your most-used hand tools within arm's reach of the bench vise.", tag: "Season 2" },
];

const BuildGarageSequence = () => (
  <section className="bg-sequence">
    <div className="bg-sequence-wrap">
      <div className="bg-section-folio">
        <span>The Sequence · 10-Project Garage Build Starter</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="bg-sequence-head">
        <h2>Ten projects, <em>in the right order.</em></h2>
        <p className="deck">
          The order matters more than the individual builds. Workbench first — it makes every build after it better. Tool wall second. Dust collection before the shop gets crowded. Specialty stations after the foundation is set.
        </p>
      </div>
      <div className="bg-seq-list">
        {BG_SEQ.map(s => (
          <div className="bg-seq-row" key={s.sn}>
            <div className="sn">{s.sn}</div>
            <div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
            <div className="stag">{s.tag}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== FAQ ===================== */
const BuildGarageFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    {
      q: "MDF vs. plywood vs. Baltic birch — which for the workbench top?",
      a: "Baltic birch lasts longest. It's dimensionally stable, holds screws better than MDF, and takes a beating without the surface crushing. MDF is the flattest option and cheapest — excellent for a bench top if you'll never get it wet and don't drop tools on it. CDX construction plywood is fastest and cheapest of all but will warp within months and has voids that make surface work difficult. Honest ranking: Baltic birch for a permanent bench, MDF for a budget shop bench you'll replace, CDX for a temporary bench you'll dismantle.",
    },
    {
      q: "Do I really need 240V in my garage?",
      a: "Only if you're running a table saw over 1.75HP, a welder, or an EV charger. A 10\" contractor table saw, a cordless miter saw, and a standard dust collector all run on 120V circuits. Most garage shops run perfectly on 120V. Add 240V only when you buy the specific tool that needs it — a dedicated 30A or 50A circuit is a licensed electrician job anyway.",
    },
    {
      q: "Can I build directly on the concrete slab?",
      a: "Yes — but level it first. Chalk a level line at the height you want the workbench top. Use a long level or a laser level to find the slab's high and low points. Shim the bench feet at the low points with composite shims (not wood, which will compress). A shimmed bench on an unlevel slab is stable and accurate. An unshimmed bench is neither.",
    },
    {
      q: "How tall should a workbench be?",
      a: "The rule of thumb: floor to the crease at your wrist with your arm relaxed at your side. For most people this is 34\" to 36\". A bench that's too low makes you hunch; too high and you lose leverage for hand tools. Assembly work benefits from a slightly lower bench (32\"). Fine detail work benefits from a slightly higher bench (38\"). If you're building one bench, split the difference at 34\".",
    },
    {
      q: "What's a French cleat and why does everyone love it?",
      a: "A French cleat is a strip of 3/4\" plywood ripped at 45° along one edge, mounted to the wall with the bevel facing up and out. A matching 45° bevel on any holder or bracket slides over the cleat and hangs by gravity — no fasteners, totally removable, totally repositionable. You can reconfigure the entire wall in 20 minutes. The reason everyone loves it: it removes the commitment from tool storage. Build a new holder for a new tool in 10 minutes from scrap.",
    },
    {
      q: "When does pocket-hole joinery fail?",
      a: "Under tension (pulling joints apart rather than shearing), in thin plywood (1/2\" or thinner — the screw pulls out), and anywhere you can see it from a viewing angle (the holes are ugly). For garage shop builds — where joints are mostly under shear, the plywood is 3/4\", and nobody is looking at the joinery — pocket holes are excellent. Build garage furniture with them freely. Don't use them for face-frame furniture in a room people live in.",
    },
  ];
  return (
    <section className="bg-faq">
      <div className="bg-section-folio">
        <span>Reader Questions · Garage Builds, Answered</span>
        <span className="pg">PG. 44</span>
      </div>
      <div className="bg-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they build.</em></h2>
      </div>
      <div className="bg-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`bg-faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="bg-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="bg-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ===================== TECHNIQUES ===================== */
const BuildGarageTechniques = () => {
  const items = [
    {
      badge: "№ 01",
      h: "Reading sheet goods",
      p: "Which face up, which face down — grain direction matters even on plywood. The good face (the one without voids or patches) faces up on a workbench top, faces out on a French cleat panel. Rip sheet goods with the good face up on a table saw (blade bends toward the table) or good face down on a circular saw (blade bends away from the table).",
    },
    {
      badge: "№ 02",
      h: "Square-checking with the diagonal trick",
      p: "On any four-corner build — a carcass, a panel, a bench base — measure both diagonals. If they're equal, the assembly is square. If they're different, clamp diagonally across the long diagonal and check again. This works faster than a framing square on large assemblies and is more accurate than eyeballing.",
    },
    {
      badge: "№ 03",
      h: "The pocket-hole sequence",
      p: "Drill first, clamp second, drive third. Never drive a pocket screw into undrilled material — the Kreg bit is designed to drill and countersink simultaneously only when used correctly. Drill all your holes before any assembly starts, clamp the joint tight, then drive. Reversing this sequence strips the pocket.",
    },
    {
      badge: "№ 04",
      h: "French cleat shear force math",
      p: "Tool weight × distance from the wall (moment arm) = shear force on the cleat. A 20-lb router 8\" from the wall puts 160 in-lb of shear on the mounting screws. 1-5/8\" coarse-thread screws into studs can each handle 100+ lb of shear. Do the math before you hang anything heavy. Hint: the math almost always says you're fine with 4 screws.",
    },
  ];
  return (
    <section className="bg-techniques">
      <div className="bg-techniques-wrap">
        <div className="bg-section-folio">
          <span>Workshop Craft · Four Techniques Worth Mastering</span>
          <span className="pg">PG. 50</span>
        </div>
        <div className="bg-techniques-head">
          <h2>Four garage-build techniques <em>worth mastering.</em></h2>
        </div>
        <div className="bg-techniques-grid">
          {items.map((t, i) => (
            <div className="bg-technique" key={i}>
              <div className="badge">{t.badge}</div>
              <h4>{t.h}</h4>
              <p>{t.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ===================== COLOPHON ===================== */
const BuildGarageColophon = () => (
  <section className="bg-colophon">
    <div className="bg-section-folio" style={{ maxWidth: 900, margin: '0 auto 32px', textAlign: 'left' }}>
      <span>Cost-to-Payback · The Workshop That Pays for Itself</span>
      <span className="pg">PG. 58</span>
    </div>
    <p className="issue-line">HowTo Quarterly · Build × Garage / Spring 2026</p>
    <h2>The shop that <em>pays back fastest.</em></h2>
    <p>
      Workbench first — every project goes faster after this one build. French cleat wall second — saves 30 minutes of "where did I put that" on every project that follows. Dust collection third — lung health doesn't have a price. Then specialty stations. The miter saw station is project 5. Never project 1. Build in this order and the shop compounds. Build out of order and you tear things out to fit the car.
    </p>
    <a href="/en/garage/" className="go">Back to Garage →</a>
  </section>
);

/* ===================== RELATED ===================== */
const BuildGarageCategories = () => (
  <section className="bg-related">
    <div className="bg-related-wrap">
      <div className="bg-related-col">
        <div className="bg-section-folio" style={{ marginBottom: 16 }}>
          <span>Other things to do · in the Garage</span>
          <span className="pg">A</span>
        </div>
        <h3>You're in the garage. <em>Pick a different verb.</em></h3>
        <div className="bg-related-list">
          <a href="/en/garage/repair/"    className="row"><span className="n">01</span><span className="t">Repair the garage</span><span className="ct">44 guides</span></a>
          <a href="/en/garage/install/"   className="row"><span className="n">02</span><span className="t">Install in the garage</span><span className="ct">33 guides</span></a>
          <a href="/en/garage/build/"     className="row current"><span className="n">03</span><span className="t">Build for the garage</span><span className="ct">38 guides — you are here</span></a>
          <a href="/en/garage/clean/"     className="row"><span className="n">04</span><span className="t">Clean the garage</span><span className="ct">29 guides</span></a>
          <a href="/en/garage/organize/"  className="row"><span className="n">05</span><span className="t">Organize the garage</span><span className="ct">35 guides</span></a>
          <a href="/en/garage/decorate/"  className="row"><span className="n">06</span><span className="t">Decorate the garage</span><span className="ct">18 guides</span></a>
        </div>
      </div>
      <div className="bg-related-col">
        <div className="bg-section-folio" style={{ marginBottom: 16 }}>
          <span>Build somewhere else · Other Rooms</span>
          <span className="pg">B</span>
        </div>
        <h3>Or build <em>somewhere else.</em></h3>
        <div className="bg-related-list">
          <a href="/en/build/kitchen/"     className="row"><span className="n">01</span><span className="t">Build for the kitchen</span><span className="ct">41 guides</span></a>
          <a href="/en/build/basement/"    className="row"><span className="n">02</span><span className="t">Build for the basement</span><span className="ct">36 guides</span></a>
          <a href="/en/build/deck-patio/"  className="row"><span className="n">03</span><span className="t">Build on the deck / patio</span><span className="ct">43 guides</span></a>
          <a href="/en/build/bedroom/"     className="row"><span className="n">04</span><span className="t">Build for the bedroom</span><span className="ct">28 guides</span></a>
          <a href="/en/build/living-room/" className="row"><span className="n">05</span><span className="t">Build for the living room</span><span className="ct">31 guides</span></a>
          <a href="/en/build/"             className="row"><span className="n">06</span><span className="t">All build guides</span><span className="ct">all 10 rooms</span></a>
        </div>
      </div>
    </div>
  </section>
);

/* Export all to window for cross-script access */
window.BuildGarageHero       = BuildGarageHero;
window.BuildGarageMenu       = BuildGarageMenu;
window.BuildGarageEssay      = BuildGarageEssay;
window.BuildGaragePick       = BuildGaragePick;
window.BuildGarageTop5       = BuildGarageTop5;
window.BuildGarageCategories = BuildGarageCategories;
window.BuildGarageMistakes   = BuildGarageMistakes;
window.BuildGarageTools      = BuildGarageTools;
window.BuildGarageSequence   = BuildGarageSequence;
window.BuildGarageFaq        = BuildGarageFaq;
window.BuildGarageTechniques = BuildGarageTechniques;
window.BuildGarageColophon   = BuildGarageColophon;
