// Larger page sections — treatments, branch switcher, specialists, etc.

// --- TREATMENT GRID ---
function TreatmentGrid() {
  return (
    <section id="treatments" style={{ background: 'var(--paper)', padding: '96px 0 88px' }}>
      <div className="container">
        <SectionHead
          eyebrow="Treatments"
          title={<>Specialist-led care, end-to-end —<br/>from routine hygiene to full-mouth rehabilitation.</>}
          kicker="Eight specialties practiced under one brand. Every treatment journey is mapped: what it is, candidacy, process, recovery and FAQs — all DHA-compliant. We never publish a price without verification."
          action={
            <a href="#all-treatments" style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              color: 'var(--clinic)', fontSize: 14, fontWeight: 500,
              borderBottom: '1px solid var(--clinic)', paddingBottom: 4,
            }}>All treatments <Icon.Arrow /></a>
          }
        />

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
        }}>
          {TREATMENTS.map((t, i) => (
            <a key={t.slug} href={'#t-' + t.slug} style={{
              background: 'var(--paper)', border: '1px solid var(--line)',
              borderRadius: 'var(--r-lg)', overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              transition: 'transform .2s ease, box-shadow .2s ease, border-color .2s ease',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-3px)';
              e.currentTarget.style.boxShadow = '0 14px 36px -18px rgba(7,51,57,0.18)';
              e.currentTarget.style.borderColor = 'var(--mint-deep)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.boxShadow = 'none';
              e.currentTarget.style.borderColor = 'var(--line)';
            }}>
              <div style={{ aspectRatio: '4 / 3', overflow: 'hidden', background: 'var(--paper-warmer)' }}>
                <img src={t.img} alt="" style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  transition: 'transform .4s ease',
                }}/>
              </div>
              <div style={{ padding: '18px 18px 20px', display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }}>
                <div className="meta" style={{ color: 'var(--clinic)' }}>{t.cat}</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 20, fontWeight: 500, lineHeight: 1.2 }}>{t.name}</div>
                <p style={{ fontSize: 13, color: 'var(--slate)', lineHeight: 1.5, marginTop: 2 }}>{t.blurb}</p>
                <div style={{
                  marginTop: 'auto', paddingTop: 14, fontSize: 12, color: 'var(--clinic)',
                  display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 500,
                }}>
                  Treatment journey <Icon.Arrow />
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- BRANCH SWITCHER (interactive map + branch list) ---
function BranchSwitcher({ branch, setBranch }) {
  // map all 8 branches onto an abstract Dubai grid.
  // Use real lat/lng to position relative on the SVG.
  const lats = BRANCHES.map(b => b.coords[0]);
  const lngs = BRANCHES.map(b => b.coords[1]);
  const minLat = Math.min(...lats) - 0.012;
  const maxLat = Math.max(...lats) + 0.012;
  const minLng = Math.min(...lngs) - 0.012;
  const maxLng = Math.max(...lngs) + 0.012;
  const project = (lat, lng) => ({
    x: ((lng - minLng) / (maxLng - minLng)) * 100,
    y: ((maxLat - lat) / (maxLat - minLat)) * 100,
  });

  return (
    <section id="clinics" style={{ background: 'var(--paper-warm)', padding: '96px 0' }}>
      <div className="container">
        <SectionHead
          eyebrow="Find your clinic"
          title={<>Eight clinics across Dubai —<br/>choose your nearest.</>}
          kicker="Every booking is branch-aware: hours, on-site specialists, parking notes and reviews are local to the clinic you pick. 24/7 emergency line works from any branch."
        />

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.25fr', gap: 28,
          background: 'var(--paper)', borderRadius: 'var(--r-xl)',
          border: '1px solid var(--line)', overflow: 'hidden',
          minHeight: 540,
        }}>
          {/* LEFT: list */}
          <div style={{ padding: '24px 4px 24px 24px', overflow: 'auto', maxHeight: 600 }}>
            <div className="meta" style={{ padding: '0 12px 12px', display: 'flex', justifyContent: 'space-between' }}>
              <span>8 locations</span>
              <span style={{ color: 'var(--clinic)' }}>● live</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {BRANCHES.map((b, i) => {
                const active = b.slug === branch.slug;
                return (
                  <button key={b.slug} onClick={() => setBranch(b)} style={{
                    display: 'grid', gridTemplateColumns: '24px 1fr auto', gap: 12,
                    alignItems: 'center', textAlign: 'left',
                    padding: '14px 14px', borderRadius: 'var(--r-md)',
                    background: active ? 'var(--mint)' : 'transparent',
                    border: '1px solid ' + (active ? 'var(--mint-deep)' : 'transparent'),
                    transition: 'background .15s ease',
                  }}
                  onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = 'var(--paper-warmer)'; }}
                  onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = 'transparent'; }}>
                    <div style={{
                      width: 24, height: 24, borderRadius: '50%',
                      background: active ? 'var(--clinic)' : 'var(--paper)',
                      color: active ? 'white' : 'var(--slate)',
                      border: '1px solid ' + (active ? 'var(--clinic)' : 'var(--line)'),
                      display: 'grid', placeItems: 'center',
                      fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500,
                    }}>{i + 1}</div>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 2 }}>{b.name}</div>
                      <div style={{ fontSize: 12, color: 'var(--slate)' }}>{b.sub}</div>
                    </div>
                    <Icon.Arrow style={{ color: active ? 'var(--clinic)' : 'var(--slate-soft)' }}/>
                  </button>
                );
              })}
            </div>
          </div>

          {/* RIGHT: map + detail */}
          <div style={{
            background: 'linear-gradient(160deg, var(--clinic-darker), var(--clinic-deep))',
            color: 'white', position: 'relative', overflow: 'hidden',
          }}>
            {/* abstract map */}
            <div style={{ position: 'absolute', inset: 0, opacity: 0.5 }}>
              <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
                <defs>
                  <pattern id="grid" width="6" height="6" patternUnits="userSpaceOnUse">
                    <path d="M 6 0 L 0 0 0 6" fill="none" stroke="rgba(255,255,255,0.05)" strokeWidth="0.2"/>
                  </pattern>
                </defs>
                <rect width="100" height="100" fill="url(#grid)"/>
                {/* coast curve, evocative not literal */}
                <path d="M -5 25 Q 30 35 55 45 T 110 70" fill="none" stroke="rgba(220,239,236,0.18)" strokeWidth="0.6"/>
                <path d="M -5 32 Q 28 42 52 52 T 110 78" fill="none" stroke="rgba(220,239,236,0.10)" strokeWidth="0.4"/>
              </svg>
            </div>

            {/* pins */}
            <div style={{ position: 'absolute', inset: 0 }}>
              {BRANCHES.map((b, i) => {
                const p = project(b.coords[0], b.coords[1]);
                const active = b.slug === branch.slug;
                return (
                  <button key={b.slug} onClick={() => setBranch(b)} style={{
                    position: 'absolute',
                    left: `calc(${p.x}% - ${active ? 18 : 12}px)`,
                    top: `calc(${p.y}% - ${active ? 18 : 12}px)`,
                    width: active ? 36 : 24, height: active ? 36 : 24,
                    borderRadius: '50%',
                    background: active ? 'var(--accent)' : 'rgba(220,239,236,0.95)',
                    color: active ? 'var(--ink)' : 'var(--clinic-deep)',
                    border: active ? '3px solid white' : '1.5px solid rgba(255,255,255,0.4)',
                    boxShadow: active ? '0 6px 20px rgba(0,0,0,0.4), 0 0 0 6px rgba(201,163,106,0.25)' : '0 2px 6px rgba(0,0,0,0.2)',
                    display: 'grid', placeItems: 'center',
                    fontFamily: 'var(--mono)', fontSize: active ? 13 : 10, fontWeight: 600,
                    transition: 'all .2s ease', zIndex: active ? 5 : 1,
                  }}>{i + 1}</button>
                );
              })}
            </div>

            {/* branch detail */}
            <div style={{
              position: 'absolute', left: 24, right: 24, bottom: 24,
              background: 'rgba(7,51,57,0.85)', backdropFilter: 'blur(8px)',
              borderRadius: 'var(--r-lg)', padding: '20px 22px',
              border: '1px solid rgba(220,239,236,0.18)',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16, marginBottom: 14 }}>
                <div>
                  <div className="meta" style={{ color: 'var(--accent)', marginBottom: 6 }}>Branch · {BRANCHES.findIndex(b => b.slug === branch.slug) + 1} / 8</div>
                  <div style={{ fontFamily: 'var(--display)', fontSize: 26, fontWeight: 500, marginBottom: 4 }}>
                    {branch.name}
                  </div>
                  {branch.note && (
                    <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', fontStyle: 'italic' }}>{branch.note}</div>
                  )}
                </div>
                <a href={'#book'} className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 13, background: 'var(--accent)', color: 'var(--ink)' }}>
                  Book at this branch <Icon.Arrow/>
                </a>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, fontSize: 13 }}>
                <div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--mint)', marginBottom: 4 }}>
                    <Icon.Pin/> <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Address</span>
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.88)', lineHeight: 1.45 }}>{branch.address}</div>
                </div>
                <div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--mint)', marginBottom: 4 }}>
                    <Icon.Phone/> <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Phone</span>
                  </div>
                  <a href={'tel:' + branch.tel} style={{ color: 'white', fontFamily: 'var(--mono)' }}>{branch.phone}</a>
                </div>
                <div>
                  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--mint)', marginBottom: 4 }}>
                    <Icon.Clock/> <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Hours</span>
                  </div>
                  <div style={{ color: 'rgba(255,255,255,0.7)', fontSize: 12, lineHeight: 1.4 }}>
                    {branch.slug === 'al-wasl'
                      ? 'Daily 08:30–18:00 · Tue 08:30–20:00 · Sun closed'
                      : <em style={{ color: 'rgba(255,255,255,0.5)' }}>Client to confirm per branch</em>
                    }
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- SPECIALISTS ---
function Specialists({ branch }) {
  const scrollRef = useRef(null);
  const scroll = (dir) => {
    if (scrollRef.current) {
      scrollRef.current.scrollBy({ left: dir * 320, behavior: 'smooth' });
    }
  };
  return (
    <section id="dentists" style={{ background: 'var(--paper)', padding: '96px 0 88px' }}>
      <div className="container">
        <SectionHead
          eyebrow="Meet the specialists"
          title={<>Internationally trained.<br/>DHA-verified before they appear here.</>}
          kicker={<>52 named practitioners across 8 specialties — trained in the UK, US, France, Germany, Sweden, Japan and beyond. We publish each dentist only with their consent and DHA licence number once supplied.</>}
          action={
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => scroll(-1)} className="btn btn-ghost" style={{ padding: '10px 12px' }}><Icon.ArrowL/></button>
              <button onClick={() => scroll(1)} className="btn btn-ghost" style={{ padding: '10px 12px' }}><Icon.Arrow/></button>
            </div>
          }
        />
        <div ref={scrollRef} className="scroll-x" style={{
          display: 'flex', gap: 18, paddingBottom: 12,
          scrollSnapType: 'x mandatory',
        }}>
          {DENTISTS.map((d) => (
            <a key={d.slug} href={'#dr-' + d.slug} style={{
              flex: '0 0 280px',
              background: 'var(--paper-warm)', borderRadius: 'var(--r-lg)',
              border: '1px solid var(--line)', overflow: 'hidden',
              display: 'flex', flexDirection: 'column',
              scrollSnapAlign: 'start',
              transition: 'border-color .2s ease, transform .2s ease',
            }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'var(--mint-deep)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              <div style={{ aspectRatio: '1', overflow: 'hidden', background: 'var(--paper-warmer)', position: 'relative' }}>
                <img src={d.img} alt={d.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center' }}/>
                <div style={{
                  position: 'absolute', top: 12, left: 12,
                  background: 'rgba(255,255,255,0.92)', padding: '4px 8px',
                  borderRadius: 999, fontSize: 10, color: 'var(--success)',
                  fontFamily: 'var(--mono)', letterSpacing: '0.08em', fontWeight: 500,
                  display: 'inline-flex', alignItems: 'center', gap: 4,
                }}>
                  <Icon.Check /> DHA · pending publish
                </div>
              </div>
              <div style={{ padding: '16px 18px 18px' }}>
                <div style={{ fontFamily: 'var(--display)', fontSize: 18, fontWeight: 500, marginBottom: 4, lineHeight: 1.2 }}>
                  {d.name}
                </div>
                <div style={{ fontSize: 12, color: 'var(--clinic)', marginBottom: 10, lineHeight: 1.4 }}>{d.role}</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  <span className="chip chip-line" style={{ fontSize: 10 }}>Trained · {d.country}</span>
                  {d.branches.slice(0, 1).map(b => (
                    <span key={b} className="chip" style={{ fontSize: 10 }}>{b}</span>
                  ))}
                </div>
              </div>
            </a>
          ))}
          <a href="#all-dentists" style={{
            flex: '0 0 240px',
            background: 'var(--paper-warm)',
            borderRadius: 'var(--r-lg)',
            border: '1px dashed var(--mint-deep)',
            display: 'grid', placeItems: 'center', padding: 28,
            textAlign: 'center', color: 'var(--clinic-deep)',
          }}>
            <div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 24, fontWeight: 500, marginBottom: 8 }}>
                +42 more
              </div>
              <div style={{ fontSize: 13, color: 'var(--slate)', marginBottom: 12 }}>
                Across all 8 specialties.<br/>Published as DHA licences are supplied.
              </div>
              <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--clinic)', fontWeight: 500, fontSize: 13 }}>
                See full team <Icon.Arrow/>
              </div>
            </div>
          </a>
        </div>
      </div>
    </section>
  );
}

