/* Landscaping — Trade leaf-menu page */

const TOP5 = [
  {
    rank: 1,
    title: "How to prep a lawn for spring",
    why: "The foundation. Core aeration, thatch removal, overseeding — done right, you've bought three years of a lawn that actually grows.",
    img: "https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=1400&q=80",
    time: "1 weekend",
    cost: "~$150–$300",
    slot: "feature",
  },
  {
    rank: 2,
    title: "How to build a raised garden bed",
    why: "Faster than in-ground, looks permanent, drains better. Four boards, good soil, two hours.",
    img: "https://images.unsplash.com/photo-1466692476868-aef1dfb1e735?w=1000&q=80",
    time: "2 hours",
    cost: "~$80",
    slot: "small s-1",
  },
  {
    rank: 3,
    title: "How to install drip irrigation",
    why: "The difference between hand-watering and having free time. Timers let you water at dawn.",
    img: "https://images.unsplash.com/photo-1530836369250-ef72a3f5cda8?w=1000&q=80",
    time: "1 afternoon",
    cost: "~$60–$120",
    slot: "small s-2",
  },
  {
    rank: 4,
    title: "How to edge a flower bed",
    why: "The detail work. A sharp edge between lawn and bed is the difference between maintained and wild.",
    img: "https://images.unsplash.com/photo-1502877917148-1aa500764cbd?w=1200&q=80",
    time: "30 min",
    cost: "Free tool",
    slot: "wide",
  },
  {
    rank: 5,
    title: "How to mulch a yard properly",
    why: "Two inches, not volcanoes. Regulates soil temp, keeps moisture in, stops weeds.",
    img: "https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1000&q=80",
    time: "1 Saturday",
    cost: "~$30–$60",
    slot: "right2",
  },
];

const HOWTOS = [
  // Lawn care
  { cat: "lawn", title: "How to prep a lawn for spring",          desc: "Core aeration, thatch removal, overseeding.",                time: "1 wknd",      unit: "Total",        level: 2, tags: ["Seasonal", "Spring"] },
  { cat: "lawn", title: "How to aerate a lawn",                  desc: "Open the soil so water and roots can breathe.",            time: "3–4 hours",   unit: "Per 1K sqft", level: 2, tags: ["Soil", "Tool rental"] },
  { cat: "lawn", title: "How to overseed a lawn",                desc: "Fill bare spots before summer heat takes over.",            time: "2 hours",     unit: "Total",        level: 1, tags: ["Seed", "Spring"] },

  // Planting & beds
  { cat: "planting", title: "How to build a raised garden bed",  desc: "Four boards, good soil, better drainage.",                  time: "2 hours",     unit: "Per bed",      level: 1, tags: ["DIY", "Garden"] },
  { cat: "planting", title: "How to plant a tree",               desc: "Hole depth, root flare, mulch ring, first-year watering.",  time: "30 min",      unit: "Per tree",     level: 2, tags: ["Trees", "Permanent"] },
  { cat: "planting", title: "How to plant perennials",           desc: "Spacing, watering schedule, and when they actually fill in.", time: "1–2 hours",   unit: "Per bed",      level: 1, tags: ["Perennials", "Seasonal"] },

  // Edging & borders
  { cat: "edging", title: "How to edge a flower bed",            desc: "Sharp line between lawn and bed.",                         time: "30 min",      unit: "Per 50 ft",    level: 1, tags: ["Detail", "Landscape"] },
  { cat: "edging", title: "How to build a stone border",         desc: "Retaining wall basics for low borders.",                    time: "1 weekend",   unit: "Per 20 ft",    level: 3, tags: ["Stone", "Hardscape"] },

  // Irrigation
  { cat: "irrigation", title: "How to install drip irrigation",  desc: "Tape, soaker hoses, timers — water smarter.",              time: "1 afternoon", unit: "Per garden",   level: 2, tags: ["Water", "Timer"] },
  { cat: "irrigation", title: "How to fix a broken sprinkler head", desc: "The mid-summer crisis that's actually quick.",           time: "15 min",      unit: "Per head",     level: 1, tags: ["Fix", "Quick"] },
  { cat: "irrigation", title: "How to winterize an irrigation system", desc: "Drain and blow out before first frost.",          time: "2 hours",     unit: "Total",        level: 2, tags: ["Fall", "Seasonal"] },

  // Mulch
  { cat: "mulch", title: "How to mulch a yard properly",         desc: "Two inches. Not volcanoes. Never touching trunks.",        time: "1 Saturday",  unit: "Per yard",     level: 1, tags: ["Mulch", "Foundation"] },

  // Repair & maintenance
  { cat: "repair", title: "How to patch bare lawn",              desc: "Spot seeding for thin and damaged areas.",                 time: "45 min",      unit: "Per patch",    level: 1, tags: ["Quick fix", "Seasonal"] },
  { cat: "repair", title: "How to deal with lawn runoff",        desc: "Grading and drainage before water becomes a problem.",      time: "1 weekend",   unit: "Per slope",    level: 3, tags: ["Drainage", "Foundation"] },
];

