// 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),
      });
      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>Thanks! We'll respond within 24 hours on business days.</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">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="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 }}>
        PRESS ROOM
      </p>
      <h1 style={{ fontSize: 'clamp(1.25rem,4vw,1.75rem)', fontWeight: 700, margin: '0 0 4px' }}>
        Press &amp; Media
      </h1>
      <p className="section-subtitle" style={{ marginBottom: 24 }}>
        Brand assets, facts, founder bio, and media inquiries.
      </p>

      {/* About */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8 }}>About TheDentist.ai</h2>
        <p style={{ fontSize: 14, color: 'var(--color-text-secondary)' }}>
          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" style={{ marginBottom: 16, display: 'flex', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
        <div style={{ width: 64, height: 64, borderRadius: 32, background: 'var(--color-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <span style={{ fontSize: 28 }}>🦷</span>
        </div>
        <div>
          <div style={{ fontWeight: 700, fontSize: 15 }}>Dr. Nick Levi, DDS</div>
          <div style={{ fontSize: 13, color: 'var(--color-text-tertiary)', marginBottom: 6 }}>Founder &amp; Benchmark Council Chair · San Francisco, CA</div>
          <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', 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 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Company Facts</h2>
        <div style={{ display: 'grid', gap: 8 }}>
          {FACT_SHEET.map(({ label, value }) => (
            <div key={label} style={{ display: 'flex', gap: 12, fontSize: 13 }}>
              <span style={{ color: 'var(--color-text-tertiary)', 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 style={{ fontSize: 15, fontWeight: 700, 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} style={{ border: '1.5px dashed var(--color-border)', borderRadius: 8, padding: 16, textAlign: 'center', fontSize: 12, color: 'var(--color-text-tertiary)' }}>
              <div style={{ fontSize: 20, marginBottom: 4 }}>🖼️</div>
              {a}
            </div>
          ))}
        </div>
        <p style={{ fontSize: 11, color: 'var(--color-text-tertiary)', marginTop: 8 }}>
          Logos available to credentialed press on request. Contact press@thedentist.ai.
        </p>
      </div>

      {/* Seed releases */}
      <div style={{ marginBottom: 24 }}>
        <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Recent News</h2>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {SEED_RELEASES.map((r, i) => (
            <div key={i} className="card">
              <div style={{ display: 'flex', gap: 8, marginBottom: 6, flexWrap: 'wrap' }}>
                <span className="badge badge-blue" style={{ fontSize: 11 }}>{r.tag}</span>
                <span style={{ fontSize: 11, color: 'var(--color-text-tertiary)', alignSelf: 'center' }}>{r.date}</span>
              </div>
              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{r.title}</div>
              <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', margin: 0 }}>{r.summary}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Media inquiry form */}
      <div className="card" style={{ marginBottom: 16 }}>
        <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Media Inquiry</h2>
        <MediaInquiryForm />
      </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. · press@thedentist.ai
      </p>
    </div>
  );
}

window.PressRoom = PressRoom;