/* eslint-disable */
// Page sections — Nav, Hero, Showcase, Features, Pricing, FAQ, Footer

// ===== NAV =====
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 16);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={"nav " + (scrolled ? "scrolled" : "")}>
      <div className="container nav-inner">
        <a href="#" className="nav-brand">
          <img src="/logo-white.png" alt="Sprout" className="nav-logo" />
        </a>
        <div className="nav-links">
          <a href="#tour">Tour</a>
          <a href="#companion">Match day</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-cta">
          <a href="/clubs" className="signin">Sign in</a>
          <a href="#pricing" className="btn btn-primary btn-sm">Join the founders <Ico.arrow /></a>
        </div>
      </div>
    </nav>);

};

// ===== HERO PHONE CAROUSEL =====
const HERO_PHONES = [
{ src: "uploads/phone_1-1779223648579.png", label: "Coach Dashboard" },
{ src: "uploads/phone_2-1779223626555.png", label: "Match Day" },
{ src: "uploads/phone_3-1779223656468.png", label: "Home" },
{ src: "uploads/phone_4-1779223679275.png", label: "Season Wrapped" },
{ src: "uploads/phone_5-1779223768657.png", label: "Team Chat" }];


const HeroPhoneCarousel = () => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const N = HERO_PHONES.length;
  const hpcRef = React.useRef(null);
  const touchStart = React.useRef(null);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % N), 3600);
    return () => clearInterval(t);
  }, [paused, N]);

  // Attach touch listeners with passive:false so we can preventDefault on horizontal swipes
  React.useEffect(() => {
    const el = hpcRef.current;
    if (!el) return;

    const onStart = (e) => {
      touchStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
    };
    const onMove = (e) => {
      if (!touchStart.current) return;
      const dx = Math.abs(e.touches[0].clientX - touchStart.current.x);
      const dy = Math.abs(e.touches[0].clientY - touchStart.current.y);
      // If clearly horizontal, block the page from scrolling
      if (dx > dy && dx > 8) e.preventDefault();
    };
    const onEnd = (e) => {
      if (!touchStart.current) return;
      const dx = touchStart.current.x - e.changedTouches[0].clientX;
      const dy = Math.abs(e.changedTouches[0].clientY - touchStart.current.y);
      if (Math.abs(dx) > 40 && Math.abs(dx) > dy) {
        setIdx((i) => ((i + (dx > 0 ? 1 : -1)) + N) % N);
        setPaused(true);
        setTimeout(() => setPaused(false), 4000);
      }
      touchStart.current = null;
    };

    el.addEventListener("touchstart", onStart, { passive: true });
    el.addEventListener("touchmove", onMove, { passive: false });
    el.addEventListener("touchend", onEnd, { passive: true });
    return () => {
      el.removeEventListener("touchstart", onStart);
      el.removeEventListener("touchmove", onMove);
      el.removeEventListener("touchend", onEnd);
    };
  }, [N]);

  const get = (offset) => HERO_PHONES[((idx + offset) % N + N) % N];

  return (
    <div
      ref={hpcRef}
      className="hpc"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>
      
      <div className="hpc-stage" aria-live="polite">
        <div className="hpc-card hpc-pos--2" key={`a-${(idx - 2 + N) % N}`}>
          <img src={get(-2).src} alt={get(-2).label} />
        </div>
        <div className="hpc-card hpc-pos--1" key={`b-${(idx - 1 + N) % N}`}>
          <img src={get(-1).src} alt={get(-1).label} />
        </div>
        <div className="hpc-card hpc-pos-0" key={`c-${idx}`}>
          <img src={get(0).src} alt={get(0).label} />
          <div className="hpc-glow" />
        </div>
        <div className="hpc-card hpc-pos-1" key={`d-${(idx + 1) % N}`}>
          <img src={get(1).src} alt={get(1).label} />
        </div>
        <div className="hpc-card hpc-pos-2" key={`e-${(idx + 2) % N}`}>
          <img src={get(2).src} alt={get(2).label} />
        </div>
      </div>

      <div className="hpc-caption">
        <span className="hpc-caption-label">{get(0).label}</span>
        <div className="hpc-dots">
          {HERO_PHONES.map((p, i) =>
          <button
            key={i}
            className={"hpc-dot" + (i === idx ? " active" : "")}
            onClick={() => setIdx(i)}
            aria-label={`Show ${p.label}`} />

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

};

// ===== HERO =====
const Hero = ({ tweaks }) => {
  const headlineVariant = tweaks?.headline ?? "grow";
  const headlines = {
    grow: <>Helping<br />grassroots football<br /><span className="grad" style={{ textAlign: "center" }}>grow.</span></>,
    manager: <>Run your club<br />like a <span className="grad">manager.</span><br /><span style={{ color: "rgba(255,255,255,.55)" }}>Not a spreadsheet.</span></>,
    weekend: <>Win the<br /><span className="grad">weekend.</span><br /><span style={{ color: "rgba(255,255,255,.55)" }}>Run the season.</span></>
  };

  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-bg"></div>
      <div className="hero-pitch"></div>
      <div className="hero-inner">
        <div className="container">
          <div className="hero-grid">
            <div>
              <Reveal className="reveal-up"><span className="hero-eyebrow"><span className="dot"></span>Founders programme · First 50 clubs</span></Reveal>
              <Reveal className="reveal-up" delay={80}><h1 className="display hero-h1">{headlines[headlineVariant]}</h1></Reveal>
              <Reveal className="reveal-up" delay={160}>
                <p className="hero-sub">Sprout is the all-in-one home for your club. Safeguarding, finances, fixtures, encrypted team chat and a match-day companion — all from one dashboard built around the realities of UK volunteer coaching.

                </p>
              </Reveal>
              <Reveal className="reveal-up" delay={240}>
                <div className="hero-ctas">
                  <a href="/signup?plan=free" className="btn btn-primary">Get started free <Ico.arrow /></a>
                  <a href="#tour" className="btn btn-ghost-dark">See it in action</a>
                </div>
              </Reveal>
              <Reveal className="reveal-up" delay={320}>
                <div className="hero-trust">
                  <span><span className="dot"></span>No card to look around</span>
                  <span><span className="dot"></span>25% off Year One</span>
                  <span><span className="dot"></span>Cancel any time</span>
                </div>
              </Reveal>
            </div>

            <Reveal className="reveal-fade" delay={200}>
              <div className="hero-dash-wrap">
                <HeroPhoneCarousel />
              </div>
            </Reveal>
          </div>
        </div>
      </div>
      <div className="hero-bleed">
        <div className="hero-bleed-pitch"></div>
      </div>
    </section>);

};

// ===== ROLLING TICKER =====
const Marquee = () => {
  const items = [
  "Match plan", "Team picker", "Match companion", "Encrypted chat",
  "Parent portal", "Squad rotation", "Training planner", "Safeguarding",
  "Inventory", "Finance", "Tournaments", "DBS tracking", "Calendar", "Direct messages"];

  const track = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {track.map((t, i) =>
        <span key={i}>{t}<span className="dot"> ●</span></span>
        )}
      </div>
    </div>);

};

