// Wapi hero animation — body bobs and tilts toward phone, then toward viewer.
// Phone shows a live "comanda" being built in real time. Order bubbles fly in
// from the right and disappear into the phone in a continuous loop.

const { useState: useStateWH, useEffect: useEffectWH, useRef: useRefWH } = React;

function WapiHero() {
  const [tick, setTick] = useStateWH(0);

  // Master clock — drives the comanda + bubbles cycle (~6s loop)
  useEffectWH(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 1000), 80);
    return () => clearInterval(id);
  }, []);

  // Comanda items — get added one by one over the cycle, then reset
  const comandaItems = [
    { qty: '2', name: 'Tacos al pastor', price: '$80' },
    { qty: '1', name: 'Quesadilla', price: '$65' },
    { qty: '1', name: 'Agua jamaica', price: '$35' },
    { qty: '', name: 'Sin cebolla', price: '', mod: true }
  ];
  // Cycle: 75 ticks total = 6s. Items appear at ticks 8, 22, 36, 50. Reset at 70.
  const cyclePos = tick % 75;
  const visibleCount = cyclePos < 8 ? 0 :
    cyclePos < 22 ? 1 :
    cyclePos < 36 ? 2 :
    cyclePos < 50 ? 3 :
    cyclePos < 70 ? 4 : 0;

  // Bubbles flying in — staggered, fade in/out
  const bubbleMessages = [
    { text: '¿Hacen entrega?', t: 0 },
    { text: '2 tacos al pastor', t: 18 },
    { text: 'Pago transferencia', t: 36 },
    { text: 'Av. Reforma 234', t: 54 }
  ];

  // Tilt cycle — Wapi looks at phone, then at viewer
  // 0–35: looks at phone (tilt right). 35–55: looks at viewer (centered).
  // 55–75: back to phone.
  const tiltAngle = cyclePos < 35 ? 4 :
    cyclePos < 55 ? -1 :
    4;

  return (
    <div style={{
      position: 'relative',
      width: 'min(560px, 90vw)',
      height: 480,
      margin: '0 auto 8px',
      pointerEvents: 'none',
      userSelect: 'none'
    }}>
      {/* Bubbles flying in from right */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        {bubbleMessages.map((b, i) => {
          const phase = (cyclePos - b.t + 75) % 75;
          const inPhase = phase < 22; // visible window
          const progress = phase / 22; // 0 → 1 across window
          const x = inPhase ? 100 - progress * 75 : 100; // % from left
          const y = inPhase ? 18 + Math.sin(progress * Math.PI) * -8 + i * 2 : 0;
          const opacity = inPhase ?
            (progress < 0.15 ? progress / 0.15 :
             progress > 0.75 ? (1 - progress) / 0.25 : 1) : 0;
          const scale = inPhase ? 0.85 + progress * 0.15 : 0.85;
          return (
            <div key={i} style={{
              position: 'absolute',
              left: `${x}%`,
              top: `${y}%`,
              transform: `translate(-50%, 0) scale(${scale})`,
              opacity,
              transition: 'opacity 0.2s ease',
              background: '#DCF8C6',
              border: '1px solid rgba(31,27,22,0.08)',
              borderRadius: 12,
              borderTopRightRadius: 2,
              padding: '8px 12px',
              fontSize: 13,
              fontFamily: 'var(--sans)',
              color: 'var(--ink)',
              boxShadow: '0 4px 10px -4px rgba(31,27,22,0.18)',
              whiteSpace: 'nowrap'
            }}>
              {b.text}
              <div style={{
                fontSize: 9, color: 'var(--ink-faint)', marginTop: 2,
                display: 'flex', alignItems: 'center', gap: 3, justifyContent: 'flex-end'
              }}>
                2:1{i} p.m. <span style={{ color: '#34B7F1' }}>✓✓</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* Glow behind Wapi */}
      <div aria-hidden style={{
        position: 'absolute',
        width: '70%', height: '60%',
        left: '15%', top: '25%',
        background: 'radial-gradient(closest-side, rgba(67,201,138,0.32), transparent 70%)',
        filter: 'blur(40px)',
        pointerEvents: 'none'
      }} />

      {/* Wapi character */}
      <div style={{
        position: 'absolute',
        left: '50%',
        bottom: 0,
        transform: `translateX(-50%) rotate(${tiltAngle}deg)`,
        transformOrigin: 'bottom center',
        transition: 'transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1)',
        animation: 'wapi-breathe 3.2s ease-in-out infinite',
        height: '92%',
        display: 'flex',
        alignItems: 'flex-end'
      }}>
        <img
          src="assets/wapi.svg"
          alt="Wapi"
          style={{
            height: '100%',
            width: 'auto',
            display: 'block'
          }}
        />

        {/* Phone overlay — positioned over Wapi's hands. Tweak top/left
            to align with the SVG's hand position. */}
        <div style={{
          position: 'absolute',
          // Position relative to Wapi's body — adjust visually
          left: '50%',
          top: '52%',
          transform: 'translate(-50%, 0) rotate(-6deg)',
          width: 124,
          height: 200,
          background: '#1F1B16',
          borderRadius: 18,
          padding: 6,
          boxShadow: '0 12px 30px -10px rgba(31,27,22,0.45), 0 0 0 1px rgba(31,27,22,0.6)'
        }}>
          {/* Phone screen — comanda in progress */}
          <div style={{
            width: '100%', height: '100%',
            background: '#FFFCF6',
            borderRadius: 12,
            overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
            fontFamily: 'var(--sans)'
          }}>
            {/* Tiny header */}
            <div style={{
              padding: '6px 8px 4px',
              borderBottom: '1px dashed rgba(31,27,22,0.18)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between'
            }}>
              <span style={{
                fontFamily: 'var(--mono)', fontSize: 7,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--mint-deep)'
              }}>Comanda</span>
              <span style={{
                width: 5, height: 5, borderRadius: '50%',
                background: 'var(--mint)',
                animation: 'wapi-pulse 1.2s ease-in-out infinite'
              }} />
            </div>

            {/* Items — appear one by one */}
            <div style={{
              flex: 1,
              padding: '6px 8px',
              fontSize: 8.5,
              lineHeight: 1.3,
              color: 'var(--ink)',
              display: 'flex', flexDirection: 'column', gap: 4
            }}>
              {comandaItems.slice(0, visibleCount).map((it, i) => (
                <div key={i} style={{
                  display: 'flex', justifyContent: 'space-between', gap: 4,
                  animation: 'wapi-slide-in 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) backwards',
                  fontStyle: it.mod ? 'italic' : 'normal',
                  color: it.mod ? 'var(--ink-faint)' : 'var(--ink)',
                  paddingLeft: it.mod ? 8 : 0
                }}>
                  <span style={{ display: 'flex', gap: 3 }}>
                    {it.qty && <strong style={{ fontWeight: 600 }}>{it.qty}×</strong>}
                    <span>{it.name}</span>
                  </span>
                  {it.price && <span style={{ color: 'var(--ink-soft)' }}>{it.price}</span>}
                </div>
              ))}
              {visibleCount < 4 && (
                <div style={{
                  display: 'flex', gap: 2, alignItems: 'center',
                  color: 'var(--ink-faint)', fontSize: 7
                }}>
                  <span style={{
                    width: 3, height: 3, borderRadius: '50%',
                    background: 'var(--ink-faint)',
                    animation: 'wapi-typing 1.2s ease-in-out infinite'
                  }} />
                  <span style={{
                    width: 3, height: 3, borderRadius: '50%',
                    background: 'var(--ink-faint)',
                    animation: 'wapi-typing 1.2s ease-in-out 0.2s infinite'
                  }} />
                  <span style={{
                    width: 3, height: 3, borderRadius: '50%',
                    background: 'var(--ink-faint)',
                    animation: 'wapi-typing 1.2s ease-in-out 0.4s infinite'
                  }} />
                </div>
              )}
            </div>

            {/* Total */}
            <div style={{
              padding: '4px 8px 6px',
              borderTop: '1px dashed rgba(31,27,22,0.18)',
              display: 'flex', justifyContent: 'space-between',
              fontSize: 8, fontWeight: 600
            }}>
              <span>Total</span>
              <span style={{ color: 'var(--mint-deep)' }}>
                ${visibleCount === 0 ? '0' : visibleCount === 1 ? '80' : visibleCount === 2 ? '145' : '180'}
              </span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes wapi-breathe {
          0%, 100% { transform: translateX(-50%) translateY(0) rotate(var(--tilt, 0deg)); }
          50% { transform: translateX(-50%) translateY(-4px) rotate(var(--tilt, 0deg)); }
        }
        @keyframes wapi-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.85); }
        }
        @keyframes wapi-typing {
          0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
          30% { opacity: 1; transform: translateY(-1px); }
        }
        @keyframes wapi-slide-in {
          from { opacity: 0; transform: translateY(4px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

window.WapiHero = WapiHero;