/* eslint-disable */
// Interview section. Redesigned 2026-09: the previous version was a dark
// cinematic scene with a scripted chat transcript. This states the four
// real modes plainly and uses one small, contained animation — a waveform
// that only moves near a mic icon — instead of a whole-section performance.

function Waveform({ color = "var(--rose)", bars = 5 }) {
  return (
    <span className="waveform" style={{ display: "inline-flex", alignItems: "center", gap: 2, height: 14 }}>
      {Array.from({ length: bars }).map((_, i) => (
        <span key={i} style={{
          width: 2.5, height: "100%", borderRadius: 2, background: color,
          animation: `waveBar 1.1s ease-in-out ${i * 0.12}s infinite`,
        }} />
      ))}
    </span>
  );
}

function InterviewSection() {
  const modes = [
    { icon: LI.doc,    name: "Live · text",       desc: "Type your answers. Coaching after each one." },
    { icon: LI.mic,    name: "Voice mode",         desc: "Speak out loud — pace, filler words, and time-to-answer, tracked." },
    { icon: LI.layers, name: "AI vs AI",           desc: "Watch an AI candidate answer the same questions, for ideas." },
    { icon: LI.sparkle,name: "AI vs AI · voice",   desc: "Two AI voices run the interview out loud, start to finish." },
  ];
  return (
    <section id="interview" style={{ padding: "100px 0", background: "var(--paper)" }}>
      <div className="container">
        <div className="reveal" style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 12 }}>
          <div className="eye" style={{ color: "var(--violet)" }}>05 · INTERVIEW</div>
          <Waveform color="var(--violet)" />
        </div>
        <h2 className="reveal" style={{ margin: "0 0 16px", fontSize: "clamp(30px, 3.6vw, 44px)", lineHeight: 1.08, letterSpacing: "-0.026em", fontWeight: 700, maxWidth: 640 }}>
          Practice before the real call,<br /><span className="ed" style={{ fontWeight: 500, color: "var(--violet)" }}>however you learn best.</span>
        </h2>
        <p className="reveal" style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--ink-2)", maxWidth: 620, marginBottom: 44 }}>
          Every question is generated from your résumé and target role — not a generic bank. Pick a mode:
        </p>
        <div className="reveal modes-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {modes.map((m) => (
            <div key={m.name} style={{
              padding: "22px 18px", borderRadius: 14,
              background: "var(--paper-2)", border: "1px solid var(--line)",
            }}>
              <span style={{ width: 38, height: 38, borderRadius: 10, background: "#fff", color: "var(--violet)", display: "grid", placeItems: "center", marginBottom: 14 }}>{m.icon}</span>
              <div style={{ fontSize: 15, fontWeight: 700, marginBottom: 6 }}>{m.name}</div>
              <div style={{ fontSize: 13, color: "var(--fg-3)", lineHeight: 1.5 }}>{m.desc}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes waveBar { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
        @media (max-width: 860px) { .modes-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 520px) { .modes-grid { grid-template-columns: 1fr !important; } }
        @media (prefers-reduced-motion: reduce) { .waveform span { animation: none !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { InterviewSection, Waveform });