/* /en/exterior — Production Exterior Room Hub */

const ExteriorHero = () => (
  <section className="ext-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=2400&q=85')" }} />
    <div className="ext-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Exterior
      </span>
      <span className="ctr">HowTo Quarterly · Vol. VIII / The Exterior Issue</span>
      <span className="right">№ 08 / Spring 2026</span>
    </div>
    <div className="ext-cover">
      <div>
        <div className="eyebrow">Room Guide · Exterior</div>
        <h1>The first impression. <em>The last line of defense.</em></h1>
      </div>
      <div>
        <p className="deck">
          Every exterior guide we've written — sorted by what you need to do, not by what looks good in a showroom.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Exterior</span></div>
          <div><span className="k">Guides</span><span className="v">151 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 EXT_ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's failing.",
    lede: "Sagging gutters, cracked caulk, rotted soffits, storm damage. The exterior weathers everything you ignore indoors.",
    bg: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80",
    examples: "Sagging gutter · Rotted fascia · Cracked caulk · Damaged soffit · Broken porch light · Gate hinge",
    count: 38,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what upgrades it.",
    lede: "Smart locks, house numbers, landscape lighting, doorbells, outdoor outlets. Every install that raises the curb-appeal ceiling.",
    bg: "https://images.unsplash.com/photo-1558618047-3c8c76ca7d13?w=1400&q=80",
    examples: "Smart lock · House numbers · Landscape lighting · Doorbell · Outdoor outlet · Porch light · Mailbox",
    count: 41,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from scratch.",
    lede: "A proper mailbox post, a front-porch planter, a garden gate, a decorative address column. Saw-and-paint projects for the facade.",
    bg: "https://images.unsplash.com/photo-1416879595882-3373a0480b5b?w=1400&q=80",
    examples: "Mailbox post · Planter box · Garden gate · Address column · Porch railing · Window boxes · Trellis",
    count: 28,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what the weather built up.",
    lede: "Pressure-wash the siding, flush the gutters, clean the porch, strip the mildew off the fence. Yearly rituals that prevent five-figure repairs.",
    bg: "https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=1400&q=80",
    examples: "Pressure wash siding · Flush gutters · Clean porch · Strip mildew · Wash windows · Clean light fixtures",
    count: 22,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "the front approach.",
    lede: "Cord management for landscape lighting, seasonal decor storage, hose reels, and the shed wall that holds everything together.",
    bg: "https://images.unsplash.com/photo-1563453392212-326f5e854473?w=1400&q=80",
    examples: "Wire management · Seasonal storage · Hose reel · Key hooks · Doorbell schedule · Mailbox system",
    count: 8,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "the facade.",
    lede: "Paint the front door, pick house numbers with presence, install a porch light worth photographing. Curb appeal is a decision, not an accident.",
    bg: "https://images.unsplash.com/photo-1523217582562-09d0def993a6?w=1400&q=80",
    examples: "Paint front door · Choose house numbers · Porch light swap · Wreath hook · Seasonal wreaths · Door color",
    count: 14,
  },
];

