// Home page

function Home({ go }) {
  const t = useContext(TweaksCtx);
  const heroStyle = t.hero;

  return (
    <div className="page-anim">
      {/* HERO */}
      {heroStyle === 'editorial' ? (
        <section className="hero">
          <div className="container">
            <div className="hero-editorial">
              <div className="hero-text">
                <div className="hero-eyebrow">Surgeon-led · Since 2011 · Jumeirah</div>
                <h1>
                  Considered <em>surgical care</em>, refined aesthetic medicine.
                </h1>
                <p className="hero-sub">
                  A consultant-led plastic surgery and aesthetics clinic in a private Jumeirah villa.
                  Comprehensive consultations, DHA-licensed practitioners, and procedures that respect
                  who you are.
                </p>
                <div className="hero-ctas">
                  <button className="btn btn-primary btn-lg" onClick={() => go({ page: 'book' })}>
                    Book a Consultation <Icon.arrow className="btn-icon-arrow" />
                  </button>
                  <button className="btn btn-ghost btn-lg" onClick={() => go({ page: 'surgeons' })}>
                    Meet the Surgeons
                  </button>
                </div>
              </div>
              <div className="hero-image-wrap">
                <img className="hero-image" src="media/clinic-feature-portrait.webp" alt="Dr Jaffer Khan in consultation" />
                <div className="hero-meta">
                  <div className="hero-meta-item">Dr Jaffer Khan</div>
                  <div className="hero-meta-item">Consultant Plastic Surgeon</div>
                </div>
              </div>
            </div>
          </div>
        </section>
      ) : (
        <section className="hero-cinematic">
          <div className="hero-cinematic-bg"></div>
          <div className="hero-cred-rail">
            <span>DHA Licensed</span>
            <span>·</span>
            <span>Since 2011</span>
          </div>
          <div className="container">
            <div style={{ maxWidth: 880 }}>
              <div className="hero-eyebrow">Surgeon-led · Since 2011 · Jumeirah</div>
              <h1 className="h-display" style={{ fontSize: 'clamp(54px, 7.2vw, 104px)' }}>
                The clinic <em>quiet authority</em> trusts.
              </h1>
              <p className="hero-sub" style={{ fontSize: 18, maxWidth: 580 }}>
                Surgical plastic surgery and aesthetic medicine, delivered by a permanent in-house team
                of DHA-licensed practitioners in a private Jumeirah villa.
              </p>
              <div className="hero-ctas">
                <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: 'surgeons' })}>
                  Meet the Surgeons
                </button>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* TRUST STRIP */}
      <section className="trust-strip">
        <div className="container">
          <div className="trust-strip-inner">
            <div className="trust-item">
              <span className="trust-item-num">14<span style={{ color: 'var(--bronze-deep)' }}>+</span></span>
              <span className="trust-item-label">Years in Jumeirah</span>
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-item-num">{DOCTORS.filter(d => d.isSurgeon).length}</span>
              <span className="trust-item-label">DHA-Licensed Surgeons</span>
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-item-num">{PROCEDURE_AREAS.length}</span>
              <span className="trust-item-label">Treatment Streams</span>
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-item-num">4.7<Icon.star style={{ marginLeft: 6, color: 'var(--bronze)', verticalAlign: 'top' }} /></span>
              <span className="trust-item-label">Rated on Google · See profile</span>
            </div>
            <div className="trust-divider"></div>
            <div className="trust-item">
              <span className="trust-item-num">Mon–Sat</span>
              <span className="trust-item-label">10:00 – 20:00 by appointment</span>
            </div>
          </div>
        </div>
      </section>

      {/* PROCEDURE AREAS */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <h2>Five streams of care, <em>one consistent team.</em></h2>
            <p>From consultant-led plastic surgery to aesthetic injectables, energy-based skin treatments, body contouring and wellness — built around the question you walk in with, not the device.</p>
          </div>
        </div>
        <div className="container" style={{ padding: 0 }}>
          <div className="area-grid">
            {PROCEDURE_AREAS.map(a => (
              <button key={a.id} className="area-card" onClick={() => go({ page: 'procedures', area: a.id })}>
                <div className="area-card-num">— {a.num}</div>
                <div className="area-card-img">
                  <img src={a.image} alt={a.title} />
                </div>
                <h3>{a.title}</h3>
                <p>{a.blurb}</p>
                <div className="area-card-foot">
                  <span>{a.surgical ? 'Surgical & Allied' : 'Non-Surgical'}</span>
                  <span className="area-card-arrow"><Icon.arrow /></span>
                </div>
              </button>
            ))}
          </div>
        </div>

        <div className="container" style={{ marginTop: 56 }}>
          <div className="flex gap-3" style={{ alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24, flexWrap: 'wrap' }}>
            <h3 className="h-display" style={{ fontSize: 28 }}>Or start with a <em className="h-script">concern</em></h3>
            <button className="btn btn-text" onClick={() => go({ page: 'procedures' })}>View full procedure catalogue <Icon.arrow className="btn-icon-arrow" /></button>
          </div>
          <div className="concern-rail">
            {CONCERNS.map(c => (
              <button key={c} className="concern-chip" onClick={() => go({ page: 'procedures' })}>
                <span className="concern-chip-dot"></span> {c}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* SURGEON FEATURE */}
      <section className="section" style={{ background: 'var(--mist)' }}>
        <div className="container">
          <div className="surgeon-feature">
            <div className="surgeon-feature-img">
              <img src="media/clinic-feature-portrait.webp" alt="Dr Jaffer Khan" />
              <div className="surgeon-feature-badge">
                <div className="label">DHA Licence</div>
                <div className="val">00180704 · verify on Sheryan</div>
              </div>
            </div>
            <div>
              <div className="eyebrow mb-2">Founder · CEO</div>
              <h3>Dr Jaffer Khan, <span className="italic text-bronze">Consultant Plastic Surgeon.</span></h3>
              <p className="muted mt-3" style={{ fontSize: 16, maxWidth: 520, lineHeight: 1.65 }}>
                In Dubai since 1998. UK-trained at St Bartholomew's and Royal London, holding the
                Joint Royal Colleges specialty fellowship in plastic surgery. Visiting professor at
                Anglia Ruskin University and lead on a Dubai-based aesthetic plastic surgery (MCh)
                training programme.
              </p>
              <div className="credentials">
                <div className="cred-item">
                  <div className="label">Training</div>
                  <div className="val">St Bartholomew's & Royal London (UK)</div>
                </div>
                <div className="cred-item">
                  <div className="label">Fellowship</div>
                  <div className="val">Joint Royal Colleges Plastic Surgery</div>
                </div>
                <div className="cred-item">
                  <div className="label">Special Interest</div>
                  <div className="val">Liposuction, Body Contouring, Face & Breast</div>
                </div>
                <div className="cred-item">
                  <div className="label">Academic</div>
                  <div className="val">Visiting Professor, Anglia Ruskin University</div>
                </div>
              </div>
              <div className="flex gap-2 mt-4">
                <button className="btn btn-primary" onClick={() => go({ page: 'surgeon', slug: 'jaffer-khan' })}>
                  View full profile <Icon.arrow className="btn-icon-arrow" />
                </button>
                <button className="btn btn-ghost" onClick={() => go({ page: 'surgeons' })}>The full team</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DEVICE STRIP */}
      <section className="device-strip">
        <div className="container">
          <div className="device-strip-inner">
            <div className="device-strip-label">Named devices in clinic</div>
            <div className="device-list">
              {DEVICES.map(d => <span key={d} className="device-name">{d}</span>)}
            </div>
          </div>
        </div>
      </section>

      {/* CLINIC INTERIOR */}
      <section className="section">
        <div className="container">
          <div className="sec-head">
            <h2>A private Jumeirah villa, <em>treated like a clinic.</em></h2>
            <p>Five treatment suites and a dedicated surgical area inside Utamah Villa #1049c, Al Wasl Road. Calm, discreet and built for patient privacy.</p>
          </div>
          <div className="grid" style={{ gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
            <div style={{ gridColumn: 'span 4', height: 420, borderRadius: 3, overflow: 'hidden', background: 'var(--mist)' }}>
              <img src="media/clinic-interior-2.webp" alt="Clinic lounge" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ gridColumn: 'span 2', height: 420, borderRadius: 3, overflow: 'hidden', background: 'var(--mist)' }}>
              <img src="media/clinic-interior-1.webp" alt="Reception" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ gridColumn: 'span 2', height: 320, borderRadius: 3, overflow: 'hidden', background: 'var(--mist)' }}>
              <img src="media/clinic-interior-3.webp" alt="Consult room" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ gridColumn: 'span 2', height: 320, borderRadius: 3, overflow: 'hidden', background: 'var(--mist)' }}>
              <img src="media/clinic-interior-4.webp" alt="Treatment room" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
            <div style={{ gridColumn: 'span 2', height: 320, borderRadius: 3, overflow: 'hidden', background: 'var(--mist)' }}>
              <img src="media/clinic-interior-5.webp" alt="Aesthetic treatment suite" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
            </div>
          </div>
        </div>
      </section>

      {/* DOCTORS */}
      <section className="section" style={{ background: 'var(--mist)' }}>
        <div className="container">
          <div className="sec-head">
            <h2>A permanent team, <em>not a rotating roster.</em></h2>
            <p>Plastic surgeons, aesthetic physicians and clinical therapists who work together day-to-day. Every name below is published with credentials, not marketing.</p>
          </div>
          <div className="doctor-grid">
            {DOCTORS.slice(0, 4).map(d => (
              <button key={d.slug} className="doctor-card" onClick={() => go({ page: 'surgeon', slug: d.slug })}>
                <div className="doctor-card-img"><img src={d.image} alt={d.name} /></div>
                <div className="doctor-card-body">
                  <h4>{d.name}</h4>
                  <div className="role">{d.role}</div>
                  <div className="dha">{d.dha}</div>
                </div>
              </button>
            ))}
          </div>
          <div className="flex center mt-6" style={{ justifyContent: 'center' }}>
            <button className="btn btn-ghost btn-lg" onClick={() => go({ page: 'surgeons' })}>
              See the full clinical team <Icon.arrow className="btn-icon-arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* PRESS BAND */}
      <section className="press-band">
        <div className="container">
          <div className="press-inner">
            <span className="press-label">As referenced in</span>
            <span className="press-name">Grazia ME</span>
            <span className="press-name">Quintessentially</span>
            <span className="press-name">aesthetics.today</span>
            <span style={{ fontSize: 11, color: 'var(--ink-muted)', letterSpacing: '0.08em', maxWidth: 220 }}>Editorial mentions — not awards. Cited with attribution.</span>
          </div>
        </div>
      </section>

      {/* CONSULTATION CTA */}
      <section className="section" style={{ background: 'var(--ink)', color: 'var(--porcelain)' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--bronze)' }}>The Consultation</div>
              <h2 className="h-display mt-3" style={{ fontSize: 'clamp(34px, 4vw, 52px)', color: 'var(--porcelain)' }}>
                Forty-five minutes with a <em className="h-script" style={{ color: 'var(--bronze)' }}>consultant</em>, not a sales pitch.
              </h2>
              <p className="mt-3" style={{ fontSize: 15, color: 'rgba(251,250,248,0.7)', lineHeight: 1.7, maxWidth: 520 }}>
                Bring the question you've been quietly thinking about. We discuss candidacy, alternatives,
                realistic outcomes and risk — and only proceed if the right answer is yes.
              </p>
              <div className="flex gap-2 mt-4" style={{ flexWrap: 'wrap' }}>
                <button className="btn btn-bronze btn-lg" onClick={() => go({ page: 'book' })}>
                  Book a Consultation <Icon.arrow className="btn-icon-arrow" />
                </button>
                <a className="btn btn-ghost btn-lg" style={{ color: 'var(--porcelain)', borderColor: 'rgba(255,255,255,0.3)' }} href={CLINIC_INFO.whatsappHref} target="_blank" rel="noopener">
                  Message on WhatsApp
                </a>
              </div>
            </div>
            <div style={{
              border: '1px solid rgba(255,255,255,0.15)',
              padding: 36,
              borderRadius: 4,
              background: 'rgba(255,255,255,0.03)'
            }}>
              <div style={{ display: 'grid', gap: 24 }}>
                {[
                  { n: '01', t: 'Tell us briefly', d: 'Name, contact, and the area or treatment you\'d like to discuss. No medical history collected here — that happens with the consultant.' },
                  { n: '02', t: 'A consultant calls back', d: 'Within one business day. We confirm the right practitioner for your enquiry and offer dates.' },
                  { n: '03', t: 'Meet in clinic', d: 'A 45-minute paid consultation in Utamah Villa. Candidacy, plan, recovery and risks discussed in full.' }
                ].map(s => (
                  <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '60px 1fr', gap: 20 }}>
                    <div className="font-display italic" style={{ color: 'var(--bronze)', fontSize: 28 }}>{s.n}</div>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1.2, marginBottom: 6 }}>{s.t}</div>
                      <div style={{ fontSize: 13, color: 'rgba(251,250,248,0.65)', lineHeight: 1.6 }}>{s.d}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PATIENT STORY — before/after sample (consent-cleared, single composite) */}
      <section className="section">
        <div className="container">
          <div style={{
            background: 'var(--mist)',
            borderRadius: 4,
            padding: '64px 56px',
            maxWidth: 1200,
            margin: '0 auto'
          }}>
            {/* Text above */}
            <div style={{ textAlign: 'center', marginBottom: 40, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>
              <div className="eyebrow mb-2">Patient Story · Consent-cleared</div>
              <h2 className="h-display" style={{ fontSize: 'clamp(32px, 3.6vw, 46px)', lineHeight: 1.1 }}>
                A single, sample pair — <em className="h-script">shown with permission.</em>
              </h2>
              <p className="muted mt-3" style={{ fontSize: 15, lineHeight: 1.65, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
                Published only with full patient consent and in DHA/MOH-compliant language. Outcomes
                are individual — what's shown is a specific patient's result, never a guarantee of
                yours.
              </p>
            </div>

            {/* Image at 80% of card width */}
            <div style={{
              width: '80%',
              margin: '0 auto',
              background: '#000',
              borderRadius: 3,
              overflow: 'hidden',
              boxShadow: 'var(--shadow-md)'
            }}>
              <img
                src="media/clinic-band-2.webp"
                alt="Submental contouring — before and after, consent-cleared"
                style={{ width: '100%', height: 'auto', display: 'block' }}
              />
            </div>

            {/* Caption below */}
            <div style={{
              width: '80%',
              margin: '24px auto 0',
              display: 'grid',
              gridTemplateColumns: '1fr 1fr 1.2fr',
              gap: 28,
              alignItems: 'start',
              paddingTop: 24,
              borderTop: '1px solid var(--line)'
            }}>
              <div>
                <div className="eyebrow text-bronze mb-1">Treatment</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.2 }}>Submental Contouring</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>Non-surgical · CoolSculpting protocol</div>
              </div>
              <div>
                <div className="eyebrow text-bronze mb-1">Care Team</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, lineHeight: 1.2 }}>Consultant-supervised</div>
                <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>DHA-licensed practitioner</div>
              </div>
              <div className="flex gap-2" style={{ alignItems: 'flex-start' }}>
                <Icon.shield className="text-bronze" style={{ flexShrink: 0, marginTop: 2 }} />
                <div className="muted" style={{ fontSize: 12, lineHeight: 1.55 }}>
                  Individual result. Outcomes vary by anatomy and candidacy. Multiple sessions may
                  be required. Not a guarantee of any specific outcome.
                </div>
              </div>
            </div>

            <div style={{ textAlign: 'center', marginTop: 36 }}>
              <button className="btn btn-ghost" onClick={() => go({ page: 'before-after' })}>
                See the full consent-gated gallery <Icon.arrow className="btn-icon-arrow" />
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home });