/* Sub-pages: Behandlingar, Träning, Milon Q, Om, Boka */

const PageBehandlingar = ({ onNav }) => {
  const items = [
    { name: 'Kiropraktik', img: 'assets/kiropraktik.png',
      lead: 'Manuell justering av leder, behandling av smärta i rygg, nacke, axlar och höft — utfört av Amanda Bohlin, leg. kiropraktor.',
      bullets: ['Utbildad vid Skandinaviska Kiropraktorhögskolan', 'Bakgrund som elitcyklist — bra på idrottsrelaterade besvär', 'Patienter från Linköping, Kisa, Valdemarsvik och Söderköping'],
      cta: 'Boka kiropraktik' },
    { name: 'Fysioterapi', img: 'assets/behandling.png',
      lead: 'Rörelseanalys, rehab, akupunktur, OMT och idrottsmedicin av Ulla Bohlin, leg. fysioterapeut.',
      bullets: ['Akupunktur enligt västerländsk forskning', 'OMT, McKenzie och basal kroppskännedom', 'Smärta, stress, klimakteriebesvär, idrottsskador'],
      cta: 'Boka fysioterapi' },
    { name: 'Massage', img: 'assets/medlem.png',
      lead: 'Klassisk- och idrottsmassage med Pontus Hydén — löser muskelspänningar och förbättrar återhämtning.',
      bullets: ['25, 50 eller 80 minuter', 'Pontus är även personlig tränare och instruktör', 'Boka direkt — ofta tider samma vecka'],
      cta: 'Boka massage' },
    { name: 'Milon Q Uppstart', img: 'assets/milon-circle.png',
      lead: 'Personlig genomgång av dina mål, en detaljerad InBody-kroppsanalys och praktisk genomgång av varje övning i Milon Q-cirkeln.',
      bullets: ['60 minuter · 595 kr (betalas på plats)', 'InBody-kroppsanalys + styrketester ingår', 'Coachas av Pontus, Ann-Sophie, Amanda eller Jenniefer'],
      cta: 'Boka Milon-uppstart' },
    { name: 'Personlig träning', img: 'assets/pt.jpg',
      lead: 'Skräddarsytt upplägg där träning och vardag hänger ihop — boka med någon i vårt team.',
      bullets: ['Pontus, Ann-Sophie eller Jenniefer som PT', 'Jenniefer erbjuder även kostrådgivning', 'Enskilda pass eller längre upplägg'],
      cta: 'Boka PT' },
  ];
  return (
    <main>
      <section className="section" style={{paddingTop:'clamp(48px, 6vw, 80px)'}}>
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Behandlingar</span>
            <h1 style={{fontSize:'clamp(40px, 5.5vw, 72px)', marginTop:14}}>Smärta som släpper. Rörelse som återvänder.</h1>
            <p style={{maxWidth:680}}>Hos oss möts behandling och träning. Du får hjälp av legitimerade terapeuter och en plats att fortsätta bygga starkare på efteråt.</p>
          </div>
          <div style={{display:'grid', gap:24}}>
            {items.map((it, i) => (
              <article key={it.name} style={{
                display:'grid', gridTemplateColumns: i % 2 ? '1.4fr 1fr' : '1fr 1.4fr',
                gap:32, alignItems:'center',
                background:'var(--hf-surface)', borderRadius:'var(--r-lg)',
                border:'1px solid var(--hf-line)', overflow:'hidden'
              }}>
                <div style={{order: i % 2 ? 2 : 1, aspectRatio:'4/3', background:'var(--hf-bg-warm)'}}>
                  <img src={it.img} alt={it.name} style={{width:'100%', height:'100%', objectFit:'cover'}} loading="lazy"/>
                </div>
                <div style={{order: i % 2 ? 1 : 2, padding:'clamp(24px, 3vw, 44px)'}}>
                  <span className="eyebrow">0{i+1} · Behandling</span>
                  <h2 style={{marginTop:12, fontSize:'clamp(28px, 3vw, 42px)'}}>{it.name}</h2>
                  <p style={{marginTop:14, color:'var(--hf-ink-soft)', fontSize:16}}>{it.lead}</p>
                  <ul style={{listStyle:'none', padding:0, margin:'18px 0', display:'grid', gap:8}}>
                    {it.bullets.map(b => (
                      <li key={b} style={{display:'flex', gap:10, alignItems:'flex-start', fontSize:14.5, color:'var(--hf-ink-soft)'}}>
                        <span style={{width:5, height:5, borderRadius:'50%', background:'var(--hf-saffron-deep)', marginTop:8, flexShrink:0}}></span>
                        {b}
                      </li>
                    ))}
                  </ul>
                  <button className="btn btn--primary" onClick={() => onNav('boka')}>
                    {it.cta}
                    <svg className="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <Team onNav={onNav} />
    </main>
  );
};

const PageTraning = ({ onNav }) => (
  <main>
    <section className="section" style={{paddingTop:'clamp(48px, 6vw, 80px)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Träning</span>
          <h1 style={{fontSize:'clamp(40px, 5.5vw, 72px)', marginTop:14}}>Träning som passar din vecka — inte tvärtom.</h1>
          <p>Stort gym, dagliga gruppass, Milon Q-cirkel och personlig träning. Öppet 05–21 alla dagar.</p>
        </div>
      </div>
      <Training onNav={onNav} />
      <Schedule />
      <div className="container" style={{marginTop:24}}>
        <div style={{
          display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16
        }} className="prismatic-prices">
          {[
            { name:'Bas', price:'395', desc:'Träna när du vill, alla pass.', accent:'#fff' },
            { name:'Plus', price:'495', desc:'Allt i Bas + Milon Q-cirkeln.', accent:'var(--hf-saffron)' },
            { name:'Premium', price:'795', desc:'Allt + 1 massage/månad.', accent:'var(--hf-ink)' },
          ].map(p => (
            <div key={p.name} style={{
              background: p.accent === 'var(--hf-ink)' ? 'var(--hf-ink)' : (p.accent === 'var(--hf-saffron)' ? 'var(--hf-saffron)' : 'var(--hf-surface)'),
              color: p.accent === 'var(--hf-ink)' ? '#fff' : 'var(--hf-ink)',
              border: p.accent === '#fff' ? '1px solid var(--hf-line)' : 'none',
              borderRadius:'var(--r-lg)', padding:'32px 28px',
            }}>
              <div className="eyebrow" style={{color: p.accent === 'var(--hf-ink)' ? 'rgba(255,255,255,0.7)' : undefined}}>{p.name}</div>
              <div style={{display:'flex', alignItems:'baseline', gap:6, margin:'12px 0 8px'}}>
                <span style={{fontFamily:'var(--font-display)', fontSize:54, fontWeight:700, letterSpacing:'-0.03em'}}>{p.price}</span>
                <span style={{fontSize:14, opacity:0.7}}>:- / mån</span>
              </div>
              <p style={{fontSize:15, opacity:0.8, marginBottom:24}}>{p.desc}</p>
              <button className={'btn ' + (p.accent === 'var(--hf-ink)' ? 'btn--saffron' : 'btn--primary')}
                      onClick={() => onNav('boka')}
                      style={{width:'100%', justifyContent:'center'}}>Bli medlem</button>
            </div>
          ))}
        </div>
      </div>
    </section>
  </main>
);

const PageMilon = ({ onNav }) => (
  <main>
    <section style={{
      paddingTop:'clamp(48px, 6vw, 80px)',
      paddingBottom:'clamp(40px, 5vw, 64px)',
      background:'linear-gradient(180deg, var(--hf-bg) 0%, var(--hf-saffron-soft) 100%)'
    }}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.1fr 1fr', gap:'clamp(32px, 5vw, 72px)', alignItems:'center'}} className="milon-hero-grid">
          <div>
            <div className="hero__tag" style={{background:'#fff'}}>
              <span className="hero__tag-dot"></span>
              4 veckor gratis · Endast 595:- för uppstart
            </div>
            <h1 style={{marginTop:14, marginBottom:22}}>Effektiv träning. <em style={{color:'var(--hf-saffron-deep)', fontStyle:'italic'}}>20 minuter.</em> Vetenskapligt mätt.</h1>
            <p style={{fontSize:19, color:'var(--hf-ink-soft)', maxWidth:520, marginBottom:32}}>
              Milon Q-cirkeln läser av din kropp och anpassar varje övning. Du loggar in,
              kör runt, klar. Vi mäter dina framsteg med InBody — siffror, inte gissningar.
            </p>
            <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
              <button className="btn btn--primary" onClick={() => onNav('boka')}>
                Boka prova-på 4v
                <svg className="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </button>
              <button className="btn btn--ghost" onClick={() => onNav('kontakt')}>Ring oss för frågor</button>
            </div>
          </div>
          <div style={{borderRadius:'var(--r-xl)', overflow:'hidden', boxShadow:'var(--shadow-lg)'}}>
            <img src="assets/milonq-erbjudande.png" alt="Milon Q på Hälsofabriken" />
          </div>
        </div>
      </div>
    </section>

    <section className="section">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Så funkar det</span>
          <h2>3 enkla steg.</h2>
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}} className="milon-steps">
          {[
            { n:'01', t:'Boka uppstart', d:'30 min med våra coacher. InBody-mätning, styrketest och personliga inställningar för cirkeln.', img:'assets/milon-q-2.png' },
            { n:'02', t:'Träna 4 veckor gratis', d:'Kom när du vill. Maskinen känner igen dig och ställer in sig automatiskt.', img:'assets/milon-q-3.png' },
            { n:'03', t:'Mät resultatet', d:'Ny InBody-mätning efter 4 veckor. Tydliga siffror på styrka, muskelmassa och balans.', img:'assets/milon-q.png' },
          ].map(s => (
            <div key={s.n} style={{
              background:'var(--hf-surface)', borderRadius:'var(--r-lg)',
              border:'1px solid var(--hf-line)', overflow:'hidden'
            }}>
              <div style={{aspectRatio:'4/3', overflow:'hidden'}}>
                <img src={s.img} alt={s.t} style={{width:'100%', height:'100%', objectFit:'cover'}} loading="lazy"/>
              </div>
              <div style={{padding:'24px 26px 28px'}}>
                <span style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'0.16em', color:'var(--hf-saffron-deep)', fontWeight:600}}>{s.n}</span>
                <h3 style={{marginTop:8, fontSize:24}}>{s.t}</h3>
                <p style={{marginTop:8, color:'var(--hf-ink-soft)', fontSize:15}}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
    <MilonCompare onNav={onNav} />
  </main>
);

const PageBoka = ({ onNav }) => (
  <main>
    <section className="section" style={{paddingTop:'clamp(48px, 6vw, 80px)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Boka</span>
          <h1 style={{fontSize:'clamp(40px, 5.5vw, 72px)', marginTop:14}}>Boka tid eller pass.</h1>
          <p>Vi använder Zoezi som bokningssystem — välj behandling, pass eller medlemskap nedan.</p>
        </div>
        <div className="boka-shell">
          <aside className="boka-side">
            <div className="boka-side__card">
              <h3 style={{fontSize:18, marginBottom:8}}>Vad vill du boka?</h3>
              <div style={{display:'grid', gap:8, marginTop:14}}>
                {['Kiropraktik','Fysioterapi','Massage','Rehab','Milon Q-uppstart','Gruppträningspass','Personlig träning'].map(x => (
                  <button key={x} style={{
                    textAlign:'left', padding:'12px 14px', borderRadius:'var(--r-sm)',
                    background:'var(--hf-bg)', border:'1px solid transparent',
                    fontSize:14, fontWeight:500
                  }}
                  onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--hf-saffron)'}
                  onMouseLeave={e => e.currentTarget.style.borderColor = 'transparent'}>
                    {x}
                  </button>
                ))}
              </div>
            </div>
            <div className="boka-side__card" style={{background:'var(--hf-saffron-soft)', borderColor:'rgba(224,154,31,0.25)'}}>
              <span className="eyebrow" style={{color:'#6B4A0F'}}>Behöver du hjälp?</span>
              <h3 style={{fontSize:20, marginTop:10}}>Ring 0120-12 005</h3>
              <p style={{fontSize:14, color:'#6B4A0F', marginTop:6}}>
                Mån–tor 10–13 &amp; 17–19:30, fre 10–13 &amp; 15–17, sön 16–19. Eller fråga vår chattbot — den svarar dygnet runt.
              </p>
            </div>
          </aside>
          <div className="boka-widget">
            <div id="zoezi-widget" className="boka-widget__placeholder">
              <span className="eyebrow">Zoezi-widget</span>
              <h3 style={{fontSize:24, marginTop:14, textAlign:'center'}}>Bokningskalendern laddas här.</h3>
              <p style={{maxWidth:420, marginTop:12, color:'var(--hf-ink-soft)', textAlign:'center'}}>
                I produktion bäddas Zoezis widget in via era befintliga script-taggar. Designen runt omkring (denna layout) är vad vi har tagit fram.
              </p>
              <button className="btn btn--primary" style={{marginTop:24}} onClick={() => onNav('start')}>Tillbaka till start</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
);

const PageOm = ({ onNav }) => (
  <main>
    <section className="section" style={{paddingTop:'clamp(48px, 6vw, 80px)'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:'clamp(32px, 5vw, 64px)', alignItems:'center'}} className="om-hero">
          <div>
            <span className="eyebrow">Om Hälsofabriken</span>
            <h1 style={{fontSize:'clamp(40px, 5.5vw, 72px)', marginTop:14, marginBottom:22}}>
              Vi har funnits i Åtvidaberg sedan 2009.
            </h1>
            <p style={{fontSize:18, color:'var(--hf-ink-soft)', maxWidth:540}}>
              Hälsofabriken började som en liten klinik och har vuxit till stadens samlingsplats för rörelse, behandling och välmående. Vi tror på en sak: <strong style={{color:'var(--hf-ink)'}}>resultat kommer av kontinuitet, inte mirakellösningar.</strong>
            </p>
            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24, marginTop:48, paddingTop:32, borderTop:'1px solid var(--hf-line)'}}>
              <div><div style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:700, letterSpacing:'-0.03em'}}>16</div><div style={{fontSize:13, color:'var(--hf-ink-mute)'}}>år i branschen</div></div>
              <div><div style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:700, letterSpacing:'-0.03em'}}>12</div><div style={{fontSize:13, color:'var(--hf-ink-mute)'}}>i personalen</div></div>
              <div><div style={{fontFamily:'var(--font-display)', fontSize:36, fontWeight:700, letterSpacing:'-0.03em'}}>2 100+</div><div style={{fontSize:13, color:'var(--hf-ink-mute)'}}>medlemmar</div></div>
            </div>
          </div>
          <div style={{borderRadius:'var(--r-xl)', overflow:'hidden', boxShadow:'var(--shadow-lg)'}}>
            <img src="assets/passgrupp.png" alt="Träning på Hälsofabriken" />
          </div>
        </div>
      </div>
    </section>
    <FullTeam />
    <Contact />
  </main>
);

Object.assign(window, { PageBehandlingar, PageTraning, PageMilon, PageBoka, PageOm });