/* Julio Cesar Soccer Camp — homepage. Sections follow the required order:
   header, hero, featured opportunity, trust strip, approach, programs, session,
   Julio, stories, starting a conversation, footer. */
const { SiteFooter, WaveField, WaveSplit, AngularField, Button, Tag, SectionHeading, MediaFigure, MetricBand } = window.JCBrasilTourLinhaCarioca_903c90;

const HOME_PHOTOS = '/jc-soccer-camp/uploads/Media/Homepage/';
const BRAND_LOGOS = '/jc-soccer-camp/assets/clubs/';
const TOUR_PHOTOS = '/jc-soccer-camp/uploads/Media/JC-Brasil-Tour/';
const TESTIMONIAL_PHOTOS = '/jc-soccer-camp/uploads/Media/Testimonials/';

const HOME_NAV = [
  { label: 'Upcoming', href: '#upcoming' },
  { label: 'Programs', href: '#programs' },
  { label: 'About', href: '#julio' },
  { label: 'Testimonials', href: '#stories' },
  { label: 'FAQs', href: '#faq' },
  { label: 'JC Brasil Tour', href: '/jc-soccer-camp/brasil-tour/' }
];

const TRUST = [
  ['whistle', '1999', 'Coaching since'],
  ['ball', '50+', 'Soccer camps run'],
  ['brazil', '2010', 'Leading tours to Brazil'],
  ['athlete', '1000+', 'Athletes trained']
];

const PILLARS = [
  ['Make the fundamentals reliable.', 'Build receiving, passing, finishing, defending, and movement through deliberate repetition and clear correction.'],
  ['Bring the skill into pressure.', 'Use technique in competitive exercises where time, space, teammates, and opponents keep changing the answer.'],
  ['Recognize the game earlier.', 'Learn to see positioning, pressure, options, and the next moment before the opportunity disappears.'],
  ['Leave with a clear next step.', 'Direct feedback helps players understand what worked, what needs attention, and how to keep improving after the session ends.']
];

const SESSION_STEPS = [['ball', 'Connect with the ball.'], ['training', 'Sharpen one technical idea.'], ['clock', 'Make decisions at game speed.'], ['futsal', 'Compete in realistic play.'], ['whistle', 'Leave with feedback you can use.']];

const TIMELINE = [
  ['1989-1994', 'Vasco da Gama development', ['/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.35.08.png', '/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.38.54.png'], 'Julio in the Vasco da Gama youth setup'],
  ['1994-1998', 'Professional club experience in Brazil', ['/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.35.23.png', '/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.36.09.png'], 'Julio with professional club squads in Brazil'],
  ['1999-2002', 'USL D3 Pro League MVP and scoring champion', ['/jc-soccer-camp/uploads/home-julio-brazil-archive-action.jpg', '/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.40.30.png'], 'Julio during his professional career in the United States'],
  ['Since 1999', 'Coaching young players', ['/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.52.38.png', '/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.53.01.png'], 'Julio coaching a group of young players on the field'],
  ['Since 2010', 'Leading Brasil tour experiences', ['/jc-soccer-camp/uploads/pasted-1786913057935-0.png', '/jc-soccer-camp/uploads/CleanShot 2026-08-16 at 16.42.50.png'], 'A tour group in Rio de Janeiro']
];


const HERO_CLIPS = ['/jc-soccer-camp/uploads/julio coaching.mp4'];

