// Procedures hub + Procedure detail + Surgeons list + Surgeon profile + Before/After + About + Contact

// =============================================
// PROCEDURES HUB
// =============================================
function ProceduresHub({ go, areaId }) {
  const [filter, setFilter] = useState(areaId || 'all');
  const [view, setView] = useState('grid'); // grid | list

  const visibleAreas = filter === 'all' ? PROCEDURE_AREAS : PROCEDURE_AREAS.filter(a => a.id === filter);

  return (
    <div className="page-anim">
      <section style={{ padding: '64px 0 32px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow mb-2">Procedures</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 80px)', maxWidth: 900 }}>
            Surgical, non-surgical, <em className="h-script">all under one roof.</em>
          </h1>
          <p className="muted mt-3" style={{ fontSize: 16, maxWidth: 620, lineHeight: 1.7 }}>
            Browse by treatment stream, or start with the concern that brought you here. Every procedure
            page covers candidacy, process, recovery and — for surgical work — disclosed risks.
          </p>

          <div className="flex gap-2 mt-6" style={{ flexWrap: 'wrap', alignItems: 'center' }}>
            <span className="muted" style={{ fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', marginRight: 8 }}>Filter</span>
            <button className={`concern-chip ${filter === 'all' ? 'selected' : ''}`} onClick={() => setFilter('all')}
              style={filter === 'all' ? { background: 'var(--ink)', color: 'var(--porcelain)', borderColor: 'var(--ink)' } : {}}>
              All Streams
            </button>
            {PROCEDURE_AREAS.map(a => (
              <button key={a.id} className="concern-chip" onClick={() => setFilter(a.id)}
                style={filter === a.id ? { background: 'var(--ink)', color: 'var(--porcelain)', borderColor: 'var(--ink)' } : {}}>
                {a.title}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* Surgical advisory band */}
      {visibleAreas.some(a => a.surgical) && (
        <section style={{ padding: '24px 0', background: 'var(--bronze-tint)', borderBottom: '1px solid var(--line)' }}>
          <div className="container flex gap-3" style={{ alignItems: 'center', flexWrap: 'wrap' }}>
            <Icon.alert className="text-bronze" />
            <span style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--ink)' }}>Surgical procedures</strong> are performed only after a paid in-person consultation, candidacy assessment and disclosure of risks. By DHA-licensed surgeon, no guaranteed results.
            </span>
          </div>
        </section>
      )}

      <section className="section">
        <div className="container">
          {visibleAreas.map(area => (
            <div key={area.id} style={{ marginBottom: 96 }}>
              <div className="grid" style={{ gridTemplateColumns: '1fr 1.6fr', gap: 64, alignItems: 'start', marginBottom: 32 }}>
                <div>
                  <div className="eyebrow mb-2">— {area.num} · {area.surgical ? 'Surgical & allied' : 'Non-surgical'}</div>
                  <h2 className="h-display" style={{ fontSize: 'clamp(36px, 4.5vw, 56px)' }}>{area.title}</h2>
                  <p className="muted mt-3" style={{ fontSize: 15, lineHeight: 1.7, maxWidth: 380 }}>{area.blurb}</p>
                </div>
                <div>
                  <div className="grid" style={{ gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, border: '1px solid var(--line)', borderRadius: 3, overflow: 'hidden' }}>
                    {area.treatments.map((t, i) => (
                      <button key={t}
                        onClick={() => go({ page: 'procedure', slug: 'rhinoplasty' })}
                        style={{
                          padding: '20px 24px',
                          textAlign: 'left',
                          background: 'var(--porcelain)',
                          borderRight: i % 2 === 0 ? '1px solid var(--line)' : '0',
                          borderBottom: i < area.treatments.length - 2 ? '1px solid var(--line)' : '0',
                          fontSize: 14.5,
                          color: 'var(--ink)',
                          fontFamily: 'var(--font-display)',
                          fontWeight: 400,
                          letterSpacing: '-0.005em',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'space-between',
                          gap: 12,
                          cursor: 'pointer',
                          transition: 'background 0.12s'
                        }}
                        onMouseEnter={(e) => e.currentTarget.style.background = 'var(--mist)'}
                        onMouseLeave={(e) => e.currentTarget.style.background = 'var(--porcelain)'}
                      >
                        <span style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                          <span className="font-mono" style={{ fontSize: 10, color: 'var(--bronze-deep)', letterSpacing: '0.12em' }}>
                            {String(i + 1).padStart(2, '0')}
                          </span>
                          {t}
                        </span>
                        <Icon.arrow style={{ opacity: 0.4 }} />
                      </button>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

// =============================================
// PROCEDURE DETAIL PAGE
// =============================================
function ProcedureDetail({ go, slug }) {
  const p = PROCEDURE_DETAIL;
  const [activeSection, setActiveSection] = useState('overview');
  const [openFaq, setOpenFaq] = useState(0);

  const sections = [
    { id: 'overview', label: 'Overview', num: '01' },
    { id: 'candidacy', label: 'Candidacy', num: '02' },
    { id: 'process', label: 'Process', num: '03' },
    { id: 'recovery', label: 'Recovery', num: '04' },
    { id: 'risks', label: 'Risks', num: '05' },
    { id: 'faqs', label: 'FAQs', num: '06' }
  ];

  const matchedSurgeon = DOCTORS.find(d => d.slug === 'jaffer-khan');

  return (
    <div className="page-anim">
      <section style={{ padding: '24px 0', borderBottom: '1px solid var(--line)', background: 'var(--mist)' }}>
        <div className="container flex gap-2" style={{ alignItems: 'center', fontSize: 12, color: 'var(--ink-muted)' }}>
          <button onClick={() => go({ page: 'home' })} style={{ color: 'var(--ink-muted)', cursor: 'pointer' }}>Home</button>
          <span>›</span>
          <button onClick={() => go({ page: 'procedures' })} style={{ color: 'var(--ink-muted)', cursor: 'pointer' }}>Procedures</button>
          <span>›</span>
          <button onClick={() => go({ page: 'procedures', area: p.area })} style={{ color: 'var(--ink-muted)', cursor: 'pointer' }}>Plastic Surgery</button>
          <span>›</span>
          <span style={{ color: 'var(--ink)' }}>{p.title}</span>
        </div>
      </section>

      <section className="container">
        <div className="proc-hero">
          <div className="proc-hero-img">
            <img src={p.hero} alt={p.title} />
          </div>
          <div>
            <div className="eyebrow">Surgical · Plastic Surgery</div>
            <h1>{p.title} <span className="h-script" style={{ display: 'block', fontSize: '0.6em', marginTop: 8 }}>— {p.subtitle}</span></h1>
            <p>{p.lede}</p>
            <div className="proc-meta">
              {p.meta.map(m => (
                <div key={m.label}>
                  <div className="label">{m.label}</div>
                  <div className="val">{m.value}</div>
                </div>
              ))}
            </div>
            <div className="flex gap-2 mt-6">
              <button className="btn btn-primary" onClick={() => go({ page: 'book' })}>
                Book a Consultation <Icon.arrow className="btn-icon-arrow" />
              </button>
              <button className="btn btn-ghost" onClick={() => go({ page: 'surgeon', slug: matchedSurgeon.slug })}>
                Meet your surgeon
              </button>
            </div>
          </div>
        </div>

        <div className="proc-body">
          <aside className="proc-sidebar">
            <ul>
              {sections.map(s => (
                <li key={s.id}>
                  <button
                    className={activeSection === s.id ? 'active' : ''}
                    onClick={() => {
                      setActiveSection(s.id);
                      const el = document.getElementById('sec-' + s.id);
                      if (el) {
                        const top = el.getBoundingClientRect().top + window.pageYOffset - 100;
                        window.scrollTo({ top, behavior: 'smooth' });
                      }
                    }}
                  >
                    <span className="num">{s.num}</span> {s.label}
                  </button>
                </li>
              ))}
              <li style={{ marginTop: 20, paddingTop: 20, borderTop: '1px solid var(--line)' }}>
                <button onClick={() => go({ page: 'book' })} style={{ color: 'var(--bronze-deep)' }}>
                  → Book a consultation
                </button>
              </li>
            </ul>
          </aside>

          <div className="proc-content">
            <section id="sec-overview">
              <h2>Overview</h2>
              <p className="lede">{p.lede}</p>
              <p>
                Rhinoplasty is performed by a DHA-licensed Consultant Plastic Surgeon following an
                in-person consultation, photographic facial analysis and a discussion of candidacy,
                expectations and risks. We never proceed without that conversation, and we will tell
                you honestly if surgery is not the right answer.
              </p>
              <p>
                At Aesthetics International, rhinoplasty is offered as part of the surgical Plastic
                Surgery stream led by Dr Jaffer Khan, with surgical procedures performed in our
                DHA-licensed villa setting on Al Wasl Road.
              </p>
            </section>

            <section id="sec-candidacy">
              <h2>Candidacy</h2>
              <p className="muted mb-3">Suitability is decided in consultation. The points below are indicative.</p>
              <ul className="proc-list">
                {p.candidacy.map((c, i) => (
                  <li key={i}>
                    <span className="proc-list-num">{String(i + 1).padStart(2, '0')}</span>
                    <span>{c}</span>
                  </li>
                ))}
              </ul>
            </section>

            <section id="sec-process">
              <h2>Process</h2>
              <p className="muted mb-3">From consultation through to the day of surgery.</p>
              <ul className="proc-list">
                {p.process.map((c, i) => (
                  <li key={i}>
                    <span className="proc-list-num">{String(i + 1).padStart(2, '0')}</span>
                    <span>{c}</span>
                  </li>
                ))}
              </ul>
            </section>

            <section id="sec-recovery">
              <h2>Recovery</h2>
              <p className="muted mb-3">A general timeline — individual recovery varies. Your surgeon will discuss yours in detail.</p>
              <ul className="proc-list">
                {p.recovery.map((c, i) => (
                  <li key={i}>
                    <span className="proc-list-num">{String(i + 1).padStart(2, '0')}</span>
                    <span>{c}</span>
                  </li>
                ))}
              </ul>
            </section>

            <section id="sec-risks">
              <h2>Risks &amp; Considerations</h2>
              <p className="muted mb-3" style={{ maxWidth: 620 }}>
                Surgery carries risk. Below is a non-exhaustive list discussed in full at consultation,
                where alternatives are also considered. No procedure is offered as risk-free or with
                guaranteed results.
              </p>
              <div className="risk-card">
                <div className="risk-card-head">
                  <Icon.alert /> <span className="label">Mandatory disclosure · Surgical</span>
                </div>
                <ul>
                  {p.risks.map((r, i) => <li key={i}>{r}</li>)}
                </ul>
              </div>
            </section>

            <section id="sec-faqs">
              <h2>Frequently asked</h2>
              {p.faqs.map((f, i) => (
                <div key={i} className={`faq-item ${openFaq === i ? 'open' : ''}`}>
                  <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span className="faq-q-text">{f.q}</span>
                    <span className="faq-toggle"><Icon.plus /></span>
                  </button>
                  <div className="faq-a">
                    <p>{f.a}</p>
                  </div>
                </div>
              ))}
            </section>

            <div className="mt-6" style={{ background: 'var(--mist)', padding: 32, borderRadius: 3, display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
              <div style={{ flex: 1, minWidth: 280 }}>
                <div className="eyebrow mb-2">Next step</div>
                <div className="h-display" style={{ fontSize: 26, lineHeight: 1.2 }}>
                  Book a consultation to discuss <em className="h-script">your</em> candidacy.
                </div>
              </div>
              <button className="btn btn-primary btn-lg" onClick={() => go({ page: 'book' })}>
                Book a Consultation <Icon.arrow className="btn-icon-arrow" />
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================
// SURGEONS LIST
// =============================================
function Surgeons({ go }) {
  const [filter, setFilter] = useState('all');
  const list = DOCTORS.filter(d => filter === 'all' || (filter === 'surgeons' ? d.isSurgeon : !d.isSurgeon));

  return (
    <div className="page-anim">
      <section style={{ padding: '64px 0 48px', borderBottom: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow mb-2">Surgeons & Doctors</div>
          <h1 className="h-display" style={{ fontSize: 'clamp(48px, 6vw, 80px)', maxWidth: 900 }}>
            A permanent in-house team, <em className="h-script">named and credentialed.</em>
          </h1>
          <p className="muted mt-3" style={{ fontSize: 16, maxWidth: 620, lineHeight: 1.7 }}>
            Every practitioner is published with credentials and DHA licensure. Surgical procedures are
            performed only by DHA-licensed surgeons matched to your specific procedure.
          </p>

          <div className="flex gap-2 mt-6" style={{ flexWrap: 'wrap' }}>
            {[
              { id: 'all', label: 'Full Team' },
              { id: 'surgeons', label: 'Surgeons & Aesthetic Physicians' },
              { id: 'allied', label: 'Allied & Wellness' }
            ].map(f => (
              <button key={f.id} className="concern-chip" onClick={() => setFilter(f.id)}
                style={filter === f.id ? { background: 'var(--ink)', color: 'var(--porcelain)', borderColor: 'var(--ink)' } : {}}>
                {f.label}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="doctor-grid">
            {list.map(d => (
              <button key={d.slug} className="doctor-card" onClick={() => go({ page: 'surgeon', slug: d.slug })}>
                <div className="doctor-card-img"><img src={d.image} alt={d.name} /></div>
                <div className="doctor-card-body">
                  <h4>{d.name}</h4>
                  <div className="role">{d.role}</div>
                  <div className="dha">{d.dha}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// =============================================
// SURGEON PROFILE
// =============================================
function SurgeonProfile({ go, slug }) {
  const d = DOCTORS.find(x => x.slug === slug) || DOCTORS[0];

  return (
    <div className="page-anim">
      <section style={{ padding: '24px 0', borderBottom: '1px solid var(--line)' }}>
        <div className="container flex gap-2" style={{ alignItems: 'center', fontSize: 12, color: 'var(--ink-muted)' }}>
          <button onClick={() => go({ page: 'home' })} style={{ color: 'var(--ink-muted)', cursor: 'pointer' }}>Home</button>
          <span>›</span>
          <button onClick={() => go({ page: 'surgeons' })} style={{ color: 'var(--ink-muted)', cursor: 'pointer' }}>Surgeons & Doctors</button>
          <span>›</span>
          <span style={{ color: 'var(--ink)' }}>{d.name}</span>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start' }}>
            <div>
              <div style={{ background: 'var(--mist)', borderRadius: 3, overflow: 'hidden', aspectRatio: '4/5' }}>
                <img src={d.portrait || d.image} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div className="mt-3" style={{ background: 'var(--bronze-tint)', border: '1px solid var(--bronze)', padding: 20, borderRadius: 3 }}>
                <div className="eyebrow text-bronze mb-1">DHA Verification</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--ink)' }}>{d.dha}</div>
                <a href="#" style={{ fontSize: 11.5, color: 'var(--bronze-deep)', textDecoration: 'underline', marginTop: 8, display: 'inline-block' }}>
                  Verify on DHA Sheryan Registry <Icon.external />
                </a>
              </div>
            </div>

            <div>
              <div className="eyebrow mb-2">{d.role}</div>
              <h1 className="h-display" style={{ fontSize: 'clamp(40px, 5vw, 64px)' }}>{d.name}</h1>
              <div className="font-display italic text-bronze" style={{ fontSize: 22, marginTop: 8 }}>{d.title}</div>
              <p className="muted mt-3" style={{ fontSize: 16, lineHeight: 1.7, maxWidth: 580 }}>{d.bio}</p>

              <div className="grid mt-6" style={{ gridTemplateColumns: '1fr 1fr', gap: 24, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                <div className="cred-item"><div className="label">Training</div><div className="val">{d.trained}</div></div>
                <div className="cred-item"><div className="label">Experience</div><div className="val">{d.experience}</div></div>
              </div>

              <div className="mt-6">
                <div className="eyebrow mb-2">Areas of Practice</div>
                <div className="concern-rail">
                  {d.specialties.map(s => <span key={s} className="concern-chip" style={{ cursor: 'default' }}>{s}</span>)}
                </div>
              </div>

              <div className="flex gap-2 mt-6" style={{ flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => go({ page: 'book' })}>
                  Book with {d.name.split(' ').slice(-1)[0]} <Icon.arrow className="btn-icon-arrow" />
                </button>
                <a className="btn btn-ghost" href={CLINIC_INFO.whatsappHref} target="_blank" rel="noopener">
                  WhatsApp the clinic
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--mist)' }}>
        <div className="container">
          <div className="sec-head">
            <h2>Other members <em>of the clinical team</em></h2>
            <p>Aesthetics International operates as a permanent in-house team. Procedures are matched to the right practitioner.</p>
          </div>
          <div className="doctor-grid">
            {DOCTORS.filter(x => x.slug !== d.slug).slice(0, 4).map(o => (
              <button key={o.slug} className="doctor-card" onClick={() => go({ page: 'surgeon', slug: o.slug })}>
                <div className="doctor-card-img"><img src={o.image} alt={o.name} /></div>
                <div className="doctor-card-body">
                  <h4>{o.name}</h4>
                  <div className="role">{o.role}</div>
                  <div className="dha">{o.dha}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProceduresHub, ProcedureDetail, Surgeons, SurgeonProfile });