// Shared UI components — Nav, Hero, sections.
const { useState, useEffect, useRef, useMemo } = React;

// --- ICONS (simple geometric only, no illustrative SVG) ---
const Icon = {
  Phone: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M5 4h3l2 5-2 1a11 11 0 0 0 6 6l1-2 5 2v3a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" />
    </svg>
  ),
  WhatsApp: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor" {...p}>
      <path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2Zm5.4 14.2c-.2.6-1.3 1.2-1.8 1.2-.5 0-1.1.1-3-.6-2.5-1-4-3.5-4.1-3.7-.1-.2-.9-1.3-.9-2.4 0-1.2.6-1.7.8-2 .2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.2.4 0 .6l-.3.4-.3.3c-.1.1-.3.3-.1.6.2.4.9 1.4 1.8 2.3 1.2 1 2.2 1.4 2.5 1.5.3.1.5.1.7-.1l.7-.9c.2-.2.3-.2.6-.1l1.9.9c.2.1.4.2.5.3 0 .1 0 .7-.2 1.3Z"/>
    </svg>
  ),
  Pin: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12Z"/>
      <circle cx="12" cy="10" r="2.5"/>
    </svg>
  ),
  Clock: (p) => (
    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M12 7v5l3 2"/>
    </svg>
  ),
  Arrow: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  ArrowL: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M19 12H5M11 6l-6 6 6 6"/>
    </svg>
  ),
  Lock: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <rect x="5" y="11" width="14" height="9" rx="2"/>
      <path d="M8 11V8a4 4 0 1 1 8 0v3"/>
    </svg>
  ),
  Check: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" {...p}>
      <path d="m5 12 5 5L20 7"/>
    </svg>
  ),
  Star: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" {...p}>
      <path d="m12 2 3 7 7 .6-5.3 4.7L18.5 22 12 18l-6.5 4 1.8-7.7L2 9.6 9 9z"/>
    </svg>
  ),
  Quote: (p) => (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor" {...p}>
      <path d="M7 17H4l1-7a4 4 0 0 1 4-4v3a1 1 0 0 0-1 1l1 1v2a3 3 0 0 1-3 3Zm10 0h-3l1-7a4 4 0 0 1 4-4v3a1 1 0 0 0-1 1l1 1v2a3 3 0 0 1-3 3Z"/>
    </svg>
  ),
  Menu: (p) => (
    <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.7" {...p}>
      <path d="M4 7h16M4 12h16M4 17h16"/>
    </svg>
  ),
  Globe: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.6" {...p}>
      <circle cx="12" cy="12" r="9"/>
      <path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/>
    </svg>
  ),
  X: (p) => (
    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}>
      <path d="M6 6l12 12M18 6 6 18"/>
    </svg>
  ),
};

// --- LOGO LOCKUP (live HTML, not the baked-in webp) ---
function Logo({ light }) {
  const color = light ? 'white' : 'var(--ink)';
  const accent = light ? 'var(--mint-deep)' : 'var(--clinic)';
  return (
    <a href="#top" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      <span style={{
        width: 36, height: 36, borderRadius: '50%',
        background: light ? 'rgba(255,255,255,0.12)' : 'var(--mint)',
        display: 'grid', placeItems: 'center',
        border: light ? '1px solid rgba(255,255,255,0.2)' : '1px solid var(--line)',
      }}>
        <span style={{
          fontFamily: 'var(--display)', fontSize: 18, fontWeight: 500,
          color: accent, lineHeight: 1, letterSpacing: '-0.04em',
        }}>tds</span>
      </span>
      <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, whiteSpace: 'nowrap' }}>
        <span style={{
          fontFamily: 'var(--display)', fontSize: 18, fontWeight: 500,
          color, letterSpacing: '-0.01em', whiteSpace: 'nowrap',
        }}>The Dental Studio</span>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 9, marginTop: 4,
          color: light ? 'rgba(255,255,255,0.6)' : 'var(--slate)',
          letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>because smiling matters</span>
      </span>
    </a>
  );
}

