/* On The Limit — website mockup: Home page. */
function HomePage() {
  const { Button, Tag, Stat, ProgramCard } = window.DesignSystem_494066;
  const D = window.OTL_DATA;
  const go = window.OTL_go;
  const isMobile = window.OTL_useIsMobile();
  const [showFinder, setShowFinder] = React.useState(false);
  const progs = ['foundation','grit','hyrox','studio','personal-training','students-juniors'];

  const H2 = ({children, style}) => (
    <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.015em', lineHeight:1.05, fontSize:isMobile?28:38, color:'#fff', ...style }}>{children}</h2>
  );
  const Eyebrow = ({children}) => (
    <div style={{ display:'flex', alignItems:'center', gap:12 }}>
      <span style={{ width:28, height:2, background:'var(--accent)', display:'inline-block' }}></span>
      <span style={{ fontFamily:'var(--font-display)', fontSize:12.5, fontWeight:700, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--accent)' }}>{children}</span>
    </div>
  );

  return (
    <div>
      {showFinder && <window.OTL_FindYourFit onClose={() => setShowFinder(false)} />}
      {/* HERO */}
      <section style={{ position:'relative', overflow:'hidden', background:'var(--surface-deep)', height: isMobile ? 'auto' : 'calc(100vh - 115px)', minHeight: isMobile ? 420 : 560 }}>
        {/* Background photo */}
        <div style={{ position:'absolute', inset:0, backgroundImage:'url("site/hero.png")', backgroundSize:'cover', backgroundPosition:'center 35%' }}></div>
        {/* Overlay — fades left-to-right on desktop so image peeks through on the right */}
        <div style={{ position:'absolute', inset:0, background: isMobile ? 'rgba(10,10,10,0.78)' : 'linear-gradient(105deg, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.78) 50%, rgba(10,10,10,0.35) 100%)' }}></div>
        {/* Ambient green glow */}
        <div className="otl-glow" style={{ top:'-10%', left:'-5%' }}></div>
        <div style={{ position:'relative', maxWidth:1200, margin:'0 auto', padding: isMobile ? '80px 20px 60px' : '0 24px', height:'100%', boxSizing:'border-box', display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'flex-start', textAlign:'left', gap:24 }}>
          {/* Google rating badge */}
          <div style={{ display:'inline-flex', alignItems:'center', gap:10, background:'rgba(255,255,255,0.07)', border:'1px solid rgba(255,255,255,0.14)', borderRadius:99, padding:'8px 14px', maxWidth:'100%', overflow:'hidden' }}>
            <span style={{ display:'flex', gap:2 }}>{'★★★★★'.split('').map((s,i) => <span key={i} style={{ color:'#FBBF24', fontSize:15 }}>{s}</span>)}</span>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13.5, color:'#fff', letterSpacing:'0.02em' }}>4.6</span>
            <span style={{ width:1, height:14, background:'rgba(255,255,255,0.2)' }}></span>
            <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--fog-300)' }}>{isMobile ? 'Rated 4.6 on Google' : 'Rated 4.6 on Google · 65 reviews'}</span>
          </div>
          <h1 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.02em', lineHeight:0.98, fontSize: isMobile ? 'clamp(40px,10vw,56px)' : 'clamp(48px, 6.5vw, 78px)', color:'#fff', maxWidth:900 }}>
            Your results.<br/><span style={{ color:'var(--accent)' }}>Our mission.</span>
          </h1>
          <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize: isMobile ? 16 : 19, lineHeight:1.55, color:'var(--fog-300)', maxWidth:540 }}>
            Tring's gym for every age, every level, every starting point.
          </p>
          <div style={{ display:'flex', gap:14, flexWrap:'wrap', marginTop:6 }}>
            <Button variant="primary" size="lg" onClick={()=>go('join')}>Join Now</Button>
            <button onClick={()=>setShowFinder(true)} style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:15, letterSpacing:'0.04em', textTransform:'uppercase', color:'var(--accent)', background:'rgba(114,221,158,0.08)', border:'2px solid rgba(114,221,158,0.5)', borderRadius:99, padding: isMobile ? '11px 20px' : '14px 28px', cursor:'pointer', transition:'background .2s, border-color .2s' }}
              onMouseEnter={e=>{ e.currentTarget.style.background='rgba(114,221,158,0.16)'; e.currentTarget.style.borderColor='var(--accent)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.background='rgba(114,221,158,0.08)'; e.currentTarget.style.borderColor='rgba(114,221,158,0.5)'; }}>
              Find my membership →
            </button>
          </div>
        </div>
      </section>

      {/* STATS STRIP */}
      <section style={{ background:'var(--surface-base)', borderBottom:'1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '32px 20px' : '44px 24px', display:'grid', gridTemplateColumns: isMobile ? 'repeat(3,1fr)' : 'repeat(3,1fr)', gap:isMobile ? 16 : 24 }}>
          <Stat value="6" label="Week foundation" />
          <Stat value="7" label="Days a week" />
          <Stat value="20+" label="Classes a week" />
        </div>
      </section>

      {/* MARQUEE */}
      <section style={{ background:'var(--surface-deep)', borderBottom:'1px solid var(--border-subtle)', padding:'22px 0', overflow:'hidden' }}>
        <div className="otl-marquee-wrap">
        <div className="otl-marquee">
          {[0,1].map(rep => (
            <div key={rep} style={{ display:'flex', alignItems:'center', flexShrink:0 }} aria-hidden={rep===1}>
              {['Train Hard','Get Results','GRIT','HYROX','Studio Classes','Personal Training','No Intimidation',"Tring's Largest Gym",'Family Owned','Est. 2012'].map((w,i) => (
                <span key={i} style={{ display:'flex', alignItems:'center' }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:20, textTransform:'uppercase', letterSpacing:'0.02em', color:'var(--fog-300)', padding:'0 28px' }}>{w}</span>
                  <span style={{ width:7, height:7, borderRadius:999, background:'var(--accent)' }}></span>
                </span>
              ))}
            </div>
          ))}
        </div>
        </div>
      </section>

      {/* ABOUT */}
      <section style={{ background:'var(--surface-base)' }}>
        <div style={{ maxWidth:800, margin:'0 auto', padding: isMobile ? '64px 20px' : '96px 24px' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
            <Eyebrow>Welcome to the family</Eyebrow>
            <H2>Built for <span style={{ color:'var(--accent)' }}>real people</span></H2>
            <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize: isMobile ? 15 : 17, lineHeight:1.65, color:'var(--text-muted)', maxWidth:560 }}>
              On The Limit is Tring's largest independently-owned gym. From our beginner-friendly 6-Week GRIT Foundation and Advanced GRIT sessions to HYROX training, Studio Classes including RIDE, 1-2-1 Personal Training and an extensive gym floor, every session is built to help you get real results at your own pace. We also run a dedicated Students &amp; Juniors offering.
            </p>
            <div><Button variant="ghost" onClick={()=>go('foundation')}>Start with Foundation →</Button></div>
          </div>
        </div>
      </section>

      {/* PHOTO REEL */}
      {(() => {
        const photos = [
          { src:'site/gym-01.webp', alt:'Gym floor' },
          { src:'site/gym-02.webp', alt:'Functional zone' },
          { src:'site/gym-03.webp', alt:'Cardio equipment' },
          { src:'site/gym-04.webp', alt:'Training area' },
          { src:'site/gym-05.webp', alt:'Free weights' },
          { src:'site/gym-06.webp', alt:'Squat racks' },
          { src:'site/gym-07.webp', alt:'HYROX equipment' },
          { src:'site/gym-08.webp', alt:'Weight plates' },
          { src:'site/gym-09.webp', alt:'Rowing machines' },
        ];
        return (
          <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
            <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 0 48px 20px' : '72px 0 72px 24px' }}>
              <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', paddingRight: isMobile ? 20 : 24, marginBottom:28 }}>
                <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
                  <Eyebrow>Inside the gym</Eyebrow>
                  <H2>See for <span style={{ color:'var(--accent)' }}>yourself</span></H2>
                </div>
                <button onClick={()=>go('gallery')} style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--accent)', background:'none', border:'none', cursor:'pointer', padding:0, flexShrink:0 }}>View all →</button>
              </div>
              <div style={{ display:'flex', gap:14, overflowX:'auto', scrollSnapType:'x mandatory', WebkitOverflowScrolling:'touch', paddingRight: isMobile ? 20 : 24, paddingBottom:4, scrollbarWidth:'none', msOverflowStyle:'none' }}>
                {photos.map((p,i) => (
                  <div key={i} onClick={()=>go('gallery')} style={{ flexShrink:0, width: isMobile ? 240 : 360, height: isMobile ? 180 : 260, borderRadius:14, overflow:'hidden', scrollSnapAlign:'start', cursor:'pointer', border:'1px solid var(--border-subtle)' }}>
                    <img src={p.src} alt={p.alt} style={{ width:'100%', height:'100%', objectFit:'cover', display:'block', transition:'transform .4s var(--ease-out)' }}
                      onMouseEnter={e=>e.currentTarget.style.transform='scale(1.04)'}
                      onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'} />
                  </div>
                ))}
              </div>
            </div>
          </section>
        );
      })()}

      {/* PROGRAMMES */}
      <section style={{ background:'var(--surface-deep)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '64px 20px' : '96px 24px' }}>
          <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:40, flexWrap:'wrap' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              <Eyebrow>What we offer</Eyebrow>
              <H2>Find your <span style={{ color:'var(--accent)' }}>programme</span></H2>
            </div>
            {!isMobile && <span style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)', maxWidth:340 }}>Whatever your goal, there's a route in. Not sure where to start? We'll help you choose.</span>}
          </div>
          <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: isMobile ? 12 : 20 }}>
            {progs.map(k => { const p = D.programs[k]; return (
              <ProgramCard key={k} tag={p.tag} title={p.title} blurb={p.intro.split('. ')[0]+'.'} cta="Learn more" onClick={()=>go(k)} />
            ); })}
          </div>
        </div>
      </section>

      {/* WHY US band */}
      <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '56px 20px' : '88px 24px' }}>
          <H2 style={{ marginBottom:40 }}>No intimidation. <span style={{ color:'var(--accent)' }}>Just progress.</span></H2>
          <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: isMobile ? 32 : 48 }}>
            {[['Coached, always','Every class is led by a coach who learns your name and meets you where you are.'],
              ['Zero comparison','We train together, not against each other. Your only competition is yesterday.'],
              ['Independently owned','A real Tring gym run by real people who care about this community.']].map(([t,b]) => (
              <div key={t} style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <span style={{ width:32, height:3, background:'var(--accent)', borderRadius:99, display:'block' }}></span>
                <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:20, color:'#fff', letterSpacing:'-0.01em' }}>{t}</h3>
                <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.65, color:'var(--text-muted)' }}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — carousel */}
      <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
        {(() => {
          const reviews = [
            { name:'Liam',       text:"Honestly the best gym in Tring. Welcoming from day one, no intimidation at all, loads of class variety and coaches who actually care. Been a member a while now and wouldn't train anywhere else." },
            { name:'Catherine',  text:"We chose this gym for our teen who was struggling at the time. The staff are not only knowledgeable about the gym but also care about its users, being particularly good at managing the youngsters and becoming mentors. Rebekah is friendly and approachable and just has a superb approach, encouraging but advising when it's time to stop. They go the extra mile and another ten on top." },
          ];
          const [idx, setIdx] = React.useState(0);
          const [paused, setPaused] = React.useState(false);
          const [visible, setVisible] = React.useState(true);

          const goTo = (newIdx) => {
            setVisible(false);
            setTimeout(() => { setIdx(newIdx); setVisible(true); }, 300);
          };

          React.useEffect(() => {
            if (paused) return;
            const t = setInterval(() => goTo((idx + 1) % reviews.length), 4500);
            return () => clearInterval(t);
          }, [paused, idx]);

          const prev = () => { setPaused(true); goTo((idx - 1 + reviews.length) % reviews.length); };
          const next = () => { setPaused(true); goTo((idx + 1) % reviews.length); };
          const r = reviews[idx];
          const btnStyle = (side) => ({
            width:44, height:44, borderRadius:99, border:'1px solid rgba(255,255,255,0.15)',
            background:'rgba(255,255,255,0.04)', color:'#fff', fontSize:18,
            cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center',
            transition:'background .15s, border-color .15s', flexShrink:0,
          });
          return (
            <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '56px 20px' : '88px 24px' }}>
              <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap:24, marginBottom:44, flexWrap:'wrap' }}>
                <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                  <Eyebrow>Google Reviews</Eyebrow>
                  <H2>What members <span style={{ color:'var(--accent)' }}>say</span></H2>
                </div>
                <div style={{ display:'flex', flexDirection:'column', alignItems: isMobile ? 'flex-start' : 'flex-end', gap:4 }}>
                  <div style={{ display:'flex', gap:3, alignItems:'center' }}>
                    {'★★★★★'.split('').map((s,i) => <span key={i} style={{ color:'#FBBF24', fontSize:22 }}>{s}</span>)}
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:18, color:'#fff', marginLeft:8 }}>4.6</span>
                  </div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--text-muted)' }}>65 Google reviews</div>
                </div>
              </div>

              {/* Card */}
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:20, padding: isMobile ? '32px 24px' : '48px 56px', display:'flex', flexDirection:'column', gap:24, minHeight:200, opacity: visible ? 1 : 0, transform: visible ? 'translateY(0)' : 'translateY(10px)', transition:'opacity 0.35s ease, transform 0.35s ease' }}>
                <div style={{ display:'flex', gap:2 }}>
                  {'★★★★★'.split('').map((s,i) => <span key={i} style={{ color:'#FBBF24', fontSize:18 }}>{s}</span>)}
                </div>
                <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize: isMobile ? 16 : 19, lineHeight:1.75, color:'var(--fog-200)' }}>"{r.text}"</p>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)' }}>{r.name}, Google Review</div>
              </div>

              {/* Controls */}
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:24 }}>
                <div style={{ display:'flex', gap:8 }}>
                  {reviews.map((_,i) => (
                    <button key={i} onClick={() => setIdx(i)} style={{
                      width: i === idx ? 24 : 8, height:8, borderRadius:99,
                      background: i === idx ? 'var(--accent)' : 'rgba(255,255,255,0.2)',
                      border:'none', cursor:'pointer', padding:0,
                      transition:'width .3s, background .3s',
                    }} />
                  ))}
                </div>
                <div style={{ display:'flex', gap:10 }}>
                  <button onClick={prev} style={btnStyle('left')}
                    onMouseEnter={e=>{ e.currentTarget.style.background='rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.35)'; }}
                    onMouseLeave={e=>{ e.currentTarget.style.background='rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.15)'; }}>‹</button>
                  <button onClick={next} style={btnStyle('right')}
                    onMouseEnter={e=>{ e.currentTarget.style.background='rgba(255,255,255,0.1)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.35)'; }}
                    onMouseLeave={e=>{ e.currentTarget.style.background='rgba(255,255,255,0.04)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.15)'; }}>›</button>
                </div>
              </div>
            </div>
          );
        })()}
      </section>

      {/* PRICING TEASER */}
      <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '56px 20px' : '88px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr auto', gap: isMobile ? 24 : 40, alignItems:'center' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
            <H2>Membership that <span style={{ color:'var(--accent)' }}>fits</span></H2>
            <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize: isMobile ? 15 : 17, lineHeight:1.6, color:'var(--text-muted)', maxWidth:520 }}>
              Flexible options for every kind of member, from full access to student and junior rates. No lengthy tie-ins, no pressure.
            </p>
          </div>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <Button variant="primary" size="lg" onClick={()=>go('pricing')}>See Pricing</Button>
            <Button variant="secondary" size="lg" onClick={()=>go('contact')}>Book a Tour</Button>
          </div>
        </div>
      </section>

      {/* FIND US */}
      <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
        <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '72px 24px' }}>
          <div style={{ display:'flex', flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'flex-start' : 'center', justifyContent:'space-between', gap:16, marginBottom:28 }}>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              <Eyebrow>Find us</Eyebrow>
              <H2>We're in <span style={{ color:'var(--accent)' }}>Tring</span></H2>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
              <span style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--fog-200)' }}>44 Western Road, Tring, HP23 4BB</span>
              <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>Mon–Fri 06:00–20:00 · Sat 08:00–16:00 · Sun 08:00–12:00</span>
            </div>
          </div>
          <div style={{ borderRadius:16, overflow:'hidden', border:'1px solid var(--border-subtle)', height: isMobile ? 280 : 420 }}>
            <iframe
              title="On The Limit location"
              width="100%" height="100%" style={{ border:0, display:'block' }}
              loading="lazy" referrerPolicy="no-referrer-when-downgrade"
              src="https://www.google.com/maps?q=On+The+Limit,+44+Western+Road,+Tring,+HP23+4BB&output=embed">
            </iframe>
          </div>

          {/* NEARBY TOWNS */}
          <div style={{ marginTop:24, display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(5,1fr)', gap:12 }}>
            {[
              { town:'Berkhamsted', miles:'4 miles', mins:'8 min' },
              { town:'Hemel Hempstead', miles:'11 miles', mins:'15 min' },
              { town:'Aylesbury', miles:'12 miles', mins:'18 min' },
              { town:'Wendover', miles:'10 miles', mins:'14 min' },
              { town:'Leighton Buzzard', miles:'14 miles', mins:'20 min' },
            ].map(({ town, miles, mins }) => (
              <div key={town} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'16px 14px', display:'flex', flexDirection:'column', gap:6 }}>
                <div style={{ display:'flex', alignItems:'center', gap:7 }}>
                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M5 17H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v5"/><circle cx="14" cy="17" r="3"/><circle cx="6" cy="17" r="3"/>
                  </svg>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)' }}>{mins}</span>
                </div>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:14, color:'#fff', textTransform:'uppercase', letterSpacing:'-0.01em' }}>{town}</span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--text-muted)' }}>{miles} away</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}
window.OTL_HomePage = HomePage;