/* ============================================================
   BY ANY MEANS GTA · Program pages (Elementary / High School / ADAPT)
   One data-driven page; body[data-program] selects the dataset.
   Shared chrome from gta/shared.jsx (loaded first).
   ============================================================ */

const PROGRAM_DATA = {
  elementary: {
    nav: 'programs',
    eyebrow: 'Elementary · Grade 5 to 8',
    title: 'Build the <em>foundation.</em>',
    sub: "The years where habits, confidence, and a love of the game are made. We help young players fall for basketball the right way.",
    hero: 'gta-assets/youth-drive.jpg',
    facts: [
      ['Ages', 'Grade 5 to 8'], ['Format', 'Weekly sessions'],
      ['Focus', 'Skills + live play'], ['Location', 'Oakville, ON']],
    overview: {
      eyebrow: 'The program',
      title: 'More than drills. <em>Real development.</em>',
      img: 'gta-assets/coach-teaching.jpg', tag: 'Skills + IQ',
      body: ["Weekly sessions built around shooting, live play, and basketball IQ development. Players get real reps in game-like situations, not just lines and cones, so the skills actually transfer to the court.",
        "Using the Constraints-Led Approach, we put young athletes in challenges that teach them to think, move, and make better decisions, building confident, adaptable players from the ground up."],
      note: 'Every session is fun, fast, and built for how kids actually learn the game.'},
    includes: [
      ['Shooting mechanics', 'Clean, repeatable form built early, with reps that hold up under game speed and pressure.'],
      ['Live play', 'Small-sided games where players read the floor, compete, and learn by doing.'],
      ['Basketball IQ', 'Spacing, decision-making, and reading the game, the things that separate good players.'],
      ['Ball handling', 'Control and confidence with both hands to create space and keep plays alive.'],
      ['Confidence', 'A supportive room where kids try, fail, adjust, and grow without fear.'],
      ['Family culture', 'A tight-knit environment where players push and encourage each other.']],
    quote: ["After only a few months, I've seen my son's <em>confidence</em> go up.", 'Parent · By Any Means GTA'],
    cta: { title: 'Start with a <em>free trial.</em>', sub: 'Bring your player in for a session. See the room, meet the coaches, feel the difference.' },
  },
  highschool: {
    nav: 'programs',
    eyebrow: 'High School · Grade 9 to 12',
    title: 'Train for the <em>next level.</em>',
    sub: "Personalized development for serious players, school team, rep, or college-bound. We build the skills, IQ, and mindset to compete when it counts.",
    hero: 'gta-assets/hero-drive.jpg',
    facts: [
      ['Ages', 'Grade 9 to 12'], ['Format', 'Weekly sessions'],
      ['Focus', 'Personalized plans'], ['Location', 'Oakville, ON']],
    overview: {
      eyebrow: 'The program',
      title: 'A plan built <em>around you.</em>',
      img: 'gta-assets/adapt-trainers.jpg', tag: 'Personalized dev',
      body: ["Weekly shooting and live play paired with a personalized development plan. We assess where your game is, define where it's going, and build the path to get there.",
        "Our Constraints-Led Approach trains players to read the game, adjust under pressure, and make winning plays, the exact skills that show up when the lights are brightest."],
      note: 'For athletes serious about making the team, earning minutes, and playing at the next level.'},
    includes: [
      ['Personalized plan', 'A development roadmap built around your goals, position, and game.'],
      ['Advanced shooting', 'Game-speed shooting off the catch, off the dribble, and under contest.'],
      ['Live play', 'Competitive reps that translate directly to school and rep season.'],
      ['Decision-making', 'Read defenses, manage tempo, and make the right play under pressure.'],
      ['Strength + composure', 'Play aggressive, stay composed, and own pressure situations.'],
      ['Mentorship', 'Coaches who have played and trained at the highest levels, in your corner.']],
    quote: ["Zoran is detail oriented and a <em>visionary</em> when it comes to his training style.", 'Professional Player · By Any Means'],
    cta: { title: 'Take your game <em>further.</em>', sub: 'Book a free trial and build the plan that gets you to the next level.' },
  },
  adapt: {
    nav: 'adapt',
    eyebrow: "ADAPT Academy · The GTA's rep program",
    title: 'Adapt. Overcome. <em>Find a way.</em>',
    sub: "Our rep program is named for our philosophy: athletes learn to adjust, find solutions, and overcome challenges, in basketball and in life.",
    hero: 'gta-assets/adapt-trainers.jpg',
    facts: [
      ['Ages', 'Grade 4 and up'], ['Style', 'European-inspired'],
      ['Format', 'Full club program'], ['Focus', 'Player development first']],
    overview: {
      eyebrow: 'Why ADAPT',
      title: 'A full HQ for <em>human development.</em>',
      img: 'gta-assets/mentor-handshake.jpg', tag: 'Battle-tested',
      body: ["ADAPT is a full headquarters for basketball and human development: team training, skill work, psychological growth, film breakdown, conditioning, and mentorship, all within one program.",
        "Before anything else, our mission is to develop better humans. We create adaptable athletes and foster a true family-style environment where players grow with confidence, support, and guidance on and off the court."],
      note: 'Battle-tested methods that prepare young men and women for whatever the future has to offer.'},
    includes: [
      ['Team practices', 'Structured, European-style practices that prioritize development over results.'],
      ['Skill development', 'Individual work that sharpens every part of your game.'],
      ['Mental coaching', 'Psychological growth and resilience to compete at the next level with confidence.'],
      ['Film breakdown', 'See the game through a coach\u2019s eyes and learn to read it yourself.'],
      ['Conditioning', 'Athletic development that keeps you strong, fast, and durable.'],
      ['Mentorship', 'Guidance from leaders shaped by 12 European basketball cultures.']],
    compare: {
      eyebrow: 'A different approach',
      title: 'Player development, <em>not just winning.</em>',
      them: { tag: 'Traditional AAU', title: 'Built around <em>results.</em>', items: [
        'Prioritizes winning and rankings over long-term growth',
        'Players change clubs and chase the next tournament',
        'More games than practice, less skill development',
        'Short-term results over the bigger picture']},
      us: { tag: 'The ADAPT way', title: 'Built around <em>growth.</em>', items: [
        'Player development first, preparing athletes for higher levels',
        'Players stay with the club longer and grow together',
        'Train more than you play, focused on skill and teamwork',
        'Basketball IQ, adaptability, and resilience for the long run']},
    },
    quote: ["There is no comparison in coaching and the overall experience. ADAPT athletes learn the <em>right way</em> to play.", 'Parent · ADAPT Academy'],
    cta: { title: 'Join the <em>movement.</em>', sub: "Join the GTA's most innovative basketball program and transform your game with European-inspired training." },
  },
};

