/* Training, schedule, quote, faq, contact, footer */

const Training = ({ onNav }) => (
  <section className="section" id="traning-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Träning</span>
        <h2>Träningen som passar din vardag.</h2>
        <p>Gym, gruppträning, utomhus i naturen eller effektiv cirkelträning — välj det som funkar för dig idag.</p>
      </div>
      <div className="train-grid">
        <a className="train-tile train-tile--big" href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>
          <img src="assets/gym.jpg" alt="Gymmet på Hälsofabriken" />
          <div className="train-tile__overlay"></div>
          <div className="train-tile__body">
            <h3>Gym & styrka</h3>
            <p>Stort, ljust gym med fria vikter, maskiner och mängder av plats. Öppet 05–21.</p>
          </div>
        </a>
        <a className="train-tile" href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>
          <img src="assets/grupp.jpg" alt="Gruppträning utomhus" />
          <div className="train-tile__overlay"></div>
          <div className="train-tile__body">
            <h3>Gruppträning</h3>
            <p>Pass varje dag, både inne och ute.</p>
          </div>
        </a>
        <a className="train-tile" href="#" onClick={(e) => { e.preventDefault(); onNav('milon'); }}>
          <img src="assets/milon-q-2.png" alt="Milon Q-cirkel" />
          <div className="train-tile__overlay"></div>
          <div className="train-tile__body">
            <h3>Milon Q</h3>
            <p>Hela kroppen på 20 min.</p>
          </div>
        </a>
        <a className="train-tile" href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>
          <img src="assets/pt.jpg" alt="Personlig träning" />
          <div className="train-tile__overlay"></div>
          <div className="train-tile__body">
            <h3>Personlig träning</h3>
            <p>1-till-1 med våra coacher.</p>
          </div>
        </a>
        <a className="train-tile" href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>
          <img src="assets/passgrupp.png" alt="Funktionell träning" />
          <div className="train-tile__overlay"></div>
          <div className="train-tile__body">
            <h3>Funktionellt</h3>
            <p>Kettlebells, slamballs, rörelse.</p>
          </div>
        </a>
      </div>
    </div>
  </section>
);

/* Pass-pill färg baserad på passnamn (matchar Hälsofabrikens kategorier) */
const pillVariant = (name) => {
  const n = (name || '').toLowerCase();
  if (n.includes('spinning') || n.includes('cykel')) return 'coral';
  if (n.includes('yoga') || n.includes('soma') || n.includes('mobilitet') || n.includes('rörlig')) return 'mint';
  if (n.includes('hiit') || n.includes('cardio') || n.includes('puls') || n.includes('crosstraining') || n.includes('box')) return 'coral';
  if (n.includes('senior') || n.includes('lätt') || n.includes('lugn') || n.includes('lunch')) return 'sand';
  if (n.includes('milon') || n.includes('quest')) return 'saffron';
  return '';
};

const DAYS_SHORT = ['Mån','Tis','Ons','Tor','Fre','Lör','Sön'];
const DAYS_LONG = ['Måndag','Tisdag','Onsdag','Torsdag','Fredag','Lördag','Söndag'];
const MONTHS_SHORT = ['jan','feb','mar','apr','maj','jun','jul','aug','sep','okt','nov','dec'];

const isoWeek = (d) => {
  const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));
  const dow = t.getUTCDay() || 7;
  t.setUTCDate(t.getUTCDate() + 4 - dow);
  const y0 = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));
  return Math.ceil((((t - y0) / 86400000) + 1) / 7);
};