// --- BIODENTISTRY / DENTAL PHOBIA CALLOUT ---
function Niches() {
  return (
    <section style={{ background: 'var(--clinic-darker)', color: 'white', padding: '96px 0' }}>
      <div className="container">
        <SectionHead dark
          eyebrow="Why people travel for us"
          title={<>Two genuine niches, not a marketing strapline.</>}
        />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {/* Biodentistry */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 'var(--r-xl)', padding: '40px 36px',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: 180,
              opacity: 0.35,
              background: 'radial-gradient(circle at 100% 50%, var(--clinic) 0%, transparent 60%)',
            }}/>
            <div className="eyebrow" style={{ color: 'var(--mint)', marginBottom: 18 }}>Signature · Biodentistry</div>
            <h3 style={{ fontSize: 32, color: 'white', fontWeight: 400, marginBottom: 16 }}>
              Biological dentistry —<br/><em style={{ fontWeight: 300, color: 'var(--mint)' }}>biocompatible by default.</em>
            </h3>
            <p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 24, lineHeight: 1.6 }}>
              Three accredited biodentists on staff and an accredited biological hygienist. Mercury-safe protocols, ceramic-first restorations, and an integrative whole-body view of oral health. A genuine niche, rare in the Gulf.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {['Mercury-safe', 'Ceramic implants', 'Ozone therapy', 'SMART protocol'].map(t => (
                <span key={t} style={{
                  fontSize: 12, padding: '6px 12px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.06)', color: 'var(--mint)',
                  border: '1px solid rgba(220,239,236,0.18)',
                }}>{t}</span>
              ))}
            </div>
            <a href="#biodentistry" className="btn" style={{ background: 'var(--mint)', color: 'var(--clinic-darker)', padding: '12px 18px', fontSize: 14 }}>
              Read the biodentistry journey <Icon.Arrow/>
            </a>
          </div>

          {/* Dental Phobia */}
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 'var(--r-xl)', padding: '40px 36px',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, right: 0, bottom: 0, width: 180,
              opacity: 0.32,
              background: 'radial-gradient(circle at 100% 50%, var(--accent) 0%, transparent 60%)',
            }}/>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 18 }}>Signature · Comfort-first</div>
            <h3 style={{ fontSize: 32, color: 'white', fontWeight: 400, marginBottom: 16 }}>
              The only <em style={{ fontWeight: 300, color: 'var(--accent)' }}>Dental Phobia Certified</em> clinic in the UAE.
            </h3>
            <p style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 24, lineHeight: 1.6 }}>
              If the chair makes your heart race, we built the entire experience around you. Zen-design rooms, sedation options, slow-paced first visits, and a team trained to spot anxiety before you have to name it.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
              {['Sedation dentistry', 'Slow first visits', 'Quiet rooms', 'Anxiety-trained team'].map(t => (
                <span key={t} style={{
                  fontSize: 12, padding: '6px 12px', borderRadius: 999,
                  background: 'rgba(255,255,255,0.06)', color: 'var(--accent)',
                  border: '1px solid rgba(201,163,106,0.28)',
                }}>{t}</span>
              ))}
            </div>
            <a href="#phobia" className="btn" style={{ background: 'var(--accent)', color: 'var(--ink)', padding: '12px 18px', fontSize: 14 }}>
              How an anxious first visit works <Icon.Arrow/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- AWARDS / CREDENTIALS STRIP ---
