/* Trades — Editorial Directory */

const TRADES = [
  {
    name: "Painting",
    slug: "painting",
    blurb: "The most forgiving trade in the home. A roller, a tray, two coats, and patience around the trim.",
    diy: 1,
    tier: "diy",
    verdict: "Just do it yourself.",
    when_diy: "Single rooms, accent walls, refreshing trim, exterior touch-ups under 8ft.",
    when_pro: "Whole-house exteriors, lead-paint removal, sprayed cabinetry, vaulted ceilings.",
    tags: ["Beginner-friendly", "$30–$200", "Saturday job"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 11h12V6.5a1.5 1.5 0 0 0-1.5-1.5H4.5A1.5 1.5 0 0 0 3 6.5V11Z"/>
        <path d="M15 8h4a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2h-7"/>
        <path d="M9 15v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4"/>
      </svg>
    ),
  },
  {
    name: "Landscaping",
    slug: "landscaping",
    blurb: "Mowing, mulching, planting, simple beds — all yours. Hardscape and grading earn a phone call.",
    diy: 2,
    tier: "diy",
    verdict: "Mostly weekend work.",
    when_diy: "Mowing, planting, mulch, edging, simple raised beds, basic irrigation timers.",
    when_pro: "Drainage, retaining walls, stone patios, tree removal, full re-grade.",
    tags: ["Tools required", "Seasonal", "$0–$5K"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M11 20s-6-2-6-9c0-3 2-6 6-6s6 3 6 6c0 7-6 9-6 9Z"/>
        <path d="M11 20V9"/>
      </svg>
    ),
  },
  {
    name: "Handyman",
    slug: "handyman",
    blurb: "The catch-all. Door tune-ups, drywall patches, picture rails, leaky faucets, that one squeaky stair.",
    diy: 2,
    tier: "diy",
    verdict: "Try first, then hire.",
    when_diy: "Hanging shelves, patching small holes, replacing fixtures, adjusting cabinet hinges.",
    when_pro: "Anything that becomes 'while we're at it' — a list of 8+ small jobs is a one-day pro hire.",
    tags: ["Mixed skills", "Hourly $80–$120", "Half-day jobs"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M15 4l5 5-9 9H6v-5l9-9Z"/>
        <path d="M13 6l5 5"/>
      </svg>
    ),
  },
  {
    name: "Pest Control",
    slug: "pest-control",
    blurb: "Traps, bait stations, and sealing entry points get you 80%. Termites and rodents in walls do not.",
    diy: 3,
    tier: "mid",
    verdict: "Depends what you're chasing.",
    when_diy: "Ants, the occasional mouse, fruit flies, spiders, wasp nests under 6ft.",
    when_pro: "Termites, bed bugs, rats in cavities, anything recurring, anything chemical-grade.",
    tags: ["Health & safety", "Recurring service", "$150–$600/visit"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <ellipse cx="12" cy="13" rx="5" ry="6"/>
        <path d="M12 7V4M9 4h6"/>
        <path d="M7 12H4M20 12h-3M7 16H4M20 16h-3"/>
      </svg>
    ),
  },
  {
    name: "Plumbing",
    slug: "plumbing",
    blurb: "Shutoff to fixture is fair game. Anything inside the wall — slow down, or call.",
    diy: 3,
    tier: "mid",
    verdict: "Know where the shutoff is.",
    when_diy: "Faucets, supply lines, toilet rebuilds, P-traps, garbage disposals, basic shutoff valves.",
    when_pro: "In-wall pipe, water heaters, anything soldered, sewer lines, slab leaks, permit work.",
    tags: ["Water = damage", "Permits matter", "Always shut it off"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3s5 5.5 5 10a5 5 0 0 1-10 0c0-4.5 5-10 5-10Z"/>
      </svg>
    ),
  },
  {
    name: "Roofing",
    slug: "roofing",
    blurb: "Patching a single shingle on a one-story is a Saturday. Anything else, you're hiring height insurance.",
    diy: 4,
    tier: "pro",
    verdict: "Mostly a pro call.",
    when_diy: "Replacing one or two shingles on a single-story walkable pitch. Cleaning gutters.",
    when_pro: "Re-roofs, flashing, valleys, leaks, anything two stories up, anything steeper than a 6:12.",
    tags: ["Heights & falls", "Insurance event", "Permit usually"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 12l9-7 9 7"/>
        <path d="M5 11v8h14v-8"/>
        <path d="M10 19v-5h4v5"/>
      </svg>
    ),
  },
  {
    name: "HVAC",
    slug: "hvac",
    blurb: "Filters, vents, and a good thermostat — yes. Refrigerant, ductwork, and gas — no.",
    diy: 4,
    tier: "pro",
    verdict: "Maintenance, yes. Repair, no.",
    when_diy: "Swap filters monthly, vacuum returns, install a smart thermostat, seal obvious duct leaks.",
    when_pro: "Refrigerant, condenser repair, furnace work, full duct runs, sizing a new system.",
    tags: ["EPA-licensed", "Sealed system", "$200–$15K"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M3 8h13a3 3 0 1 0-3-3"/>
        <path d="M3 13h17a3 3 0 1 1-3 3"/>
        <path d="M3 18h10"/>
      </svg>
    ),
  },
  {
    name: "Electrical",
    slug: "electrical",
    blurb: "Switches and fixtures with the breaker off — okay. Anything in the panel — call. Always.",
    diy: 5,
    tier: "pro",
    verdict: "Almost always a pro call.",
    when_diy: "Replacing a like-for-like switch, outlet, or light fixture with the breaker confirmed off.",
    when_pro: "Panel work, new circuits, aluminum wiring, knob-and-tube, anything outdoors, anything wet.",
    tags: ["Permit + inspection", "Fire risk", "Licensed only"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M13 2L4 14h7l-1 8 9-12h-7l1-8Z"/>
      </svg>
    ),
  },
  {
    name: "General Contracting",
    slug: "general-contracting",
    blurb: "Whole rooms, additions, anything that touches three trades and a permit. This is project management, not a Saturday.",
    diy: 5,
    tier: "pro",
    verdict: "This is what GCs are for.",
    when_diy: "You can be your own GC if you have time, patience, contacts, and a strong stomach for permits.",
    when_pro: "Renovations, additions, anything structural, anything load-bearing, kitchens, bathrooms.",
    tags: ["Project mgmt", "Permits & inspectors", "10%–20% of total"],
    icon: (
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M4 17c0-4 3.5-7 8-7s8 3 8 7"/>
        <path d="M3 17h18"/>
        <path d="M12 10V6"/>
        <path d="M9 6h6"/>
      </svg>
    ),
  },
];

