/* Pest Control — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "How to seal entry points for mice",
    why: "Mice need a quarter-inch gap. Most homes have dozens. Sealing them stops 80% of problems.",
    img: "https://images.unsplash.com/photo-1560493676-04071c5f467b?w=1400&q=80",
    time: "1 weekend",
    cost: "~$40",
    slot: "feature",
  },
  {
    rank: 2,
    title: "How to get rid of ants naturally",
    why: "Bait stations, not sprays. Let them walk the poison back to the nest.",
    img: "https://images.unsplash.com/photo-1563514227147-6d2c3f1f3f9e?w=1000&q=80",
    time: "30 min setup",
    cost: "~$15",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "How to knock down a wasp nest safely",
    why: "Under 6 feet, nests less than a week old, no allergies. Beyond that, call a pro.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1000&q=80",
    time: "45 min",
    cost: "~$25",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "How to set a snap trap correctly",
    why: "Trigger sensitivity matters. Wrong placement = missed mice. Right placement = results.",
    img: "https://images.unsplash.com/photo-1568602471122-7832951cc4c5?w=1200&q=80",
    time: "20 min",
    cost: "~$10",
    slot: "wide",
  },
  {
    rank: 5,
    title: "How to spot the difference between termites and flying ants",
    why: "Termites have straight antennae and no waist. Flying ants are just ants with wings.",
    img: "https://images.unsplash.com/photo-1538108149393-fbbd81895907?w=1000&q=80",
    time: "Identification",
    cost: "Free",
    slot: "right2",
  },
];

const HOWTOS = [
  // Prevention
  { cat: "prevention", title: "How to seal entry points for mice", desc: "Quarter-inch rule. Mesh, foam, hardware cloth, caulk.", time: "1 weekend", unit: "Per house", level: 2, tags: ["DIY", "Prevention"] },
  { cat: "prevention", title: "How to get rid of ants naturally", desc: "Bait stations placed on their trails, not random spots.", time: "30 min", unit: "Setup", level: 1, tags: ["DIY", "Carpenter ants"] },
  { cat: "prevention", title: "How to pest-proof a pantry", desc: "Airtight containers, remove cardboard, check corners monthly.", time: "2 hours", unit: "Per pantry", level: 1, tags: ["Food safety"] },

  // Traps
  { cat: "traps", title: "How to set a snap trap correctly", desc: "Trigger sensitivity, placement on walls (not center), peanut butter bait.", time: "20 min", unit: "Per trap", level: 1, tags: ["Rodents"] },
  { cat: "traps", title: "How to eliminate fruit flies", desc: "Apple cider vinegar trap or drain clean. Fruit flies are a sanitation problem.", time: "30 min", unit: "Setup", level: 1, tags: ["Quick fix"] },
  { cat: "traps", title: "How to control spiders without chemicals", desc: "They're pest control. But if you must remove them, cup and release outside.", time: "5 min", unit: "Per spider", level: 1, tags: ["Beneficial"] },

  // Identification
  { cat: "identification", title: "How to spot the difference between termites and flying ants", desc: "Termites: straight antennae, thick waist. Flying ants: elbowed antennae, pinched middle.", time: "Identification", unit: "Skill", level: 1, tags: ["Inspection"] },
  { cat: "identification", title: "How to identify bed bugs", desc: "Rusty spots on sheets, itching in lines, found near bed only (not kitchen).", time: "Inspection", unit: "Skill", level: 2, tags: ["Call pro"] },
  { cat: "identification", title: "How to prevent cockroaches", desc: "They need three things: food, water, shelter. Remove all three.", time: "Ongoing", unit: "Habit", level: 1, tags: ["Prevention"] },

  // Specialty
  { cat: "specialty", title: "How to knock down a wasp nest safely", desc: "Only if under 6ft, nests <1 week old, no allergies. Dusk spray, then remove next day.", time: "45 min", unit: "Total", level: 3, tags: ["Safety first"] },
  { cat: "specialty", title: "How to deal with yellow jackets in late summer", desc: "They're aggressive when hunting sugar. Traps help; spraying makes it worse.", time: "1 week", unit: "Seasonal", level: 2, tags: ["Trap management"] },
  { cat: "specialty", title: "How to handle a mouse in the wall", desc: "One-way door at entry, traps inside wall (if accessible), seal after removal.", time: "3 days", unit: "Per mouse", level: 3, tags: ["Patience required"] },
];

const CATS = [
  { id: "all",           label: "All guides" },
  { id: "prevention",    label: "Prevention & sealing" },
  { id: "traps",         label: "Traps & removal" },
  { id: "identification", label: "ID & diagnosis" },
  { id: "specialty",     label: "Specialty pests" },
];

const MISTAKES = [
  {
    title: "Spraying before sealing entry points",
    body: "You kill today's bugs. New ones walk in tomorrow. Sealing stops 80% of problems; spraying stops 0% of new arrivals.",
    fix: "Seal first. Spray only for active infestations after sealing.",
  },
  {
    title: "Ignoring thresholds, weep holes, and utility penetrations",
    body: "Mice don't care about your front door — they come in through the dryer vent, foundation cracks, and gaps around pipes.",
    fix: "Walk the exterior with a flashlight. Quarter-inch gaps are entry points. Seal them all.",
  },
  {
    title: "Killing spiders, lizards, and beneficial insects",
    body: "One spider eats 50+ flies a week. One lizard eats thousands of roaches a year. They're free pest control.",
    fix: "Leave them alone. Relocate only if they're in your bedroom.",
  },
  {
    title: "Using peanut butter alone in traps",
    body: "Peanut butter is dry and doesn't attract like fresh bait does. Mice ignore it after the first day.",
    fix: "Rotate bait: peanut butter, chocolate, nesting material. Change it every 3 days if unused.",
  },
  {
    title: "Leaving pet food out overnight",
    body: "You've just built a restaurant for every pest in the neighborhood.",
    fix: "Feed pets once daily, remove bowls within an hour. Store dry food in airtight containers.",
  },
  {
    title: "Assuming DIY bait stations will handle a recurring problem",
    body: "If pests come back after one treatment, it's a structural problem (gaps, water sources, food). DIY won't fix it.",
    fix: "After one cycle of baiting, stop and inspect. You're missing something. Recurring = call a pro.",
  },
];

const TOOLS = [
  { name: "Hardware cloth (quarter-inch mesh)", desc: "Mice can't chew through it. For sealing large gaps around pipes and vents.", price: "$15" },
  { name: "Expanding foam (caulk-grade)", desc: "Fills gaps, hardens, resists rodent chewing if done right. Second layer with mesh is best.", price: "$8" },
  { name: "Copper mesh (rodent-proof)", desc: "More expensive but lasts decades and resists chewing. Around chimney, dryer vents, roof gaps.", price: "$22" },
  { name: "Snap traps (wooden, not plastic)", desc: "Wooden bases are quieter, easier to set, cheap. Buy in bulk. Replace after each use.", price: "$6" },
  { name: "Labeled bait stations", desc: "Professional bait gel in tamper-proof boxes. Safer than loose powder if pets or kids nearby.", price: "$18" },
  { name: "Shop-vac with HEPA filter", desc: "Cleanup after removal. Regular vacuums spread droppings through your air system.", price: "$45" },
  { name: "Gloves (nitrile, disposable)", desc: "Disease vector prevention. Hantavirus, leptospirosis. Wear them every time.", price: "$8" },
  { name: "Caulk gun and acrylic latex caulk", desc: "Final sealing for small gaps after mesh/foam. Paintable, water-resistant.", price: "$12" },
];

const COLOR_PICKS = [
  { name: "Amber Alert",  code: "PC-001", hex: "#D4A574" },
  { name: "Clinical White", code: "PC-002", hex: "#F9F7F2" },
  { name: "Seal Gray",  code: "PC-003", hex: "#6B7280" },
];

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

          <div className="pest-hero-grid">
            <h1>Traps, bait, and <em>sealing</em> work. Recurring infestations don't.</h1>
            <div className="right-col">
              <p className="lede">
                Sealing entry points stops 80% of problems. Termites and rodents in walls require a pro. Everything else is yours. Here's what to do first.
              </p>
            </div>
          </div>

          <div className="pest-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>$40</em></span>
              <span className="l">Avg. cost &middot; basic sealing</span>
            </div>
            <div className="stat">
              <span className="n"><em>1 wknd</em></span>
              <span className="l">Median DIY project</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="pest-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">Editor's Pick</span>
              <h2>Five projects that <em>actually work.</em></h2>
            </div>
            <div className="right">
              <p>When to DIY: ants, occasional mice, fruit flies, spiders, wasps under 6 feet. When to call a pro: termites, bed bugs, rats in cavities, anything recurring, anything chemical-grade.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="pest-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every pest 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.__setPestCategory && window.__setPestCategory(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="pest-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">Common mistakes</span>
            <h2>Six things that <em>don't work.</em></h2>
            <p>We've seen every workaround fail. Sealing stops new arrivals. Spray stops active ones. Do both, or do neither — just don't spray-only.</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="pest-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">The toolkit</span>
            <h2>Eight tools, <em>nothing more.</em></h2>
            <p>Most pest problems are solved before you ever see the pest. The toolkit is all sealing and prevention — hardware cloth, mesh, foam, traps, bait stations, and cleanup.</p>
            <div className="pull">
              &ldquo;Sealing is the job. Spraying is just maintenance.&rdquo;
              <span className="src">&mdash; Ray Torres, pest control technician</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>
      )}

      {/* COLOR OF THE MOMENT */}
      {showColor && (
      <section className="color-moment">
        <div className="wrap-wide color-moment-inner">
          <div>
            <span className="label">Verdict</span>
            <h2>Depends what <em>you're chasing.</em></h2>
            <p>Pest control is 20% skill and 80% infrastructure. Seal the house, manage the entry points, and most pest problems disappear. The ones that don't are the ones that need a pro.</p>
            <div className="picks">
              {COLOR_PICKS.map(c => (
                <div className="color-pick" key={c.code}>
                  <div className="swatch" style={{ background: c.hex }}></div>
                  <div className="name">{c.name}</div>
                  <div className="code">{c.code}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="color-card">
            <div className="img" style={{ backgroundImage: "url(https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1200&q=80)" }}/>
            <div className="stamp">Shown &middot; Clean entry point</div>
            <div className="badge">
              <div className="t">The goal: zero pest entry</div>
              <div className="m">SEAL · MONITOR · REPEAT</div>
            </div>
          </div>
        </div>
      </section>
      )}
    </div>
  );
};

window.PestControl = PestControl;