// Landing page — single-promise hero + 6 intent chips (decision-tree entry).
// Uses window.t(lang, key) from i18n.js when available; falls back to EN literals.
const { useState } = React;

// Icons per intent chip
const INTENT_ICONS = {
  toothache:      'M12 2C7 2 4 6 4 11c0 5 3 9 4 11 .5 1 1 1 1 0 0-2 1-5 3-5s3 3 3 5c0 1 .5 1 1 0 1-2 4-6 4-11 0-5-3-9-8-9z',
  estimate:       'M12 2v20 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',
  kids:           'M12 5c-2 0-4 2-4 5 0 1 .5 2 1 3l-1 4h8l-1-4c.5-1 1-2 1-3 0-3-2-5-4-5zM9 17h6',
  'second-opinion':'M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11',
  anxiety:        'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M8 14s1.5 2 4 2 4-2 4-2 M9 9h.01 M15 9h.01',
  'find-dentist':  'M12 2a8 8 0 0 0-8 8c0 5.5 8 12 8 12s8-6.5 8-12a8 8 0 0 0-8-8z M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
};
const INTENT_ACCENTS = {
  toothache: 'var(--alert)', estimate: 'var(--gold)', kids: 'var(--sage)',
  'second-opinion': 'var(--ink-2)', anxiety: 'var(--plum)', 'find-dentist': 'var(--seal)',
};

// Build intent array with i18n strings resolved at render time
function getIntents(lang) {
  const T = (k, fb) => {
    const v = window.t ? window.t(lang, k) : fb;
    return (v === k && fb !== undefined) ? fb : v;
  };
  return [
    {
      id: 'toothache',
      eyebrow: T('intent.toothache.eyebrow', 'I have a problem'),
      title:   T('intent.toothache.title',   'Toothache or pain'),
      desc:    T('intent.toothache.desc',    'Walk through what it could be, what to do tonight, when to see someone.'),
      target: 'triage',
    },
    {
      id: 'estimate',
      eyebrow: T('intent.estimate.eyebrow', 'Before I book'),
      title:   T('intent.estimate.title',   'Cost estimate'),
      desc:    T('intent.estimate.desc',    'Verified regional rates. What it costs with — and without — coverage.'),
      target: 'cost-estimate',
    },
    {
      id: 'kids',
      eyebrow: T('intent.kids.eyebrow', 'For my child'),
      title:   T('intent.kids.title',   'Kids dental care'),
      desc:    T('intent.kids.desc',    'First visit, tooth injury, braces questions — family-friendly guidance.'),
      target: 'decision-tree',
      targetState: { _dtEntry: 'kids' },
    },
    {
      id: 'second-opinion',
      eyebrow: T('intent.second-opinion.eyebrow', 'Treatment plan review'),
      title:   T('intent.second-opinion.title',   'Second opinion'),
      desc:    T('intent.second-opinion.desc',    'Upload a plan or describe what you were told — we help you prepare questions.'),
      target: 'second-opinion',
    },
    {
      id: 'anxiety',
      eyebrow: T('intent.anxiety.eyebrow', 'Nervous about the dentist'),
      title:   T('intent.anxiety.title',   'Dental anxiety'),
      desc:    T('intent.anxiety.desc',    'Scripts, sedation options, and anxious-friendly practices near you.'),
      target: 'directory',
      targetState: { _dir: { filt: ['anxious-friendly'], q: '' } },
    },
    {
      id: 'find-dentist',
      eyebrow: T('intent.find-dentist.eyebrow', 'I need care'),
      title:   T('intent.find-dentist.title',   'Find a dentist'),
      desc:    T('intent.find-dentist.desc',    'Matched, recognized providers near you — no paid placement.'),
      target: 'directory',
    },
  ];
}

function IntentCard({ intent, onPick }) {
  const handle = (e) => {
    if (intent.href) return;
    e.preventDefault();
    onPick(intent);
  };
  const Tag = intent.href ? 'a' : 'button';
  const tagProps = intent.href ? { href: intent.href } : { type: 'button' };
  const accent = INTENT_ACCENTS[intent.id] || 'var(--ink-1)';
  const icon   = INTENT_ICONS[intent.id]   || INTENT_ICONS.find;
  return (
    <Tag
      {...tagProps}
      onClick={handle}
      className="intent-card td-card td-card-sm"
      style={{
        display: 'flex', flexDirection: 'column', gap: 12,
        textAlign: 'left', alignItems: 'flex-start',
        cursor: 'pointer',
        textDecoration: 'none',
        color: 'var(--td-text-primary)',
        transition: 'transform .12s ease, border-color .12s ease, box-shadow .12s ease',
      }}
    >
      <span aria-hidden="true" style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 44, height: 44, borderRadius: 12,
        background: 'var(--bone)', color: accent,
      }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
          strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <path d={icon}/>
        </svg>
      </span>
      <div className="t-eyebrow" style={{color:'var(--ink-3)'}}>{intent.eyebrow}</div>
      <h3 style={{margin:0, fontFamily:'var(--font-display)', fontWeight:500, fontSize:22, lineHeight:1.2}}>
        {intent.title}
      </h3>
      <p style={{margin:0, color:'var(--ink-2)', fontSize:14, lineHeight:1.5}}>{intent.desc}</p>
      <span style={{marginTop:'auto', paddingTop:8, color: accent, fontSize:13, fontWeight:500}}>
        Continue →
      </span>
    </Tag>
  );
}

