// OracyAI Landing Page

const { useState, useEffect, useRef } = React;

// ═════════ Demo modal (POSTs to /api/demo) ═════════
function DemoModal({ open, onClose }) {
  const [form, setForm] = useState({
    name: '', email: '', organization: '', role: '', message: '',
  });
  const [submitting, setSubmitting] = useState(false);
  const [success, setSuccess] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [open, onClose]);

  if (!open) return null;

  const onChange = (e) => {
    setForm((f) => ({ ...f, [e.target.name]: e.target.value }));
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    try {
      const res = await fetch('/api/demo', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      if (!res.ok) throw new Error('Request failed');
      setSuccess(true);
      setTimeout(() => {
        setSuccess(false);
        setForm({ name: '', email: '', organization: '', role: '', message: '' });
        onClose();
      }, 2200);
    } catch {
      setError('Something went wrong. Please try again.');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div className="modal-root" role="dialog" aria-modal="true" aria-labelledby="demo-modal-title">
      <div className="modal-backdrop" onClick={onClose} />
      <div className="modal-card">
        <button type="button" className="modal-close" onClick={onClose} aria-label="Close">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
            <line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/>
          </svg>
        </button>

        {success ? (
          <div className="modal-success">
            <div className="modal-success-badge">
              {Icons.check}
            </div>
            <h3>Thank you!</h3>
            <p>We&apos;ll be in touch within 24 hours.</p>
          </div>
        ) : (
          <>
            <div className="modal-eyebrow">
              <span className="dot" />
              REQUEST A DEMO
            </div>
            <h2 id="demo-modal-title" className="modal-title">
              Let&apos;s give every kid a chance to speak.
            </h2>
            <p className="modal-sub">
              Tell us about your school. We&apos;ll set up a 20-minute walkthrough and get a free pilot ready for one classroom.
            </p>

            <form className="modal-form" onSubmit={onSubmit}>
              <div className="form-row">
                <label className="form-field">
                  <span className="form-label">Your name</span>
                  <input
                    type="text" name="name" required autoComplete="name"
                    value={form.name} onChange={onChange}
                    placeholder="Sara Hernandez"
                  />
                </label>
                <label className="form-field">
                  <span className="form-label">Email</span>
                  <input
                    type="email" name="email" required autoComplete="email"
                    value={form.email} onChange={onChange}
                    placeholder="you@school.edu"
                  />
                </label>
              </div>

              <div className="form-row">
                <label className="form-field">
                  <span className="form-label">School or district</span>
                  <input
                    type="text" name="organization" required autoComplete="organization"
                    value={form.organization} onChange={onChange}
                    placeholder="Cedar Park USD"
                  />
                </label>
                <label className="form-field">
                  <span className="form-label">Your role</span>
                  <select name="role" required value={form.role} onChange={onChange}>
                    <option value="">Select a role</option>
                    <option value="teacher">Teacher</option>
                    <option value="administrator">School administrator</option>
                    <option value="curriculum">Curriculum director</option>
                    <option value="district">District leader</option>
                    <option value="other">Other</option>
                  </select>
                </label>
              </div>

              <label className="form-field">
                <span className="form-label">What would you like to share? <span className="form-optional">(optional)</span></span>
                <textarea
                  name="message" rows={3}
                  value={form.message} onChange={onChange}
                  placeholder="Grade levels, EL %, anything we should know…"
                />
              </label>

              {error && <div className="form-error">{error}</div>}

              <div className="modal-actions">
                <PressableButton
                  type="submit"
                  variant="primary"
                  fullWidth
                  className="pressable--hero"
                  disabled={submitting}
                >
                  {submitting ? 'Sending…' : 'Book my demo'}
                </PressableButton>
                <p className="modal-fineprint">
                  Free pilot in one classroom for the rest of the school year. No credit card.
                </p>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

// ═════════ Rive Oopsie mascot ═════════
function Oopsie({ size = 120, style }) {
  const canvasRef = useRef(null);
  const riveRef = useRef(null);

  useEffect(() => {
    if (!window.rive || !canvasRef.current) return;
    let r;
    try {
      r = new window.rive.Rive({
        src: 'assets/oracy_oopsie.riv',
        canvas: canvasRef.current,
        stateMachines: 'State Machine 1',
        autoplay: true,
        layout: new window.rive.Layout({
          fit: window.rive.Fit.Contain,
          alignment: window.rive.Alignment.Center,
        }),
        onLoad: () => {
          try { r.resizeDrawingSurfaceToCanvas(); } catch {}
        },
      });
      riveRef.current = r;
    } catch (e) { console.warn('rive init failed', e); }
    return () => { try { r && r.cleanup(); } catch {} };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      width={size * 2}
      height={size * 2}
      style={{ width: size, height: size, display: 'block', pointerEvents: 'none', ...style }}
    />
  );
}

// ═════════ PressableButton (copied from kit) ═════════
function PressableButton({
  variant = 'option',
  fullWidth = false,
  className,
  children,
  ...rest
}) {
  const classes = [
    'pressable',
    `pressable--${variant}`,
    fullWidth && 'pressable--full',
    className,
  ].filter(Boolean).join(' ');
  return (
    <button className={classes} {...rest}>
      <span className="pressable__surface">{children}</span>
    </button>
  );
}

// ═════════ Icons ═════════
const Icons = {
  check: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>,
  mic: <svg viewBox="0 0 24 24" fill="currentColor"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0014 0M12 18v3M8 21h8" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/></svg>,
  spark: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.6 6.4L21 11l-6.4 2.6L12 20l-2.6-6.4L3 11l6.4-2.6L12 2z"/></svg>,
  bookOpen: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 4h7a3 3 0 013 3v13a2 2 0 00-2-2H2zM22 4h-7a3 3 0 00-3 3v13a2 2 0 012-2h8z"/></svg>,
  globe: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 010 20M12 2a15 15 0 000 20"/></svg>,
  trending: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/><polyline points="16 7 22 7 22 13"/></svg>,
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>,
  home: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>,
  users: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></svg>,
  bookClass: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>,
  bar: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="20" x2="12" y2="10"/><line x1="18" y1="20" x2="18" y2="4"/><line x1="6" y1="20" x2="6" y2="16"/></svg>,
  settings: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.6 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1a1.7 1.7 0 001.5-1.1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h.1a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8v.1a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></svg>,
  lock: <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 10V7a6 6 0 1112 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h8V7a4 4 0 00-8 0v3z"/></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>,
  arrowRight: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>,
};

// ═════════ NAV ═════════
function Nav({ onDemoClick }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#">
          <img src="assets/oracyai-logo.svg" alt="OracyAI" />
        </a>
        <div className="nav-links">
          <a className="nav-link" href="#how">How it works</a>
          <a className="nav-link" href="#students">For students</a>
          <a className="nav-link" href="#teachers">For teachers</a>
          <a className="nav-link" href="#research">Research</a>
          <a className="nav-link" href="#pricing">Pricing</a>
        </div>
        <div className="nav-cta">
          <a className="btn-text" href="https://app.oracyai.com">Sign in</a>
          <PressableButton variant="primary" className="pressable--nav" onClick={onDemoClick}>
            Book a demo
          </PressableButton>
        </div>
      </div>
    </nav>
  );
}

// ═════════ HERO ═════════
function Hero({ onDemoClick }) {
  return (
    <section className="hero">
      <div className="hero-clouds">
        <div className="hero-cloud" style={{ width: 200, height: 60, top: '20%', left: '5%' }} />
        <div className="hero-cloud" style={{ width: 140, height: 44, top: '70%', left: '52%' }} />
        <div className="hero-cloud" style={{ width: 240, height: 70, top: '8%', right: '8%' }} />
      </div>

      <div className="hero-inner">
        <div className="hero-text">
          <span className="hero-eyebrow">
            <span className="dot" />
            K-8 ORACY · BUILT FOR SCHOOLS
          </span>
          <h1 className="hero-h1">
            Every student gets a <span className="highlight">speaking partner</span> — not just the kids who raise their hand.
          </h1>
          <p className="hero-sub">
            OracyAI is a friendly speaking buddy that practices vocabulary, conversation, and confidence with every learner — while teachers get the standards-aligned data they actually need.
          </p>
          <div className="hero-actions">
            <PressableButton variant="primary" className="pressable--hero" onClick={onDemoClick}>
              Book a demo
            </PressableButton>
            <PressableButton variant="outline" className="pressable--hero-outline" onClick={onDemoClick}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Start a free pilot
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              </span>
            </PressableButton>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">{Icons.check} COPPA &amp; FERPA aligned</div>
            <div className="hero-meta-item">{Icons.check} Standards-mapped lessons</div>
            <div className="hero-meta-item">{Icons.check} Fits your school calendar</div>
          </div>
        </div>

        <HeroStage />
      </div>
    </section>
  );
}

function HeroStage() {
  return (
    <div className="hero-stage">
      <div className="hero-float hero-float--xp">
        <div className="icon">{Icons.spark}</div>
        <div>
          <div className="label">XP earned</div>
          <div className="value">+250 today</div>
        </div>
      </div>

      <div className="hero-float hero-float--correct">
        <div className="icon">{Icons.check}</div>
        <div>
          <div className="label">Pronunciation</div>
          <div className="value">98% match</div>
        </div>
      </div>

      <div className="hero-float hero-float--streak">
        <div className="icon"><span style={{ fontSize: 22 }}>🔥</span></div>
        <div>
          <div className="label">Streak</div>
          <div className="value">7 days</div>
        </div>
      </div>

      <div className="hero-phone">
        <MiniLearningPath />
      </div>
    </div>
  );
}

function MiniLearningPath() {
  return (
    <div className="mini-screen">
      <div className="mini-status">
        <span>9:41</span>
        <span>●●●</span>
      </div>
      <div className="mini-stats">
        <div className="mini-stat streak"><span className="emoji">🔥</span>3</div>
        <div className="mini-stat energy"><span className="emoji">⚡</span>12</div>
      </div>
      <div className="mini-path">
        <div className="mini-card completed" style={{ left: 24, top: 0, width: 130 }}>
          School supplies
        </div>
        <div className="mini-card completed" style={{ right: 24, top: 70, width: 130 }}>
          Classroom instructions
        </div>

        {/* dotted path */}
        <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }} viewBox="0 0 280 380" preserveAspectRatio="none">
          <path
            d="M 90 25 C 90 60, 215 60, 215 95 C 215 130, 90 130, 90 165 C 90 220, 140 220, 140 250"
            stroke="rgba(255,255,255,0.85)"
            strokeWidth="5"
            strokeLinecap="round"
            fill="none"
            strokeDasharray="2 10"
          />
        </svg>

        <div className="mini-card active" style={{ left: 16, right: 16, top: 150, height: 90 }}>
          <div style={{ position: 'relative', flexShrink: 0 }}>
            <div className="mini-mic-halo" />
            <div className="mini-mic">
              <svg viewBox="0 0 24 24" fill="currentColor">
                <rect x="9" y="2" width="6" height="12" rx="3"/>
                <path d="M5 11a7 7 0 0014 0M12 18v3M8 21h8" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
              </svg>
            </div>
          </div>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: '#6D4C41' }}>Tap the mic to start!</div>
            <div style={{ fontSize: 10, color: '#8D6E63', marginTop: 4, fontWeight: 500 }}>Numbers 1–20 · Pre-A1</div>
          </div>
        </div>

        <div className="mini-card locked" style={{ left: 24, top: 270, width: 130, display: 'flex', alignItems: 'center', gap: 6 }}>
          <svg width="12" height="12" viewBox="0 0 24 24" fill="#7E57C2"><path d="M6 10V7a6 6 0 1112 0v3h1a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2v-8a2 2 0 012-2h1zm2 0h8V7a4 4 0 00-8 0v3z"/></svg>
          <span>Greetings</span>
        </div>

        {/* Mascot */}
        <div className="mini-mascot-wrap" style={{ right: -6, top: 135, width: 120, height: 120 }}>
          <Oopsie size={120} />
        </div>
      </div>
    </div>
  );
}

// ═════════ HOW IT WORKS ═════════
function HowItWorks() {
  return (
    <section className="section how" id="how">
      <div className="section-inner">
        <div className="section-head--center">
          <div className="section-eyebrow">How it works</div>
          <h2 className="section-title">One session a week, on your school calendar — every kid speaks.</h2>
          <p className="section-sub">A guided session with their AI buddy <strong>Oracy Oopsie</strong> — paced to your scope &amp; sequence, focused enough to move standards-aligned outcomes.</p>
        </div>

        <div className="steps-grid">
          <div className="step-card">
            <div className="step-num">STEP 01 · LISTEN</div>
            <div className="step-illu step-illu--listen">
              <div className="bubble">
                "Hi, I'm <span className="em">Oopsie</span>! Today let's count classroom things together."
              </div>
            </div>
            <h3 className="step-h">Warm up with a friendly buddy</h3>
            <p className="step-p">Oopsie greets each student, sets the goal in plain language, and previews the words they'll use. Everyone starts the lesson on the same page.</p>
          </div>

          <div className="step-card">
            <div className="step-num">STEP 02 · SPEAK</div>
            <div className="step-illu step-illu--speak">
              <div className="mic-big">
                <svg viewBox="0 0 24 24" fill="currentColor">
                  <rect x="9" y="2" width="6" height="12" rx="3"/>
                  <path d="M5 11a7 7 0 0014 0M12 18v3M8 21h8" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
                </svg>
              </div>
              <div className="wave">
                <span style={{ animationDelay: '0s' }}/>
                <span style={{ animationDelay: '0.1s' }}/>
                <span style={{ animationDelay: '0.2s' }}/>
                <span style={{ animationDelay: '0.3s' }}/>
                <span style={{ animationDelay: '0.4s' }}/>
                <span style={{ animationDelay: '0.5s' }}/>
                <span style={{ animationDelay: '0.6s' }}/>
                <span style={{ animationDelay: '0.7s' }}/>
              </div>
            </div>
            <h3 className="step-h">Practice out loud — no audience</h3>
            <p className="step-p">Tap to record. The buddy listens, never judges, and asks follow-up questions until each student is ready. Shy kids speak just as much as the loud ones.</p>
          </div>

          <div className="step-card">
            <div className="step-num">STEP 03 · GROW</div>
            <div className="step-illu step-illu--grow">
              <div className="chart">
                <div className="bar" style={{ height: 30 }}/>
                <div className="bar" style={{ height: 48 }}/>
                <div className="bar" style={{ height: 42 }}/>
                <div className="bar" style={{ height: 70 }}/>
                <div className="bar" style={{ height: 60 }}/>
                <div className="bar" style={{ height: 88 }}/>
                <div className="bar" style={{ height: 95 }}/>
              </div>
              <div className="badge-correct">{Icons.check} +25 XP</div>
            </div>
            <h3 className="step-h">Teachers see what mattered</h3>
            <p className="step-p">Every utterance is scored against the lesson's success criteria. Teachers get class-level signal in the dashboard and a one-tap remedial plan when gaps appear.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═════════ FOR STUDENTS ═════════
function ForStudents() {
  return (
    <section className="duo-section" id="students">
      <div className="duo-grid">
        <div>
          <div className="section-eyebrow">For students</div>
          <h2 className="section-title">A learning path they actually want to come back to.</h2>
          <p className="section-sub">Pre-A1 through B1, mapped to your scope &amp; sequence — wrapped in a winding path, a cheerful buddy, and the kind of tiny wins that keep eight-year-olds coming back.</p>

          <div className="feat-list">
            <div className="feat-item">
              <div className="feat-icon feat-icon--mic">{Icons.mic}</div>
              <div>
                <h4 className="feat-h">Pronunciation feedback that's kind</h4>
                <p className="feat-p">Phoneme-level scoring you'd find in adult tutors — translated into "great job!" and gentle re-tries for K-8.</p>
              </div>
            </div>
            <div className="feat-item">
              <div className="feat-icon feat-icon--xp">{Icons.spark}</div>
              <div>
                <h4 className="feat-h">XP, streaks, and energy</h4>
                <p className="feat-p">Gamification borrowed from the apps kids already love — pointed at vocabulary, oracy, and full-sentence speech.</p>
              </div>
            </div>
            <div className="feat-item">
              <div className="feat-icon feat-icon--heritage">{Icons.globe}</div>
              <div>
                <h4 className="feat-h">Heritage collectibles</h4>
                <p className="feat-p">Earn cards from cultures around the world — a 🥐 from Paris, a lantern from Kyoto. Speaking unlocks a globe worth exploring.</p>
              </div>
            </div>
            <div className="feat-item">
              <div className="feat-icon feat-icon--curric">{Icons.bookOpen}</div>
              <div>
                <h4 className="feat-h">Standards on rails</h4>
                <p className="feat-p">CEFR-aligned scope &amp; sequence with eight-stage sessions: warm-up, vocab recall, conversation, oracy production, self-reflection.</p>
              </div>
            </div>
          </div>
        </div>

        <ActivityPreview />
      </div>
    </section>
  );
}

function ActivityPreview() {
  return (
    <div className="activity-preview">
      <div className="activity-stealth">Conversation · Numbers 1–20</div>
      <p className="activity-prompt">"How many pencils are on the desk?"</p>

      <div className="chat-row">
        <div className="chat-avatar"><Oopsie size={42} /></div>
        <div className="chat-bubble">Look at the picture! Can you tell me how many pencils you see?</div>
      </div>

      <div className="chat-row you">
        <div className="chat-bubble you">
          There are seven pencils on the desk.
          <div className="feedback">{Icons.check} +10 XP · CLEAR</div>
        </div>
      </div>

      <div className="chat-row">
        <div className="chat-avatar"><Oopsie size={42} /></div>
        <div className="chat-bubble">
          <div className="chat-typing">
            <span/><span/><span/>
          </div>
        </div>
      </div>

      <div className="activity-actions">
        <div className="record-btn">
          <svg viewBox="0 0 24 24" fill="currentColor">
            <rect x="9" y="2" width="6" height="12" rx="3"/>
            <path d="M5 11a7 7 0 0014 0M12 18v3M8 21h8" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round"/>
          </svg>
        </div>
        <span className="record-label">Tap to record</span>
      </div>
    </div>
  );
}

// ═════════ FOR TEACHERS ═════════
function ForTeachers() {
  return (
    <section className="teach-section" id="teachers">
      <div className="teach-grid">
        <DashMock />

        <div>
          <div className="section-eyebrow">For teachers</div>
          <h2 className="section-title">The clearest picture of speaking your school has ever had.</h2>
          <p className="section-sub">Skip the rubric clipboard. Every utterance from every student becomes a structured, comparable signal — by class, by standard, by day.</p>

          <div className="feat-list">
            <div className="feat-item">
              <div className="feat-icon feat-icon--curric">{Icons.bar}</div>
              <div>
                <h4 className="feat-h">Class-level oracy reports</h4>
                <p className="feat-p">See vocabulary mastery, fluency, and pronunciation by student or by standard — without grading recordings on your weekend.</p>
              </div>
            </div>
            <div className="feat-item">
              <div className="feat-icon feat-icon--heritage">{Icons.spark}</div>
              <div>
                <h4 className="feat-h">One-tap remedial plans</h4>
                <p className="feat-p">The AI Center turns this week's class gaps into a 15-minute lesson plan — printable, editable, ready before homeroom.</p>
              </div>
            </div>
            <div className="feat-item">
              <div className="feat-icon feat-icon--mic">{Icons.shield}</div>
              <div>
                <h4 className="feat-h">School-grade safety</h4>
                <p className="feat-p">COPPA &amp; FERPA aligned, age-appropriate guardrails on every Oopsie reply, and admin tools for districts.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DashMock() {
  return (
    <div style={{ position: 'relative' }}>
      <div className="dash">
        <div className="dash-top">
          <div className="dash-dots"><span/><span/><span/></div>
          <div className="dash-search">
            {Icons.search}
            <span>Search students, classes, lessons…</span>
          </div>
        </div>
        <div className="dash-body">
          <div className="dash-side">
            <div className="dash-side-h">Teach</div>
            <div className="dash-nav active">{Icons.home}<span>Dashboard</span></div>
            <div className="dash-nav">{Icons.bookClass}<span>Classes</span></div>
            <div className="dash-nav">{Icons.users}<span>Students</span></div>
            <div className="dash-nav">{Icons.bar}<span>Reports</span></div>
            <div className="dash-side-h" style={{ marginTop: 12 }}>School</div>
            <div className="dash-nav">{Icons.settings}<span>Settings</span></div>
          </div>
          <div className="dash-main">
            <h3 className="dash-h">Ms. Hernandez · Grade 3 · Section A</h3>
            <p className="dash-meta">28 students · 5 active classes · Week of Apr 22</p>

            <div className="kpis">
              <div className="kpi">
                <div className="lbl">Active speakers</div>
                <div className="val">26<span style={{ fontSize: 13, color: 'var(--fg-muted)', fontWeight: 600 }}>/28</span></div>
                <div className="trend up">↑ 12% wk</div>
              </div>
              <div className="kpi">
                <div className="lbl">Avg. utterances</div>
                <div className="val">14.3</div>
                <div className="trend up">↑ 2.1</div>
              </div>
              <div className="kpi">
                <div className="lbl">Vocab mastery</div>
                <div className="val">78%</div>
                <div className="trend up">↑ 4 pts</div>
              </div>
            </div>

            <div className="classlist">
              <div className="classlist-h">
                <span>Student</span>
                <span>Mastery</span>
                <span>Last session</span>
                <span>Status</span>
              </div>
              <div className="classlist-row">
                <div>
                  <div className="name">Mia Alvarez</div>
                  <div className="meta">12 sessions · 1,840 XP</div>
                </div>
                <div className="bar-mini"><span style={{ width: '92%' }}/></div>
                <div className="meta">Today, 9:18</div>
                <div><span className="flag ok">{Icons.check} On track</span></div>
              </div>
              <div className="classlist-row">
                <div>
                  <div className="name">Jamal Brooks</div>
                  <div className="meta">10 sessions · 1,420 XP</div>
                </div>
                <div className="bar-mini"><span style={{ width: '74%' }}/></div>
                <div className="meta">Today, 9:21</div>
                <div><span className="flag ok">{Icons.check} On track</span></div>
              </div>
              <div className="classlist-row">
                <div>
                  <div className="name">Wei Chen</div>
                  <div className="meta">7 sessions · 980 XP</div>
                </div>
                <div className="bar-mini"><span style={{ width: '52%' }}/></div>
                <div className="meta">Yesterday</div>
                <div><span className="flag warn">Needs review</span></div>
              </div>
              <div className="classlist-row">
                <div>
                  <div className="name">Aisha Khan</div>
                  <div className="meta">11 sessions · 1,610 XP</div>
                </div>
                <div className="bar-mini"><span style={{ width: '86%' }}/></div>
                <div className="meta">Today, 9:15</div>
                <div><span className="flag ok">{Icons.check} On track</span></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* AI Center pop-out */}
      <div className="ai-panel">
        <div className="ai-panel-h">
          <div className="badge">{Icons.spark}</div>
          <div style={{ flex: 1 }}>
            <div className="tag">AI CENTER</div>
            <h4>This week's class gap</h4>
          </div>
        </div>
        <p>3 students struggled with <strong>plural nouns</strong> after numbers 11–20. Want me to draft a 15-min remedial plan?</p>
        <button className="gen-btn">
          {Icons.spark}
          Generate plan
        </button>
      </div>
    </div>
  );
}

// ═════════ STATS ═════════
function StatsBand() {
  const stats = [
    { value: '3.2×', label: 'more student speaking time per lesson' },
    { value: '94%', label: 'of students complete their weekly session' },
    { value: '+18', label: 'CEFR-mapped vocabulary terms per week' },
    { value: '6 hrs', label: 'saved per teacher per week on assessment' },
  ];
  return (
    <section className="stats-section">
      <div className="stats-inner">
        {stats.map((s, i) => (
          <div key={i} className="stat-block">
            <div className="stat-value">{s.value}</div>
            <div className="stat-label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ═════════ TESTIMONIALS ═════════
function Testimonials() {
  return (
    <section className="testimonial-section" id="research">
      <div className="section-inner">
        <div className="section-head--center" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">From the field</div>
          <h2 className="section-title">Built with teachers, loved by students.</h2>
        </div>

        <div className="testimonial-grid" style={{ marginTop: 56 }}>
          <div className="testimonial">
            <div className="quote-mark">"</div>
            <p className="testimonial-text">My EL students used to freeze. Now they argue with Oopsie about how many cookies are in the picture. We can't get them to stop talking.</p>
            <div className="testimonial-byline">
              <div className="byline-avatar">SH</div>
              <div>
                <div className="byline-name">Sara Hernandez</div>
                <div className="byline-role">3rd grade · Cedar Park USD</div>
              </div>
            </div>
          </div>

          <div className="testimonial feature">
            <div className="quote-mark">"</div>
            <div className="score-meter">
              <span className="fill"/><span className="fill"/><span className="fill"/><span className="fill"/><span/>
            </div>
            <p className="testimonial-text">In one trimester, average sustained speaking jumped from 22 seconds to 71. The data alone is worth the rollout — the kids actually doing it is the bonus.</p>
            <div className="testimonial-byline">
              <div className="byline-avatar b">DK</div>
              <div>
                <div className="byline-name">Dr. Daniel Kwon</div>
                <div className="byline-role">Director of ML, Bayview International</div>
              </div>
            </div>
          </div>

          <div className="testimonial">
            <div className="quote-mark">"</div>
            <p className="testimonial-text">I get more useful info about my class in five minutes of the dashboard than I did from a whole afternoon of one-on-one assessments.</p>
            <div className="testimonial-byline">
              <div className="byline-avatar c">PT</div>
              <div>
                <div className="byline-name">Priya Thakur</div>
                <div className="byline-role">2nd grade · Northcrest Elementary</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═════════ FAQ ═════════
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    {
      q: 'How is OracyAI different from Duolingo or Khan Academy?',
      a: "Those are great consumer tools — but they aren't built around a teacher's classroom workflow. OracyAI is speaking-first (not multiple-choice-first), maps to your school's scope & sequence, and gives teachers class-level signal that feeds back into instruction. It's an instructional tool, not a homework app."
    },
    {
      q: 'How much teacher time does it take to roster a class?',
      a: 'About four minutes for a class of 30 — paste a roster CSV, pick a scope & sequence, and you\'re done. We integrate with Clever and ClassLink for districts that want SSO.'
    },
    {
      q: 'Is student voice data safe?',
      a: 'Yes. We\'re COPPA and FERPA aligned, recordings are processed and discarded (we keep the structured assessment, not the raw audio, by default), and admins get school-wide controls on retention and export.'
    },
    {
      q: 'What grades and languages does it support?',
      a: 'Today: K-8 English language arts and ESL/EL, mapped to CEFR Pre-A1 → B1. Spanish and Mandarin are in early access for the 26-27 school year.'
    },
    {
      q: 'Does it work on Chromebooks?',
      a: 'Yes — runs in any modern browser with a microphone. We also have iOS and Android apps for after-school practice that sync the same progress.'
    },
    {
      q: 'How are you priced?',
      a: 'Per-student site licenses, billed annually, with a free pilot for one classroom for the rest of the school year. Talk to us about district pricing.'
    },
  ];
  return (
    <section className="faq-section">
      <div className="faq-inner">
        <div className="section-head--center" style={{ textAlign: 'center' }}>
          <div className="section-eyebrow">FAQ</div>
          <h2 className="section-title">The questions every principal asks.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {it.q}
                <span className="plus">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
                </span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═════════ CTA ═════════
function FinalCTA({ onDemoClick }) {
  return (
    <section className="cta-section" id="pricing">
      <h2>Give every kid a chance to speak.</h2>
      <p>Pilot OracyAI in one classroom — free through the end of the school year. We'll have you set up in under an hour.</p>
      <div className="cta-actions">
        <PressableButton variant="primary" className="pressable--hero" onClick={onDemoClick}>
          Book a 20-min demo
        </PressableButton>
        <PressableButton variant="orange" className="pressable--hero" onClick={onDemoClick}>
          Start a free pilot
        </PressableButton>
      </div>
    </section>
  );
}

// ═════════ FOOTER ═════════
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/oracyai-logo-light.svg" alt="OracyAI" />
            <p>The speaking partner every K-8 classroom deserves. Built with teachers, for teachers.</p>
          </div>
          <div className="footer-col">
            <h4>Product</h4>
            <a href="#">For students</a>
            <a href="#">For teachers</a>
            <a href="#">For districts</a>
            <a href="#">Pricing</a>
          </div>
          <div className="footer-col">
            <h4>Resources</h4>
            <a href="#">Research &amp; outcomes</a>
            <a href="#">Scope &amp; sequence</a>
            <a href="#">Help center</a>
            <a href="#">Blog</a>
          </div>
          <div className="footer-col">
            <h4>Company</h4>
            <a href="#">About</a>
            <a href="#">Careers</a>
            <a href="#">Press</a>
            <a href="#">Contact</a>
          </div>
          <div className="footer-col">
            <h4>Trust</h4>
            <a href="#">Privacy</a>
            <a href="#">Security</a>
            <a href="#">COPPA &amp; FERPA</a>
            <a href="#">Accessibility</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 OracyAI, Inc. · Made for classrooms.</span>
          <div className="right">
            <span>🇺🇸 English</span>
            <span>System status: all green</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ═════════ APP ═════════
function App() {
  const [demoOpen, setDemoOpen] = useState(false);
  const openDemo = () => setDemoOpen(true);
  const closeDemo = () => setDemoOpen(false);

  return (
    <div data-screen-label="OracyAI Landing">
      <Nav onDemoClick={openDemo} />
      <Hero onDemoClick={openDemo} />
      <HowItWorks />
      <ForStudents />
      <ForTeachers />
      <StatsBand />
      <Testimonials />
      <FAQ />
      <FinalCTA onDemoClick={openDemo} />
      <Footer />
      <DemoModal open={demoOpen} onClose={closeDemo} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);