const ExteriorMenu = () => (
  <section className="ext-menu">
    <div className="ext-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Exterior, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="ext-menu-head">
        <h2>Six things to do <em>outside your house.</em></h2>
        <p className="deck">
          Every exterior project on this site lives at the intersection of a place and a verb. You're at the exterior — pick a verb.
        </p>
      </div>
      <div className="ext-actions">
        {EXT_ACTIONS.map(a => (
          <a key={a.name} href={`/en/exterior/${a.slug}/`} className="ext-act">
            <div className="ext-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 ExteriorEssay = () => (
  <section className="ext-essay">
    <div className="ext-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(184,150,74,0.22)" }}>
        <span>Editor's Note · The Exterior, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="ext-essay-grid">
        <aside className="ext-essay-side">
          <h2>The house's <em>first word.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Guides in this room</span><strong>151</strong></div>
            <div className="row"><span>Top searched verb</span><strong>"paint"</strong></div>
            <div className="row"><span>Weekend budget (refresh)</span><strong>$200</strong></div>
            <div className="row"><span>Most-missed detail</span><strong>numbers</strong></div>
          </div>
        </aside>
        <div className="ext-essay-body">
          <p className="dropcap">
            The exterior of a house is the one room everyone sees and almost no one maintains on schedule. It weathers every season, absorbs every storm, and degrades quietly — a hairline crack in the caulk around the door frame, a gutter that now pitches the wrong way, house numbers that haven't been legible from the street since the original owners moved out. Most of it is cheap to fix before it becomes expensive to fix. Almost none of it requires a contractor.
          </p>
          <p>
            Which is why we built this hub around the verbs, not the features. You don't come here for "exterior ideas." You come here because something is failing, something needs installing, or you finally decided that the front door color is going to change this weekend. <a href="/en/exterior/repair/">Repair</a>, <a href="/en/exterior/install/">install</a>, <a href="/en/exterior/build/">build</a>, <a href="/en/exterior/clean/">clean</a>, <a href="/en/exterior/organize/">organize</a>, <a href="/en/exterior/decorate/">decorate</a> — six lanes, each a complete library of guides written by people who did the work on their own houses.
          </p>
          <div className="pull">
            "The exterior is the one room everyone sees and almost no one maintains on schedule."
          </div>
          <p>
            The exterior is also the room most punished by skipped maintenance. A gutter with the wrong pitch creates an ice dam that takes out the fascia board. A door frame with a failed caulk joint leaks water into the wall cavity for two years before the rot shows. A front door painted in direct afternoon sun peels in six months. The guides in this section are built around those failure modes — not because we're pessimists, but because understanding why things fail is the fastest path to doing them right the first time.
          </p>
          <p>
            Below: the seasonal pick, the most-read exterior projects, six curb-appeal mistakes that cost real money, and a zone-by-zone anatomy of the facade. Pick a verb. Pick a zone. We'll show you how.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const ExteriorPick = () => (
  <section className="ext-pick">
    <div className="ext-pick-spread">
      <div className="ext-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="ext-pick-text">
        <div className="eyebrow">Featured Project · Exterior, Install</div>
        <h3>How to install a <em>smart lock</em> in 30 minutes.</h3>
        <p>
          The single most-searched exterior upgrade — and one of the cleanest beginner installs. No wiring, no drilling, just two bolts and your existing deadbolt hole. Works with every major smart-home platform and fits most standard door preps. Done before the afternoon is over.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Beginner</span>
          <span><span className="dot"></span>30 min</span>
          <span><span className="dot"></span>$180–350</span>
          <span><span className="dot"></span>7 steps</span>
        </div>
        <a href="/en/exterior/install/how-to-install-a-smart-lock/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

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

const ExteriorIndex = () => {
  const cols = [
    {
      title: "Most-searched this season",
      count: "Five all-time",
      items: [
        ["01", "How to install a smart lock",          "Install · 30 min"],
        ["02", "How to install house numbers",         "Install · 20 min"],
        ["03", "How to paint a front door",            "Decorate · 4 hr"],
        ["04", "How to repair a sagging gutter",       "Repair · 90 min"],
        ["05", "How to install landscape lighting",    "Install · half day"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to caulk a door frame",            "Repair · 45 min"],
        ["02", "How to install an outdoor outlet",     "Install · 2 hr"],
        ["03", "How to build a mailbox post",          "Build · weekend"],
        ["04", "How to pressure-wash siding",          "Clean · half day"],
        ["05", "How to choose exterior paint color",   "Decorate · 1 hr"],
        ["06", "How to hang a wreath without nails",   "Organize · 10 min"],
      ],
    },
  ];
  return (
    <section className="ext-index">
      <div className="ext-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read exterior guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="ext-index-head">
          <h2>What people came here <em>to fix.</em></h2>
          <div className="right">As of <strong>April 2026</strong> · live ranking</div>
        </div>
        <div className="ext-index-grid">
          {cols.map(c => (
            <div className="ext-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="ext-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={extLaneHref(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 ExteriorMistakes = () => {
  const items = [
    { h: "Painting in direct sun",
      p: "Paint flashes when it hits hot surface — dries too fast, traps bubbles, peels within months. Always work shade-side first, or start early morning before the sun rotates around. The front door is the most common casualty." },
    { h: "Caulking siding gaps that are supposed to drain",
      p: "Siding is a drainage system. Vertical seams and weep holes at the bottom of each course are intentional air and water pathways. Caulking them traps moisture behind the siding and accelerates rot. Only caulk horizontal penetrations and window frames." },
    { h: "Getting the gutter pitch wrong",
      p: "Gutters need 1/4 inch of drop per 10 linear feet toward the downspout. Less than that and water pools, freezes, and creates ice dams that back up under shingles. Re-hang the gutter hangers rather than guessing the pitch by eye." },
    { h: "House numbers under 4 inches",
      p: "Not legible from the street — and in many cities, code requires 4–6 inch minimum height in a contrasting color. Your house numbers are for emergency responders as much as for delivery drivers. Go bigger than you think you need." },
    { h: "Undersizing the low-voltage transformer",
      p: "Always spec 1.25× your total landscape lighting wattage to handle voltage drop across long wire runs. A transformer running at full load degrades fast. The math: total watts ÷ 0.8 = minimum transformer rating." },
    { h: "Painting hardware instead of removing it",
      p: "Hinges, door knockers, kick plates, and knob escutcheons painted in place look amateur even on a well-painted door. The paint bridges the gap, locks the hardware, and drips at the edges. Remove everything before you open the can." },
  ];
  return (
    <section className="ext-mistakes">
      <div className="ext-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Exterior Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="ext-mistakes-head">
          <h2>Six exterior mistakes <em>that cost real money.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="ext-mistakes-grid">
          {items.map((m, i) => (
            <div className="ext-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 ExteriorFilters = () => (
  <section className="ext-filters">
    <div className="ext-filters-grid">
      <div className="ext-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="ext-pills">
          <a href="/en/exterior/" className="ext-pill">Beginner <span className="ct">72</span></a>
          <a href="/en/exterior/" className="ext-pill">Intermediate <span className="ct">58</span></a>
          <a href="/en/exterior/" className="ext-pill">Advanced <span className="ct">21</span></a>
        </div>
      </div>
      <div className="ext-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="ext-pills">
          <a href="/en/exterior/" className="ext-pill">Under an hour <span className="ct">38</span></a>
          <a href="/en/exterior/" className="ext-pill">A morning <span className="ct">44</span></a>
          <a href="/en/exterior/" className="ext-pill">A full day <span className="ct">46</span></a>
          <a href="/en/exterior/" className="ext-pill">Multi-day <span className="ct">23</span></a>
        </div>
      </div>
      <div className="ext-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="ext-pills">
          <a href="/en/exterior/" className="ext-pill">$0 — $50 <span className="ct">42</span></a>
          <a href="/en/exterior/" className="ext-pill">$50 — $200 <span className="ct">58</span></a>
          <a href="/en/exterior/" className="ext-pill">$200 — $1k <span className="ct">36</span></a>
          <a href="/en/exterior/" className="ext-pill">$1k+ <span className="ct">15</span></a>
        </div>
      </div>
    </div>
  </section>
);

const ExteriorAnatomy = () => {
  const parts = [
    { n: "01", h: "Front-door", em: "zone.",
      d: "Door, hardware, house numbers, porch light, mailbox. The first five feet that define the whole facade.",
      links: [["Install smart lock", "install"], ["Install house numbers", "install"], ["Paint front door", "decorate"], ["Replace porch light", "install"], ["Install mailbox", "install"]] },
    { n: "02", h: "Siding", em: "& trim zone.",
      d: "Cladding, fascia, soffits, paint. The weatherproof skin of the house — every crack and gap is a water entry point.",
      links: [["Repair rotted fascia", "repair"], ["Caulk siding gaps", "repair"], ["Paint exterior", "decorate"], ["Clean mildew", "clean"], ["Repair soffit", "repair"]] },
    { n: "03", h: "Roof", em: "& gutter zone.",
      d: "Shingles, flashing, gutters, downspouts. The water-management system. Wrong pitch or clogged gutters = ice dams and foundation damage.",
      links: [["Repair sagging gutter", "repair"], ["Clean gutters", "clean"], ["Re-pitch gutters", "repair"], ["Replace gutter section", "repair"], ["Install gutter guards", "install"]] },
    { n: "04", h: "Lighting", em: "& outlets zone.",
      d: "Landscape lighting, outdoor outlets, low-voltage wire runs, porch and garage lights. The after-dark half of curb appeal.",
      links: [["Install landscape lighting", "install"], ["Install outdoor outlet", "install"], ["Replace porch light", "install"], ["Wire low-voltage run", "install"], ["Organize wiring", "organize"]] },
  ];
  return (
    <section className="ext-anatomy">
      <div className="ext-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Exterior, By the Zone</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="ext-anatomy-head">
          <h2>Four zones of an exterior, <em>and the guides that fix them.</em></h2>
          <p className="deck">If you came here with a problem in a specific part of the facade — start with the zone. We'll route you to the verb from there.</p>
        </div>
        <div className="ext-anatomy-grid">
          {parts.map(p => (
            <div className="ext-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/exterior/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const ExteriorFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "What's the highest-impact exterior project for under $200?",
      a: "Paint the front door and replace the house numbers. A gallon of exterior trim paint runs $45–65; high-quality brushed-brass or matte-black house numbers run $40–80. Done in a Saturday. The visual difference is disproportionate to the cost because the eye goes to the front door first. Pick a saturated color — deep navy, hunter green, burgundy, slate black — not another shade of the existing exterior paint." },
    { q: "Can I install landscape lighting myself, or do I need an electrician?",
      a: "Low-voltage landscape lighting (12V systems) is DIY-safe and doesn't require a permit in most jurisdictions. You need a transformer plugged into a GFCI outdoor outlet, the low-voltage cable, and the fixtures. The most common mistake is undersizing the transformer — spec 1.25× your total wattage to handle voltage drop. Line-voltage (120V) landscape lighting is a different category — permit and licensed electrician required." },
    { q: "How do I know if my gutters need to be re-pitched or just cleaned?",
      a: "During the next heavy rain, go outside and watch the gutters. If water is spilling over the side of the gutter (not over the front edge), the issue is a blockage — clean it. If water is pooling and standing in the gutter even after it's clean, the pitch is wrong. Gutters need 1/4 inch of drop per 10 feet toward the downspout. Re-hanging gutter hangers to correct the slope is a half-day job with a ladder and a level." },
    { q: "What's the right prep for painting a front door?",
      a: "Remove the door from its hinges and lay it flat on sawhorses — this prevents drips and lets you paint both sides in one session. Remove all hardware (hinges, knob, knocker, mail slot). Sand with 120-grit, clean with a tack cloth, prime bare wood. Use exterior alkyd or high-quality latex specifically rated for doors and trim — these handle expansion and contraction across temperature swings that standard latex can't handle. Two thin coats, 24-hour cure minimum before reinstalling hardware." },
    { q: "How do I choose the right smart lock for my front door?",
      a: "First, measure your existing deadbolt backset (distance from edge of door to center of hole) — most are 2-3/8 inch or 2-3/4 inch. Buy a lock that matches, or one with a backset adjustment. Then pick the entry method: keypad, fingerprint, or both. Z-Wave and Zigbee locks integrate with whole-home systems; Wi-Fi and Bluetooth locks pair directly to a phone. For most homeowners, a keypad deadbolt replacement with Bluetooth access is sufficient and installs in 30 minutes without new wiring." },
    { q: "Should I hire someone for full siding replacement or exterior paint?",
      a: "Full siding replacement — yes, hire it out. Removing and disposing of old siding (potentially lead paint or asbestos on pre-1978 homes), flashing windows properly, and ending the job at every trim and soffit joint requires a professional for anything but a very small test wall. Exterior paint on a one-story home is within DIY reach with an airless sprayer (rented $80/day) and a full day of prep. Two-story or anything involving a tall ladder is worth pricing with a crew — the liability math changes." },
  ];
  return (
    <section className="ext-faq">
      <div className="section-folio">
        <span>Reader Questions · Exterior, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="ext-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they exterior.</em></h2>
      </div>
      <div className="ext-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`ext-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="ext-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="ext-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const EXT_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: "Deck & Patio", slug: "deck-patio",   ct: "128 guides", img: "https://images.unsplash.com/photo-1600210492493-0946911123ea?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" },
];

const ExteriorSisters = () => (
  <section className="ext-sisters">
    <div className="ext-sisters-wrap">
      <div className="ext-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="ext-sisters-grid">
        {EXT_SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="ext-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 ExteriorColophon = () => (
  <section className="ext-colophon">
    <h2>Found what you're <em>fixing?</em></h2>
    <p>Every exterior guide on HowTo is written by someone who did the project on their own house. Pick a verb and start exploring.</p>
    <a href="#ext-menu" className="go">Browse exterior projects  →</a>
  </section>
);

window.ExteriorHero      = ExteriorHero;
window.ExteriorMenu      = ExteriorMenu;
window.ExteriorEssay     = ExteriorEssay;
window.ExteriorPick      = ExteriorPick;
window.ExteriorIndex     = ExteriorIndex;
window.ExteriorMistakes  = ExteriorMistakes;
window.ExteriorFilters   = ExteriorFilters;
window.ExteriorAnatomy   = ExteriorAnatomy;
window.ExteriorFaq       = ExteriorFaq;
window.ExteriorSisters   = ExteriorSisters;
window.ExteriorColophon  = ExteriorColophon;