/* Roofing — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "Replace a single damaged shingle",
    why: "The baseline DIY roof project. One-story, walkable pitch, 20 minutes per shingle.",
    img: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1400&q=80",
    time: "20 min",
    cost: "~$15",
    slot: "feature",
  },
  {
    rank: 2,
    title: "Clean gutters, no climbing",
    why: "Not roofing, but roof-adjacent. Ground ladder, gutter scoop, 30 minutes per 100 feet.",
    img: "https://images.unsplash.com/photo-1577707845481-849b314c6dbe?w=1000&q=80",
    time: "30 min",
    cost: "Free",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "Spot roof damage after a storm",
    why: "Walk the perimeter. Document. Hire an adjuster if it's serious. 30 minutes from ground.",
    img: "https://images.unsplash.com/photo-1518604666860-9ed391f0a1c2?w=1000&q=80",
    time: "30 min",
    cost: "Free",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "Fix a loose flashing",
    why: "One-story only. Pry, nail, cement. 15 minutes. Any water inside—call a pro.",
    img: "https://images.unsplash.com/photo-1517620285848-61178a7f3735?w=1200&q=80",
    time: "15 min",
    cost: "~$8",
    slot: "wide",
  },
  {
    rank: 5,
    title: "Add a roof vent",
    why: "Cut, seal, flange, nail, cement. One story, walkable pitch. 45 minutes to an hour.",
    img: "https://images.unsplash.com/photo-1513399579883-d52646ba8900?w=1000&q=80",
    time: "45 min",
    cost: "~$25",
    slot: "right2",
  },
];

const HOWTOS = [
  // DIY-able
  { cat: "diy", title: "How to replace a single damaged shingle",        desc: "Pry, slide, nail, cement. Daylight, one story, walkable pitch.",      time: "20 min",  unit: "Per shingle",    level: 2, tags: ["Single story", "DIY"] },
  { cat: "diy", title: "How to clean gutters safely",                    desc: "Ladder, gutter scoop, honest height assessment.",                  time: "30 min",  unit: "Per 100 ft",    level: 2, tags: ["Ladder work"] },
  { cat: "diy", title: "How to spot roof damage after a storm",          desc: "Walk the perimeter, document, hire an adjuster if needed.",        time: "30 min",  unit: "Walk",          level: 2, tags: ["Storm prep"] },

  // Advanced DIY / borderline
  { cat: "borderline", title: "How to fix a loose flashing (maybe)",     desc: "One-story only. Pry, nail, cement. Watch for leaks.",              time: "15 min",  unit: "Per flashing",  level: 3, tags: ["Single story"] },
  { cat: "borderline", title: "How to add a roof vent",                  desc: "Cut, seal, flange, nail, cement. One story, walkable pitch.",    time: "45 min",  unit: "Per vent",      level: 3, tags: ["Single story"] },

  // Pro jobs
  { cat: "pro", title: "How to inspect your roof from the ground",       desc: "Spot aging, damage, and warning signs without climbing.",          time: "15 min",  unit: "Assessment",    level: 1, tags: ["Inspection"] },
  { cat: "pro", title: "How to clean moss off shingles",                 desc: "When moss matters and when it doesn't. Soft-wash technique.",      time: "1 hour",  unit: "Per 500 sf",    level: 3, tags: ["Maintenance"] },
  { cat: "pro", title: "How to seal a roof vent",                        desc: "The leak source. Proper flashing, cement, and the right pitch.",  time: "30 min",  unit: "Per vent",      level: 4, tags: ["Flashing"] },
  { cat: "pro", title: "How to prevent ice dams",                        desc: "Ventilation, insulation, and why heat is the culprit.",           time: "Planning", unit: "Whole roof", level: 4, tags: ["Winter prep"] },
  { cat: "pro", title: "How to tarp a roof after storm damage",          desc: "Emergency temporary cover. Not a real fix, but buys time.",        time: "2 hours",  unit: "Per section",   level: 3, tags: ["Storm"] },
  { cat: "pro", title: "How to find a roof leak source",                 desc: "Water doesn't leak where it looks like it. The real detective work.", time: "1 hour", unit: "Diagnostic",  level: 4, tags: ["Troubleshoot"] },
  { cat: "pro", title: "How to extend the life of an aging roof",        desc: "Re-coating, spot repair strategy, and when to call for re-roof.",  time: "Varies",  unit: "Assessment",    level: 2, tags: ["Maintenance"] },
];

const CATS = [
  { id: "all",       label: "All guides" },
  { id: "diy",       label: "DIY-able" },
  { id: "borderline", label: "Borderline" },
  { id: "pro",       label: "Pro scope" },
];

const MISTAKES = [
  {
    title: "Walking a wet roof",
    body: "Asphalt shingles have zero traction when wet. A slip on a one-story is a broken leg. A slip on a two-story is worse. You'll lose your footing.",
    fix: "Roof work only in daylight, on clear dry days. Wait 24 hours after rain. Period.",
  },
  {
    title: "Missing the underlayment when patching",
    body: "Shingles are the first layer. Under them is roofing felt or synthetic underlayment. Remove a shingle and find torn underlayment? You have a leak path into the deck.",
    fix: "Roofing cement under the shingle edges, or underlayment repair. If the deck is wet, rotted, or soft—stop and call a pro.",
  },
  {
    title: "Using interior caulk or paint on flashing",
    body: "Interior paintable caulk dries, shrinks, and fails in UV. Flashing seals need asphalt-based roofing cement or marine-grade silicone rated for outdoor metal.",
    fix: "Use the right product. Roofing cement on asphalt roofs, or don't use one at all. Interior caulk is why many flashing failures still leak.",
  },
  {
    title: "Ignoring the soffit when ventilation fails",
    body: "A roof needs to breathe. Soffit vents let air in below; ridge vents let air out top. If soffits are painted shut or blocked, attic moisture builds and sheathing rots.",
    fix: "Open the airflow. If you're replacing shingles and the attic is damp or sheathing feels soft, that's not your DIY fix—that's a roofer's diagnostic.",
  },
  {
    title: "Chasing a leak at the wrong end of the slope",
    body: "Water travels downslope and sideways under layers. A stain on a ceiling might be water entering 15 feet up the roof. Patching the spot won't fix the real leak.",
    fix: "If there's active water in the house, hire a licensed roofer. They have the diagnostic techniques. DIY guessing leaves the real leak alone.",
  },
];

const TOOLS = [
  { name: "Roofing pry bar, 12–15″",           desc: "Lifts shingles cleanly. A claw hammer tears the shingle to pieces.",         price: "$12–18" },
  { name: "Galvanized roofing nails, 1¼″",     desc: "Not drywall screws, not regular nails. Large head seats under shingle.",      price: "$6" },
  { name: "Roofing cement (asphalt-based)",    desc: "Seals nail holes and shingle edges. 10 oz cartridge lasts years.",           price: "$4" },
  { name: "Extension ladder, 250+ lbs rated",  desc: "Reach gutters at chest height or roof 3 ft above gutter. Non-negotiable.",   price: "$120–180" },
  { name: "Roof rake (snow load, not leaves)",  desc: "Ice dams and heavy snow from the ground. 15–18 ft reach.",                  price: "$30–50" },
];

/* ---------- Components ---------- */

