// ─────────── Shared atoms & icons ───────────

const Icon = ({ name, size = 18 }) => {
  const s = { width: size, height: size, fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (name) {
    case 'arrow':       return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case 'phone':       return <svg viewBox="0 0 24 24" {...s}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z" /></svg>;
    case 'mail':        return <svg viewBox="0 0 24 24" {...s}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7" /></svg>;
    case 'pin':         return <svg viewBox="0 0 24 24" {...s}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case 'calendar':    return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>;
    case 'tooth':       return <svg viewBox="0 0 24 24" {...s}><path d="M12 2c-2 0-3 1-5 1S3 4 3 7c0 4 1 7 2 10s2 5 4 5 2-4 3-6 1-2 2 0 1 6 3 6 3-2 4-5 2-6 2-10c0-3-2-3-4-3s-3-1-5-1z"/></svg>;
    case 'sparkle':     return <svg viewBox="0 0 24 24" {...s}><path d="M12 3v3m0 12v3M3 12h3m12 0h3M5.6 5.6l2.1 2.1m8.6 8.6 2.1 2.1m0-12.8-2.1 2.1M7.7 16.3l-2.1 2.1"/></svg>;
    case 'shield':      return <svg viewBox="0 0 24 24" {...s}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/></svg>;
    case 'smile':       return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>;
    case 'syringe':     return <svg viewBox="0 0 24 24" {...s}><path d="m18 2 4 4M17 3l4 4M11 6l7 7M9 8l-3 3 6 6 3-3M5 14l-3 3 3 3 3-3"/></svg>;
    case 'kid':         return <svg viewBox="0 0 24 24" {...s}><circle cx="12" cy="8" r="4"/><path d="M5 22c0-4 3-7 7-7s7 3 7 7"/><path d="M9 8h.01M15 8h.01M10 11s.5 1 2 1 2-1 2-1"/></svg>;
    case 'xray':        return <svg viewBox="0 0 24 24" {...s}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 9h6v6H9z"/><path d="M3 9h6M3 15h6M15 9h6M15 15h6M9 3v6M15 3v6M9 15v6M15 15v6"/></svg>;
    case 'crown':       return <svg viewBox="0 0 24 24" {...s}><path d="m2 8 4 10h12l4-10-6 4-4-7-4 7z"/></svg>;
    case 'play':        return <svg viewBox="0 0 24 24" {...s}><polygon points="6 4 20 12 6 20 6 4" fill="currentColor"/></svg>;
    case 'star':        return <svg viewBox="0 0 24 24" fill="currentColor"><polygon points="12 2 15 9 22 9.5 17 14.5 18.5 22 12 18 5.5 22 7 14.5 2 9.5 9 9 12 2"/></svg>;
    case 'check':       return <svg viewBox="0 0 24 24" {...s} strokeWidth="2.2"><path d="m5 12 5 5 9-11"/></svg>;
    case 'plus':        return <svg viewBox="0 0 24 24" {...s}><path d="M12 5v14M5 12h14" /></svg>;
    case 'minus':       return <svg viewBox="0 0 24 24" {...s}><path d="M5 12h14" /></svg>;
    case 'chevron-left': return <svg viewBox="0 0 24 24" {...s}><path d="M15 18l-6-6 6-6"/></svg>;
    case 'chevron-right': return <svg viewBox="0 0 24 24" {...s}><path d="M9 18l6-6-6-6"/></svg>;
    case 'instagram':   return <svg viewBox="0 0 24 24" {...s}><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    case 'facebook':    return <svg viewBox="0 0 24 24" {...s}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>;
    case 'whatsapp':    return <svg viewBox="0 0 24 24" {...s}><path d="M3 21l1.7-5A8.5 8.5 0 1 1 8 19.3L3 21z"/><path d="M8.5 9c0-.5.4-1 1-1h1l.8 2-1.2.8a5 5 0 0 0 2.7 2.7l.8-1.2 2 .8v1c0 .6-.5 1-1 1A6.5 6.5 0 0 1 8.5 9z"/></svg>;
    case 'menu':        return <svg viewBox="0 0 24 24" {...s}><path d="M3 7h18M3 12h18M3 17h18"/></svg>;
    case 'drag':        return <svg viewBox="0 0 24 24" {...s} strokeWidth="2"><path d="M8 8l-4 4 4 4M16 8l4 4-4 4"/></svg>;
    case 'car':         return <svg viewBox="0 0 24 24" {...s}><path d="M5 17H3a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1l3-3h8l3 3h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2h-2"/><circle cx="7.5" cy="17.5" r="1.5"/><circle cx="16.5" cy="17.5" r="1.5"/></svg>;
    default: return null;
  }
};

const Btn = ({ kind = 'primary', children, icon = 'arrow', ...rest }) => (
  <button className={`btn btn-${kind}`} {...rest}>
    <span>{children}</span>
    <span className="arrow"><Icon name={icon} size={11} /></span>
  </button>
);

// reveal-on-scroll
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

// Smooth scroll to section
const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) {
    const off = 90;
    const top = el.getBoundingClientRect().top + window.scrollY - off;
    window.scrollTo({ top, behavior: 'smooth' });
  }
};

