/* /en/basement — Production Basement Room Hub */

const BasementHero = () => (
  <section className="bsm-hero">
    <div className="img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=2400&q=85')" }} />
    <div className="bsm-mast">
      <span className="crumb">
        <a href="/">Home</a>  ·  Basement
      </span>
      <span className="ctr">HowTo Quarterly · Vol. V / The Basement Issue</span>
      <span className="right">№ 05 / Spring 2026</span>
    </div>
    <div className="bsm-cover">
      <div>
        <div className="eyebrow">Room Guide · Basement</div>
        <h1>The room with the most <em>potential.</em></h1>
      </div>
      <div>
        <p className="deck">
          Per square foot, no room in the house can become more than the basement — or stay less than it longer. 109 guides, zero excuses.
        </p>
        <div className="meta">
          <div><span className="k">Section</span><span className="v">Basement</span></div>
          <div><span className="k">Guides</span><span className="v">109 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 BSM_ACTIONS = [
  {
    n: "01", slug: "repair",
    name: "Repair",   em: "what's leaking.",
    lede: "The crack in the block wall, the sump that stopped running, the water stain you've been stepping around. Diagnose first, fix second.",
    bg: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1400&q=80",
    examples: "Sump pump failure · Foundation crack · Wet wall · Efflorescence · Floor drain backup · Water heater leak",
    count: 24,
  },
  {
    n: "02", slug: "install",
    name: "Install",  em: "what keeps it dry.",
    lede: "Sump pumps, dehumidifiers, egress windows, vapor barriers, subfloor panels — the installs that come before everything else.",
    bg: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1400&q=80",
    examples: "Sump pump · Dehumidifier · Egress window · Subfloor panels · Vapor barrier · Exhaust fan · Recessed lights",
    count: 22,
  },
  {
    n: "03", slug: "build",
    name: "Build",    em: "from concrete up.",
    lede: "Frame a wall from bare slab, build the closet, construct the workbench, finish the room nobody else has touched in twenty years.",
    bg: "https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1400&q=80",
    examples: "Frame a wall · Drop ceiling · Utility shelving · Workbench · Closet build · Bar top · Stair rail",
    count: 25,
  },
  {
    n: "04", slug: "clean",
    name: "Clean",    em: "what concrete holds.",
    lede: "Efflorescence, mold spots, musty smell, the floor drain that's been slow since you bought the house. Below-grade cleaning is moisture management.",
    bg: "https://images.unsplash.com/photo-1527515545081-5db817172677?w=1400&q=80",
    examples: "Efflorescence · Mold on block · Musty odor · Floor drain · Utility sink · Dehumidifier coils · Sump pit",
    count: 12,
  },
  {
    n: "05", slug: "organize",
    name: "Organize", em: "what's off the floor.",
    lede: "Seasonal storage systems, utility room order, the deep freeze corner that ate one wall. Get everything up off the slab.",
    bg: "https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=1400&q=80",
    examples: "Seasonal storage · Utility shelves · Bin labeling · Chest freezer zone · Holiday storage · Tool wall · Sports gear",
    count: 18,
  },
  {
    n: "06", slug: "decorate",
    name: "Decorate", em: "so it gets used.",
    lede: "Paint the concrete, install the paneling, hang the art, pick the bulb temperature that doesn't make it feel like a holding cell.",
    bg: "https://images.unsplash.com/photo-1560440021-33f9b867899d?w=1400&q=80",
    examples: "Concrete floor paint · Shiplap accent · Bar wall · Lighting temp · Area rug zone · Window treatment · Art hang",
    count: 8,
  },
];

