/* Electrical — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "How to Replace a Light Switch Safely",
    why: "Same location, new switch, breaker off and tested. The safest electrical project.",
    img: "https://images.unsplash.com/photo-1621905251872-48416432ec4c?w=1400&q=80",
    time: "30 min",
    cost: "~$8",
    slot: "feature",
  },
  {
    rank: 2,
    title: "How to Replace an Outlet Safely",
    why: "Old outlet out, new outlet in, terminal screws tight. Polarity matters.",
    img: "https://images.unsplash.com/photo-1517153295259-f595b909aeb4?w=1000&q=80",
    time: "1 hour",
    cost: "~$12",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "How to Install a Ceiling Fan",
    why: "Swap for an existing fixture only. New circuit is a pro call.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1000&q=80",
    time: "2 hours",
    cost: "~$80",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "How to Install a Dimmer Switch",
    why: "Replaces an ordinary switch. Check wattage rating first.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&q=80",
    time: "45 min",
    cost: "~$25",
    slot: "wide",
  },
  {
    rank: 5,
    title: "How to Test an Outlet with a Multimeter",
    why: "Diagnostic skill. Confirms live, polarity, ground. Five minutes per outlet.",
    img: "https://images.unsplash.com/photo-1517153295259-f595b909aeb4?w=1000&q=80",
    time: "5 min",
    cost: "~$20",
    slot: "right2",
  },
];

const HOWTOS = [
  // Safe switches & outlets
  { cat: "safe", title: "How to Replace a Light Switch Safely", desc: "Same location, breaker off and tested.", time: "30 min", unit: "Each", level: 2, tags: ["Breaker off", "Safest"] },
  { cat: "safe", title: "How to Replace an Outlet Safely", desc: "Polarity confirmed, terminal screws tight.", time: "1 hour", unit: "Each", level: 2, tags: ["Polarity", "3-prong"] },
  { cat: "safe", title: "How to Install a Light Fixture", desc: "Same box, new fixture, breaker off.", time: "1 hour", unit: "Each", level: 2, tags: ["Fixture swap", "LED-ready"] },

  // Upgrades
  { cat: "upgrade", title: "How to Install a Dimmer Switch", desc: "Check wattage rating before installing.", time: "45 min", unit: "Each", level: 2, tags: ["Dimmers", "Load check"] },
  { cat: "upgrade", title: "How to Install a GFCI Outlet", desc: "Mandatory in kitchens, baths, wet areas.", time: "1 hour", unit: "Each", level: 2, tags: ["Safety", "GFCI"] },
  { cat: "upgrade", title: "How to Install a Smart Light Switch", desc: "Requires neutral wire in most cases.", time: "1 hour", unit: "Each", level: 3, tags: ["Neutral", "Smart home"] },

  // Diagnostic & locating
  { cat: "diagnostic", title: "How to Test an Outlet with a Multimeter", desc: "Confirms voltage, polarity, ground.", time: "5 min", unit: "Per outlet", level: 1, tags: ["Testing", "Diagnostic"] },
  { cat: "diagnostic", title: "How to Locate a Tripped Breaker", desc: "Read the panel, find the switch.", time: "5 min", unit: "Panel read", level: 1, tags: ["Panel", "Breaker"] },
  { cat: "diagnostic", title: "How to Test and Replace a 3-Way Switch", desc: "Two switches, one fixture. Photo the wires.", time: "1 hour", unit: "Each", level: 3, tags: ["3-way", "Traveler"] },

  // Advanced safe projects
  { cat: "advanced", title: "How to Install a Ceiling Fan", desc: "Swap for existing fixture. New circuit = pro.", time: "2 hours", unit: "Each", level: 3, tags: ["Fixture", "Support"] },
  { cat: "advanced", title: "How to Spot Aluminum Wiring", desc: "Identify it. Don't touch it. Call.", time: "Visual", unit: "Inspection", level: 1, tags: ["Wiring type", "Fire risk"] },
  { cat: "advanced", title: "How to Add a 3-Prong Outlet Where There Was 2-Prong", desc: "Requires three-conductor wire and ground.", time: "1 hour", unit: "Each", level: 3, tags: ["Grounding", "Wire check"] },
];

const CATS = [
  { id: "all",        label: "All guides" },
  { id: "safe",       label: "Safe switches & outlets" },
  { id: "upgrade",    label: "Upgrades & improvements" },
  { id: "diagnostic", label: "Testing & diagnosis" },
  { id: "advanced",   label: "Advanced (still DIY)" },
];

const MISTAKES = [
  {
    title: "Trusting the breaker label instead of testing",
    body: "The label says 'Master Bedroom' but the kitchen goes dark. Labels are written by humans and can be wrong. Always test.",
    fix: "Buy a non-contact voltage tester ($8). Test every circuit. The label is a guess. The tester is fact.",
  },
  {
    title: "Using mismatched wire gauges",
    body: "15-amp breaker with 12-gauge wire, or 20-amp breaker with 14-gauge wire. The undersized wire melts inside the wall.",
    fix: "15-amp breaker = 14-gauge wire. 20-amp breaker = 12-gauge wire. When in doubt, call an electrician to verify.",
  },
  {
    title: "Ignoring the ground wire",
    body: "You remove the ground wire to fit a two-prong outlet. You've removed the safety. If a short occurs, the ground catches it.",
    fix: "Replace with a three-prong outlet and add ground wire if available. If no ground wire exists, call an electrician.",
  },
  {
    title: "Using interior outlets outdoors",
    body: "An interior outlet rated 60–86°F corrodes in a garage or shed. It fails, shorts, and catches fire in wet conditions.",
    fix: "Use exterior outlets rated for damp or wet location. Weatherproofing gaskets and covers are not optional.",
  },
  {
    title: "Wearing gloves and rubber shoes but skipping the main protection",
    body: "You're protected by shoes and a glove but working on a live circuit because you didn't test it first.",
    fix: "Gloves and shoes are comfort, not protection. The protection is the breaker being off and tested with a voltage tester.",
  },
  {
    title: "Calling 12-gauge 14-gauge by eye and proceeding",
    body: "Wire sizes look nearly identical. If you think you have 12 and actually have 14, the undersized wire fails under a 20-amp load.",
    fix: "Read the wire sheath. The gauge is printed there. Never guess. If you can't read it, measure with a caliper or ask.",
  },
];

const TOOLS = [
  { name: "Non-contact voltage tester", desc: "Hold near wire or outlet. Beeps if live. The fastest way to confirm dead circuit. Essential.", price: "$8" },
  { name: "Multimeter (basic)", desc: "Confirms voltage, continuity, resistance. Tells you polarity and whether ground is connected.", price: "$20" },
  { name: "Wire strippers", desc: "Strip insulation without nicking the wire. Nicked wire fails. Go slow.", price: "$15" },
  { name: "Electrician's pliers (lineman's)", desc: "Bend wire into loop terminal around the screw. Tight loops prevent loose connections.", price: "$18" },
  { name: "Screwdrivers (Phillips + flathead)", desc: "Breaker screws, switch screws, outlet screws. High-quality steel, not dollar-store.", price: "$12" },
  { name: "Flashlight (headlamp)", desc: "Panel boxes and junction boxes are dark. A headlamp frees both hands.", price: "$15" },
  { name: "Wire connectors (variety pack)", desc: "Twist-on connectors for joining wire ends if needed. Assorted sizes.", price: "$8" },
  { name: "Insulated gloves", desc: "Comfort, not protection. Wear them, but test the breaker first. They're not armor.", price: "$10" },
];

const CONTRIBUTORS = [
  {
    name: "Marcus Webb",
    location: "Columbus, Ohio",
    byline: "Trade contractor · electrical panel upgrades",
    article: "Common Electrical Repairs",
    time: "9 min",
    url: "/en/trades/electrical/common-electrical-repairs/",
  },
  {
    name: "Dana Cole",
    location: "Austin, Texas",
    byline: "Design specialist · kitchen & bath electrical",
    article: "Modern Electrical Upgrades",
    time: "10 min",
    url: "/en/trades/electrical/modern-electrical-upgrades/",
  },
  {
    name: "Ray Torres",
    location: "Phoenix, Arizona",
    byline: "Building inspector · code compliance & safety",
    article: "Electrical Safety Checklist",
    time: "7 min",
    url: "/en/trades/electrical/electrical-safety-checklist/",
  },
  {
    name: "Iris",
    location: "—",
    byline: "Editor's Pick · how-to instruction",
    article: "How to Replace a Light Switch Safely",
    time: "—",
    url: "/en/trades/electrical/how-to-replace-a-light-switch-safely/",
  },
];

/* ---------- 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 >= 3 ? "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 = ({ c, idx }) => (
  <a className="contributor-card" href={c.url}>
    <span className="num">{String(idx + 1).padStart(2, "0")}</span>
    <div className="card-body">
      <h4>{c.name}</h4>
      <p className="location">{c.location}</p>
      <p className="byline">{c.byline}</p>
      <p className="article">
        <em>{c.article}</em>
        {c.time && <span className="time"> · {c.time}</span>}
      </p>
    </div>
  </a>
);

const Electrical = ({ category = "all" }) => {
  const filtered = category === "all" ? HOWTOS : HOWTOS.filter(g => g.cat === category);
  return (
    <div className="electrical-page">
      {/* HERO */}
      <section className="elec-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">Electrical</span>
          </div>

          <div className="elec-hero-grid">
            <h1>Switches and fixtures <em>with the breaker off.</em><br/>Anything in the panel?<br/><em>Call.</em></h1>
            <div className="right-col">
              <p className="lede">
                Almost always a pro call. Breaker off, tested, and done — that's DIY electrical. Everything else is licensed work. Here's what's safe to do yourself.
              </p>
            </div>
          </div>

          <div className="elec-stats">
            <div className="stat">
              <span className="n">{HOWTOS.length}</span>
              <span className="l">Safe projects</span>
            </div>
            <div className="stat">
              <span className="n"><em>5</em></span>
              <span className="l">DIY-ability scale</span>
            </div>
            <div className="stat">
              <span className="n"><em>$8</em></span>
              <span className="l">Voltage tester cost</span>
            </div>
            <div className="stat">
              <span className="n"><em>Always</em></span>
              <span className="l"><span className="dot">&bull;</span> Test before touching</span>
            </div>
          </div>
        </div>
      </section>

      {/* TOP 5 */}
      <section className="elec-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">The Editor&rsquo;s 5</span>
              <h2>Five safe projects, <em>ranked by safety first.</em></h2>
            </div>
            <div className="right">
              <p>If you do electrical work yourself, these five are the only projects worth attempting. All require breaker-off and testing. All avoid the panel.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* CONTRIBUTORS */}
      <section className="contributors-block">
        <div className="wrap-wide">
          <h2 style={{marginBottom: 48}}>Contributors on this page</h2>
          <div className="contributors-grid">
            {CONTRIBUTORS.map((c, i) => <ContributorCard key={c.name} c={c} idx={i} />)}
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="elec-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every safe electrical <em>guide available.</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.__setElectricalCategory && window.__setElectricalCategory(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 */}
      <section className="elec-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Six mistakes <em>that kill.</em></h2>
            <p>These are the errors that cause fires, electrocution, and property loss. Learn them. Don't make them.</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 */}
      <section className="elec-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">Tools you'll actually use</span>
            <h2>Eight things, <em>the essentials.</em></h2>
            <p>Electrical doesn't require many tools. The ones you need are non-negotiable. A voltage tester is not optional — it's the difference between safe and dead.</p>
            <div className="pull">
              &ldquo;Never, ever trust a breaker label. Test every single time.&rdquo;
              <span className="src">&mdash; Ray, building inspector</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>

      {/* ASK IRIS */}
      <section className="ask-iris">
        <div className="wrap-wide">
          <h2 style={{marginBottom: 16}}>Looking for something else?</h2>
          <p style={{fontSize: 16, color: "var(--ink-soft)", marginBottom: 24}}>Iris builds custom guides on demand. Type what's not working or what you're trying to do.</p>
          <div style={{display: "flex", gap: 12, alignItems: "center"}}>
            <input type="text" placeholder="e.g., how to install a wall outlet in a cabinet..." style={{
              flex: 1,
              padding: "12px 16px",
              border: "1px solid var(--rule)",
              borderRadius: 4,
              fontFamily: "DM Sans",
              fontSize: 14,
            }} />
            <button style={{
              padding: "12px 24px",
              background: "var(--brass)",
              color: "white",
              border: "none",
              borderRadius: 4,
              fontFamily: "DM Sans",
              fontSize: 14,
              fontWeight: 600,
              cursor: "pointer",
              transition: "opacity 0.2s",
            }} onMouseEnter={e => e.target.style.opacity = 0.85} onMouseLeave={e => e.target.style.opacity = 1}>
              Ask Iris
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Electrical = Electrical;