/* global React, Reveal, ArchPattern, PhiMark */
const { useState: useStateHome } = React;

// =======================================================================
//  HOME PAGE
// =======================================================================

function Home({ locale, onNav, onBook, heroVariant }) {
  const ar = locale === 'ar';
  return (
    <main>
      {/* === HERO === */}
      {heroVariant === 'editorial' ? <HeroEditorial ar={ar} onBook={onBook} /> : <HeroFullBleed ar={ar} onBook={onBook} />}

      {/* === Intro statement === */}
      <section style={{ padding: '120px 0', background: 'var(--bone)', position: 'relative' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80, alignItems: 'start' }}>
          <Reveal>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              {ar ? 'دبي · أوبس بواسطة أومنيات' : 'Dubai · The Opus by Omniyat'}
            </div>
            <PhiMark size={64} />
          </Reveal>
          <Reveal delay={120}>
            <h2 className="serif" style={{ fontSize: '3.2rem', lineHeight: 1.08, color: 'var(--ink)', marginBottom: 36 }}>
              {ar
                ? 'عيادة واحدة في الخليج التجاري، ثلاث ركائز للعلاج، عشرة عملاء يومياً. لاأكثر.'
                : <>One clinic at The Opus, three pillars of treatment, <em className="ital" style={{ color: 'var(--olive)' }}>ten clients</em> a day.<br/>Never more.</>}
            </h2>
            <p style={{ fontSize: '1.05rem', lineHeight: 1.7, color: 'var(--ink-soft)', maxWidth: 620, marginBottom: 32 }}>
              {ar
                ? 'فلسفتنا بسيطة: الصحة قبل الجمال، والسلامة قبل الصيحات. كل خطة علاجية تبنى على لقاء استشاري وتصوير ثلاثي الأبعاد للبشرة وفروة الرأس.'
                : 'Health over beauty. Safety over fast-changing beauty trends. Every plan begins with a doctor-led consultation and 3D imaging of skin and scalp — not with a procedure already in mind.'}
            </p>
            <div style={{ display: 'flex', gap: 16 }}>
              <button className="btn btn-olive" onClick={onBook}>{ar ? 'احجز استشارة' : 'Begin with a consultation'}</button>
              <button className="btn btn-ghost" onClick={() => onNav('about')}>{ar ? 'فلسفتنا' : 'Our philosophy'}</button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* === Three pillars grid === */}
      <PillarsGrid ar={ar} onNav={onNav} />

      {/* === Mindful ethos strip === */}
      <EthosStrip ar={ar} />

      {/* === The Opus / Dubai location teaser === */}
      <OpusTeaser ar={ar} onNav={onNav} />

      {/* === Doctor teaser === */}
      <DoctorTeaser ar={ar} onNav={onNav} />

      {/* === Press strip === */}
      <PressStrip ar={ar} />

      {/* === Final CTA === */}
      <FinalCTA ar={ar} onBook={onBook} />
    </main>
  );
}