const Schedule = () => {
  const [data, setData] = React.useState(null);
  const [weekIdx, setWeekIdx] = React.useState(0);
  const [filter, setFilter] = React.useState('Alla');
  const [selected, setSelected] = React.useState(null);

  React.useEffect(() => {
    fetch('assets/schedule.json')
      .then(r => r.json())
      .then(setData)
      .catch(() => setData({ passes: [] }));
  }, []);

  const weeks = React.useMemo(() => {
    if (!data?.passes?.length) return [];
    const today = new Date();
    const monday = new Date(today);
    monday.setDate(today.getDate() - ((today.getDay() + 6) % 7));
    monday.setHours(0,0,0,0);
    const out = [];
    for (let w = 0; w < 3; w++) {
      const ws = new Date(monday); ws.setDate(monday.getDate() + w*7);
      const we = new Date(ws); we.setDate(ws.getDate() + 7);
      const days = [];
      for (let i = 0; i < 7; i++) {
        const dd = new Date(ws); dd.setDate(ws.getDate() + i);
        days.push({ date: dd, items: [] });
      }
      data.passes.forEach(p => {
        const sd = new Date(p.start.replace(' ','T'));
        if (sd >= ws && sd < we) {
          const di = (sd.getDay() + 6) % 7;
          days[di].items.push(p);
        }
      });
      days.forEach(d => d.items.sort((a,b) => a.start.localeCompare(b.start)));
      out.push({ start: ws, end: we, weekNo: isoWeek(ws), days });
    }
    return out;
  }, [data]);

  const cats = React.useMemo(() => {
    if (!data?.passes) return [];
    const counts = {};
    data.passes.forEach(p => {
      const k = passCategory(p.name);
      counts[k] = (counts[k] || 0) + 1;
    });
    return ['Alla', ...Object.keys(counts).sort((a,b) => counts[b] - counts[a])];
  }, [data]);

  const week = weeks[weekIdx];

  const matches = (p) => {
    if (filter === 'Alla') return true;
    return passCategory(p.name) === filter;
  };

  const fmtRange = (w) => {
    if (!w) return '';
    const e = new Date(w.end); e.setDate(e.getDate() - 1);
    return `${w.start.getDate()} ${MONTHS_SHORT[w.start.getMonth()]} – ${e.getDate()} ${MONTHS_SHORT[e.getMonth()]}`;
  };

  const printPDF = () => {
    document.body.classList.add('printing-schedule');
    setTimeout(() => {
      window.print();
      setTimeout(() => document.body.classList.remove('printing-schedule'), 500);
    }, 100);
  };

  return (
    <section className="section section--tight" id="schema-section">
      <div className="container">
        <div className="schedule" id="schedule-print-target">
          <div className="schedule__head">
            <div>
              <span className="eyebrow">Schema</span>
              <h2 style={{marginTop:14, fontSize:'clamp(28px, 3.4vw, 44px)'}}>Veckans pass.</h2>
              <p className="schedule__sub">
                {data ? `${data.passes.length} pass de närmaste tre veckorna.` : 'Hämtar schema från Zoezi…'}
              </p>
            </div>
            <div className="schedule__tools">
              <div className="schedule__tabs" role="tablist">
                {weeks.map((w, i) => (
                  <button key={i} className={'schedule__tab ' + (weekIdx === i ? 'is-active' : '')}
                          onClick={() => setWeekIdx(i)}>
                    v.{w.weekNo}
                    <span className="schedule__tab-sub">{fmtRange(w)}</span>
                  </button>
                ))}
              </div>
              <button className="schedule__pdf" onClick={printPDF} aria-label="Ladda ner schema som PDF">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                <span>PDF</span>
              </button>
            </div>
          </div>

          {cats.length > 1 && (
            <div className="schedule__filter">
              {cats.map(c => (
                <button key={c} className={'schedule__chip ' + (filter === c ? 'is-active' : '')}
                        onClick={() => setFilter(c)}>{c}</button>
              ))}
            </div>
          )}

          <div className="schedule__grid">
            {week ? week.days.map((d, i) => {
              const visible = d.items.filter(matches);
              return (
                <div key={i} className="day-col">
                  <div className="day-col__name">{DAYS_SHORT[i]}</div>
                  <div className="day-col__date">{d.date.getDate()}</div>
                  <div className="day-col__month">{MONTHS_SHORT[d.date.getMonth()]}</div>
                  {visible.length === 0 && d.items.length > 0 && (
                    <div className="day-col__empty">— inget pass i kategorin —</div>
                  )}
                  {visible.length === 0 && d.items.length === 0 && (
                    <div className="day-col__empty">stängt / inga pass</div>
                  )}
                  {visible.map((p) => {
                    const t = p.start.split(' ')[1].slice(0,5);
                    const tEnd = p.end.split(' ')[1].slice(0,5);
                    const v = pillVariant(p.name);
                    return (
                      <button key={p.id} className={'class-pill ' + (v ? 'class-pill--' + v : '')}
                              onClick={() => setSelected(p)}>
                        <div className="class-pill__time">{t}<span className="class-pill__end"> – {tEnd}</span></div>
                        <div className="class-pill__name">{p.name}</div>
                        {p.instructor && <div className="class-pill__instr">{p.instructor.split(' ')[0]}</div>}
                      </button>
                    );
                  })}
                </div>
              );
            }) : (
              <div style={{gridColumn:'1 / -1', padding:'40px', textAlign:'center', color:'var(--hf-ink-2)'}}>
                Laddar…
              </div>
            )}
          </div>

          <div className="schedule__legend">
            <span className="schedule__legend-item"><span className="dot dot--coral"></span>Puls / cardio</span>
            <span className="schedule__legend-item"><span className="dot dot--mint"></span>Yoga / mobilitet</span>
            <span className="schedule__legend-item"><span className="dot dot--sand"></span>Lugnare / senior</span>
            <span className="schedule__legend-item"><span className="dot dot--saffron"></span>Milon Q</span>
            <span className="schedule__legend-item"><span className="dot"></span>Styrka / övrigt</span>
          </div>
        </div>
      </div>

      {selected && <ClassModal pass={selected} onClose={() => setSelected(null)} />}
    </section>
  );
};