// ===== TOUR — main showcase with REAL screenshots =====
const TOUR = [
{
  key: "match", ix: "01",
  title: "Match plans, weather, parents — all on one page",
  desc: "Pitch booking, kick-off time, availability register, hourly weather, coaches and referees. Built so a manager can scan it in 10 seconds before kick-off.",
  src: "assets/screenshots/screenshot1.png",
  alt: "Match plan dashboard"
},
{
  key: "team", ix: "02",
  title: "A team picker that keeps things fair",
  desc: "Drag players across Q1–Q4 and Sprout tracks total minutes — across the match, the month, the season. No more 'why didn't my kid play last week.'",
  src: "assets/screenshots/screenshot6.png",
  alt: "Squad rotation across quarters with minutes tracked"
},
{
  key: "stats", ix: "03",
  title: "Honest player stats, captured on the touchline",
  desc: "Minutes, positions, average rating, match and training attendance — built up game by game. Easy reports for end-of-season reviews and individual chats.",
  src: "assets/screenshots/screenshot2.png",
  alt: "Player stats table for a team"
},
{
  key: "finance", ix: "04",
  title: "Treasurer mode — without the spreadsheet",
  desc: "Subs, fees, purchase requests and team balances in one view. See what's outstanding, what's been spent on bibs, who's owed a referee fee.",
  src: "assets/screenshots/screenshot4.png",
  alt: "Financial dashboard with team balances"
},
{
  key: "safe", ix: "05",
  title: "Safeguarding, DBS and parent messages — locked down",
  desc: "Track DBS certificates with expiry alerts, log incidents, manage parent message requests and digital consent — every sensitive record encrypted at rest. FA welfare-ready from day one.",
  src: "assets/screenshots/screenshot1.png",
  alt: "Safeguarding and parent communications dashboard"
}];