// === Hero variant A: Full-bleed image ===
function HeroFullBleed({ ar, onBook }) {
  return (
    <section style={{ position: 'relative', height: '92vh', minHeight: 720, overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0 }}>
        <img src="media/hero-wide-01.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(120% 90% at 0% 50%, rgba(20,19,15,0.78) 0%, rgba(20,19,15,0.6) 30%, rgba(20,19,15,0.25) 55%, rgba(20,19,15,0.05) 80%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,19,15,0.35) 0%, rgba(20,19,15,0.0) 25%, rgba(20,19,15,0.0) 60%, rgba(20,19,15,0.65) 100%)' }} />
      </div>

      {/* Architectural arc overlay echoing The Opus */}
      <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.5 }}>
        <path d="M -100 900 Q 720 -200 1540 900" fill="none" stroke="rgba(242,237,227,0.35)" strokeWidth="0.5" />
        <path d="M -100 900 Q 720 100 1540 900" fill="none" stroke="rgba(242,237,227,0.25)" strokeWidth="0.5" />
        <path d="M -100 900 Q 720 350 1540 900" fill="none" stroke="rgba(242,237,227,0.18)" strokeWidth="0.5" />
      </svg>

      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '180px 56px 60px' }}>
        <div style={{ maxWidth: 860 }}>
          <div className="eyebrow" style={{ color: '#F2EDE3', marginBottom: 28, textShadow: '0 1px 12px rgba(0,0,0,0.7)' }}>
            {ar ? 'دبي · أوبس بواسطة أومنيات · 2022' : 'Dubai · The Opus by Omniyat · Since 2022'}
          </div>
          <h1 className="serif" style={{
            fontSize: 'clamp(3.5rem, 6.5vw, 6rem)', lineHeight: 0.98, color: '#FAF7F0',
            fontWeight: 300, letterSpacing: '-0.01em', marginBottom: 36,
            textShadow: '0 2px 30px rgba(0,0,0,0.55)',
          }}>
            {ar ? (
              <>العلم والأناقة<br/><em className="ital" style={{ color: '#F2D88C' }}>في خدمة وجهك</em></>
            ) : (
              <>The science of restraint,<br/><em className="ital" style={{ color: '#F2D88C' }}>in a single face.</em></>
            )}
          </h1>
          <p style={{ color: '#F2EDE3', fontSize: '1.15rem', lineHeight: 1.55, maxWidth: 540, marginBottom: 40, textShadow: '0 1px 16px rgba(0,0,0,0.65)' }}>
            {ar
              ? 'مركز جمالیات الوجه غیر الجراحیة بقیادة الأطباء — دار جمالیات الوعي، في قلب الخلیج التجاري.'
              : 'Doctor-led, non-surgical facial aesthetics — The Home of Mindful Aesthetics, at the heart of Business Bay.'}
          </p>
          <div style={{ display: 'flex', gap: 14 }}>
            <button className="btn btn-filled" style={{ background: 'var(--bone)', color: 'var(--ink)', borderColor: 'var(--bone)' }} onClick={onBook}>
              {ar ? 'احجز استشارة' : 'Book a consultation'}
            </button>
            <a href="https://wa.me/971586858562" className="btn" style={{ color: 'var(--bone)', borderColor: 'rgba(242,237,227,0.65)', background: 'rgba(20,19,15,0.3)', backdropFilter: 'blur(4px)' }}>
              {ar ? 'واتسأب' : 'WhatsApp'}
            </a>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', color: '#F2EDE3' }}>
          <div className="mono" style={{ fontSize: '0.7rem', letterSpacing: '0.2em', textShadow: '0 1px 8px rgba(0,0,0,0.7)' }}>
            <div>φ &nbsp;THE OPUS, UNIT C201</div>
            <div style={{ marginTop: 4 }}>AL A’AMAL ST. BUSINESS BAY</div>
          </div>
          <div style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontFamily: 'var(--mono)', fontSize: '0.65rem', letterSpacing: '0.4em', textTransform: 'uppercase', opacity: 0.8, textShadow: '0 1px 8px rgba(0,0,0,0.5)' }}>
            Mindful aesthetics
          </div>
          <div className="mono" style={{ fontSize: '0.7rem', textAlign: 'right', textShadow: '0 1px 8px rgba(0,0,0,0.7)' }}>
            <div>EST. 2022</div>
            <div style={{ marginTop: 4 }}>DR HALAH TAHA, MEDICAL DIRECTOR</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Hero variant B: Split editorial type-led ===
