/* global React, Reveal, PhiMark, ArchPattern */

// =======================================================================
//  EXPERTS PAGE — verified Dubai team only
// =======================================================================

function Experts({ locale, onNav, onBook }) {
  const ar = locale === 'ar';

  return (
    <main>
      <section style={{ background: 'var(--bone)', padding: '160px 0 80px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>φ &nbsp; {ar ? 'الفريق الطبي' : 'The Doctors'}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 80, alignItems: 'end', paddingBottom: 60, borderBottom: '1px solid var(--line)' }}>
            <h1 className="serif" style={{ fontSize: 'clamp(3.5rem, 6vw, 5.5rem)', lineHeight: 0.98, fontWeight: 300, letterSpacing: '-0.01em' }}>
              {ar ? <>طبیب واحد. <em className="ital">خطة واحدة</em>. غرفة واحدة.</> : <>One doctor. <em className="ital">One plan</em>. One room.</>}
            </h1>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', lineHeight: 1.7 }}>
              {ar
                ? 'الفریق الطبي لعیادة دبي. كل من یُذكر هنا هو ممارس مرخص من قبل هیئة الصحة بدبي ویعمل في عیادة الخلیج التجاري.'
                : 'The Dubai medical team. Each name listed here is a DHA-licensed practitioner working at the Business Bay clinic. London faculty are kept separate.'}
            </p>
          </div>
        </div>
      </section>

      {/* Lead doctor — full editorial spread */}
      <section style={{ background: 'var(--bone)', paddingBottom: 60 }}>
        <div className="container-wide">
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 0, alignItems: 'stretch' }}>
              {/* Portrait placeholder — no doctor portrait available */}
              <div style={{
                position: 'relative', aspectRatio: '0.78 / 1',
                background: 'linear-gradient(160deg, #2A2C14 0%, #3D3F1F 45%, #5A5D2E 100%)',
                color: 'var(--bone)', overflow: 'hidden',
              }}>
                <ArchPattern color="rgba(232,214,168,0.25)" opacity={1} />
                <div style={{ position: 'absolute', inset: 32, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                  <div className="mono" style={{ fontSize: '0.65rem', letterSpacing: '0.22em', color: 'rgba(242,237,227,0.7)' }}>
                    PORTRAIT · CLIENT TO SUPPLY
                  </div>
                  <div style={{ textAlign: 'center' }}>
                    <PhiMark size={180} color="rgba(232,214,168,0.35)" />
                  </div>
                  <div>
                    <div className="serif" style={{ fontSize: '2.6rem', fontStyle: 'italic', lineHeight: 1, marginBottom: 8 }}>Dr Halah Taha</div>
                    <div className="mono" style={{ fontSize: '0.7rem', letterSpacing: '0.18em', color: 'rgba(232,214,168,0.7)' }}>
                      MEDICAL DIRECTOR · OURONYX DUBAI
                    </div>
                  </div>
                </div>
              </div>

              <div style={{ background: 'var(--porcelain)', padding: '64px 72px', display: 'flex', flexDirection: 'column', justifyContent: 'center', borderRight: '1px solid var(--line)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}>{ar ? 'المديرة الطبية' : 'Medical Director'}</div>
                <h2 className="serif" style={{ fontSize: '3.2rem', lineHeight: 1.02, marginBottom: 24, fontWeight: 300 }}>
                  {ar ? 'الدكتورة هلا طه' : <>Dr <em className="ital">Halah Taha</em></>}
                </h2>
                <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7, marginBottom: 32, maxWidth: 520 }}>
                  {ar
                    ? 'مدیرة طبیة لعیادة أورونیكس دبي منذ مارس 2022. اختصاصیة في طب التجمیل غیر الجراحي مع اهتمام خاص بمكافحة الشیخوخة وعلاج تساقط الشعر. كل استشاراتها تنطلق من تصویر ثلاثي الأبعاد لا من إجراء محدد.'
                    : 'Medical Director of Ouronyx Dubai since March 2022. Specialist in non-surgical aesthetic medicine, with particular interest in anti-ageing and alopecia. Every consultation begins with diagnostic imaging — not with a procedure already in mind.'}
                </p>

                <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '14px 28px', fontSize: '0.9rem', borderTop: '1px solid var(--line)', paddingTop: 28, marginBottom: 36 }}>
                  {[
                    [ar ? 'التأهيل' : 'Qualification', 'MD, RAK Medical & Health Sciences University · 2016'],
                    [ar ? 'التخصص' : 'Specialism', 'A4M Cosmetology Licence 2020 · Aesthetics / Anti-Aging Fellowship 2021'],
                    [ar ? 'الاهتمام' : 'Clinical interest', 'Skin quality, hair restoration, mindful long-term planning'],
                    [ar ? 'الترخيص' : 'DHA Licence', <span style={{ color: 'var(--muted)', fontStyle: 'italic' }}>To verify · client to supply</span>],
                    [ar ? 'تتحدث' : 'Languages', 'English · Arabic'],
                  ].map(([k, v]) => (
                    <React.Fragment key={k}>
                      <div className="mono" style={{ color: 'var(--muted)' }}>{k}</div>
                      <div>{v}</div>
                    </React.Fragment>
                  ))}
                </div>

                <div style={{ display: 'flex', gap: 12 }}>
                  <button className="btn btn-olive" onClick={onBook}>{ar ? 'احجز مع الدكتورة' : 'Book a consultation'}</button>
                  <a href="https://wa.me/971586858562" className="btn btn-ghost">WhatsApp</a>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Pull quote */}
      <section style={{ background: 'var(--bone)', padding: '60px 0 120px' }}>
        <div className="container" style={{ maxWidth: 1000, margin: '0 auto', textAlign: 'center' }}>
          <Reveal>
            <PhiMark size={48} color="var(--champagne)" />
            <p className="serif" style={{ fontSize: 'clamp(1.8rem, 3.2vw, 2.8rem)', lineHeight: 1.3, fontStyle: 'italic', color: 'var(--ink)', marginTop: 24, fontWeight: 300 }}>
              “Sometimes the right answer is a really good SPF and a plane ticket, not a procedure.”
            </p>
            <div className="mono" style={{ marginTop: 28, color: 'var(--muted)' }}>OURONYX FOUNDING PHILOSOPHY · ATTRIBUTED</div>
          </Reveal>
        </div>
      </section>

      {/* Roster placeholder grid — to verify */}
      <section style={{ background: 'var(--porcelain)', padding: '100px 0', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
            <h2 className="serif" style={{ fontSize: '2.4rem' }}>{ar ? 'بقیة الفریق' : 'The wider Dubai team'}</h2>
            <span className="mono" style={{ color: 'var(--muted)' }}>{ar ? 'بانتظار التحقق' : 'Awaiting verification'}</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {[
              ['Aesthetic Physician', 'Name to verify'],
              ['Aesthetic Physician', 'Name to verify'],
              ['Clinical Lead, Treatment', 'Name to verify'],
            ].map(([role, name], i) => (
              <Reveal key={i} delay={i * 100}>
                <div style={{
                  aspectRatio: '1 / 1.2', background: 'var(--bone)', border: '1px solid var(--line)',
                  padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                  color: 'var(--ink-soft)',
                }}>
                  <div style={{
                    flex: 1, background: 'var(--line-soft)', display: 'flex', alignItems: 'center', justifyContent: 'center',
                    border: '1px dashed var(--line)', marginBottom: 18,
                  }}>
                    <PhiMark size={48} color="rgba(184,153,104,0.35)" />
                  </div>
                  <div className="mono" style={{ color: 'var(--muted)', marginBottom: 6 }}>{role}</div>
                  <div className="serif" style={{ fontSize: '1.3rem', fontStyle: 'italic' }}>{name}</div>
                  <div className="mono" style={{ marginTop: 8, fontSize: '0.6rem', color: 'var(--champagne)' }}>DHA LICENCE · PENDING</div>
                </div>
              </Reveal>
            ))}
          </div>
          <p style={{ marginTop: 36, color: 'var(--muted)', fontSize: '0.86rem', fontStyle: 'italic', maxWidth: 740 }}>
            The site’s named London faculty (Dr Marco Nicoloso, Dr Maude Calveley) are not Dubai practitioners and are not represented here. Dr Raj Acquilla’s Dubai role and DHA status are to be confirmed before publication.
          </p>
        </div>
      </section>

      {/* About / philosophy */}
      <section style={{ background: 'var(--ink)', 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', display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80 }}>
          <Reveal>
            <div>
              <div className="eyebrow" style={{ color: 'rgba(242,237,227,0.55)', marginBottom: 18 }}>About Ouronyx</div>
              <h2 className="serif" style={{ fontSize: '3rem', lineHeight: 1, fontWeight: 300 }}>
                Founded on <em className="ital" style={{ color: '#E8D6A8' }}>two disciplines</em>.
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <p style={{ color: 'rgba(242,237,227,0.78)', fontSize: '1.05rem', lineHeight: 1.7, marginBottom: 28 }}>
              Ouronyx was founded by senior executives in psychology and healthcare. <strong style={{ color: 'var(--bone)' }}>Ida Banek</strong> brings a psychology background — the foundation of the mindful-aesthetics voice. <strong style={{ color: 'var(--bone)' }}>Marc Princen</strong>, formerly Executive Vice President at Allergan, brings the clinical-industry experience.
            </p>
            <p style={{ color: 'rgba(242,237,227,0.78)', fontSize: '1.05rem', lineHeight: 1.7 }}>
              Dubai opened in 2022 at The Opus by Omniyat — the first destination outside London. The brief was simple: keep the philosophy intact. Ten clients per day, 3D imaging first, no procedure ever started without a written plan.
            </p>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Experts });