// Shared components for the patient-web UI kit
const { useState, useEffect, useRef } = React;

// Lucide icon — accepts path data
function Icon({ d, size = 20, stroke = 1.5, ...rest }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" {...rest}
      dangerouslySetInnerHTML={{ __html: d }} />
  );
}
const ICONS = {
  search: '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>',
  pin: '<path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0z"/><circle cx="12" cy="10" r="3"/>',
  cal: '<rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
  arrow: '<path d="M5 12h14M12 5l7 7-7 7"/>',
  arrowL: '<path d="M19 12H5M12 19l-7-7 7-7"/>',
  chevR: '<polyline points="9 18 15 12 9 6"/>',
  chevL: '<polyline points="15 18 9 12 15 6"/>',
  chevD: '<polyline points="6 9 12 15 18 9"/>',
  check: '<polyline points="20 6 9 17 4 12"/>',
  x: '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  plus: '<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
  share: '<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>',
  globe: '<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>',
  alert: '<path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><circle cx="12" cy="17" r="0.5" fill="currentColor"/>',
  upload: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
  filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
  // Flat-icon set — single-stroke, no fills, used platform-wide in place of emoji.
  tooth: '<path d="M12 5.5c-1.6-1.5-3.4-2-5.2-1.6C4 4.4 2 6.7 2 9.6c0 2.9 1 4.9 1.5 7.9.3 1.7.5 3 1.5 3s1.6-1.5 2.1-3c.6-1.9 1-3 2.9-3s2.3 1.1 2.9 3c.5 1.5 1.1 3 2.1 3s1.2-1.3 1.5-3c.5-3 1.5-5 1.5-7.9 0-2.9-2-5.2-4.8-5.7-1.8-.4-3.6.1-5.2 1.6Z"/>',
  stetho: '<path d="M11 2v2"/><path d="M5 2v2"/><path d="M5 3H4a2 2 0 0 0-2 2v4a6 6 0 0 0 12 0V5a2 2 0 0 0-2-2h-1"/><path d="M8 15a6 6 0 0 0 12 0v-3"/><circle cx="20" cy="10" r="2"/>',
  camera: '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/>',
  image: '<rect width="18" height="18" x="3" y="3" rx="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21"/>',
  trash: '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/>',
  edit: '<path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/>',
  play: '<polygon points="6 3 20 12 6 21 6 3"/>',
  playCircle: '<circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/>',
  video: '<path d="m22 8-6 4 6 4V8Z"/><rect width="14" height="12" x="2" y="6" rx="2" ry="2"/>',
  film: '<rect width="18" height="18" x="3" y="3" rx="2"/><path d="M7 3v18"/><path d="M3 7.5h4"/><path d="M3 12h18"/><path d="M3 16.5h4"/><path d="M17 3v18"/><path d="M17 7.5h4"/><path d="M17 16.5h4"/>',
  wallet: '<path d="M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1"/><path d="M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4"/>',
  dollar: '<line x1="12" y1="2" x2="12" y2="22"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
  info: '<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>',
  help: '<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/>',
  heart: '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/>',
  clock: '<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>',
  file: '<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M16 13H8"/><path d="M16 17H8"/><path d="M10 9H8"/>',
  scan: '<path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><line x1="7" y1="12" x2="17" y2="12"/>',
  type: '<polyline points="4 7 4 4 20 4 20 7"/><line x1="9" y1="20" x2="15" y2="20"/><line x1="12" y1="4" x2="12" y2="20"/>',
  book: '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
  activity: '<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>',
  list: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
  grid: '<rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/>',
};

