/* ============================================================
   BY ANY MEANS GTA · Home page sections
   Shared chrome (Nav, CtaBand, Footer, useReveal, StatNum)
   comes from gta/shared.jsx — loaded first.
   ============================================================ */

/* ---- HERO ---- */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero__media" aria-hidden="true" />
      <div className="hero__grain" aria-hidden="true" />
      <div className="hero__overlay" aria-hidden="true" />
      <div className="hero__inner">
        <div className="container">
          <div className="hero__eyebrow eyebrow eyebrow--rule">By Any Means GTA · Oakville, ON</div>
          <h1 className="hero__title">World-class training.<br />Built in the <em>GTA.</em></h1>
          <p className="hero__sub">It's <strong>more than basketball training</strong>, it's human development. A modern approach that helps athletes reach their potential on and off the court.</p>
          <div className="hero__ctas">
            <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="#programs">Explore Programs</a>
          </div>
          <div className="hero__loc">Oakville · Burlington · Mississauga · Halton Region</div>
        </div>
      </div>
    </section>);
}

/* ---- CLA FEATURE ---- */
function ClaFeature() {
  const ref = useReveal();
  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">Leading the future of training</div>
            <h2 className="feat__title">Pioneers of the <em>CLA approach</em> in the GTA.</h2>
            <p className="feat__body">We're the <strong>first basketball trainers using the Constraints-Led Approach</strong> in the GTA. A modern, scientifically smarter way to help players grow. Instead of just repeating drills, our training helps kids learn how to think, move, and make better decisions on the court.</p>
            <p className="feat__body">It's all about building <strong>confident, adaptable players</strong> who can handle the real game. A new wave of world-renowned training that's more fun, more real, and built for how today's game is played.</p>
            <div className="feat__note">If you're in <b>Oakville, Burlington, Mississauga</b>, or anywhere in the Halton Region and you're serious about basketball development, we want to meet your player.</div>
          </div>
          <div className="feat__media reveal">
            <img src="gta-assets/coach-teaching.jpg" alt="A BAM GTA coach teaching young players during a training session" />
            <span className="feat__media-tag">Constraints-Led Coaching</span>
          </div>
        </div>
      </div>
    </section>);
}

/* ---- STATS ---- */
const STATS = [
  ['6', 'Locations Worldwide'], ['20K+', 'Players & Coaches Educated'],
  ['40+', 'Countries Visited'], ['1M+', 'Online Community']];

function StatsBand() {
  const ref = useReveal();
  return (
    <section className="stats" ref={ref}>
      <div className="stats__head reveal">
        <div className="stats__eyebrow eyebrow eyebrow--rule">A snapshot of our journey</div>
        <h2 className="stats__title">Our Global <em>Impact.</em></h2>
      </div>
      <div className="stats__grid">
        {STATS.map(([n, l]) =>
          <div className="stat" key={l}><StatNum value={n} /><div className="stat__label">{l}</div></div>
        )}
      </div>
    </section>);
}

/* ---- WHO IT'S FOR ---- */
const WHO = [
  ['Become a key player', 'Develop the skills, mindset, and confidence to make a real impact every time you step on the court.'],
  ['Develop personally', 'Build the confidence to be aggressive, stay composed under pressure, and make winning plays.'],
  ['Join a family', "More than a training program. A family of over a million global hoopers, at every level."],
  ['Keep learning', 'Grow off the court too, with online programs and daily content across our platforms.'],
  ['Bring the culture', 'Every session is fueled by goal-driven athletes. Competitive, focused, built for growth.'],
  ['Join the movement', 'Be part of the fastest-growing basketball training program in the GTA and North America.']];

function WhoFor() {
  const ref = useReveal();
  return (
    <section className="sec sec--deep" ref={ref}>
      <div className="container">
        <div className="who__head reveal">
          <div className="who__eyebrow eyebrow eyebrow--rule">Who is this for?</div>
          <h2 className="who__title">We want players who want to<em>...</em></h2>
        </div>
        <div className="who__grid">
          {WHO.map(([t, d], i) =>
            <div className="whocard reveal" key={t}>
              <div className="whocard__num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="whocard__title">{t}</h3>
              <p className="whocard__desc">{d}</p>
            </div>
          )}
        </div>
        <div className="who__foot reveal">
          <div className="who__foot-line">Become a <em>BAM athlete.</em></div>
          <a className="btn btn--primary btn--lg" href={TRIAL}>Claim Your Free Trial <span className="btn__arrow">→</span></a>
        </div>
      </div>
    </section>);
}

