// 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. This page contains forward-looking statements. Not clinical or financial advice.';

const LAYERS = [
  {
    num: 'L1',
    title: 'Consumer / Information Layer',
    color: '#1A56DB',
    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',
    color: '#059669',
    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',
    color: '#7C3AED',
    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: 'Payment-Independence Wall', desc: 'VPS and recognition scores are provably separated from revenue — benchmark council audits, weighted voting, methodology published.' },
  { emoji: '🤝', title: 'Trust Layer, Not a Directory', desc: 'Michelin-style positive-only recognition. Absence of a tier is neutral — never a negative signal.' },
  { emoji: '⚖️', title: 'Regulatory-First Architecture', desc: 'AB 489 / AB 3030 / SB 1120 built-in. HITL for clinical content. CA §632 two-party consent for voice.' },
  { emoji: '🏥', title: 'Clinical Moat', desc: 'Dr. Nick Levi DDS chairs the Benchmark Council. Clinical decisions governed by licensed professionals.' },
];

const TRACTION = [
  { n: '3', label: 'Domains live' },
  { n: '20', label: 'Practice agents' },
  { n: '37', label: 'Stakeholder tracks' },
  { n: 'VPS', label: 'Independent score' },
];

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),
      });
      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" style={{ textAlign: 'center', padding: 24 }}>
      <div style={{ fontSize: 32, marginBottom: 8 }}>📬</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="gap-screen animate-fade-in-up" style={{ maxWidth: 720, margin: '0 auto', padding: '24px 16px' }}>
      <button type="button" className="btn btn-ghost btn-sm" onClick={() => go?.('other')} style={{ marginBottom: 16, paddingLeft: 0 }}>
        ← Stakeholders
      </button>

      <p style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', color: 'var(--color-accent)', textTransform: 'uppercase', marginBottom: 8 }}>
        INVESTORS
      </p>
      <h1 style={{ fontSize: 'clamp(1.25rem,4vw,1.75rem)', fontWeight: 700, margin: '0 0 4px' }}>
        The Verified Dental Infrastructure Layer
      </h1>
      <p className="section-subtitle" style={{ marginBottom: 24 }}>
        Building the trust stack for US dental care — patient, practice, and data.
      </p>

      {/* Traction */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10, marginBottom: 24 }}>
        {TRACTION.map(({ n, label }) => (
          <div key={label} className="card" style={{ textAlign: 'center', padding: '14px 8px' }}>
            <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--color-accent)' }}>{n}</div>
            <div style={{ fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 2 }}>{label}</div>
          </div>
        ))}
      </div>

      {/* Three layers */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 24 }}>
        {LAYERS.map(l => (
          <div key={l.num} className="card" style={{ borderLeft: `4px solid ${l.color}` }}>
            <div style={{ display: 'flex', gap: 10, marginBottom: 8, alignItems: 'center' }}>
              <span className="badge" style={{ background: l.color, color: '#fff', fontSize: 12, padding: '2px 8px', borderRadius: 6 }}>{l.num}</span>
              <span style={{ fontWeight: 700, fontSize: 15 }}>{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(--color-text-secondary)' }}>{item}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* Differentiators */}
      <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Defensible Moats</h2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: 12, marginBottom: 24 }}>
        {DIFFERENTIATORS.map(d => (
          <div key={d.title} className="card">
            <div style={{ fontSize: 24, marginBottom: 6 }}>{d.emoji}</div>
            <div style={{ fontWeight: 600, fontSize: 13, marginBottom: 4 }}>{d.title}</div>
            <p style={{ fontSize: 12, color: 'var(--color-text-secondary)', 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 style={{ fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
        TheDentist<em>.ai</em> · Smile Mentors Inc. · invest@thedentist.ai
      </p>
    </div>
  );
}

window.InvestorHub = InvestorHub;