function Awards() {
  const items = [
    { title: 'Excellence in Dental Care', sub: '2021 · Global Brands Magazine', kind: 'Award' },
    { title: 'Dental Phobia Certified', sub: 'Only certified clinic in the UAE', kind: 'Certification' },
    { title: 'Leading Dental Centers of the World', sub: 'Inducted 2010', kind: 'Membership' },
    { title: 'MOH-licensed · DHA-registered', sub: 'Licence EH6NKOMI-220725', kind: 'Regulatory' },
  ];
  return (
    <section style={{ background: 'var(--paper-warm)', padding: '64px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="meta" style={{ textAlign: 'center', marginBottom: 28, color: 'var(--slate)' }}>
          Recognised by — sources attributed
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {items.map((i, idx) => (
            <div key={i.title} style={{
              padding: '0 28px',
              borderLeft: idx === 0 ? 'none' : '1px solid var(--line)',
              textAlign: idx === 0 ? 'left' : 'left',
            }}>
              <div className="meta" style={{ color: 'var(--accent-deep)', marginBottom: 10 }}>{i.kind}</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 20, fontWeight: 500, lineHeight: 1.2, marginBottom: 6 }}>{i.title}</div>
              <div style={{ fontSize: 12, color: 'var(--slate)' }}>{i.sub}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// --- SMILE GALLERY TEASER (consent-gated, locked) ---
function SmileGalleryTeaser() {
  return (
    <section id="smile-gallery" style={{ background: 'var(--paper)', padding: '96px 0' }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56,
          alignItems: 'center',
        }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>Smile Gallery</div>
            <h2 style={{ fontSize: 'clamp(30px, 3.4vw, 46px)', fontWeight: 400, marginBottom: 18 }}>
              A before / after gallery is coming — but only with explicit consent.
            </h2>
            <p style={{ color: 'var(--slate)', marginBottom: 24, fontSize: 16, lineHeight: 1.6 }}>
              DHA advertising rules don't allow patient cases without documented consent and compliant context. We're collecting that now — properly — rather than ship a gallery that could put a patient or the clinic at risk.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                'Each case ships with signed patient consent + treatment timeline',
                'Original photography, clinical lighting — no stock',
                'Architecture lives; cases drop in as consent clears',
              ].map(t => (
                <li key={t} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: '50%',
                    background: 'var(--mint)', color: 'var(--clinic)',
                    display: 'grid', placeItems: 'center', flexShrink: 0, marginTop: 2,
                  }}><Icon.Check/></span>
                  <span style={{ fontSize: 14, color: 'var(--ink)' }}>{t}</span>
                </li>
              ))}
            </ul>
            <a href="#consent" className="btn btn-light" style={{ padding: '14px 20px', fontSize: 14 }}>
              <Icon.Lock/> Consent-cleared cases — request access
            </a>
          </div>

          {/* locked card */}
          <div style={{ position: 'relative', borderRadius: 'var(--r-xl)', overflow: 'hidden' }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4,
            }}>
              {[1,2,3,4].map((n) => (
                <div key={n} className="ph" style={{
                  aspectRatio: '4/3',
                  background: 'var(--paper-warmer)',
                  position: 'relative',
                  filter: 'blur(8px) saturate(0.6)',
                  opacity: 0.55,
                }}>
                  <div style={{
                    width: '100%', height: '100%',
                    background: `linear-gradient(${n*60}deg, var(--mint), var(--paper-warmer))`,
                  }}/>
                </div>
              ))}
            </div>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(180deg, transparent 0%, rgba(247,250,249,0.6) 60%, var(--paper-warm) 100%)',
            }}/>
            <div style={{
              position: 'absolute', inset: 0,
              display: 'grid', placeItems: 'center', textAlign: 'center',
            }}>
              <div style={{
                background: 'var(--paper)', padding: '20px 26px',
                borderRadius: 'var(--r-lg)', border: '1px solid var(--line)',
                boxShadow: '0 20px 40px -20px rgba(7,51,57,0.18)',
                maxWidth: 320,
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: '50%',
                  background: 'var(--mint)', color: 'var(--clinic-deep)',
                  display: 'grid', placeItems: 'center', margin: '0 auto 12px',
                }}>
                  <Icon.Lock style={{ width: 18, height: 18 }}/>
                </div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 18, fontWeight: 500, marginBottom: 6 }}>
                  Gated until consent clears
                </div>
                <div style={{ fontSize: 12, color: 'var(--slate)' }}>
                  DHA-compliant publishing only.<br/>No stock, no synthetic before/afters.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- REVIEWS (with disclaimer, no aggregated rating) ---
