/* /en/garage/organize — Organize × Garage L3 intersection page */

const OG_ACCENT = { brass: "#C9A86A", orange: "#E8640A", bronze: "#A67C52" };

/* ===================== HERO ===================== */
const OGHero = () => (
  <section className="og-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=2400&q=85')" }} />
    <div className="og-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  <a href="/en/garage/">Garage</a>  ·  Organize
      </span>
      <span className="ctr">The Garage Organization Edition</span>
      <span className="right">№ 06 / Spring 2026</span>
    </div>
    <div className="og-cover">
      <div>
        <div className="eyebrow">Organize · Garage · Zones Beat Shelves</div>
        <h1>Organize your garage <em>so you can actually find things.</em></h1>
      </div>
      <div>
        <p className="deck">
          Twenty-eight guides for slatwall and French cleats, zones and overhead racks, the rolling cabinet that earns its corner, and the labeling that lasts longer than a year in a garage.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Garage / Organize</span></div>
          <div><span className="k">Guides</span><span className="v">28 total</span></div>
          <div><span className="k">Reading time</span><span className="v">12 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== TOP 5 — the SEO money block ===================== */
const TOP5 = [
  {
    rank: "01",
    query: "how to organize a garage with zones",
    monthly: "89,000",
    diff: "Beginner",
    time: "1 weekend",
    cost: "$60 — $140",
    blurb:
      "The foundation of every organized garage. Tools in one zone, automotive in another, seasonal in the third. Everything has a place, and your hand finds it without thinking.",
    link: "Read the zone guide",
    href: "/en/garage/organize/how-to-organize-a-garage-with-zones/",
  },
  {
    rank: "02",
    query: "how to install slatwall in a garage",
    monthly: "67,000",
    diff: "Intermediate",
    time: "6 — 8 hrs",
    cost: "$120 — $240",
    blurb:
      "Slatwall holds more than pegboard and looks like a real workshop. Cover your most-visible wall and watch your garage transform from chaos into system in a single weekend.",
    link: "Read the slatwall guide",
    href: "/en/garage/organize/how-to-install-slatwall-in-a-garage/",
  },
  {
    rank: "03",
    query: "how to build french cleat garage storage",
    monthly: "52,000",
    diff: "Intermediate",
    time: "6 — 8 hrs",
    cost: "$80 — $200",
    blurb:
      "French cleats hold everything seasonal — bikes, holidays, camping gear. Built from studs and lumber, a French cleat wall holds more than any store-bought shelving unit and costs half as much.",
    link: "Read the French cleat guide",
    href: "/en/garage/organize/how-to-build-a-french-cleat-wall/",
  },
  {
    rank: "04",
    query: "how to install overhead garage storage racks",
    monthly: "45,000",
    diff: "Intermediate",
    time: "3 — 4 hrs",
    cost: "$120 — $280 ea",
    blurb:
      "Overhead racks double your storage without eating floor space. Bikes, seasonal bins, sports equipment — everything that was piled on the floor moves up, and your garage suddenly feels twice as big.",
    link: "Read the overhead rack guide",
    href: "/en/garage/organize/how-to-install-overhead-storage-racks/",
  },
  {
    rank: "05",
    query: "how to organize garage fasteners and small parts",
    monthly: "38,000",
    diff: "Beginner",
    time: "2 — 3 hrs",
    cost: "$40 — $120",
    blurb:
      "The eternal garage problem: screws, bolts, nails everywhere. A rolling cabinet with labeled drawers solves it. Industrial labels that last, compartments that match your inventory, wheels so it moves with you.",
    link: "Read the fastener guide",
    href: "/en/garage/organize/how-to-organize-garage-fasteners/",
  },
];