function Landing({ go, lang, setLang, set }) {
  const T = (k, fb) => {
    const v = window.t ? window.t(lang, k) : fb;
    return (v === k && fb !== undefined) ? fb : v;
  };
  const intents = getIntents(lang);

  const pick = (intent) => {
    if (intent.targetState && set) {
      set(s => ({ ...s, ...intent.targetState }));
    }
    if (intent.target) go(intent.target);
  };

  return (
    <div className="app has-bottom-nav-target">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container">
          {/* ===== Hero ===== */}
          <section className="ai-hero animate-fade-in-up" aria-labelledby="hero-h">
            <div className="ai-hero-eyebrow">
              {T('landing.eyebrow', 'Verified · Independent · No paid placement')}
            </div>
            <h1 id="hero-h" className="ai-headline" style={{maxWidth:'18ch'}}>
              {T('landing.headline', 'The all-you-need source for anything dental.')}
            </h1>
            <p className="ai-hero-lead" style={{maxWidth:'52ch'}}>
              {T('landing.lead', 'Answers, costs, recovery help, and matched care — all under a published methodology. Pick what you came for.')}
            </p>

            {/* ===== Intent grid ===== */}
            <div
              role="group"
              aria-label="What brought you here today?"
              style={{
                display:'grid',
                gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))',
                gap: 'var(--s-4)',
                marginTop: 'var(--s-8)',
              }}
            >
              {intents.map(i => <IntentCard key={i.id} intent={i} onPick={pick}/>)}
            </div>

            <p style={{
              marginTop:'var(--s-8)',
              fontSize:13, color:'var(--ink-3)', textAlign:'center'
            }}>
              {T('landing.notsure', 'Not sure where to start?')}
              {' '}<a href="#" onClick={(e)=>{e.preventDefault();go('audit-1');}}>
                {T('landing.takecta', 'Take the 90-second Smile Audit →')}
              </a>
            </p>

            <div className="td-card td-card-sm" style={{
              marginTop:'var(--s-4)',
              display:'flex',
              alignItems:'center',
              justifyContent:'space-between',
              gap:'var(--s-4)',
              flexWrap:'wrap',
              maxWidth:560,
              marginInline:'auto',
            }}>
              <div>
                <div style={{fontSize:13, color:'var(--ink-3)', marginBottom:2}}>
                  {T('landing.gateway.eyebrow', 'For practitioners')}
                </div>
                <div style={{fontSize:15, color:'var(--ink-1)', fontWeight:500}}>
                  {T('landing.gateway.title', 'Are you a dentist or council member?')}
                </div>
              </div>
              <a
                href="/portal/"
                className="td-btn td-btn-secondary td-btn-sm"
              >
                {T('landing.gateway.cta', 'Sign in →')}
              </a>
            </div>
          </section>

          {/* ===== Trust + value section ===== */}
          <section className="below-fold">
            <h2 className="section-h">What this is</h2>
            <div className="three-up">
              <div className="card feature-card td-card">
                <Icon d={ICONS.search} size={28} stroke={1.4}/>
                <h3>Verified, not opinionated</h3>
                <p>Every answer cites a published methodology. No sponsored slots, no surprise rankings.</p>
                <a href="/methodology/">Read the methodology →</a>
              </div>
              <div className="card feature-card td-card">
                <Icon d={ICONS.cal} size={28} stroke={1.4}/>
                <h3>Honest cost ranges</h3>
                <p>Practice-published rates checked against regional medians — with and without coverage.</p>
                <a href="/cost/">See costs →</a>
              </div>
              <div className="card feature-card td-card">
                <Icon d={ICONS.pin} size={28} stroke={1.4}/>
                <h3>Positive-only recognition</h3>
                <p>Nine recognition axes plus clinical grading by subspecialty. Dentists earn it — never buy it.</p>
                <a href="#" onClick={(e)=>{e.preventDefault();go('directory');}}>Browse the directory →</a>
              </div>
            </div>

            <div className="td-trust-stripe" style={{ marginTop: 'var(--s-6)' }}>
              <div className="td-trust-items">
                <span className="td-trust-item">Reviewed by our Benchmark Council of licensed US dentists</span>
                <span className="td-trust-item">Independent. No paid placement.</span>
                <span className="td-trust-item"><a href="/methodology/" className="td-nav-link">Methodology published →</a></span>
              </div>
            </div>
          </section>
        </div>
      </main>
      <Footer go={go}/>
    </div>
  );
}

window.Landing = Landing;