const BasementMenu = () => (
  <section className="bsm-menu">
    <div className="bsm-menu-wrap">
      <div className="section-folio">
        <span>The Menu · Basement, by Action</span>
        <span className="pg">PG. 02</span>
      </div>
      <div className="bsm-menu-head">
        <h2>Six things to do <em>in a basement.</em></h2>
        <p className="deck">
          Every project on this site lives at the intersection of a room and a verb. You're in the basement — pick a verb.
        </p>
      </div>
      <div className="bsm-actions">
        {BSM_ACTIONS.map(a => (
          <a key={a.name} href={`/en/basement/${a.slug}/`} className="bsm-act">
            <div className="bsm-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 BasementEssay = () => (
  <section className="bsm-essay">
    <div className="bsm-essay-wrap">
      <div className="section-folio" style={{ borderColor: "rgba(124,126,122,0.35)" }}>
        <span>Editor's Note · The Basement, Annotated</span>
        <span className="pg">PG. 06</span>
      </div>
      <div className="bsm-essay-grid">
        <aside className="bsm-essay-side">
          <h2>The room that <em>does the least.</em></h2>
          <div className="by">By the Editors · 5 min read</div>
          <div className="stat-list">
            <div className="row"><span>Avg. sq ft unused</span><strong>580</strong></div>
            <div className="row"><span>Most-googled verb</span><strong>"fix"</strong></div>
            <div className="row"><span>ROI on finishing</span><strong>70%+</strong></div>
            <div className="row"><span>Search volume / mo</span><strong>890K</strong></div>
          </div>
        </aside>
        <div className="bsm-essay-body">
          <p className="dropcap">
            The basement is the room every homeowner intends to deal with. It sits at the bottom of the house, holding the mechanical plant that keeps the rest of the floors alive, holding the boxes from the last move and the one before that, holding the project potential that gets mentioned every spring and then doesn't happen because summer arrives and suddenly you'd rather be outside. Meanwhile, the basement holds.
          </p>
          <p>
            Which is why we organized this page differently from the kitchen or the bathroom. Those rooms have projects you do because you use them. The basement has projects you do because you've been avoiding them — or because something finally broke — or because you're ready, finally, to turn that square footage into something you actually live in. The verb you came in with matters more here than anywhere else on the site.
          </p>
          <div className="pull">
            "The basement rewards the person who actually looks at it. The problem is that most people stop looking."
          </div>
          <p>
            So we built the menu around the six verbs and the four zones. <a href="/en/basement/repair/">Repair</a> what's leaking. <a href="/en/basement/install/">Install</a> what keeps it dry. <a href="/en/basement/build/">Build</a> from concrete up. <a href="/en/basement/clean/">Clean</a> what concrete holds. <a href="/en/basement/organize/">Organize</a> what's off the floor. <a href="/en/basement/decorate/">Decorate</a> so it gets used. Six lanes, 109 guides, one rule: solve moisture before you build anything. Every guide respects that sequence.
          </p>
          <p>
            Below: the seasonal pick, the five most-searched projects, the six mistakes that cost the most to fix, the zone anatomy that tells you what order to work in, and the tool list that makes concrete work possible without a contractor. Pick a lane. Start below grade.
          </p>
        </div>
      </div>
    </div>
  </section>
);

const BasementPick = () => (
  <section className="bsm-pick">
    <div className="bsm-pick-spread">
      <div className="bsm-pick-img" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1800&q=85')" }}>
        <div className="stamp">Editor's<br/>Pick<small>SPRING 2026</small></div>
      </div>
      <div className="bsm-pick-text">
        <div className="eyebrow">Featured Project · Basement, Install</div>
        <h3>How to install a <em>sump pump</em> the right way.</h3>
        <p>
          The single most important thing you can do for a below-grade space — before you frame a wall, before you lay a floor, before you call it finished. Primary pump, battery backup, discharge line that exits uphill and away. Do it once, do it right.
        </p>
        <div className="meta">
          <span><span className="dot"></span>Intermediate</span>
          <span><span className="dot"></span>4 hours</span>
          <span><span className="dot"></span>$180–500</span>
          <span><span className="dot"></span>11 steps</span>
        </div>
        <a href="/en/basement/install/how-to-install-a-sump-pump/" className="read">Read the guide  →</a>
      </div>
    </div>
  </section>
);

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

const BasementIndex = () => {
  const cols = [
    {
      title: "Most-read this month",
      count: "One per lane",
      items: [
        ["01", "How to fix a failed sump pump",          "Repair · 2 hrs"],
        ["02", "How to install a sump pump",             "Install · 4 hrs"],
        ["03", "How to frame a basement wall",           "Build · 1 day"],
        ["04", "How to remove efflorescence",            "Clean · 1 hr"],
        ["05", "How to organize seasonal storage",       "Organize · 3 hrs"],
        ["06", "How to paint a concrete floor",          "Decorate · 2 days"],
      ],
    },
    {
      title: "Most-saved by readers",
      count: "One per lane",
      items: [
        ["01", "How to seal a foundation crack",         "Repair · 3 hrs"],
        ["02", "How to set up a dehumidifier",           "Install · 30 min"],
        ["03", "How to build utility shelving",          "Build · weekend"],
        ["04", "How to eliminate basement odor",         "Clean · 2 hrs"],
        ["05", "How to set up a deep freeze zone",       "Organize · 2 hrs"],
        ["06", "How to install shiplap accent wall",     "Decorate · weekend"],
      ],
    },
  ];
  return (
    <section className="bsm-index">
      <div className="bsm-index-wrap">
        <div className="section-folio">
          <span>The Index · Most-read basement guides</span>
          <span className="pg">PG. 14</span>
        </div>
        <div className="bsm-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="bsm-index-grid">
          {cols.map(c => (
            <div className="bsm-index-col" key={c.title}>
              <h3>{c.title} <span className="ct">— {c.count}</span></h3>
              <ul className="bsm-index-list">
                {c.items.map(([n, t, m]) => (
                  <li key={n}><a href={bsmLaneHref(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 BasementMistakes = () => {
  const items = [
    { h: "Framing walls flush to concrete",
      p: "Concrete walls sweat. Leave a minimum half-inch air gap between the concrete wall face and the back of your framing — or use a pressure-treated bottom plate with studs held back from the wall. No gap equals moisture trapped against wood equals mold inside the wall cavity." },
    { h: "Running drywall to the floor",
      p: "Stop the drywall half an inch off the finished floor. Even with a subfloor and vapor barrier, drywall sitting on a basement floor will eventually wick moisture, soften, and become mold substrate. Cover the gap with baseboard. Use moisture-resistant board throughout." },
    { h: "Ignoring radon before finishing",
      p: "Test before you close anything in. A short-term kit costs $20. If the result is above 4 pCi/L, mitigation runs $800–2,000 and it works. Finishing over a radon problem seals it into the occupied space. Test first. Every time, without exception." },
    { h: "Carpet over slab without a subfloor",
      p: "Concrete slabs run cold and breathe moisture. Carpet directly on slab creates a cold, damp floor covering that becomes a mold habitat. Use a dimple-mat subfloor panel (DRIcore or equivalent) to create a capillary break. Add rigid foam above the mat for actual warmth." },
    { h: "Finishing without adding a sump first",
      p: "'It's always been dry down here.' A dry basement is one where the water hasn't found a path yet. Install the sump while the floor is open — a few hundred dollars now, versus jackhammering finished concrete later. Rough it in even if you never expect to need it." },
    { h: "Recessed lights without IC-AT rated cans",
      p: "Any recessed can that will be in contact with or covered by insulation must be IC-AT rated: Insulation Contact, Air-Tight. Standard cans overheat against insulation. IC-AT cans are required by code in an insulated basement ceiling. Not optional, not a sometimes rule." },
  ];
  return (
    <section className="bsm-mistakes">
      <div className="bsm-mistakes-wrap">
        <div className="section-folio" style={{ marginBottom: 0 }}>
          <span>Field Notes · Basement Mistakes We've Seen</span>
          <span className="pg">PG. 22</span>
        </div>
        <div className="bsm-mistakes-head">
          <h2>Six basement mistakes <em>worth avoiding.</em></h2>
          <div className="num">№ 01 — 06</div>
        </div>
        <div className="bsm-mistakes-grid">
          {items.map((m, i) => (
            <div className="bsm-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 BasementFilters = () => (
  <section className="bsm-filters">
    <div className="bsm-filters-grid">
      <div className="bsm-filter">
        <span className="label">Sort · By Skill</span>
        <h3>What have you done before?</h3>
        <div className="bsm-pills">
          <a href="/en/basement/" className="bsm-pill">Beginner <span className="ct">38</span></a>
          <a href="/en/basement/" className="bsm-pill">Intermediate <span className="ct">51</span></a>
          <a href="/en/basement/" className="bsm-pill">Advanced <span className="ct">20</span></a>
        </div>
      </div>
      <div className="bsm-filter">
        <span className="label">Sort · By Time</span>
        <h3>How much weekend do you have?</h3>
        <div className="bsm-pills">
          <a href="/en/basement/" className="bsm-pill">Under an hour <span className="ct">18</span></a>
          <a href="/en/basement/" className="bsm-pill">A morning <span className="ct">22</span></a>
          <a href="/en/basement/" className="bsm-pill">A weekend <span className="ct">46</span></a>
          <a href="/en/basement/" className="bsm-pill">Multi-day <span className="ct">23</span></a>
        </div>
      </div>
      <div className="bsm-filter">
        <span className="label">Sort · By Budget</span>
        <h3>Spending what, exactly?</h3>
        <div className="bsm-pills">
          <a href="/en/basement/" className="bsm-pill">$0 — $50 <span className="ct">24</span></a>
          <a href="/en/basement/" className="bsm-pill">$50 — $300 <span className="ct">38</span></a>
          <a href="/en/basement/" className="bsm-pill">$300 — $2k <span className="ct">31</span></a>
          <a href="/en/basement/" className="bsm-pill">$2k+ <span className="ct">16</span></a>
        </div>
      </div>
    </div>
  </section>
);

const BasementAnatomy = () => {
  const parts = [
    { n: "01", h: "Sump pit", em: "& pump.",
      d: "The mechanical heart of below-grade moisture management. Primary pump, backup pump, discharge line.",
      links: [["Install sump", "install"], ["Sump repair", "repair"], ["Battery backup", "install"], ["Test the pump", "repair"], ["Pit cleaning", "clean"]] },
    { n: "02", h: "Foundation", em: "& walls.",
      d: "Block or poured concrete. Cracks, efflorescence, seepage — everything starts at the wall.",
      links: [["Seal a crack", "repair"], ["Clean efflorescence", "clean"], ["Waterproof coating", "install"], ["Frame over wall", "build"], ["Air gap framing", "build"]] },
    { n: "03", h: "Slab floor", em: "& moisture.",
      d: "The concrete floor breathes. Test it, seal it, or build over it — but never ignore it.",
      links: [["Moisture test", "repair"], ["Paint concrete", "decorate"], ["Install subfloor", "install"], ["Vapor barrier", "install"], ["Epoxy coat", "decorate"]] },
    { n: "04", h: "Mechanical", em: "zone.",
      d: "Furnace, water heater, electrical panel. Access, clearance, combustion air.",
      links: [["Water heater repair", "repair"], ["Panel clearance", "repair"], ["Combustion air", "install"], ["Duct seal", "repair"], ["Annual tune-up", "clean"]] },
    { n: "05", h: "Framing", em: "& drywall.",
      d: "The skeleton of the finished basement. Sequence, air gap, moisture-resistant board.",
      links: [["Frame a wall", "build"], ["Install drywall", "build"], ["Moisture board", "install"], ["Corner bead", "build"], ["Patch drywall", "repair"]] },
    { n: "06", h: "Ceiling", em: "& lighting.",
      d: "Drop tile or drywall lid. IC-AT cans. Clearance for ductwork. Lighting temperature.",
      links: [["Drop ceiling", "build"], ["Recessed lights", "install"], ["IC-AT cans", "install"], ["Ceiling drywall", "build"], ["Lighting temp", "decorate"]] },
    { n: "07", h: "Egress", em: "& windows.",
      d: "Code-required escape routes. Window wells, drain gravel, correct opening dimensions.",
      links: [["Egress window", "install"], ["Window well", "install"], ["Well drain", "repair"], ["Stair handrail", "build"], ["Bilco door", "install"]] },
    { n: "08", h: "Storage", em: "& utility.",
      d: "Off-the-floor shelving systems, seasonal bin zones, deep-freeze placement.",
      links: [["Utility shelving", "build"], ["Seasonal bins", "organize"], ["Freeze zone", "organize"], ["Tool wall", "organize"], ["Label system", "organize"]] },
  ];
  return (
    <section className="bsm-anatomy">
      <div className="bsm-anatomy-wrap">
        <div className="section-folio">
          <span>The Diagram · Basement, By the Part</span>
          <span className="pg">PG. 28</span>
        </div>
        <div className="bsm-anatomy-head">
          <h2>Eight parts of a basement, <em>and the guides that fix them.</em></h2>
          <p className="deck">Came here with a problem in a specific part of the basement? Start with the part. We'll route you to the verb from there.</p>
        </div>
        <div className="bsm-anatomy-grid">
          {parts.map(p => (
            <div className="bsm-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/basement/${lane}/`}>{label}</a>
                    {i < p.links.length - 1 && <span>·</span>}
                  </React.Fragment>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const BasementFaq = () => {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "Do I need a permit to finish my basement?",
      a: "In most jurisdictions, yes — as soon as you're adding habitable square footage, framing walls, or doing any electrical or plumbing work. The specific triggers vary by municipality, but framing plus drywall plus electrical is permit work everywhere. Apply before you start. Inspectors are looking for correct egress, fire blocking in the framing, and proper electrical — all of which protect you, not just satisfy bureaucracy. A finished basement without permits also creates title and insurance problems when you sell." },
    { q: "How do I know if my basement has a moisture problem?",
      a: "Three tests: (1) The plastic sheet test — tape a 12-inch square of plastic sheeting to the slab with all edges sealed, leave for 24 hours, check for condensation under the plastic (moisture coming up through the slab) versus on top of the plastic (condensation from humid air). (2) A moisture meter reading on the concrete surface above 80% RH is a red flag for adhesive-down flooring. (3) Efflorescence — white mineral deposits on the block or concrete wall — is a reliable indicator of water migration through the wall. If you see any of these, solve the source before any finish work." },
    { q: "What's the minimum ceiling height for a finished basement?",
      a: "IRC requires 7 feet minimum in habitable rooms, 6 feet 8 inches minimum in corridors and bathrooms. Ductwork and beams can drop below the finished ceiling if they're within a structural pathway, but the walkable space under them must meet minimums. Many older basements have 7 to 7.5 feet from slab to joists — after a drop ceiling or drywall lid (which typically takes 3 to 5 inches), you may be at exactly code minimum or below. Measure accurately before committing to a ceiling type." },
    { q: "Is spray foam or batt insulation better for basement walls?",
      a: "Closed-cell spray foam is the best-performing option for basement walls: it creates a vapor barrier, an air barrier, and insulation in one layer and adheres directly to the concrete without requiring a separate framing step. It's also the most expensive. The budget-appropriate alternative is rigid foam board (XPS or polyiso) cut to fit between studs, which also provides a good vapor retarder. Fiberglass batt in a basement wall is the worst choice — it holds moisture when the vapor drive through the concrete condenses, and becomes a mold substrate. Don't use unfaced batt against concrete walls." },
    { q: "Can I add a bathroom in the basement?",
      a: "Yes, but it requires a rough-in — a floor drain and the correct rough-in distances for the toilet and lavatory already in the slab. Older homes sometimes have a rough-in already; newer homes often do not. If your slab doesn't have a rough-in, you have two options: (1) jackhammer the slab and run new drain lines, which is significant but doable, or (2) install an above-floor macerating system (Saniflo or similar), which pumps waste up and out without floor work. Macerating systems are more expensive to maintain but far cheaper to install than opening the slab." },
    { q: "What flooring works best in a basement?",
      a: "Luxury vinyl plank (LVP) over a subfloor panel is the best combination of performance, cost, and warmth. LVP is 100% waterproof, dimensionally stable in humidity swings, and comfortable underfoot. The subfloor panel (DRIcore or similar) provides the capillary break from the slab and a small thermal benefit. Carpet over subfloor is the warmest and the most comfortable, but requires the subfloor to be absolutely dry and well-sealed. Tile directly on slab is fine for utility areas but cold and unforgiving in a living space. Engineered hardwood over a dimple mat can work in dry, climate-controlled basements — solid hardwood, never." },
  ];
  return (
    <section className="bsm-faq">
      <div className="section-folio">
        <span>Reader Questions · Basement, Answered</span>
        <span className="pg">PG. 36</span>
      </div>
      <div className="bsm-faq-head">
        <span className="label">FAQ · The Most-Asked</span>
        <h2>What people ask <em>before they basement.</em></h2>
      </div>
      <div className="bsm-faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={`bsm-faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="bsm-faq-q">
              <span>{f.q}</span>
              <span className="toggle">+</span>
            </div>
            <div className="bsm-faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const BSM_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: "Garage",      slug: "garage",      ct: "133 guides", img: "https://images.unsplash.com/photo-1486718448742-163732cd1544?w=1200&q=80" },
  { name: "Exterior",    slug: "exterior",    ct: "189 guides", img: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?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 BasementSisters = () => (
  <section className="bsm-sisters">
    <div className="bsm-sisters-wrap">
      <div className="bsm-sisters-head">
        <h2>Other rooms <em>worth a Saturday.</em></h2>
        <a href="/en/" className="view-all">All rooms  →</a>
      </div>
      <div className="bsm-sisters-grid">
        {BSM_SISTERS.map(s => (
          <a key={s.name} href={`/en/${s.slug}/`} className="bsm-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 BasementColophon = () => (
  <section className="bsm-colophon">
    <h2>Found what you're <em>fixing?</em></h2>
    <p>Every basement guide on HowTo is written by someone who has worked below grade, in the dark, with a flashlight and a moisture meter. Pick a verb.</p>
    <a href="#bsm-menu" className="go">Browse basement projects  →</a>
  </section>
);

window.BasementHero      = BasementHero;
window.BasementMenu      = BasementMenu;
window.BasementEssay     = BasementEssay;
window.BasementPick      = BasementPick;
window.BasementIndex     = BasementIndex;
window.BasementMistakes  = BasementMistakes;
window.BasementFilters   = BasementFilters;
window.BasementAnatomy   = BasementAnatomy;
window.BasementFaq       = BasementFaq;
window.BasementSisters   = BasementSisters;
window.BasementColophon  = BasementColophon;