/* Header, hero, services, milon — components */

const Header = ({ page, onNav }) => {
  const [open, setOpen] = React.useState(false);
  const links = [
    { id: 'start', label: 'Start' },
    { id: 'behandlingar', label: 'Behandlingar' },
    { id: 'traning', label: 'Träning' },
    { id: 'milon', label: 'Milon Q' },
    { id: 'om', label: 'Om oss' },
    { id: 'kontakt', label: 'Kontakt' },
  ];
  return (
    <header className="hf-header">
      <div className="container hf-header__inner">
        <a className="hf-logo" href="#" onClick={(e) => { e.preventDefault(); onNav('start'); }}>
          <img src="assets/logo-wide.png" alt="Hälsofabriken Åtvidaberg" />
        </a>
        <nav className="hf-nav" aria-label="Huvudnavigation">
          {links.map(l => (
            <a key={l.id} href={`#${l.id}`} className={page === l.id ? 'active' : ''}
               onClick={(e) => { e.preventDefault(); onNav(l.id); }}>{l.label}</a>
          ))}
        </nav>
        <div className="hf-header__cta">
          <a className="hf-phone" href="tel:+4612012005" aria-label="Ring oss">
            <svg className="hf-phone-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span>0120-12 005</span>
          </a>
          <button className="btn btn--ghost" onClick={() => onNav('boka')}>Boka behandling</button>
          <button className="btn btn--saffron" onClick={() => onNav('milon')}>Prova Milon Q</button>
        </div>
      </div>
    </header>
  );
};

const Marquee = () => (
  <div className="marquee" aria-hidden="true">
    <div className="marquee__track">
      <span>Kiropraktik</span><span>Effektiv träning</span><span>Massage</span><span>Milon Q</span>
      <span>Fysioterapi</span><span>Gruppträning</span><span>Rehab</span><span>Personlig träning</span>
      <span>Kiropraktik</span><span>Effektiv träning</span><span>Massage</span><span>Milon Q</span>
      <span>Fysioterapi</span><span>Gruppträning</span><span>Rehab</span><span>Personlig träning</span>
    </div>
  </div>
);

const Hero = ({ onNav }) => (
  <section className="hero">
    <div className="container hero__grid">
      <div className="hero__left">
        <div className="hero__tag">
          <span className="hero__tag-dot"></span>
          Öppet alla dagar 05–21 · Åtvidaberg
        </div>
        <h1>
          Din kropp förtjänar <span className="hl">helhet.</span><br/>
          Behandling, träning och resultat — på ett ställe.
        </h1>
        <p className="hero__lead">
          Hälsofabriken är gymmet och kliniken som tar hand om dig — från ont i ryggen
          till starkare ben på 4 veckor. Lokal träning för Åtvidaberg, kiropraktik och
          rehab värd att resa för från Linköping, Kisa och Valdemarsvik.
        </p>
        <div className="hero__ctas">
          <button className="btn btn--primary" onClick={() => onNav('boka')}>
            Boka behandling
            <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--saffron" onClick={() => onNav('milon')}>
            Prova Milon Q gratis 4v
          </button>
        </div>
        <dl className="hero__stats">
          <div className="hero__stat"><span className="hero__stat-num">15+</span><span className="hero__stat-lbl">år i Åtvidaberg</span></div>
          <div className="hero__stat"><span className="hero__stat-num">2 100+</span><span className="hero__stat-lbl">aktiva medlemmar</span></div>
          <div className="hero__stat"><span className="hero__stat-num">4,9★</span><span className="hero__stat-lbl">från kunder</span></div>
        </dl>
      </div>
      <div className="hero__right" aria-hidden="true">
        <div className="hero-card hero-card--main">
          <img src="assets/medlemsgrupp.png" alt="" />
        </div>
        <div className="hero-card hero-card--milon" onClick={() => onNav('milon')} role="button">
          <div>
            <div className="milon-eyebrow">Milon Q · Erbjudande</div>
            <h3>4 veckor gratis, betala bara 595:-</h3>
          </div>
          <div className="milon-meta">
            <span style={{fontSize:13, fontWeight:600}}>InBody · Styrketest · Inställningar</span>
            <span className="milon-arrow">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </span>
          </div>
        </div>
        <div className="hero-card--badge">
          <div className="b-inner">ÖPPET<br/>05–21<br/>ALLA DAGAR</div>
        </div>
      </div>
    </div>
  </section>
);

const services = [
  { num: '01', name: 'Kiropraktik', img: 'assets/kiropraktik.png',
    desc: 'Smärtlindring och ledjustering. Söker hit både lokalt och långväga ifrån.' },
  { num: '02', name: 'Fysioterapi', img: 'assets/behandling.png',
    desc: 'Rörelseanalys, rehab och uppföljning av legitimerad fysioterapeut.' },
  { num: '03', name: 'Massage', img: 'assets/medlem.png',
    desc: 'Klassisk- och idrottsmassage som löser upp spänningar.' },
  { num: '04', name: 'Rehab', img: 'assets/passgrupp.png',
    desc: 'Strukturerad återhämtning efter skada eller operation.' },
];

const Services = ({ onNav }) => (
  <section className="section" id="behandlingar-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Behandlingar</span>
        <h2>Vi har behandlingar efter dina behov.</h2>
        <p>Värker det? Stelt? Skadad? Våra terapeuter möter dig där du är — och bygger vidare i gymmet när du är redo.</p>
      </div>
      <div className="services-grid">
        {services.map(s => (
          <article key={s.num} className="service-card" onClick={() => onNav('behandlingar')}>
            <div className="service-card__media">
              <span className="service-card__num">{s.num}</span>
              <img src={s.img} alt={s.name + ' på Hälsofabriken Åtvidaberg'} loading="lazy" />
            </div>
            <div className="service-card__body">
              <h3>{s.name}</h3>
              <p className="service-card__desc">{s.desc}</p>
              <span className="service-card__link">
                Boka tid
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </span>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const MilonFeature = ({ onNav }) => (
  <section className="section" id="milon-section">
    <div className="container">
      <div className="milon-feature">
        <div className="milon-feature__grid">
          <div className="milon-feature__media">
            <img src="assets/milon-q.png" alt="Person tränar på Milon Q-cirkel" />
          </div>
          <div className="milon-feature__content">
            <span className="milon-feature__eyebrow">Milon Q · Effektiv träning</span>
            <h2>20 min, 2 ggr/vecka. <em>Resultat som syns.</em></h2>
            <p className="milon-feature__lead">
              Milon Q är en datadriven träningscirkel som anpassar motstånd och rörelseutslag
              individuellt — varje gång du tränar. Perfekt för dig som vill ha tydlig effekt
              utan att lägga timmar i gymmet.
            </p>
            <ul className="milon-bullets">
              <li>Ett varv = hela kroppen tränad på 20 minuter</li>
              <li>Maskinen ställer in sig — du loggar in och kör</li>
              <li>InBody-mätning visar exakt hur kroppen förändras</li>
              <li>Personal på plats när du behöver hjälp</li>
            </ul>
            <div className="milon-offer">
              <div className="milon-offer__txt">
                <strong>Prova 4 veckor gratis</strong>
                Du betalar bara 595:- för InBody, styrketest och inställningar.
              </div>
              <button className="btn btn--saffron" onClick={() => onNav('boka')}>
                Boka prova-på
                <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>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Header, Marquee, Hero, Services, MilonFeature });