// HeroConversationCarousel — rotating conversation examples for the hero.
// Slides are paraphrased from real Inclamo call-log entries (see screenshots in /landing).
// Brand voice rule: never invent prices, stock, or delivery times.

const HERO_SLIDES = [
  {
    key: 'order_modification',
    label: 'Inbound · Order modification',
    duration: '02:04',
    transcript: [
      { who: 'Customer', text: 'Hi, I just placed order 1018 — I need to change the shipping address before it goes out.' },
      { who: 'Agent', text: 'Got it. I can see order 1018 — it hasn\'t shipped yet. I\'ll take down the new address and have a teammate confirm the change. Want a callback at this number?' },
      { who: 'Customer', text: 'Yes please.' },
      { who: 'Agent', text: 'Done. You\'re in the queue and someone will reach out shortly.' },
    ],
    outcomes: [
      ['Callback taken', 'navy'],
      ['Tags: order_modification, shipping', 'terracotta'],
      ['Sentiment: neutral', 'inkSoft'],
    ],
    meta: { label: 'INTENT', value: 'order_modification', sub: 'callback queued for human follow-up' },
  },
  {
    key: 'product_availability',
    label: 'Inbound · Product availability',
    duration: '00:53',
    transcript: [
      { who: 'Customer', text: 'Quick question — do you have ski wax in stock?' },
      { who: 'Agent', text: 'Let me check… yes, we have it in stock. Want me to send the product link to your phone or email?' },
      { who: 'Customer', text: 'Phone, please.' },
      { who: 'Agent', text: 'Sent. Anything else I can help with?' },
    ],
    outcomes: [
      ['Product found', 'navy'],
      ['Resolved in-call', 'terracotta'],
      ['Sentiment: positive', 'inkSoft'],
    ],
    meta: { label: 'INTENT', value: 'product_availability', sub: 'looked up in your synced product KB' },
  },
  {
    key: 'damage_replacement',
    label: 'Inbound · Damage report',
    duration: '03:35',
    transcript: [
      { who: 'Customer', text: 'My order 1015 arrived damaged — the box was crushed.' },
      { who: 'Agent', text: 'Sorry to hear that. Returns and replacements are handled by our team — I\'ll log this and have someone call you back to arrange it. Same number?' },
      { who: 'Customer', text: 'Yes, this one.' },
      { who: 'Agent', text: 'Got it. You\'ll hear back shortly.' },
    ],
    outcomes: [
      ['Callback taken', 'terracotta'],
      ['Tags: damage, replacement', 'navy'],
      ['Sentiment: negative', 'inkSoft'],
    ],
    meta: { label: 'INTENT', value: 'damage / replacement', sub: 'handed off to a human per brand rules' },
  },
  {
    key: 'order_status',
    label: 'Inbound · Order status',
    duration: '00:41',
    transcript: [
      { who: 'Customer', text: 'I want to check my order — the number is, uh, three-six-five-five-zero-five-five-six.' },
      { who: 'Agent', text: 'Hmm, I can\'t find an order with that number on file. Could you double-check, or want a callback so we can sort it?' },
      { who: 'Customer', text: 'Callback would be great.' },
      { who: 'Agent', text: 'Done. You\'re in the queue.' },
    ],
    outcomes: [
      ['Order not found', 'navy'],
      ['Callback offered', 'terracotta'],
      ['Sentiment: neutral', 'inkSoft'],
    ],
    meta: { label: 'INTENT', value: 'order_status', sub: 'no match — graceful handoff' },
  },
];

const AUTO_ADVANCE_MS = 6500;

const pillColor = (k) => ({
  navy: C.navy,
  terracotta: C.terracotta,
  inkSoft: C.inkSoft,
}[k]);