const Tour = () => {
  const [active, setActive] = React.useState("match");
  const item = TOUR.find((t) => t.key === active);
  return (
    <section className="section cream" id="tour" data-screen-label="02 Tour">
      <div className="container">
        <Reveal className="reveal-up">
          <div className="section-head">
            <div>
              <span className="eyebrow">01 · The tour</span>
              <h2 className="section-title">Built for the volunteer<br />holding it all together.</h2>
            </div>
            <p className="section-kicker">
              Five screens that quietly replace the WhatsApp group, the lever-arch file, the DBS binder and the spreadsheet you keep forgetting to update.
            </p>
          </div>
        </Reveal>
        <Reveal className="reveal-up" delay={60}>
          <div className="tour">
            <div className="tour-tabs">
              {TOUR.map((it) =>
              <button key={it.key} className={"tour-tab" + (active === it.key ? " active" : "")} onClick={() => setActive(it.key)}>
                  <span className="ix">{it.ix}</span>
                  <div>
                    <h3 className="ttl">{it.title}</h3>
                    <p className="desc">{it.desc}</p>
                  </div>
                </button>
              )}
            </div>
            <div className="tour-stage">
              <Screenshot
                key={item.key}
                src={item.src}
                alt={item.alt}
                aspect="16 / 9"
                className="breathe"
                frame="dark" />
              
              <div className="tour-caption">
                <span className="ix">{item.ix}</span>
                <span>{item.title}</span>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

};

// ===== MATCH COMPANION (deep-dive 1) =====
const Companion = () =>
<section className="section dark" id="companion" data-screen-label="03 Match companion">
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head">
          <div>
            <span className="eyebrow on-dark">02 · Match companion</span>
            <h2 className="section-title" style={{ color: "white" }}>Capture stats<br />on the fly.</h2>
          </div>
          <p className="section-kicker">
            Tap a player, tap what happened. Goals, assists, good passes, fouls, saves — pulled together into a clean match report and pushed straight to each player's profile.
          </p>
        </div>
      </Reveal>
      <div className="duo">
        <Reveal className="reveal-right">
          <div className="duo-copy">
            <ul className="point-list">
              <li><span className="pl-num">A</span><div><b>One tap per moment.</b><p>No fumbling with menus mid-game — the touchline is no place for nested forms.</p></div></li>
              <li><span className="pl-num">B</span><div><b>Quick sub built in.</b><p>Make the change from the same screen, and the clock keeps running.</p></div></li>
              <li><span className="pl-num">C</span><div><b>Honest events log.</b><p>Everything you tap is reviewable and removable. You stay the editor.</p></div></li>
              <li><span className="pl-num">D</span><div><b>Rolls up automatically.</b><p>Goals, assists, fouls, ratings — flows into the player profile and the team's stats table.</p></div></li>
            </ul>
          </div>
        </Reveal>
        <Reveal className="reveal-left" delay={80}>
          <div className="duo-phone">
            <PhoneShot src="assets/screenshots/phone-companion.png" alt="Match companion capturing player events" className="breathe-soft" />
            <div className="duo-phone-tag">live · 78:32</div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>;


// ===== TEAM PICKER (deep-dive 2) =====
const TeamPicker = () =>
<section className="section cream" id="picker" data-screen-label="04 Team picker">
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head">
          <div>
            <span className="eyebrow">03 · Team picker</span>
            <h2 className="section-title">Fair playing time,<br />tracked automatically.</h2>
          </div>
          <p className="section-kicker">
            Drag players into Q1–Q4. Sprout adds up the minutes — for today, for the season, for the squad — so you can pick the team you want without losing track of who's been benched twice in a row.
          </p>
        </div>
      </Reveal>
      <div className="duo duo-light">
        <Reveal className="reveal-right">
          <div className="picker-stat-grid">
            <div className="picker-stat">
              <div className="ps-label">Per match</div>
              <div className="ps-value">Quarters or halves</div>
              <p>Automatically allocates players to halves or quarters so everyone gets fair play time </p>
            </div>
            <div className="picker-stat">
              <div className="ps-label">Per season</div>
              <div className="ps-value"> <span className="muted">·</span> Game time</div>
              <p>One glance to spot who's behind on minutes.</p>
            </div>
            <div className="picker-stat">
              <div className="ps-label">Saved lineups</div>
              <div className="ps-value">4-4-2 or 3-5-1 or....</div>
              <p>Try a pressing setup. Try a defensive shape. Keep the one that works.</p>
            </div>
            <div className="picker-stat">
              <div className="ps-label">Availability</div>
              <div className="ps-value">Auto availability</div>
              <p>Unavailable players are dimmed you can't accidentally pick them.</p>
            </div>
          </div>
        </Reveal>
        <Reveal className="reveal-left" delay={80}>
          <Screenshot
          src="assets/screenshots/screenshot6.png"
          alt="Squad Rotation: drag players across Q1, Q2, Q3, Q4 with minutes shown"
          aspect="16 / 11"
          className="breathe"
          frame="dark" />
        
        </Reveal>
      </div>
    </div>
  </section>;


// ===== FEATURES GRID =====
const FEATURES = [
{ num: "F.01", icon: Ico.cal, title: "Fixtures & match plans", desc: "Auto-poll availability, post team sheets, log results, attach the weather and the referee. Always searchable." },
{ num: "F.02", icon: Ico.scales, title: "Team picker", desc: "Drag-and-drop quarters. Minutes tracked per match and per season. No more 'why didn't my kid play last week.'" },
{ num: "F.03", icon: Ico.bolt, title: "Match companion", desc: "Touchline-fast event capture. Goals, assists, fouls, saves — flowing straight into player profiles." },
{ num: "F.04", icon: Ico.squad, title: "Squad & guardians", desc: "Player profiles, medical notes, FA registration, photo consent — all behind safeguarding-aware permissions." },
{ num: "F.05", icon: Ico.whistle, title: "Training planner", desc: "Schedule sessions, attach plans, capture attendance, write coach observations after the whistle." },
{ num: "F.06", icon: Ico.card, title: "Payments & subs", desc: "Stripe-powered fees, payment tracking and reminders — no more chasing families on Facebook." },
{ num: "F.07", icon: Ico.stats, title: "Accounting & ledger", desc: "Full club financial ledger: income, expenses, grants, team balances and treasurer reports. Know where every penny goes." },
{ num: "F.08", icon: Ico.chat, title: "Encrypted team & direct chat", desc: "Threaded team chats, private direct messages and broadcasts — every message AES-encrypted in the database. No personal numbers shared, nothing leaking through WhatsApp." },
{ num: "F.09", icon: Ico.shield, title: "Safeguarding & DBS — FA compliant", desc: "DBS certificate tracking with expiry alerts, incident logging, safeguarding reports and qualification records — all encrypted and audit-ready so your welfare officer and county FA have everything they need." },
{ num: "F.10", icon: Ico.clipboard, title: "Incident reporting", desc: "Digital incident and near-miss reports with timestamps, witness notes and escalation paths — FA welfare-ready." },
{ num: "F.11", icon: Ico.clipboard, title: "Compliance & policies", desc: "GDPR framework, club policies, risk assessments and insurance records — version-controlled and audit-ready." },
{ num: "F.12", icon: Ico.formation, title: "Tournaments & fan hub", desc: "Organise tournaments with brackets, publish fixtures and share a public fan page so spectators can follow live scores." },
{ num: "F.13", icon: Ico.card, title: "Fundraising", desc: "Campaigns, donation tracking, sponsored events and committee reports — all without leaving the platform." },
{ num: "F.14", icon: Ico.clipboard, title: "Kit & inventory", desc: "Track kit allocation per player, manage stock levels, record sizes and produce ordering reports. No more mystery missing bibs." },
{ num: "F.15", icon: Ico.phone, title: "Installs like an app", desc: "PWA-ready. Parents tap a link, add Sprout to their home screen — no App Store, no install fatigue." },
{ num: "F.16", icon: Ico.rss, title: "Club news feed", desc: "Social-style club feed with posts, polls, comments and reactions. Keep the whole community engaged between match days." },
{ num: "F.17", icon: Ico.mega, title: "Broadcast alerts", desc: "Instant priority alerts to all parents for pitch cancellations, weather warnings and last-minute changes. Read receipts show exactly who has seen it." },
{ num: "F.18", icon: Ico.umbrella, title: "Insurance management", desc: "Store all club insurance policies with document upload, expiry tracking and automatic renewal reminders. Never run uninsured by accident again." },
{ num: "F.19", icon: Ico.cal, title: "Club events & RSVP", desc: "Beyond fixtures and training: AGMs, end-of-season parties, committee meetings, fundraising evenings. Full RSVP tracking with attendance confirmations." },
{ num: "F.20", icon: Ico.star, title: "Season Wrapped", desc: "Auto-generated end-of-season highlight reel for every team. Top scorers, most appearances, biggest wins shared to the feed with one click." }];


const Features = () =>
<section className="section cream" id="features" style={{ paddingTop: 0 }} data-screen-label="05 Features">
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head">
          <div>
            <span className="eyebrow">04 · The toolkit</span>
            <h2 className="section-title">Fifteen modules.<br />One happy club.</h2>
          </div>
          <p className="section-kicker">
            Each module replaces a spreadsheet, a paper form or a forgotten WhatsApp message. Turn them on as you grow.
          </p>
        </div>
      </Reveal>
      <div className="fgrid">
        {FEATURES.map((f, i) => {
        const I = f.icon;
        return (
          <Reveal key={i} className="reveal-up fcard-wrap" delay={i % 3 * 60}>
              <div className="fcard">
                <span className="num">{f.num}</span>
                <span className="icn"><I /></span>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            </Reveal>);

      })}
      </div>
    </div>
  </section>;



// ===== WHY DIFFERENT =====
const WhyDifferent = () =>
<section className="section dark" data-screen-label="05.5 Why Sprout" id="different">
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head">
          <div>
            <span className="eyebrow on-dark">Why Sprout</span>
            <h2 className="section-title" style={{ color: "white" }}>Three things no other<br /><span className="grad">grassroots tool offers.</span></h2>
          </div>
          <p className="section-kicker">
            Most club tools are re-skinned team schedulers. Sprout is built around the full reality of running a UK grassroots club.
          </p>
        </div>
      </Reveal>
      <Reveal className="reveal-up" delay={80}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 24, marginTop: 40 }}>
          {[
            {
              icon: "🔒",
              head: "Sensitive data encrypted at rest",
              body: "Every message, medical note, safeguarding report, parent phone number and date of birth is AES-256 encrypted in the database. Even raw database access returns scrambled ciphertext. No other grassroots platform does this."
            },
            {
              icon: "🏴",
              head: "Built for UK FA requirements",
              body: "DBS tracking, safeguarding incident logs, welfare officer reports, GDPR consent records and code of conduct sign-off — built in from day one, not a paid add-on. Pitchero charges extra. Spond does not have it."
            },
            {
              icon: "🏠",
              head: "Your own private home",
              body: "Every club gets a fully isolated environment on its own database. Your data never shares infrastructure with another club — no noisy-neighbour risk, no wondering if someone else's breach touches yours."
            }
          ].map((c, i) =>
            <div key={i} style={{ background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.1)", borderRadius: 20, padding: "32px 28px" }}>
              <div style={{ fontSize: 34, marginBottom: 16 }}>{c.icon}</div>
              <h3 style={{ color: "white", fontWeight: 700, fontSize: 18, marginBottom: 10, lineHeight: 1.3 }}>{c.head}</h3>
              <p style={{ color: "rgba(255,255,255,.6)", fontSize: 15, lineHeight: 1.7, margin: 0 }}>{c.body}</p>
            </div>
          )}
        </div>
      </Reveal>
    </div>
  </section>;


// ===== PHONE TRIO =====
const PhoneTrio = () =>
<section className="section dark" data-screen-label="06 In your pocket">
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <div>
            <span className="eyebrow on-dark">05 · In every pocket</span>
            <h2 className="section-title" style={{ color: "white" }}>Built for the touchline.<br />Lives on the home screen.</h2>
          </div>
          <p className="section-kicker">
            Coaches manage. Parents RSVP. Players share their highlight. The same web app, tailored to each role — no separate downloads, no five different logins.
          </p>
        </div>
      </Reveal>
      <div className="phone-trio">
        <Reveal className="reveal-up" delay={0}>
          <div className="phone-cell">
            <PhoneShot src="uploads/phone_3-1779223656468.png" alt="Coach home — fixtures and training" className="breathe-soft" />
            <div className="phone-cap">
              <b>Coach home</b>
              <span>Fixtures, parent RSVPs, today's session — all one tap away.</span>
            </div>
          </div>
        </Reveal>
        <Reveal className="reveal-up" delay={120}>
          <div className="phone-cell phone-cell-tall">
            <PhoneShot src="uploads/phone_2-1779223626555.png" alt="Match day formation and quarters" className="breathe-soft" />
            <div className="phone-cap">
              <b>Match day</b>
              <span>Live formation, quarters, score, sub bench — out in the rain, in the dark, in glove fingers.</span>
            </div>
          </div>
        </Reveal>
        <Reveal className="reveal-up" delay={240}>
          <div className="phone-cell">
            <PhoneShot src="uploads/phone_4-1779223679275.png" alt="Team feed — champions celebration" className="breathe-soft" />
            <div className="phone-cap">
              <b>Team feed</b>
              <span>The wins, the celebrations, the season wrap — shared safely with the right people.</span>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>;


// ===== FOUNDERS PROGRAMME =====
const Founders = ({ remaining = 50 }) =>
<section className="section cream" data-screen-label="07 Founders" id="founders" style={{ paddingTop: 0 }}>
    <div className="container">
      <Reveal className="reveal-up">
        <div className="founders">
          <div className="founders-bg" />
          <div className="founders-inner">
            <div className="founders-left">
              <span className="eyebrow on-dark">06 · Founders programme</span>
              <h2 className="founders-h">
                First 50 clubs.<br /><span className="grad">25% off Year One.</span>
              </h2>
              <p className="founders-sub">
                We're opening Sprout to the first 50 grassroots clubs to come on board. You lock in 25% off every plan for your first year — and you get a direct line to the people building the product.
              </p>
              <div className="founders-cta-row">
                <a href="/signup?plan=club" className="btn btn-primary">Claim a spot <Ico.arrow /></a>
                <a href="#faq" className="btn btn-ghost-dark">How it works</a>
              </div>
            </div>
            <div className="founders-right">
              <div className="counter">
                <div className="counter-num">{remaining}</div>
                <div className="counter-lbl">Founder<br />spots left</div>
              </div>
              <ul className="founders-list">
                <li><Ico.check /> 25% off every plan, Year One</li>
                <li><Ico.check /> Priority support · direct line</li>
                <li><Ico.check /> Lifetime founder badge on your club</li>
                <li><Ico.check /> A vote on what we ship next</li>
              </ul>
            </div>
          </div>
        </div>
      </Reveal>
    </div>
  </section>;


// ===== PRICING =====
const RAW_PLANS = [
{ name: "Free", price: 0, per: "/30 days", desc: "Try every feature free — no card needed.", feats: ["1 team · up to 15 players", "Fixtures & availability", "Basic parent portal", "Email notifications"], cta: "Get started free", flag: null, featured: false },
{ name: "Starter", price: 19, per: "/month", desc: "Perfect for a single team.", feats: ["1 team · up to 25 players", "Training & attendance", "Team picker & match plan", "Match companion (stats)"], cta: "Claim founder price", flag: null, featured: false },
{ name: "Club", price: 39, per: "/month", desc: "For clubs with multiple age groups.", feats: ["Unlimited teams & players", "Subs & finance ledger", "Safeguarding & DBS tools", "Priority support · UK time"], cta: "Claim founder price", flag: "MOST CHOSEN", featured: true },
{ name: "Academy", price: 79, per: "/month", desc: "Full kit for larger organisations.", feats: ["Custom domain & branding", "Compliance & policy mgmt", "Insurance & DBS tracking", "Dedicated onboarding"], cta: "Talk to us", flag: null, featured: false }];


const founderPrice = (n) => n === 0 ? 0 : Math.round(n * 0.75);

const Pricing = () =>
<section className="section cream" id="pricing" data-screen-label="08 Pricing" style={{ paddingTop: 0 }}>
    <div className="container">
      <Reveal className="reveal-up">
        <div className="section-head">
          <div>
            <span className="eyebrow">07 · Pricing</span>
            <h2 className="section-title">Founders pricing<br />— while spots last.</h2>
          </div>
          <p className="section-kicker">
            One flat price per club. No per-player charges, no per-coach seats, no surprise upgrade when you add the U9s. Founder pricing applies for the whole of Year One.
          </p>
        </div>
      </Reveal>
      <div className="plans">
        {RAW_PLANS.map((p, i) => {
        const fp = founderPrice(p.price);
        const showStrike = p.price > 0;
        return (
          <Reveal key={p.name} className="reveal-up" delay={i * 70}>
              <div className={"plan" + (p.featured ? " featured" : "")}>
                {p.flag && <span className="plan-flag">{p.flag}</span>}
                {p.price > 0 && <span className="plan-founder">−25% Year 1</span>}
                <span className="name">{p.name}</span>
                <div className="pricing-row">
                  {showStrike && <span className="price-strike">£{p.price}</span>}
                  <span className="price">£{fp}</span>
                  <span className="per">{p.per}</span>
                </div>
                {p.price > 0 &&
              <div className="founder-note">30 days free · card required · then £{founderPrice(p.price)}/mo</div>
              }
                {p.price === 0 &&
              <div className="founder-note" style={{color:"#b45309",background:"#fffbeb"}}>⚠ 30 days free · no card needed · then from £19/mo</div>
              }
                <p className="pdesc">{p.desc}</p>
                <ul>
                  {p.feats.map((f, j) =>
                <li key={j}><Ico.check /> {f}</li>
                )}
                </ul>
                <a href={p.price === 0 ? "/signup?plan=free" : `/signup?plan=${p.name.toLowerCase()}`} className={"btn pcta " + (p.featured ? "btn-primary" : "btn-ghost-light")} style={{ width: "100%", justifyContent: "center" }}>{p.cta}</a>
              </div>
            </Reveal>);

      })}
      </div>
      <Reveal className="reveal-up">
        <p className="pricing-fineprint">
          Founder pricing is honoured for the whole of your first 12 months. After Year One you continue at standard rates — or cancel any time, no penalty.
        </p>
      </Reveal>
    </div>
  </section>;


// ===== FAQ =====
const FAQ_ITEMS = [
{ q: "What does the founders programme actually include?", a: "The first 50 clubs to sign up to a paid plan get 25% off for their first 12 months on whichever plan they choose. You also get a direct line to the team building Sprout — questions, feature requests and bug reports go straight to us, not into a help desk. You'll keep the 'founder' status on your club profile for as long as you're with us." },
{ q: "Is Sprout a finished product?", a: "Sprout is live and being used today, but we're early. Some modules are deeper than others. We're transparent about what's polished and what's still finding its feet — and the founders programme exists because the clubs who help us shape it deserve a fairer price." },
{ q: "How long does it take to migrate a club from spreadsheets?", a: "Most coaches are up and running for a single team in under half an hour. Bigger clubs (10+ teams) usually want an evening to get everyone invited, the squad lists imported and the season's fixtures pasted in. We'll help — that's part of the founders deal." },
{ q: "Do we own our data? What about GDPR?", a: "Your club owns every byte. Sprout is UK-hosted, GDPR-compliant, and you can export all your data at any time. We never sell parent data and never run ads. Beyond that: every sensitive field — medical records, safeguarding reports, parent phone numbers, dates of birth and all chat messages — is AES-256 encrypted in the database. Even raw database access returns scrambled ciphertext. No other grassroots platform offers field-level encryption." },
{ q: "Can parents use it without installing anything?", a: "Yes. Sprout is a Progressive Web App — parents tap a link, add it to their home screen, and it behaves like a native app. No App Store, no friction, no 'I can't log in on Android.'" },
{ q: "What if we already use TeamSnap, Spond or Pitchero?", a: "You can bring squad lists and fixtures across as CSVs and we'll help you map them. If something's not importing cleanly, tell us — that's a good use of your direct line." }
];

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section cream" id="faq" style={{ paddingTop: 0 }} data-screen-label="09 FAQ">
      <div className="container" style={{ maxWidth: 920 }}>
        <Reveal className="reveal-up">
          <div className="section-head" style={{ gridTemplateColumns: "1fr", marginBottom: 32 }}>
            <div>
              <span className="eyebrow">08 · Questions</span>
              <h2 className="section-title">Honest answers,<br />from a small team.</h2>
            </div>
          </div>
        </Reveal>
        <div className="faq-list">
          {FAQ_ITEMS.map((item, i) =>
          <Reveal key={i} className="reveal-up" delay={i * 50}>
              <div className={"faq-item" + (open === i ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span>{item.q}</span>
                  <span className="pm">+</span>
                </button>
                <div className="faq-a">{item.a}</div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

// ===== CTA STRIP =====
const CTAStrip = () =>
<section className="section cream" style={{ paddingTop: 0, paddingBottom: 80 }}>
    <div className="container">
      <Reveal className="reveal-up">
        <div className="cta-strip">
          <div>
            <span className="eyebrow on-dark" style={{ display: "inline-block", marginBottom: 14 }}>09 · Take a spot</span>
            <h2>The first 50 clubs<br />shape the next ten thousand.</h2>
            <p>Lock in 25% off Year One, talk to us directly, and help us build the platform UK grassroots football has always deserved.</p>
          </div>
          <div className="cta-actions">
            <a href="/signup?plan=club" className="btn btn-primary">Claim a founder spot <Ico.arrow /></a>
            <a href="mailto:hello@sprout-club.co.uk" className="btn btn-ghost-dark">Book a 15-min walkthrough</a>
          </div>
        </div>
      </Reveal>
    </div>
  </section>;


// ===== FOOTER =====
const Footer = () =>
<footer className="footer">
    <div className="container">
      <div className="foot-grid">
        <div>
          <div>
            <img src="/logo-white.png" alt="Sprout" className="foot-logo" />
          </div>
          <p className="foot-tag">A small, honest project building the home UK grassroots football has been waiting for. Built by people who've stood on the touchline at 9am on a Sunday.</p>
        </div>
        <div className="foot-col">
          <h4>Product</h4>
          <ul>
            <li><a href="#tour">Tour</a></li>
            <li><a href="#companion">Match companion</a></li>
            <li><a href="#picker">Team picker</a></li>
            <li><a href="#pricing">Pricing</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Programme</h4>
          <ul>
            <li><a href="#founders">Founders programme</a></li>
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#">Roadmap</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
        <div className="foot-col">
          <h4>Stay in the loop</h4>
          <p style={{ fontSize: 14, color: "rgba(255,255,255,.55)", margin: "0 0 12px", lineHeight: 1.5 }}>One short email a fortnight — what we've shipped, what we're working on, no nonsense.</p>
          <form className="foot-news" onSubmit={(e) => e.preventDefault()}>
            <input type="email" placeholder="treasurer@yourclub.co.uk" />
            <button type="submit">Subscribe</button>
          </form>
        </div>
      </div>
      <div className="foot-bottom">
        <span>© 2026 Sprout · A grassroots-football project</span>
        <span style={{ display: "flex", gap: 18 }}>
          <a href="#">Privacy</a>
          <a href="#">Terms</a>
          <a href="#">Contact</a>
        </span>
      </div>
    </div>
  </footer>;


Object.assign(window, { Nav, Hero, Marquee, Tour, Companion, TeamPicker, Features, PhoneTrio, Founders, Pricing, FAQ, CTAStrip, Footer });