/* ============================================================
   Public screens: Marketing landing, Tract detail, Sign-in
   ============================================================ */

const { useState: usePub } = React;

/* ---------- Public nav ---------- */
const PublicNav = ({ onStart, onGo }) => (
  <nav className="public-nav">
    <div className="inner">
      <Lockup onClick={() => onGo('landing')} />
      <div className="links">
        <a onClick={() => onGo('landing')}>Tracts</a>
        <a onClick={() => onGo('landing')}>How it works</a>
        <a onClick={() => onGo('landing')}>Coach Mike</a>
        <a onClick={() => onGo('landing')}>FAQ</a>
      </div>
      <div className="right">
        <button className="btn btn-ghost sm" onClick={() => onGo('auth')}>Sign in</button>
        <button className="btn btn-primary" onClick={onStart}>
          Start with L1 <Ico d={I.arrowRight} size={16} />
        </button>
      </div>
    </div>
  </nav>
);

/* ---------- Footer (shared with public shell) ---------- */
const PublicFooter = () => (
  <footer className="pm-footer">
    <div className="container">
      <div className="grid">
        <div>
          <Lockup onDark />
          <p style={{ marginTop: 18 }}>
            A 501(c)(3) nonprofit teaching every rider — anywhere — to ride
            with control, confidence, and the 3 Ps.
          </p>
        </div>
        <div>
          <h4>Tracts</h4>
          <ul>
            <li><a>L1 · Learn to Pedal</a></li>
            <li><a>L2 · Rookie</a></li>
            <li><a>L3 · Novice</a></li>
            <li><a>L4 · Intermediate</a></li>
            <li><a>L5 · Advanced</a></li>
            <li><a>L6 · Trail</a></li>
            <li><a>The full journey bundle</a></li>
          </ul>
        </div>
        <div>
          <h4>Mission</h4>
          <ul>
            <li><a>About Pedaling Minds</a></li>
            <li><a>Scholarship program</a></li>
            <li><a>Coach Mike's story</a></li>
            <li><a>Donate</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a>hello@pedalingminds.org</a></li>
            <li><a>Boulder, Colorado</a></li>
            <li><a>Instagram · Facebook</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Pedaling Minds · 501(c)(3) Tax ID 46-4630251</span>
        <span>Practice · Patience · Perseverance</span>
      </div>
    </div>
  </footer>
);