function Masthead({ lang, setLang, go }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const nav = (e, target) => {
    e.preventDefault();
    setMenuOpen(false);
    if (go) go(target);
  };
  const closeMenu = () => setMenuOpen(false);

  // Close on outside click
  useEffect(() => {
    if (!menuOpen) return;
    const handler = (e) => {
      if (!e.target.closest('.masthead') && !e.target.closest('.mobile-menu')) {
        setMenuOpen(false);
      }
    };
    document.addEventListener('click', handler);
    return () => document.removeEventListener('click', handler);
  }, [menuOpen]);

  return (
    <>
      <header className="masthead">
        <a className="brand" href="/#" onClick={(e)=>nav(e,'landing')} aria-label="TheDentist.ai home">
          <img src="./assets/logos/monogram-tooth-new.svg" width="34" height="34" alt=""/>
          <span className="wordmark">TheDentist<span style={{color:'var(--seal)'}}>.</span>ai</span>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#audit-1" onClick={(e)=>nav(e,'audit-1')}>Smile Audit</a>
          <a href="#folio" onClick={(e)=>nav(e,'folio')}>SmileCam</a>
          <a href="#directory" onClick={(e)=>nav(e,'directory')}>Find a dentist</a>
          <a href="/education/">Videos</a>
          <a href="/cost/">Costs</a>
          <a href="/methodology/">Methodology</a>
        </nav>
        <div className="nav-right">
          <LangToggle lang={lang} setLang={setLang}/>
          <a className="btn btn-ghost btn-sm" href="/portal/">Sign in</a>
          <Button variant="primary" size="sm" onClick={()=>{ closeMenu(); go && go('audit-1'); }}>Start audit</Button>
        </div>
        <button
          className={`hamburger${menuOpen?' open':''}`}
          aria-label="Toggle navigation"
          aria-expanded={menuOpen}
          onClick={()=>setMenuOpen(o=>!o)}
        >
          <span/><span/><span/>
        </button>
      </header>
      <div className={`mobile-menu${menuOpen?' open':''}`} aria-hidden={!menuOpen}>
        <button className="mm-link" onClick={(e)=>nav(e,'audit-1')}>Smile Audit</button>
        <button className="mm-link" onClick={(e)=>nav(e,'folio')}>SmileCam</button>
        <button className="mm-link" onClick={(e)=>nav(e,'directory')}>Find a dentist</button>
        <a className="mm-link" href="/cost/" onClick={closeMenu}>Costs</a>
        <a className="mm-link" href="/methodology/" onClick={closeMenu}>Methodology</a>
        <a className="mm-link" href="/education/" onClick={closeMenu}>Patient education</a>
        <a className="mm-link" href="/portal/" onClick={closeMenu} style={{borderTop:'1px solid var(--ink-5)', marginTop:8, paddingTop:14}}>Sign in</a>
        <div className="mm-cta">
          <LangToggle lang={lang} setLang={setLang}/>
          <Button variant="primary" size="md" onClick={(e)=>nav(e,'audit-1')}>Start your Smile Audit</Button>
        </div>
      </div>
    </>
  );
}

function LangToggle({ lang, setLang }) {
  return (
    <div className="lang-toggle" role="group" aria-label="Language">
      {['EN','ES','中文'].map(l => (
        <button key={l} className={lang===l?'active':''} onClick={()=>setLang(l)}>{l}</button>
      ))}
    </div>
  );
}

