// Section components for the Nova Clinic homepage.
// Loaded after data.js — pulls from window.NOVA.

const { useState, useEffect, useRef, useMemo } = React;
const { TREATMENT_AREAS, CONCERNS, WELLNESS, DOCTORS, BRANCHES, WHATSAPP, EMAIL } = window.NOVA;

// ---- Tiny SVG icons (no external libs, no emoji) ----
const Icon = {
  arrow: (p) => <svg width="14" height="14" viewBox="0 0 14 14" fill="none" {...p}><path d="M1 7h12M8 2l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  whatsapp: (p) => <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}><path d="M19.05 4.91A10.05 10.05 0 0012 2C6.49 2 2 6.49 2 12c0 1.76.46 3.48 1.34 5L2 22l5.13-1.34A9.95 9.95 0 0012 22c5.51 0 10-4.49 10-10 0-2.67-1.04-5.18-2.95-7.09zM12 20.13c-1.55 0-3.07-.42-4.4-1.21l-.32-.19-3.04.8.81-2.96-.21-.32A8.13 8.13 0 013.87 12 8.14 8.14 0 0112 3.87a8.1 8.1 0 015.76 2.38A8.14 8.14 0 0120.13 12c0 4.48-3.65 8.13-8.13 8.13zm4.45-6.09c-.24-.12-1.44-.71-1.67-.79-.22-.08-.39-.12-.55.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.03-.38-1.96-1.21-.72-.65-1.21-1.45-1.35-1.69-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.55-1.32-.75-1.81-.2-.48-.4-.41-.55-.42h-.47c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.16 1.69 2.59 4.11 3.63.57.25 1.02.4 1.37.51.58.18 1.1.16 1.52.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28z"/></svg>,
  phone: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z" stroke="currentColor" strokeWidth="1.4"/></svg>,
  globe: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.4"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20" stroke="currentColor" strokeWidth="1.4"/></svg>,
  plus: (p) => <svg width="12" height="12" viewBox="0 0 12 12" fill="none" {...p}><path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.4"/></svg>,
  lock: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><rect x="3" y="11" width="18" height="11" rx="2" stroke="currentColor" strokeWidth="1.4"/><path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" strokeWidth="1.4"/></svg>,
  check: (p) => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" {...p}><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
};

// ============ Nova wordmark ============
function NovaMark({ size = 28, dark = false }) {
  // Original typographic mark — Fraunces caps with a hairline rule. Not the live site's wordmark.
  const c = dark ? 'var(--paper)' : 'var(--ink)';
  return (
    <a href="#top" aria-label="The Nova Clinic — home" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 10, color: c }} data-comment-anchor="nav-logo">
      <span className="serif" style={{ fontSize: size, lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>Nova</span>
      <span style={{ width: 16, height: 1, background: 'currentColor', opacity: 0.4, transform: 'translateY(-6px)' }}></span>
      <span className="mono-label" style={{ opacity: 0.6, transform: 'translateY(-2px)' }}>Clinic, Dubai</span>
    </a>
  );
}

