/* New competitor-strategy sections:
   1. MilonCompare — Q vs "Standard" / gamla generationen (no competitor named)
   2. Team — personalpresentation med foton, titlar, bokningsknappar
   3. LocalSEO — orter vi servar (Åtvidaberg + grannar)
*/

const MilonCompare = ({ onNav }) => {
  const rows = [
    { label: 'Generation',           q: 'Q — senaste generationen (2024)',  std: 'Standard — äldre modell' },
    { label: 'Inställning',           q: 'Maskinen känner igen dig och ställer in sig själv', std: 'Manuell inställning varje gång' },
    { label: 'Motstånd',              q: 'Elektroniskt, anpassas i realtid efter din rörelse', std: 'Fast motstånd, justeras manuellt' },
    { label: 'Mätbara resultat',      q: 'InBody + automatisk loggning av varje pass', std: 'Ingen integrerad mätning' },
    { label: 'Personal vid uppstart', q: 'Leg. coach: InBody, styrketest, individuell setup', std: 'Ofta utan personlig genomgång' },
    { label: 'Tid per pass',          q: '17–20 min — hela kroppen', std: '20–30 min' },
    { label: 'Bindningstid',          q: '1 mån uppsägning — inga lås', std: 'Vanligen 12 mån bindning' },
  ];
  return (
    <section className="section" id="milon-compare">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Inte alla cirklar är lika</span>
          <h2>Milon Q är inte Milon Standard.</h2>
          <p style={{maxWidth:680}}>
            Det finns äldre cirklar i Sverige som heter Milon — men de är en helt annan
            produkt. Här är skillnaderna mellan generationerna, så du vet vad du tränar på.
          </p>
        </div>

        <div className="compare">
          <div className="compare__head">
            <div className="compare__h compare__h--label">Vad du jämför</div>
            <div className="compare__h compare__h--q">
              <span className="compare__badge">Här hos oss</span>
              Milon Q
            </div>
            <div className="compare__h compare__h--std">
              <span className="compare__badge compare__badge--muted">Äldre generation</span>
              Milon Standard
            </div>
          </div>
          {rows.map((r, i) => (
            <div className="compare__row" key={i}>
              <div className="compare__cell compare__cell--label">{r.label}</div>
              <div className="compare__cell compare__cell--q">
                <svg className="compare__check" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M5 12.5l5 5 9-11"/></svg>
                <span>{r.q}</span>
              </div>
              <div className="compare__cell compare__cell--std">
                <span className="compare__dash">–</span>
                <span>{r.std}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="compare__cta">
          <div>
            <strong>Prova den nya generationen i 4 veckor.</strong>
            <span> Inga bindningstider. Bara 595:- för uppstart med InBody, styrketest och inställningar.</span>
          </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>
    </section>
  );
};

const TEAM = [
  { name: 'Amanda Bohlin',          role: 'Leg. kiropraktor',
    img: 'assets/team/amanda.png',
    skills: 'Kiropraktik · Idrottsskador · Milon-coach',
    bio: 'Utbildad vid Skandinaviska Kiropraktorhögskolan i Solna. Bakgrund som elitcyklist med SM-guld i XCM — särskilt skicklig på smärta, stelhet och skador hos aktiva.',
    cta: 'Boka kiropraktik', go: 'boka' },
  { name: 'Ulla Bohlin',            role: 'Leg. fysioterapeut',
    img: 'assets/team/ulla.png',
    skills: 'Akupunktur · OMT · Idrottsmedicin · McKenzie · Basal kroppskännedom',
    bio: 'Akupunktur enligt västerländsk forskning, även studerat i Kina. Specialist inom ortopedisk manuell terapi för rygg, nacke och axlar. Hjälper vid smärta, stress och klimakteriebesvär.',
    cta: 'Boka fysioterapi', go: 'boka' },
  { name: 'Pontus Hydén',           role: 'Massör & Personlig tränare',
    img: 'assets/team/pontus.png',
    skills: 'Massage · PT · Instruktör · Milon-coach',
    bio: 'Klassisk och idrottsmassage. Leder gruppasset Stabilitet/Rörlighet/Core, lunchpasset och styrka/kondition. Personlig tränare för dig som vill jobba med en plan.',
    cta: 'Boka massage / PT', go: 'boka' },
  { name: 'Ann-Sophie Stenshaga',   role: 'Personlig tränare & Milon-coach',
    img: 'assets/team/ann-sophie.png',
    skills: 'PT · Instruktör · Milon-coach',
    bio: 'Leder Easy Line för seniorer flera gånger i veckan och guidar nya medlemmar in i Milon Q-cirkeln. Personlig tränare för alla nivåer.',
    cta: 'Boka PT-tid', go: 'boka' },
  { name: 'Jenniefer Kindstrand',   role: 'PT, Kostrådgivare & Milon-coach',
    img: 'assets/team/jenniefer.png',
    skills: 'PT · Kostrådgivning · Milon-coach · Digital utveckling',
    bio: 'Personlig tränare och kostrådgivare. Bygger helhetsupplägg där träning och mat hänger ihop. Driver också vår digitala utveckling och marknadsföring.',
    cta: 'Boka PT / kostrådgivning', go: 'boka' },
];

/* Övrig personal — instruktörer som även kör gruppass utöver kärnteamet */
const STAFF_INSTRUKTORER = [
  { name: 'Pontus Hydén',       img: 'assets/team/pontus.png',     pass: 'Stabilitet/Rörlighet · Lunchpass · Styrka' },
  { name: 'Ann-Sophie Stenshaga', img: 'assets/team/ann-sophie.png', pass: 'Easy Line · Senior' },
  { name: 'Jenniefer Kindstrand', img: 'assets/team/jenniefer.png', pass: 'Milon · Gruppass' },
  { name: 'Amanda Bohlin',      img: 'assets/team/amanda.png',     pass: 'Milon · Gruppass' },
  { name: 'Ulla Bohlin',        img: 'assets/team/ulla.png',       pass: 'Gruppass' },
  { name: 'Fredrik Elb',        img: 'assets/team/fredrik.jpg',    pass: 'Spinning' },
  { name: 'Ida Jansson',        img: 'assets/team/ida.jpg',        pass: 'Spinning · Core · Stark tjej' },
  { name: 'Susanne Andersson',  img: 'assets/team/susanne.jpeg',   pass: 'Spinning' },
  { name: 'Håkan Sernefalk',    img: 'assets/team/hakan.png',      pass: 'Spinning' },
  { name: 'Caroline Törnqvist', img: 'assets/team/caroline.jpg',   pass: 'Soma Move' },
  { name: 'Jenny Ackarp',       img: 'assets/team/jenny.jpeg',     pass: 'Instruktör' },
];

const STAFF_RECEPTION = [
  { name: 'Stella Jacobsson',   img: 'assets/team/stella.jpg' },
  { name: 'Molly Lindgren',     img: 'assets/team/molly.jpg' },
];

const Team = ({ onNav }) => (
  <section className="section" id="team-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Personalen</span>
        <h2>Riktiga människor. Med riktiga legitimationer.</h2>
        <p style={{maxWidth:680}}>
          Hos oss möter du legitimerade terapeuter och utbildade coacher — inte enbart
          en passerkort-app. Boka direkt med den du vill träffa.
        </p>
      </div>

      <div className="team-grid">
        {TEAM.map(p => (
          <article className="team-card" key={p.name}>
            <div className="team-card__media">
              <img src={p.img} alt={`${p.name}, ${p.role} på Hälsofabriken`} loading="lazy" />
            </div>
            <div className="team-card__body">
              <h3>{p.name}</h3>
              <span className="team-card__role">{p.role}</span>
              {p.skills && <div className="team-card__skills">{p.skills}</div>}
              <p>{p.bio}</p>
              <button className="team-card__cta" onClick={() => onNav(p.go)}>
                {p.cta}
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              </button>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

/* StaffMini — kompakt avatar-kort för instruktörer/reception */
const StaffMini = ({ p, label }) => {
  const initials = p.name.split(' ').map(s => s[0]).slice(0,2).join('').toUpperCase();
  return (
    <div className="staff-mini">
      <div className="staff-mini__avatar">
        {p.img
          ? <img src={p.img} alt={p.name} loading="lazy" />
          : <span className="staff-mini__init">{initials}</span>}
      </div>
      <div className="staff-mini__info">
        <div className="staff-mini__name">{p.name}</div>
        <div className="staff-mini__role">{label || p.pass}</div>
      </div>
    </div>
  );
};

/* FullTeam — hela personalen, för Behandlingar/Om-sidan */
const FullTeam = () => (
  <section className="section section--tight" id="full-team-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Hela teamet</span>
        <h2 style={{fontSize:'clamp(28px, 3.4vw, 44px)'}}>Alla som ses i lokalen.</h2>
        <p style={{maxWidth:640}}>
          Förutom våra terapeuter och Milon-coacher har vi ett gäng instruktörer och
          receptionister som ser till att passen flyter och att du blir omhändertagen
          när du kommer in.
        </p>
      </div>

      <div className="staff-block">
        <h3 className="staff-block__h">Instruktörer</h3>
        <div className="staff-grid">
          {STAFF_INSTRUKTORER.map(p => <StaffMini key={p.name} p={p} />)}
        </div>
      </div>

      <div className="staff-block">
        <h3 className="staff-block__h">Reception</h3>
        <div className="staff-grid">
          {STAFF_RECEPTION.map(p => <StaffMini key={p.name} p={p} label="Receptionist" />)}
        </div>
      </div>
    </div>
  </section>
);

const LocalSEO = () => {
  const places = [
    { name: 'Åtvidaberg',    note: 'Gamla Torget 1D — vår plats' },
    { name: 'Linköping',     note: '~30 min · många pendlar hit' },
    { name: 'Valdemarsvik',  note: '~35 min söderut' },
    { name: 'Söderköping',   note: '~40 min via riksväg 35' },
    { name: 'Kisa',          note: '~30 min västerut' },
    { name: 'Norrköping',    note: '~50 min via E22' },
  ];
  return (
    <section className="section section--tight" id="local-seo">
      <div className="container">
        <div className="local-seo">
          <div className="local-seo__head">
            <span className="eyebrow">Hela Östergötland</span>
            <h2>Kiropraktik, massage &amp; träning i Åtvidaberg —<br/>värd att resa för.</h2>
            <p>
              Många av våra patienter och medlemmar bor inte i Åtvidaberg. Det är okej —
              vi finns mitt i regionen, med gratis parkering utanför dörren och öppet 05–21 alla dagar.
            </p>
          </div>
          <div className="local-seo__grid">
            {places.map(p => (
              <div className="local-seo__chip" key={p.name}>
                <span className="local-seo__city">{p.name}</span>
                <span className="local-seo__note">{p.note}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { MilonCompare, Team, FullTeam, LocalSEO });