/* Hero call transcript animation */
const { useState, useEffect, useRef } = React;

const TRANSCRIPT = [
  { kind: 'greeting', who: 'agent', text: "Hey there. Bearded Movers, this is Andray. Thanks for calling — what's your name?" },
  { kind: 'reply', who: 'caller', text: "Mike. I need a quote on moving some servers." },
  { kind: 'greeting', who: 'agent', text: "Nice. How many server units are we talking about?" },
  { kind: 'reply', who: 'caller', text: "About 25, around 50 pounds each." },
  { kind: 'greeting', who: 'agent', text: "Got it. What are the ZIP codes for the current location and the destination?" },
  { kind: 'reply', who: 'caller', text: "Two nine six oh seven, to two nine two two nine." },
  { kind: 'greeting', who: 'agent', text: "Perfect. One moment while I put this together…" },
  { kind: 'tool' },
  { kind: 'greeting', who: 'agent', text: "Alright Mike — for 25 high-value servers moving locally in Greenville, your quote comes out to thirteen hundred twenty-seven dollars and twenty-five cents. How does that sound?" }
];

function Waveform({ active }) {
  const [bars, setBars] = useState(Array(28).fill(0.2));
  useEffect(() => {
    if (!active) return;
    const id = setInterval(() => {
      setBars(Array(28).fill(0).map(() => 0.15 + Math.random() * 0.85));
    }, 120);
    return () => clearInterval(id);
  }, [active]);
  return (
    <div className="call-wave" aria-hidden="true">
      {bars.map((h, i) => (
        <span key={i} style={{ height: `${h * 100}%`, opacity: active ? 0.9 : 0.3 }} />
      ))}
    </div>
  );
}

function HeroCall() {
  const [step, setStep] = useState(0);
  const transcriptRef = useRef(null);

  useEffect(() => {
    let i = 0;
    const advance = () => {
      i++;
      if (i > TRANSCRIPT.length) {
        // Reset after a beat
        setTimeout(() => { i = 0; setStep(0); }, 3500);
        return;
      }
      setStep(i);
      const next = TRANSCRIPT[i];
      const delay = next?.kind === 'tool' ? 1400 : (next?.who === 'caller' ? 1500 : 2800);
      setTimeout(advance, delay);
    };
    const start = setTimeout(advance, 800);
    return () => clearTimeout(start);
  }, []);

  useEffect(() => {
    if (transcriptRef.current) {
      transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight;
    }
  }, [step]);

  const active = step > 0 && step < TRANSCRIPT.length;

  return (
    <div className="call-card">
      <div className="call-float top-right">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M5 13l4 4L19 7" />
        </svg>
        answered in 0.4s
      </div>
      <div className="call-float bottom-left">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 2v20M2 12h20" />
        </svg>
        quote sent via SMS
      </div>

      <div className="call-header">
        <div className="call-who">
          <div className="call-avatar">A</div>
          <div>
            <div className="call-name">Andray — AI Voice Agent</div>
            <div className="call-role">Bearded Movers · inbound</div>
          </div>
        </div>
        <div className="call-live">
          <span className="call-live-dot"></span>
          LIVE · 00:{String(Math.min(14 + step * 12, 134)).padStart(2, '0')}
        </div>
      </div>

      <Waveform active={active} />

      <div className="call-transcript" ref={transcriptRef}>
        {TRANSCRIPT.slice(0, step).map((msg, i) => {
          if (msg.kind === 'tool') {
            return (
              <div className="call-tool show" key={i}>
                calculateQuote({'{'}itemCount: 25, weight: 50lbs, fragility: highValue, origin: 29607, dest: 29229{'}'})
                <span className="tool-arrow">→</span>
                <span className="tool-price">$1,327.25</span>
              </div>
            );
          }
          return (
            <div className={`call-msg ${msg.who} show`} key={i}>
              <span className="call-msg-tag">{msg.who === 'agent' ? 'Andray' : 'Caller'}</span>
              <span className="call-msg-body">{msg.text}</span>
            </div>
          );
        })}
      </div>

      <div className="call-footer">
        <span>full transcript → inbox + SMS</span>
        <span className="call-quote">$1,327.25 quoted</span>
      </div>
    </div>
  );
}

window.HeroCall = HeroCall;