// ============ NAV ============
function TopBar({ locale, setLocale }) {
  return (
    <div style={{ background: 'var(--ink)', color: 'var(--paper)', fontSize: 12, letterSpacing: '0.02em' }} data-screen-label="01 Top bar">
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 38 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, opacity: 0.85 }}>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}><span style={{ width: 6, height: 6, borderRadius: 99, background: 'var(--brass)' }}></span>Where aesthetics meets holistic wellness</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <a href={WHATSAPP} target="_blank" rel="noopener" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, opacity: 0.85 }}><Icon.whatsapp /> +971 58 585 7688</a>
          <span style={{ opacity: 0.3 }}>·</span>
          <a href={`mailto:${EMAIL}`} style={{ opacity: 0.85 }}>{EMAIL}</a>
          <span style={{ opacity: 0.3 }}>·</span>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, opacity: 0.85 }}>
            <Icon.globe />
            {['EN','AR','RU','ZH'].map((l, i) => (
              <button key={l} onClick={() => setLocale(l)} style={{ opacity: locale === l ? 1 : 0.55, fontWeight: locale === l ? 600 : 400 }}>{l}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function MainNav({ onBook, openMega, setOpenMega }) {
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: 'var(--paper)', borderBottom: '1px solid var(--line-soft)' }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 78, position: 'relative' }}>
        <NovaMark />
        <div style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14, fontWeight: 500 }}>
          <button onMouseEnter={() => setOpenMega('treatments')} onMouseLeave={() => setOpenMega(null)} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 0' }}>
            Treatments <span style={{ fontSize: 10, opacity: 0.6 }}>▾</span>
          </button>
          <a href="#wellness">Wellness</a>
          <a href="#doctors">Doctors</a>
          <a href="#before-after">Results</a>
          <a href="#locations">Locations</a>
          <a href="#about">About</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a href={`tel:${BRANCHES[0].phoneRaw}`} className="btn btn-ghost" style={{ padding: '10px 16px', display: 'none' }}><Icon.phone /> Call</a>
          <button onClick={onBook} className="btn btn-primary" style={{ padding: '12px 20px' }}>
            Book a consultation <span className="arrow"><Icon.arrow /></span>
          </button>
        </div>
        <TreatmentsMega open={openMega === 'treatments'} setOpenMega={setOpenMega} />
      </div>
    </nav>
  );
}