/* ---- PROGRAMS ---- */
const PROGRAMS = [
  { grade: 'Grade 5 to 8', name: 'Elementary', desc: 'Weekly sessions with shooting, live play, and basketball IQ development.', img: 'gta-assets/youth-drive.jpg', cta: 'View Program', href: 'elementary.html' },
  { grade: 'Grade 9 to 12', name: 'High School', desc: 'Weekly shooting, live play, and personalized development plans for success.', img: 'gta-assets/hero-drive.jpg', cta: 'View Program', href: 'high-school.html' },
  { grade: 'Rep · Club', name: 'ADAPT Teams', desc: 'Comprehensive club program with practices, skills training, games, and film sessions.', img: 'gta-assets/adapt-trainers.jpg', cta: 'View Program', href: 'adapt.html' },
  { grade: 'Online · 150+ Countries', name: 'Virtual Academy', desc: 'Comprehensive online training platform trusted by athletes around the world.', img: 'gta-assets/app-va-home.png', va: true, cta: 'Get Access', href: 'https://byanymeansbball.com/virtual-academy' }];

function ProgramGrid() {
  const ref = useReveal();
  return (
    <section className="sec sec--black" id="programs" ref={ref}>
      <div className="container">
        <div className="programs__head reveal">
          <div className="programs__eyebrow eyebrow eyebrow--rule">Choose your program</div>
          <h2 className="programs__title">Find your <em>path.</em></h2>
        </div>
        <div className="programgrid">
          {PROGRAMS.map((p) =>
            <a className={`progcard reveal${p.va ? ' progcard--va' : ''}`} key={p.name} href={p.href}>
              <div className="progcard__media"><img src={p.img} alt={p.name + ' program'} /></div>
              <div className="progcard__body">
                <div className="progcard__grade">{p.grade}</div>
                <h3 className="progcard__name">{p.name}</h3>
                <p className="progcard__desc">{p.desc}</p>
                <span className="progcard__cta">{p.cta} <span>→</span></span>
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);
}

/* ---- PROCESS ---- */
const STEPS = [
  ['Book a free trial', "See if the program is the right fit. A chance for your athlete to train, meet the coaches, and experience how we work."],
  ['Attend the session', 'Your athlete joins a live training. We observe their skills, mindset, and goals while making sure they feel supported and challenged.'],
  ['Join the program', "If it's a good fit, we'll guide you through the next steps. Choose the plan that works best and start your journey with us."]];

function Process() {
  const ref = useReveal();
  return (
    <section className="sec process" ref={ref}>
      <div className="container">
        <div className="process__head reveal">
          <div className="sec__eyebrow eyebrow eyebrow--rule">Simple process</div>
          <h2 className="sec__title">Get started in <em>three steps.</em></h2>
        </div>
        <div className="process__grid">
          {STEPS.map(([t, d], i) =>
            <div className="pstep reveal" key={t}>
              <div className="pstep__num">{i + 1}</div>
              <h3 className="pstep__title">{t}</h3>
              <p className="pstep__desc">{d}</p>
            </div>
          )}
        </div>
        <div className="process__cta reveal">
          <a className="btn btn--primary btn--lg" href={TRIAL}>Book Your Free Trial Today <span className="btn__arrow">→</span></a>
        </div>
      </div>
    </section>);
}

/* ---- TESTIMONIALS ---- */
const TST = [
  ['My son has grown so much in just a few months, not just as a player but in confidence. The coaches actually care about who these kids become.', 'Marcus T.', 'Parent · Oakville'],
  ["The CLA approach is the real deal. He's reading the game better than ever and he genuinely looks forward to every session.", 'Priya S.', 'Parent · Burlington'],
  ['Best basketball decision we made. Real coaching, real community, and a culture that pushes our daughter to be her best.', 'Dwayne R.', 'Parent · Mississauga']];

function Testimonials() {
  const ref = useReveal();
  return (
    <section className="sec sec--black" ref={ref}>
      <div className="container">
        <div className="tst__head reveal">
          <div className="tst__eyebrow eyebrow eyebrow--rule">Testimonials</div>
          <h2 className="tst__title">What they're <em>saying.</em></h2>
        </div>
        <div className="tst__grid">
          {TST.map(([body, name, role]) =>
            <div className="tstcard reveal" key={name}>
              <span className="tstcard__quote" aria-hidden="true">&ldquo;</span>
              <div className="tstcard__stars" aria-label="5 out of 5 stars">★★★★★</div>
              <p className="tstcard__body">{body}</p>
              <div className="tstcard__by">
                <span className="tstcard__name">{name}</span>
                <span className="tstcard__role">{role}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

function App() {
  return (
    <React.Fragment>
      <Nav current="home" />
      <Hero />
      <ClaFeature />
      <StatsBand />
      <WhoFor />
      <ProgramGrid />
      <Process />
      <Testimonials />
      <CtaBand />
      <Footer />
    </React.Fragment>);
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);