// Hero — animated voicebot-style typing intro
const { useState, useEffect, useRef } = React;

function useTypewriter(lines, { typeSpeed = 38, pauseAfter = 1400, eraseSpeed = 18, loop = true } = {}) {
  const [lineIdx, setLineIdx] = useState(0);
  const [text, setText] = useState("");
  const [phase, setPhase] = useState("typing"); // typing | pausing | erasing

  useEffect(() => {
    let t;
    const current = lines[lineIdx];
    if (phase === "typing") {
      if (text.length < current.length) {
        t = setTimeout(() => setText(current.slice(0, text.length + 1)), typeSpeed);
      } else {
        t = setTimeout(() => setPhase("pausing"), pauseAfter);
      }
    } else if (phase === "pausing") {
      t = setTimeout(() => setPhase("erasing"), pauseAfter);
    } else if (phase === "erasing") {
      if (text.length > 0) {
        t = setTimeout(() => setText(text.slice(0, -1)), eraseSpeed);
      } else {
        const next = (lineIdx + 1) % lines.length;
        if (next === 0 && !loop) return;
        setLineIdx(next);
        setPhase("typing");
      }
    }
    return () => clearTimeout(t);
  }, [text, phase, lineIdx, lines, typeSpeed, pauseAfter, eraseSpeed, loop]);

  return text;
}

function Waveform({ active = true, bars = 28 }) {
  // Deterministic-ish but varied bar delays
  const items = Array.from({ length: bars }, (_, i) => {
    const delay = ((i * 73) % 110) / 100; // 0–1.1s
    const dur = 0.85 + ((i * 17) % 50) / 100;
    return { delay, dur };
  });
  return (
    <div className="vb-wave" aria-hidden="true">
      {items.map((b, i) => (
        <span
          key={i}
          style={{
            animationDelay: `${b.delay}s`,
            animationDuration: `${b.dur}s`,
            animationPlayState: active ? "running" : "paused",
          }}
        />
      ))}
    </div>
  );
}

function VoicebotPanel() {
  const prompts = [
    "Bonjour, comment puis-je vous aider aujourd'hui ?",
    "أهلاً، كيفاش نقدر نعاونك؟",
    "Hello — connecting you to the front desk now.",
    "Pulling the booking for Mr. Bennani — one moment.",
    "Routing call: STT → intent → tool → TTS.",
  ];
  const typed = useTypewriter(prompts, { typeSpeed: 32, pauseAfter: 1600, eraseSpeed: 14 });

  return (
    <div className="voicebot reveal delay-3">
      <div className="vb-head">
        <span>session // voice agent · multilingual</span>
        <div className="lights"><span></span><span></span><span></span></div>
      </div>
      <div className="vb-body">
        <div className="vb-line">
          <span className="prompt">›</span>
          <span><span className="vb-typed">{typed}</span><span className="vb-cursor"></span></span>
        </div>
        <Waveform />
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero container" id="top">
      <div className="eyebrow reveal">
        AI Engineer · Full-Stack Developer
      </div>
      <h1 className="reveal delay-1">
        I build voice and language<br />
        systems that <span className="accent">actually ship.</span>
      </h1>
      <div className="role-line reveal delay-2">
        <span>Mustapha Cherqi</span>
        <span className="sep"></span>
        <span>10 yrs in production</span>
      </div>
      <VoicebotPanel />
    </section>
  );
}

window.Hero = Hero;