/* EvoToca FC — club landing page. Composes the bound EvoToca design system.
   Sections: Nav · Hero · Manifesto · Individualization · The Unseen Game (EDI)
   · Honesty band · FAQ · CTA · Footer.  Visual style + accent are tweakable. */
const DS = window.EvoTocaDesignSystem_20734f;
const { Button, Eyebrow, Card, CardContent, Badge, Sparkline } = DS;

/* ------------------------------------------------------------------ data */
const HERO_HEADLINES = {
  scoreboard: ["We coach the things the", "scoreboard can’t see."],
  blueprint: ["The player is", "the blueprint."],
  build: ["Most clubs sell trophies.", "We build players."],
};

const BELIEFS = [
  {
    k: "01",
    t: "Individualization",
    h: "Every player is known.",
    b: "A 200-player academy can’t tell you how your child thinks, what they fear on the ball, or what unlocked them this month. We can — and we make that attention visible and constant.",
  },
  {
    k: "02",
    t: "Honesty",
    h: "We say the quiet part out loud.",
    b: "We can lose a game on purpose for development — and tell you exactly why. No win-now pressure, no roster churn, no parent-pleasing dressed up as coaching.",
  },
  {
    k: "03",
    t: "Intelligence",
    h: "One coach, individual for everyone.",
    b: "We use modern tools to give every player their own development plan — the reach of a full staff from a coach who actually knows your kid by name.",
  },
  {
    k: "04",
    t: "Narrative",
    h: "You’re not a customer. You’re a founder.",
    b: "The first families don’t buy a program — they build one. People stay loyal to the things they helped create in a way they never do for things they merely paid for.",
  },
];

const GROWTH = [
  { month: "Sep", positiveRatio: 0.28, peerRatio: 0.5 },
  { month: "Oct", positiveRatio: 0.24, peerRatio: 0.5 },
  { month: "Nov", positiveRatio: 0.37, peerRatio: 0.5 },
  { month: "Dec", positiveRatio: 0.33, peerRatio: 0.5 },
  { month: "Jan", positiveRatio: 0.46, peerRatio: 0.5 },
  { month: "Feb", positiveRatio: 0.58, peerRatio: 0.5 },
];

const FAQS = [
  {
    q: "So you don’t care about winning?",
    a: "We care a great deal — we want our players to become the kind of footballers who win. But we refuse to trade a child’s long-term development for this Saturday’s scoreline. The parent who understands the plan tolerates short-term losses. The one who doesn’t, leaves. We’d rather have the first conversation up front.",
  },
  {
    q: "Why small-sided games instead of full pitches?",
    a: "A 30x20 yard patch with the right constraints develops scanning, decision-making and touches far better than eleven kids standing around a full field. More of the ball, more decisions, more reps. We turned the constraint into the method — it’s the same street-ball logic that built the best players in the world.",
  },
  {
    q: "My child is used to trophies. What do you offer instead?",
    a: "Proof that your child is actually getting better — in plain English, based on quarterly results. Trophies measure a team on one day. We measure the behaviors that build a player over years: how they scan, how they stay composed, how they move without the ball. Those are the things that follow them into every team they ever join.",
  },
  {
    q: "Who is this for? What ages?",
    a: "Families in McKinney, Allen and the wider Collin County area who want serious development over status. We’re building founding age groups — and right now we are strictly focused on our Under-10s (born Aug 2016 – Jul 2017) and Under-13s (born Aug 2013 – Jul 2014). That focus is deliberate: we are intentional about bringing in high-quality coaches, and we won’t pull players in just to fill spots or add size. We choose quality over quantity, every time.",
  },
  {
    q: "Is the first session really free?",
    a: "Yes. Come watch a real session, meet the families, and we’ll tell you honestly whether EvoToca is the right fit for your child. No commitment and no sales pitch — if we’re not right for you, we’ll say so.",
  },
  {
    q: "What is the EvoToca Development Index?",
    a: "It’s our player-development tracking app. Coaches tag developmental moments from recorded games; parents get an education-first dashboard that explains their child’s growth across 16 categories — with the math always shown and a worked example. It exists to start better conversations with your coach, never to replace them.",
  },
  {
    q: "How will I actually know my child is improving?",
    a: "You’ll see it written down and explained — not guessed at. Remember: development is not linear, mistakes are necessary for growth, and players improve at different speeds. We never compare your child to other players. We compare them to themselves, over time.",
  },
];

