/* /en/deck-patio — Production Deck & Patio Room Hub */

const DeckPatioHero = () => (
  <section className="dp-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1600566752355-35792bedcfea?w=2400&q=85')" }} />
    <div className="dp-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Deck &amp; Patio
      </span>
      <span className="ctr">HowTo Quarterly · Vol. IX / The Deck &amp; Patio Issue / № 09 / Spring 2026</span>
      <span className="right">№ 09 / Spring 2026</span>
    </div>
    <div className="dp-cover">
      <div>
        <div className="eyebrow">Room Guide · Deck &amp; Patio</div>
        <h1>The outdoor room you can <em>build yourself.</em></h1>
      </div>
      <div>
        <p className="deck">
          Every guide we've written for the room that lives between your house and the sky — sorted by what you came here to build, fix, light, or stain.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Deck &amp; Patio</span></div>
          <div><span className="k">Guides</span><span className="v">128 total</span></div>
          <div><span className="k">Reading time</span><span className="v">11 min</span></div>
          <div><span className="k">Updated</span><span className="v">April 2026</span></div>
        </div>
      </div>
    </div>
  </section>
);

const DP_ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's weathered.",
    lede: "Rotted boards, a wobbling post, a railing that doesn't pass the grab test. Weather is slow, patient, and thorough. Stay ahead of it.",
    bg: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80",
    examples: "Rotted deck boards · Loose railing post · Cracked pavers · Splintered fascia · Gate hinge · Wobbly pergola post",
    count: 24,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what's new.",
    lede: "Pavers, string lights, outdoor outlets, post-cap lights, and the gate you've been meaning to add since you moved in.",
    bg: "https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1400&q=80",
    examples: "Pavers · String lights · Outdoor outlet · Post-cap lights · GFCI · Gate latch · Low-voltage transformer",
    count: 29,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from scratch.",
    lede: "A pergola, a planter box, a built-in bench, a fire feature. The outdoor room is the one room you actually frame yourself.",
    bg: "https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400&q=80",
    examples: "Pergola · Planter boxes · Built-in bench · Deck from scratch · Privacy screen · Fire pit surround · Potting bench",
    count: 41,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what the weather left.",
    lede: "Pollen, mildew, grease from last summer's grill, and the tannin stains that show up every spring on composite decking.",
    bg: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1400&q=80",
    examples: "Pressure wash · Mildew on wood · Composite stain · Paver algae · Teak cleaning · Grill area degreasing · Furniture storage",
    count: 16,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the season.",
    lede: "The gear pile that collects by the back door, the hose that never has a home, the cushions that need somewhere dry to live.",
    bg: "https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?w=1400&q=80",
    examples: "Hose storage · Cushion bins · Tool corral · Seasonal gear · Grill station layout · Plant shelf",
    count: 6,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the room.",
    lede: "Stain color, planter arrangement, the right outdoor rug, and the lighting plan that makes 7pm feel like the best hour of the day.",
    bg: "https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1400&q=80",
    examples: "Stain color · Outdoor rug · Planter styling · String light arrangement · Furniture layout · Seasonal decor",
    count: 12,
  },
];

