// 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"/>',
  chevR: '<polyline points="9 18 15 12 9 6"/>',
  chevL: '<polyline points="15 18 9 12 15 6"/>',
  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"/>',
  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"/>',
  filter: '<polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/>',
};

function Masthead({ lang, setLang, go }) {
  const nav = (e, target) => { e.preventDefault(); if (go) go(target); };
  return (
    <header className="masthead">
      <a className="brand" href="/" onClick={(e)=>nav(e,'landing')}>
        <img src="./assets/logos/monogram-dark.svg" width="32" height="32" alt=""/>
        <span className="wordmark">TheDentist<span style={{color:'var(--seal)'}}>.</span>ai</span>
      </a>
      <nav className="nav-links">
        <a href="/directory" onClick={(e)=>nav(e,'directory')}>Find a dentist</a>
        <a href="/methodology/">How we recognize</a>
        <a href="/council/">Editorial Council</a>
      </nav>
      <div className="nav-right">
        <LangToggle lang={lang} setLang={setLang}/>
        <a className="btn btn-ghost btn-sm" href="/for-dentists/">For dentists</a>
      </div>
    </header>
  );
}

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() {
  return (
    <footer className="footer">
      <div className="footer-row">
        <div className="t-eyebrow">TheDentist.ai</div>
        <a href="/methodology/">Methodology</a>
        <a href="/council/">Editorial Council</a>
        <a href="/for-dentists/">For dentists</a>
        <a href="/privacy/">Privacy</a>
      </div>
      <div className="t-fine" style={{marginTop:'var(--s-4)'}}>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" style={{marginTop:'var(--s-2)'}}>© 2026 Levi AI Holdings LLC · Editorial Council chaired by Dr. Nick Levi, DDS · 30 years of San Francisco practice</div>
    </footer>
  );
}

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, Button, Badge, Pill, ProgressDots, Disclosure });