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

// =======================================================================
//  TREATMENT DATA (compliant template: what / candidacy / process / aftercare / FAQ)
//  No prices. No guaranteed results. Category-level only.
// =======================================================================

const TREATMENT_DATA = {
  'skin-quality': {
    no: '01',
    name: 'Skin Quality',
    nameAr: 'جودة البشرة',
    hero: 'media/treatment-injectables-01.webp',
    blurb: 'Addressing early signs of ageing, supporting skin health, restoring luminosity — with biostimulators, energy-based therapies, wrinkle relaxation and hyaluronic-acid injectables.',
    blurbAr: 'علاج العلامات المبكرة للشیخوخة، صحة وإشراق البشرة.',
    what: 'The Skin Quality pillar groups treatments that work at the level of the skin itself — supporting collagen and elastin production, calming inflammation, smoothing fine lines and improving texture. Plans typically combine more than one modality, chosen after diagnostic assessment.',
    candidacy: [
      'Adults seeking to address early signs of ageing or skin-quality concerns',
      'Suitable medical history and skin-type assessment',
      'Realistic expectations — results vary; outcomes are never guaranteed',
      'Not suitable during pregnancy or for certain medical conditions',
    ],
    process: [
      ['Diagnostic', 'A doctor-led consultation. 3D imaging of skin captures texture, pigmentation, hydration, and depth of lines as objective baselines.'],
      ['Plan', 'A personalised plan is proposed based on findings. You are encouraged to take time before committing.'],
      ['Treatment', 'Each treatment is delivered by the consulting doctor. Sessions vary in length; comfort, sterility and discretion are the constants.'],
      ['Review', 'A follow-up review is scheduled to assess response. The plan is adjusted, paused, or completed as appropriate.'],
    ],
    aftercare: 'Most non-surgical treatments allow a return to daily activity. You will be given a written aftercare protocol covering the first 24\u201372 hours — typical guidance includes avoiding heat, intense exercise, and certain skincare actives for a defined window. Direct contact with the clinic is available during recovery.',
    faqs: [
      ['Will results be guaranteed?', 'No. Outcomes vary between individuals, and we are required by regulatory guidance not to promise results. Your doctor will discuss what is realistic for your specific assessment.'],
      ['How long does a session take?', 'Session length depends on the treatment and plan. Your consultation will set clear expectations.'],
      ['Are there prices on the website?', 'No. All treatment is by consultation — a written plan and quotation are provided after assessment.'],
      ['What if I decide not to proceed?', 'That is the expected outcome of some consultations. We sometimes recommend skincare and sun protection only.'],
    ],
    devices: ['3D imaging assessment', 'Energy-based therapy', 'Injectable biostimulators', 'Hyaluronic-acid injectables', 'Wrinkle relaxation'],
  },
  'facial-structure': {
    no: '02',
    name: 'Facial Structure',
    nameAr: 'بنية الوجه',
    hero: 'media/treatment-detail-01.webp',
    blurb: 'Restoring proportion as the face changes — bone loss, muscle shift, fat redistribution — with a stated focus on natural results.',
    blurbAr: 'استعادة التوازن الطبیعي للوجه.',
    what: 'The Facial Structure pillar addresses architectural change. Treatments work with the underlying anatomy of the face rather than on the surface, restoring proportion in a way that respects the patient’s natural features. Conservative dosing and anatomically considered planning are explicit values.',
    candidacy: [
      'Adults experiencing age-related changes in facial proportion',
      'Suitable medical history and anatomical assessment',
      'A preference for natural, restorative outcomes over dramatic change',
      'Realistic expectations — results vary; outcomes are never guaranteed',
    ],
    process: [
      ['Diagnostic', 'A consultation that maps the face anatomically, identifying where structure has changed.'],
      ['Plan', 'A staged plan is proposed — some areas may not be treated at all. Conservatism is a positive value here.'],
      ['Treatment', 'Each session is delivered by the consulting doctor with explicit attention to symmetry and proportion.'],
      ['Review', 'Follow-up review at the appropriate interval; subsequent stages confirmed only after assessment.'],
    ],
    aftercare: 'Typical aftercare includes avoiding pressure on treated areas, certain sleeping positions, and heat for a defined window. A written protocol is provided.',
    faqs: [
      ['What does "natural" mean here?', 'Treatment that respects the patient’s anatomy — the aim is restoration of proportion, not transformation.'],
      ['How many sessions are typical?', 'Plans are individual; some are single sessions, others are staged. Your consultation will outline the expected number.'],
      ['Are there prices on the website?', 'No. All treatment is by consultation — a written plan and quotation are provided after assessment.'],
    ],
    devices: ['3D imaging · anatomical mapping', 'Structural injectables', 'Volume restoration', 'Profile and contour balance'],
  },
  'hair-restoration': {
    no: '03',
    name: 'Hair Restoration',
    nameAr: 'إستعادة الشعر',
    hero: 'media/treatment-hair-01.webp',
    blurb: 'Non-surgical, personalised hair-health plans. 3D imaging assesses scalp health before any plan is proposed.',
    blurbAr: 'خطط شخصیة غیر جراحیة لصحة الشعر.',
    what: 'The Hair Restoration pillar treats hair and scalp health as a clinical concern rather than a cosmetic one. Diagnostic 3D imaging maps the scalp; treatment plans are personalised, staged and conservative. Dr Halah Taha has a particular interest in alopecia.',
    candidacy: [
      'Adults concerned with hair thinning, loss, or scalp health',
      'Comprehensive medical history including nutritional and hormonal factors',
      'Realistic expectations — hair-health response varies; outcomes are never guaranteed',
    ],
    process: [
      ['Diagnostic', '3D imaging of the scalp; bloodwork may be requested. A clinical baseline is established before any plan is proposed.'],
      ['Plan', 'A staged plan, often with topical, in-clinic and at-home components.'],
      ['Treatment', 'Sessions are delivered in-clinic at planned intervals.'],
      ['Review', 'Response is assessed against the imaging baseline at scheduled review points.'],
    ],
    aftercare: 'Aftercare for hair-restoration treatments is typically minimal but includes specific guidance for the first 24 hours. A written protocol is provided.',
    faqs: [
      ['Is this surgery?', 'No. Ouronyx Dubai offers non-surgical hair restoration only.'],
      ['When do results show?', 'Hair-cycle response is gradual. Your doctor will discuss realistic timelines for your specific case.'],
      ['Are there prices on the website?', 'No. All treatment is by consultation.'],
    ],
    devices: ['3D scalp imaging', 'In-clinic scalp therapy', 'Personalised maintenance protocols'],
  },
};