function HomeHero({ paused }) {
  const videoRef = React.useRef(null);
  const [videoReady, setVideoReady] = React.useState(false);
  const [clip, setClip] = React.useState(0);
  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    v.volume = 0;
    if (paused) { v.pause(); v.currentTime = 0; } else { const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  }, [paused, clip]);
  const attachVideo = (el) => {
    videoRef.current = el;
    if (!el) return;
    /* React does not render `muted` as an attribute, so set it imperatively before load
       and disable any audio track the file carries. */
    el.setAttribute('muted', '');
    el.defaultMuted = true;
    el.muted = true;
    el.volume = 0;
    const tracks = el.audioTracks;
    if (tracks) { for (let i = 0; i < tracks.length; i++) { tracks[i].enabled = false; } }
  };
  const nextClip = () => setClip((i) => (i + 1) % HERO_CLIPS.length);
  void nextClip;
  return (
    <section className="jc-hero jc-field-invert" style={{ background: 'var(--areia)' }}>
      <div className="jc-hero-copy">
        <div style={{ display: 'grid', gap: 'var(--space-6)', justifyItems: 'start' }}>          <p style={{ ...jcLayout.eyebrow, margin: 0, color: 'var(--text-muted)' }}>Soccer camps, player development &amp; team experiences</p>
          <h1 className="jc-hero-title" style={{ ...jcLayout.display('2xl'), fontWeight: 'var(--weight-extrabold)' }}>
            Build the skills. See the game. Become a more <span style={{ color: 'var(--copacabana)' }}>complete player.</span>
          </h1>
          <p style={{ margin: 0, maxWidth: '460px', fontSize: 'var(--text-lg)' }}>
            Camps, futsal, player development, team programs, and Brazil soccer tours, all led by Julio Cesar.
          </p>
          <div className="jc-cta-row" style={{ ...jcLayout.row, flexWrap: 'nowrap' }}>
            <Button variant="primary" href="#programs">Find the Right Program</Button>
            <Button variant="secondary" href="#programs">See Programs &amp; Dates</Button>
          </div>
          <div className="jc-cred" style={{ margin: 'var(--space-4) 0 0', paddingTop: 'var(--space-6)', borderTop: 'var(--border-hairline) solid var(--line)' }}>
            <div>
              <p className="jc-cred-label">Former professional player</p>
              <div className="jc-crests">
                <img src={BRAND_LOGOS + 'usl.png'} alt="USL" style={{ height: '22px' }} />
                <img src={BRAND_LOGOS + 'brasileirao.png'} alt="Brasileirão" style={{ height: '36px' }} />
              </div>
            </div>
            <div>
              <p className="jc-cred-label">Clubs that trust Julio</p>
              <div className="jc-crests">
                <img src={BRAND_LOGOS + 'vasco.png'} alt="Vasco da Gama" style={{ height: '32px' }} />
                <img src={BRAND_LOGOS + 'flamengo.png'} alt="Flamengo" style={{ height: '32px' }} />
                <img src={BRAND_LOGOS + 'fluminense.png'} alt="Fluminense" style={{ height: '32px' }} />
                <img src={BRAND_LOGOS + 'botafogo.png'} alt="Botafogo" style={{ height: '32px' }} />
              </div>
            </div>
          </div>
          <OpportunityPanel page="home" formHref="#start" inline image="/jc-soccer-camp/uploads/iStock-2259731068.jpg" />
        </div>
      </div>
      <div className="jc-hero-media">
        <img src={HOME_PHOTOS + 'home-hero-julio-field-explanation.jpg'} alt="Julio explaining a training exercise to players on the field" style={{ opacity: videoReady && !paused ? 0 : 1 }} />
        {HERO_CLIPS.length ? <video ref={attachVideo} key={HERO_CLIPS[clip]} src={HERO_CLIPS[clip]} autoPlay muted loop playsInline disableRemotePlayback aria-label="Julio coaching a session" onLoadedMetadata={(e) => { e.target.muted = true; e.target.volume = 0; }} onCanPlay={() => setVideoReady(true)} style={{ opacity: videoReady && !paused ? 1 : 0 }} /> : null}
      </div>
    </section>
  );
}

/* Brazil flag paired with the ball for the tour metric. The flag is a national symbol,
   not an invented brand icon. */
function BrazilBall() {
  return (
    <svg width="30" height="21" viewBox="0 0 30 21" aria-hidden="true" style={{ display: 'block', flex: '0 0 auto' }} fill="none" stroke="currentColor" strokeWidth="1.4">
      <rect x="0.7" y="0.7" width="28.6" height="19.6" />
      <path d="M15 3.2 26.4 10.5 15 17.8 3.6 10.5z" />
      <circle cx="15" cy="10.5" r="4.2" />
      <path d="M11.2 8.9c2.6-.8 5.6-.2 7.6 1.6" />
    </svg>
  );
}