const CATS = [
  { id: "all",        label: "All guides" },
  { id: "lawn",       label: "Lawn care" },
  { id: "planting",   label: "Planting & beds" },
  { id: "edging",     label: "Edging & borders" },
  { id: "irrigation", label: "Irrigation" },
  { id: "mulch",      label: "Mulch" },
  { id: "repair",     label: "Repair & maintenance" },
];

const MISTAKES = [
  {
    title: "Cutting grass too short triggers weeds and stress",
    body: "2.5 to 3 inches is the default. Too short exposes soil to heat, invites weed seeds, and stresses the plant. Taller grass shades out competition.",
    fix: "Mow at 2.5–3 inches every time. Don't scalp in spring or late fall.",
  },
  {
    title: "Mulch piled against tree trunks starts rot",
    body: "A mulch volcano keeps the trunk wet and invites insects and disease. Trees need air around the base. The mulch does its job away from the trunk.",
    fix: "Keep mulch 3–4 inches away from every trunk. Always.",
  },
  {
    title: "Planting outside your USDA zone is heartbreak",
    body: "You'll love the plant, it thrives for two summers, then winter kills it. You've spent years building affection for something the climate won't allow.",
    fix: "Know your zone (USDA 5, 6, 7...). Plant what survives your cold. Add heat-lovers once you know your microclimate.",
  },
  {
    title: "Watering at noon in July wastes 40% to heat",
    body: "The heat evaporates the water before it reaches roots. Plants drink when it's cool. Heat-stressed lawns need more water, creating a cycle.",
    fix: "Water at dawn or dusk. Set timers for 4–6 AM. The plant does the work while you sleep.",
  },
  {
    title: "Building raised beds on a slope without understanding runoff",
    body: "Your soil amendment washes downhill. The bed sits on clay and can't drain. Water pools and the whole thing fails.",
    fix: "Check slope. Build beds level or with slight internal slope away from plants. Understand where the water actually goes.",
  },
  {
    title: "Ignoring drainage when building borders and hardscape",
    body: "Water that doesn't move becomes a problem. You've changed the grading, created a basin, or blocked natural runoff.",
    fix: "Before you build, understand the yard's existing water flow. Grade away from structures. Test water movement after rain.",
  },
];

const TOOLS = [
  { name: "Self-propelled 21-inch mower",                 desc: "The workhorse. Walk-behind, cut height adjustable, pay for itself in three seasons.",                   price: "$300–$600" },
  { name: "Edger (not string trimmer — different tool)",  desc: "Sharp circular blade that separates lawn from bed. Lasts years, keeps edges crisp.",           price: "$80–$150" },
  { name: "Soil tester from county extension",            desc: "pH, nitrogen, phosphorus, potassium. $12–$25. Know what's actually there before you add anything.",  price: "$12–$25" },
  { name: "Hose-end sprayer for fertilizing",            desc: "Fertilize while you water. Saves a step. Works.",                                              price: "$15–$30" },
  { name: "Landscape fabric (under mulch, not top layer)", desc: "Blocks weeds, lets water through. Use it under mulch, not as a mulch substitute.",                price: "$20–$50" },
  { name: "Drip tape and soaker hoses",                  desc: "12 inches apart for annuals and vegetables, 18–24 inches for shrubs. Buy once, reuse.",           price: "$30–$80" },
  { name: "Mulch by the yard or bag",                    desc: "Two inches is the rule. Three cubic yards covers roughly 1,000 square feet.",                  price: "$30–$100/yard" },
  { name: "Wheelbarrow and good gloves",                 desc: "Move soil, move mulch, move rocks. Gloves that actually fit make the difference.",              price: "$50–$100" },
];

