// InvestorHub.jsx — 9D: Three layers, differentiators, traction, deck request form
// Compliance: AB 3030, no clinical claims, no guarantees

const { useState } = React;

const AB3030 =
  'AI-assisted content is disclosed under California AB 3030. No clinical claims — platform metrics only. Forward-looking statements; not financial or investment advice.';

const LAYERS = [
  {
    num: 'L1',
    title: 'Consumer / Information Layer',
    layerClass: 'session-layer-l1',
    items: [
      'thedentist.ai — verified dental information platform',
      'Smile Audit™ patient triage flow',
      'VPS directory with 9-axis recognition',
      'Cost transparency (FAIR Health + Stedi eligibility)',
    ],
  },
  {
    num: 'L2',
    title: 'B2B SaaS — Dentist Apprentice OS',
    layerClass: 'session-layer-l2',
    items: [
      '20 AI-powered practice agents across 3 tiers (Basic / Pro / Clinical OS)',
      'Insurance verification, scheduling, claims, and RCM automation',
      'Secure client portals for practices',
      'Practice Pass subscription — predictable MRR',
    ],
  },
  {
    num: 'L3',
    title: 'Data Products & Infrastructure',
    layerClass: 'session-layer-l3',
    items: [
      'ZIP3-level cost benchmarks (de-identified)',
      'VPS performance signals — API-accessible',
      'Decision-tree governance with council oversight',
      'GEO/SEO content flywheel across 3 domains',
    ],
  },
];

const DIFFERENTIATORS = [
  { emoji: '🔒', title: 'VPS — Verified Performance Score', desc: 'Payment-independent quality signals across nine axes. Methodology published; council-audited. No star ratings.' },
  { emoji: '🤝', title: 'Michelin-Style Recognition', desc: 'Positive-only tiers (listed → distinguished). Absence of elevation is neutral — never a punishment signal.' },
  { emoji: '🤖', title: 'AI-Native Architecture', desc: '37 stakeholder tracks, 20 practice agents, decision-tree governance, and background pipeline automation.' },
  { emoji: '⚖️', title: 'Regulatory-First', desc: 'AB 489 / AB 3030 / SB 1120 built-in. HITL for clinical content. Information, not diagnosis.' },
];

const TRACTION = [
  { n: 'Live', label: 'Verified directory' },
  { n: 'Beta', label: 'Apprentice OS' },
  { n: 'Live', label: 'MeritChannel' },
  { n: 'VPS', label: 'Payment-independent' },
];

function DeckRequestForm() {
  const [form, setForm] = useState({ name: '', firm: '', email: '', aum: '', note: '' });
  const [status, setStatus] = useState('idle');
  const [err, setErr] = useState('');
  const update = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (!form.name || !form.email) { setErr('Name and email are required.'); return; }
    setStatus('loading'); setErr('');
    try {
      const res = await fetch('/api/investor/lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, source_path: '/#investor' }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Submission failed');
      setStatus('done');
    } catch (ex) { setErr(ex.message); setStatus('idle'); }
  };

  if (status === 'done') return (
    <div className="card session-empty">
      <div className="session-success-icon" aria-hidden="true">📬</div>
      <p>Deck request received. We'll follow up within 48 hours.</p>
    </div>
  );

  return (
    <form onSubmit={submit} className="field-stack">
      {err && <div className="error-banner">{err}</div>}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        <div>
          <label className="field-label">Name *</label>
          <input className="input" value={form.name} onChange={update('name')} placeholder="Full name" />
        </div>
        <div>
          <label className="field-label">Firm / Fund</label>
          <input className="input" value={form.firm} onChange={update('firm')} placeholder="Firm name" />
        </div>
      </div>
      <div>
        <label className="field-label">Email *</label>
        <input className="input" type="email" value={form.email} onChange={update('email')} placeholder="partner@fund.com" />
      </div>
      <div>
        <label className="field-label">Typical check size / AUM</label>
        <input className="input" value={form.aum} onChange={update('aum')} placeholder="e.g. $500k–$2M seed" />
      </div>
      <div>
        <label className="field-label">Anything else?</label>
        <textarea className="input" rows={2} value={form.note} onChange={update('note')} placeholder="Context, warm intro, or question…" />
      </div>
      <button type="submit" className="btn btn-primary btn-block" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Request Investor Deck →'}
      </button>
    </form>
  );
}

function InvestorHub({ go }) {
  return (
    <div className="session-screen gap-screen animate-fade-in-up">
      <button type="button" className="btn btn-ghost btn-sm session-back" onClick={() => go?.('other')} aria-label="Back to stakeholders">
        ← Stakeholders
      </button>

      <p className="session-eyebrow">INVESTORS</p>
      <h1 className="session-title">The Verified Dental Infrastructure Layer</h1>
      <p className="section-subtitle session-subtitle">
        Building the trust stack for US dental care — patient, practice, and data.
      </p>

      <div className="session-traction-grid" style={{ marginBottom: 24 }}>
        {TRACTION.map(({ n, label }) => (
          <div key={label} className="card" style={{ textAlign: 'center', padding: '14px 8px' }}>
            <div className="session-stat-num">{n}</div>
            <div className="session-stat-label">{label}</div>
          </div>
        ))}
      </div>

      <div className="session-stack" style={{ marginBottom: 24 }}>
        {LAYERS.map(l => (
          <div key={l.num} className={`card session-layer-card ${l.layerClass}`}>
            <div className="session-row" style={{ marginBottom: 8 }}>
              <span className="badge session-layer-badge">{l.num}</span>
              <span style={{ fontWeight: 700, fontSize: 15, color: 'var(--txt)' }}>{l.title}</span>
            </div>
            <ul style={{ paddingLeft: 16, margin: 0, display: 'flex', flexDirection: 'column', gap: 4 }}>
              {l.items.map((item, i) => (
                <li key={i} style={{ fontSize: 13, color: 'var(--mut)' }}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12, color: 'var(--txt)' }}>Defensible Moats</h2>
      <div className="session-card-grid" style={{ marginBottom: 24 }}>
        {DIFFERENTIATORS.map(d => (
          <div key={d.title} className="card">
            <div className="session-chooser-emoji" aria-hidden="true">{d.emoji}</div>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4, color: 'var(--txt)' }}>{d.title}</div>
            <p style={{ fontSize: 12, color: 'var(--mut)', margin: 0 }}>{d.desc}</p>
          </div>
        ))}
      </div>

      {/* Deck request */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Request Investor Deck</h2>
        <DeckRequestForm />
      </div>

      <div className="disclaimer-banner">{AB3030}</div>
      <p className="session-footnote">TheDentist<em>.ai</em> · Smile Mentors Inc. · invest@thedentist.ai</p>
    </div>
  );
}

window.InvestorHub = InvestorHub;