const Top5Card = ({ item }) => (
  <a className={`top5-card ${item.slot}`} href="#">
    <div className="img" style={{ backgroundImage: `url(${item.img})` }} />
    <span className="rank">{item.rank}</span>
    <div className="meta">
      <h3>{item.title}</h3>
      <p className="why">{item.why}</p>
      <div className="row">
        <span>{item.time}</span>
        <span>{item.cost}</span>
      </div>
    </div>
  </a>
);

const MenuRow = ({ guide, idx }) => (
  <a className="menu-row" href="#">
    <span className="num">№ {String(idx + 1).padStart(2, "0")}</span>
    <div className="title">
      <h4>{guide.title}</h4>
      <p className="desc">{guide.desc}</p>
    </div>
    <div className="tags">
      {guide.tags.map(t => <span key={t} className="tag">{t}</span>)}
    </div>
    <div className="duration">
      {guide.time}
      <span className="l">{guide.unit}</span>
    </div>
    <div className="level" data-level={guide.level >= 4 ? "hard" : "ok"}>
      {[1,2,3,4,5].map(i => (
        <span key={i} className={`pip ${i <= guide.level ? "on" : ""}`}></span>
      ))}
    </div>
    <div className="arrow">&rarr;</div>
  </a>
);

const Roofing = ({ category = "all", showMistakes = true, showTools = true }) => {
  const filtered = category === "all" ? HOWTOS : HOWTOS.filter(g => g.cat === category);
  return (
    <div className="roof-page">
      {/* HERO */}
      <section className="roof-hero">
        <div className="wrap-wide">
          <div className="crumbs">
            <a href="/">Home</a>
            <span className="sep">/</span>
            <a href="/en/trades/">Trades</a>
            <span className="sep">/</span>
            <span className="here">Roofing</span>
          </div>

          <div className="roof-hero-grid">
            <h1>Mostly <em>a pro call.</em></h1>
            <div className="right-col">
              <p className="lede">
                Patching a single shingle on a one-story is a Saturday. Anything else, you're hiring height insurance. Here's where the line is.
              </p>
            </div>
          </div>

          <div className="roof-stats">
            <div className="stat">
              <span className="n">{HOWTOS.length}</span>
              <span className="l">Guides in this trade</span>
            </div>
            <div className="stat">
              <span className="n"><em>1</em></span>
              <span className="l">DIY project type</span>
            </div>
            <div className="stat">
              <span className="n"><em>4<span style={{opacity:0.4}}>/5</span></em></span>
              <span className="l">DIY-ability</span>
            </div>
            <div className="stat">
              <span className="n"><em>$$$</em></span>
              <span className="l"><span className="dot">&bull;</span> Pro cost</span>
            </div>
          </div>
        </div>
      </section>

      {/* TOP 5 */}
      <section className="roof-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">The Five</span>
              <h2>Five projects, <em>from DIY to pro.</em></h2>
            </div>
            <div className="right">
              <p>Roofing has a sharp line: one-story, walkable pitch, isolated damage—DIY possible. Steeper, higher, systemic—pro's scope. Here's the threshold.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="roof-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every roofing guide, <em>in one list.</em></h2>
            <span className="count">{filtered.length} of {HOWTOS.length} shown</span>
          </div>
          <div className="menu-tabs" role="tablist">
            {CATS.map(c => {
              const n = c.id === "all" ? HOWTOS.length : HOWTOS.filter(g => g.cat === c.id).length;
              return (
                <button key={c.id}
                  className={`menu-tab ${category === c.id ? "on" : ""}`}
                  onClick={() => window.__setRoofingCategory && window.__setRoofingCategory(c.id)}>
                  {c.label}<span className="num">{String(n).padStart(2,"0")}</span>
                </button>
              );
            })}
          </div>
          <div className="menu-list">
            {filtered.map((g, i) => <MenuRow key={g.title} guide={g} idx={i} />)}
          </div>
        </div>
      </section>

      {/* WHAT NOT TO DO */}
      {showMistakes && (
      <section className="roof-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Five mistakes <em>that cost more.</em></h2>
            <p>Most roof mistakes are about knowing your limit. The second most common is not waiting for the right conditions.</p>
          </div>
          <div className="mistakes-grid">
            {MISTAKES.map((m, i) => (
              <div className="mistake" key={m.title}>
                <div className="stamp">
                  <span className="x">&times;</span>
                  <span className="n">№ {String(i + 1).padStart(2,"0")}</span>
                </div>
                <div>
                  <h4>{m.title}</h4>
                  <p>{m.body}</p>
                  <div className="fix">{m.fix}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* TOOLS */}
      {showTools && (
      <section className="roof-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">The DIY Kit</span>
            <h2>Five things, <em>that's it.</em></h2>
            <p>Minimal, because DIY roofing is minimal. What fits in a bucket. The rest is hired out. Safety first—a harness is not optional if you're working on a slope above 4:12 or anything above one story.</p>
            <div className="pull">
              &ldquo;The pro's fee isn't a markup. It's a reflection of the stakes.&rdquo;
              <span className="src">&mdash; Ray, contributor</span>
            </div>
          </div>
          <div className="tool-list">
            {TOOLS.map((t, i) => (
              <div className="tool" key={t.name}>
                <span className="n">{String(i + 1).padStart(2,"0")}</span>
                <div>
                  <h5>{t.name}</h5>
                  <p className="desc">{t.desc}</p>
                </div>
                <span className="price">{t.price}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
      )}
    </div>
  );
};

window.Roofing = Roofing;