const FILTERS = [
  { id: "all", label: "All trades" },
  { id: "diy", label: "Weekend DIY" },
  { id: "mid", label: "Try first, hire if needed" },
  { id: "pro", label: "Always call a pro" },
];

const SORT_BY = {
  diy:   { label: "Easiest first",   fn: (a, b) => a.diy - b.diy },
  pro:   { label: "Hardest first",   fn: (a, b) => b.diy - a.diy },
  alpha: { label: "Alphabetical",    fn: (a, b) => a.name.localeCompare(b.name) },
};

const Wrenches = ({ n, tier }) => (
  <div className="wrenches">
    {[1,2,3,4,5].map(i => (
      <span key={i} className={`w ${i <= n ? "on" : ""}`}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
          <path d="M14.7 6.3a4 4 0 0 1-5.4 5.4L4 17l3 3 5.3-5.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2.4-2.4 2.5-2.5Z"/>
        </svg>
      </span>
    ))}
  </div>
);

const TradeRow = ({ t, idx }) => (
  <a className="trade-row" href={`/en/trades/${t.slug}/`} data-tier={t.tier}>
    <div className="trade-num">№ {String(idx + 1).padStart(2, "0")}</div>

    <div className="trade-name">
      <div className="icon-wrap">{t.icon}</div>
      <h3>{t.name}</h3>
      <div className="tags">
        {t.tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
      </div>
    </div>

    <div className="trade-verdict">
      <div className="col diy">
        <h4>When to DIY</h4>
        <p>{t.when_diy}</p>
      </div>
      <div className="col pro">
        <h4>When to call</h4>
        <p>{t.when_pro}</p>
      </div>
    </div>

    <div className="trade-rating" data-tier={t.tier}>
      <span className="label">Difficulty</span>
      <Wrenches n={t.diy} tier={t.tier} />
      <span className="verdict-line">"{t.verdict}"</span>
    </div>

    <div className="trade-arrow">→</div>
  </a>
);

const Trades = () => {
  const [filter, setFilter] = React.useState("all");
  const [sort, setSort]     = React.useState("diy");

  const filtered = filter === "all" ? TRADES : TRADES.filter(t => t.tier === filter);
  const sorted   = [...filtered].sort(SORT_BY[sort].fn);

  return (
    <div className="trades-page">
      <section className="trades-hero">
        <div className="wrap-wide">
          <div className="crumbs">
            <a href="/">Home</a>
            <span className="sep">/</span>
            <span className="here">Trades</span>
          </div>

          <div className="trades-hero-grid">
            <div>
              <h1>
                When to DIY,<br/>
                when to <em>call.</em>
              </h1>
            </div>
            <p className="lede">
              Nine trades, ranked by how much of the work belongs to you on a Saturday — and where the line is before you should be picking up the phone.
            </p>
          </div>

          <div className="meta-strip">
            <span>Issue 04 · The Trades</span>
            <div className="vol">
              <span className="ctr">{filtered.length} of {TRADES.length} shown</span>
              <span>Updated April 2026</span>
            </div>
          </div>

          <div className="diy-legend" aria-hidden="true">
            <span className="end">Pure DIY</span>
            <span className="bar"></span>
            <span className="end">Always a pro</span>
          </div>
        </div>
      </section>

      <div className="wrap-wide">
        <div className="trades-toolbar">
          <div className="pills">
            {FILTERS.map(f => (
              <button
                key={f.id}
                className={`pill ${filter === f.id ? "on" : ""}`}
                onClick={() => setFilter(f.id)}
              >
                {f.label}
              </button>
            ))}
          </div>
          <div className="sort">
            <span>Sort</span>
            <select value={sort} onChange={e => setSort(e.target.value)} aria-label="Sort trades">
              {Object.entries(SORT_BY).map(([k, v]) => (
                <option key={k} value={k}>{v.label}</option>
              ))}
            </select>
          </div>
        </div>

        <div className="trades-list">
          {sorted.map((t, i) => <TradeRow key={t.name} t={t} idx={i} />)}
        </div>
      </div>

      <section className="trades-coda">
        <div className="wrap-wide coda-grid">
          <div>
            <span className="label">Rules of thumb</span>
            <h2>Five questions <em>before you start.</em></h2>
          </div>
          <div className="rules">
            <div className="rule">
              <span className="n">01</span>
              <div>
                <h4>Could this kill you, flood you, or burn the house down?</h4>
                <p>Electrical inside the panel, gas, soldered plumbing, structural removal. Always a pro. No exceptions.</p>
              </div>
            </div>
            <div className="rule">
              <span className="n">02</span>
              <div>
                <h4>Does it need a permit?</h4>
                <p>If it does, your insurance will care if it goes wrong. Get the permit, hire the licensed trade.</p>
              </div>
            </div>
            <div className="rule">
              <span className="n">03</span>
              <div>
                <h4>Will it take more than one weekend?</h4>
                <p>Two weekends is fine. Three means the project has scope you didn't see — pause and price out a pro.</p>
              </div>
            </div>
            <div className="rule">
              <span className="n">04</span>
              <div>
                <h4>Are the tools more than the job?</h4>
                <p>If renting tools costs more than half the pro quote, the math is telling you something.</p>
              </div>
            </div>
            <div className="rule">
              <span className="n">05</span>
              <div>
                <h4>Will you actually finish?</h4>
                <p>Half-finished projects cost more than hired ones. Be honest with the calendar.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Trades = Trades;