/* global React */
const { useEffect, useRef, useState } = React;

/* ---------- tiny inline icons (used sparingly) ---------- */
function AndroidGlyph({ cls = "ico" }) {
  return (
    <svg className={cls} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path d="M5 9.5C5 8.7 5.7 8 6.5 8h11c.8 0 1.5.7 1.5 1.5V17a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V9.5Z" fill="currentColor" opacity="0.95" style={{ fill: "rgb(35, 54, 17)" }} />
      <path d="M7 8 5.6 5.7M17 8l1.4-2.3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
      <circle cx="9" cy="6.4" r="0.7" fill="var(--accent-ink)" />
      <circle cx="15" cy="6.4" r="0.7" fill="var(--accent-ink)" />
      <rect x="3.2" y="10" width="2" height="6" rx="1" fill="currentColor" />
      <rect x="18.8" y="10" width="2" height="6" rx="1" fill="currentColor" />
      <rect x="8" y="18" width="2" height="4" rx="1" fill="currentColor" />
      <rect x="14" y="18" width="2" height="4" rx="1" fill="currentColor" />
    </svg>);

}

/* ---------- reveal-on-scroll hook ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      els.forEach((e) => e.classList.add("in"));
      return;
    }
    const io = new IntersectionObserver(
      (ents) => ents.forEach((en) => {if (en.isIntersecting) {en.target.classList.add("in");io.unobserve(en.target);}}),
      { threshold: 0.16 }
    );
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);
}

/* =====================================================================
   HERO  — patchy / early stage
===================================================================== */
function Hero({ layout, onDownload }) {
  return (
    <header className={"hero hero--" + layout} data-screen-label="Hero">
      <div className="hero__top wrap">
        <a className="brand" href="#top" aria-label="Grassara home">
          <img className="brand__icon" src="assets/mark-transparent.png" alt="" aria-hidden="true" />
          <span className="brand__name">Grassara</span>
        </a>
        <nav className="hero__nav" aria-label="Primary">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
        </nav>
        <a className="btn btn--ghost hero__nav-cta" href="#download" onClick={onDownload}>
          Early access
        </a>
      </div>

      <div className="hero__body wrap">
        <div className="hero__copy reveal in">
          <p className="eyebrow" style={{ fontSize: "14px", padding: "2px 0px 0px" }}>BUILT FOR DIY LAWN CARE —</p>
          <h1 className="display" style={{ maxWidth: "600px" }}>Know what your lawn needs next.<br /></h1>
          <p className="lede hero__lede" style={{ maxWidth: "500px" }}>Track lawn tasks, photos, problem areas, and weather — then see what’s working zone by zone.

          </p>
          <div className="hero__actions">
            <a className="btn btn--primary" href="#download" id="download" onClick={onDownload} style={{ opacity: "1", color: "rgb(30, 46, 14)" }}>
              Get early access
            </a>
            <span className="hero__soon">Coming soon to Android</span>
          </div>
        </div>
      </div>

      <div className="hero__scroll" aria-hidden="true">
        <span className="hero__scroll-line"></span>
      </div>
    </header>);

}

/* =====================================================================
   PROBLEM  — early growth
===================================================================== */
function Problem() {
  const lines = [
  "What did I apply, and when?",
  "What did this look like last month?",
  "Am I watering enough?",
  "Why does this one spot keep coming back?"];

  return (
    <section className="section section--scrim" data-screen-label="The problem">
      <div className="wrap problem">
        <div className="problem__intro reveal">
          <p className="eyebrow">The gap</p>
          <h2 className="h2">You're doing the work.<br />You're just not keeping the receipts.</h2>
          <p className="lede">DIY homeowners water, seed, mow, fertilize, and treat — but rarely track what they did or whether it helped. So key data gets forgotten.


          </p>
        </div>
        <ul className="problem__list">
          {lines.map((l, i) =>
          <li className="problem__q reveal" style={{ transitionDelay: i * 70 + "ms" }} key={i}>
              <span className="problem__quote">“</span>
              <span>{l}</span>
            </li>
          )}
        </ul>
      </div>
    </section>);

}

/* =====================================================================
   FEATURES  — mid growth
===================================================================== */
function Features() {
  const feats = [
  { n: "01", t: "Personalized Recommendations", slot: "shot-weather", cap: "Weather plan screen", d: "Get timely suggestions to water more, skip irrigation after rain, or apply treatments like pre-emergent at the right time." },
  { n: "02", t: "Problem Area Tracking", slot: "shot-problem", cap: "Problem area screen", d: "Mark trouble spots, add photos, and monitor progress over time as each area is treated." },
  { n: "03", t: "Map Your Lawn From Above", slot: "shot-zones", cap: "Zones screen", d: "Trace your lawn zones on a satellite view, then track mowing, watering, and seasonal tasks for each area — all in one plan." },
  { n: "04", t: "Moisture Monitoring", slot: "shot-moisture", cap: "Moisture screen", d: "Track watering, rainfall, and daily moisture loss so you know when your lawn needs water — and when to skip it." }];

  const [active, setActive] = useState(0);
  const [paused, setPaused] = useState(false);

  // Gentle auto-advance until the visitor takes over.
  useEffect(() => {
    if (paused) return undefined;
    const id = setInterval(() => setActive((a) => (a + 1) % feats.length), 4200);
    return () => clearInterval(id);
  }, [paused, feats.length]);

  const pick = (i) => {setActive(i);setPaused(true);};

  return (
    <section className="section section--scrim" id="features" data-screen-label="Core features">
      <div className="wrap features">
        <div className="features__head reveal">
          <p className="eyebrow">What Grassara does</p>
          <h2 className="h2" style={{ maxWidth: "440px" }}>Your lawn, finally organized.</h2>
        </div>
        <div className="features__grid">
          <div className="features__phone reveal">
            <div className="phone">
              <div className="phone__notch" aria-hidden="true"></div>
              <div className="phone__screen phone__screen--gallery">
                {feats.map((f, i) =>
                <div className={"feat-shot" + (i === active ? " feat-shot--on" : "")} key={f.slot} aria-hidden={i !== active}>
                    <image-slot
                    id={f.slot}
                    shape="rect"
                    fit="cover"
                    placeholder={"Drop " + f.cap}></image-slot>
                  </div>
                )}
              </div>
            </div>
            <div className="features__dots" role="tablist" aria-label="App screens">
              {feats.map((f, i) =>
              <button
                key={f.slot}
                className={"features__dot" + (i === active ? " is-on" : "")}
                role="tab"
                aria-selected={i === active}
                aria-label={f.t}
                onClick={() => pick(i)}></button>
              )}
            </div>
          </div>
          <ul className="features__list">
            {feats.map((f, i) =>
            <li
              className={"feature panel feature--pick" + (i === active ? " feature--active" : "")}
              key={f.n}
              role="button"
              tabIndex={0}
              aria-pressed={i === active}
              onClick={() => pick(i)}
              onMouseEnter={() => pick(i)}
              onKeyDown={(e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();pick(i);}}}>
                <span className="feature__n">{f.n}</span>
                <div>
                  <h3 className="feature__t">{f.t}</h3>
                  <p className="feature__d muted">{f.d}</p>
                </div>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

/* =====================================================================
   HOW IT WORKS  — greener stage
===================================================================== */
function HowItWorks() {
  const steps = [
  { n: "01", t: "Track", d: "Everything for your lawn: when you water, mow, fertilize, and how much it rained the past 2 days" },
  { n: "02", t: "Adjust", d: "Get weather and context inspired adjustments to help you take next steps." },
  { n: "03", t: "Review", d: "Watch each zone change over time and learn what actually worked." }];

  return (
    <section className="section section--scrim" id="how" data-screen-label="How it works">
      <div className="wrap how">
        <div className="how__head reveal">
          <p className="eyebrow">How it works</p>
          <h2 className="h2">Three steps. Then repeat.</h2>
        </div>
        <ol className="how__steps">
          {steps.map((s, i) =>
          <li className="step reveal" style={{ transitionDelay: i * 90 + "ms" }} key={s.n}>
              <span className="step__n">{s.n}</span>
              <h3 className="step__t">{s.t}</h3>
              <p className="step__d muted">{s.d}</p>
            </li>
          )}
        </ol>
      </div>
    </section>);

}

/* =====================================================================
   FINAL CTA  — lush golden hour
===================================================================== */
function FinalCTA({ onDownload }) {
  return (
    <section className="section section--scrim final" data-screen-label="Final CTA">
      <div className="wrap final__inner reveal">
        <p className="eyebrow">NO PRODUCT PUSHING, ONLY YOUR DATA</p>
        <h2 className="display final__h">Your lawn gets better<br />when you stop guessing.</h2>
        <p className="lede final__lede">Join Grassara and start building your lawn's history .

        </p>
        <a className="btn btn--primary final__btn" href="#download" onClick={onDownload} style={{ color: "rgb(35, 54, 17)" }}>
          Get early access
        </a>
      </div>
      <footer className="footer wrap">
        <div className="footer__brandrow">
          <span className="brand brand--sm"><img className="brand__icon" src="assets/mark-transparent.png" alt="" aria-hidden="true" loading="lazy" decoding="async" /><span className="brand__name">Grassara</span></span>
          <span className="footer__tag muted">Track your lawn. Trust the data.</span>
        </div>
        <nav className="footer__links" aria-label="Footer">
          <a href="#features">Features</a>
          <a href="#how">How it works</a>
          <a href="privacy.html" data-legal="privacy">Privacy</a>
          <a href="terms.html" data-legal="terms">Terms</a>
          <a href="mailto:hello@grassara.app" data-legal="contact">Contact</a>
          <a href="mailto:admin@grassara.app" data-legal="support">Support</a>
        </nav>
        <span className="footer__copy muted">© 2026 Grassara</span>
      </footer>
    </section>);

}

/* ---------- sticky download bar ---------- */
function StickyCTA({ show, onDownload }) {
  return (
    <div className={"sticky-cta" + (show ? " sticky-cta--show" : "")}>
      <span className="sticky-cta__txt">
        <strong>Grassara</strong><span className="muted"> — stop guessing what your lawn needs</span>
      </span>
      <a className="btn btn--primary sticky-cta__btn" href="#download" onClick={onDownload} style={{ color: "rgb(39, 61, 20)" }}>
        Get access
      </a>
    </div>);

}

Object.assign(window, {
  AndroidGlyph, useReveal, Hero, Problem, Features, HowItWorks, FinalCTA, StickyCTA
});