function Footer({ go }) {
  const link = (e, target) => { e.preventDefault(); if (go) go(target); };
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <div style={{display:'flex',alignItems:'center',gap:10}}>
            <img src="./assets/logos/monogram-tooth-new.svg" width="28" height="28" alt=""/>
            <span className="wordmark" style={{fontSize:18}}>TheDentist<span style={{color:'var(--seal)'}}>.</span>ai</span>
          </div>
          <p className="t-meta" style={{maxWidth:300,marginTop:8}}>The Michelin Guide for dental care. Verified · Independent · No paid placement.</p>
        </div>
        <div className="footer-col">
          <div className="t-eyebrow">Get help</div>
          <a href="#audit-1" onClick={(e)=>link(e,'audit-1')}>Smile Audit</a>
          <a href="#folio" onClick={(e)=>link(e,'folio')}>SmileCam</a>
          <a href="#directory" onClick={(e)=>link(e,'directory')}>Find a dentist</a>
          <a href="/cost/">Costs in your ZIP</a>
          <a href="/education/">Patient education</a>
        </div>
        <div className="footer-col">
          <div className="t-eyebrow">How we work</div>
          <a href="/methodology/">Methodology</a>
          <a href="/council/">Editorial Council</a>
          <a href="/privacy/">Privacy &amp; HIPAA</a>
        </div>
        <div className="footer-col">
          <div className="t-eyebrow">Practitioners</div>
          <a href="/for-dentists/">About the program</a>
          <a href="#folio" onClick={(e)=>link(e,'folio')}>SmileCam Pro</a>
          <a href="/portal/">Sign in</a>
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',gap:12,flexWrap:'wrap',padding:'var(--s-3) 0 0',borderTop:'1px solid var(--ink-5)',marginTop:'var(--s-4)'}}>
        <button type="button" className="bc-link" style={{fontSize:12,background:'none',border:0,padding:0,cursor:'pointer',color:'var(--ink-3)'}} onClick={(e)=>{
          e.preventDefault();
          let cur = 'modern'; try { cur = localStorage.getItem('td_view') || 'modern'; } catch{}
          const next = cur === 'classic' ? 'modern' : 'classic';
          try { localStorage.setItem('td_view', next); } catch{}
          window.location.hash = '';
          window.location.reload();
        }}>{(typeof window !== 'undefined' && (()=>{try{return localStorage.getItem('td_view')==='classic'}catch{return false}})()) ? '↻ Use modern style' : '← Use classic style'}</button>
        <span className="t-fine" style={{margin:0}}>Modern is the default. Classic uses the original six-intent landing.</span>
      </div>
      <div className="t-fine footer-disclosure">This is information, not diagnosis. A licensed dentist must confirm. AI-assisted content is generated under California AB 3030 disclosure and reviewed by the Editorial Council under SB 1120 oversight.</div>
      <div className="t-meta footer-fine">© 2026 Levi AI Holdings LLC · Reviewed by our Editorial Council of licensed US dentists · Patient education & dental-assistant training partner: <a href="https://forento.io" target="_blank" rel="noopener noreferrer" style={{color:'var(--ink-3)'}}>Forento</a></div>
    </footer>
  );
}

function Breadcrumbs({ crumbs, go }) {
  return (
    <nav className="breadcrumbs" aria-label="Breadcrumb">
      {crumbs.map((c, i) => {
        const isLast = i === crumbs.length - 1;
        return (
          <React.Fragment key={i}>
            {i > 0 && <span className="bc-sep" aria-hidden="true">›</span>}
            {isLast
              ? <span className="bc-current">{c.label}</span>
              : c.screen
                ? <button className="bc-link" onClick={()=>go && go(c.screen)}>{c.label}</button>
                : <a className="bc-link" href={c.href||'#'}>{c.label}</a>
            }
          </React.Fragment>
        );
      })}
    </nav>
  );
}

function Button({ children, variant='primary', size='md', ...rest }) {
  return <button className={`btn btn-${variant} btn-${size}`} {...rest}>{children}</button>;
}

function Badge({ axis, tier, size = 64 }) {
  return <img src={`./assets/badges/${axis}--${tier}.svg`} width={size} height={size} alt={`${axis} ${tier}`}/>;
}

function Pill({ children, tone='neutral' }) {
  return <span className={`pill pill-${tone}`}>{children}</span>;
}

function ProgressDots({ step, total }) {
  return (
    <div className="dots" role="progressbar" aria-valuenow={step} aria-valuemax={total}>
      {Array.from({length:total},(_,i)=> <span key={i} className={i<step?'on':''}/>)}
    </div>
  );
}

function Disclosure() {
  return <p className="t-fine disclosure">This is information, not diagnosis. A licensed dentist must confirm.</p>;
}

Object.assign(window, { Icon, ICONS, Masthead, LangToggle, Footer, Breadcrumbs, Button, Badge, Pill, ProgressDots, Disclosure });