const COLOR_PICKS = [
  { name: "Moss green",     code: "LND-001", hex: "#5A6B47" },
  { name: "Terra mulch",    code: "LND-002", hex: "#8B6F47" },
  { name: "Limestone pale", code: "LND-003", hex: "#D4C8A8" },
];

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

          <div className="landscape-hero-grid">
            <h1>Mostly <em>weekend</em><br/>work.</h1>
            <div className="right-col">
              <p className="lede">
                Mowing, mulching, planting, simple beds — all yours. Hardscape and grading earn a phone call. Here's everything we know.
              </p>
            </div>
          </div>

          <div className="landscape-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>$0–$5K</em></span>
              <span className="l">Typical project range</span>
            </div>
            <div className="stat">
              <span className="n"><em>Year-round</em></span>
              <span className="l">Seasonal work</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="landscape-top5">
        <div className="wrap-wide">
          <div className="lede-row">
            <div className="left">
              <span className="label">The Editor's 5</span>
              <h2>Five projects, ranked <em>by what they're worth.</em></h2>
            </div>
            <div className="right">
              <p>If you only ever do five landscaping projects in your yard, do these. Ranked by transformation per dollar, per hour, and by season.</p>
            </div>
          </div>
          <div className="top5-grid">
            {TOP5.map(t => <Top5Card key={t.rank} item={t} />)}
          </div>
        </div>
      </section>

      {/* ASK IRIS SEARCH PROMPT */}
      <section className="landscape-search">
        <div className="wrap-wide">
          <div className="search-card">
            <h3>Looking for something else?</h3>
            <p><strong>Iris builds the guide on demand.</strong> Type what's in the yard — drainage problems, tree removal, a specific plant question, a hardscape project — and the AI engine generates the guide right now.</p>
            <div className="search-input">
              <input type="text" placeholder="What's your landscaping question?" />
              <button>Ask Iris</button>
            </div>
          </div>
        </div>
      </section>

      {/* THE MENU */}
      <section className="landscape-menu">
        <div className="wrap-wide">
          <div className="menu-head">
            <h2>Every landscaping 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.__setLandscapeCategory && window.__setLandscapeCategory(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="landscape-spectrum">
        <div className="wrap-wide spectrum-grid">
          <div className="when-diy">
            <span className="label">When this is DIY</span>
            <h3>The projects <em>you own.</em></h3>
            <ul>
              <li>Mowing the lawn</li>
              <li>Planting annuals and perennials</li>
              <li>Edging flower beds</li>
              <li>Applying mulch (two inches, not volcanoes)</li>
              <li>Installing drip irrigation</li>
              <li>Aeration and overseeding</li>
              <li>Building raised beds</li>
              <li>Basic landscape borders</li>
            </ul>
            <p style={{ marginTop: "20px", fontSize: "14px", color: "var(--ink-mute)" }}>These are all weekend work. The learning curve is gentle. You'll see mistakes immediately and fix them next season.</p>
          </div>
          <div className="when-pro">
            <span className="label">When you should call a pro</span>
            <h3>What earns <em>a phone call.</em></h3>
            <ul>
              <li>Retaining walls and hardscape</li>
              <li>Stone patios and permanent structures</li>
              <li>Tree removal</li>
              <li>Full re-grades and drainage systems</li>
              <li>Large-scale soil amendment</li>
              <li>Grading to protect the foundation</li>
              <li>Water routing and site engineering</li>
              <li>Licensed hardscape and grading work</li>
            </ul>
            <p style={{ marginTop: "20px", fontSize: "14px", color: "var(--ink-mute)" }}>Hardscape mistakes cost thousands to fix. Professionals have seen every drainage problem and know why things fail.</p>
          </div>
        </div>
      </section>

      {/* WHAT NOT TO DO */}
      {showMistakes && (
      <section className="landscape-mistakes">
        <div className="wrap-wide">
          <div className="mistakes-head">
            <span className="label">What not to do</span>
            <h2>Six mistakes <em>everyone makes.</em></h2>
            <p>We've made every one of these. Some twice. Save yourself the second season of watching something die and the third trip to the garden center.</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="landscape-tools">
        <div className="wrap-wide tools-grid">
          <div className="left">
            <span className="label">Tools we actually use</span>
            <h2>Eight things, <em>nothing more.</em></h2>
            <p>The landscape aisle is full of gadgets that promise the world. This is the kit that actually stays in your shed and gets reached for every season.</p>
            <div className="pull">
              &ldquo;A good mower and an edger. That's the whole job. Everything else is technique.&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>
      )}

      {/* CONTRIBUTORS */}
      <section className="landscape-contributors">
        <div className="wrap-wide">
          <span className="label">The people behind this</span>
          <h2>Four voices, <em>four perspectives.</em></h2>
          <div className="contributor-grid">
            <div className="contributor">
              <div className="avatar" style={{ background: "#8B6F47" }}></div>
              <h4>Marcus Webb</h4>
              <p className="location">Columbus, Ohio</p>
              <p className="bio">Trade contractor. Names the problem first, then numbered steps. His articles end with a maintenance cadence.</p>
              <p className="credits">Common Landscaping Repairs · 9 min</p>
            </div>
            <div className="contributor">
              <div className="avatar" style={{ background: "#5A6B47" }}></div>
              <h4>Dana Cole</h4>
              <p className="location">Austin, Texas</p>
              <p className="bio">Landscape designer. Opinion-led, names specific plants and materials with budget ranges.</p>
              <p className="credits">Modern Landscape Design · 10 min</p>
            </div>
            <div className="contributor">
              <div className="avatar" style={{ background: "#D4C8A8" }}></div>
              <h4>Ray Torres</h4>
              <p className="location">Phoenix, Arizona</p>
              <p className="bio">Building inspector, former contractor. Checklist format, calm and clear. Catches problems before they fail.</p>
              <p className="credits">Landscaping Safety Checklist · 7 min</p>
            </div>
            <div className="contributor">
              <div className="avatar" style={{ background: "#7E8F5E" }}></div>
              <h4>Iris</h4>
              <p className="location">Editor's Pick</p>
              <p className="bio">The AI engine. Authoritative, instructional, responsive to what you're asking about right now.</p>
              <p className="credits">How to Prep a Lawn for Spring</p>
            </div>
          </div>
        </div>
      </section>

      {/* COLOR OF THE MOMENT */}
      {showColor && (
      <section className="color-moment">
        <div className="wrap-wide color-moment-inner">
          <div>
            <span className="label">Landscape palette</span>
            <h2>Three colors that <em>stay green.</em></h2>
            <p>The colors you actually live with — moss where the shade keeps it cool, mulch tones that age beautifully, limestone that weathers over ten years.</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-1467043237100-faf8f38e6c79?w=1200&q=80)" }}/>
            <div className="stamp">Moss green · shade-tolerant</div>
            <div className="badge">
              <div className="t">Native sedge grass for understory planting</div>
              <div className="m">SEED · $25–$40 · Spreads naturally</div>
            </div>
          </div>
        </div>
      </section>
      )}

      {/* SISTER TRADES */}
      <section className="landscape-sisters">
        <div className="wrap-wide">
          <span className="label">Related trades</span>
          <h2>When landscaping <em>touches other trades.</em></h2>
          <div className="sister-links">
            <a href="/en/trades/painting/">Painting</a>
            <a href="/en/trades/handyman/">Handyman</a>
            <a href="/en/trades/pest-control/">Pest Control</a>
            <a href="/en/trades/plumbing/">Plumbing</a>
            <a href="/en/trades/roofing/">Roofing</a>
            <a href="/en/trades/hvac/">HVAC</a>
            <a href="/en/trades/electrical/">Electrical</a>
            <a href="/en/trades/general-contracting/">General Contracting</a>
            <a href="/en/trades/">All Trades</a>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Landscaping = Landscaping;