// BLGHero Component
function BLGHero() {
  return (
    <section className="blg-hero">
      <h1>Build × Lawn/Garden</h1>
      <p className="blg-subtitle">The first project where wood, dirt, and weather all agree.</p>
    </section>
  );
}

// BLGTop5 Component (5 featured guides)
function BLGTop5() {
  return (
    <section className="blg-top5">
      <h2>Five highest-search build projects in lawn and garden</h2>
      <p>If you don't know where to start, these five represent ~70% of all build searches for this space.</p>
      <ol>
        <li><strong>How to build a raised garden bed</strong> — Four hours. $140–$280. Beginner. The single highest-ROI garden project — one bed transforms a patch of weeds into growing space.</li>
        <li><strong>How to build a wooden trellis</strong> — Six to eight hours. $80–$180 per trellis. Beginner-to-intermediate. Standard 6×8 frame with techniques that transfer to every other vertical structure.</li>
        <li><strong>How to build a stone border</strong> — One to three days. $200–$600. Intermediate. Retaining and edging across dry-stacked and mortared options.</li>
        <li><strong>How to build a pergola</strong> — Two weekends. $500–$1,500. Advanced. Post depth, beam sizing, and lattice density — the three engineering decisions that matter.</li>
        <li><strong>How to build a garden pathway</strong> — One to two days. $80–$250. Beginner-to-intermediate. Gravel, stepping stone, paver, or crushed stone — every option requires base preparation.</li>
      </ol>
    </section>
  );
}

// BLGEssay Component (editorial prose)
function BLGEssay() {
  return (
    <section className="blg-essay">
      <h2>The heart of outdoor building: wood, dirt, and weather</h2>
      <p>
        Outdoor building is different from indoor because the weather is the fourth material. Cedar rots differently than pressure-treated lumber. Ground contact requires one material, frost line requires another. A trellis 6 feet tall needs different bracing than one that's 10 feet.
      </p>
      <p>
        The lawn and garden is the highest-payoff space for build work. Three reasons. First, outdoor builds change how you use the property — a raised bed transforms a patch into growing space, a trellis takes a flat wall and adds vertical structure and shade. Second, garden builds are visible and functional — every guest comments on a pergola, and the path you built stays dry in the rain. Third, outdoor builds improve with time — a trellis gets better as the vines mature, a stone border holds stronger after frost cycles, a pergola creates microclimate as it ages.
      </p>
    </section>
  );
}

// BLGTools Component
function BLGTools() {
  const tools = [
    { title: 'Spade and mattock', desc: 'A spade digs; a mattock breaks compacted soil and roots. Buy both.' },
    { title: 'Wheelbarrow', desc: 'Moving soil, mulch, and stone is the core repetition in garden work.' },
    { title: 'Circular saw', desc: 'For bed timbers, trellis frames, and pathway edging.' },
    { title: 'Post level (6-foot)', desc: 'Catches trueness on tall pergola posts; makes a difference when setting posts.' },
    { title: 'Soil compactor (rented)', desc: 'For pathways and drainage base layers.' },
    { title: 'String level and mason\'s line', desc: 'For grading, sloping pathways, and checking border height.' },
    { title: 'Mixing tub and concrete mix', desc: 'For post-hole concrete and stepping stone setting.' },
  ];
  return (
    <section className="blg-tools">
      <h2>Tools that earn their place in garden builds</h2>
      <ul>
        {tools.map((tool, idx) => (
          <li key={idx}>
            <strong>{tool.title}.</strong> {tool.desc}
          </li>
        ))}
      </ul>
    </section>
  );
}