/* ------------------------------------------------------------------ bits */
function Eb({ children, muted }) {
  return React.createElement(Eyebrow, { tone: muted ? "muted" : "brand" }, children);
}

function Swoosh({ style }) {
  // Oversized echo of the logo swoosh — brand texture without photography.
  return (
    <svg className="swoosh" viewBox="0 0 600 600" style={style} aria-hidden="true">
      <path d="M70 470 C 180 250, 360 150, 560 120 C 360 200, 230 320, 150 500 Z" fill="var(--brand-yellow)" />
      <path d="M120 430 C 240 240, 420 150, 560 120" fill="none" stroke="var(--foreground)" strokeOpacity="0.5" strokeWidth="6" strokeLinecap="round" />
      <circle cx="300" cy="300" r="250" fill="none" stroke="var(--foreground)" strokeOpacity="0.45" strokeWidth="3" />
    </svg>
  );
}

/* ------------------------------------------------------------------ nav */
function Nav({ onBook }) {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 24);
    f(); window.addEventListener("scroll", f, { passive: true });
    return () => window.removeEventListener("scroll", f);
  }, []);
  const link = (id, label) => (
    <a className="nav-link" href={"#" + id}>{label}</a>
  );
  return (
    <header className={"nav" + (scrolled ? " nav--scrolled" : "")}>
      <div className="wrap nav-inner">
        <a className="brand" href="#top" aria-label="EvoToca FC home">
          <span className="brand-mark"><img src="assets/logo-mark.png" alt="" /></span>
          <span className="brand-word">EvoToca <span>FC</span></span>
        </a>
        <nav className="nav-links">
          {link("philosophy", "Philosophy")}
          {link("index", "The Index")}
          {link("parents", "Parents")}
        </nav>
        <Button size="sm" onClick={onBook}>Try a free session</Button>
      </div>
    </header>
  );
}

