// Before/After (consent-gated), About, Contact pages

// =============================================
// BEFORE / AFTER — Consent Gated
// =============================================
function BeforeAfter({ go }) {
  const [accepted, setAccepted] = useState(false);
  const [agreed1, setAgreed1] = useState(false);
  const [agreed2, setAgreed2] = useState(false);

  return (
    <div className="page-anim">
      <section style={{ padding: '64px 0 48px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow mb-2">Before & After</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 80px)', maxWidth: 900 }}>
            Results <em className="h-script">shown with consent</em>, never without.
          </h1>
          <p className="muted mt-3" style={{ fontSize: 16, maxWidth: 620, lineHeight: 1.7 }}>
            Surgical before-and-after imagery is restricted in the UAE. We publish only with patient
            consent, in compliance with DHA/MOH advertising rules, and never with guaranteed-results
            language.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {!accepted ? (
            <div className="consent-gate">
              <div className="icon"><Icon.lock /></div>
              <div className="eyebrow mb-2 text-bronze">Compliance Gate</div>
              <h3>This gallery is restricted by DHA/MOH advertising compliance.</h3>
              <p>
                To view before-and-after imagery you must confirm you are 18+, that you understand
                results are individual and not guaranteed, and that you accept our DHA/MOH-compliant
                viewing conditions.
              </p>

              <div className="terms">
                <input id="t1" type="checkbox" checked={agreed1} onChange={(e) => setAgreed1(e.target.checked)} />
                <label htmlFor="t1">
                  I am <strong>18 years or older</strong> and understand that surgical and aesthetic
                  results are individual; outcomes shown are specific patients and are not a guarantee
                  of the result I would achieve.
                </label>
              </div>
              <div className="terms" style={{ marginTop: 12 }}>
                <input id="t2" type="checkbox" checked={agreed2} onChange={(e) => setAgreed2(e.target.checked)} />
                <label htmlFor="t2">
                  I acknowledge the imagery is published with patient consent in line with DHA / MOH
                  advertising rules and will not be reproduced or distributed.
                </label>
              </div>

              <div className="mt-4 flex gap-2 center" style={{ justifyContent: 'center' }}>
                <button
                  className="btn btn-bronze btn-lg"
                  disabled={!agreed1 || !agreed2}
                  onClick={() => setAccepted(true)}
                  style={{ opacity: agreed1 && agreed2 ? 1 : 0.4, cursor: agreed1 && agreed2 ? 'pointer' : 'not-allowed' }}
                >
                  View Gallery <Icon.arrow className="btn-icon-arrow" />
                </button>
                <button className="btn btn-ghost btn-lg" style={{ color: 'var(--porcelain)', borderColor: 'rgba(255,255,255,0.3)' }} onClick={() => go({ page: 'procedures' })}>
                  Browse procedures instead
                </button>
              </div>
            </div>
          ) : (
            <>
              {/* Real before/after pairs — shown at full aspect ratio after consent */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 48, marginBottom: 64 }}>
                {[
                  {
                    img: 'media/clinic-band-1.webp',
                    label: 'Lip Enhancement',
                    detail: 'Dermal filler, single session',
                    surgeon: 'Aesthetic Physician — DHA Licensed',
                    note: 'Individual result. Outcomes vary by anatomy, candidacy and aftercare. Not a guarantee of any specific result.'
                  },
                  {
                    img: 'media/clinic-band-2.webp',
                    label: 'Submental Contouring',
                    detail: 'Non-surgical fat reduction · CoolSculpting protocol',
                    surgeon: 'Treatment plan supervised by consultant',
                    note: 'Individual result. Outcomes vary. Multiple sessions may be required.'
                  }
                ].map((pair, i) => (
                  <figure key={i} style={{ background: 'var(--mist)', borderRadius: 4, overflow: 'hidden', border: '1px solid var(--line)' }}>
                    <div style={{ background: '#000', display: 'flex', justifyContent: 'center' }}>
                      <img
                        src={pair.img}
                        alt={`${pair.label} — before and after, consent-cleared`}
                        style={{ width: '100%', height: 'auto', display: 'block', maxWidth: '100%' }}
                      />
                    </div>
                    <figcaption style={{ padding: '24px 28px', display: 'grid', gridTemplateColumns: '1.4fr 1fr 1.4fr', gap: 32, alignItems: 'start' }}>
                      <div>
                        <div className="eyebrow text-bronze mb-1">Pair {String(i + 1).padStart(2, '0')} · {pair.label}</div>
                        <div className="h-display" style={{ fontSize: 22, lineHeight: 1.2 }}>{pair.detail}</div>
                      </div>
                      <div>
                        <div className="eyebrow muted mb-1">Performed by</div>
                        <div style={{ fontSize: 13.5, color: 'var(--ink)' }}>{pair.surgeon}</div>
                      </div>
                      <div className="flex gap-2" style={{ alignItems: 'flex-start' }}>
                        <Icon.alert className="text-bronze" />
                        <div style={{ fontSize: 12, color: 'var(--ink-muted)', lineHeight: 1.55 }}>{pair.note}</div>
                      </div>
                    </figcaption>
                  </figure>
                ))}
              </div>

              <div className="ba-shell locked">
                <div className="ba-locked-msg">
                  <div className="eyebrow">More pairs — awaiting client-supplied media</div>
                  <h3>The architecture is built. <span className="h-script italic">More images come from you.</span></h3>
                  <p>
                    To extend the gallery, the clinic supplies further consent-cleared, DHA/MOH-compliant
                    before/after pairs — never imagery from another website, never without written
                    patient consent.
                  </p>
                  <div className="ba-checks">
                    <div className="ba-check"><span className="ba-check-icon"><Icon.check /></span> Patient consent on file</div>
                    <div className="ba-check"><span className="ba-check-icon"><Icon.check /></span> No guaranteed-results language</div>
                    <div className="ba-check"><span className="ba-check-icon"><Icon.check /></span> Treatment and surgeon disclosed</div>
                    <div className="ba-check"><span className="ba-check-icon"><Icon.check /></span> Compliant with DHA/MOH advertising rules</div>
                  </div>
                  <button className="btn btn-primary" onClick={() => go({ page: 'contact' })}>
                    Contact the clinic <Icon.arrow className="btn-icon-arrow" />
                  </button>
                </div>
                <div className="ba-placeholder">
                  <div className="ba-placeholder-icon"><Icon.lock /></div>
                  <p>Consent-cleared before/after pair · Procedure · Surgeon · Date</p>
                  <p className="font-mono" style={{ fontSize: 10, letterSpacing: '0.16em' }}>WEBP · Full aspect ratio preserved</p>
                </div>
              </div>

              <div className="grid mt-6" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
                {[3, 4, 5, 6, 7, 8].map(i => (
                  <div key={i} className="ba-placeholder" style={{ aspectRatio: '1/1', padding: 20 }}>
                    <div className="ba-placeholder-icon" style={{ width: 40, height: 40 }}>
                      <Icon.lock />
                    </div>
                    <p style={{ fontSize: 11 }}>Pair #{String(i).padStart(2, '0')}</p>
                    <p className="font-mono" style={{ fontSize: 9, letterSpacing: '0.16em' }}>Locked</p>
                  </div>
                ))}
              </div>
            </>
          )}
        </div>
      </section>
    </div>
  );
}

