/* HVAC — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "Install a smart thermostat",
    why: "The highest-leverage HVAC upgrade — remote control, scheduling, energy analytics.",
    img: "https://images.unsplash.com/photo-1545269865-cbf12ff7c6c7?w=1400&q=80",
    time: "1 afternoon",
    cost: "~$120–$300",
    slot: "feature",
  },
  {
    rank: 2,
    title: "Replace your HVAC filter",
    why: "Monthly check. A clogged filter starves the blower and kills efficiency.",
    img: "https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=1000&q=80",
    time: "20 min",
    cost: "~$15–$35",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "Clean the AC condenser coil",
    why: "Spring ritual. Outdoor dust and pollen clogs the coil and reduces cooling.",
    img: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1000&q=80",
    time: "30 min",
    cost: "$0",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "Seal duct leaks with foil tape",
    why: "Ducts in unconditioned spaces bleed. Foil tape stops the loss.",
    img: "https://images.unsplash.com/photo-1581093162080-8f86ffa5e77b?w=1200&q=80",
    time: "15 min",
    cost: "~$8 per",
    slot: "wide",
  },
  {
    rank: 5,
    title: "Vacuum return-air vents",
    why: "Blocked returns force the blower to work harder and reduce comfort.",
    img: "https://images.unsplash.com/photo-1577720643272-265b434a3cce?w=1000&q=80",
    time: "1 hour",
    cost: "$0",
    slot: "right2",
  },
];

const HOWTOS = [
  { cat: "maintenance", title: "How to install a smart thermostat",        desc: "Wire identification, power-down procedure, new system wiring.",       time: "2–3 hrs",  unit: "Total",    level: 2, tags: ["Thermostat", "Smart home"] },
  { cat: "maintenance", title: "How to replace an HVAC filter",             desc: "Find the return, measure the frame, install the new filter.",       time: "10 min",   unit: "Monthly",  level: 1, tags: ["Quick fix", "Monthly"] },
  { cat: "maintenance", title: "How to clean an AC condenser coil",         desc: "Hose it down, cascade water through the fins until clear.",         time: "30 min",   unit: "Seasonal", level: 1, tags: ["Spring & fall"] },

  { cat: "diagnostic", title: "How to find an HVAC air leak",              desc: "Listen for hiss, feel for the jet, mark with tape.",              time: "20 min",   unit: "Per run",  level: 2, tags: ["Diagnostics"] },
  { cat: "diagnostic", title: "How to troubleshoot a thermostat that won't cool", desc: "Check batteries, verify mode, reset to defaults.",  time: "10 min",   unit: "Diagnostic", level: 1, tags: ["Thermostat"] },
  { cat: "diagnostic", title: "How to tell if your furnace is short-cycling", desc: "Rapid on/off cycles indicate filter or thermostat issues.", time: "15 min", unit: "Diagnostic", level: 2, tags: ["Diagnostics"] },

  { cat: "specialty", title: "How to bleed a radiator (steam/hot-water)",   desc: "Crack the valve, let air hiss, close when water flows.",             time: "5 min",    unit: "Per rad",  level: 1, tags: ["Steam", "Hot water"] },
  { cat: "specialty", title: "How to clean a furnace flame sensor",         desc: "Access the sensor, wipe gently with fine sandpaper.",              time: "20 min",   unit: "Total",    level: 3, tags: ["Furnace"] },
  { cat: "specialty", title: "How to vacuum and clean air returns",         desc: "Pop the grille, vacuum the return box, wipe the grille.",          time: "1 hour",   unit: "Whole house", level: 1, tags: ["Seasonal"] },
  { cat: "specialty", title: "How to find the right HVAC filter MERV rating", desc: "Manual reference, size match, efficiency tradeoffs.",           time: "10 min",   unit: "Research", level: 2, tags: ["Filter"] },
  { cat: "specialty", title: "How to spot a failing condenser fan",         desc: "Watch for lack of spin on hot days, listen for grinding.",        time: "5 min",    unit: "Diagnostic", level: 2, tags: ["Diagnostics"] },
  { cat: "specialty", title: "How to test thermostat wires with a multimeter", desc: "Identify wires, probe for 24V, trace the circuit.",           time: "30 min",   unit: "Total",    level: 3, tags: ["Electrical"] },
];

const CATS = [
  { id: "all",          label: "All guides" },
  { id: "maintenance",  label: "Maintenance" },
  { id: "diagnostic",   label: "Diagnostics" },
  { id: "specialty",    label: "Specialty & repair" },
];

const MISTAKES = [
  {
    title: "Cranking the thermostat thinking it heats faster",
    body: "The furnace runs at full capacity no matter what. You're just prolonging the cycle and overshooting comfort.",
    fix: "Set it once. A 2-degree overshoot means 20 extra minutes of runtime for no gain — only wasted energy.",
  },
  {
    title: "Blocking return-air vents with furniture",
    body: "The blower has to fight the restriction. Returns aren't decorative — they're critical to balanced airflow.",
    fix: "Keep returns open. Blocked returns kill efficiency in the whole house, not just that room.",
  },
  {
    title: "Buying the cheapest filter that fits",
    body: "Cheap fiberglass filters let dust pass through. The blower doesn't filter the air, the evaporator coil does — and you'll be paying $400 to clean it in months.",
    fix: "Pleated filter, MERV 8–12. Costs $20 instead of $8, lasts 3 months instead of 1, protects the whole system.",
  },
  {
    title: "Ignoring static-pressure problems",
    body: "If some rooms are ice and others never cool, your duct system is unbalanced or clogged. The blower can't distribute air correctly.",
    fix: "Have a pro run a static-pressure test ($150–$200). You'll know exactly where the system is choking.",
  },
  {
    title: "Attempting refrigerant work without certification",
    body: "It's federal law (EPA Section 608). Vent refrigerant, and you've vaporized the compressor and bought a $2,500 replacement.",
    fix: "Call a licensed contractor. A diagnostic visit costs $100 and tells you exactly what's wrong.",
  },
  {
    title: "Not knowing the age of your system",
    body: "Systems typically last 15–20 years. Past 18, expect major failure anytime. Past 20, it's living on borrowed time.",
    fix: "Know your system's vintage. Age 15+, budget for replacement. Plan, don't panic when it fails mid-summer.",
  },
];

const TOOLS = [
  { name: "HVAC filter (right size)",             desc: "Four-inch pleated, MERV 8–12. Lasts 3 months, protects the system.", price: "$20–$35" },
  { name: "Foil tape (HVAC grade)",               desc: "Seals duct leaks. Lasts forever. Never cloth duct tape.",                 price: "$8–$12" },
  { name: "Voltage tester (non-contact or multi)", desc: "Tells you if there's live voltage before you touch thermostat wires.",    price: "$15–$50" },
  { name: "Fin comb (condenser)",                 desc: "Straightens bent condenser fins and improves coil efficiency.",           price: "$12–$18" },
  { name: "Hose nozzle (spray pattern)",          desc: "Gentle spray for condenser coil cleaning. Not a jet.",                    price: "$10–$20" },
  { name: "Multimeter (digital)",                 desc: "Tests voltage and circuits. Essential for thermostat troubleshooting.",    price: "$25–$80" },
  { name: "Soft brush (coil cleaner)",            desc: "Removes leaves and debris from outdoor coil. No wire brush.",              price: "$8–$15" },
  { name: "Thermostat wire stripper (optional)",  desc: "Safely strips 18/22 AWG wire without nicking. Saves time, avoids shorts.",  price: "$12–$25" },
];

const CONTRIBUTOR_CARDS = [
  {
    name: "Marcus Webb",
    role: "Trade Contractor",
    location: "Columbus, Ohio",
    title: "Common HVAC Maintenance",
    desc: "Filter schedules, coil cleaning, seasonal prep. The habits that keep systems running past warranty.",
    time: "9 min",
    link: "/en/trades/hvac/common-hvac-maintenance/",
  },
  {
    name: "Dana Cole",
    role: "Design-Led Perspective",
    location: "Austin, Texas",
    title: "Modern HVAC Upgrades",
    desc: "Smart thermostats, zoning, ductless systems. How modern tech changes the game.",
    time: "10 min",
    link: "/en/trades/hvac/modern-hvac-upgrades/",
  },
  {
    name: "Ray Torres",
    role: "Building Inspector",
    location: "Phoenix, Arizona",
    title: "HVAC Safety Checklist",
    desc: "Electrical safety, gas furnace hazards, sealed system rules. What the code books say.",
    time: "7 min",
    link: "/en/trades/hvac/hvac-safety-checklist/",
  },
  {
    name: "Iris",
    role: "Editor's Pick",
    location: "—",
    title: "How to Install a Smart Thermostat",
    desc: "Step-by-step guide to wiring, power-down, new system installation. AI-generated, contributor-reviewed.",
    time: "—",
    link: "/en/trades/hvac/how-to-install-a-smart-thermostat/",
  },
];

/* ---------- 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 ContributorCard = ({ card, idx }) => (
  <div className={`contributor-card ${idx === 3 ? "iris-pick" : ""}`}>
    <div className="header">
      <div className="meta">
        <h4>{card.name}</h4>
        <p className="role">{card.role}</p>
        <p className="location">{card.location}</p>
      </div>
    </div>
    <div className="content">
      <h5>{card.title}</h5>
      <p>{card.desc}</p>
    </div>
    <div className="footer">
      <span className="time">{card.time && `${card.time} read`}</span>
      <a href={card.link} className="link-arrow">→</a>
    </div>
  </div>
);

const HVAC = ({ category = "all", showMistakes = true, showTools = true, showContributors = true }) => {
  const filtered = category === "all" ? HOWTOS : HOWTOS.filter(g => g.cat === category);
  return (
    <div className="hvac-page">
      {/* HERO */}
      <section className="hvac-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">HVAC</span>
          </div>

          <div className="hvac-hero-grid">
            <h1>Maintenance, <em>yes.</em><br/>Repair, <em>no.</em></h1>
            <div className="right-col">
              <p className="lede">
                Filters, vents, and a good thermostat — yes. Refrigerant, ductwork sealed systems, and gas — no. Smart upgrades and seasonal maintenance are high-leverage wins. Everything inside the sealed loop goes to EPA-licensed pros.
              </p>
            </div>
          </div>

          <div className="hvac-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>~$100</em></span>
              <span className="l">Avg. annual maintenance</span>
            </div>
            <div className="stat">
              <span className="n"><em>15–20</em></span>
              <span className="l">System lifespan (years)</span>
            </div>
            <div className="stat">
              <span className="n"><em>4<span style={{opacity:0.4}}>/5</span></em></span>
              <span className="l"><span className="dot">&bull;</span> DIY-ability</span>
            </div>
          </div>
        </div>
      </section>

      {/* TOP 5 */}
      <section className="hvac-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">The Editor&rsquo;s 5</span>
              <h2>Five projects, ranked <em>by efficiency gain.</em></h2>
            </div>
            <div className="right">
              <p>If you only ever tackle five HVAC maintenance projects, do these. Ranked by energy savings, cost efficiency, and return-on-effort.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* CONTRIBUTORS */}
      {showContributors && (
      <section className="hvac-contributors">
        <div className="wrap-wide">
          <div className="contrib-head">
            <span className="label">Voices on this page</span>
            <h2>Four perspectives, <em>one system.</em></h2>
            <p>Contractor maintenance habits, design-led upgrades, safety rules, and AI-generated instructionals — together they tell the whole story of HVAC ownership.</p>
          </div>
          <div className="contrib-grid">
            {CONTRIBUTOR_CARDS.map((card, i) => <ContributorCard key={card.name} card={card} idx={i} />)}
          </div>
        </div>
      </section>
      )}

      {/* THE MENU */}
      <section className="hvac-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every HVAC 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.__setHvacCategory && window.__setHvacCategory(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>

      {/* ASK IRIS */}
      <section className="ask-iris">
        <div className="wrap-wide">
          <div className="iris-prompt">
            <h2>Looking for something else?</h2>
            <p>Iris builds guides on demand. Type what your system is doing — a noise, a comfort issue, a question about efficiency. The AI generates a walkthrough, then contributors review and revise.</p>
            <input type="text" placeholder="e.g., 'My AC isn't cooling the upstairs' or 'How do I lower my heating bill?'" className="iris-input" disabled />
            <p className="note" style={{fontSize: "12px", color: "var(--ink-mute)", marginTop: "8px"}}>Coming soon. Search HVAC questions in any room hub for now.</p>
          </div>
        </div>
      </section>

      {/* WHAT NOT TO DO */}
      {showMistakes && (
      <section className="hvac-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Six mistakes <em>everyone makes.</em></h2>
            <p>All of them are about misunderstanding how your system works, not poor technique. Knowing why makes the fix obvious.</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="hvac-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">The toolkit</span>
            <h2>Eight things, <em>nothing more.</em></h2>
            <p>HVAC maintenance isn't about gadgets. It's about understanding what your system is telling you.</p>
            <div className="pull">
              &ldquo;The furnace doesn't care how many tools you have. It cares whether you know when to call the pro.&rdquo;
              <span className="src">&mdash; Marcus, 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.HVAC = HVAC;