/* ------------------------------------------------------------------ hero */
function Hero({ t, onBook }) {
  const lines = HERO_HEADLINES[t.headline] || HERO_HEADLINES.scoreboard;
  const photo = t.style === "photo";
  return (
    <section className="hero" id="top">
      {photo && (
        <div className="hero-photo" style={{ backgroundImage: "url(photos/action-dribble-web.jpg)" }} />
      )}
      {!photo && <Swoosh style={{ opacity: t.style === "minimal" ? 0.06 : 0.09 }} />}
      <div className="wrap hero-inner">
        <div className="hero-eyebrow"><Eb>McKinney &middot; Allen, Texas</Eb></div>
        <h1 className="hero-h1">
          {lines.map((l, i) => <span key={i} className="hero-line">{l}</span>)}
        </h1>
        <p className="hero-lede">
          EvoToca FC is a small, serious youth soccer club built on one idea —
          <em> the behaviors that matter long-term are often invisible short-term.</em>
          {" "}We make a coach’s individual attention visible, constant, and honest.
        </p>
        <div className="hero-cta">
          <Button size="lg" onClick={onBook}>Try a free session</Button>
          <a href="#philosophy"><Button size="lg" variant="outline">How development works</Button></a>
        </div>
        <div className="hero-forming">
          <span className="forming-label">Now forming</span>
          <span className="forming-group"><b>U10</b> &middot; born Aug 2016 &ndash; Jul 2017</span>
          <span className="forming-group"><b>U13</b> &middot; born Aug 2013 &ndash; Jul 2014</span>
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------- manifesto + beliefs */
function Manifesto({ t }) {
  return (
    <section className="section manifesto" id="philosophy">
      <div className="wrap">
        <Eb>Why we&rsquo;re different</Eb>
        <h2 className="big-statement">
          We refuse to play the <span className="ink">status game</span>.
        </h2>
        <p className="lede measure">
          Trophies, rankings, hype, the biggest name in the league — the things that
          look like success but rarely build a player. We’re here for a longer game, and
          we compete on the four things a big academy structurally can’t give your child:
        </p>
        <div className="belief-grid">
          {BELIEFS.map((x) => (
            <Card key={x.k} variant="default" style={{ height: "100%" }}>
              <CardContent style={{ padding: "var(--space-6)" }}>
                <div className="belief-head">
                  <span className="belief-k tnum">{x.k}</span>
                  <span className="belief-t">{x.t}</span>
                </div>
                <h3 className="belief-h">{x.h}</h3>
                <p className="belief-b">{x.b}</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------- feature (text+photo) */
function Feature({ id, eyebrow, heading, children, img, reverse, show, kicker }) {
  return (
    <section className={"section feature" + (reverse ? " feature--rev" : "")} id={id}>
      <div className="wrap feature-grid">
        <div className="feature-text">
          <Eb>{eyebrow}</Eb>
          <h2 className="h2">{heading}</h2>
          {children}
        </div>
        {show && (
          <figure className="feature-media">
            <img src={img} alt="" loading="lazy" />
            {kicker && <figcaption>{kicker}</figcaption>}
          </figure>
        )}
      </div>
    </section>
  );
}

/* ------------------------------------------------- the index / EDI */
function TheIndex({ t, onBook }) {
  const show = t.style !== "minimal";
  return (
    <section className="section unseen" id="index">
      <div className="wrap unseen-grid">
        <div className="feature-text">
          <Eb>The unseen game</Eb>
          <h2 className="h2">We measure what builds players &mdash; not what wins Saturdays.</h2>
          <p className="body measure">
            Scanning. Composure under pressure. Off-ball movement. Decision-making.
            The things statistics never track are exactly the things we coach.
            The <strong>EvoToca Development Index</strong> turns a coach’s attention into
            something you can actually read — across 16 categories, in plain English,
            with the math always shown.
          </p>
        </div>

        {show && (
          <figure className="unseen-media">
            <img src="photos/scanning-web.jpg" alt="" loading="lazy" />
            <figcaption>Before the ball arrives, the best players have already looked twice.</figcaption>
          </figure>
        )}
      </div>

      <div className="wrap index-cards">
        <Card variant="emphasis" style={{ flex: "1 1 320px" }}>
          <CardContent style={{ padding: "var(--space-6)" }}>
            <Eb muted>Growth over time</Eb>
            <div className="spark-wrap">
              <Sparkline data={GROWTH} width={300} height={84} />
            </div>
            <p className="fine">
              One player’s positive-action ratio, month over month. Development is not
              linear — and we never compare your child to other players. We compare them
              to themselves.
            </p>
          </CardContent>
        </Card>

        <a className="index-link" href="#join">
          <Card variant="interactive" style={{ height: "100%" }}>
            <CardContent style={{ padding: "var(--space-6)" }}>
              <Eb>For families who join</Eb>
              <h3 className="link-h">Access comes with the team <span className="arrow">&rarr;</span></h3>
              <p className="fine">
                The tracker isn’t public. Once your child earns a place and starts
                training, parents get a private login — quarterly reports, explained in
                plain English. It begins with a single free session.
              </p>
            </CardContent>
          </Card>
        </a>
      </div>
    </section>
  );
}

/* ------------------------------------------------- parents */
function Parents() {
  return (
    <section className="section parents" id="parents">
      <div className="wrap">
        <Eb>We partner with parents</Eb>
        <h2 className="h2 parents-h">You’re not a spectator. You’re part of the work.</h2>
        <p className="lede measure parents-lede">
          Most clubs leave parents to figure it out on their own. We don’t. How you show
          up after a game shapes your child as much as anything we do on the field — so we
          give every family a clear, research-informed way to help.
        </p>
        <div className="parents-grid">
          <Card variant="emphasis" style={{ height: "100%" }}>
            <CardContent style={{ padding: "var(--space-6)" }}>
              <Eb muted>The off-field game</Eb>
              <p className="parent-q">What&rsquo;s built on the pitch can be undone off it.</p>
              <p className="parent-b">
                Parents see their kids at their most vulnerable moments &mdash; before and
                after every game, before and after every training, and everywhere in
                between. That presence is power. We&rsquo;re not telling you what to say; we&rsquo;re
                asking you to feed your player positive, supportive information &mdash; because
                the work done on their feet can be quietly undone at home if the messages
                around them don&rsquo;t enhance their experience and attitude.
              </p>
            </CardContent>
          </Card>
          <Card variant="emphasis" style={{ height: "100%" }}>
            <CardContent style={{ padding: "var(--space-6)" }}>
              <Eb muted>On giving feedback</Eb>
              <p className="parent-q">&ldquo;The car ride is for connection. Tomorrow is for correction.&rdquo;</p>
              <p className="parent-b">
                We’d never tell you to stay silent — you see things we don’t. It’s about
                timing. Feedback in the raw minutes after a game is about how it felt, not
                what happened. Sleep drains the emotion; what survives the night is what’s
                actually worth saying.
              </p>
            </CardContent>
          </Card>
        </div>
        <Card variant="default" style={{ marginTop: "var(--space-4)" }}>
          <CardContent style={{ padding: "var(--space-6)" }}>
            <div className="reframe-grid">
              <div>
                <Eb muted>Reading the numbers</Eb>
                <p className="parent-q parent-q--brand">A dip is often proof of growth.</p>
              </div>
              <p className="parent-b">
                When a tracked number drops, it’s usually a player reaching for something
                harder — a new technique, a new position, a growth spurt scrambling their
                coordination. The number is information for the coaches, never a verdict on
                your child. The honest question is never <em>“what’s wrong with my kid?”</em>
                {" "}— it’s <em>“what is my kid working through right now?”</em>
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    </section>
  );
}

/* ------------------------------------------------- honesty band */
function Honesty() {
  return (
    <section className="section honesty">
      <div className="wrap honesty-inner">
        <Eb muted>The most honest sentence in youth soccer</Eb>
        <p className="honesty-quote">
          &ldquo;You can lose a game on purpose for development &mdash; and at EvoToca,
          the coach doesn’t lose anything for it.&rdquo;
        </p>
        <p className="honesty-sub measure">
          Our Coach-Care model removes the win-now pressure that quietly warps youth
          soccer. When a coach’s livelihood doesn’t ride on Saturday’s result, they’re
          finally free to do the one thing you actually came for: develop your child.
        </p>
      </div>
    </section>
  );
}

/* ------------------------------------------------- FAQ */
function Faq() {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section faq" id="faq">
      <div className="wrap faq-wrap">
        <div className="faq-head">
          <Eb>For parents</Eb>
          <h2 className="h2">The questions we’d ask too.</h2>
          <p className="body">
            We’d rather have the honest conversation now than the disappointed one later.
          </p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={"faq-item" + (isOpen ? " open" : "")}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{f.q}</span>
                  <span className="faq-sign">{isOpen ? "−" : "+"}</span>
                </button>
                <div className="faq-a-wrap" style={{ maxHeight: isOpen ? 400 : 0 }}>
                  <p className="faq-a">{f.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ------------------------------------------------- CTA + footer */
function CtaBand({ t, onBook }) {
  const photo = t.style === "photo";
  return (
    <section className="section cta-band" id="join">
      {photo && <div className="cta-photo" style={{ backgroundImage: "url(photos/team-web.jpg)" }} />}
      <div className="wrap cta-inner">
        <Eb>Start with a free session</Eb>
        <h2 className="cta-h">Come see a session.<br />Bring your hardest questions.</h2>
        <p className="lede measure">
          No commitment, no sales pitch. Watch how we coach, meet the families, and
          we’ll tell you honestly whether EvoToca is right for your child.
        </p>
        <div className="hero-cta">
          <Button size="lg" onClick={onBook}>Try a free session</Button>
          <a href="mailto:contact@evotocafc.com"><Button size="lg" variant="outline">contact@evotocafc.com</Button></a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer-grid">
        <div className="footer-brand">
          <span className="brand-mark"><img src="assets/logo-mark.png" alt="" /></span>
          <div>
            <div className="brand-word">EvoToca <span>FC</span></div>
            <p className="footer-mission">The player is the blueprint. Soccer as a tool to develop leaders.</p>
          </div>
        </div>
        <div className="footer-cols">
          <div>
            <h4>Club</h4>
            <a href="#philosophy">Philosophy</a>
            <a href="#index">The Index</a>
            <a href="#parents">Parents</a>
            <a href="#faq">Parent FAQ</a>
          </div>
          <div>
            <h4>Contact</h4>
            <a href="mailto:contact@evotocafc.com">contact@evotocafc.com</a>
            <span>McKinney &amp; Allen, Texas</span>
            <span>Open, merit-based youth football</span>
          </div>
        </div>
      </div>
      <div className="wrap footer-base">
        <span>&copy; {new Date().getFullYear()} EvoToca FC</span>
        <span className="footer-thread">The behaviors that matter long-term are often invisible short-term.</span>
      </div>
    </footer>
  );
}

/* ------------------------------------------------- trial form modal */
const EMPTY_FORM = { pFirst: "", pLast: "", contact: "", cFirst: "", cLast: "", bMonth: "", bYear: "", prevTeam: "", motivation: "" };
const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const YEARS = (() => { const a = []; for (let y = 2021; y >= 2004; y--) a.push(y); return a; })();
const REQUIRED = ["pFirst", "pLast", "contact", "cFirst", "cLast", "bMonth", "bYear", "prevTeam", "motivation"];

// Where the trial form posts. Formspree works on Vercel (or any static host).
// Replace YOUR_FORM_ID with the ID from your Formspree form — see deployment notes.
const FORM_ENDPOINT = "https://formspree.io/f/mqeowepr";

function TrialModal({ open, onClose }) {
  const [form, setForm] = React.useState(EMPTY_FORM);
  const [errors, setErrors] = React.useState({});
  const [done, setDone] = React.useState(false);
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));

  React.useEffect(() => {
    if (!open) return undefined;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);

  React.useEffect(() => {
    if (!open) { const id = setTimeout(() => { setDone(false); setForm(EMPTY_FORM); setErrors({}); }, 250); return () => clearTimeout(id); }
    return undefined;
  }, [open]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    REQUIRED.forEach((k) => { if (!String(form[k]).trim()) errs[k] = true; });
    setErrors(errs);
    if (Object.keys(errs).length) {
      const first = document.querySelector(".ff--err .ff-input");
      if (first) first.focus();
      return;
    }
    // Submit to Formspree (works on Vercel / any static host). Submissions land in
    // your Formspree dashboard + inbox. The keys below become the labels there.
    const payload = {
      "Parent name": (form.pFirst + " " + form.pLast).trim(),
      "Email or phone": form.contact,
      "Player name": (form.cFirst + " " + form.cLast).trim(),
      "Birth month / year": form.bMonth + " " + form.bYear,
      "Previous / last team": form.prevTeam,
      "What brought them / hoping to gain": form.motivation,
      "_subject": "EvoToca FC \u2014 New free-session request from " + form.cFirst + " " + form.cLast,
    };
    if (form.contact.includes("@")) payload._replyto = form.contact;
    // Fire the Meta Pixel "Lead" event — this is the conversion ads optimize for.
    if (typeof window.fbq === "function") {
      window.fbq("track", "Lead", { content_name: "Free session request" });
    }
    fetch(FORM_ENDPOINT, {
      method: "POST",
      headers: { "Content-Type": "application/json", "Accept": "application/json" },
      body: JSON.stringify(payload),
    }).then(() => setDone(true)).catch(() => setDone(true));
  };

  const field = (k, label, props) => (
    <label className={"ff" + (errors[k] ? " ff--err" : "")}>
      <span className="ff-label">{label}<i>*</i></span>
      <input className="ff-input" value={form[k]} onChange={set(k)} {...(props || {})} />
    </label>
  );

  return (
    <div className="modal-scrim" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="modal" role="dialog" aria-modal="true" aria-label="Try a free session">
        <button className="modal-x" onClick={onClose} aria-label="Close" type="button">&times;</button>
        {done ? (
          <div className="modal-done">
            <div className="done-badge">&#10003;</div>
            <Eb>Request received</Eb>
            <h3 className="modal-title">Thanks &mdash; we&rsquo;ve got it.</h3>
            <p className="modal-sub">
              We&rsquo;ve received your request. We read every one personally and will be in
              touch within a couple of days to set up
              {" "}{form.cFirst || "your child"}&rsquo;s free session.
            </p>
            <Button size="lg" onClick={onClose}>Done</Button>
          </div>
        ) : (
          <form className="modal-form" onSubmit={submit} noValidate>
            <div className="modal-head">
              <Eb>Try a free session</Eb>
              <h3 className="modal-title">Tell us about your player</h3>
              <p className="modal-sub">No commitment. We read every one of these personally. Fields marked <i className="req-mark">*</i> are required.</p>
            </div>

            <fieldset className="ff-set">
              <legend>You</legend>
              <div className="ff-row">
                {field("pFirst", "Your first name", { autoComplete: "given-name" })}
                {field("pLast", "Your last name", { autoComplete: "family-name" })}
              </div>
              {field("contact", "Email or phone number", { autoComplete: "email" })}
            </fieldset>

            <fieldset className="ff-set">
              <legend>Your player</legend>
              <div className="ff-row">
                {field("cFirst", "Player\u2019s first name")}
                {field("cLast", "Player\u2019s last name")}
              </div>
              <div className="ff-row">
                <label className={"ff" + (errors.bMonth ? " ff--err" : "")}>
                  <span className="ff-label">Birth month<i>*</i></span>
                  <select className="ff-input ff-select" value={form.bMonth} onChange={set("bMonth")}>
                    <option value="">Select…</option>
                    {MONTHS.map((m) => <option key={m} value={m}>{m}</option>)}
                  </select>
                </label>
                <label className={"ff" + (errors.bYear ? " ff--err" : "")}>
                  <span className="ff-label">Birth year<i>*</i></span>
                  <select className="ff-input ff-select" value={form.bYear} onChange={set("bYear")}>
                    <option value="">Select…</option>
                    {YEARS.map((y) => <option key={y} value={y}>{y}</option>)}
                  </select>
                </label>
              </div>
              {field("prevTeam", "Previous or last team played for")}
            </fieldset>

            <fieldset className="ff-set">
              <legend>A little context</legend>
              <label className={"ff" + (errors.motivation ? " ff--err" : "")}>
                <span className="ff-label">What has brought you here to EvoToca FC, and what are you hoping to gain from being here?<i>*</i></span>
                <span className="ff-help">Answer one, the other, or both &mdash; in your own words.</span>
                <textarea className="ff-input ff-textarea ff-textarea--tall" rows={5} value={form.motivation} onChange={set("motivation")} />
              </label>
            </fieldset>

            {Object.keys(errors).length > 0 && <p className="ff-formerr">Please fill in the highlighted fields.</p>}
            <Button type="submit" size="lg" style={{ width: "100%" }}>Send my request</Button>
          </form>
        )}
      </div>
    </div>
  );
}

/* ------------------------------------------------- tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "balanced",
  "accent": "#FFCC00",
  "headline": "scoreboard",
  "density": "regular"
}/*EDITMODE-END*/;

const DENSITY_PAD = { compact: "56px", regular: "84px", comfy: "116px" };

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [formOpen, setFormOpen] = React.useState(false);
  const book = React.useCallback(() => setFormOpen(true), []);

  const rootStyle = {
    "--brand-yellow": t.accent,
    "--primary": t.accent,
    "--section-pad": DENSITY_PAD[t.density] || DENSITY_PAD.regular,
  };
  const showIndividual = t.style !== "minimal";

  return (
    <div className="site" style={rootStyle}>
      <Nav onBook={book} />
      <Hero t={t} onBook={book} />
      <Manifesto t={t} />

      <Feature
        id="blueprint"
        eyebrow="The player is the blueprint"
        heading="Your child gets a name, a focus, and a coach who’s building them."
        img="photos/coach-player-web.jpg"
        show={showIndividual}
        kicker="Individual attention, made visible — every session, every player."
      >
        <p className="body measure">
          At a big academy, the quiet fear is that your child becomes a number. Here,
          every player owns a named development focus they know and understand — and a
          coach who can tell you exactly what they’re working on and why.
        </p>
        <p className="body measure">
          That feeling — <em>&ldquo;my coach is building me, not a system&rdquo;</em> — is the
          one thing status clubs can’t sell and we can’t fake. It’s the whole point.
        </p>
      </Feature>

      <TheIndex t={t} onBook={book} />
      <Parents />
      <Honesty />
      <Faq />
      <CtaBand t={t} onBook={book} />
      <Footer />

      <TrialModal open={formOpen} onClose={() => setFormOpen(false)} />

      <TweaksPanel>
        <TweakSection label="Visual style" />
        <TweakRadio
          label="Imagery"
          value={t.style}
          options={["minimal", "balanced", "photo"]}
          onChange={(v) => setTweak("style", v)}
        />
        <TweakSection label="Brand" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={["#FFCC00", "#FFE14D", "#4ade80", "#60a5fa"]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSelect
          label="Hero headline"
          value={t.headline}
          options={[
            { value: "scoreboard", label: "Scoreboard can’t see" },
            { value: "blueprint", label: "Player is the blueprint" },
            { value: "build", label: "We build players" },
          ]}
          onChange={(v) => setTweak("headline", v)}
        />
        <TweakSection label="Layout" />
        <TweakRadio
          label="Density"
          value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweaksPanel>
    </div>
  );
}

function boot() {
  if (window.EvoTocaDesignSystem_20734f && window.useTweaks && window.TweaksPanel) {
    ReactDOM.createRoot(document.getElementById("root")).render(<App />);
  } else {
    setTimeout(boot, 40);
  }
}
boot();
