/* Symphony — Treatments hub + Laser leaf */

function PageTreatments({ onNavigate }) {
  return (
    <main className="page-enter">
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[{ label: 'Home', route: 'home' }, { label: 'Treatments' }]} onNavigate={onNavigate} />
          <span className="eyebrow"><span className="rule"/>Six departments · one clinic</span>
          <h1 className="display">A full aesthetic <em>menu</em> — fully supervised.</h1>
          <p className="body-lg">From the priced laser flagship to dermatologist-led skin and body protocols. Tap any department to read more or jump straight to a consultation.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="tx-grid">
            {TREATMENTS.map(t => (
              <article key={t.slug} className="tx-card"
                       onClick={() => onNavigate(t.slug === 'laser-hair-removal' ? 'laser' : 'treatments')}>
                <div className="tx-card-media"><img src={t.image} alt={t.name} loading="lazy" /></div>
                <div className="tx-card-body">
                  <div className="chip" style={{ alignSelf: 'flex-start', marginBottom: '.75rem' }}>{t.category}</div>
                  <h3>{t.name}</h3>
                  <p>{t.blurb}</p>
                  <div className="tx-card-foot">
                    <div className="price">{t.priceLabel}</div>
                    <div className="arrow"><Icon.Arrow s={14} /></div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ivory-deep)', borderTop: '1px solid var(--hairline)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <h2 className="display" style={{ marginBottom: '1.5rem' }}>Not sure which is for you?</h2>
          <p className="body-lg" style={{ maxWidth: '32rem', margin: '0 auto 2rem' }}>
            Tell us your goal in one sentence — our team will match you to the right department, honestly.
          </p>
          <a className="btn btn-coral" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
            Talk to a therapist <Icon.Arrow s={14} />
          </a>
        </div>
      </section>
    </main>
  );
}

function PageLaser({ onNavigate }) {
  const [gender, setGender] = React.useState('women');
  const rows = gender === 'women' ? LASER_PRICES_WOMEN : LASER_PRICES_MEN;

  return (
    <main className="page-enter">
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[
            { label: 'Home', route: 'home' },
            { label: 'Treatments', route: 'treatments' },
            { label: 'Laser Hair Removal' },
          ]} onNavigate={onNavigate} />
          <span className="eyebrow"><span className="rule"/>The flagship · fully priced</span>
          <h1 className="display">Laser hair removal on the <em>Candela GentleMax Pro</em>.</h1>
          <p className="body-lg">Painless, all-skin-types laser — including darker phototypes. AED prices include VAT; Tabby available across the table.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 'clamp(2rem, 5vw, 4rem)', alignItems: 'start' }}>
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem', flexWrap: 'wrap', gap: '1rem' }}>
                <div>
                  <span className="eyebrow"><span className="rule"/>Price menu</span>
                  <h2 className="display" style={{ marginTop: '.5rem', fontSize: '2rem' }}>
                    {gender === 'women' ? 'Laser · Women' : 'Laser · Men'}
                  </h2>
                </div>
                <div className="seg">
                  <button className={gender === 'women' ? 'active' : ''} onClick={() => setGender('women')}>Women</button>
                  <button className={gender === 'men'   ? 'active' : ''} onClick={() => setGender('men')}>Men</button>
                </div>
              </div>

              <table className="price-table">
                <thead><tr><th>Treatment</th><th style={{ width: '40%' }}>Includes</th><th>Per session</th></tr></thead>
                <tbody>
                  {rows.map((r, i) => (
                    <tr key={i}>
                      <td className="name">{r.name}</td>
                      <td className="zones">{r.zones}</td>
                      <td className="price"><span className="currency">AED</span>{r.price}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

              <div style={{ marginTop: '2rem', padding: '1.25rem 1.5rem', background: 'var(--blush)', borderRadius: 'var(--radius)', display: 'flex', gap: '1rem', alignItems: 'center' }}>
                <Icon.Sparkle s={20} />
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.125rem' }}>First-visit offer · 50% off any area</div>
                  <div className="muted" style={{ fontSize: 13 }}>Pay in 4 with Tabby. Ask the front desk about Entertainer bundles.</div>
                </div>
              </div>
            </div>

            <div style={{ position: 'sticky', top: '92px' }}>
              <BookingForm presetTreatment="Laser Hair Removal" compact />
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ivory-deep)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>How it works</div>
              <h2 className="display">Six sessions, four weeks apart — that's the protocol.</h2>
            </div>
            <p className="body-lg">Hair grows in cycles. To catch every follicle in its active phase, we space sessions methodically. Most clients see 70–90% reduction by session six.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1rem' }}>
            <Step n="01" title="Consultation" body="Skin diary, phototype, contra-indications. A patch test if you're new to laser." />
            <Step n="02" title="Comfort prep" body="Clean, cool, glide. No numbing required — the Candela has built-in cryogen cooling." />
            <Step n="03" title="Treatment"   body="15–45 minutes depending on the area. Most clients describe it as a warm flick." />
            <Step n="04" title="Aftercare"   body="Cooling lotion at the clinic, SPF reminder, your next slot booked before you leave." />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>FAQ</div>
              <h2 className="display">Honest answers to <em>real</em> questions.</h2>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem 3rem' }}>
            <Faq q="Is it painful?" a="No numbing required. The Candela's cryogen cooling fires a millisecond before the pulse — most clients describe it as a warm flick or rubber-band snap." />
            <Faq q="Does it work on darker skin?" a="Yes. The Candela GentleMax Pro pairs Alexandrite (755nm) with Nd:YAG (1064nm) — the latter is specifically safe and effective on Fitzpatrick V–VI." />
            <Faq q="How many sessions will I need?" a="Six is typical for body areas, eight–ten for face. Hormonal areas (chin, jaw) sometimes need maintenance every 6–12 months." />
            <Faq q="What should I do before my session?" a="Shave the area 12–24 hours before. Don't wax, pluck, or use depilatory creams between sessions — the follicle is the target." />
            <Faq q="Can I do it while pregnant?" a="No. We pause laser during pregnancy and resume after delivery. We'll happily reschedule." />
            <Faq q="What if I have a fresh tan?" a="We wait two weeks after sun exposure and ask you to use SPF 50 between sessions. Tanned skin and laser don't mix." />
          </div>
        </div>
      </section>
    </main>
  );
}

function Step({ n, title, body }) {
  return (
    <div style={{ padding: '1.75rem', background: 'var(--cream-card)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius)' }}>
      <div className="eyebrow" style={{ color: 'var(--coral-deep)', marginBottom: '1rem' }}>{n}</div>
      <h3 className="display" style={{ fontSize: '1.375rem', marginBottom: '.75rem' }}>{title}</h3>
      <p style={{ color: 'var(--stone)', fontSize: '.9375rem', lineHeight: 1.6 }}>{body}</p>
    </div>
  );
}

function Faq({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--hairline)', padding: '1.25rem 0', cursor: 'pointer' }}
         onClick={() => setOpen(!open)}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: '1rem' }}>
        <h4 style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem', fontWeight: 400 }}>{q}</h4>
        <span style={{ fontFamily: 'var(--font-eyebrow)', fontSize: 18, color: 'var(--coral-deep)' }}>{open ? '−' : '+'}</span>
      </div>
      {open && <p style={{ color: 'var(--ink-soft)', marginTop: '.75rem', maxWidth: '40rem', lineHeight: 1.6 }}>{a}</p>}
    </div>
  );
}

Object.assign(window, { PageTreatments, PageLaser });