/* ---------- Screen 1: Marketing landing ---------- */
const Landing = ({ onStart, onGo }) => {
  const [openFaq, setOpenFaq] = usePub(0);
  const faqs = [
    { q: "What do we need to start?", a: "A bike that fits your rider, a helmet, and roughly 20 minutes a day. Pedals can come off and back on — we'll walk you through it." },
    { q: "How long does each tract take?", a: "Most families finish a tract in 1–2 weeks of short, regular sessions. There's no clock. You pace it to your rider." },
    { q: "What if my rider is stuck?", a: "Submit a 30-second clip via Ask Coach Mike — a coach responds within 48–72 hours with exactly what to adjust." },
    { q: "Can I get a refund?", a: "Yes. 30 days, no questions. If your rider isn't progressing, you didn't pay for it." }
  ];
  const tracts = [
    { lvl: 1, title: "Learn to Pedal", outcome: "Your rider goes from no experience to short rides on flat ground.", time: "Most parents finish in 1–2 weeks." },
    { lvl: 2, title: "Rookie",         outcome: "Pedal, turn, stop on command — and choose to ride.", time: "Most parents finish in 1–2 weeks." },
    { lvl: 3, title: "Novice",         outcome: "Confident on paths. Family rides on the calendar.", time: "1–2 weeks." },
    { lvl: 4, title: "Intermediate",   outcome: "Group riding, hand signals, first quiet roads.", time: "About 2 weeks." },
    { lvl: 5, title: "Advanced",       outcome: "Dirt, rocks, and short climbs with control.", time: "2–3 weeks." },
    { lvl: 6, title: "Trail",          outcome: "A 10-mile family ride your rider will remember.", time: "3–4 weeks." }
  ];

  return (
    <div className="public-shell page-enter">
      <PublicNav onStart={onStart} onGo={onGo} />

      {/* Hero */}
      <section className="hero-marketing">
        <div className="photo-overlay"></div>
        <div className="inner">
          <div className="copy">
            <div className="hero-pill">
              <span className="dot"></span>
              The Pedaling Minds method, now at home
            </div>
            <h1 className="hero-display">
              Teach your rider<br/>to ride — from<br/><span className="accent">anywhere.</span>
            </h1>
            <p className="hero-kicker">
              The same playbook our coaches use at camp, broken down into video drills
              you can run in your driveway, your park, or your cul-de-sac. Built on
              the 3 P method: Practice, Patience, Perseverance.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary lg" onClick={onStart}>
                Start with L1 — $79 <Ico d={I.arrowRight} size={18} />
              </button>
              <button className="btn btn-on-dark lg">See how it works</button>
            </div>
            <div className="hero-pips">
              <span>Built on the curriculum of a 2008 Olympian</span>
              <span className="sep">·</span>
              <span>2,000+ kids taught in person since 2014</span>
              <span className="sep">·</span>
              <span>501(c)(3) nonprofit · Boulder, CO</span>
            </div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section className="section">
        <div className="container">
          <span className="eyebrow">How it works</span>
          <h2 className="h2" style={{ marginTop: 8 }}>Three things. No guesswork.</h2>
          <div className="how-grid">
            <div className="how-card">
              <span className="eyebrow">01 · Pick a tract</span>
              <h3>Pick where your rider is today.</h3>
              <p>Six tracts, one per level — from total beginner to multi-mile trail. Buy the one you need; come back for the next when your rider's ready.</p>
            </div>
            <div className="how-card b">
              <span className="eyebrow blue">02 · Watch + run the drill</span>
              <h3>Coach Mike shows you. Then you run it.</h3>
              <p>Every drill is a short video (3–6 minutes) plus a printable drill card for the park. No prep. No guessing what to say next.</p>
            </div>
            <div className="how-card g">
              <span className="eyebrow" style={{ color: 'var(--pm-grass-600)' }}>03 · Ask a coach when you're stuck</span>
              <h3>Send a 30-second clip when something's off.</h3>
              <p>Submit a video and a question; a coach gets back to you within 48–72 hours with exactly what to adjust. It's like having Coach Mike on speed dial.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Six tracts */}
      <section className="section snow">
        <div className="container">
          <span className="eyebrow">Where does my rider fit?</span>
          <h2 className="h2" style={{ marginTop: 8 }}>Six levels. One ladder.</h2>
          <p className="lede" style={{ marginTop: 12, maxWidth: 680 }}>
            Every rider gets placed — and every step earns the next one. You only buy the levels you need.
          </p>
          <div className="tracts-grid">
            {tracts.map(t => (
              <div key={t.lvl} className={"tract-card lvl" + t.lvl} onClick={t.lvl === 1 ? onStart : undefined}>
                <div className="chip">L{t.lvl}</div>
                <h3>{t.title}</h3>
                <p className="outcome">{t.outcome}</p>
                <div className="price-row">
                  <span>$79</span>
                  <span className="duration">{t.time}</span>
                </div>
                <span className="see">See what's inside →</span>
              </div>
            ))}
          </div>

          <div className="bundle-strip">
            <div>
              <div className="label">Bundle · L1 → L6</div>
              <h3>The full journey — $399</h3>
              <p>From the first wheel spin to a 10-mile trail ride. All six tracts, one price. The same arc our in-person camp riders walk in six years, on your family's schedule.</p>
            </div>
            <button className="btn btn-on-dark lg">See bundles →</button>
          </div>
        </div>
      </section>

      {/* Coach Mike */}
      <section className="section">
        <div className="container">
          <div className="coach-section">
            <div className="coach-photo">
              <div className="olympian-pill">2008 Olympian</div>
            </div>
            <div className="body">
              <span className="eyebrow">Meet Coach Mike</span>
              <h2 className="h2" style={{ marginTop: 8 }}>Built on a curriculum a 2008 Olympian could stand behind.</h2>
              <p className="lede" style={{ marginTop: 20 }}>
                Mike Friedman raced bikes professionally for a decade. In 2014 he started Pedaling Minds in Boulder.
                Since then, his coaches have taught over 2,000 kids in person. Pedaling Minds At Home is the same
                method — every drill, every cue, every "watch for" — broken down for the parent who can't drive to
                Colorado this summer.
              </p>
              <div className="quote">
                "Every child deserves that 'I did it!' moment — and too many never get the chance."
              </div>
              <div className="sig">— Coach Mike Friedman</div>
              <div className="sig-sub">Founder + Director of Programming, Pedaling Minds</div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission strip */}
      <section className="section tight snow">
        <div className="container">
          <div className="mission-strip">
            <h3>Why "At Home" exists.</h3>
            <p>
              Our in-person camps reach 450 riders a year. Pedaling Minds At Home exists for the families who can't
              drive to one — across the country, across the world, in the months between camps. Every purchase keeps
              our scholarship program funded. 33% of riders at our in-person camps attend on scholarship — and that's
              because of this program.
            </p>
            <a className="btn btn-link" style={{ marginTop: 16, display: 'inline-flex' }}>
              Read about our access program →
            </a>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section tight">
        <div className="container">
          <div style={{ textAlign: 'center' }}>
            <span className="eyebrow">FAQ</span>
            <h2 className="h2" style={{ marginTop: 8 }}>Common questions.</h2>
          </div>
          <div className="faq-list">
            {faqs.map((f, i) => (
              <div key={i} className={"faq-item " + (openFaq === i ? "open" : "")}>
                <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                  <span>{f.q}</span>
                  <span className="plus">+</span>
                </button>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <PublicFooter />
    </div>
  );
};

/* ---------- Screen 2: Tract detail ---------- */
const TractDetail = ({ onBuy, onGo }) => {
  const modules = [
    {
      id: "L1.1", title: "Get comfortable on the bike",
      sub: "The rider builds a relationship with the bike before it moves.",
      drills: [
        "Wheel Speed Demo", "Stand the Bike Up / Lay It Down",
        "Get On and Off the Bike", "Lean and Catch",
        "Overturning Handlebars", "Stationary Balance", "Handbrake Intro"
      ]
    },
    {
      id: "L1.2", title: "Walk the bike",
      sub: "Build forward motion with feet on the ground, eyes up.",
      drills: [
        "Walk the Bike: Slow", "Eyes Forward",
        "Slow Zig Zag", "Lean & Turn + One Leg Scoot",
        "Look Through the Turn", "Walk the Bike: Faster"
      ]
    },
    {
      id: "L1.3", title: "Coasting",
      sub: "Feet off the ground. Balance carries the bike.",
      drills: ["Beginner Steps", "Feet Up", "Turning", "Steering"]
    },
    {
      id: "L1.4", title: "First Pedals",
      sub: "Install the pedals. Start. Stop. Brake.",
      drills: [
        "Install Pedals (knowledge)", "Find the Pedals", "Walk with Pedals",
        "Pedal Start: 3 Ways", "Coasting with Pedals: Feet Up",
        "Braking with Pedals", "Braking with Handbrakes"
      ]
    }
  ];

  return (
    <div className="public-shell page-enter">
      <PublicNav onStart={onBuy} onGo={onGo} />

      {/* Hero */}
      <section className="tract-detail-hero">
        <div className="container">
          <div className="tract-detail-grid">
            <div className="left">
              <span className="eyebrow muted">Tracts · Level 1</span>
              <div className="chip-l">L1</div>
              <h1>Learn to Pedal.</h1>
              <h2>From no experience to a real first ride.</h2>
              <p className="body">
                L1 is the tract that turns "I can't" into a kid riding away from you.
                Designed for riders with no experience, training-wheel riders making the jump to two wheels,
                and balance-bike kids ready to add pedals. You'll cover four modules and graduate with a real ride.
              </p>

              <div className="outcome-card">
                <span className="eyebrow blue">What "graduating L1" looks like</span>
                <p className="text" style={{ margin: '8px 0 0' }}>
                  Your rider mounts the bike, pushes off, pedals at least 50 feet, and stops cleanly.
                  They do it on their own and ask to do it again.
                </p>
              </div>

              <div className="price-block">
                <span className="price">$79</span>
                <span className="price-sub">One-time purchase. Yours forever. 30-day refund.</span>
                <div style={{ display: 'flex', gap: 12, marginTop: 8, flexWrap: 'wrap' }}>
                  <button className="btn btn-primary lg" onClick={onBuy}>
                    Buy this tract <Ico d={I.arrowRight} size={18} />
                  </button>
                </div>
                <a className="add-bundle">+ Add to bundle: L1 + L2 for $139</a>
              </div>
            </div>

            <div className="right">
              <div className="video-thumb">
                <div className="free-pill">Free preview</div>
                <div className="play-btn"><Ico d={I.play} size={32} stroke={0} /></div>
                <div className="caption-strip">
                  <div className="ttl">Sample drill · L1.1A</div>
                  <div>Wheel Speed Demo · 4:32 · Free preview</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Inside L1 */}
      <section className="section">
        <div className="container">
          <span className="eyebrow">What's inside</span>
          <h2 className="h2" style={{ marginTop: 8 }}>Four modules. One graduation ride.</h2>
          <div className="module-grid">
            {modules.map(m => (
              <div key={m.id} className="module-card">
                <div className="head">
                  <span className="id">Module {m.id}</span>
                  <h3>{m.title}</h3>
                </div>
                <p className="sub">{m.sub}</p>
                <div className="drills">
                  {m.drills.map((d, i) => <span key={i}>{d}</span>)}
                </div>
              </div>
            ))}
            <div className="module-card" style={{ background: 'var(--pm-blue-100)', borderTop: '4px solid var(--pm-blue-600)' }}>
              <div className="head">
                <span className="id" style={{ color: 'var(--pm-blue-700)' }}>Graduation Ride</span>
                <h3>Your rider rides — on their own.</h3>
              </div>
              <p className="sub" style={{ margin: 0 }}>
                Your rider mounts, pedals 50+ feet, turns, and stops — on their own. Then you film it, post it,
                and we send a digital "L1 graduate" certificate.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Who is/isn't */}
      <section className="section tight snow">
        <div className="container">
          <div className="who-for">
            <div className="card">
              <h4>L1 is right for…</h4>
              <ul>
                <li className="yes"><span className="mark">✓</span><span>A 4–8 year old who has never pedaled.</span></li>
                <li className="yes"><span className="mark">✓</span><span>A rider who's stuck on training wheels and ready to commit.</span></li>
                <li className="yes"><span className="mark">✓</span><span>A balance-bike rider ready to add pedals.</span></li>
                <li className="yes"><span className="mark">✓</span><span>An adult learner starting from zero (yes — works the same).</span></li>
              </ul>
            </div>
            <div className="card">
              <h4>L1 is <em>not</em> right for…</h4>
              <ul>
                <li className="no"><span className="mark">×</span><span>A rider who already pedals confidently — start with L2.</span></li>
                <li className="no"><span className="mark">×</span><span>A rider afraid of the bike itself — start with our free Coach moments for "Fear."</span></li>
                <li className="no"><span className="mark">×</span><span>Riders under 3 — we recommend a balance bike for 18 months–3.</span></li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Included strip */}
      <section className="section tight">
        <div className="container">
          <span className="eyebrow">What's included with L1</span>
          <div className="included-strip" style={{ marginTop: 24 }}>
            <div className="item">
              <span className="check">✓</span>
              <div><strong>24 drill videos</strong>with on-screen cues</div>
            </div>
            <div className="item">
              <span className="check">✓</span>
              <div><strong>24 printable drill cards</strong>downloadable PDF for the park</div>
            </div>
            <div className="item">
              <span className="check">✓</span>
              <div><strong>Coach Q&A submissions</strong>up to 5 included with L1</div>
            </div>
            <div className="item">
              <span className="check">✓</span>
              <div><strong>Lifetime access</strong>30-day refund, no questions</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA band */}
      <section className="section tight">
        <div className="container">
          <div className="cta-band">
            <h3>Start L1 today. Have your rider riding by next weekend.</h3>
            <div className="ctas">
              <button className="btn btn-primary lg" onClick={onBuy}>
                Buy L1 — $79 <Ico d={I.arrowRight} size={18} />
              </button>
              <button className="btn btn-on-dark lg">Or get the L1+L2 bundle for $139 →</button>
            </div>
          </div>
        </div>
      </section>

      <PublicFooter />
    </div>
  );
};

