// Shared chrome: Nav, Footer, mobile bar, WhatsApp FAB, icons
const { useState, useEffect, useRef, useMemo, useCallback, useContext, createContext } = React;

// ---- Icons (inline SVG, never elaborate drawings) -------------------
const Icon = {
  arrow: (p) => <svg className={p?.className} width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 7h10M8 3l4 4-4 4" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  arrowLg: (p) => <svg className={p?.className} width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 10h14M12 4l6 6-6 6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  caret: (p) => <svg className={p?.className} width="9" height="9" viewBox="0 0 9 9" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M2 3l2.5 3L7 3" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  phone: (p) => <svg className={p?.className} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M3 3c0 6 4 10 10 10l1.5-2.5-3-1.5-1 1c-1.5-.5-3-2-3.5-3.5l1-1L6.5 2.5 4 3z" strokeLinejoin="round"/></svg>,
  whatsapp: (p) => <svg className={p?.className} width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.6-1.6-.9-2.1-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1.1 1-1.1 2.6 0 1.5 1.1 3 1.2 3.2.1.2 2.2 3.4 5.3 4.8.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4 0-.1-.2-.2-.5-.4M12 21.3a9.3 9.3 0 0 1-4.8-1.3l-.3-.2-3.5.9 1-3.4-.2-.4A9.4 9.4 0 1 1 12 21.3M12 2a11.4 11.4 0 0 0-9.7 17.4L1 24l4.7-1.2A11.4 11.4 0 1 0 12 2"/></svg>,
  plus: (p) => <svg className={p?.className} width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M7 2v10M2 7h10" strokeLinecap="round"/></svg>,
  check: (p) => <svg className={p?.className} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2"><path d="M2 6.5L5 9.5 10 3.5" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  checkLg: (p) => <svg className={p?.className} width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 16l5 5 9-11" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  shield: (p) => <svg className={p?.className} width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M10 2l7 3v5c0 4-3 7-7 8-4-1-7-4-7-8V5l7-3zM7 10l2 2 4-4" strokeLinejoin="round"/></svg>,
  lock: (p) => <svg className={p?.className} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>,
  cal: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><rect x="3" y="5" width="14" height="13" rx="1"/><path d="M3 9h14M7 3v4M13 3v4"/></svg>,
  user: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="10" cy="7" r="3"/><path d="M3 17c0-3.5 3-6 7-6s7 2.5 7 6"/></svg>,
  drop: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M10 2C7 6 4 9 4 12a6 6 0 0 0 12 0c0-3-3-6-6-10z"/></svg>,
  sparkle: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M10 3v4M10 13v4M3 10h4M13 10h4M5 5l2.5 2.5M12.5 12.5L15 15M5 15l2.5-2.5M12.5 7.5L15 5"/></svg>,
  body: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="10" cy="4" r="2"/><path d="M6 18v-7M14 18v-7M6 11c0-3 1-4 4-4s4 1 4 4"/></svg>,
  man: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="10" cy="5" r="2.5"/><path d="M6 18v-5a4 4 0 0 1 8 0v5"/></svg>,
  alert: (p) => <svg className={p?.className} width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M10 2l8 14H2L10 2z" strokeLinejoin="round"/><path d="M10 8v3M10 13v.5" strokeLinecap="round"/></svg>,
  external: (p) => <svg className={p?.className} width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M5 2h5v5M10 2L4 8M2 4v6h6" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  star: (p) => <svg className={p?.className} width="14" height="14" viewBox="0 0 14 14" fill="currentColor"><path d="M7 1l2 4 4 .5-3 3 .8 4.2L7 10.7l-3.8 2L4 8.5l-3-3L5 5z"/></svg>,
  pin: (p) => <svg className={p?.className} width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M10 18s-6-5-6-10a6 6 0 0 1 12 0c0 5-6 10-6 10z" strokeLinejoin="round"/><circle cx="10" cy="8" r="2"/></svg>,
  menu: (p) => <svg className={p?.className} width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 6h14M3 10h14M3 14h14" strokeLinecap="round"/></svg>,
  close: (p) => <svg className={p?.className} width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 4l12 12M16 4L4 16" strokeLinecap="round"/></svg>
};