// =======================================================================
//  Treatments hub
// =======================================================================

function TreatmentsHub({ locale, onNav, onBook }) {
  const ar = locale === 'ar';
  const pillars = Object.entries(TREATMENT_DATA);

  return (
    <main>
      {/* Page header */}
      <section style={{ background: 'var(--bone)', padding: '160px 0 80px' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 20 }}>φ &nbsp; {ar ? 'العلاجات' : 'Treatments'}</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 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>.</> : <>Three pillars. <em className="ital">One plan</em>.</>}
            </h1>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1.05rem', lineHeight: 1.7 }}>
              {ar
                ? 'كل خطة علاجیة في عیادتنا تبدأ بمحادثة تشخیصیة وتصویر ثلاثي الأبعاد. لا أسعار قبل الاستشارة، ولا وعود بنتائج. الصحة قبل الجمال.'
                : 'Every plan begins with a doctor-led consultation and 3D imaging. No prices are quoted before assessment; no results are guaranteed. Health over beauty.'}
            </p>
          </div>
        </div>
      </section>

      {/* Pillars list — full-width editorial rows */}
      <section style={{ background: 'var(--bone)', paddingBottom: 80 }}>
        <div className="container-wide">
          {pillars.map(([slug, p], i) => (
            <Reveal key={slug} delay={i * 100}>
              <button
                onClick={() => onNav('treatment:' + slug)}
                style={{
                  background: 'none', border: 0, borderTop: '1px solid var(--line)', padding: '64px 32px', cursor: 'pointer',
                  textAlign: 'left', width: '100%', color: 'var(--ink)',
                  display: 'grid', gridTemplateColumns: '120px 1.6fr 1.6fr 1fr', gap: 40, alignItems: 'center',
                  transition: 'background 0.3s',
                }}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--porcelain)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'none'}
              >
                <div className="serif" style={{ fontSize: '4rem', color: 'var(--champagne)', fontStyle: 'italic', lineHeight: 1, fontWeight: 300 }}>{p.no}</div>
                <div>
                  <h2 className="serif" style={{ fontSize: '2.8rem', lineHeight: 1, marginBottom: 6 }}>{ar ? p.nameAr : p.name}</h2>
                  <div className="mono" style={{ color: 'var(--muted)' }}>{slug.replace('-', ' · ')}</div>
                </div>
                <p style={{ color: 'var(--ink-soft)', fontSize: '0.95rem', lineHeight: 1.65 }}>{ar ? p.blurbAr : p.blurb}</p>
                <div style={{ textAlign: 'right' }}>
                  <span className="mono" style={{ color: 'var(--olive)', fontSize: '0.72rem' }}>
                    {ar ? 'التفاصيل' : 'View pillar'} →
                  </span>
                </div>
              </button>
            </Reveal>
          ))}
          <hr className="rule" />
        </div>
      </section>

      {/* Diagnostic-first section */}
      <section style={{ background: 'var(--porcelain)', padding: '120px 0', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <Reveal>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 18 }}>{ar ? 'التشخيص أولاً' : 'Diagnostic-first'}</div>
                <h2 className="serif" style={{ fontSize: '3rem', lineHeight: 1.05, marginBottom: 24 }}>
                  {ar ? <>تصویر <em className="ital">ثلاثي الأبعاد</em>.</> : <>3D imaging. <em className="ital">Then plan.</em></>}
                </h2>
                <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7 }}>
                  {ar
                    ? 'یعتمد نهجنا على ربط التكنولوجیا بالعلامات النفسیة والجمالیة والتشریحیة، لبناء محادثة قائمة على البیانات تمكنك من اتخاذ قرار مدروس.'
                    : 'Our approach blends technology with psychological, aesthetic and anatomical markers — a data-driven conversation that empowers you to make informed decisions, not a procedure menu.'}
                </p>
              </div>
              <div style={{ aspectRatio: '4 / 3', overflow: 'hidden' }}>
                <img src="media/equipment-devices-01.webp" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