/* ---------- Screen 3: Sign up / Sign in ---------- */
const Auth = ({ onGo, onContinue }) => {
  const [mode, setMode] = usePub('create');
  return (
    <div className="auth-shell page-enter">
      <div className="auth-left">
        <Lockup onClick={() => onGo('landing')} />
        <div className="form-wrap">
          <span className="eyebrow">Welcome</span>
          <h1>Let's get your rider started.</h1>
          <p className="lede">Sign in or create an account. We use magic links — no password to remember.</p>

          <div className="toggle-pills">
            <button className={mode === 'signin' ? 'active' : ''} onClick={() => setMode('signin')}>Sign in</button>
            <button className={mode === 'create' ? 'active' : ''} onClick={() => setMode('create')}>Create account</button>
          </div>

          {mode === 'create' ? (
            <>
              <div className="field">
                <label>Your name</label>
                <input type="text" placeholder="First and last" defaultValue="Sarah Klausmeier" />
              </div>
              <div className="field">
                <label>Email</label>
                <input type="email" placeholder="you@yourfamily.com" />
              </div>
              <label className="check-row">
                <input type="checkbox" defaultChecked />
                <span>Send me Coach Mike's monthly note (no spam, ever).</span>
              </label>
              <button className="btn btn-blue lg" style={{ width: '100%' }} onClick={onContinue}>
                Send my magic link <Ico d={I.arrowRight} size={18} />
              </button>
              <p className="fineprint">By creating an account you agree to the Pedaling Minds terms.</p>
            </>
          ) : (
            <>
              <div className="field">
                <label>Email</label>
                <input type="email" placeholder="you@yourfamily.com" />
              </div>
              <button className="btn btn-blue lg" style={{ width: '100%' }} onClick={onContinue}>
                Send my magic link <Ico d={I.arrowRight} size={18} />
              </button>
              <p className="fineprint">We'll email you a one-tap sign-in link. Good for 15 minutes.</p>
            </>
          )}

          <a className="footer-link" onClick={() => onGo('landing')}>
            Want to just browse the tracts first? → See all six tracts
          </a>
        </div>
      </div>
      <div className="auth-right">
        <div className="copy">
          <div className="quote">"Practice. Patience. Perseverance."</div>
          <div className="below">The Pedaling Minds 3 Ps — capitalized for a reason.</div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Landing, TractDetail, Auth, PublicFooter, PublicNav });