// Sections part 3 — Before&After consent gate, Locations, Booking flow, About, Footer.
const { Icon: Icon3 } = window.NovaSections1;

// ============ BEFORE & AFTER — consent-gated placeholder ============
function BeforeAfterBlock() {
  const [unlocked, setUnlocked] = React.useState(false);
  return (
    <section id="before-after" data-screen-label="06 Before & After" style={{ background: 'var(--paper)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 14 }}>— Results, on our terms</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)', lineHeight: 1.02, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              A before &amp; after gallery, only when <span style={{ fontStyle: 'italic', color: 'var(--sage-deep)' }}>consent allows.</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 24, maxWidth: 480, lineHeight: 1.6 }}>
              Outcome photography is held back until patients have consented in writing and the imagery
              clears DHA / MOHAP advertising review. We won't republish historical clinic photos that
              weren't captured under the current consent framework.
            </p>
            <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14 }}>
              <Bullet>Written patient consent on file before publication.</Bullet>
              <Bullet>Identical lighting, distance, expression — no retouching.</Bullet>
              <Bullet>Procedure, recovery window and practitioner attributed.</Bullet>
              <Bullet>Outcomes presented as examples, never as guarantees.</Bullet>
            </div>
          </div>

          <div style={{ position: 'relative', aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--mist)' }}>
            {/* Locked split */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: '100%', filter: unlocked ? 'none' : 'blur(18px) grayscale(0.3)', transition: 'filter .6s' }}>
              <div className="img-ph" data-label="Before / consented" style={{ height: '100%' }}></div>
              <div className="img-ph" data-label="After / consented" style={{ height: '100%' }}></div>
            </div>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column', gap: 16, background: unlocked ? 'transparent' : 'rgba(251,250,246,0.7)', backdropFilter: unlocked ? 'none' : 'blur(2px)', transition: 'all .4s', pointerEvents: unlocked ? 'none' : 'auto' }}>
              {!unlocked && (
                <>
                  <div style={{ width: 56, height: 56, borderRadius: 99, background: 'var(--ink)', color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon3.lock /></div>
                  <div style={{ textAlign: 'center', maxWidth: 360 }}>
                    <div className="serif" style={{ fontSize: 22, fontWeight: 400, marginBottom: 6 }}>Consent-gated gallery</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-soft)' }}>To view consented before / after imagery, confirm you understand outcomes vary and are not guaranteed.</div>
                  </div>
                  <button onClick={() => setUnlocked(true)} className="btn btn-sage">I understand — show gallery</button>
                </>
              )}
            </div>

            {/* "consented" badges when unlocked */}
            {unlocked && (
              <>
                <div style={{ position: 'absolute', top: 16, left: 16, padding: '6px 12px', background: 'rgba(26,31,36,0.85)', color: 'var(--paper)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Before · consented</div>
                <div style={{ position: 'absolute', top: 16, right: 16, padding: '6px 12px', background: 'rgba(26,31,36,0.85)', color: 'var(--paper)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase' }}>After · 12 weeks</div>
                <div style={{ position: 'absolute', bottom: 16, left: 16, right: 16, padding: '10px 14px', background: 'rgba(251,250,246,0.92)', fontSize: 12, color: 'var(--ink)', display: 'flex', justifyContent: 'space-between' }}>
                  <span>Rhinoplasty · Dr Jaffer Khan</span>
                  <span style={{ color: 'var(--muted)' }}>Example outcome · not a guarantee</span>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function Bullet({ children }) {
  return (
    <div style={{ display: 'flex', gap: 12, alignItems: 'start' }}>
      <span style={{ width: 18, height: 18, borderRadius: 99, background: 'var(--sage-tint)', color: 'var(--sage-deep)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}><Icon3.check /></span>
      <span style={{ color: 'var(--ink-soft)' }}>{children}</span>
    </div>
  );
}

// ============ LOCATIONS ============
function LocationsBlock() {
  const [active, setActive] = React.useState(BRANCHES[0].id);
  const b = BRANCHES.find(x => x.id === active);
  return (
    <section id="locations" data-screen-label="07 Locations" style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '140px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 560 }}>
            <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 14 }}>— Three branches in Dubai</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              Find us along the <span style={{ fontStyle: 'italic' }}>coast.</span>
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,0.08)', padding: 4, borderRadius: 999 }}>
            {BRANCHES.map(br => (
              <button key={br.id} onClick={() => setActive(br.id)} style={{
                padding: '10px 18px',
                fontSize: 13, fontWeight: 500,
                borderRadius: 999,
                background: active === br.id ? 'var(--paper)' : 'transparent',
                color: active === br.id ? 'var(--ink)' : 'var(--paper)',
                transition: 'all .25s',
              }}>{br.name}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
          <div className="img-hover" style={{ aspectRatio: '5 / 4', overflow: 'hidden', position: 'relative' }}>
            <img src={b.img} alt={b.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} key={b.id} />
            {/* simulated map dot in corner */}
            <div style={{ position: 'absolute', bottom: 20, left: 20, padding: '8px 12px', background: 'rgba(251,250,246,0.92)', color: 'var(--ink)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600 }}>
              {b.short}
            </div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h3 className="serif" style={{ fontSize: 48, fontWeight: 300, margin: '0 0 8px', letterSpacing: '-0.02em' }}>{b.name}</h3>
            <div className="editorial" style={{ fontSize: 18, color: 'var(--brass)', marginBottom: 32 }}>{b.short}</div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 32 }}>
              <DataRow label="Address" value={b.address} />
              <DataRow label="Hours" value={b.hours} multiline />
              <DataRow label="Telephone" value={<a href={`tel:${b.phoneRaw}`} style={{ borderBottom: '1px solid rgba(255,255,255,0.3)' }}>{b.phone}</a>} />
              <DataRow label="WhatsApp" value={<a href={WHATSAPP} target="_blank" rel="noopener" style={{ borderBottom: '1px solid rgba(255,255,255,0.3)' }}>+971 58 585 7688</a>} />
            </div>

            <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.75)', lineHeight: 1.6, marginBottom: 32, maxWidth: 480 }}>{b.note}</p>

            <div style={{ display: 'flex', gap: 12 }}>
              <a href={`tel:${b.phoneRaw}`} className="btn" style={{ background: 'var(--brass)', color: 'var(--ink)' }}><Icon3.phone /> Call this branch</a>
              <a href="#booking" className="btn" style={{ border: '1px solid rgba(255,255,255,0.3)', color: 'var(--paper)' }}>Book here <span className="arrow"><Icon3.arrow /></span></a>
            </div>
          </div>
        </div>

        {/* compliance + licence block */}
        <div style={{ marginTop: 72, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, fontSize: 12, color: 'rgba(255,255,255,0.7)' }}>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 8 }}>Licensing</div>
            DHA-licensed clinic facility. MOHAP advertising permit on file. Per-doctor DHA licence numbers visible on doctor profiles.
          </div>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 8 }}>Group lineage</div>
            The Nova Clinic by Aesthetics opened ~2017. Sister to Aesthetics International (est. 2011, Dubai), founded by Dr Jaffer Khan.
          </div>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 8 }}>Compliance</div>
            We do not publish guaranteed outcomes, pricing, or unverified aggregate review scores. All consultations are doctor-led.
          </div>
        </div>
      </div>
    </section>
  );
}