const P = PROGRAM_DATA[document.body.dataset.program] || PROGRAM_DATA.elementary;

/* ---- HERO ---- */
function ProgramHero() {
  return (
    <section className="subhero" id="top">
      <div className="subhero__media" style={{ backgroundImage: `url('${P.hero}')` }} aria-hidden="true" />
      <div className="subhero__overlay" aria-hidden="true" />
      <div className="subhero__inner">
        <div className="container">
          <div className="subhero__eyebrow eyebrow eyebrow--rule">{P.eyebrow}</div>
          <h1 className="subhero__title" dangerouslySetInnerHTML={{ __html: P.title }} />
          <p className="subhero__sub">{P.sub}</p>
          <div className="hero__ctas" style={{ marginTop: '34px' }}>
            <a className="btn btn--primary btn--lg" href={TRIAL}>Book a Free Trial <span className="btn__arrow">→</span></a>
            <a className="btn btn--ink btn--lg" href="#includes">What's Included</a>
          </div>
        </div>
      </div>
    </section>);
}

/* ---- FACT BAR ---- */
function FactBar() {
  return (
    <section className="factbar">
      <div className="factbar__grid">
        {P.facts.map(([k, v]) =>
          <div className="fact" key={k}><div className="fact__k">{k}</div><div className="fact__v">{v}</div></div>
        )}
      </div>
    </section>);
}

/* ---- OVERVIEW ---- */
function Overview() {
  const ref = useReveal(); const o = P.overview;
  return (
    <section className="feat sec--black" ref={ref}>
      <div className="container">
        <div className="feat__inner">
          <div className="feat__copy reveal">
            <div className="feat__eyebrow eyebrow eyebrow--rule">{o.eyebrow}</div>
            <h2 className="feat__title" dangerouslySetInnerHTML={{ __html: o.title }} />
            {o.body.map((b, i) => <p className="feat__body" key={i}>{b}</p>)}
            <div className="feat__note">{o.note}</div>
          </div>
          <div className="feat__media reveal">
            <img src={o.img} alt={P.eyebrow + ' training'} />
            <span className="feat__media-tag">{o.tag}</span>
          </div>
        </div>
      </div>
    </section>);
}