// =======================================================================
//  Treatment detail page — with tabs (what / candidacy / process / aftercare / FAQ)
// =======================================================================

function TreatmentDetail({ slug, locale, onNav, onBook }) {
  const ar = locale === 'ar';
  const p = TREATMENT_DATA[slug];
  const [tab, setTab] = React.useState('what');

  if (!p) return <div style={{ padding: 80 }}>Treatment not found.</div>;

  const tabs = [
    ['what', ar ? 'ما هو' : 'What it is'],
    ['candidacy', ar ? 'المرشحون' : 'Candidacy'],
    ['process', ar ? 'العملية' : 'Process'],
    ['aftercare', ar ? 'الرعاية اللاحقة' : 'Aftercare'],
    ['faq', ar ? 'الأسئلة' : 'FAQs'],
  ];

  return (
    <main>
      {/* Hero */}
      <section style={{ position: 'relative', height: '60vh', minHeight: 480, overflow: 'hidden' }}>
        <img src={p.hero} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', position: 'absolute', inset: 0 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(20,19,15,0.15) 0%, rgba(20,19,15,0.55) 100%)' }} />
        <div className="container" style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', paddingBottom: 56 }}>
          <button onClick={() => onNav('treatments')} className="mono" style={{ background: 'none', border: 0, padding: 0, cursor: 'pointer', color: 'rgba(242,237,227,0.7)', marginBottom: 18, fontSize: '0.7rem', letterSpacing: '0.2em' }}>
            ← {ar ? 'كل العلاجات' : 'ALL TREATMENTS'}
          </button>
          <div className="eyebrow" style={{ color: 'rgba(242,237,227,0.8)', marginBottom: 14 }}>{p.no} · PILLAR</div>
          <h1 className="serif" style={{ fontSize: 'clamp(3.5rem, 6vw, 5.5rem)', lineHeight: 0.98, color: 'var(--bone)', fontWeight: 300 }}>
            {ar ? p.nameAr : p.name}.
          </h1>
        </div>
      </section>

      {/* Lede + sidebar */}
      <section style={{ background: 'var(--bone)', padding: '100px 0' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 80, alignItems: 'start' }}>
          <Reveal>
            <p className="serif" style={{ fontSize: '2rem', lineHeight: 1.35, fontStyle: 'italic', color: 'var(--ink)', marginBottom: 0, fontWeight: 300 }}>
              {ar ? p.blurbAr : p.blurb}
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ background: 'var(--porcelain)', padding: 28, border: '1px solid var(--line)' }}>
              <div className="mono" style={{ color: 'var(--muted)', marginBottom: 18 }}>{ar ? 'في هذه الركيزة' : 'Within this pillar'}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                {p.devices.map((d) => (
                  <li key={d} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: '0.9rem', color: 'var(--ink-soft)' }}>
                    <span style={{ width: 14, height: 1, background: 'var(--champagne)', marginTop: 10, flexShrink: 0 }} />
                    {d}
                  </li>
                ))}
              </ul>
              <button onClick={onBook} className="btn btn-olive" style={{ marginTop: 28, width: '100%', justifyContent: 'center' }}>
                {ar ? 'احجز استشارة' : 'Book a consultation'}
              </button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Tabs */}
      <section style={{ background: 'var(--porcelain)', padding: '80px 0 120px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div style={{ display: 'flex', gap: 0, marginBottom: 60, borderBottom: '1px solid var(--line)', overflowX: 'auto' }}>
            {tabs.map(([k, v]) => (
              <button key={k} onClick={() => setTab(k)} style={{
                background: 'none', border: 0, padding: '20px 24px 18px', cursor: 'pointer', whiteSpace: 'nowrap',
                fontFamily: 'var(--mono)', fontSize: '0.72rem', letterSpacing: '0.18em', textTransform: 'uppercase',
                color: tab === k ? 'var(--ink)' : 'var(--muted)',
                borderBottom: tab === k ? '2px solid var(--olive)' : '2px solid transparent',
                marginBottom: -1,
              }}>
                {v}
              </button>
            ))}
          </div>

          <div style={{ minHeight: 340 }}>
            {tab === 'what' && (
              <Reveal>
                <div style={{ maxWidth: 720 }}>
                  <p className="serif" style={{ fontSize: '1.6rem', lineHeight: 1.4, color: 'var(--ink)', fontWeight: 400 }}>
                    {p.what}
                  </p>
                </div>
              </Reveal>
            )}
            {tab === 'candidacy' && (
              <Reveal>
                <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, maxWidth: 980 }}>
                  {p.candidacy.map((c, i) => (
                    <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
                      <span className="serif" style={{ color: 'var(--champagne)', fontStyle: 'italic', fontSize: '1.4rem', lineHeight: 1, flexShrink: 0, minWidth: 28 }}>0{i + 1}</span>
                      <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.6 }}>{c}</p>
                    </li>
                  ))}
                </ul>
              </Reveal>
            )}
            {tab === 'process' && (
              <Reveal>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
                  {p.process.map(([title, body], i) => (
                    <div key={title}>
                      <div className="mono" style={{ color: 'var(--champagne)', marginBottom: 14 }}>STEP · 0{i + 1}</div>
                      <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 12 }}>{title}</h3>
                      <p style={{ color: 'var(--ink-soft)', fontSize: '0.92rem', lineHeight: 1.6 }}>{body}</p>
                    </div>
                  ))}
                </div>
              </Reveal>
            )}
            {tab === 'aftercare' && (
              <Reveal>
                <div style={{ maxWidth: 720 }}>
                  <p className="serif" style={{ fontSize: '1.4rem', lineHeight: 1.5, color: 'var(--ink)' }}>
                    {p.aftercare}
                  </p>
                  <p style={{ marginTop: 24, color: 'var(--muted)', fontSize: '0.88rem', fontStyle: 'italic' }}>
                    Direct contact with the clinic is available during recovery — WhatsApp +971 58 685 8562.
                  </p>
                </div>
              </Reveal>
            )}
            {tab === 'faq' && (
              <Reveal>
                <div style={{ maxWidth: 820 }}>
                  {p.faqs.map(([q, a], i) => (
                    <FAQRow key={i} q={q} a={a} />
                  ))}
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* Cross-link to other pillars */}
      <section style={{ background: 'var(--bone)', padding: '100px 0' }}>
        <div className="container">
          <div className="eyebrow" style={{ marginBottom: 36, color: 'var(--muted)' }}>{ar ? 'ركائز أخرى' : 'Other pillars'}</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
            {Object.entries(TREATMENT_DATA).filter(([k]) => k !== slug).map(([k, other]) => (
              <button key={k} onClick={() => { onNav('treatment:' + k); window.scrollTo(0,0); }} style={{
                background: 'var(--porcelain)', border: '1px solid var(--line)', padding: 32, cursor: 'pointer', textAlign: 'left', color: 'var(--ink)',
                display: 'grid', gridTemplateColumns: '80px 1fr auto', gap: 24, alignItems: 'center',
              }}>
                <div className="serif" style={{ fontSize: '2.4rem', color: 'var(--champagne)', fontStyle: 'italic' }}>{other.no}</div>
                <div>
                  <h3 className="serif" style={{ fontSize: '1.8rem', marginBottom: 6 }}>{ar ? other.nameAr : other.name}</h3>
                  <p style={{ color: 'var(--muted)', fontSize: '0.88rem' }}>{(ar ? other.blurbAr : other.blurb).slice(0, 90)}…</p>
                </div>
                <span style={{ color: 'var(--olive)' }}>→</span>
              </button>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

function FAQRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button onClick={() => setOpen(!open)} style={{
        background: 'none', border: 0, padding: '24px 0', cursor: 'pointer', width: '100%',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, color: 'var(--ink)',
      }}>
        <h3 className="serif" style={{ fontSize: '1.4rem', textAlign: 'left', fontWeight: 400, color: 'var(--ink)' }}>{q}</h3>
        <span style={{ color: 'var(--champagne)', fontFamily: 'var(--serif)', fontSize: '1.6rem', fontStyle: 'italic', transition: 'transform 0.3s', transform: open ? 'rotate(45deg)' : 'none' }}>+</span>
      </button>
      <div style={{ maxHeight: open ? 200 : 0, overflow: 'hidden', transition: 'max-height 0.4s' }}>
        <p style={{ color: 'var(--ink-soft)', fontSize: '1rem', lineHeight: 1.7, padding: '0 0 24px', maxWidth: 680 }}>{a}</p>
      </div>
    </div>
  );
}

Object.assign(window, { TreatmentsHub, TreatmentDetail, TREATMENT_DATA });
