/* On The Limit — website mockup: Studio, Timetable, Pricing, Team, FAQs, Contact, Join. */
(function(){
  const PageHero = () => window.OTL_PageHero;

  // ---------- STUDIO CLASSES ----------
  function StudioPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const classes = [
      { name:'Balance',       tag:'Low impact',     desc:'A blend of Yoga, Tai Chi & Pilates to improve flexibility, reduce stress and build functional strength. All levels welcome.' },
      { name:'Calithenx',     tag:'Bodyweight',     desc:'Calisthenics & functional training focused on push, pull, squat and carry movements to build real-world strength and control.' },
      { name:'Circuit',       tag:'Full body',      desc:'Fast-paced mix of weights and bodyweight exercises to keep your heart rate up while building strength and stamina.' },
      { name:'Core',          tag:'Abs & stability',desc:'Targeted core workout using controlled movements to build stability, improve posture and leave you stronger through the middle.' },
      { name:'Ignite',        tag:'High intensity', desc:'Powerful cardio intervals with minimal rest designed to burn fat, boost endurance and leave you energised.' },
      { name:'Pilates',       tag:'Low impact',     desc:'Precise, controlled movements that strengthen deep muscles, enhance flexibility and support injury prevention.' },
      { name:'Pump',          tag:'Barbell',        desc:'High-rep, full-body barbell workout set to great music. Tones muscle and builds strength with low impact.' },
      { name:'PWR Circuit',   tag:'30 mins',        desc:'Power-based metabolic circuit combining compound lifts and bodyweight moves to maximise calorie burn in minimum time.' },
      { name:'RIDE',          tag:'Indoor cycling', desc:'Hill climbs, sprints and dynamic drills choreographed to empowering music. Intense, fun and suitable for all levels.' },
      { name:'Step',          tag:'Cardio',         desc:'High-energy step combinations set to uplifting music that improve fitness, coordination and lower-body strength.' },
      { name:'Strength',      tag:'Weights',        desc:'Structured resistance training targeting all major muscle groups to build strength, improve conditioning and boost metabolism.' },
      { name:'Stretch',       tag:'Recovery',       desc:'Guided flexibility and breathing class that reduces tension, improves range of motion and leaves you restored.' },
      { name:'Velocity',      tag:'Hybrid',         desc:'50% indoor cycling, 50% core training, cardio intervals followed by an abs-focused mat workout.' },
      { name:'Vinyasa Yoga',  tag:'Yoga',           desc:'Dynamic flowing yoga linking movement with breath to build strength, flexibility and mindfulness in one session.' },
      { name:'Warrior',       tag:'Full body',      desc:'Strength, cardio and core combined into one powerful class. Dynamic movements that build endurance for all levels.' },
    ];

    return (
      <div>
        <P tag="Studio" title="Studio Classes" tagline="Over 150 group classes per month, from RIDE to PILATES, PUMP to YOGA and everything in between." colors={['#2e453f','#182421']} />

        {/* Intro */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '72px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1.5fr 1fr', gap: isMobile ? 32 : 64, alignItems:'start' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:19, lineHeight:1.7, color:'var(--text-primary)' }}>
                Our large, fully mirrored and air-conditioned studio runs a rotating timetable led by experienced instructors who specialise in their own disciplines, so you'll never get bored and never plateau.
              </p>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>
                Whether you've never stepped foot in a fitness class or you're a regular attendee, every instructor will welcome you and adapt to your level, so you always leave feeling energised and empowered.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:14, marginTop:8 }}>
                <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                  <Button variant="primary" size="lg" onClick={()=>go('join')}>Join Now</Button>
                  <Button variant="secondary" size="lg" onClick={()=>go('timetable')}>View Timetable</Button>
                </div>
                <AppButtons size="sm" />
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              {[['150+','Classes / month'],['15+','Class types'],['All','Fitness levels'],['Accel X','& Elevate only']].map(([v,l]) => (
                <div key={l} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'22px 20px' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:30, color:'var(--accent)', lineHeight:1 }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Classes grid */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <h2 style={{ margin:'0 0 40px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.015em', fontSize:34, color:'#fff' }}>
              The <span style={{ color:'var(--accent)' }}>Classes</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {classes.map(({ name, tag, desc }) => (
                <div key={name} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'24px 22px', display:'flex', flexDirection:'column', gap:10 }}>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8 }}>
                    <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:16, color:'#fff', letterSpacing:'0.02em' }}>{name}</h3>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)', background:'rgba(114,221,158,0.1)', border:'1px solid rgba(114,221,158,0.2)', borderRadius:99, padding:'3px 10px', whiteSpace:'nowrap', flexShrink:0 }}>{tag}</span>
                  </div>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.6, color:'var(--text-muted)' }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_StudioPage = StudioPage;

  // ---------- HYROX ----------
  function HyroxPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const stations = [
      { num:'01', name:'SkiErg',            desc:'1,000m of upper-body pulling endurance.' },
      { num:'02', name:'Sled Push',          desc:'50m loaded sled push, raw power and grit.' },
      { num:'03', name:'Sled Pull',          desc:'50m sled pull with a rope, grip and full-body strength.' },
      { num:'04', name:'Burpee Broad Jump',  desc:'80m of explosive jump burpees forward.' },
      { num:'05', name:'Rowing',             desc:'1,000m row to test your aerobic engine.' },
      { num:'06', name:'Farmer\'s Carry',   desc:'200m heavy carry, grip, posture, and mental toughness.' },
      { num:'07', name:'Sandbag Lunges',     desc:'100m walking lunges with a loaded sandbag.' },
      { num:'08', name:'Wall Balls',         desc:'75–100 reps of explosive squat-to-throw.' },
    ];

    const pillars = [
      ['Race-ready programming', 'Every session mirrors real HYROX race demands, the stations, the distances, the order. Nothing is wasted.'],
      ['Running + functional strength', 'We train both sides: the 1km runs that connect stations and the strength to power through each workout.'],
      ['Scalable for every level', 'First-timers train alongside seasoned athletes. Every movement has a regression and a progression.'],
      ['Accredited HYROX coaching', 'Our fully accredited HYROX trainers run small group sessions, expert eyes on you every rep.'],
    ];

    return (
      <div>
        <P tag="HYROX Tring" title="Train With a Purpose" tagline="Take your training to the next level. Train with purpose, be part of a strong community, and have fun." colors={['#20423b','#132420']} />

        {/* What is HYROX */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:16 }}>What is HYROX?</div>
              <h2 style={{ margin:'0 0 20px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(28px,3.5vw,42px)', color:'#fff', letterSpacing:'-0.02em', lineHeight:1 }}>A race for <span style={{ color:'var(--accent)' }}>every body</span></h2>
              <p style={{ margin:'0 0 16px', fontFamily:'var(--font-body)', fontSize:17, lineHeight:1.7, color:'var(--text-primary)' }}>
                HYROX is a global fitness race for every body, no matter your fitness level, age or experience. Combining functional fitness training and running, it culminates in a unique indoor fitness race that's the same format, everywhere in the world.
              </p>
              <p style={{ margin:'0 0 16px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>
                Our fully accredited HYROX trainers coach small groups to improve your functional fitness so you and your teammates are prepared to compete. Not ready to race yet? That's fine too, train for the love of it and compete when you're ready.
              </p>
              <p style={{ margin:'0 0 28px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>
                Compete individually, as a pair, or in a relay of 4, it's up to you.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                  <Button variant="primary" size="lg" onClick={()=>go('join')}>Enquire Now</Button>
                  <Button variant="secondary" size="lg" onClick={()=>go('timetable')}>View Sessions</Button>
                </div>
                <AppButtons size="sm" />
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : '1fr 1fr 1fr', gap:10 }}>
              {[['8','Stations'],['8km','Running'],['60','Min sessions'],['All','Levels'],['4 days','Per week'],['3','Ways to compete']].map(([v,l]) => (
                <div key={l} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'18px 14px', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:26, color:'var(--accent)', lineHeight:1 }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* The 8 stations */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ marginBottom:40 }}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>The course</div>
              <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
                The <span style={{ color:'var(--accent)' }}>8 stations</span>
              </h2>
              <p style={{ margin:'12px 0 0', fontFamily:'var(--font-body)', fontSize:15, color:'var(--text-muted)' }}>Between every station, athletes complete a 1km run.</p>
            </div>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap:14 }}>
              {stations.map(({ num, name, desc }) => (
                <div key={num} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'22px 20px', display:'flex', flexDirection:'column', gap:10 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:30, color:'rgba(114,221,158,0.25)', lineHeight:1 }}>{num}</span>
                  <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff', letterSpacing:'0.03em' }}>{name}</h3>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:13, lineHeight:1.6, color:'var(--text-muted)' }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Training pillars */}
        <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              How we <span style={{ color:'var(--accent)' }}>train</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2,1fr)', gap:16, marginBottom:20 }}>
              {pillars.map(([title, body], i) => (
                <div key={title} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'28px 26px', display:'flex', gap:20, alignItems:'flex-start' }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:32, color:'rgba(114,221,158,0.2)', lineHeight:1, flexShrink:0 }}>0{i+1}</span>
                  <div>
                    <h3 style={{ margin:'0 0 8px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:15, color:'#fff' }}>{title}</h3>
                    <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14.5, lineHeight:1.65, color:'var(--text-muted)' }}>{body}</p>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>
              To get race-ready it's recommended you attend <strong style={{ color:'#fff' }}>two HYROX sessions per week</strong> plus an additional strength session of your own.
            </p>
          </div>
        </section>

        {/* Membership access */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px' }}>
            <h2 style={{ margin:'0 0 28px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(24px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em' }}>
              How to <span style={{ color:'var(--accent)' }}>access</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {[
                { plan:'Accelerate X', price:'£130/m', desc:'HYROX group sessions and GRIT sessions are fully included. The complete package.', highlight:true },
                { plan:'Elevate / Activate / Student / Senior', price:'Reduced rate', desc:'Book HYROX group training sessions at a reduced member PAYG rate on top of your membership.', highlight:false },
                { plan:'Non-Member', price:'PAYG £20', desc:'Non-member pay-as-you-go options available. Drop in and try a session before committing.', highlight:false },
              ].map(({ plan, price, desc, highlight }) => (
                <div key={plan} style={{ background: highlight ? 'rgba(114,221,158,0.07)' : 'var(--surface-card)', border: highlight ? '1.5px solid rgba(114,221,158,0.4)' : '1px solid var(--border-subtle)', borderRadius:14, padding:'26px 24px', display:'flex', flexDirection:'column', gap:12 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color: highlight ? 'var(--accent)' : '#fff', letterSpacing:'0.03em' }}>{plan}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:22, color:'#fff' }}>{price}</div>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.6, color:'var(--text-muted)', flex:1 }}>{desc}</p>
                  <Button variant={highlight ? 'primary' : 'secondary'} onClick={()=>go('pricing')}>See Pricing</Button>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_HyroxPage = HyroxPage;

  // ---------- GRIT ----------
  function GritPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const pillars = [
      { label:'Strength Training',      desc:'Build power, resilience and lean muscle mass with progressive, coach-led resistance work.' },
      { label:'Conditioning',           desc:'Improve stamina, cardiovascular fitness and overall performance with every session.' },
      { label:'Functional Movements',   desc:'Train your body for real-world performance, movement patterns that carry over into everyday life.' },
      { label:'Endurance Work',         desc:'Keep progressing week after week with programming designed to develop lasting endurance.' },
    ];

    const why = [
      { word:'Mindset',  desc:'Build confidence and determination. The group environment pushes you further than you\'d go alone.' },
      { word:'Movement', desc:'Train smarter, safer and more effectively under the guidance of professional coaches.' },
      { word:'Results',  desc:'Achieve measurable progress and celebrate every win. This is life-changing group training.' },
    ];

    const access = [
      { plan:'Accelerate X',          highlight:true,  desc:'All-inclusive access to all Group Training sessions, GRIT & HYROX, plus Studio Classes and Gym Floor. 14-day pre-booking window.' },
      { plan:'6 Week Foundation',     highlight:false, desc:'3 Foundation GRIT sessions per week plus gym floor access. The ideal starting point if you\'re new to training.' },
      { plan:'Activate or Elevate',   highlight:false, desc:'Pay as you go at discounted member rates with a 7-day pre-booking window.' },
    ];

    return (
      <div>
        <P tag="Group Training" title="GRIT" tagline="Build strength, improve movement, increase lean mass, and level up your fitness for good." colors={['#2b4a3e','#16261f']} />

        {/* Intro */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:18, lineHeight:1.75, color:'var(--text-primary)' }}>
                Accelerate and maximise your efforts in the gym with our signature group fitness experience, designed to challenge, empower and transform you.
              </p>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                Whether you're new to fitness, getting back into training, or aiming to elevate your performance, GRIT meets you where you are and helps you progress with confidence.
              </p>
              <p style={{ margin:'0 0 28px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                GRIT uses a hybrid fitness system combining strength training, functional fitness, mobility and cardio, delivering intense calorie-burning sessions that simultaneously build strength and lean mass.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                  <Button variant="primary" size="lg" onClick={()=>go('join')}>Join Now</Button>
                  <Button variant="secondary" size="lg" onClick={()=>go('timetable')}>View Sessions</Button>
                </div>
                <AppButtons size="sm" />
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              {[['Mon–Sat','Sessions'],['20','Max group size'],['All','Abilities'],['Coached','Every session']].map(([v,l]) => (
                <div key={l} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'22px 18px', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:28, color:'var(--accent)', lineHeight:1 }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* What to expect */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>What to expect</div>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              Every <span style={{ color:'var(--accent)' }}>session</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap:16 }}>
              {pillars.map(({ label, desc }, i) => (
                <div key={label} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'24px 20px', display:'flex', flexDirection:'column', gap:10 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:28, color:'rgba(114,221,158,0.22)', lineHeight:1 }}>0{i+1}</span>
                  <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color:'#fff', letterSpacing:'0.03em' }}>{label}</h3>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.65, color:'var(--text-muted)' }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Why GRIT */}
        <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>Why GRIT</div>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              More than <span style={{ color:'var(--accent)' }}>effort</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {why.map(({ word, desc }) => (
                <div key={word} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'28px 24px' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:22, color:'var(--accent)', marginBottom:12, letterSpacing:'0.02em' }}>{word}</div>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.7, color:'var(--text-muted)' }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Membership access */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px' }}>
            <h2 style={{ margin:'0 0 28px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(24px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em' }}>
              How to <span style={{ color:'var(--accent)' }}>access</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {access.map(({ plan, highlight, desc }) => (
                <div key={plan} style={{ background: highlight ? 'rgba(114,221,158,0.07)' : 'var(--surface-card)', border: highlight ? '1.5px solid rgba(114,221,158,0.4)' : '1px solid var(--border-subtle)', borderRadius:14, padding:'26px 24px', display:'flex', flexDirection:'column', gap:14 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color: highlight ? 'var(--accent)' : '#fff', letterSpacing:'0.03em' }}>{plan}</div>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.65, color:'var(--text-muted)', flex:1 }}>{desc}</p>
                  <Button variant={highlight ? 'primary' : 'secondary'} onClick={()=>go('pricing')}>See Pricing</Button>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Foundation callout */}
        <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px' }}>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 48, alignItems:'center', background:'rgba(114,221,158,0.05)', border:'1.5px solid rgba(114,221,158,0.2)', borderRadius:18, padding: isMobile ? '28px 20px' : '48px 44px' }}>
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>New to training?</div>
                <h2 style={{ margin:'0 0 16px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(24px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em', lineHeight:1.05 }}>
                  Start with the <span style={{ color:'var(--accent)' }}>GRIT Foundation</span>
                </h2>
                <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15.5, lineHeight:1.7, color:'var(--text-muted)' }}>
                  Our 6-week beginner programme runs 3 coached sessions per week and is specifically designed to get you ready for full GRIT training. Includes gym floor access, progress tracking and 24/7 WhatsApp group support.
                </p>
              </div>
              <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
                <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:48, color:'var(--accent)', lineHeight:1 }}>£187</span>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>one-off · places limited</span>
                </div>
                {[['6 weeks','3 sessions per week'],['Gym floor','Full access included'],['Progress photos','Start & end measurements'],['WhatsApp group','24/7 PT & group support']].map(([k,v]) => (
                  <div key={k} style={{ display:'flex', justifyContent:'space-between', borderBottom:'1px solid rgba(114,221,158,0.12)', paddingBottom:10 }}>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, textTransform:'uppercase', letterSpacing:'0.05em', color:'var(--accent)' }}>{k}</span>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--fog-300)' }}>{v}</span>
                  </div>
                ))}
                <Button variant="primary" size="lg" onClick={()=>go('contact')}>Contact Us to Enrol</Button>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_GritPage = GritPage;

  // ---------- 6 WEEK FOUNDATION ----------
  function FoundationPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const ourCommitments = [
      ['3 sessions per week', '6 weeks of coach-led Group Training with our experienced Personal Trainers.'],
      ['Gym floor access', 'Full access to the gym floor throughout the programme so you can push yourself further.'],
      ['Progress tracking', 'Your 1st and last sessions include measurements and photos so you can see exactly how far you\'ve come.'],
      ['24/7 WhatsApp support', 'Access to a closed WhatsApp group with round-the-clock support from your PT and your group, to keep you motivated and on track.'],
    ];

    const yourCommitments = [
      'Full commitment to every session, no excuses.',
      'Maximum effort, even when you feel like giving up.',
      'Body measurements and photos at the start, mid-point and end of the programme.',
    ];

    return (
      <div>
        <P tag="Beginner Programme" title="6 Week GRIT Foundation" tagline="The ideal starting point, professional guidance, a supportive group, and a structured 6 weeks to transform your fitness." colors={['#24443a','#15241c']} />

        {/* Intro */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:18, lineHeight:1.75, color:'var(--text-primary)' }}>
                Want to kick-start your fitness journey? Whether you're starting from scratch, returning after a break, or just need the right guidance and motivation to finally make it happen, this programme is built for you.
              </p>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                Our 6 Week Foundation Group Training programme is designed and led by professionals to guide, motivate and educate you, pushing you past the limits you thought were possible.
              </p>
              <p style={{ margin:'0 0 28px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                At the end of the 6 weeks, you'll be ready to progress onto our Accelerate Group Training, accessing GRIT and HYROX sessions and taking your fitness to the next level.
              </p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                <Button variant="primary" size="lg" onClick={()=>go('contact')}>Secure Your Place</Button>
                <Button variant="secondary" size="lg" onClick={()=>go('pricing')}>View Pricing</Button>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              {[['6','Weeks'],['3','Sessions / week'],['£187','One-off'],['Limited','Places']].map(([v,l]) => (
                <div key={l} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'22px 18px', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:28, color:'var(--accent)', lineHeight:1 }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Our commitment */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>What you get</div>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              Our commitment <span style={{ color:'var(--accent)' }}>to you</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2,1fr)', gap:16 }}>
              {ourCommitments.map(([title, body], i) => (
                <div key={title} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'28px 26px', display:'flex', gap:20 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:30, color:'rgba(114,221,158,0.22)', lineHeight:1, flexShrink:0 }}>0{i+1}</span>
                  <div>
                    <h3 style={{ margin:'0 0 8px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:14, color:'#fff' }}>{title}</h3>
                    <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14.5, lineHeight:1.65, color:'var(--text-muted)' }}>{body}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Your commitment + CTA */}
        <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 48, alignItems:'start' }}>
            <div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>What we ask</div>
              <h2 style={{ margin:'0 0 28px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(22px,2.5vw,32px)', color:'#fff', letterSpacing:'-0.015em' }}>
                Your commitment <span style={{ color:'var(--accent)' }}>to us</span>
              </h2>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                {yourCommitments.map((c, i) => (
                  <div key={i} style={{ display:'flex', gap:14, alignItems:'flex-start' }}>
                    <span style={{ width:22, height:22, borderRadius:6, background:'rgba(114,221,158,0.12)', border:'1px solid rgba(114,221,158,0.3)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0, color:'var(--accent)', fontSize:13, fontWeight:700 }}>✓</span>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:15.5, lineHeight:1.65, color:'var(--fog-200)' }}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background:'rgba(114,221,158,0.05)', border:'1.5px solid rgba(114,221,158,0.25)', borderRadius:16, padding: isMobile ? '22px 18px' : 36, display:'flex', flexDirection:'column', gap:18 }}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:20, color:'#fff', letterSpacing:'0.01em' }}>Ready to start?</div>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.7, color:'var(--text-muted)' }}>
                Places are <strong style={{ color:'var(--accent)' }}>limited</strong> and issued on a first-come, first-served basis when spaces become available. Message us today to secure your spot on the next course.
              </p>
              <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
                <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:42, color:'var(--accent)', lineHeight:1 }}>£187</span>
                <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>one-off payment</span>
              </div>
              <Button variant="primary" size="lg" onClick={()=>go('contact')}>Contact Us to Enrol</Button>
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_FoundationPage = FoundationPage;

  // ---------- GYM FLOOR ----------
  function GymFloorPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const equipment = [
      { cat:'Cardio',           items:'Treadmills · Rowers · X-Trainers · Stepper · Bikes · Ski-Ergs · Assault Bikes' },
      { cat:'Resistance',       items:'Fixed resistance machines · Multi-functional racks · Smith machine' },
      { cat:'Free Weights',     items:'Dumbbells · Olympic bars & plates · Benches · 2× Dual pulley machines' },
      { cat:'Space',            items:'Large mirrored & floored free-weight area · 4,000+ sq ft total' },
    ];

    const rules = [
      ['Scan in & out', 'All gym attendees must scan in AND out via the QR code on the app. This controls capacity and acts as a fire safety register.'],
      ['No pre-booking needed', 'Adult members don\'t need to book, just turn up. Use \'On My Way\' in the app to see current attendance and reserve your spot.'],
      ['Junior access', 'Junior members can access the gym during their permitted hours without needing to pre-book.'],
      ['Clean as you go', 'Members are required to clean equipment after use to keep the gym safe and enjoyable for everyone.'],
      ['Clean indoor trainers', 'Change into your gym trainers on entry and change back out on exit, helps keep the floor clean for all.'],
    ];

    return (
      <div>
        <P tag="Facilities" title="Gym Floor" tagline="Over 4,000 sq ft of cardio, resistance, free weights and functional equipment, everything you need to train your way." colors={['#28443c','#15231e']} />

        {/* Intro + equipment */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'start' }}>
            <div>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:18, lineHeight:1.75, color:'var(--text-primary)' }}>
                To perform at our best we need many aspects of exercise. Our gym floor provides the full breadth of equipment to improve cardiovascular health, build strength, lose weight and improve flexibility, all under one roof.
              </p>
              <p style={{ margin:'0 0 28px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                Whether you're just starting out, want to add another element to your training, or feel your progress has plateaued, our friendly coaches are always on hand. All new members receive a <strong style={{ color:'#fff' }}>free induction</strong> when they join, so you'll never be left to figure it out alone.
              </p>
              <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
                <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                  <Button variant="primary" size="lg" onClick={()=>go('join')}>Join Now</Button>
                  <Button variant="secondary" size="lg" onClick={()=>go('contact')}>Book Free Induction</Button>
                </div>
                <AppButtons size="sm" />
              </div>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
              {equipment.map(({ cat, items }) => (
                <div key={cat} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'20px 22px' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:12, letterSpacing:'0.08em', color:'var(--accent)', marginBottom:8 }}>{cat}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.6, color:'var(--fog-300)' }}>{items}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Stats strip */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)', borderBottom:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding:'40px 24px', display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap:0 }}>
            {[['4,000+','Sq ft'],['7','Days a week'],['Free','Inductions'],['Always','Coached staff on site']].map(([v,l],i,arr) => (
              <div key={l} style={{ textAlign:'center', padding:'16px 20px', borderRight: i<arr.length-1 ? '1px solid var(--border-subtle)' : 'none' }}>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:32, color:'var(--accent)', lineHeight:1 }}>{v}</div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
              </div>
            ))}
          </div>
        </section>

        {/* Gym rules */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>Good to know</div>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em' }}>
              How the <span style={{ color:'var(--accent)' }}>gym works</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {rules.map(([title, body]) => (
                <div key={title} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'24px 22px' }}>
                  <h3 style={{ margin:'0 0 10px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color:'#fff', letterSpacing:'0.03em' }}>{title}</h3>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.65, color:'var(--text-muted)' }}>{body}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_GymFloorPage = GymFloorPage;

  // ---------- PERSONAL TRAINING ----------
  function PTPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const pillars = [
      {
        title: 'Coaching',
        desc: 'Whatever your goal, personal training gives you a dedicated, experienced trainer ensuring every session is 100% effective. Our qualified PTs bring expert knowledge to each session, working directly alongside you with friendly, focused motivation.',
      },
      {
        title: 'Motivation',
        desc: 'Whether you\'re a beginner or an experienced athlete, our PTs are the best in the local area. They give you guidance, accountability and support as part of a personalised programme, so you make the most of every minute.',
      },
      {
        title: 'Space',
        desc: 'Your wellbeing matters as much as your physical results. In every PT session you\'ll have a minimum of 100 sq ft to yourself. Think of it as your gym within a gym, space to focus, move freely and train without distraction.',
      },
    ];

    return (
      <div>
        <P tag="1-2-1 Coaching" title="Personal Training" tagline="Expert-led sessions tailored entirely to you, your goals, your pace, your results." colors={['#2c4840','#162521']} />

        {/* Intro */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div>
              <p style={{ margin:'0 0 18px', fontFamily:'var(--font-body)', fontSize:18, lineHeight:1.75, color:'var(--text-primary)' }}>
                Designed and led by our expert PTs, 1-2-1 training sessions will guide you, motivate you and push you past any limit you thought you had, giving you the confidence and stamina to kick-start or progress your training.
              </p>
              <p style={{ margin:'0 0 28px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                Whether you're just starting out, want to add another element to your training, need a refresher or feel your progress has plateaued, your PT will tailor every session to your individual needs so you reach your goals.
              </p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                <Button variant="primary" size="lg" onClick={()=>go('contact')}>Enquire Now</Button>
                <Button variant="secondary" size="lg" onClick={()=>go('pricing')}>View Pricing</Button>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:14 }}>
              {[['From £50','Per hour'],['1-2-1','Dedicated coach'],['100 sq ft','Your own space'],['Your goals','Fully bespoke']].map(([v,l]) => (
                <div key={l} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'22px 18px', textAlign:'center' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:22, color:'var(--accent)', lineHeight:1.1 }}>{v}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginTop:6 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Three pillars */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              What you <span style={{ color:'var(--accent)' }}>get</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap:16 }}>
              {pillars.map(({ title, desc }, i) => (
                <div key={title} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'28px 24px', display:'flex', flexDirection:'column', gap:14 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:30, color:'rgba(114,221,158,0.22)', lineHeight:1 }}>0{i+1}</span>
                  <h3 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:18, color:'var(--accent)', letterSpacing:'0.03em' }}>{title}</h3>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14.5, lineHeight:1.7, color:'var(--text-muted)' }}>{desc}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section style={{ background:'var(--surface-base)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:760, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', textAlign:'center' }}>
            <h2 style={{ margin:'0 0 16px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,38px)', color:'#fff', letterSpacing:'-0.015em' }}>
              Ready to <span style={{ color:'var(--accent)' }}>get started?</span>
            </h2>
            <p style={{ margin:'0 0 32px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>
              Get in touch to discuss your goals and find the right PT for you. Sessions from <strong style={{ color:'#fff' }}>£50 per hour</strong>.
            </p>
            <Button variant="primary" size="lg" onClick={()=>go('contact')}>Enquire Now</Button>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_PTPage = PTPage;

  // ---------- STUDENTS & JUNIORS ----------
  function JuniorsPage() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const memberships = [
      {
        title: 'Junior Membership',
        price: '£50',
        ages: 'Ages 13–18',
        highlight: false,
        access: [
          'Weekdays: 6:00–9:00am',
          'Weekdays: 12:00–6:00pm',
          'Saturday: 8:00am–4:00pm',
          'Sunday: 8:00am–12:00pm',
        ],
        note: 'The gym is not available to juniors between 9am–12noon on weekdays. Year 12 & 13 students needing later evening access may purchase a Student Membership.',
        how: 'Download the On The Limit app, upload a clear selfie and ensure your contact and emergency contact details are up to date.',
      },
      {
        title: 'Student Membership',
        price: '£55',
        ages: 'Ages 18–24 · Full-time university or 6th form',
        highlight: true,
        access: [
          'Monday–Friday: 6:00am–8:00pm',
          'Saturday: 8:00am–4:00pm',
          'Sunday: 8:00am–12:00pm',
        ],
        note: 'Proof of eligibility required via Unidays or Totum (NUS) ID. Eligibility is reconfirmed every September.',
        how: 'Send us a message with your proof of eligibility and we\'ll send you a promo code. In the app, tap \'Start a New Membership\', select \'Got a promo code\' and enter your code to unlock your rate.',
      },
    ];

    return (
      <div>
        <P tag="Students & Juniors" title="Good Habits Start Early" tagline="Dedicated memberships for juniors (13–18) and full-time students (18–24), with access times and rates built around you." colors={['#2f463f','#182421']} />

        {/* Membership cards */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:20, alignItems:'stretch' }}>
            {memberships.map(({ title, price, ages, highlight, access, note, how }) => (
              <div key={title} style={{ background: highlight ? 'rgba(114,221,158,0.05)' : 'var(--surface-card)', border: highlight ? '1.5px solid rgba(114,221,158,0.35)' : '1px solid var(--border-subtle)', borderRadius:16, padding:32, display:'flex', flexDirection:'column', gap:20 }}>
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:20, color: highlight ? 'var(--accent)' : '#fff', letterSpacing:'0.02em', marginBottom:6 }}>{title}</div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--text-muted)' }}>{ages}</div>
                </div>
                <div style={{ display:'flex', alignItems:'baseline', gap:8 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:44, color:'var(--accent)', lineHeight:1 }}>{price}</span>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>/ month</span>
                </div>

                {/* Access hours */}
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--accent)', marginBottom:10 }}>Access hours</div>
                  <div style={{ display:'flex', flexDirection:'column', gap:7 }}>
                    {access.map(a => (
                      <div key={a} style={{ display:'flex', gap:10, alignItems:'center' }}>
                        <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', flexShrink:0 }}/>
                        <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fog-200)' }}>{a}</span>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Note */}
                <div style={{ background:'rgba(255,255,255,0.04)', border:'1px solid var(--border-subtle)', borderRadius:10, padding:'14px 16px', fontFamily:'var(--font-body)', fontSize:13, lineHeight:1.6, color:'var(--text-muted)' }}>
                  {note}
                </div>

                {/* How to sign up */}
                <div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', marginBottom:8 }}>How to sign up</div>
                  <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.65, color:'var(--text-muted)' }}>{how}</p>
                </div>

                <div style={{ marginTop:'auto' }}>
                  <Button variant={highlight ? 'primary' : 'secondary'} fullWidth onClick={()=>go('contact')}>Enquire Now</Button>
                </div>
              </div>
            ))}
          </div>
        </section>

        {/* Important note */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '40px 20px' : '64px 24px' }}>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 24 : 48, alignItems:'start' }}>
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>Before your first session</div>
                <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(22px,2.5vw,30px)', color:'#fff', letterSpacing:'-0.01em', lineHeight:1.1 }}>
                  Talk to us <span style={{ color:'var(--accent)' }}>first</span>
                </h2>
              </div>
              <div>
                <p style={{ margin:'0 0 16px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--fog-200)' }}>
                  Developing bones and body systems need the right guidance. Before your first session we ask all junior and student members to speak to a member of staff so we can understand your goals and point you in the right direction.
                </p>
                <p style={{ margin:'0 0 24px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.75, color:'var(--text-muted)' }}>
                  All new members receive a free induction when they join, so our team can show you how to use the equipment safely, set your goals and make sure your technique is right from day one.
                </p>
                <Button variant="primary" onClick={()=>go('join')}>Join & Get Your Free Induction</Button>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_JuniorsPage = JuniorsPage;

  // ---------- TIMETABLE ----------
  const CLASS_INFO = {
    'Circuit':       { tag:'Full body',       desc:'Fast-paced mix of weights and bodyweight exercises to keep your heart rate up while building strength and stamina.' },
    'Calithenx':     { tag:'Bodyweight',      desc:'Calisthenics & functional training focused on push, pull, squat and carry movements to build real-world strength and control.' },
    'RIDE':          { tag:'Indoor cycling',  desc:'Hill climbs, sprints and dynamic drills choreographed to empowering music. Intense, fun and suitable for all levels.' },
    'Pump':          { tag:'Barbell',         desc:'High-rep, full-body barbell workout set to great music. Tones muscle and builds strength with low impact.' },
    'Warrior':       { tag:'Full body',       desc:'Strength, cardio and core combined into one powerful class. Dynamic movements that build endurance for all levels.' },
    'Balance':       { tag:'Low impact',      desc:'A blend of Yoga, Tai Chi & Pilates to improve flexibility, reduce stress and build functional strength. All levels welcome.' },
    'Velocity':      { tag:'Hybrid',          desc:'50% indoor cycling, 50% core training, cardio intervals followed by an abs-focused mat workout.' },
    'Strength':      { tag:'Weights',         desc:'Structured resistance training targeting all major muscle groups to build strength, improve conditioning and boost metabolism.' },
    'Ignite':        { tag:'High intensity',  desc:'Powerful cardio intervals with minimal rest designed to burn fat, boost endurance and leave you energised.' },
    'RIDE':          { tag:'Indoor cycling',  desc:'Hill climbs, sprints and dynamic drills choreographed to empowering music. Intense, fun and suitable for all levels.' },
    'Vinyasa Yoga':  { tag:'Yoga',            desc:'Dynamic flowing yoga linking movement with breath to build strength, flexibility and mindfulness in one session.' },
    'Total Body':    { tag:'Full body',       desc:'A complete head-to-toe workout combining strength and cardio movements to hit every muscle group in one session.' },
    'PWR Circuit':   { tag:'30 mins',         desc:'Power-based metabolic circuit combining compound lifts and bodyweight moves to maximise calorie burn in minimum time.' },
    'Core':          { tag:'Abs & stability', desc:'Targeted core workout using controlled movements to build stability, improve posture and leave you stronger through the middle.' },
    'Pilates':       { tag:'Low impact',      desc:'Precise, controlled movements that strengthen deep muscles, enhance flexibility and support injury prevention.' },
    'HYROX Group':   { tag:'Group training',  desc:'Running intervals combined with functional stations, sled pushes, rowing, burpees and lunges, to build race-ready fitness.' },
    'GRIT Group':    { tag:'Group training',  desc:'Strength, functional movement and conditioning in a coached group setting. Build muscle, improve movement and push your limits.' },
  };

  function ClassModal({ cls, onClose }) {
    const isMobile = window.OTL_useIsMobile();
    const info = CLASS_INFO[cls.name] || { tag: cls.type, desc: 'Class details coming soon.' };
    const TYPE = {
      ride:   { color:'#c8f54a' },
      studio: { color:'var(--accent)' },
      hyrox:  { color:'var(--accent)' },
      grit:   { color:'#c8f54a' },
    };
    const color = TYPE[cls.type]?.color || 'var(--accent)';

    React.useEffect(() => {
      const onKey = e => e.key === 'Escape' && onClose();
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, []);

    return (
      <div onClick={onClose} style={{ position:'fixed', inset:0, zIndex:200, background:'rgba(0,0,0,0.7)', display:'flex', alignItems:'center', justifyContent:'center', padding:24, backdropFilter:'blur(6px)' }}>
        <div onClick={e=>e.stopPropagation()} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:18, padding: isMobile ? '24px 20px' : 36, maxWidth:460, width:'100%', boxShadow:'0 24px 80px rgba(0,0,0,0.6)', position:'relative' }}>
          <button onClick={onClose} style={{ position:'absolute', top:16, right:16, background:'none', border:'none', cursor:'pointer', color:'var(--text-muted)', fontSize:20, lineHeight:1, padding:4 }}>✕</button>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:20 }}>
            <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color, background:`${color}18`, border:`1px solid ${color}30`, borderRadius:99, padding:'4px 12px' }}>{info.tag}</span>
          </div>
          <h2 style={{ margin:'0 0 14px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:28, color:'#fff', letterSpacing:'-0.01em' }}>{cls.name}</h2>
          <p style={{ margin:'0 0 24px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--fog-300)' }}>{info.desc}</p>
          <div style={{ display:'flex', alignItems:'center', gap:6 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', display:'inline-block' }}/>
            <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-muted)' }}>Suitable for all fitness levels</span>
          </div>
          <div style={{ marginTop:8, display:'flex', alignItems:'center', gap:6 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', display:'inline-block' }}/>
            <span style={{ fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-muted)' }}>
              {(cls.type === 'grit' || cls.type === 'hyrox')
                ? 'Included in Accelerate X · Available PAYG on other memberships'
                : 'Included in Accelerate X & Elevate memberships'}
            </span>
          </div>
        </div>
      </div>
    );
  }

  function TimetablePage() {
    const P = window.OTL_PageHero;
    const [selected, setSelected] = React.useState(null);
    const [filters, setFilters] = React.useState([]);
    const isMobile = window.OTL_useIsMobile();
    const [mobileDay, setMobileDay] = React.useState(new Date().getDay() === 0 ? 6 : new Date().getDay() - 1);

    const toggleFilter = (key) => {
      if (key === 'all') { setFilters([]); return; }
      setFilters(prev => prev.includes(key) ? prev.filter(k => k !== key) : [...prev, key]);
    };

    const TYPE = {
      ride:   { color:'#c8f54a', bg:'rgba(200,245,74,0.1)',  label:'RIDE' },
      studio: { color:'var(--accent)', bg:'rgba(114,221,158,0.08)', label:'Studio' },
      hyrox:  { color:'var(--accent)', bg:'rgba(114,221,158,0.12)', label:'HYROX' },
      grit:   { color:'#c8f54a', bg:'rgba(200,245,74,0.08)', label:'GRIT' },
    };

    const days = [
      { label: 'Monday',    short: 'Mon' },
      { label: 'Tuesday',   short: 'Tue' },
      { label: 'Wednesday', short: 'Wed' },
      { label: 'Thursday',  short: 'Thu' },
      { label: 'Friday',    short: 'Fri' },
      { label: 'Saturday',  short: 'Sat' },
      { label: 'Sunday',    short: 'Sun' },
    ];

    // All classes: { day (0=Mon), time, name, type }
    const classes = [
      // Studio classes
      { day:1, time:'06:00', name:'Circuit',        type:'studio' },
      { day:3, time:'06:00', name:'Calithenx',       type:'studio' },
      { day:5, time:'08:00', name:'RIDE',            type:'ride'   },
      { day:0, time:'09:00', name:'Pump',            type:'studio' },
      { day:1, time:'09:00', name:'RIDE',            type:'ride'   },
      { day:2, time:'09:00', name:'Warrior',         type:'studio' },
      { day:3, time:'09:00', name:'Strength',        type:'studio' },
      { day:4, time:'09:00', name:'PWR Circuit',     type:'studio' },
      { day:5, time:'09:00', name:'Pump',            type:'studio' },
      { day:0, time:'10:00', name:'Ignite',          type:'studio' },
      { day:2, time:'10:00', name:'Balance',         type:'studio' },
      { day:3, time:'10:00', name:'Ignite',          type:'studio' },
      { day:4, time:'10:00', name:'Core',            type:'studio' },
      { day:6, time:'10:00', name:'Vinyasa Yoga',    type:'studio' },
      { day:0, time:'11:00', name:'RIDE',            type:'ride'   },
      { day:1, time:'11:00', name:'Vinyasa Yoga',    type:'studio' },
      { day:2, time:'11:00', name:'Velocity',        type:'studio' },
      { day:3, time:'11:00', name:'RIDE',            type:'ride'   },
      { day:4, time:'11:00', name:'Vinyasa Yoga',    type:'studio' },
      { day:0, time:'18:00', name:'Pump',            type:'studio' },
      { day:1, time:'18:00', name:'Total Body',      type:'studio' },
      { day:2, time:'18:00', name:'Circuit',         type:'studio' },
      { day:3, time:'18:00', name:'Pump',            type:'studio' },
      { day:4, time:'18:00', name:'RIDE',            type:'ride'   },
      { day:0, time:'19:00', name:'RIDE',            type:'ride'   },
      { day:1, time:'19:00', name:'RIDE',            type:'ride'   },
      { day:2, time:'19:00', name:'Pilates',         type:'studio' },
      { day:3, time:'19:00', name:'RIDE',            type:'ride'   },
      // GRIT & HYROX group training
      { day:5, time:'07:00', name:'GRIT Group',      type:'grit'   },
      { day:5, time:'08:00', name:'HYROX Group',     type:'hyrox'  },
      { day:3, time:'09:30', name:'HYROX Group',     type:'hyrox'  },
      { day:5, time:'09:30', name:'HYROX Group',     type:'hyrox'  },
      { day:0, time:'19:00', name:'HYROX Group',     type:'hyrox'  },
      { day:2, time:'19:00', name:'HYROX Group',     type:'hyrox'  },
      { day:0, time:'20:00', name:'GRIT Group',      type:'grit'   },
      { day:1, time:'20:00', name:'GRIT Group',      type:'grit'   },
      { day:2, time:'20:00', name:'GRIT Group',      type:'grit'   },
      { day:3, time:'20:00', name:'GRIT Group',      type:'grit'   },
    ];

    const times = ['06:00','07:00','08:00','09:00','09:30','10:00','11:00','18:00','19:00','20:00'];

    // Build lookup: key = `${day}-${time}` → array of classes (filtered)
    const filtered = filters.length === 0 ? classes : classes.filter(c => filters.includes(c.type));
    const lookup = {};
    filtered.forEach(c => {
      const key = `${c.day}-${c.time}`;
      if (!lookup[key]) lookup[key] = [];
      lookup[key].push(c);
    });

    const Cell = ({ items }) => (
      <div style={{ display:'flex', flexDirection:'column', gap:6, padding:'8px 10px', height:'100%' }}>
        {items.map((c, i) => {
          const t = TYPE[c.type];
          return (
            <div key={i} onClick={() => setSelected(c)}
              style={{ background:t.bg, border:`1px solid ${t.color}30`, borderRadius:7, padding:'8px 10px', cursor:'pointer', transition:'border-color .15s, transform .15s' }}
              onMouseEnter={e=>{ e.currentTarget.style.borderColor=`${t.color}80`; e.currentTarget.style.transform='translateY(-1px)'; }}
              onMouseLeave={e=>{ e.currentTarget.style.borderColor=`${t.color}30`; e.currentTarget.style.transform='none'; }}>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'#fff', lineHeight:1.2 }}>{c.name}</div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:10, color:t.color, marginTop:3, letterSpacing:'0.04em' }}>{t.label}</div>
            </div>
          );
        })}
      </div>
    );

    return (
      <div>
        {selected && ReactDOM.createPortal(<ClassModal cls={selected} onClose={() => setSelected(null)} />, document.body)}
        <P tag="Plan your week" title="Timetable" tagline="Studio, RIDE, GRIT and HYROX, all in one place." colors={['#243f39','#14201c']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1280, margin:'0 auto', padding: isMobile ? '40px 16px' : '72px 24px', overflowX: isMobile ? 'visible' : 'auto' }}>

            {/* Filter buttons */}
            <div style={{ display:'flex', gap:8, marginBottom:24, flexWrap:'wrap' }}>
              {[
                { key:'all',    label:'All Classes', color:'#fff'           },
                { key:'studio', label:'Studio',      color:'var(--accent)'  },
                { key:'ride',   label:'RIDE',        color:'#c8f54a'        },
                { key:'hyrox',  label:'HYROX',       color:'var(--accent)'  },
                { key:'grit',   label:'GRIT',        color:'#c8f54a'        },
              ].map(({ key, label, color }) => {
                const active = key === 'all' ? filters.length === 0 : filters.includes(key);
                return (
                  <button key={key} onClick={() => toggleFilter(key)} style={{
                    display:'flex', alignItems:'center', gap:7, cursor:'pointer',
                    background: active ? 'rgba(114,221,158,0.12)' : 'var(--surface-card)',
                    border: active ? `1.5px solid ${color}` : '1px solid var(--border-subtle)',
                    borderRadius:99, padding: isMobile ? '6px 12px' : '7px 16px', transition:'all .15s',
                  }}>
                    {key !== 'all' && <span style={{ width:8, height:8, borderRadius:'50%', background:color, display:'inline-block', flexShrink:0 }}/>}
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.06em', textTransform:'uppercase', color: active ? color : 'var(--text-muted)' }}>{label}</span>
                  </button>
                );
              })}
            </div>

            {isMobile ? (
              /* Mobile: day selector + list */
              <div>
                <div style={{ display:'flex', gap:6, marginBottom:20, overflowX:'auto', paddingBottom:4 }}>
                  {days.map(({ short }, di) => (
                    <button key={di} onClick={() => setMobileDay(di)} style={{
                      flexShrink:0, background: mobileDay===di ? 'var(--accent)' : 'var(--surface-card)',
                      border: mobileDay===di ? 'none' : '1px solid var(--border-subtle)',
                      borderRadius:99, padding:'8px 14px', cursor:'pointer',
                      fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.06em', textTransform:'uppercase',
                      color: mobileDay===di ? '#0d0d0d' : 'var(--text-muted)',
                    }}>{short}</button>
                  ))}
                </div>
                <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                  {times.map(time => {
                    const items = lookup[`${mobileDay}-${time}`] || [];
                    if (!items.length) return null;
                    return items.map((c, i) => {
                      const t = TYPE[c.type];
                      return (
                        <div key={`${time}-${i}`} onClick={() => setSelected(c)}
                          style={{ display:'flex', alignItems:'center', gap:14, background:'var(--surface-card)', border:`1px solid var(--border-subtle)`, borderLeft:`3px solid ${t.color}`, borderRadius:10, padding:'14px 16px', cursor:'pointer' }}>
                          <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--accent)', minWidth:44 }}>{time}</span>
                          <div>
                            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:14, color:'#fff' }}>{c.name}</div>
                            <div style={{ fontFamily:'var(--font-display)', fontWeight:600, fontSize:10, color:t.color, marginTop:2, letterSpacing:'0.04em' }}>{t.label}</div>
                          </div>
                        </div>
                      );
                    });
                  })}
                  {!times.some(time => (lookup[`${mobileDay}-${time}`]||[]).length > 0) && (
                    <div style={{ textAlign:'center', padding:'40px 0', fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-faint)' }}>No classes on this day for the selected filter.</div>
                  )}
                </div>
              </div>
            ) : (
              /* Desktop: full grid */
              <div style={{ minWidth:780, border:'1px solid var(--border-subtle)', borderRadius:12, overflow:'hidden' }}>
                <div style={{ display:'grid', gridTemplateColumns:'72px repeat(7,1fr)', background:'var(--surface-card)', borderBottom:'1px solid var(--border-subtle)' }}>
                  <div/>
                  {days.map(({ short, label }) => (
                    <div key={short} style={{ borderLeft:'1px solid var(--border-subtle)', padding:'14px 8px', textAlign:'center' }}>
                      <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:12, letterSpacing:'0.08em', textTransform:'uppercase', color:'#fff' }}>{short}</div>
                      <div style={{ fontFamily:'var(--font-body)', fontSize:10, color:'var(--text-faint)', marginTop:2 }}>{label}</div>
                    </div>
                  ))}
                </div>
                {times.map((time, ti) => {
                  const hasAny = days.some((_, di) => lookup[`${di}-${time}`]);
                  if (!hasAny) return null;
                  return (
                    <div key={time} style={{ display:'grid', gridTemplateColumns:'72px repeat(7,1fr)', borderBottom: ti < times.length-1 ? '1px solid var(--border-subtle)' : 'none' }}>
                      <div style={{ display:'flex', alignItems:'flex-start', justifyContent:'center', padding:'14px 6px', paddingTop:16 }}>
                        <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, color:'var(--accent)', letterSpacing:'0.02em' }}>{time}</span>
                      </div>
                      {days.map((_, di) => {
                        const items = lookup[`${di}-${time}`] || [];
                        return (
                          <div key={di} style={{ borderLeft:'1px solid var(--border-subtle)', minHeight:64 }}>
                            {items.length > 0 ? <Cell items={items}/> : null}
                          </div>
                        );
                      })}
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </section>
      </div>
    );
  }

  // ---------- PRICING ----------
  function PricingPage() {
    const { Button } = window.DesignSystem_494066;
    const P = window.OTL_PageHero;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const Tick = ({ yes }) => (
      <span style={{ display:'inline-flex', alignItems:'center', justifyContent:'center', width:22, height:22, borderRadius:6,
        background: yes ? 'rgba(114,221,158,0.15)' : 'rgba(255,255,255,0.04)',
        border: yes ? '1px solid rgba(114,221,158,0.4)' : '1px solid rgba(255,255,255,0.08)',
        color: yes ? 'var(--accent)' : 'var(--text-faint)', fontSize:13, fontWeight:700 }}>
        {yes ? '✓' : '—'}
      </span>
    );

    const features = ['GRIT', 'HYROX', 'Studio Classes', 'Gym Floor'];
    const memberships = [
      { name:'Accelerate X', price:'£130', featured:true,  tag:'All access',   age:null,      checks:[true, true, true, true]   },
      { name:'Elevate',       price:'£85',  featured:false, tag:'Studio & gym', age:null,      checks:[false,false,true, true]   },
      { name:'Activate',      price:'£65',  featured:false, tag:'Gym floor',    age:null,      checks:[false,false,false,true]   },
      { name:'Student',       price:'£55',  featured:false, tag:'Student rate', age:'18–24', note:'Full-time uni or 6th form', checks:[false,false,true, true]   },
      { name:'Seniors',       price:'£55',  featured:false, tag:'Senior rate',  age:'65+',     checks:[false,false,true, true]   },
      { name:'Juniors',       price:'£50',  featured:false, tag:'Junior rate',  age:'13–18',   checks:[false,false,false,true]   },
    ];

    const SectionLabel = ({ children }) => (
      <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', letterSpacing:'-0.01em', fontSize:22, color:'#fff', marginBottom:20 }}>{children}</div>
    );

    const Divider = () => <div style={{ borderTop:'1px solid var(--border-subtle)', margin:'56px 0' }}/>;

    return (
      <div>
        <P tag="Membership" title="Pricing" tagline="Rolling monthly subscriptions. No minimum term. One full month's written notice to cancel." colors={['#264238','#15221d']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px' }}>

            {/* Memberships */}
            <SectionLabel>Rolling Monthly Subscriptions</SectionLabel>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap:16 }}>
              {memberships.map((m) => (
                <div key={m.name} style={{
                  background: m.featured ? 'rgba(114,221,158,0.07)' : 'var(--surface-card)',
                  border: m.featured ? '1.5px solid var(--accent)' : '1px solid var(--border-subtle)',
                  borderRadius:14, padding:'24px 20px', display:'flex', flexDirection:'column', gap:16
                }}>
                  <div>
                    <div style={{ display:'flex', alignItems:'center', gap:8, flexWrap:'wrap', marginBottom:10 }}>
                      <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)', background:'rgba(114,221,158,0.1)', border:'1px solid rgba(114,221,158,0.2)', borderRadius:99, padding:'3px 10px' }}>{m.tag}</div>
                      {m.age && <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--text-muted)', background:'var(--surface-raised)', border:'1px solid var(--border-subtle)', borderRadius:99, padding:'3px 10px' }}>Age {m.age}</div>}
                    </div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:16, color: m.featured ? 'var(--accent)' : '#fff', letterSpacing:'0.02em' }}>{m.name}</div>
                  </div>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:34, color: m.featured ? 'var(--accent)' : '#fff', lineHeight:1 }}>
                    {m.price}<span style={{ fontFamily:'var(--font-body)', fontWeight:400, fontSize:13, color:'var(--text-muted)' }}>/mo</span>
                  </div>
                  {m.note && <div style={{ fontFamily:'var(--font-body)', fontSize:12, color:'var(--text-muted)', lineHeight:1.4 }}>{m.note}</div>}
                  <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
                    {features.map((f, fi) => (
                      <div key={f} style={{ display:'flex', alignItems:'center', gap:10 }}>
                        <Tick yes={m.checks[fi]}/>
                        <span style={{ fontFamily:'var(--font-body)', fontSize:13, color: m.checks[fi] ? 'var(--fog-200)' : 'var(--text-faint)' }}>{f}</span>
                      </div>
                    ))}
                  </div>
                  <div style={{ marginTop:'auto' }}>
                    <Button variant={m.featured ? 'primary' : 'secondary'} onClick={()=>go('join')}>Join Now</Button>
                  </div>
                </div>
              ))}
            </div>

            <Divider/>

            {/* Foundation + PAYG row */}
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:20, marginBottom:20 }}>
              {/* Foundation */}
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:28 }}>
                <SectionLabel>6 Week GRIT Foundation</SectionLabel>
                <div style={{ display:'flex', alignItems:'baseline', gap:10, marginBottom:12 }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:40, color:'var(--accent)', lineHeight:1 }}>£187</span>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)' }}>one-off payment</span>
                </div>
                <p style={{ margin:'0 0 20px', fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.6, color:'var(--text-muted)' }}>Beginner-friendly 6-week coached programme. The ideal starting point before joining a rolling membership.</p>
                <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
                  <Button variant="primary" onClick={()=>go('join')}>Get Started</Button>
                  <AppButtons size="sm" />
                </div>
              </div>
              {/* PAYG */}
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:28 }}>
                <SectionLabel>Pay As You Go</SectionLabel>
                <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--accent)', marginBottom:10 }}>Member Credits</div>
                  {[['PAYG Group Training','£10']].map(([l,p]) => (
                    <div key={l} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                      <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fog-200)' }}>{l}</span>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:16, color:'#fff' }}>{p}</span>
                    </div>
                  ))}
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', margin:'16px 0 10px' }}>Non-Member Credits</div>
                  {[['Gym Only','£15'],['Class Only','£20'],['Group Training','£20']].map(([l,p]) => (
                    <div key={l} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                      <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fog-200)' }}>{l}</span>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:16, color:'#fff' }}>{p}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* PT + Hire row */}
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:20 }}>
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:28 }}>
                <SectionLabel>Personal Training</SectionLabel>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fog-200)' }}>1-2-1 Personal Training</span>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:16, color:'#fff' }}>From £50<span style={{ fontWeight:400, fontSize:12, color:'var(--text-muted)' }}>/hr</span></span>
                </div>
              </div>
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:28 }}>
                <SectionLabel>Exclusive Hire</SectionLabel>
                {[['Exclusive Studio Hire','£36/hr'],['Exclusive Gym Hire','£240/hr']].map(([l,p]) => (
                  <div key={l} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom:'1px solid var(--border-subtle)' }}>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--fog-200)' }}>{l}</span>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:16, color:'#fff' }}>{p}</span>
                  </div>
                ))}
              </div>
            </div>

            <Divider/>

            {/* Notes */}
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {[
                'All rolling subscriptions. No minimum term contract, 1 full month\'s written notice required to cancel.',
                'All fees include 20% VAT.',
                'Junior access: Monday–Friday 12:00–18:00 · Saturday 08:00–16:00 · Sunday 08:00–12:00.',
                'We reserve the right to increase membership fees every January 1st.',
              ].map((note, i) => (
                <div key={i} style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
                  <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', flexShrink:0, marginTop:7 }}/>
                  <span style={{ fontFamily:'var(--font-body)', fontSize:13.5, lineHeight:1.6, color:'var(--text-muted)' }}>{note}</span>
                </div>
              ))}
            </div>

          </div>
        </section>
      </div>
    );
  }

  // ---------- TEAM (real) ----------
  function TeamPage2() {
    const P = window.OTL_PageHero;
    const { Button } = window.DesignSystem_494066;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();

    const owners = [
      {
        name: 'Adam Bell',
        role: 'Co-Owner & Personal Trainer',
        bio: 'With a background in Sports Management and Psychology, Adam is ideally placed to manage the day-to-day logistics of On The Limit, understanding the needs of members and the physical and psychological hurdles they face on their fitness journey. Qualified to Level 3 Personal Trainer.',
      },
      {
        name: 'Kathryn Bell',
        role: 'Co-Owner · Midwife · Women\'s Health',
        bio: 'A registered Midwife, Health Visitor and expert in Women\'s Health, Kathryn brings a unique perspective to the gym\'s commitment to the physical, emotional and spiritual wellbeing of all members. A former member of the GB gymnastics national squad, she now competes nationally as a Masters Cheerleader.',
      },
    ];

    return (
      <div>
        <P tag="Est. 2012" title="Fitness Team" tagline="A strong community, all committed to helping you reach your goals." colors={['#2a453d','#16231e']} />

        {/* Owners */}
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>Owners</div>
            <h2 style={{ margin:'0 0 36px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em' }}>
              Adam & <span style={{ color:'var(--accent)' }}>Kathryn Bell</span>
            </h2>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:20, marginBottom:40 }}>
              {owners.map(({ name, role, bio }) => (
                <div key={name} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:16, overflow:'hidden', display:'flex', flexDirection:'column' }}>
                  <div style={{ height:200, background: window.OTL_DATA.gradient('#2c4a3f','#17251f'), position:'relative', display:'flex', alignItems:'flex-end', padding:'16px 20px' }}>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.3)' }}>Photo coming soon</span>
                  </div>
                  <div style={{ padding:'24px 26px', display:'flex', flexDirection:'column', gap:8, flex:1 }}>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:18, color:'#fff', letterSpacing:'0.01em' }}>{name}</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--accent)' }}>{role}</div>
                    <p style={{ margin:'8px 0 0', fontFamily:'var(--font-body)', fontSize:14.5, lineHeight:1.7, color:'var(--text-muted)' }}>{bio}</p>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ background:'rgba(114,221,158,0.05)', border:'1px solid rgba(114,221,158,0.2)', borderRadius:14, padding:'24px 28px', fontFamily:'var(--font-body)', fontSize:15.5, lineHeight:1.75, color:'var(--fog-200)' }}>
              We opened the doors of On The Limit in <strong style={{ color:'#fff' }}>March 2012</strong> as a family of three. Since then we've grown our family to five, welcoming Ava and Harry, and built a team of <strong style={{ color:'#fff' }}>local fitness instructors, personal trainers and front of house staff</strong> who all work to give our members the best fitness experience possible.
            </div>
          </div>
        </section>

        {/* The team */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px' }}>
            <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--accent)', marginBottom:12 }}>Our team</div>
            <h2 style={{ margin:'0 0 12px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(26px,3vw,36px)', color:'#fff', letterSpacing:'-0.015em' }}>
              Personal Trainers & <span style={{ color:'var(--accent)' }}>Instructors</span>
            </h2>
            <p style={{ margin:'0 0 36px', fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)', maxWidth:600 }}>
              Our full team of instructors and PTs specialise across all our disciplines, from GRIT and HYROX to studio classes and personal training. Full team profiles coming soon.
            </p>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap:16 }}>
              {[...Array(8)].map((_,i) => (
                <div key={i} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, overflow:'hidden' }}>
                  <div style={{ height:160, background:window.OTL_DATA.gradient('#243f38','#14201c'), display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.2)' }}>Photo</span>
                  </div>
                  <div style={{ padding:'16px 18px' }}>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color:'#fff' }}>Team Member</div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:10, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)', marginTop:4 }}>Role TBC</div>
                  </div>
                </div>
              ))}
            </div>
            <p style={{ marginTop:24, fontFamily:'var(--font-body)', fontSize:13, color:'var(--text-faint)', textAlign:'center' }}>Individual team profiles being added shortly.</p>
          </div>
        </section>

        {/* 1-1 PT CTA */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '56px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:18 }}>
              <span style={{ width:32, height:3, background:'var(--accent)', borderRadius:99, display:'block' }}></span>
              <h2 style={{ margin:0, fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize: isMobile ? 28 : 36, lineHeight:1.05, color:'#fff', letterSpacing:'-0.01em' }}>
                Book a <span style={{ color:'var(--accent)' }}>1-1 with a PT</span>
              </h2>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:16, lineHeight:1.7, color:'var(--text-muted)' }}>
                Our personal trainers build a programme entirely around you, your goals and your starting point. One session, one coach, zero distraction. Get in touch and we'll match you with the right trainer.
              </p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                <Button variant="primary" size="lg" onClick={()=>go('contact')}>Book a Session</Button>
                <Button variant="secondary" size="lg" onClick={()=>go('personal-training')}>Learn More</Button>
              </div>
            </div>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:16 }}>
              {[['Fully bespoke','Programme built around your goals, not a template.'],['Technique first','Move well before you move heavy.'],['Accountability','A coach in your corner every session.'],['Flexible','Sessions to fit around your schedule.']].map(([t,b]) => (
                <div key={t} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'20px 18px', display:'flex', flexDirection:'column', gap:8 }}>
                  <span style={{ width:20, height:3, background:'var(--accent)', borderRadius:99, display:'block' }}></span>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color:'#fff', letterSpacing:'0.02em' }}>{t}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:13, lineHeight:1.55, color:'var(--text-muted)' }}>{b}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }
  window.OTL_TeamPage2 = TeamPage2;

  // ---------- TEAM (old placeholder) ----------
  function TeamPage() {
    const P = window.OTL_PageHero;
    const team = [
      ['Head Coach','GRIT & Foundation'], ['Coach','HYROX & Conditioning'],
      ['Coach','Studio & RIDE'], ['PT','1-2-1 Coaching'],
      ['PT','Strength'], ['Coach','Students & Juniors'],
    ];
    return (
      <div>
        <P tag="Meet the team" title="Fitness Team" tagline="Real coaches who learn your name and meet you where you are." colors={['#2a453d','#16231e']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding:'72px 24px', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20 }}>
            {team.map(([role,spec],i) => (
              <div key={i} style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:'var(--radius-md)', overflow:'hidden' }}>
                <div aria-hidden="true" style={{ height:220, background:window.OTL_DATA.gradient('#2c4a3f','#17251f'), position:'relative' }}>
                  <span style={{ position:'absolute', left:16, bottom:12, fontFamily:'var(--font-body)', fontSize:10.5, letterSpacing:'0.08em', textTransform:'uppercase', color:'rgba(255,255,255,0.28)' }}>Coach photo →</span>
                </div>
                <div style={{ padding:'20px 22px' }}>
                  <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:17, color:'#fff' }}>Coach Name</div>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:'var(--accent)', marginTop:6 }}>{role}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:14, color:'var(--text-muted)', marginTop:8 }}>{spec}</div>
                </div>
              </div>
            ))}
          </div>
        </section>
      </div>
    );
  }

  // ---------- FAQ ----------
  function FaqPage() {
    const P = window.OTL_PageHero;
    const isMobile = window.OTL_useIsMobile();
    const [open, setOpen] = React.useState(null);

    const P2 = ({ children }) => <p style={{ margin:'0 0 10px' }}>{children}</p>;
    const Paras = ({ items }) => <div>{items.map((t,i) => <P2 key={i}>{t}</P2>)}</div>;

    const faqs = [
      {
        q: 'How to join On The Limit',
        a: (
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {[
              <span>Step 1: Download the app — <a href="https://apps.apple.com/gb/app/on-the-limit/id1614256417" target="_blank" rel="noreferrer" style={{ color:'var(--accent)', textDecoration:'underline' }}>App Store</a> or <a href="https://play.google.com/store/apps/details?id=com.clubright.onthelimit" target="_blank" rel="noreferrer" style={{ color:'var(--accent)', textDecoration:'underline' }}>Google Play</a> — or join via the link at the top of the website.</span>,
              'Step 2: Verify your email address immediately.',
              'Step 3: Go to Profile in your account, fill in all your details and upload a clear profile photo.',
              'Step 4: Download the app if you haven\'t already, you\'ll need it to book classes and scan your entry barcode.',
              'Step 6: Sign in to your account, you\'re now good to go!',
            ].map((t, i) => <p key={i} style={{ margin:0 }}>{t}</p>)}
          </div>
        ),
      },
      {
        q: 'How can I book a class or gym floor session?',
        a: <Paras items={[
          'Members can book classes or junior gym floor sessions via the On The Limit app up to 7 days in advance. Last-minute slots almost always become available, just check the app.',
          'If you have NOT set up an online profile before, click the JOIN tab and enter the email you used when setting up your membership. If the class is full, you\'ll be offered a place on the waiting list.',
        ]} />,
      },
      {
        q: 'Pay As You Go',
        a: 'Anyone wishing to train on a PAYG basis must download the app and join accordingly. You are required to pay for your credit before arrival and use your app to scan in and out. If you plan to come more regularly, a rolling monthly membership is more cost-effective.',
      },
      {
        q: 'What if I\'m not sure?',
        a: 'We want you to be able to test out a couple of classes, new members can take advantage of a free pass. Just message us for details.',
      },
      {
        q: 'Arriving on time',
        a: 'Please arrive 5 minutes early to allow for parking. We operate a strict late policy, no entry once the session has begun, to respect other members\' experience.',
      },
      {
        q: 'Scanning in and out',
        a: <Paras items={[
          'Please scan in AND out as you pass through reception. This registers your attendance, checks you into any booked class, and confirms you have left the building.',
          'If attending two classes back to back, return to reception between sessions to register your second class. Two failed attendances (no-shows) will block your booking rights for 1 week.',
        ]} />,
      },
      {
        q: 'Waiting lists',
        a: 'When a space becomes available, everyone on the waiting list is simultaneously notified via the app (ensure notifications are enabled). The first member to respond takes the place, first come, first served.',
      },
      {
        q: 'Session cancellation policy',
        a: <Paras items={[
          'We require a minimum of 2 hours\' notice to cancel a booked session. If a session is cancelled late more than twice in any 14-day period, booking rights will be suspended for 1 week.',
          'We reserve the right to cancel a class with fewer than 3 members attending, or if an instructor is unavailable. We will give as much notice as possible.',
        ]} />,
      },
      {
        q: 'Virtual classes',
        a: <Paras items={[
          'We stream some classes via Zoom, bookable in advance via the app. The Zoom code is sent in your reminder email if booked more than 24 hours before, or in your booking confirmation if booked within 24 hours.',
          'Please ensure your name is correct when joining so we can register your attendance, keep your camera on so your instructor can provide technique feedback, and use \'Active Speaker View\'.',
        ]} />,
      },
      {
        q: 'I\'m not receiving emails from you',
        a: 'Please add info@onthelimit.co.uk to your safe senders list, many firewalls flag our system as spam. We also send communications via push notifications through the app, so please ensure these are enabled.',
      },
      {
        q: 'Personal Training',
        a: 'All On The Limit Personal Trainers are fully qualified and results-focused. We offer 1-2-1 PT sessions, you don\'t need to be a member. Speak to any PT directly, or contact us and we\'ll discuss your options.',
      },
      {
        q: 'What are your opening hours?',
        a: 'Monday–Friday: 06:00–20:00 · Saturday: 08:00–16:00 · Sunday: 08:00–12:00. Hours may vary over Bank Holidays and the Easter, Christmas and New Year periods.',
      },
      {
        q: 'Do I need a membership card?',
        a: 'Membership cards are no longer issued. Your entry QR barcode is generated via the On The Limit app, which you use to scan in and out and register class attendance.',
      },
      {
        q: 'Clean indoor only shoe policy',
        a: 'All footwear worn in the gym must be clean and not worn outside, including the walk in from the car park. Please change into your clean indoor trainers in reception. Failure to do so may result in access being denied.',
      },
      {
        q: 'Parking',
        a: 'On The Limit has 14 allocated spaces clearly marked to the left of the building, on a first-come, first-served basis. If no spaces are available, please use the surrounding roads. Please do not use Royal Mail spaces, On The Limit will not be liable for any charges incurred.',
      },
      {
        q: 'Attire',
        a: 'All members and guests must wear attire suitable for exercise. Both male and female members are encouraged to wear short-sleeved or sleeveless tops. If staff feel attire is not appropriate, members may be asked to cover up or cease their session.',
      },
      {
        q: 'Behaviour',
        a: 'Abusive language, threatening or violent behaviour will not be tolerated. Photography or videography that includes other members or staff is strictly prohibited in all areas unless all participants give express permission. Damage to equipment due to ill treatment must be paid for.',
      },
      {
        q: 'Freezing your membership',
        a: 'Memberships can be frozen for a minimum of 1 month. On The Limit will freeze free of charge if you are sick or injured (medical proof required). One month\'s notice is still applicable if you wish to cancel while frozen.',
      },
      {
        q: 'Cancelling your membership',
        a: 'Memberships can be cancelled by giving one full calendar month\'s notice in writing, by email to info@onthelimit.co.uk. For example: an email received on or after 1st February means your March fee is still due, but you retain full access until 31st March.',
      },
    ];

    return (
      <div>
        <P tag="Good to know" title="FAQs" tagline="Everything you need before your first session." colors={['#243f38','#14201c']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:820, margin:'0 auto', padding: isMobile ? '40px 20px' : '72px 24px', display:'flex', flexDirection:'column', gap:8 }}>
            {faqs.map(({ q, a }, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ border:'1px solid var(--border-subtle)', borderRadius:12, background:'var(--surface-card)', overflow:'hidden' }}>
                  <button onClick={() => setOpen(isOpen ? null : i)} style={{ width:'100%', textAlign:'left', background:'none', border:'none', cursor:'pointer', padding:'20px 24px', display:'flex', alignItems:'center', justifyContent:'space-between', gap:16 }}>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:15, color:'#fff', textTransform:'uppercase', letterSpacing:'-0.005em' }}>{q}</span>
                    <span style={{ color:'var(--accent)', fontSize:22, lineHeight:1, transform:isOpen?'rotate(45deg)':'none', transition:'transform .2s', flexShrink:0 }}>+</span>
                  </button>
                  {isOpen && (
                    <div style={{ padding:'0 24px 22px', fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.7, color:'var(--text-muted)' }}>
                      {typeof a === 'string' ? <p style={{ margin:0 }}>{a}</p> : a}
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </section>
      </div>
    );
  }

  // ---------- CONTACT ----------
  function ContactPage() {
    const { Button } = window.DesignSystem_494066;
    const P = window.OTL_PageHero;
    const isMobile = window.OTL_useIsMobile();
    const [name, setName] = React.useState('');
    const [email, setEmail] = React.useState('');
    const [message, setMessage] = React.useState('');
    const [sent, setSent] = React.useState(false);

    const inputStyle = { fontFamily:'var(--font-body)', fontSize:15, color:'#fff', background:'var(--surface-deep)', border:'1.5px solid var(--border-subtle)', borderRadius:'var(--radius-md)', padding:'13px 16px', outline:'none', width:'100%', boxSizing:'border-box' };
    const labelStyle = { fontFamily:'var(--font-display)', fontSize:12, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase', color:'var(--text-muted)', display:'block', marginBottom:7 };

    const handleSubmit = (e) => {
      e.preventDefault();
      if (!name || !message) return;
      const subject = encodeURIComponent(`Website enquiry from ${name}`);
      const body = encodeURIComponent(`Name: ${name}\nEmail: ${email}\n\nMessage:\n${message}`);
      window.open(`mailto:info@onthelimit.co.uk?subject=${subject}&body=${body}`);
      setSent(true);
    };

    return (
      <div>
        <P tag="Say hello" title="Contact" tagline="Questions, tours or just want to chat? We'd love to hear from you." colors={['#26433a','#15221d']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1100, margin:'0 auto', padding: isMobile ? '48px 20px' : '72px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 56 }}>
            <form onSubmit={handleSubmit} style={{ display:'flex', flexDirection:'column', gap:18 }}>
              <div>
                <label style={labelStyle}>Full name</label>
                <input required placeholder="Jamie Smith" value={name} onChange={e=>setName(e.target.value)} style={inputStyle} />
              </div>
              <div>
                <label style={labelStyle}>Email</label>
                <input type="email" placeholder="you@email.com" value={email} onChange={e=>setEmail(e.target.value)} style={inputStyle} />
              </div>
              <div>
                <label style={labelStyle}>Message</label>
                <textarea required rows="5" placeholder="Tell us what you're after..." value={message} onChange={e=>setMessage(e.target.value)} style={{ ...inputStyle, resize:'vertical', minHeight:120 }}></textarea>
              </div>
              {sent
                ? <div style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--accent)', padding:'12px 0' }}>✓ Your email client has opened, just hit send!</div>
                : <div><Button variant="primary" size="lg" type="submit">Send Message</Button></div>
              }
            </form>
            <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
              <div style={{ borderRadius:'var(--radius-md)', overflow:'hidden', border:'1px solid var(--border-subtle)', height:240 }}>
                <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>
              {[['Find us','44 Western Road, Tring, Hertfordshire HP23 4BB'],['Phone','01442 828881'],['Email','info@onthelimit.co.uk']].map(([h,v]) => (
                <div key={h}>
                  <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)', marginBottom:6 }}>{h}</div>
                  <div style={{ fontFamily:'var(--font-body)', fontSize:16, color:'var(--fog-200)' }}>{v}</div>
                </div>
              ))}
              <div>
                <div style={{ fontFamily:'var(--font-display)', fontSize:11, fontWeight:700, letterSpacing:'0.14em', textTransform:'uppercase', color:'var(--accent)', marginBottom:10 }}>Opening hours</div>
                <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                  {[['Monday – Friday','06:00 – 20:00'],['Saturday','08:00 – 16:00'],['Sunday','08:00 – 12:00']].map(([day, time]) => (
                    <div key={day} style={{ display:'flex', alignItems:'center', borderBottom:'1px solid var(--border-subtle)', paddingBottom:6 }}>
                      <span style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--fog-300)', width:160, flexShrink:0 }}>{day}</span>
                      <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:15, color:'var(--fog-200)', letterSpacing:'0.02em' }}>{time}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    );
  }

  // ---------- JOIN ----------
  const APP_IOS     = 'https://apps.apple.com/gb/app/on-the-limit/id1614256417';
  const APP_ANDROID = 'https://play.google.com/store/apps/details?id=com.clubright.onthelimit';

  function AppButtons({ size = 'lg' }) {
    const sm = size === 'sm';
    const ic = sm ? 20 : 24;

    const AppleIcon = () => (
      <svg width={ic} height={ic} viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg">
        <path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.3.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83zM13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
      </svg>
    );

    const PlayIcon = () => (
      <svg width={ic} height={ic} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path d="M3.609 1.814L13.792 12 3.61 22.186a.996.996 0 01-.61-.92V2.734a1 1 0 01.609-.92z" fill="#4FC3F7"/>
        <path d="M13.792 12l3.322 3.322-7.927 4.614A1 1 0 017.8 20.28z" fill="#FF7043"/>
        <path d="M20.196 10.67l-3.082 1.795L13.792 12 7.8 3.72a1 1 0 011.387-.344l7.927 4.614 3.082 1.795a1 1 0 010 1.885z" fill="#FFC107"/>
        <path d="M13.792 12l-5.993 8.28a1 1 0 01-.199-.134L3.609 22.186A.997.997 0 013 21.266V12z" fill="#4CAF50"/>
      </svg>
    );

    const badges = [
      { href: APP_IOS,     Icon: AppleIcon, sup: 'Download on the', label: 'App Store'   },
      { href: APP_ANDROID, Icon: PlayIcon,  sup: 'Get it on',        label: 'Google Play' },
    ];

    return (
      <div style={{ display:'flex', gap:10, flexWrap:'wrap' }}>
        {badges.map(({ href, Icon, sup, label }) => (
          <a key={label} href={href} target="_blank" rel="noreferrer"
            style={{ display:'flex', alignItems:'center', gap:sm ? 8 : 10, background:'#111', border:'1px solid rgba(255,255,255,0.18)', borderRadius:11, padding: sm ? '8px 14px' : '11px 18px', textDecoration:'none', transition:'border-color .15s, opacity .15s' }}
            onMouseEnter={e=>e.currentTarget.style.borderColor='rgba(255,255,255,0.45)'}
            onMouseLeave={e=>e.currentTarget.style.borderColor='rgba(255,255,255,0.18)'}>
            <Icon />
            <div>
              <div style={{ fontFamily:'var(--font-body)', fontSize: sm ? 9 : 10, color:'rgba(255,255,255,0.55)', lineHeight:1, marginBottom:2 }}>{sup}</div>
              <div style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize: sm ? 12 : 15, color:'#fff', letterSpacing:'0.01em', lineHeight:1 }}>{label}</div>
            </div>
          </a>
        ))}
      </div>
    );
  }
  window.OTL_AppButtons = AppButtons;

  function JoinPage() {
    const P = window.OTL_PageHero;
    const go = window.OTL_go;
    const isMobile = window.OTL_useIsMobile();
    const steps = [
      ['Download the app', 'Search "On The Limit" on the App Store or Google Play and tap download.'],
      ['Create your account', 'Sign up, verify your email, then fill in your profile and upload a clear photo.'],
      ['Choose your membership', 'Select your plan, enter payment details and you\'re live.'],
      ['Scan in & train', 'Use the app to book classes and scan in at reception. That\'s it.'],
    ];
    return (
      <div>
        <P tag="Let's go" title="Join Now" tagline="Joining takes two minutes. Download the app and you're in." colors={['#2b4a3e','#16261f']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:900, margin:'0 auto', padding: isMobile ? '48px 20px' : '80px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 64, alignItems:'center' }}>
            <div style={{ display:'flex', flexDirection:'column', gap:24 }}>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:18, lineHeight:1.75, color:'var(--text-primary)' }}>
                Everything happens through the On The Limit app, memberships, class bookings, payments and your entry barcode. Download it to get started.
              </p>
              <AppButtons size="lg" />
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--text-faint)', lineHeight:1.6 }}>
                Available on iOS and Android. Already have the app? <a href={APP_IOS} target="_blank" rel="noreferrer" style={{ color:'var(--accent)', textDecoration:'underline' }}>Open in App Store</a> · <a href={APP_ANDROID} target="_blank" rel="noreferrer" style={{ color:'var(--accent)', textDecoration:'underline' }}>Open in Google Play</a>.
              </p>
            </div>
            <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
              {steps.map(([title, body], i) => (
                <div key={title} style={{ display:'flex', gap:18, alignItems:'flex-start', background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'20px 22px' }}>
                  <span style={{ fontFamily:'var(--font-display)', fontWeight:800, fontSize:26, color:'rgba(114,221,158,0.3)', lineHeight:1, flexShrink:0, minWidth:32 }}>0{i+1}</span>
                  <div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:13, color:'#fff', marginBottom:6, letterSpacing:'0.02em' }}>{title}</div>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.6, color:'var(--text-muted)' }}>{body}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Questions */}
        <section style={{ background:'var(--surface-deep)', borderTop:'1px solid var(--border-subtle)' }}>
          <div style={{ maxWidth:900, margin:'0 auto', padding: isMobile ? '48px 20px' : '64px 24px', display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 32 : 40, alignItems:'center' }}>
            <div>
              <h2 style={{ margin:'0 0 14px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:'clamp(22px,2.5vw,32px)', color:'#fff', letterSpacing:'-0.01em' }}>
                Not sure which <span style={{ color:'var(--accent)' }}>plan?</span>
              </h2>
              <p style={{ margin:'0 0 24px', fontFamily:'var(--font-body)', fontSize:15.5, lineHeight:1.7, color:'var(--text-muted)' }}>
                Take a look at our pricing page or get in touch and we'll point you in the right direction.
              </p>
              <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
                <a href="#/pricing" onClick={(e)=>{e.preventDefault();go('pricing');}} style={{ display:'inline-block', fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--accent)', background:'rgba(114,221,158,0.1)', border:'1.5px solid rgba(114,221,158,0.35)', borderRadius:99, padding:'10px 20px', textDecoration:'none' }}>View Pricing</a>
                <a href="#/contact" onClick={(e)=>{e.preventDefault();go('contact');}} style={{ display:'inline-block', fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, textTransform:'uppercase', letterSpacing:'0.04em', color:'var(--text-muted)', background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:99, padding:'10px 20px', textDecoration:'none' }}>Contact Us</a>
              </div>
            </div>
            <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:14, padding:'28px 26px', display:'flex', flexDirection:'column', gap:12 }}>
              {[['No tie-in contract','Rolling monthly. One month\'s notice to cancel.'],['All levels welcome','From complete beginners to seasoned athletes.'],['Family owned','Independent gym in Tring since 2012.']].map(([t,b]) => (
                <div key={t} style={{ display:'flex', gap:12, alignItems:'flex-start' }}>
                  <span style={{ color:'var(--accent)', fontSize:15, marginTop:1, flexShrink:0 }}>✓</span>
                  <div>
                    <div style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, textTransform:'uppercase', color:'#fff', marginBottom:3 }}>{t}</div>
                    <div style={{ fontFamily:'var(--font-body)', fontSize:13.5, color:'var(--text-muted)', lineHeight:1.5 }}>{b}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </div>
    );
  }

  // ---------- SHARED: BACK BUTTON ----------
  function BackButton() {
    return (
      <button onClick={() => window.history.back()}
        style={{ display:'inline-flex', alignItems:'center', gap:8, background:'none', border:'1px solid var(--border-subtle)', borderRadius:99, padding:'8px 16px', cursor:'pointer', fontFamily:'var(--font-display)', fontWeight:700, fontSize:12, letterSpacing:'0.06em', textTransform:'uppercase', color:'var(--text-muted)', transition:'color .15s, border-color .15s', marginBottom:32 }}
        onMouseEnter={e=>{ e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor='var(--accent)'; }}
        onMouseLeave={e=>{ e.currentTarget.style.color='var(--text-muted)'; e.currentTarget.style.borderColor='var(--border-subtle)'; }}>
        ← Back
      </button>
    );
  }

  // ---------- TERMS & CONDITIONS ----------
  function TermsPage() {
    const P = window.OTL_PageHero;

    const Section = ({ num, title, children }) => (
      <div style={{ marginBottom:36 }}>
        <h2 style={{ margin:'0 0 14px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:16, color:'#fff', letterSpacing:'0.02em' }}>{num}. {title}</h2>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>{children}</div>
      </div>
    );

    const Clause = ({ id, children }) => (
      <div style={{ display:'flex', gap:14 }}>
        {id && <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--accent)', flexShrink:0, minWidth:32 }}>{id}</span>}
        <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>
      </div>
    );

    return (
      <div>
        <P tag="Legal" title="Terms & Conditions" tagline="Please read these terms carefully before using On The Limit." colors={['#243f38','#14201c']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:860, margin:'0 auto', padding:'72px 24px' }}>
            <BackButton />

            <Section num="1" title="Definitions">
              <Clause id="1.1"><strong style={{color:'#fff'}}>The Club:</strong> On The Limit.</Clause>
              <Clause id="1.2"><strong style={{color:'#fff'}}>The Club Rules:</strong> The rules and regulations of the Club, as amended from time to time.</Clause>
              <Clause id="1.3"><strong style={{color:'#fff'}}>Commitment Period:</strong> The minimum term you are committing to remain a member of the Club from the Start Date to the commitment period end date (subject to extension if your membership is suspended).</Clause>
            </Section>

            <Section num="2" title="Membership">
              <Clause id="2.1">By signing this Membership Application Form the member agrees to comply with these Terms and Conditions of Membership and the Club Rules.</Clause>
              <Clause id="2.2">You will only be permitted to use the Club facilities provided your membership is current and fully paid up or you have made payment arrangements acceptable to the Club.</Clause>
            </Section>

            <Section num="3" title="Membership Categories">
              <Clause>The Club offers different categories of membership which are set out in the Club's information sheet. Your choice of category on joining will determine the fees you pay and any restrictions that may apply to your use of Club facilities.</Clause>
            </Section>

            <Section num="4" title="Duration">
              <Clause>When you join the Club you are agreeing to remain a member for the Commitment Period. If you choose to pay your membership fees monthly, your Club membership will continue automatically after the Commitment Period end date at the fee rate applicable to your membership type and category at that date, but subject to termination in accordance with paragraph 8.2(b). If you choose to join by paying your Commitment Period fee in advance, your membership will terminate automatically on expiry of the Commitment Period.</Clause>
            </Section>

            <Section num="5" title="Fees">
              <Clause>The Club will set the level of fees and will review such fees periodically. The Club reserves the right to change the level of fees from time to time but guarantees that your fees will not increase during your Commitment Period. For any changes to the monthly fee, we will give you at least 1 calendar month's written notice.</Clause>
              <Clause id="5.1"><strong style={{color:'#fff'}}>Membership fee:</strong> The level of membership fees shall be determined according to the type and category of membership.</Clause>
              <Clause id="5.2"><strong style={{color:'#fff'}}>Administration fee:</strong> An administration fee is payable as specified in your application form. Your administration fee goes to start-up costs.</Clause>
              <Clause id="5.3"><strong style={{color:'#fff'}}>Guest user fee:</strong> A fee will be set by the Club from time to time in respect of guests of members who wish to visit the Club and use the facilities.</Clause>
              <Clause id="5.4"><strong style={{color:'#fff'}}>Other fees:</strong> All other fees and prices for the sale of goods at the Club and any other services will be set by the Club from time to time.</Clause>
              <Clause id="5.5">If your bank fails to make a due direct debit payment, we will write to advise you. We may apply to your bank for payment three times within one calendar month and reserve the right to refer any missed payments to a debt collection agency. We may charge a fee of no more than £15 for failed direct debit payments and no more than £5 for letters sent in respect of unpaid amounts.</Clause>
              <Clause id="5.6">Should any membership fees not be paid within 30 days of the due date, the full membership fee for the remainder of the commitment period will automatically become due and payable in full.</Clause>
              <Clause id="5.7">Any unpaid and overdue membership fees referred to a debt collection agency will be subject to a surcharge of no more than £30 to cover collection costs. This surcharge, together with all other charges and legal fees incurred in collection, will be the responsibility of the member and will be legally recoverable.</Clause>
              <Clause id="5.8">We may appoint a payment processing agent to receive and collect your monthly or annual direct debit instalments. There will be no extra cost to you for these processing services.</Clause>
              <Clause id="5.9">We may charge a reasonable fee of up to £35 for any of the following: replacing lost membership cards, removing or adding Associate members, changing membership category and transferring memberships.</Clause>
            </Section>

            <Section num="6" title="Active Referral Scheme">
              <Clause>The Club may operate a referral scheme whereby you will receive a financial benefit for introducing new members to the Club.</Clause>
              <Clause id="6.1">If the member you introduce joins on a Direct Debit membership, you will receive the benefit monthly (in arrears, after the first Direct Debit payment has been made) against your account or monthly fee, subject to: (a) both memberships being current; (b) the referred member's membership not being suspended; (c) the benefit amount being fixed at the time of the referred member joining; (d) the Club may set a limit on the number of members you are able to refer.</Clause>
              <Clause id="6.2">If the member you refer joins on an annual membership, you will receive the benefit due as one lump sum upon the referred member joining the Club.</Clause>
            </Section>

            <Section num="7" title="Suspension of Membership">
              <Clause>A member may, if unable to use the Club facilities by reason of illness or injury, suspend their membership for one continuous period of at least 1 month and a maximum of 3 months. 30 days written notice must be given and the Club shall have the right to request a doctor's certificate. A reduced monthly fee may be charged during suspension. Any suspension during the Commitment Period will extend the length of the Commitment Period accordingly. Notice to terminate membership cannot run concurrently with a suspension period.</Clause>
            </Section>

            <Section num="8" title="Termination">
              <Clause><strong style={{color:'#fff'}}>8.1 Termination by the Club.</strong> We may terminate this agreement if: (a) you commit a serious or repeated breach of this agreement or the Club's rules and the breach is not remedied within 7 days of a default notice; (b) any part of your membership fee remains unpaid 30 days after its due date; (c) you provide details which you know to be false when applying for membership; or (d) any behaviour, physical, verbal, virtual, online or written, that causes threat, discomfort, harm or safety concerns to fellow members or staff. If a membership is terminated under these circumstances, unused membership fees may be returned at the owners' discretion.</Clause>
              <Clause><strong style={{color:'#fff'}}>8.2 Termination by you.</strong> (a) You can give notice to terminate at any point during the Commitment Period but this cannot end your membership before the end of the Commitment Period. (b) You may terminate by giving the Club at least 1 full calendar month's notice. (c) Cancelling your direct debit is not sufficient notice. (d) You may terminate on 1 calendar month's notice if you are unable to use the Club through serious illness or injury likely to preclude use for at least 6 calendar months (reasonable evidence required).</Clause>
            </Section>

            <Section num="9" title="Membership Barcodes">
              <Clause id="9.1">Membership QR codes are generated for all members via the ClubRight app and are needed to gain entry to the Club. QR codes are not transferable, any member allowing their barcode to be used by another person is in serious breach of these Terms and Conditions and entitles the Club to terminate membership without notice.</Clause>
              <Clause id="9.2">If a membership card is lost it should be reported to the Club. The Club reserves the right to charge an administration fee for the provision of a replacement.</Clause>
            </Section>

            <Section num="10" title="Club Rules">
              <Clause id="10.1">The Club may amend the Club Rules from time to time to ensure the health and safety of members. Temporary amendments will be displayed in the Club. Permanent changes will only be made after at least 30 days notice, except in the case of emergency.</Clause>
              <Clause id="10.2">The Club reserves the right to adjust the availability of certain facilities or close temporarily for cleaning, repairs, maintenance, special functions, holidays or regional/global pandemic.</Clause>
              <Clause id="10.3">Junior members are subject to restricted hours on weekdays (12:00–18:00) and must vacate the gym premises by 18:00 Monday to Friday, unless booked into an evening class or accompanied by a supervising adult.</Clause>
              <Clause id="10.4">All members are expected to wear appropriate exercise clothing and footwear. All footwear must be clean and appropriate for usage on the gym floor and studio. The Club reserves the right to refuse entry to any member not adhering to this requirement.</Clause>
              <Clause id="10.5">Car parking (14 spaces) is provided on a first-come, first-served basis. If members cannot park in the allocated spaces, they are asked to find alternative parking outside the perimeter of the site.</Clause>
            </Section>

            <Section num="11" title="Restriction of Liability">
              <Clause id="11.1">The Club will not accept liability for any loss, damage to or theft of money, valuables or other personal property of members and guests. Property stored in lockers provided by the Club is stored at the owner's risk.</Clause>
              <Clause id="11.2">Our liability to compensate you for any loss or damage (other than death or personal injury) is limited to a reasonable amount having regard to whether the damage was due to a negligent act or omission by us.</Clause>
              <Clause id="11.3">The Club accepts liability for damage, accident, death or personal injury sustained by members on the Club premises to the extent caused by its negligence or the negligence of its employees, unless attributable to: (a) your own fault; (b) a third party unconnected with our provision of services; or (c) events which neither we nor our supplier could have foreseen even if we had taken all reasonable care.</Clause>
              <Clause id="11.4">Cars are parked entirely at the member's own risk. The Club accepts no responsibility for damage, loss or theft from vehicles, and no liability for fines incurred by failing to park within one of the 14 clearly marked spaces.</Clause>
            </Section>

            <Section num="12" title="Health & Safety">
              <Clause>Members must read all Health and Safety notices displayed in the Club and comply with their recommendations.</Clause>
            </Section>

            <Section num="13" title="Sale of Club">
              <Clause>In the event of the sale or disposal of the Club to another company or person, we may transfer your membership to the new owner and you will continue as a member provided no changes to these terms or the Club rules having a material adverse effect on your use of the Club are made by the new owner. Any such disposal will not affect your contractual or statutory rights.</Clause>
            </Section>

            <Section num="14" title="Notices">
              <Clause>Notices from you to the Club must be in writing and addressed to the general manager at the Club. Any notice handed to the Club must be receipted. Notices from the Club to you will be posted to your address in the membership records (or, where permitted, displayed on notice boards at the Club).</Clause>
            </Section>

          </div>
        </section>
      </div>
    );
  }
  window.OTL_TermsPage = TermsPage;

  // ---------- PRIVACY POLICY ----------
  function PrivacyPage() {
    const P = window.OTL_PageHero;
    const Section = ({ num, title, children }) => (
      <div style={{ marginBottom:36 }}>
        <h2 style={{ margin:'0 0 14px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:16, color:'#fff', letterSpacing:'0.02em' }}>{num} {title}</h2>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>{children}</div>
      </div>
    );
    const P2 = ({ children }) => <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>;
    const Sub = ({ id, children }) => (
      <div style={{ display:'flex', gap:14 }}>
        {id && <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:13, color:'var(--accent)', flexShrink:0, minWidth:36 }}>{id}</span>}
        <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>
      </div>
    );
    const Li = ({ children }) => (
      <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
        <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', flexShrink:0, marginTop:8 }}/>
        <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>
      </div>
    );

    return (
      <div>
        <P tag="Legal" title="Privacy Policy" tagline="On The Limit is committed to protecting your privacy." colors={['#243f38','#14201c']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:860, margin:'0 auto', padding:'72px 24px' }}>
            <BackButton />
            <P2>On The Limit is committed to protecting your privacy. This Privacy Policy explains our data processing practices and your options regarding the ways in which your data is used. If you have any requests concerning your personal information or any queries with regard to our processing please contact us at <a href="mailto:info@onthelimit.co.uk" style={{ color:'var(--accent)' }}>info@onthelimit.co.uk</a>.</P2>
            <div style={{ marginTop:40 }}/>

            <Section num="1.0" title="Use of your information and your preferences">
              <P2>On The Limit will only process the information you provide to us in a manner compatible with the EU's General Data Protection Regulation (GDPR). We are committed to ensuring that the information we collect and use is appropriate for the purposes listed below and does not constitute an invasion of your privacy. We are also committed to applying rigorous security measures when managing your data to minimise the risk of unauthorised access or disclosure.</P2>
            </Section>

            <Section num="2.0" title="Consent">
              <P2>By taking out a membership, filling in a contact form on our website or using a mobile app we provide to you, you agree and accept that we may gather, process, store and/or use the personal data submitted in accordance with the terms set below. If you are under the age of 16, On The Limit will not collect or process your details unless we have also received the consent of an adult who has parental responsibility for you. To withdraw consent for the storage and processing of your data, please write to <a href="mailto:info@onthelimit.co.uk" style={{ color:'var(--accent)' }}>info@onthelimit.co.uk</a>.</P2>
            </Section>

            <Section num="3.0" title="Personal Data Collected">
              <Sub id="3.1"><strong style={{color:'#fff'}}>Identity and contact details of the data processor:</strong> Personal data collected by us and stored via our website or mobile app is processed on our behalf by Clubright Ltd.</Sub>
              <Sub id="3.2"><strong style={{color:'#fff'}}>Purposes of processing and legal basis:</strong> The principal purpose of collecting your personal data is to provide you with the services defined in your membership agreement. To this end, we may use your personal data to:</Sub>
              <div style={{ paddingLeft:50, display:'flex', flexDirection:'column', gap:6 }}>
                {['Contact you in respect of your membership','Manage your club access','Facilitate member rewards (if applicable)','Resolve any problems you may have and improve our service','Comply with our legal and regulatory obligations'].map(i => <Li key={i}>{i}</Li>)}
              </div>
              <Sub id="3.3"><strong style={{color:'#fff'}}>Marketing:</strong> In line with our terms and conditions of membership, we may send you relevant club information by email or SMS. By signing your membership forms and/or by using our services, you agree to this consent.</Sub>
              <Sub id="3.4"><strong style={{color:'#fff'}}>Data we collect:</strong> When you take out a membership, the following personal data is collected: email, title, first name, last name, login & password details, postal address, contact telephone numbers, gender, date of birth, marital status, occupation, member ID, QR access code, attendance history, photograph, bank sort code and marketing preferences.</Sub>
              <Sub id="3.5"><strong style={{color:'#fff'}}>Obtaining or changing your details:</strong> On The Limit can confirm to you the details of any personal data we hold about you on request. You may ask us to correct or delete personal information at any time, so long as this information is not required in order to fulfil our service to you. Contact us at <a href="mailto:info@onthelimit.co.uk" style={{ color:'var(--accent)' }}>info@onthelimit.co.uk</a> or write to On The Limit, 44 Western Road, Tring, HP23 4BB.</Sub>
              <Sub id="3.6"><strong style={{color:'#fff'}}>Third party disclosures:</strong> We will only pass your personal data to third-party service providers contracted to On The Limit for the purpose of providing our service to you. We will never pass your personal information to anyone else, except where required or permitted to do so by law.</Sub>
              <Sub id="3.7"><strong style={{color:'#fff'}}>Cookies:</strong> Cookies are used to control an online session and provide security such as a time-out function. On The Limit only issues session-specific cookies which store no personal or transactional data. We may use Google Analytics for SEO purposes and to improve our online marketing efforts.</Sub>
            </Section>

            <Section num="4.0" title="Data Retention Period">
              <P2>On The Limit will retain your data for as long as you are a member. On termination of your membership, On The Limit will store your personal data for a maximum period of 3 years for the purposes of responding to any future indemnity claim. After this period, your personal data will be anonymised.</P2>
              <Sub id="4.1"><strong style={{color:'#fff'}}>Your rights as a data subject:</strong> While we are in possession of or processing your personal data, you have the following rights:</Sub>
              <div style={{ paddingLeft:50, display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Right to be informed, you have the right to know how your personal data is being used.',
                  'Right of access, you have the right to request a copy of the information we hold about you.',
                  'Right of rectification, you have a right to correct data that we hold about you that is inaccurate or incomplete.',
                  'Right to be forgotten, in certain circumstances you can ask for the data we hold about you to be erased.',
                  'Right to restriction of processing, you have a right to request restrictions to the processing of your data.',
                  'Right of portability, you have the right to have the data we hold about you transferred to another organisation.',
                  'Right to object, you have the right to object to certain types of processing such as direct marketing.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="5.0" title="The Right to Complain">
              <P2>If you believe that your data is being processed unfairly or you have any other concerns, you have the right to complain to the Information Commissioner's Office (ICO). Please visit <a href="https://www.ico.org.uk" target="_blank" rel="noreferrer" style={{ color:'var(--accent)' }}>www.ico.org.uk</a> for more information.</P2>
            </Section>

            <Section num="6.0" title="Privacy Policy Changes">
              <P2>On The Limit reserves the right to update this Privacy Policy at any time, in particular pursuant to any changes made to the laws and regulations in force. We recommend that you check these rules from time to time to stay informed of our procedures and rules relating to your personal information.</P2>
            </Section>

            <Section num="7.0" title="Contact Us">
              <P2>If you have questions relating to this privacy policy, send an email to <a href="mailto:info@onthelimit.co.uk" style={{ color:'var(--accent)' }}>info@onthelimit.co.uk</a> or write to us at: On The Limit, 44 Western Road, Tring, HP23 4BB.</P2>
            </Section>

          </div>
        </section>
      </div>
    );
  }
  window.OTL_PrivacyPage = PrivacyPage;

  // ---------- SAFEGUARDING POLICY ----------
  function SafeguardingPage() {
    const P = window.OTL_PageHero;
    const Section = ({ num, title, children }) => (
      <div style={{ marginBottom:36 }}>
        <h2 style={{ margin:'0 0 14px', fontFamily:'var(--font-display)', fontWeight:800, textTransform:'uppercase', fontSize:16, color:'#fff', letterSpacing:'0.02em' }}>{num} {title}</h2>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>{children}</div>
      </div>
    );
    const P2 = ({ children }) => <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>;
    const Li = ({ children }) => (
      <div style={{ display:'flex', gap:10, alignItems:'flex-start' }}>
        <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent)', flexShrink:0, marginTop:8 }}/>
        <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:15, lineHeight:1.75, color:'var(--text-muted)' }}>{children}</p>
      </div>
    );

    return (
      <div>
        <P tag="Legal" title="Safeguarding Policy" tagline="On The Limit is committed to the safety and wellbeing of all members, particularly children and young people." colors={['#243f38','#14201c']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:860, margin:'0 auto', padding:'72px 24px' }}>

            <BackButton />
            <div style={{ background:'rgba(114,221,158,0.06)', border:'1px solid rgba(114,221,158,0.2)', borderRadius:12, padding:'20px 24px', marginBottom:40 }}>
              <p style={{ margin:0, fontFamily:'var(--font-body)', fontSize:14, lineHeight:1.7, color:'var(--fog-200)' }}>
                <strong style={{color:'var(--accent)'}}>Designated Safeguarding Lead:</strong> Adam Bell · <a href="mailto:info@onthelimit.co.uk" style={{ color:'var(--accent)' }}>info@onthelimit.co.uk</a> · 01442 828881
              </p>
            </div>

            <Section num="1." title="Purpose and Scope">
              <P2>On The Limit is committed to creating and maintaining a safe and positive environment for all members, with particular regard to children and young people under the age of 18. This policy applies to all staff, coaches, personal trainers, volunteers and any other individuals working on behalf of On The Limit.</P2>
              <P2>This policy has been developed in accordance with the Children Act 1989 and 2004, the Safeguarding Vulnerable Groups Act 2006 and the UN Convention on the Rights of the Child. It applies to all activities carried out at On The Limit's premises at 44 Western Road, Tring, Hertfordshire HP23 4BB.</P2>
            </Section>

            <Section num="2." title="Our Commitments">
              <P2>On The Limit commits to:</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Prioritise the welfare of children and young people at all times.',
                  'Ensure all junior members train in a safe, supervised and age-appropriate environment.',
                  'Treat all members with respect, dignity and fairness regardless of age, gender, disability, race, religion or sexual orientation.',
                  'Respond promptly and appropriately to all concerns or allegations of abuse.',
                  'Ensure all staff working with juniors are appropriately vetted and trained.',
                  'Maintain clear boundaries between staff and junior members at all times.',
                  'Create an environment where young people feel safe and confident to raise concerns.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="3." title="Junior Member Access and Supervision">
              <P2>Junior members (aged 13–18) are welcome at On The Limit subject to the following conditions:</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Junior members must have a parent or guardian sign a consent form before accessing gym facilities.',
                  'Junior members are restricted to permitted access hours as set out in our membership terms.',
                  'All junior members receive a free induction with a qualified coach when they join, before using the gym floor independently.',
                  'Junior members under 16 must not use free weights above a weight deemed appropriate by a coach.',
                  'Coaches and staff will always ensure junior sessions are conducted in open, visible areas.',
                  '1-2-1 personal training sessions with junior members will always take place in a visible area of the gym. A parent or guardian has the right to observe any session.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="4." title="Recognising and Reporting Concerns">
              <P2>All staff and coaches are trained to recognise signs that a child or young person may be at risk of harm. These may include unexplained injuries, significant changes in behaviour, withdrawal, or disclosures made directly to a member of staff.</P2>
              <P2>If a member of staff has a safeguarding concern they must:</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Report the concern immediately to the Designated Safeguarding Lead (Adam Bell).',
                  'Record the concern in writing as soon as possible, including dates, times and any direct disclosures made.',
                  'Not investigate the concern themselves or make promises to the young person about confidentiality.',
                  'Where there is an immediate risk of harm, contact the Police (999) or Children\'s Services without delay.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
              <P2>Hertfordshire Children\'s Services can be contacted on <strong style={{color:'#fff'}}>0300 123 4043</strong>. In an emergency always call <strong style={{color:'#fff'}}>999</strong>.</P2>
            </Section>

            <Section num="5." title="Photography and Social Media">
              <P2>On The Limit takes the privacy of all members, particularly junior members, very seriously.</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Photography or videography of junior members is strictly prohibited without the prior written consent of a parent or guardian.',
                  'On The Limit will not publish images of junior members on social media or marketing materials without explicit consent.',
                  'Members are reminded that photography of other members without consent is prohibited at all times under our Club Rules.',
                  'Any breach of this policy will be treated as a serious safeguarding matter.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="6." title="Safe Recruitment">
              <P2>On The Limit is committed to safe recruitment practices. All staff and coaches who work with junior members are subject to:</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'An enhanced Disclosure and Barring Service (DBS) check prior to commencing work.',
                  'Two professional references prior to appointment.',
                  'A structured induction that includes safeguarding awareness training.',
                  'Ongoing safeguarding training and periodic DBS renewal.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="7." title="Code of Conduct for Staff and Coaches">
              <P2>All staff and coaches working with junior members at On The Limit must:</P2>
              <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
                {[
                  'Always work in open, visible environments when with junior members.',
                  'Never engage in inappropriate physical contact with junior members.',
                  'Never use language that is discriminatory, demeaning or inappropriate.',
                  'Never develop personal or social media relationships with junior members outside of the gym context.',
                  'Never transport a junior member in a personal vehicle without parental consent and another adult present.',
                  'Always report any concerns, disclosures or incidents immediately to the Designated Safeguarding Lead.',
                ].map(i => <Li key={i}>{i}</Li>)}
              </div>
            </Section>

            <Section num="8." title="Concerns About a Member of Staff">
              <P2>If a concern is raised about the conduct of a member of staff or coach, the Designated Safeguarding Lead will be notified immediately. If the concern involves the Designated Safeguarding Lead, the matter should be reported directly to the Club owners or, if appropriate, to Hertfordshire Children's Services or the Police.</P2>
              <P2>On The Limit will cooperate fully with any statutory investigation into safeguarding concerns.</P2>
            </Section>

            <Section num="9." title="Policy Review">
              <P2>This Safeguarding Policy will be reviewed annually or following any significant safeguarding incident. All staff will be notified of any changes. The current version of this policy is available at the gym reception and on our website.</P2>
            </Section>

            <Section num="10." title="Contact">
              <P2>To raise a safeguarding concern, report an incident or ask any questions about this policy, please contact:</P2>
              <div style={{ background:'var(--surface-card)', border:'1px solid var(--border-subtle)', borderRadius:12, padding:'20px 24px', display:'grid', gridTemplateColumns:'auto 1fr', gap:'8px 24px', alignItems:'baseline' }}>
                {[['Designated Safeguarding Lead','Adam Bell'],['Address','On The Limit, 44 Western Road, Tring, HP23 4BB'],['Email','info@onthelimit.co.uk'],['Phone','01442 828881']].map(([k,v]) => (
                  <React.Fragment key={k}>
                    <span style={{ fontFamily:'var(--font-display)', fontWeight:700, fontSize:11, letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--accent)', whiteSpace:'nowrap' }}>{k}</span>
                    <span style={{ fontFamily:'var(--font-body)', fontSize:15, color:'var(--fog-200)' }}>{v}</span>
                  </React.Fragment>
                ))}
              </div>
            </Section>

          </div>
        </section>
      </div>
    );
  }
  window.OTL_SafeguardingPage = SafeguardingPage;

  window.OTL_TimetablePage = TimetablePage;
  window.OTL_PricingPage = PricingPage;
  window.OTL_TeamPage = TeamPage;
  window.OTL_FaqPage = FaqPage;
  window.OTL_ContactPage = ContactPage;
  window.OTL_JoinPage = JoinPage;

  // ---------- GALLERY ----------
  function GalleryPage() {
    const isMobile = window.OTL_useIsMobile();
    const P = window.OTL_PageHero;
    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' },
      { src:'site/gym-10.webp', alt:'Concept 2 rowers' },
      { src:'site/gym-11.webp', alt:'Weights area' },
      { src:'site/gym-12.webp', alt:'GRIT zone' },
    ];
    const [lightbox, setLightbox] = React.useState(null);
    return (
      <div>
        <P tag="Inside the gym" title="Gallery" tagline="A look inside On The Limit." colors={['#1a3a2e','#0d201a']} />
        <section style={{ background:'var(--surface-base)' }}>
          <div style={{ maxWidth:1200, margin:'0 auto', padding: isMobile ? '40px 16px' : '72px 24px' }}>
            <div style={{ display:'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(3,1fr)', gap: isMobile ? 10 : 16 }}>
              {photos.map((p,i) => (
                <div key={i} onClick={()=>setLightbox(i)} style={{ borderRadius:12, overflow:'hidden', cursor:'pointer', border:'1px solid var(--border-subtle)', aspectRatio:'4/3', position:'relative' }}>
                  <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.05)'}
                    onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'} />
                </div>
              ))}
            </div>
          </div>
        </section>
        {lightbox !== null && ReactDOM.createPortal(
          <div onClick={()=>setLightbox(null)} style={{ position:'fixed', inset:0, background:'rgba(0,0,0,0.92)', zIndex:10000, display:'flex', alignItems:'center', justifyContent:'center', padding:20 }}>
            <img src={photos[lightbox].src} alt={photos[lightbox].alt} style={{ maxWidth:'90vw', maxHeight:'85vh', borderRadius:12, objectFit:'contain', display:'block' }} onClick={e=>e.stopPropagation()} />
            <button onClick={e=>{e.stopPropagation();setLightbox(lightbox>0?lightbox-1:photos.length-1);}} style={{ position:'fixed', left:20, top:'50%', transform:'translateY(-50%)', width:48, height:48, borderRadius:99, background:'rgba(255,255,255,0.1)', border:'1px solid rgba(255,255,255,0.2)', color:'#fff', fontSize:22, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>‹</button>
            <button onClick={e=>{e.stopPropagation();setLightbox(lightbox<photos.length-1?lightbox+1:0);}} style={{ position:'fixed', right:20, top:'50%', transform:'translateY(-50%)', width:48, height:48, borderRadius:99, background:'rgba(255,255,255,0.1)', border:'1px solid rgba(255,255,255,0.2)', color:'#fff', fontSize:22, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>›</button>
            <button onClick={()=>setLightbox(null)} style={{ position:'fixed', top:20, right:20, width:40, height:40, borderRadius:99, background:'rgba(255,255,255,0.1)', border:'1px solid rgba(255,255,255,0.2)', color:'#fff', fontSize:18, cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>✕</button>
          </div>,
          document.body
        )}
      </div>
    );
  }
  window.OTL_GalleryPage = GalleryPage;

})();