// --- TOP UTILITY STRIP ---
function UtilityBar({ branch, onBranchClick }) {
  return (
    <div style={{
      background: 'var(--ink)', color: 'rgba(255,255,255,0.82)',
      fontSize: 12, fontFamily: 'var(--body)',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 38, gap: 16, flexWrap: 'wrap',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
          <a href="tel:+971567870784" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, color: 'white',
          }}>
            <span style={{
              width: 7, height: 7, borderRadius: '50%',
              background: 'var(--danger)', boxShadow: '0 0 0 4px rgba(181,69,58,0.25)',
              animation: 'pulse 2s infinite',
            }} />
            <span style={{ fontWeight: 500 }}>24/7 Dental Emergency</span>
            <span style={{ color: 'rgba(255,255,255,0.6)' }}>·</span>
            <span style={{ fontFamily: 'var(--mono)', letterSpacing: '0.04em' }}>+971 56 787 0784</span>
          </a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'rgba(255,255,255,0.6)' }}>
          <button onClick={onBranchClick} style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: 'rgba(255,255,255,0.82)', fontSize: 12,
          }}>
            <Icon.Pin />
            <span>Showing <strong style={{ color: 'white', fontWeight: 500 }}>{branch.name}</strong></span>
            <span style={{ opacity: 0.6 }}>· change branch</span>
          </button>
          <span style={{ opacity: 0.4 }}>|</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon.Globe /> EN · العربية · РУС · 中文
          </span>
        </div>
      </div>
      <style>{`
        @keyframes pulse {
          0%, 100% { box-shadow: 0 0 0 4px rgba(181,69,58,0.25); }
          50% { box-shadow: 0 0 0 7px rgba(181,69,58,0.05); }
        }
      `}</style>
    </div>
  );
}

