// Sections part 2 — treatments, wellness, doctors, before/after, locations, booking, footer.
const { Icon: Icon2 } = window.NovaSections1;

// ============ TREATMENTS — interactive area switcher ============
function TreatmentsBlock() {
  const [active, setActive] = React.useState(TREATMENT_AREAS[0].id);
  const [mode, setMode] = React.useState('area'); // 'area' | 'concern'
  const area = TREATMENT_AREAS.find(a => a.id === active);

  return (
    <section id="treatments" data-screen-label="03 Treatments" style={{ background: 'var(--paper)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 14 }}>— Treatments</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              A measured catalogue. <span style={{ fontStyle: 'italic', color: 'var(--sage-deep)' }}>Not a menu.</span>
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: 520, marginTop: 18 }}>
              Every page covers <em>what it is</em>, <em>candidacy</em>, <em>process</em>, <em>recovery</em> and an honest FAQ.
              All consultations are doctor-led and consultation-first. No published pricing.
            </p>
          </div>

          {/* mode switcher */}
          <div style={{ display: 'inline-flex', padding: 4, background: 'var(--mist)', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
            <button onClick={() => setMode('area')} style={{ padding: '10px 18px', borderRadius: 999, background: mode === 'area' ? 'var(--paper)' : 'transparent', boxShadow: mode === 'area' ? '0 2px 6px rgba(0,0,0,0.06)' : 'none' }}>By area</button>
            <button onClick={() => setMode('concern')} style={{ padding: '10px 18px', borderRadius: 999, background: mode === 'concern' ? 'var(--paper)' : 'transparent', boxShadow: mode === 'concern' ? '0 2px 6px rgba(0,0,0,0.06)' : 'none' }}>By concern</button>
          </div>
        </div>

        {mode === 'area' ? (
          <>
            {/* area tabs */}
            <div style={{ display: 'flex', gap: 0, borderBottom: '1px solid var(--line)', marginBottom: 40, overflowX: 'auto' }}>
              {TREATMENT_AREAS.map(a => {
                const isActive = a.id === active;
                return (
                  <button key={a.id} id={`area-${a.id}`} onClick={() => setActive(a.id)} style={{
                    padding: '18px 24px',
                    fontSize: 15,
                    fontWeight: isActive ? 600 : 400,
                    color: isActive ? 'var(--ink)' : 'var(--muted)',
                    borderBottom: isActive ? '2px solid var(--ink)' : '2px solid transparent',
                    marginBottom: -1,
                    whiteSpace: 'nowrap',
                    transition: 'all .2s',
                  }}>
                    {a.label}
                  </button>
                );
              })}
            </div>

            {/* active area panel */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }}>
              <div className="img-hover" style={{ aspectRatio: '4 / 5', overflow: 'hidden' }}>
                <img src={area.img} alt={area.label} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <h3 className="serif" style={{ fontSize: 40, fontWeight: 300, margin: '0 0 16px', letterSpacing: '-0.015em' }}>{area.label}</h3>
                  <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 480, marginBottom: 32 }}>{area.blurb}</p>
                </div>
                <div>
                  <div className="mono-label" style={{ color: 'var(--muted)', marginBottom: 16 }}>Treatments offered</div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', borderTop: '1px solid var(--line-soft)' }}>
                    {area.treatments.map((t, i) => (
                      <a key={i} href="#" className="group" style={{
                        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                        padding: '16px 0',
                        borderBottom: '1px solid var(--line-soft)',
                        paddingRight: i % 2 === 0 ? 16 : 0,
                        paddingLeft: i % 2 === 1 ? 16 : 0,
                        borderLeft: i % 2 === 1 ? '1px solid var(--line-soft)' : 'none',
                      }}>
                        <span style={{ fontSize: 15, fontWeight: 500 }}>{t.name}</span>
                        <span className="arrow" style={{ color: 'var(--muted)' }}><Icon2.arrow /></span>
                      </a>
                    ))}
                  </div>
                  <div style={{ marginTop: 24, padding: '14px 16px', background: 'var(--sage-tint)', fontSize: 12, color: 'var(--sage-deep)', display: 'flex', alignItems: 'center', gap: 10 }}>
                    <Icon2.lock /> DHA / MOHAP-compliant treatment pages. No guaranteed outcomes; consultation-first.
                  </div>
                </div>
              </div>
            </div>
          </>
        ) : (
          /* concern grid */
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 1, background: 'var(--line-soft)', border: '1px solid var(--line-soft)' }}>
            {CONCERNS.map((c, i) => (
              <a key={c} href="#" style={{ background: 'var(--paper)', padding: '36px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 220 }} className="group">
                <div className="serif" style={{ fontSize: 28, fontWeight: 300, lineHeight: 1.1, color: 'var(--ink)' }}>{c}</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
                  <span className="mono-label" style={{ color: 'var(--muted)' }}>0{i + 1}</span>
                  <span className="arrow"><Icon2.arrow /></span>
                </div>
              </a>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// ============ WELLNESS — differentiator ============
function WellnessBlock() {
  const [active, setActive] = React.useState(WELLNESS[0].id);
  const item = WELLNESS.find(w => w.id === active);

  return (
    <section id="wellness" data-screen-label="04 Wellness" style={{ background: 'var(--sage-deep)', color: 'var(--paper)', padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, right: 0, fontSize: 'min(40vw, 600px)', lineHeight: 0.8, color: 'rgba(255,255,255,0.04)', fontFamily: 'Fraunces, serif', fontWeight: 300, transform: 'translate(20%, -20%)' }} aria-hidden="true">N</div>

      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, marginBottom: 64 }}>
          <div>
            <div className="mono-label" style={{ color: 'var(--brass)', marginBottom: 18, display: 'inline-flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 24, height: 1, background: 'var(--brass)' }}></span>The differentiator
            </div>
            <h2 className="serif" style={{ fontSize: 'clamp(42px, 5vw, 72px)', lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              The wellness arm <span style={{ fontStyle: 'italic' }}>most aesthetic clinics don't have.</span>
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'end' }}>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', maxWidth: 500 }}>
              We run a regenerative-medicine and longevity programme out of the same clinics — IV therapy,
              NAD+, peptide protocols, exosomes, functional diagnostics. It's how aesthetics meets
              holistic wellness in practice, not just in a tagline.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'start' }}>
          <div style={{ borderTop: '1px solid rgba(255,255,255,0.18)' }}>
            {WELLNESS.map(w => {
              const isActive = w.id === active;
              return (
                <button key={w.id} onClick={() => setActive(w.id)} style={{
                  display: 'block', width: '100%', textAlign: 'left',
                  padding: '24px 0',
                  borderBottom: '1px solid rgba(255,255,255,0.18)',
                  color: isActive ? 'var(--paper)' : 'rgba(255,255,255,0.55)',
                  transition: 'color .2s',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <span className="serif" style={{ fontSize: 28, fontWeight: 300, letterSpacing: '-0.01em' }}>{w.name}</span>
                    <span style={{ fontSize: 12, opacity: 0.7, letterSpacing: '0.12em', textTransform: 'uppercase' }}>0{WELLNESS.indexOf(w) + 1} →</span>
                  </div>
                  <div style={{ fontSize: 13, marginTop: 4, opacity: 0.7 }}>{w.sub}</div>
                </button>
              );
            })}
          </div>
          <div>
            <div className="img-hover" style={{ aspectRatio: '5 / 4', overflow: 'hidden', marginBottom: 24 }}>
              <img src={item.img} alt={item.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} key={item.id} className="fade-up" />
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', maxWidth: 560 }} className="fade-up" key={item.id + 'p'}>
              {item.desc}
            </p>
            <a href="#booking" className="btn" style={{ marginTop: 24, background: 'var(--brass)', color: 'var(--ink)' }}>
              Talk to a wellness physician <span className="arrow"><Icon2.arrow /></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ DOCTORS ============
function DoctorsBlock() {
  return (
    <section id="doctors" data-screen-label="05 Doctors" style={{ background: 'var(--paper-warm)', padding: '120px 0' }}>
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 640 }}>
            <div className="mono-label" style={{ color: 'var(--brass-deep)', marginBottom: 14 }}>— Our doctors</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1, fontWeight: 300, margin: 0, letterSpacing: '-0.02em' }}>
              Verified. <span style={{ fontStyle: 'italic' }}>Credentialled.</span> Accountable.
            </h2>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', maxWidth: 520, marginTop: 18 }}>
              We publish the three credential-verified surgeons below. The remaining roster of doctors and
              therapists is being re-verified against DHA licence checks before going live.
            </p>
          </div>
          <a href="#" className="btn btn-ghost group">See full team <span className="arrow"><Icon2.arrow /></span></a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {DOCTORS.map((d, i) => <DoctorCard key={d.name} d={d} idx={i} />)}
        </div>

        <div style={{ marginTop: 48, padding: '18px 24px', background: 'var(--paper)', border: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 14, fontSize: 13, color: 'var(--ink-soft)' }}>
          <Icon2.lock /> All practising doctors are licensed under the relevant Dubai Health Authority (DHA) framework. Per-doctor DHA licence numbers visible on each profile.
        </div>
      </div>
    </section>
  );
}

function DoctorCard({ d, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: 'var(--paper)', border: '1px solid var(--line-soft)', overflow: 'hidden', position: 'relative' }}>
      <div style={{ aspectRatio: '4 / 5', position: 'relative', overflow: 'hidden', background: 'var(--mist)' }}>
        <img src={d.img} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', transition: 'transform 1s' , transform: hover ? 'scale(1.04)' : 'scale(1)' }} />
        <div style={{ position: 'absolute', top: 16, left: 16, padding: '4px 10px', background: 'rgba(251,250,246,0.92)', backdropFilter: 'blur(4px)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>
          0{idx + 1} / Verified
        </div>
        {/* hover panel with bio */}
        <div style={{ position: 'absolute', inset: 0, background: 'rgba(26,31,36,0.92)', color: 'var(--paper)', padding: 28, display: 'flex', flexDirection: 'column', justifyContent: 'end', opacity: hover ? 1 : 0, transition: 'opacity .3s' }}>
          <p style={{ fontSize: 14, lineHeight: 1.55, margin: '0 0 16px' }}>{d.bio}</p>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 14 }}>
            {d.interests.map(i => (
              <span key={i} style={{ fontSize: 11, padding: '4px 10px', border: '1px solid rgba(255,255,255,0.3)', borderRadius: 99 }}>{i}</span>
            ))}
          </div>
          <div style={{ fontSize: 11, opacity: 0.7, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Languages · {d.languages.join(' · ')}</div>
        </div>
      </div>
      <div style={{ padding: '20px 22px 24px' }}>
        <h3 className="serif" style={{ fontSize: 24, fontWeight: 400, margin: '0 0 4px', letterSpacing: '-0.01em' }}>{d.name}</h3>
        <div style={{ fontSize: 13, color: 'var(--brass-deep)', fontWeight: 500, marginBottom: 10 }}>{d.role}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.5, marginBottom: 16 }}>{d.cred}</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 14, borderTop: '1px solid var(--line-soft)' }}>
          <span style={{ fontSize: 12, color: 'var(--muted)' }}>{d.experience}</span>
          <a href="#" className="group" style={{ fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Profile <span className="arrow"><Icon2.arrow /></span></a>
        </div>
      </div>
    </div>
  );
}

window.NovaSections2 = { TreatmentsBlock, WellnessBlock, DoctorsBlock };