function DataRow({ label, value, multiline }) {
  return (
    <div>
      <div className="mono-label" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 6 }}>{label}</div>
      <div style={{ fontSize: 14, lineHeight: 1.55, whiteSpace: multiline ? 'pre-line' : 'normal' }}>{value}</div>
    </div>
  );
}

// ============ BOOKING — multi-step form ============
function BookingBlock({ openSignal }) {
  const [step, setStep] = React.useState(1);
  const [data, setData] = React.useState({
    treatment: '',
    branch: BRANCHES[0].id,
    name: '',
    email: '',
    phone: '',
    notes: '',
    contactMode: 'whatsapp',
  });
  const formRef = React.useRef(null);

  React.useEffect(() => {
    if (openSignal > 0) {
      formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }, [openSignal]);

  const update = (k, v) => setData(d => ({ ...d, [k]: v }));
  const next = () => setStep(s => Math.min(4, s + 1));
  const prev = () => setStep(s => Math.max(1, s - 1));

  const TREATMENT_OPTIONS = [
    'Aesthetic consultation', 'Plastic surgery enquiry', 'Wellness / longevity', 'Diagnostics & functional testing', 'Not sure yet'
  ];

  return (
    <section id="booking" ref={formRef} data-screen-label="08 Booking" style={{ background: 'var(--paper-warm)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 110 }}>
            <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 14 }}>— Book a consultation</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 54px)', lineHeight: 1.02, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              The first step is a <span style={{ fontStyle: 'italic', color: 'var(--sage-deep)' }}>conversation,</span> not a procedure.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 24, lineHeight: 1.6, maxWidth: 420 }}>
              A team member will respond within one business day. We keep this form minimal — please share
              clinical detail only at the in-person consultation.
            </p>

            <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
              <div className="mono-label" style={{ color: 'var(--muted)', marginBottom: 14 }}>Prefer to speak to us directly?</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                <a href={WHATSAPP} target="_blank" rel="noopener" className="btn btn-sage" style={{ justifyContent: 'space-between', width: '100%' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}><Icon3.whatsapp /> WhatsApp +971 58 585 7688</span><span className="arrow"><Icon3.arrow /></span></a>
                <a href="tel:+97143845666" className="btn btn-ghost" style={{ justifyContent: 'space-between', width: '100%' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}><Icon3.phone /> Call Al Wasl flagship</span><span style={{ color: 'var(--muted)' }}>+971 4 384 5666</span></a>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--paper)', padding: 48, border: '1px solid var(--line-soft)' }}>
            {/* progress */}
            <div style={{ display: 'flex', gap: 12, marginBottom: 40 }}>
              {[1,2,3,4].map(i => (
                <div key={i} style={{ flex: 1, height: 2, background: i <= step ? 'var(--sage)' : 'var(--line)', transition: 'background .3s' }}></div>
              ))}
            </div>
            <div className="mono-label" style={{ color: 'var(--muted)', marginBottom: 8 }}>Step {step} / 4 {step === 4 && '· Confirmation'}</div>

            {step === 1 && (
              <div className="fade-up">
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, margin: '0 0 28px' }}>What are you considering?</h3>
                <div style={{ display: 'grid', gap: 10 }}>
                  {TREATMENT_OPTIONS.map(t => (
                    <button key={t} onClick={() => { update('treatment', t); next(); }} style={{
                      padding: '18px 20px',
                      textAlign: 'left',
                      border: '1px solid ' + (data.treatment === t ? 'var(--ink)' : 'var(--line)'),
                      background: data.treatment === t ? 'var(--ink)' : 'transparent',
                      color: data.treatment === t ? 'var(--paper)' : 'var(--ink)',
                      fontSize: 15, fontWeight: 500,
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      transition: 'all .2s',
                    }}>{t} <span className="arrow"><Icon3.arrow /></span></button>
                  ))}
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="fade-up">
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, margin: '0 0 28px' }}>Which branch suits you?</h3>
                <div style={{ display: 'grid', gap: 10 }}>
                  {BRANCHES.map(br => (
                    <button key={br.id} onClick={() => { update('branch', br.id); next(); }} style={{
                      padding: '18px 20px',
                      textAlign: 'left',
                      border: '1px solid ' + (data.branch === br.id ? 'var(--ink)' : 'var(--line)'),
                      background: data.branch === br.id ? 'var(--ink)' : 'transparent',
                      color: data.branch === br.id ? 'var(--paper)' : 'var(--ink)',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                      transition: 'all .2s',
                    }}>
                      <span>
                        <span className="serif" style={{ fontSize: 19, display: 'block', lineHeight: 1.2 }}>{br.name}</span>
                        <span style={{ fontSize: 12, opacity: 0.7 }}>{br.short}</span>
                      </span>
                      <span className="arrow"><Icon3.arrow /></span>
                    </button>
                  ))}
                </div>
                <div style={{ marginTop: 24 }}><BackBtn onClick={prev} /></div>
              </div>
            )}

            {step === 3 && (
              <div className="fade-up">
                <h3 className="serif" style={{ fontSize: 28, fontWeight: 400, margin: '0 0 28px' }}>How can we reach you?</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 24 }}>
                  <div>
                    <label>Full name</label>
                    <input type="text" value={data.name} onChange={e => update('name', e.target.value)} placeholder="Your name" />
                  </div>
                  <div>
                    <label>Phone</label>
                    <input type="tel" value={data.phone} onChange={e => update('phone', e.target.value)} placeholder="+971 ..." />
                  </div>
                  <div style={{ gridColumn: 'span 2' }}>
                    <label>Email</label>
                    <input type="email" value={data.email} onChange={e => update('email', e.target.value)} placeholder="you@example.com" />
                  </div>
                  <div style={{ gridColumn: 'span 2' }}>
                    <label>A short note (optional)</label>
                    <textarea rows="3" value={data.notes} onChange={e => update('notes', e.target.value)} placeholder="A timeframe, time-of-day preference, or who suggested you contact us. Please keep clinical detail for the consultation." style={{ resize: 'none', borderBottom: '1px solid var(--line)' }}></textarea>
                  </div>
                </div>

                <div style={{ marginBottom: 24 }}>
                  <label>Preferred contact</label>
                  <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
                    {[['whatsapp','WhatsApp'],['call','A phone call'],['email','Email']].map(([v,l]) => (
                      <button key={v} onClick={() => update('contactMode', v)} style={{
                        padding: '8px 16px',
                        border: '1px solid ' + (data.contactMode === v ? 'var(--sage)' : 'var(--line)'),
                        background: data.contactMode === v ? 'var(--sage-tint)' : 'transparent',
                        color: data.contactMode === v ? 'var(--sage-deep)' : 'var(--ink-soft)',
                        fontSize: 13, fontWeight: 500,
                        borderRadius: 999,
                      }}>{l}</button>
                    ))}
                  </div>
                </div>

                <div style={{ padding: '12px 14px', background: 'var(--mist)', fontSize: 12, color: 'var(--ink-soft)', marginBottom: 24, lineHeight: 1.5 }}>
                  We collect contact details and treatment interest only. No medical history is stored through this form.
                </div>

                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                  <BackBtn onClick={prev} />
                  <button onClick={next} disabled={!data.name || !data.email} className="btn btn-primary" style={{ opacity: (!data.name || !data.email) ? 0.4 : 1 }}>Send request <span className="arrow"><Icon3.arrow /></span></button>
                </div>
              </div>
            )}

            {step === 4 && (
              <div className="fade-up" style={{ textAlign: 'center', padding: '32px 0' }}>
                <div style={{ width: 64, height: 64, borderRadius: 99, background: 'var(--sage-tint)', color: 'var(--sage-deep)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}><Icon3.check /></div>
                <h3 className="serif" style={{ fontSize: 32, fontWeight: 400, margin: '0 0 12px' }}>Thank you, {data.name.split(' ')[0] || 'we have it'}.</h3>
                <p style={{ fontSize: 16, color: 'var(--ink-soft)', margin: '0 auto 24px', maxWidth: 400, lineHeight: 1.6 }}>
                  A team member from <strong>{BRANCHES.find(b => b.id === data.branch).name}</strong> will reach out via {data.contactMode === 'whatsapp' ? 'WhatsApp' : data.contactMode === 'call' ? 'phone' : 'email'} within one business day to suggest consultation times.
                </p>
                <a href={WHATSAPP} target="_blank" rel="noopener" className="btn btn-sage">Continue on WhatsApp <span className="arrow"><Icon3.arrow /></span></a>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function BackBtn({ onClick }) {
  return <button onClick={onClick} style={{ fontSize: 13, color: 'var(--muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>← Back</button>;
}

// ============ ABOUT / FOUNDER ============
function AboutBlock() {
  return (
    <section id="about" data-screen-label="09 About" style={{ background: 'var(--paper)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'center' }}>
          <div className="img-hover" style={{ aspectRatio: '4 / 3', overflow: 'hidden' }}>
            <img src="media/clinic-consultation.webp" alt="Consultation in progress" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 14 }}>— About the group</div>
            <h2 className="serif" style={{ fontSize: 'clamp(34px, 4vw, 52px)', lineHeight: 1.02, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              A surgeon's clinic, expanded with <span style={{ fontStyle: 'italic' }}>wellness</span> in mind.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 24, lineHeight: 1.7 }}>
              Aesthetics International was founded in Dubai in 2011 by Dr Jaffer Khan — a consultant plastic
              surgeon practising in the region since 1998. The Nova Clinic opened around 2017 as the
              group's expansion brand: aesthetic medicine, surgery, and an increasingly serious wellness
              and longevity offer, run out of three locations.
            </p>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
              <div>
                <div className="serif" style={{ fontSize: 32, fontWeight: 300 }}>2011</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>Aesthetics International founded</div>
              </div>
              <div>
                <div className="serif" style={{ fontSize: 32, fontWeight: 300 }}>~2017</div>
                <div style={{ fontSize: 13, color: 'var(--muted)' }}>The Nova Clinic opens</div>
              </div>
            </div>
            <a href="#" className="btn btn-ghost group" style={{ marginTop: 32 }}>The full story <span className="arrow"><Icon3.arrow /></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '80px 0 32px' }} data-screen-label="10 Footer">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 56, marginBottom: 64 }}>
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10 }}>
              <span className="serif" style={{ fontSize: 32, lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>Nova</span>
              <span className="mono-label" style={{ opacity: 0.6 }}>Clinic, Dubai</span>
            </div>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.65)', marginTop: 20, maxWidth: 320, lineHeight: 1.6 }}>
              Where aesthetics meets holistic wellness. A doctor-led clinic group across three Dubai
              addresses — Al Wasl, The Palm and Mina Al Salam.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 8 }}>
              <a href={WHATSAPP} target="_blank" rel="noopener" className="btn" style={{ background: '#25D366', color: 'white' }}><Icon3.whatsapp /> WhatsApp</a>
              <a href="tel:+97143845666" className="btn" style={{ border: '1px solid rgba(255,255,255,0.18)' }}><Icon3.phone /> Call</a>
            </div>
          </div>
          <FCol title="Care">
            <FLink>Treatments</FLink>
            <FLink>Wellness &amp; Longevity</FLink>
            <FLink>By concern</FLink>
            <FLink>Packages</FLink>
          </FCol>
          <FCol title="Clinic">
            <FLink>Our doctors</FLink>
            <FLink>About the group</FLink>
            <FLink>Locations</FLink>
            <FLink>Press</FLink>
            <FLink>Careers</FLink>
          </FCol>
          <FCol title="Speak with us">
            <FLink href={WHATSAPP}>WhatsApp</FLink>
            <FLink href="tel:+97143845666">Al Wasl · +971 4 384 5666</FLink>
            <FLink href="tel:+97145263900">The Palm · +971 4 526 3900</FLink>
            <FLink href="tel:+97145527890">Mina Al Salam · +971 4 552 7890</FLink>
            <FLink href={`mailto:${EMAIL}`}>{EMAIL}</FLink>
          </FCol>
        </div>

        <div style={{ paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.12)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16, fontSize: 12, color: 'rgba(255,255,255,0.55)' }}>
          <div>© {new Date().getFullYear()} The Nova Clinic by Aesthetics · DHA-licensed · MOHAP advertising permit on file</div>
          <div style={{ display: 'flex', gap: 18 }}>
            <a href="#">Privacy</a>
            <a href="#">Patient consent</a>
            <a href="#">DHA / MOHAP compliance</a>
            <a href="#">Cookies</a>
          </div>
        </div>

        <div style={{ marginTop: 64, fontSize: 'clamp(80px, 18vw, 280px)', lineHeight: 0.8, color: 'rgba(255,255,255,0.04)', fontFamily: 'Fraunces, serif', fontWeight: 300, letterSpacing: '-0.04em', textAlign: 'center', userSelect: 'none' }}>
          NOVA
        </div>
      </div>
    </footer>
  );
}

function FCol({ title, children }) {
  return (
    <div>
      <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 18 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14, color: 'rgba(255,255,255,0.78)' }}>{children}</div>
    </div>
  );
}

function FLink({ children, href = '#' }) {
  return <a href={href} target={href.startsWith('http') ? '_blank' : undefined} rel="noopener" style={{ transition: 'color .2s' }} onMouseEnter={e => e.currentTarget.style.color = 'var(--brass)'} onMouseLeave={e => e.currentTarget.style.color = ''}>{children}</a>;
}

window.NovaSections3 = { BeforeAfterBlock, LocationsBlock, BookingBlock, AboutBlock, Footer };