// ---- Wordmark / Logo ------------------------------------------------
function Wordmark({ size = "md", inverted = false }) {
  const s = size === "lg" ? { font: 26, sub: 11 } : size === "sm" ? { font: 16, sub: 8 } : { font: 19, sub: 9 };
  return (
    <div className="flex-col" style={{ lineHeight: 1 }}>
      <span style={{
        fontFamily: 'var(--font-display)',
        fontSize: s.font,
        letterSpacing: '0.16em',
        textTransform: 'uppercase',
        color: inverted ? 'var(--porcelain)' : 'var(--ink)',
        fontWeight: 500
      }}>Aesthetics</span>
      <span style={{
        fontFamily: 'var(--font-body)',
        fontSize: s.sub,
        letterSpacing: '0.34em',
        textTransform: 'uppercase',
        color: 'var(--bronze-deep)',
        marginTop: 5,
        fontWeight: 500
      }}>International · Dubai</span>
    </div>
  );
}

// Logo mark — phoenix-style abstract from the actual SVG (simplified outline)
function LogoMark({ size = 40, color }) {
  const c = color || 'var(--bronze-deep)';
  return (
    <svg width={size} height={size * 0.7} viewBox="0 0 100 70" fill="none" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {/* Stylised wing — five tapering feathers */}
      <path d="M50 60 Q35 50 22 38 Q15 32 14 24" />
      <path d="M50 60 Q40 47 31 32 Q27 25 28 17" />
      <path d="M50 60 Q46 46 44 28 Q44 20 47 12" />
      <path d="M50 60 Q53 46 58 30 Q62 22 67 16" />
      <path d="M50 60 Q60 50 72 38 Q80 32 84 22" />
      <circle cx="50" cy="60" r="3" fill={c} stroke="none" />
    </svg>
  );
}

// ---- Navigation ----------------------------------------------------
function Nav({ route, go }) {
  const [megaOpen, setMegaOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const t = useContext(TweaksCtx);

  return (
    <>
      <header className="nav-bar" onMouseLeave={() => setMegaOpen(false)}>
        <div className="container">
          <div className="nav-inner">
            <button className="nav-logo" onClick={() => go({ page: 'home' })} style={{ background: 'none', border: 0, cursor: 'pointer' }}>
              <LogoMark size={36} />
              <Wordmark />
            </button>

            <nav className="nav-links">
              <button
                className={`nav-link ${route.page === 'procedures' || route.page === 'procedure' ? 'active' : ''}`}
                onMouseEnter={() => setMegaOpen(true)}
                onClick={() => { setMegaOpen(false); go({ page: 'procedures' }); }}>
                Procedures <Icon.caret className="nav-link-caret" />
              </button>
              <button className={`nav-link ${route.page === 'surgeons' || route.page === 'surgeon' ? 'active' : ''}`} onClick={() => go({ page: 'surgeons' })}>
                Surgeons & Doctors
              </button>
              <button className={`nav-link ${route.page === 'before-after' ? 'active' : ''}`} onClick={() => go({ page: 'before-after' })}>
                Before & After
              </button>
              <button className={`nav-link ${route.page === 'about' ? 'active' : ''}`} onClick={() => go({ page: 'about' })}>
                About
              </button>
              <button className={`nav-link ${route.page === 'contact' ? 'active' : ''}`} onClick={() => go({ page: 'contact' })}>
                Contact
              </button>
            </nav>

            <div className="nav-meta">
              <div className="lang-pill" aria-label="Language">
                {['EN', 'AR', 'RU', 'ZH'].map(l => (
                  <button key={l} className={t.lang === l ? 'on' : ''} onClick={() => t.set({ lang: l })}>{l}</button>
                ))}
              </div>
              <button className="btn btn-primary btn-sm" onClick={() => go({ page: 'book' })}>
                Book a Consultation <Icon.arrow className="btn-icon-arrow" />
              </button>
            </div>
          </div>
        </div>

        {megaOpen && (
          <div className="mega" onMouseEnter={() => setMegaOpen(true)}>
            <div className="container">
              <div className="mega-inner">
                <div className="mega-col">
                  <h4>Surgical</h4>
                  <ul>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Rhinoplasty <Icon.caret /></button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Facelift</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Breast Augmentation</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Tummy Tuck</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Liposuction</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedures' }); }}>All surgical →</button></li>
                  </ul>
                </div>
                <div className="mega-col">
                  <h4>Skin & Injectables</h4>
                  <ul>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Morpheus8 Pro</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Ultherapy AI</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Dermal Fillers</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>Profhilo</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }}>HydraFacial</button></li>
                    <li><button onClick={() => { setMegaOpen(false); go({ page: 'procedures' }); }}>All skin & aesthetics →</button></li>
                  </ul>
                </div>
                <div className="mega-col">
                  <h4>By Concern</h4>
                  <ul>
                    {CONCERNS.slice(0, 6).map(c => (
                      <li key={c}><button onClick={() => { setMegaOpen(false); go({ page: 'procedures' }); }}>{c}</button></li>
                    ))}
                  </ul>
                </div>
                <div className="mega-feature" onClick={() => { setMegaOpen(false); go({ page: 'procedure', slug: 'rhinoplasty' }); }} style={{ cursor: 'pointer' }}>
                  <div className="eyebrow">In Focus</div>
                  <h5>Morpheus8 Pro — Skin Reset</h5>
                  <p>Radiofrequency microneedling for skin tightening and texture renewal, in our DHA-licensed treatment suite.</p>
                  <button className="btn btn-bronze btn-sm" style={{ alignSelf: 'flex-start' }}>Explore <Icon.arrow className="btn-icon-arrow" /></button>
                </div>
              </div>
            </div>
          </div>
        )}
      </header>

      {/* Mobile bottom bar */}
      <div className="mob-bar">
        <a className="btn btn-ghost" href={CLINIC_INFO.phoneHref}><Icon.phone /> Call</a>
        <a className="btn btn-ghost" href={CLINIC_INFO.whatsappHref} target="_blank" rel="noopener" style={{ color: '#1B7E48' }}>WhatsApp</a>
        <button className="btn btn-primary" onClick={() => go({ page: 'book' })}>Book</button>
      </div>

      {/* WhatsApp FAB */}
      <a href={CLINIC_INFO.whatsappHref} target="_blank" rel="noopener" className="wa-fab" aria-label="Chat on WhatsApp">
        <Icon.whatsapp />
      </a>
    </>
  );
}