/* ---- INCLUDES ---- */
function Includes() {
  const ref = useReveal();
  return (
    <section className="sec sec--deep" id="includes" ref={ref}>
      <div className="container">
        <div className="includes__head reveal">
          <div className="programs__eyebrow eyebrow eyebrow--rule">What's included</div>
          <h2 className="programs__title">Inside the <em>program.</em></h2>
        </div>
        <div className="includes__grid">
          {P.includes.map(([t, d], i) =>
            <div className="inccard reveal" key={t}>
              <div className="inccard__num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="inccard__t">{t}</h3>
              <p className="inccard__d">{d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---- COMPARE (ADAPT only) ---- */
function Compare() {
  const ref = useReveal(); const c = P.compare; if (!c) return null;
  const Col = (data, mod) =>
    <div className={`compcol compcol--${mod}`}>
      <span className="compcol__tag">{data.tag}</span>
      <h3 className="compcol__title" dangerouslySetInnerHTML={{ __html: data.title }} />
      {data.items.map((it, i) =>
        <div className="compli" key={i}>
          <span className="compli__mark">{mod === 'us' ? '✓' : '✕'}</span>
          <span>{it}</span>
        </div>
      )}
    </div>;
  return (
    <section className="sec sec--black" ref={ref}>
      <div className="container">
        <div className="includes__head reveal">
          <div className="programs__eyebrow eyebrow eyebrow--rule">{c.eyebrow}</div>
          <h2 className="programs__title" dangerouslySetInnerHTML={{ __html: c.title }} />
        </div>
        <div className="compare__grid reveal">
          {Col(c.them, 'them')}
          {Col(c.us, 'us')}
        </div>
      </div>
    </section>);
}

/* ---- BIG QUOTE ---- */
function BigQuote() {
  const ref = useReveal();
  return (
    <section className="bigquote" ref={ref}>
      <div className="container reveal">
        <div className="bigquote__mark" aria-hidden="true">&ldquo;</div>
        <p className="bigquote__text" dangerouslySetInnerHTML={{ __html: P.quote[0] }} />
        <div className="bigquote__by">{P.quote[1]}</div>
      </div>
    </section>);
}

/* ---- ADAPT SIGNUP (replaces the closing CTA on the ADAPT page) ---- */
function AdaptSignup() {
  const ref = useReveal();
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState(null);
  const [form, setForm] = useState({ parent: '', player: '', email: '', phone: '', birthYear: '' });
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true); setError(null);
    try {
      // form_type 'adapt' → leads API tags the contact 'adaptformfilled'
      // (via the GTA website-form entry point) → fires the ADAPT automation.
      await submitLead({
        formType: 'adapt',
        name: form.parent,
        email: form.email,
        phone: form.phone,
        fields: {
          message: [
            form.player ? `Athlete: ${form.player}` : null,
            form.birthYear ? `Athlete birth year: ${form.birthYear}` : null,
          ].filter(Boolean).join('\n'),
          athlete_name: form.player || null,
          athlete_birth_year: form.birthYear || null,
        },
      });
      setSent(true);
    } catch (err) {
      setError("Something went wrong. Please try again, or email info@byanymeanstoronto.ca");
    } finally {
      setSending(false);
    }
  };
  return (
    <section className="ctaband signup" ref={ref}>
      <div className="ctaband__glow" aria-hidden="true" />
      <div className="container signup__inner reveal">
        <div className="ctaband__eyebrow eyebrow eyebrow--rule">ADAPT Academy</div>
        <h2 className="signup__title">Join <em>ADAPT.</em></h2>
        {sent ? (
          <div className="signup__success">
            <div className="signup__success-mark" aria-hidden="true">&#10003;</div>
            <h3>You're in.</h3>
            <p>Thanks{form.parent ? `, ${form.parent.split(' ')[0]}` : ''}. A coach will reach out about next steps for {form.player || 'your athlete'}.</p>
          </div>
        ) : (
          <React.Fragment>
            <p className="signup__sub">Tell us about your athlete and we'll get you started. Drop your details and a coach will follow up about ADAPT.</p>
            <form className="signup__form" onSubmit={submit}>
              <div className="signup__row">
                <div className="field">
                  <label className="field__label" htmlFor="su-parent">Parent name</label>
                  <input id="su-parent" type="text" required placeholder="Parent or guardian" value={form.parent} onChange={set('parent')} />
                </div>
                <div className="field">
                  <label className="field__label" htmlFor="su-phone">Phone</label>
                  <input id="su-phone" type="tel" required placeholder="(289) 000-0000" value={form.phone} onChange={set('phone')} />
                </div>
              </div>
              <div className="signup__row">
                <div className="field">
                  <label className="field__label" htmlFor="su-email">Email</label>
                  <input id="su-email" type="email" required placeholder="you@email.com" value={form.email} onChange={set('email')} />
                </div>
                <div className="field">
                  <label className="field__label" htmlFor="su-player">Athlete name</label>
                  <input id="su-player" type="text" required placeholder="Athlete's name" value={form.player} onChange={set('player')} />
                </div>
              </div>
              <div className="signup__row">
                <div className="field">
                  <label className="field__label" htmlFor="su-year">Athlete birth year</label>
                  <input id="su-year" type="text" inputMode="numeric" required maxLength="4" placeholder="e.g. 2012" value={form.birthYear} onChange={set('birthYear')} />
                </div>
                <div className="field" aria-hidden="true"></div>
              </div>
              {error && <p className="signup__error" style={{ color: '#e98b78', fontSize: '14px', marginTop: '4px' }}>{error}</p>}
              <button className="btn btn--primary btn--lg signup__submit" type="submit" disabled={sending}>{sending ? 'Sending…' : <React.Fragment>Get Started <span className="btn__arrow">&rarr;</span></React.Fragment>}</button>
            </form>
          </React.Fragment>
        )}
      </div>
    </section>);
}

const IS_ADAPT = document.body.dataset.program === 'adapt';

function App() {
  return (
    <React.Fragment>
      <Nav current={P.nav} />
      <ProgramHero />
      <FactBar />
      <Overview />
      <Includes />
      <Compare />
      <BigQuote />
      {IS_ADAPT
        ? <AdaptSignup />
        : <CtaBand title={P.cta.title} sub={P.cta.sub} secondaryLabel="All Programs" secondaryHref="index.html#programs" />}
      <Footer />
    </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);