const passCategory = (name) => {
  const n = (name || '').toLowerCase();
  if (n.includes('spinning') || n.includes('cykel')) return 'Spinning';
  if (n.includes('yoga') || n.includes('soma')) return 'Yoga / mobilitet';
  if (n.includes('hiit') || n.includes('cardio') || n.includes('puls')) return 'HIIT / cardio';
  if (n.includes('senior') || n.includes('easy line')) return 'Senior';
  if (n.includes('crosstraining') || n.includes('box')) return 'Crosstraining';
  if (n.includes('cirkel')) return 'Cirkel';
  if (n.includes('core') || n.includes('styrka') || n.includes('stab')) return 'Styrka / core';
  if (n.includes('milon') || n.includes('quest')) return 'Milon Q';
  if (n.includes('lunch')) return 'Lunchpass';
  if (n.includes('hopplös') || n.includes('gympa')) return 'Gympa';
  return 'Övrigt';
};

const ClassModal = ({ pass, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  const sd = new Date(pass.start.replace(' ','T'));
  const ed = new Date(pass.end.replace(' ','T'));
  const dayName = DAYS_LONG[(sd.getDay() + 6) % 7];
  const dateStr = `${dayName} ${sd.getDate()} ${MONTHS_SHORT[sd.getMonth()]}`;
  const timeStr = `${String(sd.getHours()).padStart(2,'0')}:${String(sd.getMinutes()).padStart(2,'0')} – ${String(ed.getHours()).padStart(2,'0')}:${String(ed.getMinutes()).padStart(2,'0')}`;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Stäng">×</button>
        <div className="eyebrow">{passCategory(pass.name)}</div>
        <h3 className="modal-title">{pass.name}</h3>
        <div className="modal-meta">
          <div><strong>När</strong><span>{dateStr} · {timeStr}</span></div>
          {pass.instructor && <div><strong>Ledare</strong><span>{pass.instructor}</span></div>}
          {pass.location && <div><strong>Plats</strong><span>{pass.location}</span></div>}
          {pass.slots && <div><strong>Platser</strong><span>{pass.slots}</span></div>}
          <div><strong>Längd</strong><span>{pass.durMin} min</span></div>
        </div>
        {pass.desc && <p className="modal-desc">{pass.desc}</p>}
        <div className="modal-actions">
          <a className="btn btn--primary" href="https://halsofabriken.gymsystem.se/" target="_blank" rel="noopener">Boka i appen</a>
          <button className="btn btn--ghost" onClick={onClose}>Stäng</button>
        </div>
      </div>
    </div>
  );
};

