// LandingModern.jsx — Default homepage. Michelin Guide tagline, two big CTAs,
// view-toggle to Classic, and the user-type chooser inline.
const { useState: useLMs, useEffect: useLMe } = React;

function ViewToggle({ value, onChange }) {
  return (
    <div role="tablist" aria-label="Layout style" style={{
      display:'inline-flex', border:'1px solid var(--ink-5)', borderRadius:999, overflow:'hidden',
      background:'var(--paper)'
    }}>
      {[['modern','Modern'], ['classic','Classic']].map(([k,label]) => (
        <button key={k} role="tab" aria-selected={value===k}
          onClick={()=>onChange(k)}
          style={{
            padding:'6px 14px', fontSize:12, fontWeight:600, cursor:'pointer', border:0,
            background: value===k ? 'var(--ink-1)' : 'transparent',
            color: value===k ? 'var(--paper)' : 'var(--ink-2)',
          }}>{label}</button>
      ))}
    </div>
  );
}

function LandingModern({ go, lang, setLang, set }) {
  const [view, setView] = useLMs(() => {
    try { return localStorage.getItem('td_view') || 'modern'; } catch { return 'modern'; }
  });
  const [role, setRole] = useLMs(() => {
    try { return localStorage.getItem('td_role') || ''; } catch { return ''; }
  });

  useLMe(() => { try { localStorage.setItem('td_view', view); } catch{} }, [view]);

  const goSwipe = (r) => {
    try { localStorage.setItem('td_role', r); } catch{}
    setRole(r);
    set && set(s => ({ ...s, role: r }));
    go(r === 'clinician' ? 'swipe-clinician' : 'swipe');
  };

  // If user already toggled to classic, render the classic landing
  if (view === 'classic' && window.Landing) {
    return <window.Landing go={go} lang={lang} setLang={setLang} set={set}/>;
  }

  return (
    <div className="app">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container" style={{paddingTop:'var(--s-6)', paddingBottom:'var(--s-10)'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'var(--s-4)',flexWrap:'wrap',gap:8}}>
            <div className="t-eyebrow">The Michelin Guide for dental care</div>
            <ViewToggle value={view} onChange={(v)=>{ setView(v); }}/>
          </div>

          <h1 style={{
            fontFamily:'var(--font-display)', fontSize:'clamp(34px, 5.5vw, 62px)',
            lineHeight:1.05, margin:'0 0 var(--s-3)', maxWidth:920, letterSpacing:'-0.01em'
          }}>
            Outcomes, not opinions. <span style={{color:'var(--seal)'}}>A 90-second triage</span>, your own SmileCam, and matched dentists you can trust.
          </h1>
          <p style={{color:'var(--ink-2)',fontSize:18,lineHeight:1.55,maxWidth:760,margin:'0 0 var(--s-6)'}}>
            Swipe through a few quick questions. We'll explain what your symptoms could be, how soon to act, and what it may cost — then match you with a recognized dentist nearby.
          </p>

          {/* Role chooser */}
          <section aria-labelledby="role-chooser" style={{marginBottom:'var(--s-8)'}}>
            <div id="role-chooser" className="t-eyebrow" style={{marginBottom:'var(--s-3)'}}>I'm here as…</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))',gap:'var(--s-3)'}}>
              <ChooserCard
                title="A patient"
                desc="Self-triage your symptoms, build your SmileCam, and find a recognized dentist."
                cta="Start patient triage →"
                onClick={()=>goSwipe('patient')}
                accent="var(--seal)"
                icon="tooth"
              />
              <ChooserCard
                title="A dentist or office staff"
                desc="Triage inbound patients, capture chairside photos with SmileCam Pro, present cases, export collages."
                cta="Open clinician workspace →"
                onClick={()=>goSwipe('clinician')}
                accent="var(--sage)"
                icon="stetho"
              />
            </div>
          </section>

          {/* Secondary tiles */}
          <section aria-labelledby="explore" style={{borderTop:'1px solid var(--ink-5)',paddingTop:'var(--s-6)'}}>
            <div id="explore" className="t-eyebrow" style={{marginBottom:'var(--s-3)'}}>Or jump straight to</div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit, minmax(220px, 1fr))',gap:'var(--s-3)'}}>
              <MiniTile label="My SmileCam" desc="Photos · cases · consent · share with dentist" onClick={()=>go('folio')}/>
              <MiniTile label="Find a dentist" desc="By ZIP, insurance, language, recognition axes" onClick={()=>go('directory')}/>
              <MiniTile label="Cost lookup" desc="What it really costs in your ZIP — with or without insurance" href="/cost/"/>
              <MiniTile label="Patient forms" desc="Intake, consent, post-op — submit before your visit" onClick={()=>go('forms')}/>
            </div>
          </section>

          <p className="t-fine" style={{marginTop:'var(--s-6)'}}>
            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.
          </p>
        </div>
      </main>
      <Footer go={go}/>
    </div>
  );
}

function ChooserCard({ title, desc, cta, onClick, accent, icon }) {
  return (
    <button type="button" onClick={onClick}
      style={{
        textAlign:'left', cursor:'pointer', width:'100%',
        background:'var(--paper)', border:`1px solid var(--ink-5)`, borderRadius:18,
        padding:'var(--s-5)', display:'flex', flexDirection:'column', gap:'var(--s-2)',
        transition:'transform .15s ease, border-color .15s ease, box-shadow .15s ease',
      }}
      onMouseEnter={(e)=>{ e.currentTarget.style.borderColor = accent; e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 10px 28px rgba(10,31,51,.08)';}}
      onMouseLeave={(e)=>{ e.currentTarget.style.borderColor = 'var(--ink-5)'; e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='';}}
    >
      <div style={{ color: accent, lineHeight:1 }} aria-hidden="true">
        {window.Icon && window.ICONS && <Icon d={ICONS[icon] || ICONS.tooth} size={28} stroke={1.4}/>}
      </div>
      <div style={{ fontFamily:'var(--font-display)', fontSize:24, fontWeight:500 }}>{title}</div>
      <div style={{ color:'var(--ink-2)', fontSize:14, lineHeight:1.55 }}>{desc}</div>
      <div style={{ color: accent, fontWeight:600, marginTop:'var(--s-2)' }}>{cta}</div>
    </button>
  );
}

function MiniTile({ label, desc, onClick, href }) {
  const Inner = (
    <>
      <div style={{ fontWeight:600, color:'var(--ink-1)' }}>{label}</div>
      <div style={{ fontSize:12, color:'var(--ink-3)', marginTop:4, lineHeight:1.5 }}>{desc}</div>
    </>
  );
  const style = {
    display:'block', padding:'14px 16px', borderRadius:12, border:'1px solid var(--ink-5)',
    background:'var(--paper)', textDecoration:'none', color:'inherit', cursor:'pointer', textAlign:'left',
  };
  if (href) return <a href={href} style={style}>{Inner}</a>;
  return <button type="button" onClick={onClick} style={{...style, width:'100%'}}>{Inner}</button>;
}

window.LandingModern = LandingModern;
window.ViewToggle = ViewToggle;