// ---- Footer --------------------------------------------------------
function Footer({ go }) {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-grid">
          <div className="foot-brand">
            <div className="flex" style={{ alignItems: 'center', gap: 12, marginBottom: 20 }}>
              <LogoMark size={42} color="var(--bronze)" />
              <Wordmark inverted />
            </div>
            <p>Cosmetic &amp; plastic surgery + aesthetics in Jumeirah, Dubai. Surgeon-led since 2011. Care delivered in a DHA-licensed private clinic.</p>
            <div className="mt-3" style={{ fontSize: 13, color: 'rgba(251,250,248,0.65)', lineHeight: 1.8 }}>
              <div>{CLINIC_INFO.address.line1}</div>
              <div>{CLINIC_INFO.address.line2}</div>
              <div>{CLINIC_INFO.address.line3}</div>
              <div style={{ marginTop: 12 }}>{CLINIC_INFO.phone}</div>
              <div>{CLINIC_INFO.email}</div>
            </div>
          </div>
          <div>
            <h4>Procedures</h4>
            <ul>
              {PROCEDURE_AREAS.map(a => <li key={a.id} onClick={() => go({ page: 'procedures' })}>{a.title}</li>)}
            </ul>
          </div>
          <div>
            <h4>Clinic</h4>
            <ul>
              <li onClick={() => go({ page: 'about' })}>About Us</li>
              <li onClick={() => go({ page: 'surgeons' })}>Surgeons &amp; Doctors</li>
              <li onClick={() => go({ page: 'before-after' })}>Before &amp; After</li>
              <li onClick={() => go({ page: 'contact' })}>Contact</li>
              <li onClick={() => go({ page: 'book' })}>Book a Consultation</li>
            </ul>
          </div>
          <div>
            <h4>Compliance</h4>
            <ul>
              <li>DHA Establishment Licence</li>
              <li>Patient Safety Statement</li>
              <li>Advertising Policy</li>
              <li>Privacy &amp; Cookies</li>
              <li>Terms of Use</li>
            </ul>
          </div>
          <div>
            <h4>Follow</h4>
            <ul>
              <li>Instagram · {CLINIC_INFO.socials.instagram}</li>
              <li>Facebook · {CLINIC_INFO.socials.facebook}</li>
              <li>LinkedIn</li>
              <li>YouTube</li>
            </ul>
          </div>
        </div>

        <div className="foot-bottom">
          <div>© {new Date().getFullYear()} {CLINIC_INFO.legal}. All rights reserved.</div>
          <div className="foot-licence">
            <Icon.shield /> DHA Polyclinic · Licence to verify
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Icon, Wordmark, LogoMark, Nav, Footer });
