// PressRoom.jsx — 9C: About, press contact, founder bio, facts card, seed releases, media inquiry
// Compliance: AB 3030, no clinical claims in press section

const { useState } = React;

const AB3030 = 'AI-assisted content is disclosed under California AB 3030. Information only.';

const FACT_SHEET = [
  { label: 'Founded', value: '2025' },
  { label: 'Legal Entity', value: 'Smile Mentors Inc.' },
  { label: 'Headquarters', value: 'San Francisco, CA' },
  { label: 'Coverage', value: 'US dental information (online), clinical: SF-only' },
  { label: 'Mission', value: 'Verified dental information for every US patient' },
  { label: 'Recognition Model', value: 'VPS — Verified Performance Score (positive-only, nine axes)' },
];

const SEED_RELEASES = [
  {
    date: 'May 2026',
    title: 'TheDentist.ai Launches Patient-First Dental Information Platform',
    summary: 'Introduces Verified Performance Score (VPS) — the first independently-audited, payment-free dental quality index — and the Smile Audit™ patient self-triage flow.',
    tag: 'Product Launch',
  },
  {
    date: 'May 2026',
    title: 'Dentist Apprentice OS: 20-Agent Practice Management Suite Enters Beta',
    summary: 'Three-tier Practice Pass (Basic / Pro / Clinical OS) brings AI-assisted scheduling, insurance verification, and revenue cycle management to independent practices.',
    tag: 'Product',
  },
  {
    date: 'June 2026',
    title: 'TheDentist.ai Adds GEO/SEO Engine to Dental Information Layer',
    summary: 'Daily AI-generated dental education content across thedentist.ai, docnick.com, and dentistapprentice.com; benchmark council-reviewed and HITL-approved.',
    tag: 'Platform',
  },
];

function MediaInquiryForm() {
  const [form, setForm] = useState({ name: '', outlet: '', email: '', inquiry: '' });
  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 || !form.inquiry) { setErr('Please fill all required fields.'); return; }
    setStatus('loading'); setErr('');
    try {
      const res = await fetch('/api/press/inquiry', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, source_path: '/#press' }),
      });
      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>Thanks! We'll respond within 24 hours on business days.</p>
    </div>
  );

  return (
    <form onSubmit={submit} className="field-stack">
      {err && (window.ErrorRetry
        ? <ErrorRetry message={err} onRetry={() => { setErr(''); setStatus('idle'); }} retryLabel="Try again" />
        : <div className="error-banner" role="alert">{err}</div>)}
      <div className="session-form-grid">
        <div>
          <label className="field-label">Your Name *</label>
          <input className="input" value={form.name} onChange={update('name')} placeholder="Full name" />
        </div>
        <div>
          <label className="field-label">Media Outlet</label>
          <input className="input" value={form.outlet} onChange={update('outlet')} placeholder="Publication or org" />
        </div>
      </div>
      <div>
        <label className="field-label">Email *</label>
        <input className="input" type="email" value={form.email} onChange={update('email')} placeholder="press@outlet.com" />
      </div>
      <div>
        <label className="field-label">Inquiry *</label>
        <textarea className="input" rows={4} value={form.inquiry} onChange={update('inquiry')} placeholder="Describe your story, questions, or interview request..." />
      </div>
      <button type="submit" className="btn btn-primary btn-block" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Send Media Inquiry →'}
      </button>
    </form>
  );
}

function PressRoom({ 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">PRESS ROOM</p>
      <h1 className="session-title">Press &amp; Media</h1>
      <p className="section-subtitle session-subtitle" style={{ marginBottom: 16 }}>
        Brand assets, facts, founder bio, and media inquiries.
      </p>

      <div className="card session-row" style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 28 }} aria-hidden="true">✉️</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Press contact</div>
          <p className="session-text-sm" style={{ margin: 0 }}>
            Embargo requests, interviews, and background briefings —{' '}
            <a href="mailto:press@thedentist.ai">press@thedentist.ai</a>
          </p>
        </div>
      </div>

      {/* About */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 className="session-section-title" style={{ marginBottom: 8 }}>About TheDentist.ai</h2>
        <p className="session-text-sm" style={{ fontSize: 14 }}>
          TheDentist.ai is the verified-information layer for US dental care. Patients arrive worried — and get structured help, transparent cost context, and paths to matched care. Recognition is positive-only and methodology-driven: what we endorse, we explain how we measured. AI output is information, not diagnosis — always to be confirmed with a licensed dentist.
        </p>
      </div>

      {/* Founder bio */}
      <div className="card session-row" style={{ marginBottom: 16, alignItems: 'flex-start' }}>
        <div className="session-avatar" aria-hidden="true">
          <span style={{ fontSize: 28 }}>🦷</span>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Dr. Nick Levi, DDS</div>
          <div className="session-text-sm session-muted" style={{ marginBottom: 6 }}>Founder &amp; Benchmark Council Chair · San Francisco, CA</div>
          <p className="session-text-sm" style={{ margin: 0 }}>
            General dentist practicing in San Francisco. Founded TheDentist.ai to bring verified dental information to every US patient — independently scored, never pay-for-placement. Chairs the Benchmark Council reviewing clinical content and recognition methodology.
          </p>
        </div>
      </div>

      {/* Fact sheet */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 className="session-section-title">Company Facts</h2>
        <div className="session-stack--sm">
          {FACT_SHEET.map(({ label, value }) => (
            <div key={label} className="session-row" style={{ fontSize: 13 }}>
              <span className="session-text-sm" style={{ width: 140, flexShrink: 0 }}>{label}</span>
              <span style={{ fontWeight: 500 }}>{value}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Logo placeholder */}
      <div className="card" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <h2 className="session-section-title" style={{ margin: 0 }}>Brand Assets</h2>
          <span className="badge badge-yellow" style={{ fontSize: 11 }}>Available on request</span>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
          {['Logo (SVG)', 'Logo (PNG)', 'Wordmark'].map(a => (
            <div key={a} className="session-dashed-slot">
              <div style={{ fontSize: 20, marginBottom: 4 }} aria-hidden="true">🖼️</div>
              {a}
            </div>
          ))}
        </div>
        <p className="session-footnote" style={{ marginTop: 8 }}>
          Logos available to credentialed press on request. Contact press@thedentist.ai.
        </p>
      </div>

      {/* Seed releases */}
      <div style={{ marginBottom: 24 }}>
        <h2 className="session-section-title">Recent News</h2>
        <div className="session-stack">
          {SEED_RELEASES.map((r, i) => (
            <div key={i} className="card">
              <div className="session-row" style={{ marginBottom: 6 }}>
                <span className="badge badge-blue" style={{ fontSize: 11 }}>{r.tag}</span>
                <span className="session-text-xs" style={{ alignSelf: 'center' }}>{r.date}</span>
              </div>
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{r.title}</div>
              <p className="session-text-sm" style={{ margin: 0 }}>{r.summary}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Media inquiry form */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 className="session-section-title">Media Inquiry</h2>
        <MediaInquiryForm />
      </div>

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

window.PressRoom = PressRoom;