const OGTop5 = () => (
  <section className="og-top5">
    <div className="og-top5-wrap">
      <div className="section-folio">
        <span>The Charts · Top 5 Garage Organizing Searches</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="og-top5-head">
        <div>
          <h2>The five things people <em>actually search for.</em></h2>
          <p className="deck">
            Pulled from twelve months of search data and reader behavior. If you're here from Google, you came here for one of these.
          </p>
        </div>
        <div className="legend">
          <span><span className="dot" style={{background: OG_ACCENT.brass}}/> Difficulty</span>
          <span><span className="dot" style={{background: OG_ACCENT.orange}}/> Time</span>
          <span><span className="dot" style={{background: OG_ACCENT.bronze}}/> Cost</span>
        </div>
      </div>

      <div className="og-top5-list">
        {TOP5.map(t => (
          <article className="og-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">Monthly searches</span>
                <span className="v">{t.monthly}</span>
              </div>
              <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">Cost</span>
                <span className="v">{t.cost}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== ESSAY ===================== */
const OGEssay = () => (
  <section className="og-essay">
    <div className="og-essay-wrap">
      <div className="section-folio" style={{ borderColor: 'rgba(201,168,106,0.35)' }}>
        <span>Editor's Note · The Garage Organized</span>
        <span className="pg">PG. 08</span>
      </div>
      <div className="og-essay-grid">
        <aside className="og-essay-side">
          <h2>The room where <em>organization pays back time.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. time saved yearly</span><strong>40+ hours</strong></div>
            <div className="row"><span>Most-searched system</span><strong>Zones</strong></div>
            <div className="row"><span>Cheapest win</span><strong>Labels + rolling cabinet</strong></div>
            <div className="row"><span>Biggest space gain</span><strong>Overhead racks</strong></div>
          </div>
        </aside>
        <div className="og-essay-body">
          <p className="dropcap">
            Organization in a garage is not about aesthetics — it's about time. A garage without zones, without labels, without a system, steals five minutes from you every time you need a tool. Five minutes, multiplied across a year, becomes hours. Entire days of your life spent searching instead of building. An organized garage — zones so clear you could find a wrench in the dark, labels so durable they don't fade in one season, storage so vertical it doubles your space — buys back days of your life.
          </p>
          <p>
            And the garage is the room where simple ideas turn into permanent systems. A slatwall takes one weekend but works for years. A French cleat wall costs less than the shelving it replaces and holds more. Overhead racks solve the floor-clutter problem forever. Zone your space once, label everything right, and you're done — the system runs itself.
          </p>
          <div className="pull">
            "Zones beat shelves, vertical beats horizontal. Those two rules, alone, transform a garage from storage into a system."
          </div>
          <p>
            Below: the five searches that bring 75% of readers here. The projects ranked by payback. The tools you actually need — it's fewer than you think. The hardware that holds weight, the labels that last, and the three mistakes that break every garage organization system that fails. Pick one project. We'll show you how to do it right the first time.
          </p>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== TOOLS ===================== */
const TOOLS = [
  { n: "01", name: "Stud finder (magnetic)", note: "Every mount assumes you're hitting studs. A $15 magnetic finder is always right.", req: "Required" },
  { n: "02", name: "Level (24-inch)", note: "Pegboards and shelves look wrong if they're off by one inch. Real level, real finish.", req: "Required" },
  { n: "03", name: "Drill + 1/2\" auger bit", note: "For French cleats and overhead posts — an auger bit goes straight through studs.", req: "Framing" },
  { n: "04", name: "Label maker (Brother)", note: "Not masking tape labels that fade in one season. Industrial vinyl cartridges last five years in a garage.", req: "Every system" },
  { n: "05", name: "Toggle bolts", note: "For drywall gaps where studs don't align. $6 for a pack of 10, holds three times what anchors do.", req: "Wall mounts" },
  { n: "06", name: "Pencil + measuring tape", note: "Layout is everything. One pencil mistake means one hole in the wrong place.", req: "Always" },
  { n: "07", name: "Torpedo level", note: "For leveling cabinets and slatwall brackets. The 24-inch is for walls, the 2-foot is for furniture.", req: "Furniture" },
  { n: "08", name: "Power drill/driver", note: "For mounting slatwall brackets and overhead rack fasteners. Rent if you don't own.", req: "Most jobs" },
  { n: "09", name: "Ladder or step stool", note: "For overhead work and high wall mounting. Five-step is usually enough for a standard 8-foot garage.", req: "Overhead" },
  { n: "10", name: "Drop cloth + vacuum", note: "Drywall dust. Then more drywall dust. Then the dust that came from where you didn't drill.", req: "Every install" },
];

const OGTools = () => (
  <section className="og-tools">
    <div className="og-tools-wrap">
      <div className="section-folio">
        <span>The Tool Kit · Garage Organization</span>
        <span className="pg">PG. 16</span>
      </div>
      <div className="og-tools-head">
        <h2>Ten tools that handle <em>most garage organizing projects.</em></h2>
        <p className="deck">Own these ten things and you can install almost any storage system in this hub. Rent the power tools if you don't have them — this is a one-time install, not a permanent kit.</p>
      </div>
      <div className="og-tools-grid">
        {TOOLS.map(t => (
          <div className="og-tool" key={t.n}>
            <div className="head">
              <span className="n">№ {t.n}</span>
              <span className="req">{t.req}</span>
            </div>
            <h4>{t.name}</h4>
            <p>{t.note}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== DECISION MATRIX ===================== */
const MATRIX = [
  { p: "Pegboard for hand tools",    zone: "tools",       diff: 2, time: "4 hrs",        cost: "$40 — $100",    impact: 3 },
  { p: "Zone your garage",            zone: "planning",    diff: 1, time: "1 day",       cost: "$0",            impact: 5 },
  { p: "Label maker + labels",        zone: "planning",    diff: 1, time: "30 min",      cost: "$40 — $80",     impact: 5 },
  { p: "Slatwall for power tools",   zone: "tools",       diff: 3, time: "6 — 8 hrs",   cost: "$120 — $240",   impact: 4 },
  { p: "Overhead racks",              zone: "seasonal",    diff: 2, time: "3 — 4 hrs",   cost: "$120 — $280",   impact: 5 },
  { p: "French cleat wall",           zone: "seasonal",    diff: 3, time: "6 — 8 hrs",   cost: "$80 — $200",    impact: 4 },
  { p: "Rolling tool cabinet",        zone: "tools",       diff: 1, time: "2 — 3 hrs",   cost: "$200 — $500",   impact: 4 },
  { p: "Fastener organizer",          zone: "automotive",  diff: 1, time: "2 hrs",       cost: "$40 — $120",    impact: 3 },
  { p: "Floating shelves",            zone: "multi",       diff: 2, time: "4 — 5 hrs",   cost: "$60 — $160",    impact: 2 },
  { p: "Magnetic tool wall",          zone: "tools",       diff: 1, time: "2 hrs",       cost: "$30 — $80",     impact: 3 },
];

const Dots = ({ n, max = 5, color = OG_ACCENT.brass }) => (
  <span className="og-dots">
    {Array.from({length: max}).map((_, i) => (
      <span key={i} className="d" style={{ background: i < n ? color : 'rgba(239,229,207,0.18)' }} />
    ))}
  </span>
);

const OGMatrix = () => (
  <section className="og-matrix">
    <div className="og-matrix-wrap">
      <div className="section-folio">
        <span>The Decision Matrix · By Difficulty, Time, Impact</span>
        <span className="pg">PG. 22</span>
      </div>
      <div className="og-matrix-head">
        <h2>Ten garage organization projects, <em>ranked.</em></h2>
        <p className="deck">A working table to scan before you start. Difficulty assumes you've never done it before. All projects can be done with rental tools; all are one-weekend jobs.</p>
      </div>
      <div className="og-matrix-table">
        <div className="og-matrix-row head">
          <div>Project</div>
          <div>Zone</div>
          <div>Difficulty</div>
          <div>Time</div>
          <div>Impact</div>
          <div></div>
        </div>
        {MATRIX.map((m, i) => (
          <div className="og-matrix-row" key={i}>
            <div className="proj"><span className="num">{String(i+1).padStart(2,'0')}</span>{m.p}</div>
            <div className="zone">{m.zone}</div>
            <div><Dots n={m.diff} color={OG_ACCENT.brass} /></div>
            <div className="mono">{m.time}</div>
            <div><Dots n={m.impact} color={OG_ACCENT.orange} /></div>
            <div className="go"><a href="/en/garage/organize/">Read →</a></div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== TIPS ===================== */
const TIPS = [
  {
    n: "01", h: "Zones first, everything else second.",
    p: "Before you buy a single bracket, zone your garage. Tools here, automotive there, seasonal in the back, spare in the corner. Everything has a home, and the rest of the system follows from that one decision.",
  },
  {
    n: "02", h: "Vertical, not horizontal.",
    p: "You have way more wall space than floor space. Slatwall from floor to 8 feet, overhead racks, French cleats — vertical storage doesn't just look better, it doubles your capacity without changing the footprint.",
  },
  {
    n: "03", h: "Industrial labels that last.",
    p: "Not masking tape, not permanent marker that fades in one season. A Brother label maker and vinyl cartridges cost $40 and are still readable after five years of garage temperature swings and humidity.",
  },
  {
    n: "04", h: "Stud finder before any fastener.",
    p: "Every wall mount assumes you're hitting studs. A $15 magnetic finder is cheaper than fixing drywall holes. Find the studs first, always.",
  },
  {
    n: "05", h: "Rolling cabinet with labeled drawers.",
    p: "The furniture that earns its corner. It moves to where you're working, compartments are labeled so you don't spend five minutes looking for the right bit, and wheels mean it doesn't hog space when you're not using it.",
  },
  {
    n: "06", h: "One project per weekend.",
    p: "Don't try to slatwall, French cleat, and mount overhead racks all at once. One project, done right, is better than three projects, half-done. By weekend five, your garage is organized and done.",
  },
  {
    n: "07", h: "The zone you use most gets eye-level real estate.",
    p: "Hand tools you reach for every day live on slatwall at eye level. Power tools go next. Seasonal storage goes up high or in back. Frequent access lives where your hand finds it without thinking.",
  },
  {
    n: "08", h: "Label everything, then label it again.",
    p: "Labels on the cabinet, labels on the drawers, labels on the bins. Your brain will forget what's in the pegboard hook in three months. A label that lasts five years costs 50 cents and saves you time forever.",
  },
];

const OGTips = () => (
  <section className="og-tips">
    <div className="og-tips-wrap">
      <div className="section-folio" style={{ marginBottom: 0 }}>
        <span>Field Notes · Eight Tips from Organized Garages</span>
        <span className="pg">PG. 28</span>
      </div>
      <div className="og-tips-head">
        <h2>The moves that turn storage <em>into a system that sticks.</em></h2>
        <div className="num">№ 01 — 08</div>
      </div>
      <div className="og-tips-grid">
        {TIPS.map(t => (
          <div className="og-tip" key={t.n}>
            <div className="badge">№ {t.n}</div>
            <h4>{t.h}</h4>
            <p>{t.p}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== MISTAKES ===================== */
const OGMistakes = () => {
  const items = [
    { h: "Organizing without zones first",                p: "People buy pegboard and shelves and then get confused about where to mount them. Zone first — where do tools live, where does seasonal go, where's the spare space? Everything else is obvious after that." },
    { h: "Shelves without a level",                       p: "A shelf that's 1/4 inch off looks wrong and feels wrong. You'll spend five minutes looking at something that took you 30 seconds to mount wrong. Spend the time to level, always." },
    { h: "Pegboard hooks with no labels",                 p: "The hook in the pegboard is for pliers until you need it for something else. If it's not labeled, you'll spend five minutes every time looking for the same tool. Label the hooks, not just the pegboard." },
    { h: "Overhead racks with too light a load limit",    p: "The $40 lightweight rack holds bikes but not bikes plus bins plus holiday boxes. Get racks rated for 300+ pounds. Cheap racks that sag look bad and eventually fail." },
    { h: "French cleats mounted to drywall",              p: "French cleats are heavy. Studs only. One fastener in drywall and you're pulling the whole wall down in two years when the weight settles." },
    { h: "Fastener organizers that have no labels",       p: "The bolts look like the screws look like the nails until you're halfway through a project and you grabbed the wrong one. Label everything, use a label maker, use vinyl so it lasts." },
    { h: "Rolling cabinets that don't have wheels",       p: "A cabinet that stays in one corner stops being useful. Get a cabinet on wheels so you roll it to where you're working. Wheels turn a storage unit into a tool." },
    { h: "Organization without a purge before setup",    p: "Clean out first. The garage has paint cans from three years ago, tools you borrowed and forgot to return, 'temporary' piles. One Saturday, purge hard. Then organize what's left." },
  ];
  return (
    <section className="og-mistakes">
      <div className="og-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Garage Organization Mistakes We've Seen</span>
          <span className="pg">PG. 36</span>
        </div>
        <div className="og-mistakes-head">
          <h2>Eight mistakes <em>that break every failing system.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="og-mistakes-grid">
          {items.map((m, i) => (
            <div className="og-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>
  );
};

/* ===================== BUYING GUIDE ===================== */
const BUYING = [
  { cat: "Slatwall",        pick: "1/2\" MDF slatwall",        note: "Lighter than plywood, holds hooks and brackets well, paint it if you want. One 4×8 sheet covers a good work zone.",
    avoid: "1/4\" thin slatwall — it sags under load over time." },
  { cat: "Pegboard",        pick: "Hardwood pegboard, 1/4\"",  note: "Better looking than MDF, holds weight longer, take the single-hole 1/4\" option.",
    avoid: "Thin pegboard without backing — it flexes and hooks pull out of the holes." },
  { cat: "French Cleats",   pick: "2x4 studs + 45-degree cut",note: "A French cleat is just two pieces of 2×4, each with a 45-degree cut. Strongest, cheapest seasonal storage wall.",
    avoid: "Buying a 'French cleat kit' — you're paying $8 for something that costs $1 in lumber." },
  { cat: "Overhead Racks",  pick: "300-lb rated, adjustable height", note: "Adjustable height racks clear your car and bikes. 300+ lb rating holds weight without sagging. Spend the extra $40 for adjustable.",
    avoid: "Fixed-height racks that are too low or too high, or racks rated for under 150 lbs." },
  { cat: "Rolling Cabinet", pick: "5-drawer with locking wheels", note: "Labeled drawers, good castors, ball-bearing slides on every drawer. This is furniture you'll use forever.",
    avoid: "Bargain cabinets with plastic drawers that crack — buy once, use forever." },
];

const OGBuyingGuide = () => (
  <section className="og-buy">
    <div className="og-buy-wrap">
      <div className="section-folio">
        <span>The Buying Guide · Storage That Lasts</span>
        <span className="pg">PG. 42</span>
      </div>
      <div className="og-buy-head">
        <h2>What to buy, <em>and what to avoid.</em></h2>
        <p className="deck">A short, biased shopping list — written by people who have organized garages and kept them organized.</p>
      </div>
      <div className="og-buy-grid">
        {BUYING.map(b => (
          <div className="og-buy-cell" key={b.cat}>
            <div className="cat">{b.cat}</div>
            <div className="block pick">
              <span className="label">Buy</span>
              <h4>{b.pick}</h4>
              <p>{b.note}</p>
            </div>
            <div className="block avoid">
              <span className="label">Skip</span>
              <p>{b.avoid}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ===================== FAQ ===================== */
const OGFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the difference between slatwall and pegboard?",
      a: "Pegboard is lighter and cheaper ($30–$60 for a 4×8), but holds less weight and looks less permanent. Slatwall is heavier (requires studs), costs more ($100–$150), but holds three times the weight and looks like a real workshop. For hand tools and light items, pegboard works. For power tools and heavy items, slatwall wins." },
    { q: "How much weight does a French cleat hold?",
      a: "A properly mounted French cleat (to studs, every 16 inches) holds 100+ pounds per cleat, and you'd usually install two cleats for a shelf, so 200+ pounds is realistic. A single 4×8 French cleat wall built right holds more than the heaviest seasonal storage most garages have." },
    { q: "Do I need to hire someone to install slatwall?",
      a: "No. Slatwall is just brackets and fasteners into studs. A stud finder, a level, and a drill are all you need. If you can hang a picture frame, you can install slatwall." },
    { q: "What's the best label maker for a garage?",
      a: "A Brother label maker ($35–$50) with vinyl cartridges. Vinyl lasts years in temperature swings and humidity. Thermal paper fades in six months if you look at it wrong. One vinyl roll lasts forever and costs $4." },
    { q: "Can I put pegboard on drywall without studs?",
      a: "Not permanently. Pegboard is heavy when loaded, and drywall anchors eventually pull through. If you absolutely must mount to drywall, use toggle bolts (rated for way more weight), but the right answer is to find studs 16 inches apart and mount there." },
    { q: "How high should I mount slatwall?",
      a: "Mount it from the floor to 8 feet (standard ceiling height in most garages). Your most-used tools go at eye level (5–6 feet). Power tools go lower. Seasonal stuff or rarely used items go high. Everything you reach for daily lives at eye level." },
    { q: "What's a rolling cabinet, and is it worth it?",
      a: "A rolling cabinet is furniture with drawers (not shelves) on wheels. It costs $200–$500 new. It's worth every penny because it moves to where you're working, keeps fasteners and bits organized with labeled drawers, and doesn't take up permanent wall space. The cabinet you buy today is the one you'll have in 10 years." },
    { q: "How do I organize fasteners without spending forever labeling?",
      a: "Buy a multi-drawer cabinet with small compartments (12–24 compartments). Label the drawer front, not every compartment. Screws go in the screw drawer. Bolts in the bolt drawer. Take 30 minutes labeling the drawer. Done for life." },
  ];
  return (
    <section className="og-faq">
      <div className="section-folio">
        <span>Reader Questions · Garage Organization, Answered</span>
        <span className="pg">PG. 48</span>
      </div>
      <div className="og-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they organize.</em></h2>
      </div>
      <div className="og-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`og-faq-item ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="og-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="og-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

/* ===================== RELATED — cross-link Garage verbs + Organize rooms ===================== */
const OGRelated = () => (
  <section className="og-related">
    <div className="og-related-wrap">
      <div className="og-related-col">
        <div className="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="og-related-list">
          <a href="/en/garage/repair/"    className="row"><span className="n">01</span><span className="t">Repair in the garage</span><span className="ct">44 guides</span></a>
          <a href="/en/garage/build/"     className="row"><span className="n">02</span><span className="t">Build in the garage</span><span className="ct">28 guides</span></a>
          <a href="/en/garage/organize/"  className="row current"><span className="n">03</span><span className="t">Organize the garage</span><span className="ct">28 guides — you are here</span></a>
          <a href="/en/garage/install/"   className="row"><span className="n">04</span><span className="t">Install in the garage</span><span className="ct">33 guides</span></a>
          <a href="/en/garage/clean/"     className="row"><span className="n">05</span><span className="t">Clean the garage</span><span className="ct">22 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="og-related-col">
        <div className="section-folio" style={{ marginBottom: 16 }}>
          <span>Organize somewhere else · Other Rooms</span>
          <span className="pg">B</span>
        </div>
        <h3>Or organize <em>another room.</em></h3>
        <div className="og-related-list">
          <a href="/en/organize/kitchen/"      className="row"><span className="n">01</span><span className="t">Organize the kitchen</span><span className="ct">38 guides</span></a>
          <a href="/en/organize/bedroom/"      className="row"><span className="n">02</span><span className="t">Organize the bedroom</span><span className="ct">24 guides</span></a>
          <a href="/en/organize/bathroom/"     className="row"><span className="n">03</span><span className="t">Organize the bathroom</span><span className="ct">19 guides</span></a>
          <a href="/en/organize/basement/"     className="row"><span className="n">04</span><span className="t">Organize the basement</span><span className="ct">21 guides</span></a>
          <a href="/en/organize/home-office/" className="row"><span className="n">05</span><span className="t">Organize a home office</span><span className="ct">17 guides</span></a>
        </div>
      </div>
    </div>
  </section>
);

/* ===================== COLOPHON ===================== */
const OGColophon = () => (
  <section className="og-colophon">
    <h2>Ready to <em>organize?</em></h2>
    <p>Save a project to your profile and we'll send you the checklist the night before — plus a single, well-edited follow-up if you tell us how it went. No newsletter spam, no upsells, no eight-step launch sequence.</p>
    <a href="/en/garage/" className="go">Back to Garage →</a>
  </section>
);

window.OGHero        = OGHero;
window.OGTop5        = OGTop5;
window.OGEssay       = OGEssay;
window.OGTools       = OGTools;
window.OGMatrix      = OGMatrix;
window.OGTips        = OGTips;
window.OGMistakes    = OGMistakes;
window.OGBuyingGuide = OGBuyingGuide;
window.OGFaq         = OGFaq;
window.OGRelated     = OGRelated;
window.OGColophon    = OGColophon;