// BLGMatrix Component (category breakdown)
function BLGMatrix() {
  const categories = [
    { name: 'Raised beds and planters', count: 8 },
    { name: 'Vertical structures', count: 7 },
    { name: 'Borders and edges', count: 6 },
    { name: 'Pathways and hardscape', count: 7 },
    { name: 'Water and drainage', count: 2 },
    { name: 'Specialized structures', count: 2 },
  ];
  return (
    <section className="blg-matrix">
      <h2>The 32-guide build catalog, by category</h2>
      <div className="blg-matrix-grid">
        {categories.map((cat) => (
          <div key={cat.name} className="blg-matrix-card">
            <div className="blg-matrix-count">{cat.count}</div>
            <div className="blg-matrix-label">{cat.name}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// BLGTips Component
function BLGTips() {
  const tips = [
    'Always check soil drainage before building permanent structures.',
    'Post holes must be below frost line—typically 18–48 inches depending on region.',
    'Use pressure-treated lumber for ground contact; cedar or composite for above-ground.',
    'Measure twice, cut once—outdoor building tolerates less rework than indoor.',
    'Grade and slope all hardscape away from structures to prevent water damage.',
  ];
  return (
    <section className="blg-tips">
      <h2>Pro tips</h2>
      <ul>
        {tips.map((tip, idx) => (
          <li key={idx}>{tip}</li>
        ))}
      </ul>
    </section>
  );
}

// BLGMistakes Component
function BLGMistakes() {
  const mistakes = [
    'Building raised beds on unleveled, poorly-draining ground — water pools and settles unevenly.',
    'Under-sizing pergola posts for snow load — structural failure in winter.',
    'Skipping drainage behind retaining walls — wall failure and foundation damage.',
    'Using untreated wood for ground contact — rapid rot and collapse.',
    'Building pathways without base preparation — sinking within two seasons.',
  ];
  return (
    <section className="blg-mistakes">
      <h2>Five mistakes specific to garden builds</h2>
      <ul>
        {mistakes.map((mistake, idx) => (
          <li key={idx}><strong>{idx + 1}.</strong> {mistake}</li>
        ))}
      </ul>
    </section>
  );
}

// BLGBuyingGuide Component
function BLGBuyingGuide() {
  return (
    <section className="blg-buy">
      <h2>Material guide: wood, stone, fasteners</h2>
      <div className="blg-buy-items">
        <div className="blg-buy-item">
          <h3>Lumber</h3>
          <p>Cedar for visibility, pressure-treated for durability in ground. Composite for low maintenance — lasts 30+ years without sealing.</p>
        </div>
        <div className="blg-buy-item">
          <h3>Stone</h3>
          <p>Local quarry stone matches regional landscape. Reclaimed stone adds history. Thickness and width matter — 6–12 inches wide, 3–4 inches thick for 2-foot walls.</p>
        </div>
        <div className="blg-buy-item">
          <h3>Fasteners</h3>
          <p>Stainless steel or hot-dipped galvanized resist rust in outdoor conditions. Avoid electroplated fasteners — they fail after one frost cycle.</p>
        </div>
      </div>
    </section>
  );
}

// BLGFaq Component
function BLGFaq() {
  const faqs = [
    {
      q: 'How deep should I bury fence posts?',
      a: 'One-third of the post height, minimum. In frost areas, below the frost line (12–48 inches). Set in concrete, which hardens in 24 hours.',
    },
    {
      q: 'What wood lasts longest for raised beds?',
      a: 'Cedar and composite last longest. Pressure-treated lasts 20 years. Untreated pine rots in 3–5 years. Composite does not need sealing and lasts 30+ years.',
    },
    {
      q: 'How do I prevent drainage problems behind a retaining wall?',
      a: 'Install perforated drainage pipe behind the wall, back-fill with gravel, ensure water escapes to daylight. This is the $30 insurance that costs $5,000 if you skip it.',
    },
    {
      q: 'How do I prevent frost heave on a pergola post?',
      a: 'Bury below frost line (18–36 inches) and set in concrete. Above-ground posts shift every winter on frost-susceptible soil.',
    },
  ];
  return (
    <section className="blg-faq">
      <h2>Common questions about garden builds</h2>
      {faqs.map((faq, idx) => (
        <div key={idx} className="blg-faq-item">
          <h4>{faq.q}</h4>
          <p>{faq.a}</p>
        </div>
      ))}
    </section>
  );
}

// BLGRelated Component (cross-room/lane links)
function BLGRelated() {
  const related = [
    { title: 'Build × Kitchen', url: '/en/build/kitchen/' },
    { title: 'Build × Living Room', url: '/en/build/living-room/' },
    { title: 'Build × Bathroom', url: '/en/build/bathroom/' },
    { title: 'Build × Garage', url: '/en/build/garage/' },
    { title: 'Grow × Lawn & Garden', url: '/en/lawn-garden/grow/' },
    { title: 'Organize × Lawn & Garden', url: '/en/lawn-garden/organize/' },
    { title: 'Maintain × Lawn & Garden', url: '/en/lawn-garden/maintain/' },
    { title: 'Clean × Lawn & Garden', url: '/en/lawn-garden/clean/' },
    { title: 'Refresh × Lawn & Garden', url: '/en/lawn-garden/refresh/' },
    { title: 'Build × Exterior', url: '/en/build/exterior/' },
  ];
  return (
    <section className="blg-related">
      <h2>Explore other intersections</h2>
      <div className="blg-related-grid">
        {related.map((item, idx) => (
          <a key={idx} href={item.url} className="blg-related-card">
            {item.title}
          </a>
        ))}
      </div>
    </section>
  );
}

// BLGColophon Component (footer)
function BLGColophon() {
  return (
    <section className="blg-colophon">
      <h2>About this intersection</h2>
      <p>
        This page is the Build × Lawn/Garden intersection — one of the 60 intersection pages on HowTo: Home Edition. It exists at two equivalent URLs by design: <code>/en/build/lawn-garden/</code> (lane-first) and <code>/en/lawn-garden/build/</code> (room-first). Both serve the same 32 leaf-level build guides. The dual entry points support two equally valid mental models — "I want to build something" and "I want to build something in the lawn or garden."
      </p>
    </section>
  );
}