// 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 = {
  pain:       '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',
  bite:       'M3 12h3.5l2.5-7 4 14 2.5-7H21',
  find:       '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',
  postop:     'M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11',
  cost:       'M12 2v20 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6',
  newpatient: 'M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z M14 2v6h6 M9 13h6 M9 17h6 M9 9h2',
  dentist:    'M8 3c-2.5 0-4 2-4 5 0 4 1.5 6 2 9s1.5 4 2.5 4 1-2 1.5-4 1-3 1.5-3 1 1 1.5 3 .5 4 1.5 4 2-1 2.5-4 2-5 2-9c0-3-1.5-5-4-5-1.4 0-2 .5-3.5.5S9.4 3 8 3z',
};
const INTENT_ACCENTS = {
  pain: 'var(--alert)', bite: '#7A6A9E', find: 'var(--seal)', postop: '#6B8E23',
  cost: '#C49E5C', newpatient: 'var(--ink-2)', dentist: 'var(--ink-1)',
};

// 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: 'pain',
      eyebrow: T('intent.pain.eyebrow', 'I have a problem'),
      title:   T('intent.pain.title',   'Tooth pain or an issue'),
      desc:    T('intent.pain.desc',    'Walk through what it could be, what to do tonight, when to see someone.'),
      target: 'decision-tree',   // lightweight decision tree; full audit is one tap away inside
    },
    {
      id: 'bite',
      eyebrow: T('intent.bite.eyebrow', 'Grinding or bite'),
      title:   T('intent.bite.title',   'Grinding, clenching or bite'),
      desc:    T('intent.bite.desc',    'Bruxism, jaw tension, worn teeth, or a bite that feels off — see what it could be.'),
      target: 'audit-1',
    },
    {
      id: 'find',
      eyebrow: T('intent.find.eyebrow', 'I need care'),
      title:   T('intent.find.title',   'Find a dentist'),
      desc:    T('intent.find.desc',    'Matched, recognized providers near you — no paid placement.'),
      target: 'directory',
    },
    {
      id: 'postop',
      eyebrow: T('intent.postop.eyebrow', 'After a procedure'),
      title:   T('intent.postop.title',   'Post-op recovery'),
      desc:    T('intent.postop.desc',    'What to eat, what to expect, when to call. For 18+ procedures.'),
      target: 'forms',
      targetState: { _catFilter: 'post-op' },
    },
    {
      id: 'cost',
      eyebrow: T('intent.cost.eyebrow', 'Before I book'),
      title:   T('intent.cost.title',   'Check cost & insurance'),
      desc:    T('intent.cost.desc',    'Verified regional rates. What it costs with — and without — coverage.'),
      href: '/cost/',
    },
    {
      id: 'newpatient',
      eyebrow: T('intent.newpatient.eyebrow', 'Getting started'),
      title:   T('intent.newpatient.title',   'New patient forms'),
      desc:    T('intent.newpatient.desc',    'Intake, history, HIPAA, financial — bundled and pre-fillable.'),
      target: 'forms',
      targetState: { _catFilter: 'new-patient' },
    },
  ];
}

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"
      style={{
        display: 'flex', flexDirection: 'column', gap: 12,
        textAlign: 'left', alignItems: 'flex-start',
        padding: 'var(--s-5)',
        background: 'var(--paper)',
        border: '1px solid var(--ink-5)',
        borderRadius: 'var(--r-5)',
        cursor: 'pointer',
        textDecoration: 'none',
        color: 'var(--ink-1)',
        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">
      <Masthead lang={lang} setLang={setLang} go={go}/>
      <main>
        <div className="container">
          {/* ===== Hero ===== */}
          <section className="ai-hero" 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 style={{
              marginTop:'var(--s-4)',
              padding:'var(--s-4) var(--s-5)',
              background:'var(--bone)',
              border:'1px solid transparent',
              borderRadius:'var(--r-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/"
                style={{
                  fontSize:14, fontWeight:500, color:'var(--ink-1)',
                  textDecoration:'none', whiteSpace:'nowrap',
                  padding:'8px 14px',
                  border:'1px solid var(--ink-5)',
                  borderRadius:'var(--r-4)',
                  background:'var(--paper)',
                }}
              >
                {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">
                <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">
                <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">
                <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="trust-row">
              <span>Reviewed by our Editorial Council of licensed US dentists</span>
              <span>Independent. No paid placement.</span>
              <span><a href="/methodology/">Methodology published →</a></span>
            </div>
          </section>
        </div>
      </main>
      <Footer go={go}/>
    </div>
  );
}

window.Landing = Landing;