/* Symphony — Home page */
function PageHome({ onNavigate, tweaks }) {
  const hero = tweaks.heroVariant || "split";

  return (
    <main className="page-enter">
      {/* HERO */}
      <section className="container">
        {hero === "split" && <HeroSplit onNavigate={onNavigate} />}
        {hero === "editorial" && <HeroEditorial onNavigate={onNavigate} />}
        {hero === "quiet"     && <HeroQuiet onNavigate={onNavigate} />}
      </section>

      {/* TRUST STRIP */}
      <TrustStrip />

      {/* WHY SYMPHONY — French-clinical promise */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>The Symphony Difference</div>
              <h2 className="display">French <em>elegance</em>, dermatologist-led, painlessly Dubai.</h2>
            </div>
            <p className="body-lg">
              Founded by French aesthetic practitioners, run as a medical clinic. Every protocol is supervised by a board-certified dermatologist;
              every laser session uses the FDA-cleared Candela GentleMax Pro. We sell results, not subscriptions — and we'll tell you when you don't need a treatment.
            </p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.5rem' }}>
            <Pillar n="01" title="Certified, supervised, devices you can name"
                    body="DHA-approved practice with named medical oversight. Candela GentleMax Pro for laser, Juvederm/Allergan for fillers, FDA-cleared CoolSculpting for body — equipment you can verify before you book." />
            <Pillar n="02" title="Couture protocols, calmly delivered"
                    body="Every treatment starts with a quiet consultation. We map your skin diary, your goals, your day-after schedule. Then we customise — the opposite of an off-the-shelf clinic." />
            <Pillar n="03" title="Pricing without theatre"
                    body="The flagship laser menu is fully priced and on the website. Everything else is from a transparent consultation — no upsell rooms, no whispered packages. Tabby on every price." />
          </div>
        </div>
      </section>

      {/* TREATMENT CATEGORIES */}
      <section className="section" style={{ background: 'var(--ivory-deep)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>Treatments</div>
              <h2 className="display">A complete <em>aesthetic</em> menu under one DHA-certified roof.</h2>
            </div>
            <p className="body-lg">From the priced laser flagship to dermatologist-led skin clinics — six departments, one front desk, one consistent standard of care.</p>
          </div>
          <div className="tx-grid">
            {TREATMENTS.map(t => (
              <article key={t.slug} className="tx-card" onClick={() => onNavigate(t.slug === 'laser-hair-removal' ? 'laser' : 'treatments')}>
                <div className="tx-card-media"><img src={t.image} alt={t.name} loading="lazy" /></div>
                <div className="tx-card-body">
                  <div className="chip" style={{ alignSelf: 'flex-start', marginBottom: '.75rem' }}>{t.category}</div>
                  <h3>{t.name}</h3>
                  <p>{t.blurb}</p>
                  <div className="tx-card-foot">
                    <div className="price">{t.priceLabel}</div>
                    <div className="arrow"><Icon.Arrow s={14} /></div>
                  </div>
                </div>
              </article>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: '3rem' }}>
            <a className="btn-text" href="#treatments" onClick={(e)=>{e.preventDefault();onNavigate('treatments');}}>
              See all treatments <Icon.Arrow s={12} />
            </a>
          </div>
        </div>
      </section>

      {/* LASER FLAGSHIP TEASER */}
      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 'clamp(2rem, 5vw, 5rem)', alignItems: 'center' }}>
            <div>
              <span className="chip chip-coral" style={{ marginBottom: '1.25rem' }}>Live offer · Limited dates</span>
              <h2 className="display" style={{ marginBottom: '1.5rem' }}>
                Painless laser, on the Candela <em>GentleMax Pro</em> — from AED 75.
              </h2>
              <p className="body-lg" style={{ marginBottom: '2rem', maxWidth: '32rem' }}>
                Suitable for all skin types, including darker phototypes. Our most reviewed treatment in Dubai — fully priced, no commitment pressure.
              </p>

              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '1rem', maxWidth: '34rem', marginBottom: '2rem' }}>
                <LaserTeaser name="Small Area"       price={75} />
                <LaserTeaser name="Underarms"        price={99} />
                <LaserTeaser name="Full Bikini"      price={129} />
                <LaserTeaser name="Full Body"        price={330} highlight />
              </div>

              <div style={{ display: 'flex', gap: '.75rem', flexWrap: 'wrap' }}>
                <a className="btn btn-primary" href="#laser" onClick={(e)=>{e.preventDefault();onNavigate('laser');}}>
                  Full laser menu <Icon.Arrow s={14} />
                </a>
                <a className="btn btn-ghost" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
                  Book consultation
                </a>
              </div>
              <p className="muted" style={{ fontSize: 12, marginTop: '1.25rem' }}>
                Tabby available · pay in 4. Prices include VAT.
              </p>
            </div>
            <div style={{ position: 'relative' }}>
              <img src="assets/clinic-machines.webp" alt="Laser technology at Symphony"
                   style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover', borderRadius: 'var(--radius)' }} />
              <div style={{
                position: 'absolute', top: '1.5rem', right: '-1.5rem',
                background: 'var(--ink)', color: 'var(--ivory)',
                padding: '1.25rem 1.5rem', borderRadius: 'var(--radius)',
                boxShadow: 'var(--shadow-card)', maxWidth: '14rem',
              }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: '2.25rem', lineHeight: 1, color: 'var(--coral)' }}>50% off</div>
                <div style={{ fontFamily: 'var(--font-eyebrow)', fontSize: 10, letterSpacing: '.18em', textTransform: 'uppercase', color: 'var(--blush)', marginTop: '.5rem' }}>
                  First-time client offer
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* RESULTS */}
      <section className="section" style={{ background: 'var(--ivory-deep)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>Results · with consent</div>
              <h2 className="display">A few of our <em>quiet</em> wins.</h2>
            </div>
            <p className="body-lg">Move each slider to compare the before and after sides of consented case imagery.</p>
          </div>
          <div className="result-card-grid">
            <CompositeBAFrame
              label="Botox · eye area refinement"
              image="assets/botox-beforeafter-1.webp"
              note="Slide to review a consented before/after case visual."
            />
            <CompositeBAFrame
              label="Botox · forehead and eye area"
              image="assets/botox-beforeafter-2.webp"
              note="Slide to review a consented before/after case visual."
            />
          </div>
        </div>
      </section>

      {/* TEAM TEASER */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>The people</div>
              <h2 className="display">Names you'll remember. Hands you'll trust.</h2>
            </div>
            <p className="body-lg">Our therapists are named in your reviews for a reason. Read why — and meet the dermatologist and aestheticians behind every session.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1.25rem' }}>
            {TEAM.slice(0, 4).map((m, i) => (
              <div key={i}>
                <div className="monogram">{m.initials}</div>
                <div style={{ marginTop: '1rem' }}>
                  <div className="eyebrow">{m.role}</div>
                  <h3 className="display" style={{ fontSize: '1.5rem', marginTop: '.35rem' }}>{m.name}</h3>
                </div>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: '3rem' }}>
            <a className="btn-text" href="#team" onClick={(e)=>{e.preventDefault();onNavigate('team');}}>
              Meet the full team <Icon.Arrow s={12} />
            </a>
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="section" style={{ background: 'var(--ivory-deep)', borderBlock: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>Voices</div>
              <h2 className="display">4.9 <em>★</em> on Fresha, across 908 visits.</h2>
            </div>
            <div>
              <p className="body-lg">Dated, sourced reviews from Fresha and BookBeauty — not testimonials we wrote about ourselves.</p>
              <div style={{ marginTop: '1.5rem' }}><FreshaBadge /></div>
            </div>
          </div>
          <ReviewsCarousel reviews={REVIEWS} />
          <div style={{ textAlign: 'center', marginTop: '3rem' }}>
            <a className="btn-text" href="#reviews" onClick={(e)=>{e.preventDefault();onNavigate('reviews');}}>
              All reviews <Icon.Arrow s={12} />
            </a>
          </div>
        </div>
      </section>

      {/* INSTAGRAM */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>@symphonybeautyclinic</div>
              <h2 className="display">From the <em>clinic</em>, recently.</h2>
            </div>
            <p className="body-lg">A quieter feed than most — we post what we actually do, with consented results and behind-the-counter detail.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '.75rem' }}>
            {INSTAGRAM.map((src, i) => (
              <a key={i} href="#" style={{ display: 'block', aspectRatio: '1/1', overflow: 'hidden', borderRadius: 'var(--radius-sm)' }}>
                <img src={src} alt="" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s' }}
                     onMouseEnter={(e)=>{e.target.style.transform='scale(1.05)';}}
                     onMouseLeave={(e)=>{e.target.style.transform='scale(1)';}} />
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* BOOKING CTA */}
      <section className="section" style={{ background: 'var(--ivory-deep)', borderTop: '1px solid var(--hairline)' }}>
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4rem', alignItems: 'center' }}>
            <div>
              <div className="eyebrow"><span className="rule"/>Book a consultation</div>
              <h2 className="display" style={{ marginBlock: '1rem 1.5rem' }}>
                The same-day callback that ends the doom-scrolling.
              </h2>
              <p className="body-lg" style={{ marginBottom: '2rem' }}>
                Send your details — we'll call back within hours during clinic hours.
                Prefer WhatsApp? It's the fastest line in.
              </p>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                <ContactRow icon={<Icon.Phone s={18}/>} label="Call" value="+971 4 267 2368" href="tel:+97142672368" />
                <ContactRow icon={<Icon.WhatsApp s={18}/>} label="WhatsApp" value="+971 58 564 5788" href="https://wa.me/971585645788" />
                <ContactRow icon={<Icon.Pin s={18}/>} label="Visit" value="908 Regal Tower, Business Bay" />
                <ContactRow icon={<Icon.Clock s={18}/>} label="Hours" value="Mon–Sat · 10:00–22:00" />
              </ul>
            </div>
            <BookingForm />
          </div>
        </div>
      </section>
    </main>
  );
}

// ─── Hero variants ───
function HeroSplit({ onNavigate }) {
  return (
    <div className="hero">
      <div>
        <div className="hero-eyebrow-row">
          <span className="chip chip-verify"><span className="dot"/>DHA-Certified</span>
          <FreshaBadge compact />
        </div>
        <h1 className="display hero-title">
          French <em>beauty</em>,<br />written in Dubai.
        </h1>
        <p className="hero-sub">
          A dermatologist-led aesthetic clinic on the 9th floor of Regal Tower —
          where Parisian-clinical detail meets the Candela GentleMax Pro and an 4.9★ visit log.
        </p>
        <div className="hero-ctas">
          <a className="btn btn-coral" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
            Book a Consultation <Icon.Arrow s={14} />
          </a>
          <a className="btn btn-ghost" href="https://wa.me/971585645788" target="_blank" rel="noopener">
            <Icon.WhatsApp s={14} /> WhatsApp
          </a>
        </div>

        <div className="hero-proof">
          <div className="hero-proof-item">
            <div className="num">4.9<span style={{ color: 'var(--coral)', marginLeft: '4px' }}>★</span></div>
            <div className="label">908 Fresha visits</div>
          </div>
          <div className="hero-proof-item">
            <div className="num">From <span style={{ color: 'var(--coral-deep)' }}>75</span></div>
            <div className="label">AED · laser session</div>
          </div>
          <div className="hero-proof-item">
            <div className="num">9F</div>
            <div className="label">Regal Tower · free parking</div>
          </div>
        </div>
      </div>

      <div className="hero-visual">
        <img src="assets/treatment-hydrafacial.webp" alt="HydraFacial treatment at Symphony" className="hero-img" />
        <div className="hero-card-overlay">
          <div className="hero-card-overlay-rating">4.9</div>
          <div className="hero-card-overlay-text">
            <strong>★★★★★ · Fresha</strong>
            From 908 verified visits over 18 months.
          </div>
        </div>
      </div>
    </div>
  );
}

function HeroEditorial({ onNavigate }) {
  return (
    <div style={{ position: 'relative', minHeight: '78vh', borderRadius: 'var(--radius)', overflow: 'hidden', marginTop: '2rem' }}>
      <img src="assets/treatment-hydrafacial.webp" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(30,27,25,.65), rgba(30,27,25,.1) 60%)' }} />
      <div style={{ position: 'relative', padding: 'clamp(3rem, 6vw, 6rem)', color: 'var(--ivory)', maxWidth: '720px' }}>
        <span className="chip" style={{ background: 'rgba(255,255,255,.15)', color: 'var(--ivory)', borderColor: 'rgba(255,255,255,.25)' }}>
          <span className="dot" style={{ background: 'var(--coral)' }}/> DHA-Certified · Business Bay
        </span>
        <h1 className="display" style={{ marginBlock: '1.5rem', color: 'var(--ivory)', fontSize: 'clamp(3rem, 7vw, 6rem)' }}>
          French <em style={{ color: 'var(--coral)' }}>beauty</em>,<br/>written in Dubai.
        </h1>
        <p style={{ fontSize: '1.125rem', maxWidth: '34rem', color: 'rgba(255,255,255,.92)', marginBottom: '2rem' }}>
          Dermatologist-led. Candela-equipped. 4.9★ on Fresha across 908 visits.
        </p>
        <div style={{ display: 'flex', gap: '.75rem', flexWrap: 'wrap' }}>
          <a className="btn btn-coral" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
            Book a Consultation <Icon.Arrow s={14} />
          </a>
          <a className="btn btn-ghost" style={{ color: 'var(--ivory)', borderColor: 'rgba(255,255,255,.4)' }} href="https://wa.me/971585645788" target="_blank" rel="noopener">
            <Icon.WhatsApp s={14} /> WhatsApp
          </a>
        </div>
      </div>
    </div>
  );
}

function HeroQuiet({ onNavigate }) {
  return (
    <div style={{ textAlign: 'center', padding: 'clamp(5rem, 10vw, 8rem) 0' }}>
      <FreshaBadge />
      <h1 className="display" style={{ marginBlock: '2rem 1.5rem', fontSize: 'clamp(3.5rem, 9vw, 7rem)' }}>
        French <em>beauty</em>,<br/>written in Dubai.
      </h1>
      <p className="body-lg" style={{ maxWidth: '36rem', margin: '0 auto 2.5rem' }}>
        A DHA-certified, dermatologist-led aesthetic clinic on the 9th floor of Regal Tower, Business Bay.
      </p>
      <div className="hero-ctas" style={{ justifyContent: 'center' }}>
        <a className="btn btn-coral" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
          Book a Consultation <Icon.Arrow s={14} />
        </a>
        <a className="btn btn-ghost" href="#treatments" onClick={(e)=>{e.preventDefault();onNavigate('treatments');}}>
          See treatments
        </a>
      </div>
      <div className="divider-elegant" style={{ marginTop: '4rem' }}>S</div>
    </div>
  );
}

// ─── Helpers ───
function Pillar({ n, title, body }) {
  return (
    <div style={{ padding: '2rem', background: 'var(--cream-card)', border: '1px solid var(--hairline)', borderRadius: 'var(--radius)' }}>
      <div className="eyebrow" style={{ color: 'var(--coral-deep)', marginBottom: '1.5rem' }}>{n}</div>
      <h3 className="display" style={{ fontSize: '1.5rem', marginBottom: '1rem', maxWidth: '14ch' }}>{title}</h3>
      <p style={{ color: 'var(--stone)', fontSize: '.9375rem', lineHeight: 1.6 }}>{body}</p>
    </div>
  );
}

function LaserTeaser({ name, price, highlight }) {
  return (
    <div style={{
      padding: '1.25rem 1.25rem',
      background: highlight ? 'var(--blush)' : 'var(--cream-card)',
      border: '1px solid var(--hairline)',
      borderRadius: 'var(--radius-sm)',
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
    }}>
      <span style={{ fontFamily: 'var(--font-eyebrow)', fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase' }}>{name}</span>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: '1.5rem', color: 'var(--coral-deep)' }}>
        <span style={{ fontSize: 11, letterSpacing: '.14em', fontFamily: 'var(--font-eyebrow)', marginRight: '.35rem', color: 'var(--stone)' }}>AED</span>
        {price}
      </span>
    </div>
  );
}

function CompositeBAFrame({ label, image, note }) {
  const ref = React.useRef(null);
  const [pos, setPos] = React.useState(50);
  const dragging = React.useRef(false);

  React.useEffect(() => {
    const move = (e) => {
      if (!dragging.current || !ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const x = (e.touches ? e.touches[0].clientX : e.clientX) - r.left;
      setPos(Math.max(0, Math.min(100, (x / r.width) * 100)));
    };
    const up = () => { dragging.current = false; };
    window.addEventListener('mousemove', move);
    window.addEventListener('touchmove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchend', up);
    return () => {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchend', up);
    };
  }, []);

  return (
    <figure className="result-slider-card result-slider-card--composite">
      <div
        className="composite-ba"
        ref={ref}
        style={{ '--ba-pos': pos + '%' }}
        onMouseDown={() => { dragging.current = true; }}
        onTouchStart={() => { dragging.current = true; }}
        role="img"
        aria-label={label}
      >
        <div className="composite-ba-layer composite-ba-before" aria-hidden="true">
          <img src={image} alt="" />
        </div>
        <div className="composite-ba-layer composite-ba-after" aria-hidden="true">
          <img src={image} alt="" />
        </div>
        <div className="beforeafter-handle" />
        <span className="beforeafter-tag before">Before</span>
        <span className="beforeafter-tag after">After</span>
      </div>
      <figcaption>
        <div>
          <span>{label}</span>
          {note && <small>{note}</small>}
        </div>
        <span className="chip chip-verify"><Icon.Check s={11}/> Consented</span>
      </figcaption>
    </figure>
  );
}

function ContactRow({ icon, label, value, href }) {
  const Tag = href ? 'a' : 'div';
  return (
    <Tag href={href} target={href && href.startsWith('http') ? '_blank' : undefined} rel={href && href.startsWith('http') ? 'noopener' : undefined}
         style={{ display: 'flex', gap: '1rem', alignItems: 'center', padding: '1rem 0', borderBottom: '1px solid var(--hairline)' }}>
      <span style={{ color: 'var(--coral-deep)' }}>{icon}</span>
      <div style={{ flex: 1 }}>
        <div className="eyebrow" style={{ marginBottom: '2px' }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: '1.25rem' }}>{value}</div>
      </div>
    </Tag>
  );
}

Object.assign(window, { PageHome, HeroSplit, HeroEditorial, HeroQuiet });
