/* Handyman — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "How to patch a drywall hole",
    why: "Spackle, sand, prime, touch-up. The invisible fix everyone expects you to know.",
    img: "https://images.unsplash.com/photo-1587612624352-5dde6b955ec7?w=1400&q=80",
    time: "20 min",
    cost: "~$5",
    slot: "feature",
  },
  {
    rank: 2,
    title: "How to fix a squeaky floorboard",
    why: "Find the squeak, screw it down. The fix takes longer to explain than to do.",
    img: "https://images.unsplash.com/photo-1565193566173-7cde49f1c0a9?w=1000&q=80",
    time: "15 min",
    cost: "~$8",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "How to stop a running toilet",
    why: "The flapper or the fill valve. Almost always the flapper. Fix it before it costs $200.",
    img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1000&q=80",
    time: "30 min",
    cost: "~$12",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "How to fix a sticking door",
    why: "Plane, sand, or shim—three options depending on what's sticking where.",
    img: "https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80",
    time: "45 min",
    cost: "~$0–20",
    slot: "wide",
  },
  {
    rank: 5,
    title: "How to replace a light switch",
    why: "Turn off the breaker, loosen the terminals, swap the switch. Five minutes of work.",
    img: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=1000&q=80",
    time: "15 min",
    cost: "~$3",
    slot: "right2",
  },
];

const HOWTOS = [
  // Common fixes
  { cat: "common", title: "How to patch a drywall hole",               desc: "Spackle, sand, prime, paint. The invisible fix.",                           time: "20 min",   unit: "Per hole", level: 1, tags: ["Quick", "Paint"] },
  { cat: "common", title: "How to fix a squeaky floorboard",           desc: "Screw it down from above or below. End the noise.",                        time: "15 min",   unit: "Per board", level: 1, tags: ["Squeak"] },
  { cat: "common", title: "How to stop a running toilet",              desc: "Replace the flapper or the fill valve. Not both.",                         time: "30 min",   unit: "Per toilet", level: 2, tags: ["Plumbing", "Budget"] },

  // Doors & hinges
  { cat: "doors", title: "How to fix a sticking door",                 desc: "Plane, sand, shim, or adjust. Depends on where it catches.",               time: "45 min",   unit: "Per door", level: 2, tags: ["Doors"] },
  { cat: "doors", title: "How to replace a light switch",              desc: "Kill the breaker, loosen the terminals, install the new one.",             time: "15 min",   unit: "Per switch", level: 1, tags: ["Electrical", "Quick"] },
  { cat: "doors", title: "How to tighten a loose doorknob",            desc: "Tighten the set screw inside the escutcheon. One hex key.",                time: "5 min",    unit: "Per knob", level: 1, tags: ["Hardware"] },

  // Fixtures & hardware
  { cat: "fixtures", title: "How to replace a cabinet hinge",          desc: "Unscrew the old, install the new, adjust the doors.",                     time: "20 min",   unit: "Per hinge", level: 2, tags: ["Cabinets"] },
  { cat: "fixtures", title: "How to fix a leaky faucet cartridge",     desc: "Turn off water, pop the cartridge, replace it.",                          time: "25 min",   unit: "Per faucet", level: 2, tags: ["Plumbing", "Leak"] },

  // Hanging & anchors
  { cat: "hanging", title: "How to hang a heavy mirror",               desc: "Find the studs, or use the right anchors. It won't fall.",                time: "30 min",   unit: "Per mirror", level: 2, tags: ["Hanging"] },
  { cat: "hanging", title: "How to install a curtain rod",             desc: "Mark the wall, drill, install brackets, hang.",                           time: "40 min",   unit: "Per rod", level: 1, tags: ["Hanging"] },

  // Toilet work
  { cat: "plumbing", title: "How to reseat a toilet",                  desc: "Turn off water, empty the tank, unbolt, reinstall with new wax ring.",    time: "1 hour",   unit: "Per toilet", level: 3, tags: ["Plumbing", "Messy"] },
];

const CATS = [
  { id: "all",      label: "All guides" },
  { id: "common",   label: "Common fixes" },
  { id: "doors",    label: "Doors & switches" },
  { id: "fixtures", label: "Fixtures & hardware" },
  { id: "hanging",  label: "Hanging & anchors" },
  { id: "plumbing", label: "Plumbing" },
];

const MISTAKES = [
  {
    title: "Patching with drywall compound only—no primer",
    body: "Joint compound is porous. It'll absorb your topcoat and look dull. The patch that looked perfect at night looks like a ghost mark in daylight.",
    fix: "Sand the patch smooth, prime it with paint primer, then topcoat. Always.",
  },
  {
    title: "Hanging into drywall when the stud is 2 inches away",
    body: "That picture rail looks level. Now you've got 50 pounds hanging on a drywall anchor rated for 10. It won't fall today, but it will fall.",
    fix: "Stud finder or knock test first. 30 seconds of prep saves a picture frame and a wall patch.",
  },
  {
    title: "Not turning off the water before unscrewing the toilet",
    body: "The escaping water won't stop. Water everywhere. Then your floor. Then your ceiling below.",
    fix: "Shut-off valve under the tank. Turn it until it stops. Wait 30 seconds. Then proceed.",
  },
  {
    title: "Tightening cabinet hinges with the door hanging open",
    body: "The door sags during adjustment. You tighten to what looks right—then close the door and it binds.",
    fix: "Close the door, adjust the hinge, reopen to check. Repeat. Close before final tightens.",
  },
  {
    title: "Swapping a light switch without turning off the breaker",
    body: "You're alive. Barely. But you're shaking and your hands hurt.",
    fix: "The breaker takes 10 seconds to kill. Verify the power is off with a multimeter or a known-working device.",
  },
  {
    title: "Using a dull saw for something that needs a sharp one",
    body: "You push harder. You force it. The blade heats up, binds, kicks back. Your knuckles remember for a week.",
    fix: "Sharp blades, sharp bits, sharp tools. Replace them when they're tired. A $4 blade is cheaper than a hospital visit.",
  },
];

const TOOLS = [
  { name: "Stud finder (electric)",                      desc: "Finds the studs behind the wall in seconds. Not a magic wand, but close.",            price: "$25–60" },
  { name: "Multi-tool (oscillating)",                    desc: "Cuts, sands, grinds. The one power tool that earns its shelf space.",                 price: "$70–140" },
  { name: "Torpedo level, 24 inch",                      desc: "Straightness you can trust. Durable, accurate, lasts decades.",                      price: "$35" },
  { name: "Drywall saw (keyhole)",                       desc: "For cutting patch holes, notching, and reaching tight spots.",                       price: "$8" },
  { name: "Hex key set (ball-end)",                      desc: "Loose doorknobs, cabinet hinges, everything. Have them nearby.",                     price: "$15–25" },
  { name: "Spackle, lightweight + joint compound",       desc: "Patches. Joint compound for finishing, spackle for speed.",                         price: "$8" },
  { name: "Putty knife set (2\", 4\", 6\")",             desc: "Spreading, scraping, finessing. Essential for drywall work.",                       price: "$20–35" },
  { name: "Anchors (toggle, molly, drive)",              desc: "Wall anchors that actually hold. Know which one for your wall type.",               price: "$6–12" },
];

const DIY_WHEN = [
  "Patching holes in drywall up to 3 inches—spackle and sand",
  "Squeaky floors that you can access from below—one or two screws",
  "Running toilets—usually the flapper in the tank, $15 fix",
  "Sticky doors—sand, plane, or shim",
  "Replacing light switches—kill the breaker first",
  "Hanging shelves into studs—find them, drill, mount",
  "Tightening loose hinges and hardware",
  "Replacing cabinet knobs and handles",
  "Small faucet repairs—cartridge swaps",
  "Installing a curtain rod between studs",
];

const PRO_WHEN = [
  "Holes larger than 6 inches—needs tape and compound skill",
  "Multiple squeaks that share the same joist—structural assessment",
  "Anything involving removing the toilet from the floor—floor damage risk",
  "Doors that bind because the frame has shifted or sagged",
  "Electrical work beyond a switch—outlets, wiring, code compliance",
  "Hanging heavy mirrors or shelves in old plaster or unreachable studs",
  "Plumbing repairs below the visible trap—shut-off valves, supply lines",
  "Structural creaks, settlement sounds, or anything moving that shouldn't",
];

/* ---------- 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 = ({ name, location, title, time, img }) => (
  <div className="contributor-card">
    <div className="img" style={{ backgroundImage: img ? `url(${img})` : "none" }} />
    <h4>{name}</h4>
    <p className="loc">{location}</p>
    <p className="title">{title}</p>
    <p className="time">{time} read</p>
  </div>
);

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

          <div className="handyman-hero-grid">
            <h1>The catch-all.<br/><em>Try first,</em><br/>then hire.</h1>
            <div className="right-col">
              <p className="lede">
                Door tune-ups, drywall patches, picture rails, leaky faucets, that one squeaky stair. The handyman trade is the one that catches everything else. Here's how to know when to DIY and when to call.
              </p>
            </div>
          </div>

          <div className="handyman-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–200</em></span>
              <span className="l">Hourly · pro rate</span>
            </div>
            <div className="stat">
              <span className="n"><em>1–4 hrs</em></span>
              <span className="l">Typical project</span>
            </div>
            <div className="stat">
              <span className="n"><em>2<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="handyman-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">Editor's 5</span>
              <h2>Five jobs that appear <em>more than once a year.</em></h2>
            </div>
            <div className="right">
              <p>If you rent or own, these five fixes come up again and again. Ranked by how often you'll need them and how fast you can finish.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* CONTRIBUTORS */}
      <section className="handyman-contributors">
        <div className="wrap-wide">
          <div className="contrib-head">
            <h2>The people behind <em>these guides.</em></h2>
            <p>Bylines you'll see throughout this trade. Three voices from the field, one from the AI.</p>
          </div>
          <div className="contrib-grid">
            <ContributorCard
              name="Marcus Webb"
              location="Columbus, Ohio"
              title="Common Handyman Fixes"
              time="9 min"
              img="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&q=80"
            />
            <ContributorCard
              name="Dana Cole"
              location="Austin, Texas"
              title="Modern Handyman Upgrades"
              time="10 min"
              img="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&q=80"
            />
            <ContributorCard
              name="Ray Torres"
              location="Phoenix, Arizona"
              title="Handyman Safety Checklist"
              time="7 min"
              img="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&q=80"
            />
            <ContributorCard
              name="Iris"
              location="Editor&rsquo;s Pick"
              title="How to Patch a Drywall Hole"
              time="—"
              img=""
            />
          </div>
        </div>
      </section>

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

      {/* WHEN DIY / WHEN PRO */}
      <section className="handyman-decision">
        <div className="wrap-wide decision-grid">
          <div className="when-diy">
            <h3>When this is DIY</h3>
            <p className="intro">Anything that you can reach from a ladder, doesn't involve major structural issues, and won't send water where it shouldn't go.</p>
            <ul>
              {DIY_WHEN.map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </div>
          <div className="when-pro">
            <h3>When call a pro</h3>
            <p className="intro">You're looking at a bigger job, hidden damage, or anything that requires a permit. Handymen batch these—that's their job.</p>
            <ul>
              {PRO_WHEN.map((item, i) => (
                <li key={i}>{item}</li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* TOOLS */}
      {showTools && (
      <section className="handyman-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">The toolkit</span>
            <h2>Eight things that <em>fit in a bin.</em></h2>
            <p>A handyman's toolkit is modest. It's not a garage full of specialized equipment. It's eight things you use once a week, kept in one place, ready to go.</p>
            <div className="pull">
              &ldquo;You're not a specialist. You're the person who knows enough to fix the thing that's broken right now.&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>
      )}

      {/* MISTAKES */}
      {showMistakes && (
      <section className="handyman-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What costs time</span>
            <h2>Six mistakes <em>worth avoiding.</em></h2>
            <p>These aren't failures. They're the second and third trips to the hardware store, the callbacks, the fixes that blow a 20-minute job into a weekend.</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>
      )}
    </div>
  );
};

window.Handyman = Handyman;