function TreatmentsMega({ open, setOpenMega }) {
  return (
    <div className={'mega ' + (open ? 'open' : '')} onMouseEnter={() => setOpenMega('treatments')} onMouseLeave={() => setOpenMega(null)}>
      <div className="container" style={{ padding: '40px 32px 48px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 48 }}>
          <div>
            <div className="mono-label" style={{ color: 'var(--muted)', marginBottom: 18 }}>By treatment area</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
              {TREATMENT_AREAS.map(a => (
                <a key={a.id} href={`#area-${a.id}`} className="group" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 0', borderBottom: '1px solid var(--line-soft)' }}>
                  <span className="serif" style={{ fontSize: 19 }}>{a.label}</span>
                  <span className="arrow" style={{ color: 'var(--muted)' }}><Icon.arrow /></span>
                </a>
              ))}
            </div>
          </div>
          <div>
            <div className="mono-label" style={{ color: 'var(--muted)', marginBottom: 18 }}>By concern</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {CONCERNS.slice(0, 6).map(c => (
                <a key={c} href="#treatments" style={{ fontSize: 14, color: 'var(--ink-soft)' }}>· {c}</a>
              ))}
            </div>
          </div>
          <div style={{ background: 'var(--sage-tint)', padding: 24, borderRadius: 4 }}>
            <div className="mono-label" style={{ color: 'var(--sage-deep)', marginBottom: 10 }}>Differentiator</div>
            <h4 className="serif" style={{ fontSize: 22, lineHeight: 1.15, margin: '0 0 10px', color: 'var(--sage-deep)' }}>Wellness &amp; Longevity</h4>
            <p style={{ fontSize: 13, color: 'var(--ink-soft)', margin: '0 0 14px' }}>IV therapy, NAD+, peptides, regenerative work and functional diagnostics — delivered alongside aesthetic care.</p>
            <a href="#wellness" className="group" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, color: 'var(--sage-deep)', fontWeight: 500, fontSize: 13 }}>Explore wellness <span className="arrow"><Icon.arrow /></span></a>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ HERO ============
function Hero({ onBook }) {
  return (
    <section style={{ background: 'var(--paper)', position: 'relative', overflow: 'hidden' }} data-screen-label="02 Hero">
      <div className="container" style={{ padding: '72px 32px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'end' }}>
          <div className="fade-up">
            <div className="mono-label" style={{ color: 'var(--sage-deep)', marginBottom: 24, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 1, background: 'var(--sage)' }}></span>
              Doctor-led · Three branches · Dubai
            </div>
            <h1 className="serif" style={{ fontSize: 'clamp(48px, 6vw, 88px)', lineHeight: 0.98, fontWeight: 300, margin: '0 0 28px', letterSpacing: '-0.025em' }}>
              Aesthetic care,<br/>
              <span style={{ fontStyle: 'italic', fontWeight: 400 }}>quieter</span> than the&nbsp;industry<br/>
              that surrounds it.
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 540, margin: '0 0 36px' }}>
              A clinic group founded by a plastic surgeon, run as a consultation-first practice. Aesthetics,
              cosmetic surgery and a serious wellness arm — under one DHA-licensed roof, across three Dubai addresses.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button onClick={onBook} className="btn btn-primary">Book a consultation <span className="arrow"><Icon.arrow /></span></button>
              <a href={WHATSAPP} target="_blank" rel="noopener" className="btn btn-ghost"><Icon.whatsapp /> WhatsApp the team</a>
            </div>

            <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, paddingTop: 32, borderTop: '1px solid var(--line-soft)' }}>
              <Stat top="Since 1998" label="Founder practising in Dubai" hint="Aesthetics Intl. est. 2011 · Nova ~2017" />
              <Stat top="3 branches" label="Al Wasl · The Palm · Mina Al Salam" />
              <Stat top="EN · AR · RU · ZH" label="Spoken across the team" />
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <div className="img-hover" style={{ position: 'relative', aspectRatio: '4 / 5', overflow: 'hidden', borderRadius: 2 }}>
              <img src="media/branch-al-wasl.webp" alt="Nova Clinic reception" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              <div style={{ position: 'absolute', top: 20, left: 20, padding: '6px 12px', background: 'rgba(251,250,246,0.9)', backdropFilter: 'blur(6px)', borderRadius: 99, fontSize: 11, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
                <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 99, background: 'var(--sage)', marginRight: 6 }}></span>
                Al Wasl · Flagship
              </div>
            </div>
            {/* Floating qualitative review card — no number, qualitative only per compliance */}
            <div style={{ position: 'absolute', bottom: -32, left: -32, background: 'var(--paper)', padding: '20px 24px', maxWidth: 280, boxShadow: '0 24px 48px -16px rgba(0,0,0,0.12)', border: '1px solid var(--line-soft)' }}>
              <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 8 }}>From a recent consult</div>
              <p className="editorial" style={{ fontSize: 17, lineHeight: 1.4, margin: 0, color: 'var(--ink)' }}>
                &ldquo;She talked me out of two things and into one. Honest, calm, no upsell.&rdquo;
              </p>
              <div style={{ marginTop: 10, fontSize: 12, color: 'var(--muted)' }}>Anonymised. Published with consent.</div>
            </div>
          </div>
        </div>
      </div>

      {/* Marquee strip of treatment areas */}
      <div style={{ borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)', background: 'var(--paper-warm)', overflow: 'hidden', padding: '16px 0' }}>
        <div style={{ display: 'flex', gap: 48, animation: 'scroll 40s linear infinite', whiteSpace: 'nowrap' }}>
          {[...Array(2)].map((_, i) => (
            <div key={i} style={{ display: 'flex', gap: 48, paddingRight: 48 }}>
              {['Rhinoplasty','HydraFacial','Morpheus8 Pro','CoolSculpting','HIFU','PRP Hair','NAD+ Therapy','Exosomes','BBL','MOXI Laser','IV Drip','Functional Testing','Microneedling','Brow Lamination'].map(t => (
                <span key={t} className="editorial" style={{ fontSize: 22, color: 'var(--ink-soft)' }}>{t} <span style={{ color: 'var(--brass)', marginLeft: 32 }}>✦</span></span>
              ))}
            </div>
          ))}
        </div>
        <style>{`@keyframes scroll { from { transform: translateX(0) } to { transform: translateX(-50%) } }`}</style>
      </div>
    </section>
  );
}

function Stat({ top, label, hint }) {
  return (
    <div>
      <div className="serif" style={{ fontSize: 24, fontWeight: 400, lineHeight: 1.1, marginBottom: 4 }}>{top}</div>
      <div style={{ fontSize: 13, color: 'var(--ink-soft)', lineHeight: 1.35 }}>{label}</div>
      {hint && <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4, fontStyle: 'italic' }}>{hint}</div>}
    </div>
  );
}

window.NovaSections1 = { NovaMark, TopBar, MainNav, Hero, Icon };