const QuoteBlock = () => (
  <section className="section section--tight">
    <div className="container">
      <div className="quote-block">
        <blockquote>
          Min ryggvärk släppte efter andra besöket. Att ha kiropraktorn,
          gymmet och Milon Q under samma tak — det är därför jag stannar.
        </blockquote>
        <div className="quote-block__author">Anna L. · Medlem sedan 2022</div>
      </div>
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Behöver jag vara medlem för att boka behandling?',
      a: 'Nej. Kiropraktik, fysio och massage är öppet för alla — medlem eller inte. Många kunder reser hit från hela Östergötland för våra behandlingar.' },
    { q: 'Vad ingår i Milon Q-erbjudandet?',
      a: '4 veckor obegränsad träning på Milon Q-cirkeln, plus en startsession med InBody-mätning, styrketest och personliga inställningar. Du betalar bara 595:- för uppstarten.' },
    { q: 'Vilka öppettider gäller?',
      a: 'Vi har öppet alla dagar 05–21 — bemannad reception under dagtid, taggentré resten av tiden.' },
    { q: 'Kan jag avsluta mitt medlemskap när jag vill?',
      a: 'Ja, vi har 1 månads uppsägningstid. Inga bindningstider eller dolda avgifter.' },
    { q: 'Erbjuder ni friskvård för företag?',
      a: 'Absolut. Vi tar emot friskvårdsbidrag och har företagsavtal — kontakta oss för paket.' },
    { q: 'Finns det parkering?',
      a: 'Ja, gratis parkering direkt utanför entrén.' },
  ];
  return (
    <section className="section" id="faq-section">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">Vanliga frågor</span>
            <h2 style={{marginTop:14}}>Funderar du på något?</h2>
            <p style={{marginTop:18, color:'var(--hf-ink-soft)', fontSize:16}}>
              Hittar du inte svaret? Vår chatbot svarar dygnet runt — eller ring oss direkt.
            </p>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={'faq-item' + (open === i ? ' is-open' : '')}>
                <button className="faq-item__q" onClick={() => setOpen(open === i ? -1 : i)}>
                  {it.q}
                  <span className="faq-item__icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6"><path d="M12 5v14M5 12h14"/></svg>
                  </span>
                </button>
                <div className="faq-item__a">{it.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Contact = () => (
  <section className="section" id="kontakt-section">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">Hitta hit</span>
        <h2>Välkommen till Åtvidaberg.</h2>
        <p>Mitt i centrala Åtvidaberg, med gott om parkering och ljust öppna lokaler.</p>
      </div>
      <div className="contact-grid">
        <div>
          <iframe
            className="map-embed"
            src="https://www.openstreetmap.org/export/embed.html?bbox=16.000%2C58.193%2C16.020%2C58.205&amp;layer=mapnik&amp;marker=58.1986%2C16.0094"
            title="Karta över Hälsofabriken Åtvidaberg"
            loading="lazy"
          ></iframe>
        </div>
        <div style={{display:'grid', gap:12}}>
          <div className="contact-card">
            <h3>Adress</h3>
            <p>Gamla Torget 1D<br/>597 30 Åtvidaberg</p>
          </div>
          <div className="contact-card">
            <h3>Gym — alla dagar</h3>
            <p>05:00 – 21:00</p>
          </div>
          <div className="contact-card">
            <h3>Bemannad reception</h3>
            <p style={{fontSize:13.5, lineHeight:1.7}}>
              <strong>Mån–Tor</strong> 10–13 &amp; 17–19:30<br/>
              <strong>Fre</strong> 10–13 &amp; 15–17<br/>
              <strong>Lör</strong> ingen bemanning<br/>
              <strong>Sön</strong> 16–19
            </p>
          </div>
          <div className="contact-card">
            <h3>Kontakt</h3>
            <p><a href="tel:+4612012005">0120-12 005</a><br/><a href="mailto:info@halsofabriken.se">info@halsofabriken.se</a></p>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Footer = ({ onNav }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer__grid">
        <div className="footer__brand">
          <img src="assets/logo-wide.png" alt="Hälsofabriken" />
          <p>Gym, kiropraktik och effektiv träning i hjärtat av Åtvidaberg. Öppet alla dagar 05–21.</p>
        </div>
        <div className="footer__col">
          <h4>Behandlingar</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('behandlingar'); }}>Kiropraktik</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('behandlingar'); }}>Fysioterapi</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('behandlingar'); }}>Massage</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('behandlingar'); }}>Rehab</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Träning</h4>
          <ul>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>Gym</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>Gruppträning</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('milon'); }}>Milon Q</a></li>
            <li><a href="#" onClick={(e) => { e.preventDefault(); onNav('traning'); }}>Personlig träning</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>Kontakt</h4>
          <ul>
            <li>Gamla Torget 1D, Åtvidaberg</li>
            <li><a href="tel:+4612012005">0120-12 005</a></li>
            <li><a href="mailto:info@halsofabriken.se">info@halsofabriken.se</a></li>
            <li>Gym öppet 05–21 alla dagar</li>
          </ul>
        </div>
      </div>
      <div className="footer__bot">
        <span>© {new Date().getFullYear()} Hälsofabriken Åtvidaberg AB · Org.nr 556xxx-xxxx</span>
        <span>Bokningssystem: Zoezi</span>
      </div>
    </div>
  </footer>
);

// FAB renderas av Cloudflare-widgeten; vi behåller bara intro-sektionen.
const FabChat = () => null;

const BotIntro = () => (
  <section className="section section--tight" id="liv-section">
    <div className="container">
      <div className="bot-intro">
        <div className="bot-intro__avatar bot-intro__avatar--photo">
          <img src="assets/liv.jpg" alt="Liv – digital assistent på Hälsofabriken" />
        </div>
        <div className="bot-intro__body">
          <span className="eyebrow">Säg hej till Liv</span>
          <h2 style={{marginTop:12}}>Vår digitala assistent — vaken dygnet runt.</h2>
          <p>
            Liv hjälper dig hitta rätt behandling, svarar på frågor om medlemskap,
            öppettider och Milon Q — och guidar dig vidare till bokningen. Hon finns
            alltid längst ner till höger, redo när du är.
          </p>
          <div className="bot-intro__chips">
            <span>"Vad kostar kiropraktik?"</span>
            <span>"När är nästa lediga massagetid?"</span>
            <span>"Hur funkar Milon Q?"</span>
            <span>"Har ni öppet idag?"</span>
          </div>
        </div>
        <button className="btn btn--saffron"
          onClick={() => document.getElementById('hf-agent-btn')?.click()}>
          Prata med Liv
          <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>
);

Object.assign(window, { Training, Schedule, QuoteBlock, FAQ, Contact, Footer, FabChat, BotIntro });