// EducatorPortal.jsx — 9E part 1: Curriculum/CE links, contact form, methodology
// Compliance: AB 3030, no PHI

const { useState } = React;

const AB3030 = 'AI-assisted content is disclosed under California AB 3030. For educational purposes — not clinical advice.';

const CURRICULUM_MODULES = [
  { title: 'Dental Consumer Literacy', desc: 'How patients evaluate dental care — anxiety, cost, and informed consent.', level: 'All levels', credits: 2 },
  { title: 'VPS Methodology & Practice Recognition', desc: 'How TheDentist.ai measures and recognizes dental practices.', level: 'Advanced', credits: 1 },
  { title: 'AI in Dental Practice', desc: 'Clinical decision support, documentation, and compliance in the AI era.', level: 'Graduate', credits: 2 },
  { title: 'Dental Insurance Fundamentals', desc: 'CDT coding, EOBs, and patient communication on cost.', level: 'All levels', credits: 3 },
];

function EducatorInquiryForm() {
  const [form, setForm] = useState({ name: '', institution: '', email: '', role: '', message: '' });
  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 required.'); return; }
    setStatus('loading'); setErr('');
    try {
      const res = await fetch('/api/educator/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 || '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>Thank you! We'll be in touch within 3 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">Name *</label><input className="input" value={form.name} onChange={update('name')} /></div>
        <div><label className="field-label">Institution</label><input className="input" value={form.institution} onChange={update('institution')} /></div>
      </div>
      <div><label className="field-label">Email *</label><input className="input" type="email" value={form.email} onChange={update('email')} /></div>
      <div>
        <label className="field-label">Role</label>
        <select className="input" value={form.role} onChange={update('role')}>
          <option value="">Select...</option>
          {['Dental School Faculty', 'Program Director', 'CE Provider', 'Curriculum Developer', 'Other'].map(r => <option key={r}>{r}</option>)}
        </select>
      </div>
      <div>
        <label className="field-label">How can we help?</label>
        <textarea className="input" rows={3} value={form.message} onChange={update('message')} placeholder="Curriculum interest, CE licensing, partnership idea..." />
      </div>
      <button type="submit" className="btn btn-primary btn-block" disabled={status === 'loading'}>
        {status === 'loading' ? 'Sending…' : 'Submit Inquiry →'}
      </button>
    </form>
  );
}

function EducatorPortal({ 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 }}>
        EDUCATOR PORTAL
      </p>
      <h1 style={{ fontSize: 'clamp(1.25rem,4vw,1.75rem)', fontWeight: 700, margin: '0 0 4px' }}>
        Dental Education Partners
      </h1>
      <p className="section-subtitle" style={{ marginBottom: 24 }}>
        Curriculum modules, CE licensing, and dental school integrations — built on verified methodology.
      </p>

      {/* Curriculum modules */}
      <h2 style={{ fontSize: 15, fontWeight: 700, marginBottom: 12 }}>Available Modules</h2>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 24 }}>
        {CURRICULUM_MODULES.map((m, i) => (
          <div key={i} className="card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 4 }}>{m.title}</div>
                <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', margin: '0 0 6px' }}>{m.desc}</p>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span className="badge badge-gray" style={{ fontSize: 11 }}>{m.level}</span>
                  <span className="badge badge-blue" style={{ fontSize: 11 }}>{m.credits} CE credit{m.credits > 1 ? 's' : ''}</span>
                </div>
              </div>
              <button type="button" className="btn btn-secondary btn-sm" style={{ flexShrink: 0 }}>Learn More</button>
            </div>
          </div>
        ))}
      </div>

      {/* Methodology link */}
      <div className="card" style={{ marginBottom: 16, display: 'flex', gap: 12, alignItems: 'center' }}>
        <div style={{ fontSize: 24 }}>📘</div>
        <div>
          <div style={{ fontWeight: 600, fontSize: 14 }}>Recognition Methodology 2026.05</div>
          <p style={{ fontSize: 13, color: 'var(--color-text-secondary)', margin: 0 }}>Full VPS scoring model, nine axes, and clinical-performance grading.</p>
        </div>
        <a href="/methodology/" className="btn btn-ghost btn-sm" style={{ flexShrink: 0 }}>View →</a>
      </div>

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

window.EducatorPortal = EducatorPortal;