// ─────────── Top bar ───────────
const TopBar = () => {
  const [scrolled,  setScrolled]  = React.useState(false);
  const [active,    setActive]    = React.useState('home');
  const [menuOpen,  setMenuOpen]  = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 30);
      const sections = ['home', 'doctors', 'treatments', 'book'];
      for (let i = sections.length - 1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.getBoundingClientRect().top < 200) { setActive(sections[i]); break; }
      }
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const navItems = [
    { href: '#home',           l: 'Home',            onClick: (e) => { e.preventDefault(); scrollTo('home'); } },
    { href: '/doctors',    l: 'Doctors' },
    { href: '/treatments', l: 'Treatments' },
    { href: '/branches',   l: 'Branches' },
    { href: '/patients',   l: 'Patient Stories' },
  ];

  return (
    <>
      <header className={`topbar on-dark ${scrolled ? 'scrolled' : ''}`}>
        <div className="wrap topbar-inner">
          <a href="#home" className="brand" onClick={(e) => { e.preventDefault(); scrollTo('home'); }}>
            <img src="assets/logo.png" alt="Align-O-Dent" className="brand-logo" />
          </a>
          <nav className="nav">
            {navItems.map(item => <a key={item.href} href={item.href} onClick={item.onClick}>{item.l}</a>)}
          </nav>
          <div className="topbar-cta">
            <span className="topbar-phone"><span className="pulse"></span>+91 93218 59061</span>
            <Btn kind="primary" onClick={() => scrollTo('book')}>Book Visit</Btn>
            <button className="topbar-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu">
              <Icon name="menu" size={22} />
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-nav-overlay ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        <button className="mobile-nav-close" onClick={() => setMenuOpen(false)} aria-label="Close menu">✕</button>
        <nav className="mobile-nav-links">
          {navItems.map(item => (
            <a key={item.href} href={item.href} onClick={(e) => { item.onClick?.(e); setMenuOpen(false); }}>
              {item.l}<span className="mobile-nav-arr">→</span>
            </a>
          ))}
        </nav>
        <div className="mobile-nav-footer">
          <a href="tel:+919321859061" className="mobile-nav-phone"><span className="pulse"></span>+91 93218 59061</a>
          <button className="btn btn-primary mobile-nav-book" onClick={() => { setMenuOpen(false); scrollTo('book'); }}>
            <span>Book Visit</span><span className="arrow"><Icon name="arrow" size={11}/></span>
          </button>
        </div>
      </div>
    </>
  );
};

// ─────────── Shared top bar for sub-pages (treatments, patients, etc.) ───────────
// Identical scroll behaviour to TopBar — transparent → frosted glass on scroll.
// Pass `active` prop matching the page id: 'treatments' | 'patients'
const PageTopBar = ({ active = '' }) => {
  const [scrolled,  setScrolled]  = React.useState(false);
  const [menuOpen,  setMenuOpen]  = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    { href: '/', l: 'Home',           id: 'home' },
    { href: '/doctors',      l: 'Doctors',         id: 'doctors' },
    { href: '/treatments',   l: 'Treatments',      id: 'treatments' },
    { href: '/branches',     l: 'Branches',        id: 'branches' },
    { href: '/patients',     l: 'Patient Stories', id: 'patients' },
  ];

  return (
    <>
      <header className={`topbar on-dark ${scrolled ? 'scrolled' : ''}`}>
        <div className="wrap topbar-inner">
          <a href="/" className="brand">
            <img src="assets/logo.png" alt="Align-O-Dent" className="brand-logo" />
          </a>
          <nav className="nav">
            {links.map(({ href, l, id }) => (
              <a key={id} href={href} className={active === id ? 'active' : ''}>{l}</a>
            ))}
          </nav>
          <div className="topbar-cta">
            <span className="topbar-phone"><span className="pulse"></span>+91 93218 59061</span>
            <a href="/#book" className="btn btn-primary">
              <span>Book Visit</span>
              <span className="arrow"><Icon name="arrow" size={11} /></span>
            </a>
            <button className="topbar-hamburger" onClick={() => setMenuOpen(true)} aria-label="Open menu">
              <Icon name="menu" size={22} />
            </button>
          </div>
        </div>
      </header>

      <div className={`mobile-nav-overlay ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        <button className="mobile-nav-close" onClick={() => setMenuOpen(false)} aria-label="Close menu">✕</button>
        <nav className="mobile-nav-links">
          {links.map(({ href, l, id }) => (
            <a key={id} href={href} className={active === id ? 'active' : ''} onClick={() => setMenuOpen(false)}>
              {l}<span className="mobile-nav-arr">→</span>
            </a>
          ))}
        </nav>
        <div className="mobile-nav-footer">
          <a href="tel:+919321859061" className="mobile-nav-phone"><span className="pulse"></span>+91 93218 59061</a>
          <a href="/#book" className="btn btn-primary mobile-nav-book" onClick={() => setMenuOpen(false)}>
            <span>Book Visit</span><span className="arrow"><Icon name="arrow" size={11}/></span>
          </a>
        </div>
      </div>
    </>
  );
};

Object.assign(window, { Icon, Btn, useReveal, scrollTo, TopBar, PageTopBar });