/* Plumbing — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "Know where the main shutoff is and test it",
    why: "The single most important skill. 15 minutes now prevents panic later.",
    img: "https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=1400&q=80",
    time: "15 min",
    cost: "Free",
    slot: "feature",
  },
  {
    rank: 2,
    title: "Replace a leaky faucet washer or cartridge",
    why: "The drip that costs $5 in water and $200 in a service call.",
    img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1000&q=80",
    time: "30 min",
    cost: "~$12",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "Clear a clogged drain with a plunger and snake",
    why: "Before you call a drain cleaner, the tools solve 80% of clogs.",
    img: "https://images.unsplash.com/photo-1585391572165-7ac4e2af8a88?w=1000&q=80",
    time: "1 hour",
    cost: "~$40",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "Replace a toilet fill valve or flange",
    why: "A running toilet costs $50/month. The valve is $18 and takes 20 minutes.",
    img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80",
    time: "30 min–half day",
    cost: "~$80",
    slot: "wide",
  },
  {
    rank: 5,
    title: "Replace a supply line before it fails",
    why: "Rubber hoses fail every 5–7 years. Braided stainless lasts 25+ years.",
    img: "https://images.unsplash.com/photo-1585391572165-7ac4e2af8a88?w=1000&q=80",
    time: "20 min",
    cost: "~$15",
    slot: "right2",
  },
];

const HOWTOS = [
  // Faucets & fixtures
  { cat: "faucets", title: "How to fix a leaky faucet",           desc: "Identify the drip, shut off, replace the cartridge or washer.",  time: "30 min",     unit: "Total",  level: 2, tags: ["Faucet", "DIY"] },
  { cat: "faucets", title: "How to stop a running toilet",        desc: "The fill valve is the culprit 95% of the time.",             time: "20 min",     unit: "Total",  level: 1, tags: ["Toilet", "Quick fix"] },

  // Drains
  { cat: "drains", title: "How to clear a clogged drain",         desc: "Plunger first, then auger. Know the difference.",            time: "1 hour",     unit: "Per drain", level: 2, tags: ["Drain", "Tool"] },

  // Lines & seals
  { cat: "lines", title: "How to replace a toilet flange",        desc: "Silent killer of toilets. Full removal and re-seal.",        time: "Half day",   unit: "Per toilet", level: 4, tags: ["Toilet", "Advanced"] },
  { cat: "lines", title: "How to replace a supply line",          desc: "Shut off, unscrew, replace. Braided stainless lasts 25 years.", time: "20 min",     unit: "Per line", level: 1, tags: ["Lines", "DIY"] },
  { cat: "lines", title: "How to repair a P-trap",                desc: "Seal the joint with putty or silicone, not teflon tape.",    time: "30 min",     unit: "Per trap", level: 2, tags: ["Trap", "Seal"] },
  { cat: "lines", title: "How to replace a garbage disposal",      desc: "Disconnect, unbolt, install new. Electrical caution required.", time: "1 hour",     unit: "Total",  level: 3, tags: ["Disposal", "Electric"] },
];

const CATS = [
  { id: "all",     label: "All guides" },
  { id: "faucets", label: "Faucets & fixtures" },
  { id: "drains",  label: "Drains" },
  { id: "lines",   label: "Lines & seals" },
];

const MISTAKES = [
  {
    title: "Shutting off the wrong valve and panicking",
    body: "The stop valve under your sink controls that sink only. The main shutoff controls the whole house. If water still flows after closing the sink valve, you grabbed the wrong one.",
    fix: "Know where both are before you need them at 2am. Label them. Test them twice a year.",
  },
  {
    title: "Overtightening a slip nut and cracking the tailpiece",
    body: "Slip nuts only need to be hand-tight plus a quarter turn. One extra turn cracks the fitting and now you've got a bigger mess.",
    fix: "Hand-tight only. If it leaks after that, go back a half turn and seal with plumber's putty or silicone.",
  },
  {
    title: "Using teflon tape on a slip-joint connection",
    body: "Teflon tape is for threaded connections. Slip joints use a rubber washer and putty. Teflon on a slip joint means water weeping in 6 months.",
    fix: "Teflon tape only on threads (angle stops, shutoff valves). Slip joints get a washer + putty or silicone.",
  },
  {
    title: "Mismatched washers in a cartridge assembly",
    body: "Every washer size matters — it's the seal between parts. A 7/8″ washer where a 1/2″ should go doesn't seal.",
    fix: "Bring the old cartridge to the hardware store. Match exact. A $2 mistake now beats a $200 service call later.",
  },
  {
    title: "Ignoring slow leaks and hoping they'll go away",
    body: "A drip under the sink that you ignore for 6 months becomes a soft subfloor and mold. A slow leak behind a wall becomes a structural problem.",
    fix: "Fix slow leaks fast. The 20-minute repair now costs $50. The repair ignored for a year costs $5,000 and drywall.",
  },
];

const TOOLS = [
  { name: "Basin wrench",              desc: "The only wrench that fits under a sink. Reaches up and around without removing the sink.",           price: "$25" },
  { name: "Adjustable wrench, 10″",    desc: "For slip nuts, shut-off valves, and anything hexagonal. One wrench, a dozen uses.",              price: "$18" },
  { name: "Plunger, cup-style",        desc: "For sink and tub drains. The flange style is for toilets only — different seal pattern.",       price: "$12" },
  { name: "Drain auger, 25-foot",      desc: "For clogs beyond the trap. The 50-foot is overkill unless you're snaking main lines.",        price: "$30" },
  { name: "Tongue-and-groove pliers",  desc: "Adjusts for any size, locks in place. Grabs frozen nuts better than an adjustable wrench.",  price: "$22" },
  { name: "Plumber's putty",           desc: "For sealing around fixture drains. Teflon tape only for threads — never slip joints.",       price: "$6" },
  { name: "Silicone caulk + gun",      desc: "The modern alternative to putty. Cleaner, longer-lasting, and actually repairable.",        price: "$14" },
  { name: "Voltage tester",            desc: "Before you touch a disposal, test the outlet. Electricity + water is never.",              price: "$12" },
];

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

          <div className="plumb-hero-grid">
            <h1>Shutoff to fixture <em>is fair game.</em><br/>Anything in the wall — call.</h1>
            <div className="right-col">
              <p className="lede">
                Know where the shutoff is. Repair faucets, clear drains, replace fill valves. Anything that requires a shutoff valve inside the wall stays with the pros.
              </p>
            </div>
          </div>

          <div className="plumb-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>~$50</em></span>
              <span className="l">Avg. cost &middot; per repair</span>
            </div>
            <div className="stat">
              <span className="n"><em>30 min</em></span>
              <span className="l">Median project length</span>
            </div>
            <div className="stat">
              <span className="n"><em>3<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="plumb-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 what they're worth.</em></h2>
            </div>
            <div className="right">
              <p>If you only ever tackle five plumbing projects, do these. Ranked by confidence gained, dollars saved, and water damage prevented.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="plumb-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every plumbing 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.__setPlumbingCategory && window.__setPlumbingCategory(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="plumb-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Five mistakes <em>everyone makes.</em></h2>
            <p>We&rsquo;ve made every one of these. Save yourself the second service call — and the second trip to the hardware store.</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="plumb-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">Tools we actually use</span>
            <h2>Eight tools, <em>nothing more.</em></h2>
            <p>The plumbing aisle is overwhelming. This is the kit that solves 95% of repairs you'll ever face. Everything else rents or stays in the box.</p>
            <div className="pull">
              &ldquo;Know where the shutoff is and you're already ahead of most homeowners.&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.Plumbing = Plumbing;