/* global React */
const { useState: useStateP, useEffect: useEffectP } = React;

// ---------- Service subpage ----------
function ServicePage({ slug, onNav, onOpenBooking }) {
  const svc = window.SopranoData.services.find(s => s.slug === slug);
  if (!svc) {
    return (
      <div className="container" style={{ padding: '200px 0', textAlign: 'center' }}>
        <div className="eyebrow">404</div>
        <h1 className="font-display" style={{ fontSize: 64, margin: '20px 0' }}>Sidan hittades inte</h1>
        <a href="#/" className="cta-solid" onClick={e => { e.preventDefault(); onNav('#/'); }}>Tillbaka till start →</a>
      </div>
    );
  }

  useEffectP(() => {
    window.scrollTo({ top: 0 });
  }, [slug]);

  const others = window.SopranoData.services.filter(s => s.slug !== slug);

  return (
    <>
      <section className="svc-hero">
        <div className="container">
          <Reveal className="crumbs">
            <a href="#/" onClick={e => { e.preventDefault(); onNav('#/'); }}>Hem</a>
            {'  /  '}
            <a href="#/#tjanster" onClick={e => { e.preventDefault(); onNav('#/#tjanster'); }}>Tjänster</a>
            {'  /  '}
            <span>{svc.name}</span>
          </Reveal>
          <Reveal delay={1}>
            <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot"></span>{svc.num} — {svc.short}</div>
            <h1 dangerouslySetInnerHTML={{ __html: svc.name.replace(/&/g, '<em>&</em>') }} />
          </Reveal>
          <Reveal as="p" className="lede" delay={2}>{svc.tagline} {svc.teaser}</Reveal>

          <Reveal className="svc-feature" delay={3}>
            <div className={`svc-photo ${svc.thumb}`}></div>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.08, mixBlendMode: 'multiply', backgroundImage: 'repeating-linear-gradient(23deg, rgba(46,46,43,0.6) 0, rgba(46,46,43,0.6) 1px, transparent 1px, transparent 3px)' }}></div>
            <div style={{ position: 'absolute', left: 22, bottom: 18, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)' }}>
              Feature · {svc.short}
            </div>
          </Reveal>
        </div>
      </section>

      <section className="block" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="svc-body">
            <aside>
              <div className="eyebrow"><span className="dot"></span>I korthet</div>
              <ul>
                {svc.facts.map(f => (
                  <li key={f.k}>
                    <span style={{ color: 'var(--stone)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{f.k}</span>
                    <span className="v">{f.v}</span>
                  </li>
                ))}
              </ul>
              <a
                href="https://www.bokadirekt.se/places/soprano-boras-32484"
                target="_blank"
                rel="noopener noreferrer"
                className="cta-solid"
                style={{ marginTop: 28 }}
              >
                Boka {svc.short.toLowerCase()} <span className="arrow">→</span>
              </a>
            </aside>

            <main>
              <Reveal>
                <p style={{ fontSize: 18, lineHeight: 1.8, color: 'var(--ink)', fontWeight: 300 }}>
                  {svc.intro}
                </p>
              </Reveal>

              {svc.sections.map((sec, i) => (
                <Reveal key={i} delay={(i % 3) + 1}>
                  <h3>{sec.h}</h3>
                  <p>{sec.p}</p>
                </Reveal>
              ))}
            </main>
          </div>
        </div>
      </section>

      {/* Other services */}
      <section className="block bg-cream">
        <div className="container">
          <Reveal className="section-head">
            <div>
              <div className="eyebrow"><span className="dot"></span>Utforska vidare</div>
              <h2>Andra<br/><em>behandlingar.</em></h2>
            </div>
            <p className="intro">Varje behandling på Soprano Borås utförs med samma omsorg om detalj, säkerhet och naturlig estetik.</p>
          </Reveal>

          <div className="services">
            {others.slice(0, 4).map((s, i) => (
              <Reveal
                key={s.slug}
                className={`svc ${i === 0 ? 'wide' : ''}`}
                delay={(i % 3) + 1}
                onClick={() => onNav(`#/tjanster/${s.slug}`)}
              >
                <div className={`thumb ${s.thumb}`} style={{ marginBottom: 22 }}>
                  <div className="tag">{s.short}</div>
                </div>
                <div className="num">{s.num} / 05</div>
                <h3>{s.name}</h3>
                <p>{s.teaser}</p>
                <div className="foot"><span>Läs mer</span><span className="arrow">→</span></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}

// ---------- Booking Modal ----------
function BookingModal({ open, onClose, preselect }) {
  const [step, setStep] = useStateP(1);
  const [service, setService] = useStateP(preselect || '');
  const [date, setDate] = useStateP('');
  const [time, setTime] = useStateP('');
  const [form, setForm] = useStateP({ name: '', email: '', phone: '' });
  const [confirmed, setConfirmed] = useStateP(false);

  useEffectP(() => {
    if (open) {
      setStep(1);
      setService(preselect || '');
      setDate('');
      setTime('');
      setForm({ name: '', email: '', phone: '' });
      setConfirmed(false);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
  }, [open, preselect]);

  if (!open) return null;

  const svcs = window.SopranoData.services;
  const times = ['09:00', '10:30', '12:00', '14:00', '15:30', '17:00', '18:30'];

  // build next 14 days
  const days = Array.from({ length: 14 }, (_, i) => {
    const d = new Date();
    d.setDate(d.getDate() + i);
    return d;
  });

  const canNext = () => {
    if (step === 1) return !!service;
    if (step === 2) return date && time;
    if (step === 3) return form.name && form.email && form.phone;
    return true;
  };

  const sel = svcs.find(s => s.slug === service);

  return (
    <div
      style={{
        position: 'fixed', inset: 0, zIndex: 100,
        background: 'rgba(46,46,43,0.5)',
        backdropFilter: 'blur(6px)',
        display: 'grid', placeItems: 'center',
        padding: 24,
        animation: 'fadeIn 0.3s ease',
      }}
      onClick={onClose}
    >
      <div
        onClick={e => e.stopPropagation()}
        style={{
          background: 'var(--paper)',
          width: '100%', maxWidth: 780,
          borderRadius: 6,
          border: '1px solid var(--hairline)',
          boxShadow: '0 60px 120px -40px rgba(46,46,43,0.5)',
          maxHeight: '90vh',
          overflow: 'auto',
        }}
      >
        <div style={{ padding: '20px 28px', borderBottom: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div className="eyebrow"><span className="dot"></span>Boka tid · Steg {confirmed ? 4 : step} / 4</div>
          <button onClick={onClose} style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--stone)' }}>Stäng ✕</button>
        </div>

        {/* Progress */}
        <div style={{ height: 2, background: 'var(--hairline)' }}>
          <div style={{ height: '100%', background: 'var(--olive)', width: `${(confirmed ? 4 : step) * 25}%`, transition: 'width 0.5s var(--ease)' }} />
        </div>

        <div style={{ padding: '36px 36px 40px' }}>
          {confirmed ? (
            <div style={{ textAlign: 'center', padding: '20px 0 10px' }}>
              <div style={{ width: 64, height: 64, margin: '0 auto 24px', borderRadius: '50%', background: 'var(--terracotta)', display: 'grid', placeItems: 'center', fontSize: 28, color: 'var(--paper)' }}>✓</div>
              <h3 className="font-display" style={{ fontSize: 36, margin: '0 0 10px', fontWeight: 300 }}>Tack, {form.name.split(' ')[0] || 'du'}.</h3>
              <p style={{ color: 'var(--ink-soft)', maxWidth: '44ch', margin: '0 auto 28px' }}>
                Din förfrågan om {sel?.name} den {date} kl. {time} är mottagen. Vi kontaktar dig inom 24 timmar för att bekräfta tiden.
              </p>
              <div style={{ display: 'inline-block', textAlign: 'left', background: 'var(--surface)', padding: '18px 24px', borderRadius: 4, fontSize: 13, lineHeight: 1.9 }}>
                <div style={{ color: 'var(--stone)', fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', marginBottom: 6 }}>Bekräftelse skickad till</div>
                <strong style={{ color: 'var(--olive)' }}>{form.email}</strong>
              </div>
              <div style={{ marginTop: 30 }}>
                <button className="cta-solid" onClick={onClose}>Stäng <span className="arrow">→</span></button>
              </div>
            </div>
          ) : step === 1 ? (
            <>
              <h3 className="font-display" style={{ fontSize: 32, fontWeight: 300, margin: '0 0 6px' }}>Välj behandling</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 0, marginBottom: 28 }}>Alla konsultationer är kostnadsfria och tar cirka 30 minuter.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {svcs.map(s => (
                  <button
                    key={s.slug}
                    onClick={() => setService(s.slug)}
                    style={{
                      textAlign: 'left', padding: '18px 20px',
                      border: '1px solid', borderColor: service === s.slug ? 'var(--olive)' : 'var(--hairline)',
                      background: service === s.slug ? 'var(--surface)' : 'var(--paper)',
                      borderRadius: 4,
                      transition: 'all 0.3s var(--ease)',
                    }}
                  >
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', color: 'var(--stone)' }}>{s.num}</span>
                      <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--olive)' }}>{s.short}</span>
                    </div>
                    <div className="font-display" style={{ fontSize: 20, color: 'var(--ink)' }}>{s.name}</div>
                  </button>
                ))}
              </div>
            </>
          ) : step === 2 ? (
            <>
              <h3 className="font-display" style={{ fontSize: 32, fontWeight: 300, margin: '0 0 6px' }}>Välj datum & tid</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 0, marginBottom: 28 }}>För {sel?.name}. Tider visas i lokal tid (Europa/Stockholm).</p>

              <div style={{ overflowX: 'auto', marginBottom: 24 }}>
                <div style={{ display: 'flex', gap: 8, paddingBottom: 8 }}>
                  {days.map((d, i) => {
                    const iso = d.toISOString().slice(0, 10);
                    const label = d.toLocaleDateString('sv-SE', { weekday: 'short' });
                    const num = d.getDate();
                    const mon = d.toLocaleDateString('sv-SE', { month: 'short' });
                    const active = date === iso;
                    const sunday = d.getDay() === 0;
                    return (
                      <button
                        key={i}
                        disabled={sunday}
                        onClick={() => setDate(iso)}
                        style={{
                          minWidth: 72, padding: '12px 8px',
                          border: '1px solid', borderColor: active ? 'var(--olive)' : 'var(--hairline)',
                          background: active ? 'var(--olive)' : sunday ? 'var(--surface)' : 'var(--paper)',
                          color: active ? 'var(--paper)' : sunday ? 'var(--stone)' : 'var(--ink)',
                          opacity: sunday ? 0.4 : 1,
                          cursor: sunday ? 'not-allowed' : 'pointer',
                          borderRadius: 3,
                          textAlign: 'center',
                          transition: 'all 0.25s var(--ease)',
                        }}
                      >
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.7 }}>{label}</div>
                        <div className="font-display" style={{ fontSize: 22, margin: '2px 0' }}>{num}</div>
                        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7 }}>{mon}</div>
                      </button>
                    );
                  })}
                </div>
              </div>

              <div className="eyebrow" style={{ marginBottom: 12 }}><span className="dot"></span>Lediga tider</div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 8 }}>
                {times.map(t => {
                  const active = time === t;
                  return (
                    <button
                      key={t}
                      onClick={() => setTime(t)}
                      disabled={!date}
                      style={{
                        padding: '12px 10px',
                        border: '1px solid', borderColor: active ? 'var(--olive)' : 'var(--hairline)',
                        background: active ? 'var(--olive)' : 'var(--paper)',
                        color: active ? 'var(--paper)' : 'var(--ink)',
                        opacity: date ? 1 : 0.4,
                        borderRadius: 3,
                        fontSize: 14,
                        transition: 'all 0.25s var(--ease)',
                      }}
                    >
                      {t}
                    </button>
                  );
                })}
              </div>

              {sel?.slug === 'injektioner' && (
                <div className="price-note" style={{ marginTop: 22 }}>
                  <strong>Obs.</strong> För injektionsbehandlingar krävs konsultation minst 48 timmar innan första behandling.
                </div>
              )}
            </>
          ) : (
            <>
              <h3 className="font-display" style={{ fontSize: 32, fontWeight: 300, margin: '0 0 6px' }}>Dina uppgifter</h3>
              <p style={{ color: 'var(--ink-soft)', marginTop: 0, marginBottom: 28 }}>Vi återkommer inom 24 timmar med bekräftelse.</p>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22 }}>
                <div className="field" style={{ gridColumn: 'span 2' }}>
                  <label>Fullständigt namn</label>
                  <input type="text" value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Skriv ditt för- och efternamn" />
                </div>
                <div className="field">
                  <label>E-post</label>
                  <input type="email" value={form.email} onChange={e => setForm({ ...form, email: e.target.value })} placeholder="Ex. namn@exempel.se" />
                </div>
                <div className="field">
                  <label>Telefon</label>
                  <input type="tel" value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="Ex. 070 123 45 67" />
                </div>
              </div>

              <div style={{ marginTop: 28, padding: '18px 22px', background: 'var(--surface)', borderRadius: 4, border: '1px solid var(--hairline)' }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Sammanfattning</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', rowGap: 6, fontSize: 14 }}>
                  <div style={{ color: 'var(--stone)' }}>Behandling</div>
                  <div style={{ fontWeight: 500 }}>{sel?.name}</div>
                  <div style={{ color: 'var(--stone)' }}>Datum</div>
                  <div style={{ fontWeight: 500 }}>{date}</div>
                  <div style={{ color: 'var(--stone)' }}>Tid</div>
                  <div style={{ fontWeight: 500 }}>{time}</div>
                </div>
              </div>
            </>
          )}
        </div>

        {!confirmed && (
          <div style={{ padding: '20px 28px', borderTop: '1px solid var(--hairline)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <button
              onClick={() => setStep(Math.max(1, step - 1))}
              disabled={step === 1}
              style={{ opacity: step === 1 ? 0.3 : 1, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}
            >
              ← Tillbaka
            </button>
            {step < 3 ? (
              <button
                className="cta-solid"
                disabled={!canNext()}
                style={{ opacity: canNext() ? 1 : 0.4 }}
                onClick={() => canNext() && setStep(step + 1)}
              >
                Fortsätt <span className="arrow">→</span>
              </button>
            ) : (
              <button
                className="cta-solid"
                disabled={!canNext()}
                style={{ opacity: canNext() ? 1 : 0.4 }}
                onClick={() => canNext() && setConfirmed(true)}
              >
                Bekräfta bokning <span className="arrow">→</span>
              </button>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// ---------- Tweaks Panel ----------
function TweaksPanel({ open, onClose, palette, setPalette, cards, setCards, hero, setHero }) {
  if (!open) return null;
  return (
    <div className="tweaks open">
      <h6>
        <span>Tweaks</span>
        <button className="close" onClick={onClose}>✕</button>
      </h6>

      <div className="group">
        <div className="label">Palette</div>
        <div className="swatches">
          {[
            { id: 'default', bg: '#F6F2EE' },
            { id: 'olive-forward', bg: '#cdc3ba' },
            { id: 'terracotta', bg: '#C9745A' },
          ].map(s => (
            <button
              key={s.id}
              className={`sw ${palette === s.id ? 'active' : ''}`}
              style={{ background: s.bg }}
              onClick={() => setPalette(s.id)}
              title={s.id}
            />
          ))}
        </div>
      </div>

      <div className="group">
        <div className="label">Card style</div>
        <div className="chips">
          {['grid', 'flat', 'framed'].map(c => (
            <button
              key={c}
              className={`chip ${cards === c ? 'active' : ''}`}
              onClick={() => setCards(c)}
            >
              {c}
            </button>
          ))}
        </div>
      </div>

      <div className="group">
        <div className="label">Hero layout</div>
        <div className="chips">
          {['editorial', 'centered'].map(c => (
            <button
              key={c}
              className={`chip ${hero === c ? 'active' : ''}`}
              onClick={() => setHero(c)}
            >
              {c}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ServicePage, BookingModal, TweaksPanel });