// Hero demo: a call comes in, the AI answers, the conversation types in and a booking card pops up. Loops through a few businesses.
const LIVE_CALLS = [
  { biz: 'Bright Smile Dental', icon: 'Smile', caller: '(469) 555-0182', when: 'Thu 7:42 PM, after hours', lines: ["Bright Smile Dental, how can I help you?", 'I chipped a tooth. Can someone see me tomorrow?', "I'm sorry to hear that. Dr. Lee has 9:30 AM open. Shall I book it?", 'Yes, please.'], result: ['Appointment booked', 'Fri 9:30 AM with Dr. Lee', 'Confirmation text sent'] },
  { biz: 'Apex Auto Care', icon: 'Car', caller: '(214) 555-0147', when: 'Mon 6:15 AM, before opening', lines: ["Apex Auto Care, what's going on with your vehicle?", 'My brakes are grinding. Do you have anything today?', "We can take it at 10 AM. What's the make and model?", '2019 Honda Civic.'], result: ['Service booked', 'Today 10:00 AM, brake inspection', 'Shop notified by text'] },
  { biz: 'Parker and Associates', icon: 'Scale', caller: '(972) 555-0193', when: 'Sat 11:08 AM, weekend', lines: ['Thanks for calling Parker and Associates. Are you a new client?', 'Yes, I need help with a contract dispute.', 'I can set up a free consultation. Does Monday at 2 work?', 'That works.'], result: ['Consultation booked', 'Mon 2:00 PM, new client intake', 'Summary emailed to the firm'] },
];
// Timeline in ms: answered, then each line (AI lines get a typing indicator first), then the result card, then fade out.
const LC_ANSWER = 1000, LC_LINES = [1700, 3300, 5100, 6700], LC_TYPING = 650, LC_RESULT = 7700, LC_END = 11500, LC_NEXT = 12100;

function LiveCall() {
  const [k, setK] = React.useState(0), [t, setT] = React.useState(-1), [secs, setSecs] = React.useState(0);
  const ref = React.useRef(null), [run, setRun] = React.useState(false);
  const still = React.useMemo(() => matchMedia('(prefers-reduced-motion: reduce)').matches, []);
  // Only play while on screen and the tab is visible
  React.useEffect(() => {
    if (still) return;
    let seen = false; const upd = () => setRun(seen && !document.hidden);
    const io = new IntersectionObserver(([e]) => { seen = e.isIntersecting; upd(); }, { threshold: 0.3 });
    io.observe(ref.current); document.addEventListener('visibilitychange', upd);
    return () => { io.disconnect(); document.removeEventListener('visibilitychange', upd); };
  }, []);
  React.useEffect(() => {
    if (!run) return;
    setT(0); setSecs(0);
    const marks = [LC_ANSWER, ...LC_LINES.flatMap((m, j) => j % 2 ? [m] : [m - LC_TYPING, m]), LC_RESULT, LC_END].map(m => setTimeout(() => setT(m), m));
    const tick = setInterval(() => setSecs(s => s + 1), 1000);
    const next = setTimeout(() => setK(x => (x + 1) % LIVE_CALLS.length), LC_NEXT);
    return () => { marks.forEach(clearTimeout); clearInterval(tick); clearTimeout(next); };
  }, [run, k]);
  const c = LIVE_CALLS[k], at = m => still || t >= m;
  const answered = at(LC_ANSWER), shown = LC_LINES.filter(m => at(m)).length;
  const typing = !still && LC_LINES.some((m, j) => j % 2 === 0 && t >= m - LC_TYPING && t < m);
  const elapsed = still ? 48 : Math.max(0, secs - 1);
  return <div ref={ref} className={'lc' + (at(LC_END) && !still ? ' is-leaving' : '')} aria-label="Example of the AI receptionist answering a call" role="img">
    <div className="lc-head">
      <span className="lc-avatar"><DS.Icon name={c.icon} size={20} /></span>
      <div className="lc-who"><strong>{c.biz}</strong><span className="num">{c.caller}, {c.when}</span></div>
      <span className={'lc-status' + (answered ? ' on' : '')}>{answered ? <><DS.Icon name="Bot" size={14} /> AI answered <span className="num lc-time">{String(Math.floor(elapsed / 60)).padStart(2, '0')}:{String(elapsed % 60).padStart(2, '0')}</span></> : <><DS.Icon name="PhoneIncoming" size={14} /> Incoming call</>}</span>
    </div>
    <div className="lc-body">
      {c.lines.slice(0, shown).map((line, j) => <div key={k + '-' + j} className="lc-msg"><DS.ChatBubble from={j % 2 ? 'caller' : 'ai'}>{line}</DS.ChatBubble></div>)}
      {typing && <div className="lc-typing" aria-hidden="true"><span /><span /><span /></div>}
    </div>
    <div className={'lc-result' + (at(LC_RESULT) ? ' on' : '')}>
      <span className="lc-result-ic"><DS.Icon name="CalendarCheck" size={20} /></span>
      <div><strong>{c.result[0]}</strong><span>{c.result[1]}</span></div>
      <span className="lc-sent"><DS.Icon name="Check" size={13} strokeWidth={3} />{c.result[2]}</span>
    </div>
  </div>;
}
Object.assign(window, { LiveCall });