// =============================================
// ABOUT
// =============================================
function About({ go }) {
  const milestones = [
    { year: '1998', label: 'Dr Jaffer Khan begins practising plastic surgery in Dubai.' },
    { year: '2011', label: 'Aesthetics International opens its Jumeirah villa.' },
    { year: '2014', label: 'Dedicated body-contouring & energy-device suites added.' },
    { year: '2019', label: 'Surgical suite expanded; ISAPS-member surgeons added to roster.' },
    { year: '2023', label: 'Morpheus8 Pro and Ultherapy AI brought in-house.' },
    { year: 'Today', label: 'A permanent in-house team across five care streams.' }
  ];

  return (
    <div className="page-anim">
      <section style={{ position: 'relative', height: 520, overflow: 'hidden' }}>
        <img src="media/about-banner.webp" alt="Aesthetics International" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(22,24,29,0.45) 0%, rgba(22,24,29,0.65) 100%)' }}></div>
        <div className="container" style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '80px 32px' }}>
          <div className="eyebrow" style={{ color: 'var(--bronze)' }}>About the Clinic</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 7vw, 96px)', color: 'var(--porcelain)', maxWidth: 900, marginTop: 16, lineHeight: 0.95 }}>
            Founded in <em className="h-script" style={{ color: 'var(--bronze)' }}>2011.</em><br />
            Surgeon-led, ever since.
          </h1>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div className="eyebrow mb-2">The Idea</div>
              <h2 className="h-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)' }}>
                A permanent team, <em className="h-script">a private villa.</em>
              </h2>
            </div>
            <div>
              <p className="font-display" style={{ fontSize: 22, lineHeight: 1.45, color: 'var(--ink)', marginBottom: 24, maxWidth: 660 }}>
                Aesthetics International was founded to do one thing well: bring surgical plastic
                surgery and serious aesthetic medicine under one consistent roof, with the same
                clinical team day in, day out.
              </p>
              <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.7, maxWidth: 660 }}>
                We sit inside Utamah Villa #1049c on Al Wasl Road — a discreet Jumeirah address, five
                treatment suites and a dedicated surgical area. The team is permanent, not a rotation;
                every practitioner is DHA-licensed and answerable for their own scope of practice.
              </p>
              <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.7, maxWidth: 660, marginTop: 14 }}>
                We don't advertise "best" or "gold standard" — DHA/MOH rules don't allow it, and we
                think those words make patients suspicious anyway. What we will say: we've been doing
                this in Dubai since 2011, our surgeons are credentialed and named, and we discuss risk
                in full before any surgical procedure.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="section" style={{ background: 'var(--mist)' }}>
        <div className="container">
          <div className="sec-head">
            <h2>A quiet timeline.</h2>
            <p>Years matter in surgical practice. Below is ours, in brief.</p>
          </div>
          <div style={{ position: 'relative', paddingLeft: 64 }}>
            <div style={{ position: 'absolute', left: 16, top: 0, bottom: 0, width: 1, background: 'var(--line-strong)' }}></div>
            {milestones.map((m, i) => (
              <div key={m.year} style={{ position: 'relative', paddingBottom: 32, display: 'grid', gridTemplateColumns: '140px 1fr', gap: 32, alignItems: 'baseline' }}>
                <div style={{ position: 'absolute', left: -55, top: 6, width: 12, height: 12, borderRadius: '50%', background: 'var(--bronze)', boxShadow: '0 0 0 4px var(--mist)' }}></div>
                <div className="font-display" style={{ fontSize: 36, color: 'var(--ink)', fontStyle: 'italic', lineHeight: 1 }}>{m.year}</div>
                <div style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 540 }}>{m.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Accreditations */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <h2>Accreditations &amp; <em>memberships</em></h2>
            <p>Verified credentials only. We do not publish device-partner logos as awards, and we attribute editorial mentions as press — not accolades.</p>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line)', borderRadius: 3, overflow: 'hidden' }}>
            {[
              { label: 'DHA Licensed', sub: 'Dubai Health Authority Polyclinic — establishment licence to verify' },
              { label: 'ISAPS Members', sub: 'Among the surgical team. Verified per surgeon at consultation.' },
              { label: 'Joint Royal Colleges', sub: 'Plastic surgery specialty fellowship — Dr Jaffer Khan' },
              { label: 'Multi-Jurisdictional', sub: 'DHA · HAAD · DHCC · GMC (UK) — Dr Francisco De Melo' }
            ].map((a, i) => (
              <div key={i} style={{
                padding: '36px 28px',
                borderRight: (i + 1) % 4 !== 0 ? '1px solid var(--line)' : '0',
                background: 'var(--porcelain)'
              }}>
                <div className="eyebrow text-bronze mb-2">{a.label}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-muted)', lineHeight: 1.5 }}>{a.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ink)', color: 'var(--porcelain)' }}>
        <div className="container center" style={{ textAlign: 'center' }}>
          <div className="eyebrow" style={{ color: 'var(--bronze)' }}>Visit</div>
          <h2 className="h-display mt-3" style={{ fontSize: 'clamp(40px, 5vw, 64px)', color: 'var(--porcelain)', maxWidth: 800, margin: '16px auto' }}>
            We're at <em className="h-script" style={{ color: 'var(--bronze)' }}>Utamah Villa #1049c,</em><br />Al Wasl Road, Jumeirah.
          </h2>
          <div className="flex gap-2 mt-4" style={{ justifyContent: 'center', flexWrap: 'wrap' }}>
            <button className="btn btn-bronze btn-lg" onClick={() => go({ page: 'book' })}>
              Book a Consultation <Icon.arrow className="btn-icon-arrow" />
            </button>
            <button className="btn btn-ghost btn-lg" style={{ color: 'var(--porcelain)', borderColor: 'rgba(255,255,255,0.3)' }} onClick={() => go({ page: 'contact' })}>
              Find the villa
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================
// CONTACT
// =============================================
function Contact({ go }) {
  return (
    <div className="page-anim">
      <section style={{ padding: '64px 0 48px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow mb-2">Contact</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 80px)', maxWidth: 900 }}>
            By appointment. <em className="h-script">Always discreet.</em>
          </h1>
          <p className="muted mt-3" style={{ fontSize: 16, maxWidth: 620, lineHeight: 1.7 }}>
            We're open Monday to Saturday by appointment. WhatsApp is the fastest way to reach reception
            — call or email for everything else.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div className="contact-row">
                <a href={CLINIC_INFO.phoneHref} className="contact-card" style={{ textDecoration: 'none' }}>
                  <div className="label">Call</div>
                  <div className="val">{CLINIC_INFO.phone}</div>
                  <div className="sub mt-2 flex gap-2" style={{ alignItems: 'center', color: 'var(--bronze-deep)' }}>
                    <Icon.phone /> Mon–Sat, 10:00–20:00
                  </div>
                </a>
                <a href={CLINIC_INFO.whatsappHref} target="_blank" rel="noopener" className="contact-card" style={{ textDecoration: 'none' }}>
                  <div className="label">WhatsApp</div>
                  <div className="val">{CLINIC_INFO.whatsapp}</div>
                  <div className="sub mt-2" style={{ color: '#1B7E48' }}>
                    Fastest response
                  </div>
                </a>
                <a href={CLINIC_INFO.emailHref} className="contact-card" style={{ textDecoration: 'none' }}>
                  <div className="label">Email</div>
                  <div className="val" style={{ fontSize: 18 }}>{CLINIC_INFO.email}</div>
                  <div className="sub mt-2">Reception · Mon–Sat</div>
                </a>
                <div className="contact-card">
                  <div className="label">Hours</div>
                  <div className="val" style={{ fontSize: 18 }}>Mon – Sat</div>
                  <div className="val" style={{ fontSize: 24 }}>10:00 – 20:00</div>
                  <div className="sub mt-2">Sunday by appointment</div>
                </div>
              </div>

              <div className="mt-6">
                <div className="eyebrow mb-2">Visit the Villa</div>
                <div className="h-display" style={{ fontSize: 26, lineHeight: 1.3 }}>
                  {CLINIC_INFO.address.line1}<br />
                  {CLINIC_INFO.address.line2}<br />
                  {CLINIC_INFO.address.line3}
                </div>
                <div className="muted mt-3" style={{ fontSize: 13 }}>
                  Visitor parking on Al Thanya Road. The villa is set back from Al Wasl Road behind a
                  private wall.
                </div>
              </div>
            </div>

            <div>
              <div className="map-shell">
                <div className="map-bg"></div>
                <div style={{ position: 'absolute', inset: 24, border: '1px dashed rgba(22,24,29,0.15)', borderRadius: 3, pointerEvents: 'none' }}></div>
                <div className="map-pin">
                  <span className="map-pin-icon"></span> Utamah Villa #1049c
                </div>
                <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-muted)', letterSpacing: '0.12em' }}>
                  <span>25.14314°N</span>
                  <span>·</span>
                  <span>55.20703°E</span>
                </div>
              </div>
              <div className="flex gap-2 mt-3">
                <a className="btn btn-primary" href="#" target="_blank" rel="noopener">Open in Google Maps <Icon.external /></a>
                <a className="btn btn-ghost" href="#" target="_blank" rel="noopener">Open in Apple Maps</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quick book inline */}
      <section className="section" style={{ background: 'var(--mist)' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'center' }}>
            <div>
              <div className="eyebrow mb-2">Or, the long way round</div>
              <h2 className="h-display" style={{ fontSize: 'clamp(34px, 4vw, 52px)' }}>
                Send an enquiry and a consultant will <em className="h-script">call back.</em>
              </h2>
              <p className="muted mt-3" style={{ fontSize: 15, lineHeight: 1.7, maxWidth: 480 }}>
                We collect the minimum needed — name, contact, and the area you'd like to discuss.
                Medical history is taken at consultation, not online.
              </p>
            </div>
            <div>
              <button className="btn btn-primary btn-lg" onClick={() => go({ page: 'book' })} style={{ width: '100%', justifyContent: 'space-between' }}>
                Open the consultation form <Icon.arrowLg className="btn-icon-arrow" />
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BeforeAfter, About, Contact });