const HeroConversationCarousel = () => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setIdx((i) => (i + 1) % HERO_SLIDES.length), AUTO_ADVANCE_MS);
    return () => clearTimeout(t);
  }, [idx, paused]);

  const slide = HERO_SLIDES[idx];

  return (
    <div
      style={{ position: 'relative' }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <Glass strong style={{ padding: 24, minHeight: 420 }}>
        {/* Call header */}
        <div data-carousel-header style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: 20, paddingBottom: 16, borderBottom: `1px solid ${C.lineSoft}`,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 8, height: 8, borderRadius: '50%',
              background: C.terracotta,
              boxShadow: `0 0 0 4px rgba(232,93,58,0.2)`,
            }} />
            <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.ink }}>
              Live · {slide.label}
            </span>
          </div>
          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, color: C.inkMute }}>
            {slide.duration}
          </span>
        </div>

        {/* Transcript — crossfade */}
        <div
          key={slide.key}
          style={{
            display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 20,
            animation: 'heroFade 450ms ease',
            minHeight: 180,
          }}
        >
          {slide.transcript.map((m, i) => {
            const color = m.who === 'Agent' ? C.terracotta : C.navy;
            return (
              <div key={i} style={{ display: 'flex', gap: 12 }}>
                <div style={{
                  fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.1em',
                  color, width: 60, flexShrink: 0, paddingTop: 3, textTransform: 'uppercase',
                }}>{m.who}</div>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 14, color: C.ink, lineHeight: 1.5,
                }}>{m.text}</div>
              </div>
            );
          })}
        </div>

        {/* Waveform */}
        <div style={{
          padding: 16, background: C.creamLight, borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ flex: 1 }}><Waveform bars={48} height={36} color={C.terracotta} active /></div>
          <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: C.terracotta }}>
            AGENT SPEAKING
          </div>
        </div>

        {/* Outcome pills */}
        <div style={{ display: 'flex', gap: 8, marginTop: 16, flexWrap: 'wrap' }}>
          {slide.outcomes.map(([t, c]) => (
            <div key={t} style={{
              padding: '6px 12px',
              border: `1px solid ${pillColor(c)}`, color: pillColor(c),
              borderRadius: 999,
              fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.04em',
            }}>{t}</div>
          ))}
        </div>

        {/* Carousel controls — bottom bar */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 14,
          marginTop: 20, paddingTop: 16, borderTop: `1px solid ${C.lineSoft}`,
        }}>
          <button
            onClick={() => setIdx((i) => (i - 1 + HERO_SLIDES.length) % HERO_SLIDES.length)}
            aria-label="Previous example"
            style={{
              width: 30, height: 30, borderRadius: '50%',
              border: `1px solid ${C.lineSoft}`, background: 'transparent',
              color: C.ink, cursor: 'pointer', fontSize: 14, lineHeight: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >‹</button>

          {/* Tabs */}
          <div style={{ display: 'flex', gap: 6, flex: 1, flexWrap: 'wrap' }}>
            {HERO_SLIDES.map((s, i) => {
              const active = i === idx;
              const name = {
                order_modification: 'Address change',
                product_availability: 'Stock check',
                damage_replacement: 'Damage',
                order_status: 'Order lookup',
              }[s.key];
              return (
                <button
                  key={s.key}
                  onClick={() => setIdx(i)}
                  style={{
                    padding: '4px 9px',
                    borderRadius: 999,
                    fontFamily: 'Inter, sans-serif', fontSize: 10.5, fontWeight: 500, letterSpacing: '0.02em',
                    border: `1px solid ${active ? C.ink : C.lineSoft}`,
                    background: active ? C.ink : 'transparent',
                    color: active ? C.cream : C.inkSoft,
                    cursor: 'pointer', whiteSpace: 'nowrap',
                  }}
                >{name}</button>
              );
            })}
          </div>

          <button
            onClick={() => setIdx((i) => (i + 1) % HERO_SLIDES.length)}
            aria-label="Next example"
            style={{
              width: 30, height: 30, borderRadius: '50%',
              border: `1px solid ${C.lineSoft}`, background: 'transparent',
              color: C.ink, cursor: 'pointer', fontSize: 14, lineHeight: 1,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}
          >›</button>
        </div>

        {/* Progress bar */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, background: 'transparent' }}>
          <div
            key={`${slide.key}-${paused}`}
            style={{
              height: '100%',
              background: C.terracotta,
              animation: paused ? 'none' : `heroProg ${AUTO_ADVANCE_MS}ms linear forwards`,
              width: paused ? '100%' : 0,
              opacity: paused ? 0.3 : 1,
            }}
          />
        </div>
      </Glass>

      {/* Floating intent card — labels only, no fictional ROI */}
      <Glass data-hero-floating-roi style={{
        position: 'absolute', top: -28, right: -40,
        padding: 16, width: 240,
        transform: 'rotate(3deg)',
        zIndex: 2,
      }}>
        <div key={slide.key + '-meta'} style={{ animation: 'heroFade 450ms ease' }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 10, color: C.navy,
            letterSpacing: '0.1em', marginBottom: 8,
          }}>{slide.meta.label}</div>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontSize: 22, color: C.ink, lineHeight: 1.1,
          }}>{slide.meta.value}</div>
          <div style={{
            fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkSoft, marginTop: 6,
          }}>{slide.meta.sub}</div>
        </div>
      </Glass>

      <style>{`
        @keyframes heroFade {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes heroProg {
          from { width: 0%; }
          to { width: 100%; }
        }
      `}</style>
    </div>
  );
};

window.HeroConversationCarousel = HeroConversationCarousel;