// ─── Eva AI Section ───────────────────────────────────────
// The one "wow" AI moment — keeps the next-gen feel but in a light frame

function EvaSection() {
  const [step, setStep] = useState(0);
  const steps = [
    { role: 'teacher', text: 'Eva, why are Aarav Menon\'s grades dropping this term?' },
    { role: 'eva-thinking', sources: ['Attendance · 3 terms', 'Grading history · 42 papers', 'Peer map · Sec 9-B'] },
    { role: 'eva', text: 'Three patterns converged recently:',
      bullets: [
        { label: 'Attendance', text: 'On-time rate fell to 74%. Avg 12 min late.', tone: 'amber' },
        { label: 'Weak topics', text: 'Math (43%) & Science (51%).', tone: 'crimson' },
        { label: 'Peer shift', text: 'Moved lunch groups. New group has 2 at-risk peers.', tone: 'amber' },
      ],
    },
  ];

  useEffect(() => {
    let timeoutId;
    const runSequence = (currentStep) => {
      // Custom delays: 2.5s reading question, 0.8s thinking, 10s reading answer
      const delays = [2500, 800, 10000];
      timeoutId = setTimeout(() => {
        const nextStep = (currentStep + 1) % steps.length;
        setStep(nextStep);
        runSequence(nextStep);
      }, delays[currentStep]);
    };
    runSequence(0);
    return () => clearTimeout(timeoutId);
  }, []);

  return (
    <section id="eva" className="section">
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.85fr) minmax(0, 1.15fr)',
          gap: 64,
          alignItems: 'center',
        }} className="eva-grid">

          <div>
            <Eyebrow>Meet Eva · Your AI co-pilot</Eyebrow>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 58px)', margin: '20px 0 24px' }}>
              Ask one question. Get the <em className="display-italic" style={{ color: 'var(--saffron)' }}>whole picture.</em>
            </h2>
            <p style={{ fontSize: 17, color: 'var(--ink-1)', lineHeight: 1.6, marginBottom: 28 }}>
              Eva is trained on every signal your campus produces — attendance, grades, movement, peer networks, behavioural notes. Ask her anything in plain English or Hindi. She cross-references everything, and answers like your most experienced counsellor.
            </p>
            <div style={{ display: 'grid', gap: 24 }}>
              {[
                '"Who are the five students I should meet this week?"',
                '"Which class is struggling most with fractions?"',
                '"Draft a parent note for Ananya\'s mother about Science."',
                '"Show me every student who dropped marks across three subjects this term."',
              ].map((q, i) => (
                <div key={i} style={{
                  padding: '14px 18px',
                  background: 'var(--bg-1)',
                  border: '1px solid var(--line)',
                  borderRadius: 12,
                  fontFamily: 'var(--font-display)',
                  fontStyle: 'italic',
                  fontSize: 17,
                  color: 'var(--ink-1)',
                  boxShadow: 'var(--shadow-sm)',
                  position: 'relative',
                  paddingLeft: 28,
                }}>
                  <span style={{
                    position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
                    width: 4, height: 22, background: 'var(--saffron)', borderRadius: 2,
                  }} />
                  {q}
                </div>
              ))}
            </div>
          </div>

          {/* Eva conversation card */}
          <div className="card card-elevated" style={{
            padding: 0,
            background: 'var(--bg-1)',
            overflow: 'hidden',
            border: '1px solid var(--line-strong)',
          }}>
            {/* Card header */}
            <div style={{
              padding: '18px 24px',
              borderBottom: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: 'linear-gradient(180deg, rgba(26,92,151,0.06) 0%, transparent 100%)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <img src="assets/Dashboard_Logo_192.png" alt="Eva" style={{
                  width: 36, height: 36, borderRadius: '50%',
                  boxShadow: '0 4px 12px rgba(26,92,151,0.3)',
                }} />
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>Eva</div>
                  <div className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 1 }}>
                    AI Assistant
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 4 }}>
                {[0, 1, 2].map(i => (
                  <span key={i} style={{
                    width: 6, height: 6, borderRadius: '50%',
                    background: 'var(--saffron)',
                    animation: `tick-pulse 1.2s ease-in-out ${i * 0.2}s infinite`,
                  }} />
                ))}
              </div>
            </div>

            {/* Conversation body */}
            <div className="eva-chat-body" style={{ padding: '28px 24px', height: 420, overflow: 'hidden' }}>
              {/* Teacher question — always visible */}
              <div style={{
                display: 'flex', justifyContent: 'flex-end', marginBottom: 20,
                opacity: 1,
                transform: 'translateY(0)',
                transition: 'opacity 0.5s ease, transform 0.5s ease',
              }}>
                <div style={{
                  background: 'var(--ink-0)',
                  color: 'var(--bg-1)',
                  padding: '12px 18px',
                  borderRadius: '18px 18px 4px 18px',
                  fontSize: 14.5,
                  maxWidth: '85%',
                  boxShadow: '0 2px 8px rgba(13,21,48,0.15)',
                }}>
                  {steps[0].text}
                </div>
              </div>

              {/* Thinking tags — fade in at step 1+ */}
              <div style={{
                opacity: step >= 1 ? 1 : 0,
                transform: step >= 1 ? 'translateY(0)' : 'translateY(12px)',
                transition: 'opacity 0.5s ease, transform 0.5s ease',
                marginBottom: step >= 1 ? 22 : 0,
              }}>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: 'var(--ink-2)', marginBottom: 10, textTransform: 'uppercase' }}>
                  Cross-referencing
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {steps[1].sources.map((s, i) => (
                    <span key={i} style={{
                      padding: '6px 12px',
                      background: 'var(--bg-2)',
                      border: '1px solid var(--line)',
                      borderRadius: 100,
                      fontSize: 12,
                      fontFamily: 'var(--font-mono)',
                      color: 'var(--ink-1)',
                      opacity: step >= 1 ? 1 : 0,
                      transform: step >= 1 ? 'translateY(0)' : 'translateY(8px)',
                      transition: `opacity 0.4s ${0.1 + i * 0.08}s ease, transform 0.4s ${0.1 + i * 0.08}s ease`,
                    }}>
                      ✓ {s}
                    </span>
                  ))}
                </div>
              </div>

              {/* Eva response — fade in at step 2 */}
              <div style={{
                opacity: step >= 2 ? 1 : 0,
                transform: step >= 2 ? 'translateY(0)' : 'translateY(16px)',
                transition: 'opacity 0.6s ease, transform 0.6s ease',
              }}>
                  <div style={{
                    padding: '14px 18px',
                    background: 'var(--bg-2)',
                    borderRadius: '4px 18px 18px 18px',
                    border: '1px solid var(--line)',
                    marginBottom: 14,
                    fontSize: 14.5,
                    fontWeight: 500,
                  }}>
                    {steps[2].text}
                  </div>
                  <div style={{ display: 'grid', gap: 8, marginBottom: 14 }}>
                    {steps[2].bullets.map((b, i) => {
                      const tones = {
                        amber: { bg: '#e2effa', border: '#b6d6f2', dot: 'var(--saffron)' },
                        crimson: { bg: '#fce4e8', border: '#f5c7cf', dot: 'var(--crimson)' },
                      };
                      const t = tones[b.tone];
                      return (
                        <div key={i} style={{
                          padding: '11px 14px',
                          background: t.bg,
                          border: `1px solid ${t.border}`,
                          borderRadius: 10,
                          display: 'grid',
                          gridTemplateColumns: '8px 1fr',
                          gap: 12,
                          animation: `fade-up 0.4s ${0.1 + i * 0.1}s backwards`,
                        }}>
                          <span style={{ width: 6, height: 6, borderRadius: '50%', background: t.dot, marginTop: 6 }} />
                          <div>
                            <span style={{ fontWeight: 600, fontSize: 12.5, color: 'var(--ink-0)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{b.label} · </span>
                            <span style={{ fontSize: 13.5, color: 'var(--ink-1)' }}>{b.text}</span>
                          </div>
                        </div>
                      );
                    })}
                </div>
              </div>
            </div>

            {/* Input bar */}
            <div style={{
              padding: '12px 16px',
              borderTop: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', gap: 10,
              background: 'var(--bg-2)',
            }}>
              <Icon.Mic style={{ width: 18, height: 18, color: 'var(--ink-2)' }} />
              <div style={{ flex: 1, color: 'var(--ink-3)', fontSize: 13 }}>
                Ask Eva anything about your students, classes, or campus…
              </div>
              <div style={{
                padding: '4px 10px',
                background: 'var(--bg-1)',
                border: '1px solid var(--line)',
                borderRadius: 6,
                fontFamily: 'var(--font-mono)',
                fontSize: 10,
                color: 'var(--ink-2)',
              }}>⌘ K</div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .eva-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .eva-chat-body { height: 580px !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { EvaSection });