// --- NAVBAR ---
function Nav({ branch, onBranchClick, onBook }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,0.92)' : 'var(--paper)',
      backdropFilter: scrolled ? 'saturate(140%) blur(10px)' : 'none',
      borderBottom: '1px solid var(--line)',
      transition: 'background .2s ease',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 72, gap: 20,
      }}>
        <Logo />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 22, fontSize: 14, flexShrink: 0 }}>
          {['Treatments', 'Dentists', 'Clinics', 'Smile Gallery', 'About'].map((l) => (
            <a key={l} href={'#' + l.toLowerCase().replace(/\s+/g, '-')} style={{
              color: 'var(--ink)', position: 'relative',
              padding: '6px 0', fontWeight: 500, whiteSpace: 'nowrap',
            }}>
              {l}
              {l === 'Smile Gallery' && (
                <span style={{
                  position: 'absolute', top: 0, right: -14,
                  display: 'inline-flex', alignItems: 'center', gap: 3,
                  color: 'var(--slate-soft)', fontSize: 10,
                }}><Icon.Lock /></span>
              )}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <a href={'tel:' + branch.tel} className="btn btn-ghost" style={{ padding: '10px 14px', fontSize: 13 }}>
            <Icon.Phone /> <span>{branch.phone}</span>
          </a>
          <button onClick={onBook} className="btn btn-primary" style={{ padding: '11px 18px', fontSize: 14 }}>
            Book a Consultation <Icon.Arrow />
          </button>
        </div>
      </div>
    </header>
  );
}

// --- HERO ---
function Hero({ branch, heroVariant, onBook }) {
  const heroImg = {
    'clinic-interior': 'media/clinic-interior.webp',
    'clinic-env': 'media/clinic-env.webp',
    'treatment-room': 'media/treatment-room.webp',
  }[heroVariant] || 'media/clinic-interior.webp';

  return (
    <section id="top" style={{ background: 'var(--paper)', position: 'relative' }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 88 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 56,
          alignItems: 'center',
        }}>
          {/* LEFT: live HTML headline */}
          <div>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
              <span className="chip">
                <Icon.Check style={{ color: 'var(--success)' }} /> MOH-licensed · EH6NKOMI-220725
              </span>
              <span className="chip chip-line">Since 1976</span>
            </div>
            <h1 style={{ fontSize: 'clamp(40px, 5vw, 72px)', fontWeight: 400, marginBottom: 24 }}>
              Dubai's trusted dental home
              {' '}<em style={{ fontStyle: 'italic', fontWeight: 300, color: 'var(--clinic)' }}>since 1976</em> —
              {' '}specialist care across <span style={{ position: 'relative' }}>
                <span style={{
                  position: 'absolute', bottom: 6, left: 0, right: 0, height: 10,
                  background: 'rgba(201,163,106,0.32)', zIndex: -1,
                }}/>
                8 clinics
              </span>.
            </h1>
            <p style={{
              fontSize: 18, lineHeight: 1.55, color: 'var(--slate)',
              maxWidth: 540, marginBottom: 36,
            }}>
              Award-winning, multi-specialty dentistry across Dubai — the only Dental Phobia Certified clinic in the UAE, with a 40+ specialist team, biodentistry niche, and 24/7 emergency care. <em style={{ color: 'var(--clinic-deep)' }}>Because smiling matters.</em>
            </p>
            <div style={{ display: 'flex', gap: 12, marginBottom: 40, flexWrap: 'wrap' }}>
              <button onClick={onBook} className="btn btn-primary" style={{ padding: '16px 24px', fontSize: 15 }}>
                Book a Consultation <Icon.Arrow />
              </button>
              <a href="https://wa.me/971528218185" className="btn btn-light" style={{ padding: '16px 22px', fontSize: 15 }}>
                <Icon.WhatsApp style={{ color: '#25D366' }} /> WhatsApp us
              </a>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 18, color: 'var(--slate)', fontSize: 13 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <Icon.Pin /> Nearest: <strong style={{ color: 'var(--ink)', fontWeight: 500 }}>{branch.name}</strong>
              </span>
              <span style={{ width: 1, height: 14, background: 'var(--line)' }} />
              <a href={'tel:' + branch.tel} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--clinic)' }}>
                <Icon.Phone /> {branch.phone}
              </a>
            </div>
          </div>

          {/* RIGHT: photo + floating credential cards */}
          <div style={{ position: 'relative' }}>
            <div style={{
              borderRadius: 'var(--r-xl)', overflow: 'hidden',
              aspectRatio: '4 / 5',
              boxShadow: '0 30px 60px -30px rgba(7,51,57,0.32)',
              background: 'var(--paper-warmer)',
            }}>
              <img src={heroImg} alt="The Dental Studio clinic interior" style={{
                width: '100%', height: '100%', objectFit: 'cover',
              }}/>
            </div>

            {/* floating credential card top-left */}
            <div style={{
              position: 'absolute', left: -24, top: 28,
              background: 'var(--paper)', borderRadius: 'var(--r-lg)',
              padding: '14px 16px', boxShadow: '0 16px 40px -16px rgba(7,51,57,0.22)',
              border: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 12, width: 240,
            }}>
              <div style={{
                width: 44, height: 44, borderRadius: 12,
                background: 'var(--mint)', display: 'grid', placeItems: 'center',
                color: 'var(--clinic-deep)', fontFamily: 'var(--display)',
                fontWeight: 600, fontSize: 17,
              }}>49</div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>Years of ethical care</div>
                <div style={{ fontSize: 11, color: 'var(--slate)' }}>Brand-stated, established 1976</div>
              </div>
            </div>

            {/* floating bottom-right */}
            <div style={{
              position: 'absolute', right: -24, bottom: 36,
              background: 'var(--ink)', color: 'white', borderRadius: 'var(--r-lg)',
              padding: '16px 18px', boxShadow: '0 16px 40px -16px rgba(7,51,57,0.36)',
              width: 260,
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8,
              }}>★ Recognised by</div>
              <div style={{ fontFamily: 'var(--display)', fontSize: 18, lineHeight: 1.2, fontWeight: 500 }}>
                Global Brands Magazine
              </div>
              <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>
                Excellence in Dental Care · 2021
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- TRUST STRIP ---
function TrustStrip() {
  const items = [
    { k: '1976', l: 'Established (brand-stated)' },
    { k: '8', l: 'Clinics across Dubai' },
    { k: '52', l: 'Named practitioners' },
    { k: '8', l: 'Specialties under one roof' },
    { k: 'DHA / MOH', l: 'Licensed & registered' },
  ];
  return (
    <section style={{ background: 'var(--paper-warm)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container" style={{
        padding: '32px 28px',
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 32,
      }}>
        {items.map((i, idx) => (
          <div key={i.l} style={{
            display: 'flex', alignItems: 'baseline', gap: 14,
            borderLeft: idx === 0 ? 'none' : '1px solid var(--line)',
            paddingLeft: idx === 0 ? 0 : 24,
          }}>
            <div style={{
              fontFamily: 'var(--display)', fontWeight: 500, fontSize: 32,
              color: 'var(--clinic-deep)', letterSpacing: '-0.02em', lineHeight: 1,
            }}>{i.k}</div>
            <div style={{ fontSize: 12, color: 'var(--slate)', lineHeight: 1.35, maxWidth: 160 }}>{i.l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// --- SECTION HEADING ---
function SectionHead({ eyebrow, title, kicker, action, children, dark }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
      gap: 32, marginBottom: 40, flexWrap: 'wrap',
    }}>
      <div style={{ maxWidth: 640 }}>
        {eyebrow && <div className="eyebrow" style={{ marginBottom: 14, color: dark ? 'var(--accent)' : 'var(--clinic)' }}>{eyebrow}</div>}
        {title && <h2 style={{
          fontSize: 'clamp(30px, 3.4vw, 46px)', fontWeight: 400,
          color: dark ? 'white' : 'var(--ink)', marginBottom: kicker ? 14 : 0,
        }}>{title}</h2>}
        {kicker && <p style={{ fontSize: 16, color: dark ? 'rgba(255,255,255,0.7)' : 'var(--slate)' }}>{kicker}</p>}
        {children}
      </div>
      {action}
    </div>
  );
}

Object.assign(window, { Icon, Logo, UtilityBar, Nav, Hero, TrustStrip, SectionHead });