function TrustStrip() {
  return (
    <section aria-label="Julio's record" className="jc-field-invert" style={{ background: 'var(--copacabana)', color: 'var(--areia)' }}>
      <div style={{ width: 'min(var(--max-width), calc(100% - 56px))', margin: '0 auto' }}>
        <ul className="jc-trust">
          {TRUST.map(([icon, figure, label]) => (
            <li key={label}>
              {icon === 'brazil' ? <BrazilBall /> : <Glyph name={icon} size={26} />}
              <p style={{ margin: 0 }}>
                <span className="jc-trust-figure">{figure}</span>
                <span className="jc-trust-label">{label}</span>
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

const UPCOMING = [
  { program: 'Julio Cesar Winter Futsal Camp', status: '', dates: ['Dec 1, 2026 – Feb 10, 2027'], tone: 'sol', note: 'Limited space', badge: 'Ages 9-17', body: 'Fast-paced group training built around close control, movement, quick decisions, and competitive play in tight spaces.', cta: 'Book a Place', image: '/jc-soccer-camp/uploads/pasted-1786992936834-0.png', alt: 'A young player dribbling between poles on a futsal court' },
  { program: 'Summer Skills Camp', status: 'Next dates being planned', dates: ['Aug 24–Sep 2'], tone: 'urgent', body: 'Focused technical work, game-speed decisions, and competitive exercises that help players carry new skills into matches.', cta: 'Get Summer Camp Dates', image: '/jc-soccer-camp/uploads/pasted-1786909195077-0.png', alt: 'Players competing in a rondo at a summer camp session' },
  { program: 'Private & Small-Group Training', status: 'Openings arranged with Julio', body: "Focused sessions shaped around the player's current level, goals, schedule, and next area of growth.", cta: 'Ask About an Opening', image: '/jc-soccer-camp/uploads/pasted-1786908689771-0.png', alt: 'Julio watching two players contest a header during a focused session' }
];

function UpcomingSection() {
  return (
    <section id="upcoming" className="jc-bleed jc-capped" style={{ ...jcLayout.bleed, background: 'var(--areia-warm)' }}>
      <SectionHead eyebrow="01 / Upcoming local programs" title="The next chance to train with Julio."
        note="Julio runs camps and clinics throughout the year. Browse what is being planned, join updates for a specific program, or ask which option fits your player." />
      <div className="jc-upcoming">
        {UPCOMING.map((p) => (
          <article key={p.program} className="jc-up-card">
            <div className="jc-up-copy">
              {p.note ? <p className="jc-up-note">{p.note}</p> : <p className="jc-up-status">{p.status}</p>}
              {p.dates && (
                <ul className={'jc-up-dates' + (p.tone === 'urgent' ? ' is-urgent' : '')}>
                  {p.dates.map((d) => <li key={d}>{d}</li>)}
                </ul>
              )}
              <h3 style={{ ...jcLayout.display('sm'), margin: 0 }}>{p.program}</h3>
              <p style={{ margin: 0, fontSize: 'var(--text-sm)', textWrap: 'pretty' }}>{p.body}</p>
              <Button variant="tertiary" href="#start">{p.cta}</Button>
            </div>
            <div className="jc-up-media">
              <img className="jc-up-img" src={p.image} alt={p.alt} />
              {p.badge && <span className="jc-up-badge"><i>{p.badge}</i></span>}
            </div>
          </article>
        ))}
      </div>
      <div className="jc-up-foot">
        <Button variant="primary" href="#programs">View All Programs</Button>
      </div>
    </section>
  );
}

const PRINCIPLES = [
  { title: 'Make the fundamentals reliable.', body: 'Build receiving, passing, finishing, defending, and movement through deliberate repetition and clear correction.', image: '/jc-soccer-camp/uploads/pasted-1786992875597-0.png', alt: 'A player controlling the ball in a technical exercise while coaches watch' },
  { title: 'Bring the skill into pressure.', body: 'Use technique in competitive exercises where time, space, teammates, and opponents keep changing the answer.', image: '/jc-soccer-camp/uploads/CleanShot%202026-08-17%20at%2015.12.55.png', alt: 'A player taking on defenders in a competitive small-sided game' },
  { title: 'Recognize the game earlier.', body: 'Learn to see positioning, pressure, options, and the next moment before the opportunity disappears.', image: '/jc-soccer-camp/uploads/pasted-1786989872627-0.png', alt: 'Julio talking through a session with players seated on the field' },
  { title: 'Leave with a clear next step.', body: 'Direct feedback helps players understand what worked, what needs attention, and how to keep improving after the session ends.', image: '/jc-soccer-camp/uploads/pasted-1786990616592-0.png', alt: 'Julio addressing the group in a huddle at the end of a session' }
];

function ApproachSection() {
  return (
    <section id="approach" className="jc-bleed jc-capped" style={jcLayout.bleed}>
      <SectionHead eyebrow="03 / The JC approach" title="Technique matters. Knowing when to use it matters more."
        note="A clean touch matters. So does recognizing pressure, finding the next pass, and staying composed when the game speeds up. Julio connects technical work to the decisions players actually face in matches." />
      <div className="jc-principles">
        {PRINCIPLES.map((p, i) => (
          <article key={p.title} className="jc-principle">
            <img src={p.image} alt={p.alt} />
            <div className="jc-principle-copy">
              <span className="jc-principle-num">{'0' + (i + 1)}</span>
              <h3 style={{ ...jcLayout.display('sm'), margin: 0 }}>{p.title}</h3>
              <p style={{ margin: 0, fontSize: 'var(--text-sm)', textWrap: 'pretty' }}>{p.body}</p>
            </div>
          </article>
        ))}
      </div>
      <div className="jc-rhythm">
        <p style={{ ...jcLayout.label, margin: 0 }}>What a JC session feels like</p>
        <ol className="jc-rhythm-row">
          {SESSION_STEPS.map(([icon, step]) => (
            <li key={step}>
              <Glyph name={icon} size={26} />
              <p style={{ margin: 0, fontSize: 'var(--text-sm)', textWrap: 'pretty' }}>{step}</p>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

const PROGRAM_TRACKS = [
  {
    tab: 'Seasonal Camps & Clinics',
    heading: 'Build momentum in a competitive group.',
    body: 'Summer and winter camps, futsal camps, and focused skills clinics combine technical repetition, fast decisions, and competitive play. Each session is shaped around the age and level of the group.',
    list: ['Summer camps', 'Winter camps', 'Futsal camps', 'Skills and technical clinics'],
    cta: 'Get Upcoming Camp Dates',
    image: '/jc-soccer-camp/assets/home-camps-team-photo.png',
    alt: 'Team photo of a camp group with coaching staff'
  },
  {
    tab: 'Private & Small-Group Development',
    heading: 'Make the work personal.',
    body: 'One-on-one and small-group sessions focus on the details holding a player back and the habits that can move the game forward. Players leave with direct feedback and a clearer plan for what to work on next.',
    list: ['One-on-one training', 'Small-group development', 'Focused technical work'],
    cta: 'Ask About Player Development',
    image: '/jc-soccer-camp/uploads/pasted-1786991700682-0.png',
    focus: '30% center',
    alt: 'A player working on the ball while Julio watches from a few yards away'
  },
  {
    tab: 'Team Training & Experiences',
    heading: 'Give the whole group a shared standard.',
    body: 'Custom sessions and camp experiences for clubs, school teams, academies, and college programs. Julio works with coaches to match the training, competition, and schedule to the roster.',
    list: ['Team clinics', 'Training blocks', 'Futsal sessions', 'Team travel preparation'],
    cta: 'Plan a Team Program',
    image: HOME_PHOTOS + 'home-team-talk-bench.png',
    alt: 'Julio addressing a full squad on the bench'
  }
];

function Check() {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
      <path d="m2.5 8.5 3.6 3.6L13.5 4.6" />
    </svg>
  );
}

function ProgramsSection() {
  const [open, setOpen] = React.useState(0);
  const [cycling, setCycling] = React.useState(true);
  React.useEffect(() => {
    if (!cycling || open < 0) return;
    const id = setTimeout(() => setOpen((o) => (o + 1) % PROGRAM_TRACKS.length), 9000);
    return () => clearTimeout(id);
  }, [open, cycling]);
  return (
    <section id="programs" className="jc-bleed jc-capped" style={{ ...jcLayout.bleed, paddingTop: 0, paddingBottom: 0, background: 'var(--white)' }}>
      <div className="jc-prog-split">
        <div className="jc-prog-intro">
          <p style={{ ...jcLayout.eyebrow, margin: 0, color: 'var(--text-muted)' }}>02 / Programs</p>
          <h2 style={{ ...jcLayout.display('xl'), margin: 'var(--space-6) 0 0' }}>One coach. More than one way to grow.</h2>
          <p style={{ margin: 'var(--space-6) 0 0', fontSize: 'var(--text-base)', maxWidth: '34ch', textWrap: 'pretty' }}>
            Choose the environment that fits the player's goals, schedule, and preferred way to learn. Not sure where to begin? Julio will recommend a starting point.
          </p>
        </div>
        <div className="jc-prog-tracks">
          {PROGRAM_TRACKS.map((t, i) => {
            const isOpen = i === open;
            return (
              <div key={t.tab} className={'jc-prog-track' + (isOpen ? ' is-open' : '')}>
                {isOpen && cycling ? <span key={'p' + open} className="jc-prog-progress" aria-hidden="true"><i></i></span> : null}
                <h3 style={{ margin: 0 }}>
                  <button type="button" className="jc-prog-tab" aria-expanded={isOpen} onClick={() => { setCycling(false); setOpen(isOpen ? -1 : i); }}>
                    <span>{t.tab}</span>
                    <span className="jc-prog-sign" aria-hidden="true">{isOpen ? '–' : '+'}</span>
                  </button>
                </h3>
                {isOpen && (
                  <div className="jc-prog-panel">
                    <div className="jc-prog-panel-copy">
                      <p className="jc-prog-heading">{t.heading}</p>
                      <p style={{ margin: 0, fontSize: 'var(--text-sm)', textWrap: 'pretty' }}>{t.body}</p>
                      <ul className="jc-prog-list">
                        {t.list.map((item) => <li key={item}><Check /><span>{item}</span></li>)}
                      </ul>
                      <Button variant="secondary" href="#start">{t.cta}</Button>
                    </div>
                    <img className="jc-prog-img" src={t.image} alt={t.alt} style={t.focus ? { objectPosition: t.focus } : null} />
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function TourBand() {
  return (
    <section className="jc-bleed jc-tour-band" style={{ ...jcLayout.bleed, background: 'var(--copacabana)', color: 'var(--areia)' }}>
      <div className="jc-cols-2" style={{ alignItems: 'center' }}>
        <div>
          <p style={jcLayout.eyebrow}>Flagship Experience | JC Brasil Tour</p>
          <h2 style={{ ...jcLayout.display('lg'), textWrap: 'pretty' }}>More than a trip. A week inside Brazilian football.</h2>
          <p style={{ margin: 'var(--space-7) 0 0', maxWidth: '52ch', fontSize: 'var(--text-lg)', textWrap: 'pretty' }}>
            Train, compete, experience professional soccer, futsal, and explore Rio with teammates, coaches, and family.
          </p>
          <ul className="jc-tour-facts">
            {[
              ['Summer 2027', <path d="M3 7h14M6 3v3M14 3v3M3 5h14v12H3z" />],
              ['Ages 12-18', <g><circle cx="10" cy="6.5" r="3" /><path d="M4 17c0-3.3 2.7-5.5 6-5.5s6 2.2 6 5.5" /></g>],
              ['Parents welcome', <g><circle cx="7" cy="7" r="2.6" /><circle cx="14" cy="8" r="2" /><path d="M2 17c0-2.8 2.2-4.8 5-4.8s5 2 5 4.8M13 12.4c2.6 0 5 1.6 5 4.6" /></g>],
            ].map(([f, icon]) => (
              <li key={f}>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">{icon}</svg>
                {f}
              </li>
            ))}
          </ul>
          <div className="jc-tour-notes">
            <div>
              <p style={{ ...jcLayout.label, color: 'var(--paper-80)', margin: 0 }}>Supervision</p>
              <p style={{ margin: '10px 0 0', fontSize: 'var(--text-sm)' }}>Led by Julio Cesar Soccer Camp, chaperones, and designated drivers.</p>
            </div>
            <div>
              <p style={{ ...jcLayout.label, color: 'var(--paper-80)', margin: 0 }}>Past tour experiences have included</p>
              <div className="jc-tour-crests">
                <img src={BRAND_LOGOS + 'fluminense.png'} alt="Fluminense" />
                <img src={BRAND_LOGOS + 'flamengo.png'} alt="Flamengo" />
                <img src={BRAND_LOGOS + 'botafogo.png'} alt="Botafogo" />
                <img src={BRAND_LOGOS + 'vasco.png'} alt="Vasco da Gama" />
              </div>
            </div>
          </div>
          <div className="jc-cta-row" style={{ ...jcLayout.row, marginTop: 'var(--space-7)', flexWrap: 'nowrap' }}>
            <Button variant="primary" href="/jc-soccer-camp/brasil-tour/">Explore JC Brasil Tour</Button>
            <span className="jc-btn-on-blue"><Button variant="quietOnDark" href="#start">Ask About Bringing a Team</Button></span>
          </div>
        </div>
        <div className="jc-tour-collage">
          <MediaFigure src="/jc-soccer-camp/assets/tour-group-sugarloaf.jpg" alt="A past tour group together in front of Sugarloaf Mountain in Rio" ratio="16 / 9" />
          <div className="jc-tour-collage-row">
            <MediaFigure src="/jc-soccer-camp/uploads/CleanShot%202026-08-17%20at%2014.11.08-e94eb62e.png" alt="A tour group together at a Rio overlook above the bay" ratio="1 / 1" />
            <MediaFigure src="/jc-soccer-camp/assets/tour-walking-out.png" alt="Players in Brazilian kit walking toward the bench" ratio="1 / 1" />
            <MediaFigure src="/jc-soccer-camp/assets/tour-rio-sunset.png" alt="Rio de Janeiro and Sugarloaf at sunset" ratio="1 / 1" />
          </div>
        </div>
      </div>
    </section>
  );
}

function CoachesSection() {
  return (
    <section id="coaches" className="jc-bleed jc-capped" style={{ ...jcLayout.bleed, background: 'var(--areia-warm)' }}>
      <div className="jc-cols-2 jc-coach-grid">
        <div style={{ display: 'grid', gap: 'var(--space-7)', justifyItems: 'start', alignContent: 'start' }}>
          <div>
            <p style={jcLayout.eyebrow}>04 / For coaches &amp; team directors</p>
            <h2 className="jc-coach-title">Take the team somewhere that changes how they play together.</h2>
            <p className="jc-coach-note">Julio can work with youth clubs, schools, academies, and college programs on local training, focused camp experiences, or team travel. Start with your roster, competitive level, calendar, and goals, and Julio will help shape the right format.</p>
          </div>
          <ul className="jc-prog-list">
            {['Training built around the roster', "Competition matched to the group's level", 'Coaches and families included in planning', 'A shared experience that builds the team'].map((item) => (
              <li key={item}><Check /><span>{item}</span></li>
            ))}
          </ul>
          <div className="jc-cta-row" style={{ ...jcLayout.row, flexWrap: 'nowrap' }}>
            <Button variant="primary" href="#start">Ask About Teams</Button>
            <Button variant="secondary" href="/jc-soccer-camp/brasil-tour/">Explore Brasil Tour</Button>
          </div>
          <div className="jc-college">
            <h3 style={{ ...jcLayout.display('sm'), margin: 0 }}>Planning for a college program?</h3>
            <p style={{ margin: 0, fontSize: 'var(--text-sm)', textWrap: 'pretty' }}>Julio is opening conversations with college coaches about future Brazil training and travel experiences shaped around their roster and season.</p>
            <Button variant="tertiary" href="#start">Discuss a College Team Experience</Button>
          </div>
        </div>
        <div className="jc-coach-collage">
          <img className="jc-coach-wide" src="/jc-soccer-camp/uploads/CleanShot%202026-08-17%20at%2014.06.14.png" alt="The group with families in the stands at the Maracanã" />
          <img src="/jc-soccer-camp/uploads/CleanShot%202026-08-17%20at%2014.05.55.png" alt="The team together in the players' tunnel before a match" />
          <img src="/jc-soccer-camp/uploads/CleanShot%202026-08-17%20at%2014.08.08.png" alt="The team outside the Fluminense training centre" />
        </div>
      </div>
    </section>
  );
}

function JulioSection() {
  const wrapRef = React.useRef(null);
  const videoRef = React.useRef(null);
  const userPausedRef = React.useRef(false);
  const [playing, setPlaying] = React.useState(false);
  const [muted, setMuted] = React.useState(false);
  const [step, setStep] = React.useState(0);
  const [held, setHeld] = React.useState(false);
  React.useEffect(() => {
    if (held) return;
    const id = setInterval(() => setStep((i) => (i + 1) % TIMELINE.length), 5200);
    return () => clearInterval(id);
  }, [held]);
  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    let pad = 0;
    const measure = () => {
      const section = wrap.closest('section');
      const sr = section.getBoundingClientRect();
      const maxW = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--max-width')) || 1240;
      const rule = Math.max(28, (sr.width - maxW) / 2);
      pad = Math.max(0, parseFloat(getComputedStyle(section).paddingLeft) - rule - 1);
    };
    const update = () => {
      const r = wrap.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = Math.min(1, Math.max(0, (vh - r.top) / (vh * 0.75)));
      const v = videoRef.current;
      if (v) {
        if (p > 0.985 && r.bottom > 0 && r.top < vh) {
          if (v.paused && !userPausedRef.current) {
            v.muted = false; v.volume = 1;
            const pr = v.play();
            if (pr && pr.catch) pr.catch(() => { v.muted = true; setMuted(true); const p2 = v.play(); if (p2 && p2.catch) p2.catch(() => {}); });
          }
        } else if (!v.paused) { v.pause(); }
      }
      wrap.style.setProperty('--p', p.toFixed(3));
      wrap.style.setProperty('--grow', (pad * p).toFixed(1) + 'px');
    };
    const onResize = () => { measure(); update(); };
    measure(); update();
    window.addEventListener('scroll', update, { passive: true });
    window.addEventListener('resize', onResize);
    return () => { window.removeEventListener('scroll', update); window.removeEventListener('resize', onResize); };
  }, []);
  const active = TIMELINE[step];
  return (
    <section id="julio" className="jc-bleed jc-capped" style={jcLayout.bleed}>
      <div className="jc-julio-center">
        <p style={jcLayout.eyebrow}>05 / Meet Julio</p>
        <h2 className="jc-dxl" style={{ ...jcLayout.display('xl'), maxWidth: '20ch', marginInline: 'auto' }}>Professional experience. Personal attention.</h2>
        <p style={{ margin: 'var(--space-7) auto 0', fontSize: 'var(--text-lg)', maxWidth: '68ch', textWrap: 'pretty' }}>
          Julio Cesar Dos Santos developed in the Vasco da Gama system and continued his professional career with clubs in Brazil before moving to the United States. There, he became USL D3 Pro League MVP and scoring champion in both 2000 and 2002. He has coached young players since 1999 and led JC Brasil Tour experiences since 2010.
        </p>
      </div>
      <div className="jc-cycle" onMouseEnter={() => setHeld(true)} onMouseLeave={() => setHeld(false)}>
        <div className="jc-cycle-body">
          <div className="jc-cycle-copy">
            <p style={{ margin: 0, fontSize: 'var(--text-base)', textWrap: 'pretty' }}>
              What matters to families is how Julio uses that experience today. He watches closely, explains directly, and coaches the person as well as the player. Parents and coaches communicate with Julio, not a rotating sales team.
            </p>
            <blockquote style={{ margin: 0 }}>
              <p style={{ ...jcLayout.display('sm'), margin: 0, color: 'var(--copacabana)', fontStyle: 'italic', textWrap: 'pretty' }}>&ldquo;The value is not only where Julio played. It is how clearly he sees the player in front of him.&rdquo;</p>
            </blockquote>
          </div>
          <figure key={active[0]} className={'jc-cycle-media' + (active[2].length > 1 ? ' is-collage' : '')}>
            {active[2].map((src, n) => <img key={src} className={n === 0 ? 'jc-shot-a' : 'jc-shot-b'} src={src} alt={n === 0 ? active[3] : ''} />)}
            <figcaption>{active[1]}</figcaption>
          </figure>
        </div>
        <ol className="jc-cycle-rail">
          {TIMELINE.map(([when, what], i) => (
            <li key={when + what} className={i === step ? 'is-active' : ''}>
              <button type="button" onClick={() => setStep(i)}>
                <span className="jc-cycle-when">{when}</span>
                <span className="jc-cycle-tick" aria-hidden="true"><i style={{ animationPlayState: held ? 'paused' : 'running' }}></i></span>
              </button>
            </li>
          ))}
        </ol>
      </div>
      <div className="jc-julio-video" ref={wrapRef}>
        <video ref={videoRef} src="/jc-soccer-camp/uploads/julio testimonial video - under 20MB.mp4#t=2" playsInline loop preload="none"
          poster={HOME_PHOTOS + 'home-julio-coaching-portrait.jpg'}
          onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} aria-label="Testimonial about Julio Cesar Dos Santos" />
        <button type="button" className="jc-vid-btn is-left" onClick={() => {
          const v = videoRef.current;
          if (v.paused) { userPausedRef.current = false; const pr = v.play(); if (pr && pr.catch) pr.catch(() => {}); }
          else { userPausedRef.current = true; v.pause(); }
        }}>{playing ? 'Pause' : 'Play'}</button>
        <button type="button" className="jc-vid-btn is-right" onClick={() => {
          const v = videoRef.current;
          v.muted = !v.muted; v.volume = v.muted ? 0 : 1; setMuted(v.muted);
        }}>{muted ? 'Sound off' : 'Sound on'}</button>
      </div>
      <div className="jc-julio-center" style={{ ...jcLayout.row, marginTop: 'var(--space-8)', justifyContent: 'center' }}>
        <Button variant="primary" href="#start">Ask Julio About Your Player</Button>
      </div>
    </section>
  );
}

const VOICE_SLIDES = [
  { years: 'JC Brasil Tour', quote: 'This trip is a unique experience. It gives you the opportunity to play against some of the best players in Brazil and bond with your teammates.', name: 'Past tour player', role: 'Player', image: HOME_PHOTOS + 'home-coaching-player-circle.jpg', alt: 'Julio addressing a group of players during a session' },
  { years: 'JC Brasil Tour', quote: 'This trip helped me grow and realize that I can take my abilities to a higher level.', name: 'Past tour player', role: 'Player', image: HOME_PHOTOS + 'home-training-session-wide.jpg', alt: 'Wide view of a training session in progress' },
  { years: 'JC Brasil Tour', quote: 'It helped me get better at the sport, and the views and atmosphere were amazing.', name: 'Past tour player', role: 'Player', image: HOME_PHOTOS + 'home-team-coaching-talk.jpg', alt: 'Julio talking with a coach on the sideline' },
  { years: 'JC Brasil Tour', quote: 'This trip was fun and unforgettable. I made memories that will last the rest of my life.', name: 'Past tour player', role: 'Player', image: '/jc-soccer-camp/assets/tour-group-sugarloaf.jpg', alt: 'A tour group together in Rio de Janeiro' }
];

function StoriesSection() {
  const [i, setI] = React.useState(0);
  const [running, setRunning] = React.useState(true);
  const total = VOICE_SLIDES.length;
  React.useEffect(() => {
    if (!running) return;
    const id = setTimeout(() => setI((n) => (n + 1) % total), 7000);
    return () => clearTimeout(id);
  }, [i, running, total]);
  const go = (d) => setI((n) => (n + d + total) % total);
  const slide = VOICE_SLIDES[i];
  return (
    <section id="stories" className="jc-bleed jc-field-invert jc-voices-band" style={{ ...jcLayout.bleed, background: 'var(--charcoal)', color: 'var(--areia)' }}>
      <SectionHead tone="paper" eyebrow="06 / Player stories" title="They came to play. They left with more."
        note="New competition, new friendships, and a new view of the game, told by players who lived it." />
      <div className="jc-story">
        <div className="jc-story-copy">
          <p className="jc-story-years">{slide.years}</p>
          <blockquote style={{ margin: 0 }}>
            <p className="jc-story-quote">&ldquo;{slide.quote}&rdquo;</p>
          </blockquote>
          <div className="jc-story-who">
            <p style={{ margin: 0, fontWeight: 'var(--weight-semibold)', fontSize: 'var(--text-sm)' }}>{slide.name}</p>
            <p style={{ margin: '2px 0 0', fontSize: 'var(--text-2xs)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-label)', color: 'var(--text-muted)' }}>{slide.role}</p>
          </div>
        </div>
        <img key={slide.image} className="jc-story-img" src={slide.image} alt={slide.alt} />
      </div>
      <div className="jc-story-foot">
        <ol className="jc-story-rules">
          {VOICE_SLIDES.map((sl, n) => (
            <li key={sl.name + n} className={n === i ? 'is-active' : (n < i ? 'is-done' : '')}>
              <button type="button" onClick={() => setI(n)} aria-label={'Show testimonial ' + (n + 1)}>
                <i style={{ animationPlayState: running ? 'running' : 'paused' }}></i>
              </button>
            </li>
          ))}
        </ol>
        <div className="jc-story-controls">
          <button type="button" onClick={() => setRunning((r) => !r)} aria-label={running ? 'Pause' : 'Play'}>{running ? '‖' : '▶'}</button>
          <button type="button" onClick={() => go(-1)} aria-label="Previous">&larr;</button>
          <button type="button" onClick={() => go(1)} aria-label="Next">&rarr;</button>
        </div>
      </div>
    </section>
  );
}

const HOME_FAQ = [
  ['Which program is right for my player?', "Start with the player's age, current level, goals, and schedule. Julio can recommend a camp, private session, small group, team program, or the Brasil Tour based on the environment that will help most right now."],
  ['What ages and levels does Julio work with?', 'Ages and levels vary across local camps and training formats. JC Brasil Tour is designed for competitive players ages 12-18, with a mid-to-high playing level preferred. Julio confirms fit directly before registration.'],
  ['What kinds of local camps are offered?', 'Programs can include summer camps, winter camps, futsal camps, and focused skills clinics. Current dates and locations appear in the Upcoming section as they are released.'],
  ['Can my child train one-on-one or in a small group?', 'Yes. One-on-one sessions create space for highly focused feedback. Small groups add teammates, pressure, and decision-making while keeping the coaching personal.'],
  ['Where can I find dates, locations, and prices?', 'Confirmed camp details appear with each upcoming opportunity. Private, small-group, and team pricing depends on the format. Julio can confirm current availability, location, and cost in one conversation.'],
  ['Can a coach bring an entire team?', 'Yes. Coaches can ask about custom local training, team camps, and group-based Brasil Tour experiences. Julio is also opening conversations with college programs about future Brazil training and travel.'],
  ['Can parents join JC Brasil Tour?', 'Yes. Parents and guardians are welcome to travel with the group and share the cultural and family portions of the experience.'],
  ['How are players supervised in Brazil?', 'Players travel within a supervised group led by Julio and supported by Futbol America Group, staff, chaperones, designated drivers, approved locations, and organized player movement. The complete departure details are reviewed with families before travel.'],
  ['Can the tour create a professional opportunity?', 'The right player may attract legitimate interest in the football environments the group enters. Any next step depends on level, fit, timing, eligibility, and the club. The tour does not promise scouting, a trial, or a contract.']
];

function HomeFAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="jc-bleed jc-capped" style={{ ...jcLayout.bleed, paddingTop: 0, paddingBottom: 0, background: 'var(--white)' }}>
      <div className="jc-prog-split">
        <div className="jc-prog-intro">
          <p style={{ ...jcLayout.eyebrow, margin: 0, color: 'var(--text-muted)' }}>07 / Questions parents &amp; coaches ask</p>
          <h2 style={{ ...jcLayout.display('xl'), margin: 'var(--space-6) 0 0' }}>Start with the question you already have.</h2>
        </div>
        <div className="jc-prog-tracks jc-faq">
          {HOME_FAQ.map(([q, a], i) => {
            const isOpen = i === open;
            return (
              <div key={q} className={'jc-prog-track' + (isOpen ? ' is-open' : '')}>
                <h3 style={{ margin: 0 }}>
                  <button type="button" className="jc-prog-tab jc-faq-tab" aria-expanded={isOpen} onClick={() => setOpen(isOpen ? -1 : i)}>
                    <span>{q}</span>
                    <span className="jc-prog-sign" aria-hidden="true">{isOpen ? '–' : '+'}</span>
                  </button>
                </h3>
                {isOpen && <p className="jc-faq-answer">{a}</p>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function StartSection() {
  const steps = ['Tell Julio about the player or team.', 'Get a recommendation based on level and goals.', 'Confirm the program, timing, and next step.'];
  return (
    <section id="start" className="jc-bleed jc-field-invert" style={{ ...jcLayout.bleed, background: 'var(--copacabana)', color: 'var(--areia)' }}>
      <div className="jc-cols-2">
        <div>
          <p style={jcLayout.eyebrow}>08 / Start here</p>
          <h2 className="jc-dxl" style={jcLayout.display('xl')}>Tell Julio what the player is ready for next.</h2>
          <p style={{ margin: 'var(--space-7) 0 0', maxWidth: '52ch', fontSize: 'var(--text-lg)', textWrap: 'pretty' }}>
            Share the player's age, current level, goals, availability, and whether you are asking for one player or a team. Julio will recommend the strongest current option and confirm fit, dates, location, and next steps.
          </p>
          <ol style={{ margin: 'var(--space-8) 0 0', padding: 0, listStyle: 'none' }}>
            {steps.map((s, i) => (
              <li key={s} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 'var(--space-4)', alignItems: 'baseline', padding: 'var(--space-4) 0', borderTop: 'var(--border-hairline) solid var(--line-inverse)' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: '28px', fontWeight: 'var(--weight-extrabold)', lineHeight: 1, color: 'var(--sol)' }}>{'0' + (i + 1)}</span>
                <span style={{ fontSize: 'var(--text-sm)' }}>{s}</span>
              </li>
            ))}
          </ol>
          <div style={{ ...jcLayout.row, marginTop: 'var(--space-8)' }}>
            <Button variant="primary" href="#inquiry-home">Start My Inquiry</Button>
          </div>
          <p style={{ margin: 'var(--space-6) 0 0', fontSize: 'var(--text-2xs)', color: 'var(--paper-80)' }}>This starts a conversation. No payment is collected at this step.</p>
        </div>
        <InquiryPanel id="inquiry-home" page="home" program="general" title="Send Julio a quick inquiry" note="Adult contact details only."
          phoneRequired emailRequired={false} />
      </div>
    </section>
  );
}

function HomePage() {
  const [paused] = useMotionToggle();
  const solid = useSolidHeader();
  return (
    <div>
      <PageHeader links={HOME_NAV} solid
        programLogo={{ src: '/jc-soccer-camp/assets/brand/jc-brasil-tour-crest.png', label: 'JC Brasil Tour', href: '/jc-soccer-camp/brasil-tour/' }}
        cta={{ label: 'Find the Right Program', href: '#programs' }} />
      <MobileBar links={HOME_NAV} action={{ label: 'Register interest', href: '#start' }} />
      <HomeHero paused={paused} />
      <div className="jc-field">
        <TrustStrip />
        <UpcomingSection />
        <ProgramsSection />
        <TourBand />
        <ApproachSection />
        <CoachesSection />
        <JulioSection />
        <StoriesSection />
        <HomeFAQ />
        <StartSection />
      </div>
      <PageFooter tagline="Play with rhythm. Train in Rio spirit."
        cta={{ label: 'Find the Right Program', href: '#programs' }}
        links={HOME_NAV}
        note="Julio Cesar Soccer Camp / Player development and the JC Brasil Tour / Since 2010" />
      <StickyAction primary={{ label: 'Register interest', href: '#start' }}
        secondary={{ label: 'Brasil Tour', href: '/jc-soccer-camp/brasil-tour/' }} />
      <WhatsAppBubble page="home" message="Hey, im interested in learning more about Julio Cesar Soccer Camps" />
    </div>
  );
}

Object.assign(window, { HomePage });