function HeroEditorial({ ar, onBook }) {
  return (
    <section style={{ background: 'var(--bone)', padding: '140px 0 60px', position: 'relative' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'end' }}>
        <div style={{ paddingBottom: 40 }}>
          <div className="eyebrow" style={{ marginBottom: 28 }}>
            φ &nbsp; DUBAI · BUSINESS BAY · NEXT GENERATION FACIAL AESTHETICS
          </div>
          <h1 className="serif" style={{
            fontSize: 'clamp(3.5rem, 7vw, 7.5rem)', lineHeight: 0.92, color: 'var(--ink)',
            fontWeight: 300, letterSpacing: '-0.015em', marginBottom: 40,
          }}>
            {ar ? (
              <>دار جمالیات<br/><em className="ital" style={{ color: 'var(--olive)' }}>الوعي</em>.</>
            ) : (
              <>The Home of<br/>Mindful <em className="ital" style={{ color: 'var(--olive)' }}>Aesthetics</em>.</>
            )}
          </h1>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginBottom: 48, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.6 }}>
              Doctor-led, non-surgical facial aesthetics. Three pillars: <em className="ital">skin quality, facial structure, hair restoration</em>.
            </p>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.6 }}>
              A maximum of ten clients per day. 3D imaging of skin and scalp before any plan is proposed.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            <button className="btn btn-olive" onClick={onBook}>Book a consultation</button>
            <a href="tel:+97144562024" className="btn btn-ghost">+971 4 456 2024</a>
          </div>
        </div>

        <div style={{ position: 'relative', aspectRatio: '0.78 / 1', overflow: 'hidden' }}>
          <img src="media/brand-model-01.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          <div style={{
            position: 'absolute', bottom: 24, left: 24, right: 24,
            background: 'rgba(242,237,227,0.92)', padding: '18px 22px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <div className="mono" style={{ fontSize: '0.65rem', color: 'var(--ink)' }}>
              φ OURONYX · DUBAI<br/>
              <span style={{ color: 'var(--muted)' }}>EST. 2022 · BY CONSULTATION</span>
            </div>
            <button onClick={onBook} style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', color: 'var(--olive)', display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--mono)', fontSize: '0.7rem', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
              Begin →
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// === Three Pillars ===
function PillarsGrid({ ar, onNav }) {
  const pillars = [
    {
      id: 'skin-quality',
      no: '01',
      labelEn: 'Skin Quality', labelAr: 'جودة البشرة',
      blurbEn: 'Early signs of ageing, skin health and luminosity — addressed with injectable biostimulators, energy-based therapies and HA injectables.',
      blurbAr: 'علاج العلامات المبكرة للشيخوخة، صحة البشرة وإشراقها — بطریقة علمیة معتمدة.',
      img: 'media/treatment-injectables-01.webp',
    },
    {
      id: 'facial-structure',
      no: '02',
      labelEn: 'Facial Structure', labelAr: 'بنية الوجه',
      blurbEn: 'Bone loss, muscle shifts, fat redistribution — restoring proportion with a focus on natural, anatomically considered results.',
      blurbAr: 'استعادة التوازن الطبیعي للوجه من خلال علاجات بنیویة دقیقة.',
      img: 'media/treatment-detail-01.webp',
    },
    {
      id: 'hair-restoration',
      no: '03',
      labelEn: 'Hair Restoration', labelAr: 'إستعادة الشعر',
      blurbEn: 'Non-surgical, personalised hair-health plans. 3D imaging assesses scalp health before treatment is proposed.',
      blurbAr: 'خطط شخصیة غیر جراحیة لصحة الشعر، تبدأ بتقییم فروة الرأس.',
      img: 'media/treatment-hair-01.webp',
    },
  ];

  return (
    <section style={{ background: 'var(--porcelain)', padding: '120px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 80 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{ar ? 'ثلاث ركائز' : 'Three Pillars · by consultation'}</div>
              <h2 className="serif" style={{ fontSize: '3rem', lineHeight: 1.05 }}>
                {ar ? 'كل خطة تبدأ بمحادثة' : <>Every plan begins with a <em className="ital">conversation</em>.</>}
              </h2>
            </div>
            <button onClick={() => onNav('treatments')} className="btn btn-ghost">
              {ar ? 'كل العلاجات' : 'View all treatments'} →
            </button>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28 }}>
          {pillars.map((p, i) => (
            <Reveal key={p.id} delay={i * 140}>
              <button
                onClick={() => onNav('treatment:' + p.id)}
                style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left', width: '100%', color: 'var(--ink)' }}
              >
                <div style={{ position: 'relative', aspectRatio: '0.82 / 1', overflow: 'hidden', marginBottom: 24 }}>
                  <img src={p.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.8s' }}
                    onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.04)'}
                    onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}
                  />
                  <div style={{ position: 'absolute', top: 16, left: 16, color: 'var(--bone)', fontFamily: 'var(--mono)', fontSize: '0.72rem', letterSpacing: '0.2em' }}>
                    {p.no}
                  </div>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
                  <h3 className="serif" style={{ fontSize: '2rem', lineHeight: 1.1 }}>{ar ? p.labelAr : p.labelEn}</h3>
                  <span style={{ color: 'var(--champagne)', fontFamily: 'var(--mono)', fontSize: '0.7rem' }}>→</span>
                </div>
                <p style={{ color: 'var(--ink-soft)', fontSize: '0.94rem', lineHeight: 1.65 }}>
                  {ar ? p.blurbAr : p.blurbEn}
                </p>
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Ethos strip — three columns w/ numbers ===
function EthosStrip({ ar }) {
  const items = [
    { n: '10', label: ar ? 'حد أقصى للعملاء يومیاً' : 'Clients per doctor, per day', detail: ar ? 'السلامة قبل العدد. الجودة قبل السرعة.' : 'Never more. Safety, not volume.' },
    { n: '3D', label: ar ? 'تصویر للبشرة وفروة الرأس' : 'Imaging of skin and scalp', detail: ar ? 'لا توصیة قبل التقییم.' : 'Diagnostic-first, plan-second.' },
    { n: '01', label: ar ? 'استشاري لكل عمیل' : 'Doctor-led, end-to-end', detail: ar ? 'استشاراتك مع طبیب مرخص في دبي.' : 'One physician, one plan, one room.' },
  ];

  return (
    <section style={{ background: 'var(--ink)', color: 'var(--bone)', padding: '110px 0', position: 'relative', overflow: 'hidden' }}>
      <ArchPattern color="rgba(242,237,227,0.18)" opacity={1} />
      <div className="container" style={{ position: 'relative' }}>
        <Reveal>
          <div className="eyebrow" style={{ marginBottom: 20, color: 'rgba(242,237,227,0.55)' }}>
            {ar ? 'فلسفتنا' : 'Our philosophy'}
          </div>
          <h2 className="serif" style={{ fontSize: '3rem', lineHeight: 1.05, maxWidth: 900, marginBottom: 80 }}>
            {ar ? (
              <>"الذي یخیفني هو سماع ممارسین یقولون: <em className="ital" style={{ color: '#E8D6A8' }}>عالجت ٤٠ عمیلاً الیوم</em>."</>
            ) : (
              <>“What scares me is hearing practitioners say, <em className="ital" style={{ color: '#E8D6A8' }}>I injected forty clients today</em>.”</>
            )}
          </h2>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 80, paddingTop: 60, borderTop: '1px solid rgba(242,237,227,0.18)' }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 140}>
              <div style={{
                fontFamily: 'var(--serif)', fontSize: '5rem', lineHeight: 0.9,
                color: '#E8D6A8', fontStyle: 'italic', fontWeight: 300, marginBottom: 18,
              }}>
                {it.n}
              </div>
              <div style={{ fontSize: '1rem', color: 'var(--bone)', marginBottom: 8, fontWeight: 500 }}>{it.label}</div>
              <div style={{ color: 'rgba(242,237,227,0.6)', fontSize: '0.9rem', lineHeight: 1.6 }}>{it.detail}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// === The Opus location teaser ===
function OpusTeaser({ ar, onNav }) {
  return (
    <section style={{ background: 'var(--bone)', padding: '120px 0' }}>
      <div className="container-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0 }}>
        <div style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden' }}>
          <img src="media/interior-lounge-01.webp" alt="The Opus interior" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        </div>
        <Reveal>
          <div style={{ padding: '60px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%' }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>
              {ar ? 'الموقع' : 'The Location'}
            </div>
            <h2 className="serif" style={{ fontSize: '3rem', lineHeight: 1.05, marginBottom: 28 }}>
              {ar ? <>برج <em className="ital">أوبس</em> من تصمیم زها حدید.</> : <>Inside Zaha Hadid’s <em className="ital">Opus</em>.</>}
            </h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7, marginBottom: 32 }}>
              {ar
                ? 'العیادة تقع في وحدة C201 من أوبس بواسطة أومنیات — معلم معماري في الخلیج التجاري. هندسة مدروسة، ضوء ناعم، ومدخل خاص للعملاء — للحفاظ على الخصوصیة وراحة البال.'
                : 'Unit C201 sits within The Opus by Omniyat — a Zaha Hadid landmark in Business Bay. Considered architecture, soft daylight, a private exit. Discretion, by design.'}
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 32, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
              <div>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>Address</div>
                <div style={{ fontSize: '0.92rem' }}>Unit C201, Al A’amal Street<br/>Business Bay, Dubai</div>
              </div>
              <div>
                <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>Hours</div>
                <div style={{ fontSize: '0.92rem', color: 'var(--muted)', fontStyle: 'italic' }}>By appointment</div>
              </div>
            </div>
            <button onClick={() => onNav('location')} className="btn btn-ghost" style={{ alignSelf: 'flex-start' }}>
              {ar ? 'تفاصیل الموقع' : 'Explore the clinic'} →
            </button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// === Doctor teaser ===
function DoctorTeaser({ ar, onNav }) {
  return (
    <section style={{ background: 'var(--porcelain)', padding: '120px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80, alignItems: 'center' }}>
            <div style={{ aspectRatio: '0.78 / 1', background: 'var(--line-soft)', position: 'relative', overflow: 'hidden' }}>
              {/* Doctor placeholder (no real doctor portraits available) */}
              <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 28, background: 'linear-gradient(135deg, #2A2C14 0%, #3D3F1F 100%)', color: 'var(--bone)' }}>
                <div className="mono" style={{ fontSize: '0.68rem', letterSpacing: '0.2em' }}>DOCTOR PORTRAIT · CLIENT TO SUPPLY</div>
                <div>
                  <PhiMark size={120} color="rgba(232,214,168,0.5)" />
                </div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: '1.8rem', fontStyle: 'italic', lineHeight: 1.1 }}>Dr Halah Taha</div>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 18 }}>{ar ? 'المديرة الطبية' : 'Medical Director, Dubai'}</div>
              <h2 className="serif" style={{ fontSize: '3.2rem', lineHeight: 1.05, marginBottom: 24 }}>
                {ar ? 'الدكتورة هلا طه' : <>Dr <em className="ital">Halah Taha</em>.</>}
              </h2>
              <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', lineHeight: 1.7, marginBottom: 24, maxWidth: 560 }}>
                {ar
                  ? 'مدیرة طبیة لعیادة أورونیكس دبي منذ مارس 2022. اختصاصیة في طب التجمیل، باهتمام خاص بمكافحة الشیخوخة وعلاج تساقط الشعر.'
                  : 'Medical Director of Ouronyx Dubai since March 2022. Specialist in aesthetic medicine; particular interest in anti-ageing and alopecia.'}
              </p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, max-content)', gap: '16px 48px', marginBottom: 36, fontSize: '0.88rem' }}>
                {[
                  ['Qualification', 'MD, RAK Medical & Health Sciences University · 2016'],
                  ['Fellowship', 'A4M Cosmetology Licence 2020 · Aesthetics/Anti-Aging 2021'],
                  ['Focus', 'Skin quality, hair restoration, mindful planning'],
                  ['Licence', <span style={{ color: 'var(--muted)', fontStyle: 'italic' }}>DHA number — to verify with client</span>],
                ].map(([k, v]) => (
                  <React.Fragment key={k}>
                    <div className="mono" style={{ color: 'var(--muted)' }}>{k}</div>
                    <div style={{ color: 'var(--ink)' }}>{v}</div>
                  </React.Fragment>
                ))}
              </div>
              <button onClick={() => onNav('experts')} className="btn btn-ghost">
                {ar ? 'الفريق الطبي' : 'Meet the team'} →
              </button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// === Press strip — attribution, not awards ===
function PressStrip({ ar }) {
  const press = ['VOGUE ARABIA', 'HARPER’S BAZAAR ARABIA', 'TATLER', 'OBSERVER DUBAI', 'VILLA88'];
  return (
    <section style={{ background: 'var(--bone)', padding: '60px 0', borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24, textAlign: 'center', color: 'var(--muted)' }}>
          {ar ? 'كما تناولته الصحافة' : 'As featured in the editorial press'}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center', gap: 40, opacity: 0.6, flexWrap: 'wrap' }}>
          {press.map((p) => (
            <div key={p} className="serif" style={{ fontSize: '1.05rem', letterSpacing: '0.12em', color: 'var(--ink-soft)', fontStyle: 'italic' }}>
              {p}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// === Final CTA ===
function FinalCTA({ ar, onBook }) {
  return (
    <section style={{ background: 'var(--olive-deep)', color: 'var(--bone)', padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
      <ArchPattern color="rgba(242,237,227,0.18)" opacity={1} />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
        <PhiMark size={68} color="#E8D6A8" />
        <h2 className="serif" style={{ fontSize: 'clamp(2.5rem, 5vw, 4.5rem)', lineHeight: 1.02, marginTop: 28, marginBottom: 32, fontWeight: 300 }}>
          {ar ? (
            <>الخطة الصحیحة تبدأ <em className="ital" style={{ color: '#E8D6A8' }}>بمحادثة</em>.</>
          ) : (
            <>The right plan begins with a <em className="ital" style={{ color: '#E8D6A8' }}>conversation</em>.</>
          )}
        </h2>
        <p style={{ color: 'rgba(242,237,227,0.78)', fontSize: '1.05rem', lineHeight: 1.6, maxWidth: 600, margin: '0 auto 44px' }}>
          {ar
            ? 'ابدأ بتقییم تشخیصي مع طبیب — لیس مع علاج.'
            : 'Begin with a diagnostic conversation with a doctor — not with a procedure.'}
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center' }}>
          <button className="btn" style={{ background: 'var(--bone)', color: 'var(--olive-deep)', borderColor: 'var(--bone)' }} onClick={onBook}>
            {ar ? 'احجز استشارة' : 'Book a consultation'}
          </button>
          <a href="https://wa.me/971586858562" className="btn" style={{ color: 'var(--bone)', borderColor: 'rgba(242,237,227,0.5)' }}>
            WhatsApp +971 58 685 8562
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });
