/* top.jsx — Nav, Hero, Insight strip, How-it-works loop */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <a href="#top" aria-label="Gen Coach home"><Logo /></a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#try">Try it</a>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="nav-cta">
          <a className="login" href="https://gencoach.app/login">Log in</a>
          <a className="btn btn-primary" href="https://gencoach.app">Start your first plan</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ headline, sub }) {
  return (
    <header className="hero" id="top">
      <div className="hero-glow" />
      <div className="wrap">
        <div className="hero-pill" data-reveal>
          <span className="tag">New</span>
          <span>Plan&nbsp;→ score → execute → accompany, in one loop</span>
        </div>
        <h1 data-reveal data-delay="1" dangerouslySetInnerHTML={{ __html: headline }} />
        <p className="lede" data-reveal data-delay="2">{sub}</p>
        <div className="hero-cta" data-reveal data-delay="2">
          <a className="btn btn-primary btn-lg" href="https://gencoach.app">Start your first plan <Icon.arrow /></a>
          <a className="btn btn-ghost btn-lg" href="#how">See how it works</a>
        </div>
        <div className="hero-trust" data-reveal data-delay="3">
          <span>Try free — no credit card required</span>
          <span className="dot" />
          <span>30 free credits to start</span>
          <span className="dot" />
          <span>Cancel anytime</span>
        </div>

        <div className="shot" data-reveal>
          <div className="shot-bar">
            <span className="dot" /><span className="dot" /><span className="dot" />
            <span className="addr">gencoach.app/dashboard</span>
          </div>
          <img src="assets/dashboard.png" alt="Gen Coach strategic dashboard" />
          <div className="shot-fade" />
        </div>

        <div className="hero-logos" data-reveal>
          <div className="label">Frameworks, operationalized — not just referenced</div>
          <div className="logo-row">
            <span className="chip">Atomic Habits</span>
            <span className="chip">OKRs</span>
            <span className="chip">Deep Work</span>
            <span className="chip">GTD</span>
            <span className="chip">Stoic</span>
            <span className="chip">JTBD</span>
          </div>
        </div>
      </div>
    </header>
  );
}

function Insight() {
  return (
    <section className="insight">
      <div className="wrap wrap-narrow">
        <p className="eyebrow no-rule muted" style={{ marginBottom: 22 }} data-reveal>The real problem</p>
        <p className="big" data-reveal data-delay="1">
          You don't have a goals problem.<br />
          <span className="dim">You have a follow-through problem.</span>
        </p>
        <p className="sub" data-reveal data-delay="2">
          Books give you theory. ChatGPT gives you one-off answers. Habit trackers count streaks.
          None of them stay with you through the messy middle — where most goals quietly die.
        </p>
      </div>
    </section>
  );
}

const STEPS = [
  {
    n: "01", kick: "Plan", title: "Turn a vague ambition into a real plan",
    desc: "Describe your goal in plain language. Gen Coach drafts a two-part plan — Part A strategy, Part B execution — so you start with structure, not a blank page.",
    visual: (
      <div className="mini">
        <div className="row"><span className="bdot" style={{ background: "var(--accent)" }} /> Strategy — the why & what</div>
        <div className="row"><span className="bdot" style={{ background: "var(--green)" }} /> Execution — the first concrete steps</div>
        <div className="row"><span className="bdot" style={{ background: "var(--amber)" }} /> Milestones with dates attached</div>
      </div>
    ),
  },
  {
    n: "02", kick: "Score", title: "Get a quality score, not just an answer",
    desc: "Every plan is scored for context clarity and strategy quality. The score forces rigor — and teaches you to set sharper goals over time. No other tool does this.",
    visual: (
      <div className="mini mini-score">
        <span className="num">94</span>
        <div className="mini-bars">
          <div className="bar"><i style={{ width: "78%", background: "var(--blue)" }} /></div>
          <div className="bar"><i style={{ width: "90%", background: "var(--accent)" }} /></div>
        </div>
      </div>
    ),
  },
  {
    n: "03", kick: "Execute", title: "Schedule the work, then actually do it",
    desc: "Drag tasks onto a calendar, batch them into focused sprints, and check them off. Your plan becomes a week you can see — not a wish you forget.",
    visual: (
      <div className="mini">
        <div className="row"><Icon.check style={{ color: "var(--green)" }} /> Draft outreach message</div>
        <div className="row"><Icon.check style={{ color: "var(--green)" }} /> Set up landing page</div>
        <div className="row" style={{ color: "var(--faint)" }}><span className="bdot" style={{ border: "1.5px solid var(--line)", background: "transparent" }} /> List 3 competitors</div>
      </div>
    ),
  },
  {
    n: "04", kick: "Accompany", title: "A coach that remembers you, every day",
    desc: "Your AI coach knows your goals, context, and working style from day one. It checks in, nudges gently when you stall, and adapts — warm, sharp, never preachy.",
    visual: (
      <div className="mini">
        <div className="row" style={{ alignItems: "flex-start" }}>
          <Icon.chat style={{ color: "var(--accent)", marginTop: 2, flex: "none" }} />
          <span style={{ color: "var(--ink-soft)" }}>“Got 10 minutes for your plan today? Let's tackle the outreach step.”</span>
        </div>
      </div>
    ),
  },
];

function HowItWorks() {
  const trackRef = React.useRef(null);
  const wrapRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const el = wrapRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height;
      const progressed = Math.min(Math.max(vh * 0.65 - r.top, 0), total);
      const pct = total > 0 ? (progressed / total) * 100 : 0;
      if (trackRef.current) trackRef.current.style.setProperty("--p", pct + "%");
    };
    onScroll(); window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, []);
  return (
    <section className="sec" id="how">
      <div className="wrap">
        <div className="sec-head center" style={{ marginBottom: 64 }}>
          <p className="eyebrow" data-reveal>The closed loop</p>
          <h2 data-reveal data-delay="1">Most tools stop at step one.<br />Gen Coach closes the whole loop.</h2>
          <p className="lede" data-reveal data-delay="2">Plan, score, execute, accompany — the full path from intention to done, in one calm, coherent flow.</p>
        </div>
        <div className="loop" ref={wrapRef}>
          <div className="loop-track" ref={trackRef}><div className="fill" /></div>
          <div className="steps">
            {STEPS.map((s) => (
              <RevealStep key={s.n} s={s} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function RevealStep({ s }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }, { threshold: 0.55 });
    if (ref.current) io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return (
    <div className={"step" + (seen ? " in-view" : "")} ref={ref}>
      <div className="card">
        <span className="kicker">{s.kick}</span>
        <h3>{s.title}</h3>
        <p>{s.desc}</p>
      </div>
      <div className="node">{s.n}</div>
      <div className="visual">{s.visual}</div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, Insight, HowItWorks });