function Reviews() {
  // No fabricated reviews — sample shape only, marked as such.
  return (
    <section style={{ background: 'var(--mint)', padding: '96px 0' }}>
      <div className="container">
        <SectionHead
          eyebrow="What our patients say"
          title={<>Per-branch Google reviews — verified, never aggregated.</>}
          kicker="We don't average 8 branches into one star number. Each clinic page surfaces its own Google rating once verified. Until then, this section ships empty."
        />
        <div style={{
          background: 'var(--paper)', borderRadius: 'var(--r-xl)',
          padding: '40px 44px', border: '1px solid var(--line)',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center',
        }}>
          <div>
            <Icon.Quote style={{ color: 'var(--clinic)', marginBottom: 12 }}/>
            <p style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 400, color: 'var(--ink)', lineHeight: 1.35, marginBottom: 20 }}>
              <em style={{ color: 'var(--slate-soft)', fontStyle: 'normal' }}>
                "Branch-specific reviews appear here once the client supplies the verified Google Place ID for each of the 8 clinics."
              </em>
            </p>
            <div className="meta" style={{ color: 'var(--slate)' }}>
              — Placeholder · awaiting verified per-branch feed
            </div>
          </div>
          <div style={{
            background: 'var(--paper-warm)', borderRadius: 'var(--r-lg)',
            border: '1px dashed var(--mint-deep)', padding: 28,
          }}>
            <div className="meta" style={{ marginBottom: 14, color: 'var(--clinic)' }}>To unlock this block</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, color: 'var(--ink)' }}>
              <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--mint)', display: 'grid', placeItems: 'center', color: 'var(--clinic-deep)' }}>1</span>
                Verified Google Place IDs per branch
              </li>
              <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--mint)', display: 'grid', placeItems: 'center', color: 'var(--clinic-deep)' }}>2</span>
                Approved review-display copy (DHA-compliant)
              </li>
              <li style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 18, height: 18, borderRadius: 4, background: 'var(--mint)', display: 'grid', placeItems: 'center', color: 'var(--clinic-deep)' }}>3</span>
                Confirm: do <em>not</em> aggregate into a single star number
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- BOOKING BAND ---
function BookingBand({ branch }) {
  const [form, setForm] = useState({ name: '', phone: '', treatment: 'Cosmetic & Veneers', date: '' });
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4000);
  };
  return (
    <section id="book" style={{
      background: 'var(--clinic-deep)',
      color: 'white', padding: '88px 0',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0, opacity: 0.4,
        background: 'radial-gradient(circle at 15% 0%, var(--clinic) 0%, transparent 50%), radial-gradient(circle at 100% 100%, var(--accent) 0%, transparent 50%)',
      }}/>
      <div className="container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--accent)', marginBottom: 14 }}>Book a consultation</div>
            <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 50px)', color: 'white', fontWeight: 400, marginBottom: 20 }}>
              A first visit, on your terms.<br/>
              <em style={{ fontWeight: 300, color: 'var(--mint)' }}>30 minutes. No pressure.</em>
            </h2>
            <p style={{ color: 'rgba(255,255,255,0.78)', fontSize: 16, lineHeight: 1.6, marginBottom: 28, maxWidth: 460 }}>
              Tell us the basics. A coordinator at your branch will call back within the same working day to confirm a time with the right specialist. No medical history needed up front — that's for the chair.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['Branch-aware', `Routed to ${branch.name}`],
                ['Same-day callback', 'Within working hours'],
                ['No PHI online', 'We collect history in clinic'],
              ].map(([t, s]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'rgba(220,239,236,0.15)', color: 'var(--mint)',
                    display: 'grid', placeItems: 'center', flexShrink: 0,
                  }}><Icon.Check/></span>
                  <span style={{ fontSize: 14 }}>
                    <strong style={{ fontWeight: 500 }}>{t}</strong>
                    <span style={{ color: 'rgba(255,255,255,0.6)', marginLeft: 8 }}>— {s}</span>
                  </span>
                </div>
              ))}
            </div>
          </div>

          <form onSubmit={submit} style={{
            background: 'var(--paper)', color: 'var(--ink)',
            borderRadius: 'var(--r-xl)', padding: '32px 32px',
            boxShadow: '0 30px 60px -30px rgba(0,0,0,0.4)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
              <div>
                <div className="meta" style={{ color: 'var(--clinic)' }}>Step 1 of 1 · Quick form</div>
                <div style={{ fontFamily: 'var(--display)', fontSize: 22, fontWeight: 500, marginTop: 4 }}>
                  Your consultation
                </div>
              </div>
              <span className="chip" style={{ background: 'rgba(46,139,111,0.12)', color: 'var(--success)' }}>
                <Icon.Lock/> Minimal PHI
              </span>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <Field label="Your name">
                <input value={form.name} onChange={e => setForm({ ...form, name: e.target.value })} placeholder="Full name" />
              </Field>
              <Field label="Phone (UAE)">
                <input value={form.phone} onChange={e => setForm({ ...form, phone: e.target.value })} placeholder="+971 …" />
              </Field>
              <Field label="Treatment of interest">
                <select value={form.treatment} onChange={e => setForm({ ...form, treatment: e.target.value })}>
                  {TREATMENTS.map(t => <option key={t.slug}>{t.name}</option>)}
                  <option>Not sure — recommend for me</option>
                </select>
              </Field>
              <Field label="Preferred date">
                <input type="date" value={form.date} onChange={e => setForm({ ...form, date: e.target.value })}/>
              </Field>
              <Field label="Branch" full>
                <select value={branch.slug} onChange={() => {}}>
                  {BRANCHES.map(b => <option key={b.slug} value={b.slug}>{b.name} · {b.sub}</option>)}
                </select>
              </Field>
            </div>

            <button type="submit" className="btn btn-primary" style={{
              width: '100%', justifyContent: 'center', marginTop: 22,
              padding: '16px 22px', fontSize: 15,
              background: submitted ? 'var(--success)' : 'var(--clinic)',
            }}>
              {submitted ? <><Icon.Check/> Sent — coordinator will call back</> : <>Request callback <Icon.Arrow/></>}
            </button>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 14, fontSize: 12, color: 'var(--slate)' }}>
              <span>Or WhatsApp <a href="https://wa.me/971528218185" style={{ color: 'var(--clinic)' }}>+971 52 821 8185</a></span>
              <span>Emergency <a href="tel:+971567870784" style={{ color: 'var(--danger)' }}>056 787 0784</a></span>
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function Field({ label, children, full }) {
  return (
    <label style={{
      display: 'flex', flexDirection: 'column', gap: 6,
      gridColumn: full ? '1 / -1' : 'auto',
    }}>
      <span className="meta" style={{ color: 'var(--slate)' }}>{label}</span>
      <span style={{ display: 'block' }}>
        {React.cloneElement(children, {
          style: {
            width: '100%', padding: '12px 14px', fontSize: 14,
            border: '1px solid var(--line)', borderRadius: 'var(--r-md)',
            background: 'var(--paper-warm)', fontFamily: 'inherit', color: 'var(--ink)',
            outline: 'none', transition: 'border-color .15s ease, background .15s ease',
            ...(children.props.style || {}),
          },
          onFocus: (e) => { e.target.style.borderColor = 'var(--clinic)'; e.target.style.background = 'white'; },
          onBlur: (e) => { e.target.style.borderColor = 'var(--line)'; e.target.style.background = 'var(--paper-warm)'; },
        })}
      </span>
    </label>
  );
}

