/* /en/build — Production Build L1 Hub · Vol. V The Build Issue */

const BuildHero = () => (
  <section className="bld-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504148455328-c376907d081c?w=2400&q=85')" }} />
    <div className="bld-cover-masthead">
      <span>HowTo Quarterly · Vol. V</span>
      <span className="ctr">The Build Issue</span>
      <span className="right">№ 05 / Spring 2026</span>
    </div>
    <div className="bld-cover-content">
      <div>
        <div className="bld-cover-eyebrow">Build · A Field Guide</div>
        <h1>Things worth making <em>yourself.</em></h1>
      </div>
      <div>
        <p className="deck">
          Sawdust is just confidence in another form. 248 build guides — from the first raised bed you'll remember planting in, to the workbench you'll use for the next twenty years.
        </p>
        <div className="bld-cover-meta">
          <div><span className="k">Section</span><span className="v">Build</span></div>
          <div><span className="k">Guides</span><span className="v">248 and counting</span></div>
          <div><span className="k">Reading time</span><span className="v">9 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const Essay = ({ dropcap }) => (
  <section className="bld-essay">
    <div className="bld-essay-wrap">
      <div className="bld-section-folio">
        <span>Editor's Note · The Build Issue</span>
        <span className="pg">PG. 04</span>
      </div>
      <div className="bld-essay-grid">
        <aside className="bld-essay-side">
          <h2>Why we build <em>ourselves.</em></h2>
          <div className="by">By the Editors · 9 min read</div>
        </aside>
        <div className="bld-essay-body">
          <p className="dropcap">
            There's a specific smell that comes with making something from scratch — fresh cedar, the hot tang of a miter saw working through pine, the sour sweetness of wood glue curing in a clamp. You don't get that smell from a flat-pack. You get it from a decision you made: to begin with raw material and end with something that didn't exist before you started.
          </p>
          <p>
            Build is different from the other six lanes on this site. Repair returns something to working order. Install gets a manufactured object into your home. Clean and Organize manage what's already there. But Build is making. Starting with lumber, hardware, and a plan, and ending with a thing that is unmistakably yours — not because you ordered it in the right finish, but because you laid out the cut list, dry-fit the joints, sanded with the grain, and did it with your hands.
          </p>
          <div className="pull">
            "Sawdust is just confidence in another form."
          </div>
          <p>
            That's not a slogan. It's what happens the first time you build a raised garden bed, or a floating shelf that doesn't wobble, or a workbench that holds when you actually put weight on it. You learn something about what wood does under a saw, what glue does under a clamp, what a square corner feels like before you finish it. And the second build is faster, calmer, better. The sawdust is the evidence.
          </p>
          <p>
            Below, 248 build guides organized by room, by skill level, and by how much Saturday you have. Start where you are. Build your way forward.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const EditorsPick = () => (
  <section className="bld-pick">
    <div className="bld-pick-spread">
      <div className="bld-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="bld-pick-text">
        <div className="eyebrow">Featured Build · Lawn &amp; Garden</div>
        <h3>How to build a raised <em>garden bed.</em></h3>
        <p>
          The gateway build for a reason. You'll learn to measure, square, level, and fasten — the four moves that everything else in this lane runs on. Cedar weathers beautifully, the soil is yours to fill, and the first thing you plant in it will taste better than anything you've ever grown.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Beginner–Intermediate</span>
          <span><span className="dot"></span>1 day</span>
          <span><span className="dot"></span>$80–200 in materials</span>
        </div>
        <a href="/en/lawn-garden/build/how-to-build-a-raised-garden-bed/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

const BUILD_ROOMS = [
  { name: "Kitchen",      slug: "kitchen",      desc: "Open shelving, butcher block inserts, a pot rack that earns its overhead space. Kitchen builds change the room faster than any renovation.", count: 18, img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",     slug: "bathroom",     desc: "Floating vanity shelves, a cedar bath mat that gets better with moisture, a small stool that holds every bottle you've been stacking on the edge.", count: 9, img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Bedroom",      slug: "bedroom",      desc: "Platform beds, bedside tables at the right height, a built-in window bench that finally uses that alcove. Bedroom builds are quiet and personal.", count: 22, img: "https://images.unsplash.com/photo-1505691938895-1758d7feb511?w=1200&q=80" },
  { name: "Living Room",  slug: "living-room",  desc: "Floating shelves, a console table, built-in bookcases if you're ambitious. The living room is where a good build gets seen every single day.", count: 30, img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Garage",       slug: "garage",       desc: "The natural home of building. A workbench, a lumber rack, a French cleat wall. Garage builds pay back in every build that follows.", count: 38, img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Basement",     slug: "basement",     desc: "Built-in shelving for the utility walls, a workshop corner, a gaming nook with a real face frame. Basement builds finish the space you already have.", count: 25, img: "https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&q=80" },
  { name: "Attic",        slug: "attic",        desc: "Plywood flooring over joists, simple knee-wall shelving, a pull-down stair landing platform. Attic builds turn an unusable square into genuine storage.", count: 5, img: "https://images.unsplash.com/photo-1494522855154-9297ac14b55f?w=1200&q=80" },
  { name: "Exterior",     slug: "exterior",     desc: "A garden gate, a firewood rack, a mailbox post that actually sits plumb. Exterior builds are visible to the street and worth doing right.", count: 28, img: "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1200&q=80" },
  { name: "Deck & Patio", slug: "deck-patio",   desc: "Cornhole boards, a fire pit bench, a pergola if you have the summer. Deck builds are the reason people start building in the first place.", count: 41, img: "https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", desc: "Raised beds, a cold frame, a trellis, a cedar compost bin. Lawn and garden builds are the lowest-stakes way to learn every fundamental in the lane.", count: 32, img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
];

const BuildRooms = () => {
  const total = BUILD_ROOMS.reduce((s, r) => s + r.count, 0);
  const [accOpen, setAccOpen] = React.useState({ 0: 0, 1: 0 });
  return (
    <section className="bld-rooms-section" id="rooms">
      <div className="bld-rooms-wrap">
        <div className="bld-section-folio" style={{ marginBottom: 0, borderBottom: "none" }}>
          <span>The Menu · Browse by Room</span>
          <span className="pg">PG. 12</span>
        </div>
        <div className="bld-rooms-head">
          <h2>Pick a room. <em>Pick a project.</em></h2>
          <p className="deck">{total} build guides across {BUILD_ROOMS.length} rooms — every one written by someone who made it themselves, in their own home, the first time.</p>
        </div>

        <div className="bld-rooms-accordion">
          {[0, 1].map(rowIdx => (
            <div className="bld-acc-row" key={rowIdx}>
              {BUILD_ROOMS.slice(rowIdx * 5, rowIdx * 5 + 5).map((r, i) => {
                const globalIdx = rowIdx * 5 + i;
                const open = accOpen[rowIdx] === i;
                return (
                  <a
                    key={r.name}
                    href={`/en/${r.slug}/build/`}
                    className={`bld-acc-panel ${open ? "is-open" : ""}`}
                    onMouseEnter={() => setAccOpen(s => ({ ...s, [rowIdx]: i }))}
                    onClick={e => {
                      if (!open) {
                        e.preventDefault();
                        setAccOpen(s => ({ ...s, [rowIdx]: i }));
                      }
                    }}
                  >
                    <div className="ap-img" style={{ backgroundImage: `url(${r.img})` }} />
                    <div className="ap-num">№ {String(globalIdx + 1).padStart(2, "0")}</div>
                    <div className="ap-vname">{r.name}</div>
                    <div className="ap-content">
                      <h3>{r.name}</h3>
                      <p className="ap-desc">{r.desc}</p>
                      <div className="ap-meta">
                        <span><strong>{r.count}</strong> guides</span>
                        <span className="arrow">Browse  →</span>
                      </div>
                    </div>
                  </a>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BuildFilters = () => (
  <section className="bld-filters">
    <div className="bld-filters-grid">
      <div className="bld-filter-block">
        <span className="label">Sort · By Skill Level</span>
        <h3>What have you built before?</h3>
        <div className="bld-filter-pills">
          <a href="/en/build/" className="bld-pill">Beginner <span className="ct">94</span></a>
          <a href="/en/build/" className="bld-pill">Intermediate <span className="ct">118</span></a>
          <a href="/en/build/" className="bld-pill">Advanced <span className="ct">36</span></a>
        </div>
      </div>
      <div className="bld-filter-block">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="bld-filter-pills">
          <a href="/en/build/" className="bld-pill">A morning <span className="ct">42</span></a>
          <a href="/en/build/" className="bld-pill">A day <span className="ct">88</span></a>
          <a href="/en/build/" className="bld-pill">A weekend <span className="ct">92</span></a>
          <a href="/en/build/" className="bld-pill">Multi-day <span className="ct">26</span></a>
        </div>
      </div>
    </div>
  </section>
);

const BuildDecide = () => (
  <section className="bld-decide">
    <div className="bld-section-folio">
      <span>The Decision · Build vs. Call a Pro</span>
      <span className="pg">PG. 24</span>
    </div>
    <div className="bld-decide-head">
      <h2>When to build it <em>yourself</em>, and when to call.</h2>
      <p className="deck">Build gives you the most latitude of any lane. But a few categories belong to professionals — structural elements, load-bearing members, anything retaining soil against a slope above a certain height.</p>
    </div>
    <div className="bld-decide-cols">
      <div className="bld-decide-col">
        <span className="label">Build it · Yourself</span>
        <h3>Go for it if <em>you can…</em></h3>
        <ul>
          <li>Build freestanding furniture: tables, benches, shelving, beds</li>
          <li>Build garden structures: raised beds, cold frames, trellises, compost bins</li>
          <li>Build outdoor play structures, cornhole boards, fire pit surrounds</li>
          <li>Frame interior partitions that are non-structural and non-load-bearing</li>
          <li>Build a workbench, lumber rack, or French cleat wall system</li>
          <li>Build floating shelves, window boxes, a pergola at deck level</li>
        </ul>
      </div>
      <div className="bld-decide-col">
        <span className="label">Hire it · Out</span>
        <h3>Call a pro <em>when…</em></h3>
        <ul>
          <li>The build is structural — touching a load-bearing wall or header</li>
          <li>Retaining walls over 4 feet high (soil pressure requires engineering)</li>
          <li>Deck builds that require footings and permits — footing depth and connection details vary by climate and load</li>
          <li>Anything attached to the roof structure — dormers, roof decks, ridge beams</li>
          <li>Built-in cabinetry with gas or electrical running behind it</li>
          <li>Your gut says the wood is doing too much work. Trust the gut.</li>
        </ul>
      </div>
    </div>
  </section>
);

const BuildMistakes = () => {
  const buildMistakeItems = [
    { h: "Skipping the dry fit",                p: "Every joint, every panel, every run of lumber gets assembled without glue or screws first. Every time. What moves or gaps in the dry fit will fail permanently after the glue sets." },
    { h: "Ignoring wood movement",              p: "Wood expands and contracts across the grain. A tabletop glued flat against a fixed apron will crack in season two. Learn how to allow for movement before you build anything wider than 6 inches." },
    { h: "Cutting to the line, not past it",    p: "Measure twice, cut once — but cut to the waste side of the line, then plane or sand to fit. A cut that goes past the line on the good side is a restart." },
    { h: "Buying cheap pocket screws",          p: "Kreg-style pocket joints are fast and strong — but only with the correct screw length and pilot hole depth for the material thickness. The wrong screw pulls through, every time." },
    { h: "Skipping a square on the assembly",   p: "Clamp the frame, check diagonals before the glue sets. If diagonal A equals diagonal B, you're square. If not, adjust now — you have three minutes before the glue decides for you." },
    { h: "Sanding with the wrong grit sequence", p: "Starting at 220 on rough lumber is like whisper-cleaning a floor. Start at 80 or 100, get the mill marks and tool marks out, then step up. Skipping grits leaves deep scratches under the finish." },
    { h: "Finishing before everything fits",    p: "Sand and finish after the whole thing is assembled and tested, not before. Glue squeeze-out ruins a stained surface. Gaps show after finish, not before." },
    { h: "Underestimating the material list",   p: "Add 15% to every lumber order. The piece with a knot in exactly the wrong spot, the board that cups before you can use it, the cut you need to re-do — the 15% is already spent in the plan." },
  ];
  return (
    <section className="bld-mistakes">
      <div className="bld-mistakes-wrap">
        <div className="bld-section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · From the Shop</span>
          <span className="pg">PG. 32</span>
        </div>
        <div className="bld-mistakes-head">
          <h2>Eight build mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 08</div>
        </div>
        <div className="bld-mistakes-grid">
          {buildMistakeItems.map((m, i) => (
            <div className="bld-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 BuildFaq = () => {
  const [open, setOpen] = React.useState(0);
  const buildFaqs = [
    { q: "Do I need a permit to build something in my yard?",
      a: "For most freestanding structures under a certain size — raised garden beds, small sheds, trellises — no permit is required. Permits typically kick in when the structure is attached to the house, exceeds a footprint threshold (often 120–200 sq ft, varies by jurisdiction), or involves footings. The two-minute check: your local building department's website usually lists exactly what triggers a permit. When in doubt, call them — the call is free." },
    { q: "What tools do I actually need to start building?",
      a: "A circular saw or miter saw for cutting, a drill/driver combo, a quality tape measure, a speed square and a 4-foot level, clamps (more than you think), and a random-orbit sander. That kit covers probably 80% of the projects in this lane. Add a pocket-hole jig (Kreg is the standard) and you unlock almost everything else without needing hand-cut joinery." },
    { q: "What's the difference between Build and Install on this site?",
      a: "Install means taking a finished, manufactured object and getting it functional in your home — a faucet, a TV mount, a light fixture. Build means starting with raw materials — lumber, hardware, sometimes sheet goods — and making something that didn't exist before. The dividing line is whether you're unpacking a box or opening a cut list." },
    { q: "What wood should I use for outdoor builds?",
      a: "Cedar and redwood are the traditional choices — naturally rot-resistant, beautiful, and workable with basic tools. Pressure-treated lumber is cheaper and structurally excellent for ground contact but ugly unfinished and requires specific hardware (hot-dipped galvanized or stainless) to avoid corrosion. Composite decking materials are maintenance-free but can't be ripped or shaped like wood. For raised beds specifically, cedar is the correct answer — untreated, no off-gassing concerns near soil." },
    { q: "How do I know if something is load-bearing before I build?",
      a: "If the wall or beam runs perpendicular to the floor joists above it, it's more likely load-bearing. If it runs parallel, it's more likely a partition. But 'more likely' isn't good enough for structural work — if you're building anything that connects to or modifies an existing structural member, hire a structural engineer for a one-hour consultation. It costs $200-400 and takes the guesswork out permanently." },
    { q: "What's a good first build project?",
      a: "A raised garden bed is the near-universal answer, and for good reason: it teaches you to measure, mark, cut, check square, and fasten — the core moves of every build that follows. Materials cost $80–$200, there's no joinery more complex than a butt joint with pocket screws, it lives outside so small mistakes stay outside, and something you plant in it grows. Second-best first build: a set of floating shelves in the garage. Same skill set, immediate reward, nothing to lose." },
  ];
  return (
    <section className="bld-faq">
      <div className="bld-faq-head">
        <span className="label">Reader Questions · Answered</span>
        <h2>What people ask <em>before they build.</em></h2>
      </div>
      <div className="bld-faq-list">
        {buildFaqs.map((f, i) => (
          <div key={i} className={`bld-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="bld-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="bld-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const BuildColophon = () => (
  <section className="bld-colophon">
    <h2>Found what you're <em>building?</em></h2>
    <p>Every guide on HowTo is written by someone who built the project in their own home. Pick a room and start making.</p>
    <a href="#rooms" className="go">Browse all rooms  →</a>
  </section>
);

window.BuildHero      = BuildHero;
window.Essay          = Essay;
window.EditorsPick    = EditorsPick;
window.BuildRooms     = BuildRooms;
window.BuildFilters   = BuildFilters;
window.BuildDecide    = BuildDecide;
window.BuildMistakes  = BuildMistakes;
window.BuildFaq       = BuildFaq;
window.BuildColophon  = BuildColophon;