// Landing page screen
const { useState } = React;

function Landing({ go, lang, setLang }) {
  return (
    <div className="app">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container">
          <section className="hero">
            <div>
              <div className="hero-eyebrow">The Michelin Guide for dental care</div>
              <h1>Outcomes,<br/>not opinions.</h1>
              <p className="lead">Free, verified, in 90 seconds. Get a personalized Smile Health Snapshot and matched dentists nearby — with positive-only recognition badges earned algorithmically.</p>
              <div className="hero-cta">
                <Button variant="primary" size="lg" onClick={()=>go('audit-1')}>Start your Smile Audit</Button>
                <Button variant="secondary" size="lg" onClick={()=>go('directory')}>Find a dentist near me</Button>
              </div>
              <div className="hero-trust">
                <span>Editorial Council chaired by Dr. Nick Levi, DDS</span>
                <span>30 years of San Francisco practice</span>
                <span><a href="/methodology/">Methodology published →</a></span>
              </div>
            </div>
            <div className="hero-art">
              <img src="./assets/illustrations/hero-arch.svg" alt=""/>
            </div>
          </section>

          <section style={{padding: '0 0 var(--s-12)'}}>
            <div className="three-up">
              <div className="card feature-card">
                <Icon d={ICONS.search} size={28} stroke={1.4}/>
                <h3>Your Smile Health Snapshot</h3>
                <p>Three things this commonly is, in plain language. Information you can share with your dentist.</p>
                <a href="#" onClick={(e)=>{e.preventDefault();go('audit-1');}}>Start the audit →</a>
              </div>
              <div className="card feature-card">
                <Icon d={ICONS.cal} size={28} stroke={1.4}/>
                <h3>Real cost in your zip</h3>
                <p>Practice-published rates verified against FAIR Health regional medians. With and without insurance.</p>
                <a href="#" onClick={(e)=>{e.preventDefault();go('directory');}}>See costs →</a>
              </div>
              <div className="card feature-card">
                <Icon d={ICONS.pin} size={28} stroke={1.4}/>
                <h3>Recognized dentists near you</h3>
                <p>Six recognition axes — Anxious-Friendly, Family-Friendly, Multilingual, and more. Positive-only.</p>
                <a href="#" onClick={(e)=>{e.preventDefault();go('directory');}}>Browse the directory →</a>
              </div>
            </div>
          </section>
        </div>
      </main>
      <Footer/>
    </div>
  );
}

window.Landing = Landing;