// --- FOOTER ---
function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'rgba(255,255,255,0.7)', padding: '64px 0 32px' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr 1fr', gap: 40, marginBottom: 56 }}>
          <div>
            <Logo light />
            <p style={{ fontSize: 13, lineHeight: 1.6, marginTop: 18, color: 'rgba(255,255,255,0.55)' }}>
              Award-winning multi-specialty dental group in Dubai. Specialist care across 8 clinics — because smiling matters.
            </p>
            <div style={{
              marginTop: 20, padding: '12px 14px',
              border: '1px solid rgba(255,255,255,0.1)', borderRadius: 'var(--r-md)',
              fontSize: 11, color: 'rgba(255,255,255,0.5)', fontFamily: 'var(--mono)',
            }}>
              MOH Licence · EH6NKOMI-220725<br/>
              DHA-registered · Al Wasl LLC
            </div>
          </div>
          <FooterCol title="Clinics" items={BRANCHES.slice(0, 4).map(b => b.name).concat(['+ 4 more'])} />
          <FooterCol title="Treatments" items={['Cosmetic & Veneers', 'Implants', 'Orthodontics', 'Biodentistry', 'Endodontics', 'All treatments']} />
          <FooterCol title="The Studio" items={['About since 1976', 'Our specialists', 'Awards & ethics', 'Careers', 'Press']} />
          <FooterCol title="Contact" items={['+971 52 821 8185', '24/7 emergency', 'alwasl@thedentalstudio.ae', 'WhatsApp']} />
        </div>

        <div style={{
          borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 24,
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: 'rgba(255,255,255,0.5)', flexWrap: 'wrap', gap: 16,
        }}>
          <div>© 1976–2026 The Dental Studio · Dubai, UAE</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#privacy">Privacy</a>
            <a href="#dha">DHA compliance</a>
            <a href="#sitemap">Sitemap</a>
            <a href="#accessibility">Accessibility</a>
          </div>
        </div>
      </div>
    </footer>
  );
}
function FooterCol({ title, items }) {
  return (
    <div>
      <div className="meta" style={{ color: 'var(--accent)', marginBottom: 16 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(i => (
          <li key={i}>
            <a href="#" style={{ fontSize: 13, color: 'rgba(255,255,255,0.7)' }}>{i}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// --- FLOATING WhatsApp ---
function WhatsAppFab() {
  return (
    <a href="https://wa.me/971528218185" style={{
      position: 'fixed', right: 24, bottom: 24, zIndex: 40,
      width: 56, height: 56, borderRadius: '50%',
      background: '#25D366', color: 'white',
      display: 'grid', placeItems: 'center',
      boxShadow: '0 14px 30px -10px rgba(37,211,102,0.5)',
    }}>
      <Icon.WhatsApp style={{ width: 24, height: 24 }}/>
    </a>
  );
}

Object.assign(window, { TreatmentGrid, BranchSwitcher, Specialists, Niches, Awards, SmileGalleryTeaser, Reviews, BookingBand, Footer, WhatsAppFab });