const DeckPatioMenu = () => (
  <section className="dp-menu">
    <div className="dp-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Deck &amp; Patio, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="dp-menu-head">
        <h2>Six things to do <em>on a deck.</em></h2>
        <p className="deck">
          Every project on this site lives at the intersection of a room and a verb. You're outside — pick a verb.
        </p>
      </div>
      <div className="dp-actions">
        {DP_ACTIONS.map(a => (
          <a key={a.name} href={`/en/deck-patio/${a.slug}/`} className="dp-act">
            <div className="dp-act-bg" style={{ backgroundImage: `url(${a.bg})` }} />
            <div className="num">№ {a.n} — Layer 01</div>
            <h3>{a.name} <em>{a.em}</em></h3>
            <p className="lede">{a.lede}</p>
            <p className="examples">{a.examples}</p>
            <div className="foot">
              <span><strong>{a.count}</strong> guides</span>
              <span className="arr">Browse {a.name.toLowerCase()} →</span>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioEssay = () => (
  <section className="dp-essay">
    <div className="dp-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(201,150,42,0.3)" }}>
        <span>Editor's Note · The Deck &amp; Patio, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="dp-essay-grid">
        <aside className="dp-essay-side">
          <h2>The room that <em>lives outside.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Top search verb</span><strong>"build"</strong></div>
            <div className="row"><span>Most built project</span><strong>Pergola</strong></div>
            <div className="row"><span>Avg. project ROI</span><strong>65%</strong></div>
            <div className="row"><span>Search volume / mo</span><strong>920K</strong></div>
          </div>
        </aside>
        <div className="dp-essay-body">
          <p className="dropcap">
            The deck or patio is the only room in your house you actually built — or could build. Not with a contractor walking you through it, not with a YouTube video and crossed fingers, but with a post-hole digger and a level and two weekends and the sense that you are making something permanent out of materials that started as a pile. That feeling is real. We built this section for the person who has it.
          </p>
          <p>
            It's also the room that gets the least maintenance and the most weather. Every spring, a fresh coat of pollen, a new round of mildew on the north-facing boards, and the realization that the stain from two years ago is starting to gray at the edges. The outdoor room rewards the person who treats it like a room — who cleans it, maintains it, thinks about the lighting at 7pm when the day is done and there's nowhere else you'd rather be.
          </p>
          <div className="pull">
            "String lights over a deck you built yourself. That's the thing people remember."
          </div>
          <p>
            So we built the menu around the verbs, same as every room on this site: <a href="/en/deck-patio/repair/">repair</a>, <a href="/en/deck-patio/install/">install</a>, <a href="/en/deck-patio/build/">build</a>, <a href="/en/deck-patio/clean/">clean</a>, <a href="/en/deck-patio/organize/">organize</a>, <a href="/en/deck-patio/decorate/">decorate</a>. Build is the heaviest lane here — 41 guides — because the deck and patio is where the site's DIY scope runs deepest. You can build a pergola. You can pour a paver base. You can run conduit to an outdoor outlet. We'll show you how.
          </p>
          <p>
            Below: the season's featured project, the most-read guides, the six mistakes our readers wish they'd known about, and a zone-by-zone breakdown of the outdoor room that helps you find the guide for the part that needs work right now.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const DeckPatioPick = () => (
  <section className="dp-pick">
    <div className="dp-pick-spread">
      <div className="dp-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1600566752734-2a0cd5f58e40?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="dp-pick-text">
        <div className="eyebrow">Featured Project · Deck &amp; Patio, Install</div>
        <h3>How to install <em>pavers</em> in a single weekend.</h3>
        <p>
          The patio upgrade with the highest visual payoff and the most forgiving learning curve. Layout, compacted base, sand layer, and the satisfying click of pavers setting into place. Done by Sunday evening.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>1 weekend</span>
          <span><span className="dot"></span>$400–1,200</span>
          <span><span className="dot"></span>10 steps</span>
        </div>
        <a href="/en/deck-patio/install/how-to-install-pavers/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

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

const DeckPatioIndex = () => {
  const cols = [
    {
      title: "Five most-searched guides",
      count: "By search volume",
      items: [
        ["01", "How to install pavers",          "Install · 1 weekend"],
        ["02", "How to build a pergola",          "Build · 2 days"],
        ["03", "How to install string lights",    "Install · 90 min"],
        ["04", "How to build planter boxes",      "Build · 4 hrs"],
        ["05", "How to stain a deck",             "Decorate · 2 days"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to repair rotted deck boards",   "Repair · half day"],
        ["02", "How to install outdoor GFCI outlet", "Install · 2 hrs"],
        ["03", "How to build a built-in bench",       "Build · weekend"],
        ["04", "How to pressure-wash a deck",         "Clean · 2 hrs"],
        ["05", "How to organize outdoor gear",        "Organize · 3 hrs"],
        ["06", "How to arrange string lights",        "Decorate · 90 min"],
      ],
    },
  ];
  return (
    <section className="dp-index">
      <div className="dp-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read deck &amp; patio guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="dp-index-head">
          <h2>What people came here <em>to build.</em></h2>
          <div className="right">As of <strong>April 2026</strong> · live ranking</div>
        </div>
        <div className="dp-index-grid">
          {cols.map(c => (
            <div className="dp-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="dp-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={dpLaneHref(m)}><span className="n">{n}</span><span className="t-text">{t}</span><span className="t">{m}</span></a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const DeckPatioMistakes = () => {
  const items = [
    { h: "Skipping the prep wash before stain",
      p: "Any pollen or dust on the boards when you stain = streaky color that won't fix without stripping. Pressure-wash the entire deck, let it dry for 48 hours, then stain. The two-day wait is not optional." },
    { h: "Installing pavers without a proper base",
      p: "Four inches of compacted gravel plus one inch of sand is the minimum. Skip either layer and your pavers will settle unevenly within twelve months. You'll be pulling them up and starting over." },
    { h: "Deck rail height under 36 inches",
      p: "Code violation in most jurisdictions. Residential minimum is 36 inches; commercial is 42 inches. Measure before you build any railing. Rebuilding rail at code height after the fact is a full weekend of demo and re-work." },
    { h: "Running string lights on an extension cord through the lawn",
      p: "Trip hazard and fire risk — UV-degraded extension cord jackets fail at the soil line. Install a proper outdoor outlet with GFCI protection for any permanent string light setup. The outlet install is a Saturday afternoon." },
    { h: "Pergola posts buried direct in dirt instead of post anchors on concrete",
      p: "Rot at the soil line in five years, guaranteed. Set posts in post-anchor hardware on poured concrete footings. The hardware costs $18 per post. The alternative costs a rebuilt pergola." },
    { h: "Staining over an old failing finish",
      p: "New stain over peeling old stain peels with the old stain. Strip first — always. Use a deck stripper, sand any high spots, then apply new stain to bare wood. There is no shortcut that works here." },
  ];
  return (
    <section className="dp-mistakes">
      <div className="dp-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Deck &amp; Patio Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="dp-mistakes-head">
          <h2>Six deck &amp; patio mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="dp-mistakes-grid">
          {items.map((m, i) => (
            <div className="dp-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 DeckPatioFilters = () => (
  <section className="dp-filters">
    <div className="dp-filters-grid">
      <div className="dp-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you built before?</h3>
        <div className="dp-pills">
          <a href="/en/deck-patio/" className="dp-pill">Beginner <span className="ct">54</span></a>
          <a href="/en/deck-patio/" className="dp-pill">Intermediate <span className="ct">58</span></a>
          <a href="/en/deck-patio/" className="dp-pill">Advanced <span className="ct">16</span></a>
        </div>
      </div>
      <div className="dp-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="dp-pills">
          <a href="/en/deck-patio/" className="dp-pill">Under 2 hours <span className="ct">22</span></a>
          <a href="/en/deck-patio/" className="dp-pill">A morning <span className="ct">38</span></a>
          <a href="/en/deck-patio/" className="dp-pill">A weekend <span className="ct">51</span></a>
          <a href="/en/deck-patio/" className="dp-pill">Multi-day <span className="ct">17</span></a>
        </div>
      </div>
      <div className="dp-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="dp-pills">
          <a href="/en/deck-patio/" className="dp-pill">$0 — $100 <span className="ct">34</span></a>
          <a href="/en/deck-patio/" className="dp-pill">$100 — $500 <span className="ct">48</span></a>
          <a href="/en/deck-patio/" className="dp-pill">$500 — $2k <span className="ct">32</span></a>
          <a href="/en/deck-patio/" className="dp-pill">$2k+ <span className="ct">14</span></a>
        </div>
      </div>
    </div>
  </section>
);

const DeckPatioAnatomy = () => {
  const parts = [
    { n: "01", h: "Decking surface", em: "& drainage.",
      d: "Boards, pavers, concrete, and the slope that keeps water moving away from the house.",
      links: [["Repair rotted boards", "repair"], ["Stain a deck", "decorate"], ["Install pavers", "install"], ["Pressure wash", "clean"], ["Seal concrete", "clean"]] },
    { n: "02", h: "Railings", em: "& rail caps.",
      d: "Posts, balusters, top cap. Code-required height. The grab test you should run every spring.",
      links: [["Replace railing", "install"], ["Tighten post", "repair"], ["Code-height check", "repair"], ["New baluster", "install"], ["Paint rail", "decorate"]] },
    { n: "03", h: "Built-ins", em: "& structures.",
      d: "Benches, planters, pergola, fire feature. Everything that's attached and has footings.",
      links: [["Build pergola", "build"], ["Build planter boxes", "build"], ["Built-in bench", "build"], ["Fire pit surround", "build"], ["Privacy screen", "build"]] },
    { n: "04", h: "Lighting", em: "& electrical.",
      d: "String lights, post-cap lights, outdoor outlets, GFCI protection, low-voltage transformer.",
      links: [["Install string lights", "install"], ["Outdoor GFCI outlet", "install"], ["Post-cap lights", "install"], ["Low-voltage path lights", "install"], ["Arrange lighting", "decorate"]] },
  ];
  return (
    <section className="dp-anatomy">
      <div className="dp-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Deck &amp; Patio, By the Zone</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="dp-anatomy-head">
          <h2>Four zones of a deck &amp; patio, <em>and the guides that work them.</em></h2>
          <p className="deck">If you have a problem in a specific part of the outdoor room — start with the zone. We'll route you to the right guide from there.</p>
        </div>
        <div className="dp-anatomy-grid">
          {parts.map(p => (
            <div className="dp-anatomy-cell" key={p.n}>
              <div className="n">№ {p.n}</div>
              <h4>{p.h} <em>{p.em}</em></h4>
              <p>{p.d}</p>
              <div className="links">
                {p.links.map(([label, lane], i) => (
                  <React.Fragment key={label}>
                    <a href={`/en/deck-patio/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const DeckPatioFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Do I need a permit to build a deck or pergola?",
      a: "Almost always yes for a deck — it's attached to the house and has structural footings. The permit process protects you: it ensures the ledger bolt pattern is code-correct and the footings are sized for your soil. Freestanding pergolas often don't require a permit under a certain square footage, but that threshold varies by jurisdiction. Check your local building department before you pour concrete. A permit typically costs $100–350 and is worth every dollar." },
    { q: "What's the highest-ROI deck & patio project?",
      a: "Staining an existing deck, if the wood is sound. Materials run $80–180 for a standard 200 sf deck, the project takes two days including cure time, and the visual result is dramatic. After that: install string lights ($80–180, 90 minutes, transforms the 7pm experience entirely) and add pavers to a bare-dirt side yard ($400–1200, one weekend, creates usable square footage)." },
    { q: "Can I install an outdoor electrical outlet myself?",
      a: "Yes, if you're comfortable with basic electrical work and your jurisdiction allows homeowner permits. The install requires a weatherproof box, GFCI-protected outlet, and conduit run back to your panel or an existing circuit. Most outdoor outlet installs take two to three hours. If you're not sure about your panel capacity or the circuit routing, hire an electrician for that part and do the box and outlet work yourself." },
    { q: "What kind of wood is best for a new deck?",
      a: "Pressure-treated pine is the most common and most affordable — it's code-compliant for ground contact, widely available, and takes stain well after a season of drying. Cedar and redwood are naturally rot-resistant and take stain immediately, but cost 2–3x more. Composite decking (Trex, TimberTech) costs the most upfront but requires almost no maintenance. For a first build: pressure-treated pine, stained after one full season of weather exposure." },
    { q: "How do I know if my deck boards need replacing vs. just refinishing?",
      a: "The screwdriver test: push the tip of a screwdriver firmly into the board at the end grain and at the center. If it sinks more than 1/4 inch without pressure, the wood is soft — replace that board. If it resists, the wood is sound — clean and refinish. Also check for any board that springs when you walk on it (joist issue, not board issue) and any board with a crack running the full length of the grain (structural failure, replace)." },
    { q: "What's the best way to get string lights to look deliberate, not sloppy?",
      a: "Two things: attachment height and sag angle. For a 12-foot ceiling equivalent outdoors, attach lights at 8–10 feet on the house side and at the same height on the far attachment (post or pergola beam). A slight catenary sag — about 6 inches of droop across a 15-foot span — reads as intentional. Straight-line tight is TV-set; too much sag is college dorm. Get the angles right and the rest is bulb selection: Edison-style warm (2200K) for amber glow, globe-style for modern." },
  ];
  return (
    <section className="dp-faq">
      <div className="section-folio">
        <span>Reader Questions · Deck &amp; Patio, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="dp-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they build outside.</em></h2>
      </div>
      <div className="dp-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`dp-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="dp-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="dp-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const DP_SISTERS = [
  { name: "Kitchen",     slug: "kitchen",     ct: "312 guides", img: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1200&q=80" },
  { name: "Bathroom",    slug: "bathroom",    ct: "284 guides", img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80" },
  { name: "Living Room", slug: "living-room", ct: "247 guides", img: "https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=1200&q=80" },
  { name: "Lawn & Garden", slug: "lawn-garden", ct: "172 guides", img: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1200&q=80" },
  { name: "Exterior",    slug: "exterior",    ct: "158 guides", img: "https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=1200&q=80" },
];

const DeckPatioSisters = () => (
  <section className="dp-sisters">
    <div className="dp-sisters-wrap">
      <div className="dp-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="dp-sisters-grid">
        {DP_SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="dp-sister">
            <div className="img" style={{ backgroundImage: `url(${s.img})` }} />
            <div className="meta">
              <div className="nm">{s.name}</div>
              <div className="ct">{s.ct}</div>
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

const DeckPatioColophon = () => (
  <section className="dp-colophon">
    <h2>Got a deck to <em>build?</em></h2>
    <p>Every deck &amp; patio guide on HowTo is written by someone who did the project in their own backyard. Pick a verb and get started.</p>
    <a href="#dp-menu" className="go">Browse deck &amp; patio projects  →</a>
  </section>
);

window.DeckPatioHero      = DeckPatioHero;
window.DeckPatioMenu      = DeckPatioMenu;
window.DeckPatioEssay     = DeckPatioEssay;
window.DeckPatioPick      = DeckPatioPick;
window.DeckPatioIndex     = DeckPatioIndex;
window.DeckPatioMistakes  = DeckPatioMistakes;
window.DeckPatioFilters   = DeckPatioFilters;
window.DeckPatioAnatomy   = DeckPatioAnatomy;
window.DeckPatioFaq       = DeckPatioFaq;
window.DeckPatioSisters   = DeckPatioSisters;
window.DeckPatioColophon  = DeckPatioColophon;