// receptionist.jsx — AI Receptionist hero video
// Visual: phone ringing → AI call waveform + live transcript → lead captured

function SceneRinging({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        // Ring pulse every 1s
        const ringT = localTime % 1.0;
        const ringScale = 1 + Math.exp(-ringT * 4) * 0.3;
        const ringOp = Math.exp(-ringT * 3);

        const exitP = clamp((localTime - (duration - 0.5)) / 0.45, 0, 1);
        const op = 1 - exitP;

        return (
          <div style={{
            position: 'absolute', inset: 0, background: TERRA.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            opacity: op,
          }}>
            {/* Left: caller */}
            <div style={{
              position: 'absolute', left: 140, top: '50%', transform: 'translateY(-50%)',
              textAlign: 'left',
            }}>
              <div style={{ fontFamily: MONO, fontSize: 12, color: TERRA.dim, letterSpacing: '0.2em', marginBottom: 16 }}>
                INCOMING CALL
              </div>
              <div style={{ fontFamily: SANS, fontSize: 64, fontWeight: 900, color: TERRA.fg, letterSpacing: '-0.03em', lineHeight: 1 }}>
                +1 (314) 555<br/>0 1 8 4
              </div>
              <div style={{ marginTop: 20, fontFamily: MONO, fontSize: 13, color: TERRA.dim, letterSpacing: '0.1em' }}>
                ST. LOUIS · MO · 11:47 PM
              </div>
            </div>

            {/* Center: ring rings */}
            <div style={{ position: 'relative', width: 400, height: 400 }}>
              {[0, 0.3, 0.6].map((offset, i) => {
                const t = (localTime - offset) % 1.2;
                if (t < 0) return null;
                const s = 0.4 + t * 1.4;
                const o = Math.max(0, 1 - t * 0.9);
                return (
                  <div key={i} style={{
                    position: 'absolute', inset: 0,
                    border: `2px solid ${TERRA.lime}`,
                    borderRadius: '50%',
                    transform: `scale(${s})`,
                    opacity: o,
                  }}/>
                );
              })}
              {/* Phone icon */}
              <div style={{
                position: 'absolute', inset: 0,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transform: `scale(${ringScale})`,
              }}>
                <div style={{
                  width: 160, height: 160, borderRadius: '50%',
                  background: TERRA.lime,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: `0 0 60px ${TERRA.lime}66`,
                }}>
                  <svg width="72" height="72" viewBox="0 0 24 24" fill="none">
                    <path d="M3 5a2 2 0 012-2h2l2 5-3 2a14 14 0 006 6l2-3 5 2v2a2 2 0 01-2 2A17 17 0 013 5z" fill={TERRA.bg}/>
                  </svg>
                </div>
              </div>
            </div>

            {/* Right: counter */}
            <div style={{
              position: 'absolute', right: 140, top: '50%', transform: 'translateY(-50%)',
              textAlign: 'right',
            }}>
              <div style={{ fontFamily: MONO, fontSize: 12, color: TERRA.dim, letterSpacing: '0.2em', marginBottom: 16 }}>
                OLD WAY
              </div>
              <div style={{
                fontFamily: SANS, fontSize: 140, fontWeight: 900,
                color: TERRA.rust, letterSpacing: '-0.05em', lineHeight: 1,
                textDecoration: 'line-through', textDecorationThickness: 4,
              }}>
                VOICEMAIL
              </div>
              <div style={{
                marginTop: 16, fontFamily: MONO, fontSize: 14, color: TERRA.dim,
                letterSpacing: '0.1em',
              }}>
                15 CALLS LOST/DAY → $0
              </div>
            </div>

            <HUD sceneLabel="INBOUND" sceneNum={1} totalScenes={3} />
          </div>
        );
      }}
    </Sprite>
  );
}

function SceneCallInProgress({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const transcript = [
          { at: 0.3,  who: 'AI', text: "Good evening, Prestige Home Services. How can I help?" },
          { at: 2.0,  who: 'HU', text: "Hey — my water heater just burst, I need someone tonight." },
          { at: 4.0,  who: 'AI', text: "Got it. I can book an emergency tech. What's the address?" },
          { at: 5.8,  who: 'HU', text: "4412 Maple Grove Ave, St. Louis." },
          { at: 7.3,  who: 'AI', text: "Logging that. Nearest available technician: Marcus — ETA 34 minutes." },
          { at: 9.2,  who: 'AI', text: "You'll get a text confirmation. Anything else?" },
        ];
        const headerP = clamp(localTime / 0.5, 0, 1);
        const exitP = clamp((localTime - (duration - 0.5)) / 0.45, 0, 1);
        const op = 1 - exitP;

        // Waveform
        const barCount = 48;
        const talking = transcript.some(m => localTime > m.at && localTime < m.at + 1.5);

        return (
          <div style={{
            position: 'absolute', inset: 0,
            background: TERRA.bg,
            padding: '0 120px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            opacity: op,
          }}>
            {/* Header row */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 40, opacity: headerP,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
                <div style={{
                  width: 12, height: 12, borderRadius: 6, background: TERRA.lime,
                  boxShadow: `0 0 20px ${TERRA.lime}`,
                  opacity: 0.6 + Math.sin(localTime * 6) * 0.4,
                }}/>
                <div style={{
                  fontFamily: MONO, fontSize: 13, color: TERRA.lime,
                  letterSpacing: '0.2em', textTransform: 'uppercase',
                }}>
                  LIVE — AI RECEPTIONIST ACTIVE
                </div>
              </div>
              <div style={{
                fontFamily: MONO, fontSize: 13, color: TERRA.dim, letterSpacing: '0.1em',
                fontVariantNumeric: 'tabular-nums',
              }}>
                CALL DURATION {Math.floor(localTime * 10) / 10}s
              </div>
            </div>

            {/* Two column: waveform + transcript */}
            <div style={{
              display: 'grid', gridTemplateColumns: '0.9fr 1.1fr',
              gap: 64, alignItems: 'stretch',
              borderTop: `1px solid ${TERRA.line}`,
              borderBottom: `1px solid ${TERRA.line}`,
              padding: '56px 0',
              minHeight: 560,
            }}>
              {/* Waveform */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
                <div style={{
                  fontFamily: MONO, fontSize: 14, color: TERRA.dim,
                  letterSpacing: '0.2em',
                }}>
                  AUDIO STREAM · 16KHZ
                </div>
                <div style={{
                  display: 'flex', gap: 4, alignItems: 'center', height: 200,
                }}>
                  {Array.from({ length: barCount }, (_, i) => {
                    const seed = Math.sin(i * 12.9898) * 43758.5453;
                    const base = (seed - Math.floor(seed));
                    const phase = localTime * 8 + i * 0.4;
                    const amp = talking ? (0.3 + base * 0.7) : 0.08;
                    const h = (0.3 + Math.abs(Math.sin(phase)) * 0.7) * amp * 180;
                    return (
                      <div key={i} style={{
                        flex: 1, height: Math.max(4, h),
                        background: talking ? TERRA.lime : TERRA.dim,
                        opacity: talking ? 1 : 0.3,
                      }}/>
                    );
                  })}
                </div>

                {/* Stats cards */}
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginTop: 'auto' }}>
                  {[
                    { l: 'RESPONSE TIME', v: '0.2s' },
                    { l: 'LANGUAGE', v: 'EN-US' },
                    { l: 'INTENT', v: 'BOOKING' },
                    { l: 'SENTIMENT', v: 'URGENT' },
                  ].map((s, i) => (
                    <div key={i} style={{
                      border: `1px solid ${TERRA.line}`,
                      padding: '18px 22px',
                    }}>
                      <div style={{ fontFamily: MONO, fontSize: 12, color: TERRA.dim, letterSpacing: '0.15em', marginBottom: 10 }}>
                        {s.l}
                      </div>
                      <div style={{ fontFamily: SANS, fontSize: 26, fontWeight: 800, color: TERRA.fg, letterSpacing: '-0.01em' }}>
                        {s.v}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Transcript */}
              <div style={{
                borderLeft: `1px solid ${TERRA.line}`,
                paddingLeft: 48,
                display: 'flex', flexDirection: 'column', gap: 20,
                overflow: 'hidden',
              }}>
                <div style={{
                  fontFamily: MONO, fontSize: 14, color: TERRA.dim,
                  letterSpacing: '0.2em', marginBottom: 8,
                }}>
                  LIVE TRANSCRIPT
                </div>
                {transcript.map((m, i) => {
                  const p = clamp((localTime - m.at) / 0.4, 0, 1);
                  if (p <= 0) return null;
                  const isAI = m.who === 'AI';
                  return (
                    <div key={i} style={{
                      opacity: p, transform: `translateY(${(1 - p) * 8}px)`,
                      display: 'flex', flexDirection: 'column', gap: 6,
                    }}>
                      <div style={{
                        fontFamily: MONO, fontSize: 13,
                        color: isAI ? TERRA.lime : TERRA.dim,
                        letterSpacing: '0.15em',
                      }}>
                        {isAI ? '● TERRA AI' : '○ CALLER'}
                      </div>
                      <div style={{
                        fontFamily: SANS, fontSize: 26, fontWeight: 500,
                        color: isAI ? TERRA.fg : TERRA.dim,
                        lineHeight: 1.35, letterSpacing: '-0.005em',
                        maxWidth: 620,
                      }}>
                        {m.text}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

            <HUD sceneLabel="LIVE CALL" sceneNum={2} totalScenes={3} />
          </div>
        );
      }}
    </Sprite>
  );
}

function SceneBooked({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const p1 = clamp(localTime / 0.5, 0, 1);        // header
        const p2 = clamp((localTime - 0.5) / 0.5, 0, 1); // big check
        const p3 = clamp((localTime - 1.2) / 0.6, 0, 1); // headline
        const p4 = clamp((localTime - 2.0) / 0.6, 0, 1); // subtitle
        const p5 = clamp((localTime - 2.8) / 0.5, 0, 1); // ticket
        const p6 = clamp((localTime - 3.6) / 0.5, 0, 1); // footer
        const exitP = clamp((localTime - (duration - 0.5)) / 0.45, 0, 1);
        const op = 1 - exitP;

        const checkDraw = Easing.easeOutExpo(p2);

        return (
          <div style={{
            position: 'absolute', inset: 0, background: TERRA.lime,
            padding: '0 140px', display: 'flex', flexDirection: 'column',
            justifyContent: 'center', opacity: op,
          }}>
            {/* Header */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 16,
              marginBottom: 56, opacity: p1,
            }}>
              <div style={{ width: 48, height: 2, background: TERRA.bg }}/>
              <div style={{
                fontFamily: MONO, fontSize: 14, color: TERRA.bg,
                letterSpacing: '0.2em', textTransform: 'uppercase',
              }}>
                CALL COMPLETE · 00:11 · OUTCOME → BOOKED
              </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
              {/* Left: message */}
              <div>
                <div style={{
                  width: 120, height: 120, borderRadius: 60,
                  background: TERRA.bg,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 40,
                  transform: `scale(${0.6 + p2 * 0.4})`,
                  opacity: p2,
                }}>
                  <svg width="64" height="64" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12l4 4L19 6" stroke={TERRA.lime} strokeWidth="3"
                      strokeLinecap="round" strokeLinejoin="round"
                      style={{
                        strokeDasharray: 30,
                        strokeDashoffset: 30 * (1 - checkDraw),
                      }}
                    />
                  </svg>
                </div>
                <div style={{
                  fontFamily: SANS, fontSize: 120, fontWeight: 900,
                  color: TERRA.bg, letterSpacing: '-0.05em', lineHeight: 0.95,
                  clipPath: `inset(0 ${(1 - Easing.easeOutExpo(p3)) * 100}% 0 0)`,
                }}>
                  LEAD<br/>CAPTURED.
                </div>
                <div style={{
                  marginTop: 24, fontFamily: SANS, fontSize: 22, fontWeight: 500,
                  color: TERRA.bg, opacity: p4 * 0.85, letterSpacing: '0.01em',
                  maxWidth: 520, lineHeight: 1.4,
                }}>
                  Booked, confirmed, routed to your tech — in 11 seconds.
                  While you were sleeping.
                </div>
              </div>

              {/* Right: booking ticket */}
              <div style={{
                background: TERRA.bg, color: TERRA.fg, padding: 40,
                opacity: p5, transform: `translateY(${(1 - p5) * 20}px)`,
                border: `2px solid ${TERRA.bg}`,
              }}>
                <div style={{
                  display: 'flex', justifyContent: 'space-between',
                  paddingBottom: 18, borderBottom: `1px dashed ${TERRA.dim}`,
                  marginBottom: 26,
                }}>
                  <div style={{ fontFamily: MONO, fontSize: 13, color: TERRA.lime, letterSpacing: '0.2em' }}>
                    WORK ORDER
                  </div>
                  <div style={{ fontFamily: MONO, fontSize: 13, color: TERRA.dim, letterSpacing: '0.1em' }}>
                    #WO-41829
                  </div>
                </div>
                {[
                  { k: 'CUSTOMER', v: 'J. Chen' },
                  { k: 'ISSUE', v: 'Water heater burst' },
                  { k: 'ADDRESS', v: '4412 Maple Grove Ave' },
                  { k: 'PRIORITY', v: 'EMERGENCY', accent: true },
                  { k: 'ASSIGNED', v: 'Marcus R. · Van 03' },
                  { k: 'ETA', v: '34 minutes' },
                ].map((r, i) => (
                  <div key={i} style={{
                    display: 'flex', justifyContent: 'space-between',
                    padding: '12px 0',
                    borderBottom: i < 5 ? `1px solid ${TERRA.line}` : 'none',
                  }}>
                    <div style={{ fontFamily: MONO, fontSize: 13, color: TERRA.dim, letterSpacing: '0.15em' }}>
                      {r.k}
                    </div>
                    <div style={{
                      fontFamily: SANS, fontSize: 17, fontWeight: 600,
                      color: r.accent ? TERRA.lime : TERRA.fg, letterSpacing: '0.01em',
                    }}>
                      {r.v}
                    </div>
                  </div>
                ))}
                <div style={{
                  marginTop: 26, padding: '16px 0 0',
                  borderTop: `1px dashed ${TERRA.dim}`,
                  display: 'flex', justifyContent: 'space-between',
                }}>
                  <div style={{ fontFamily: MONO, fontSize: 13, color: TERRA.dim, letterSpacing: '0.15em' }}>
                    SMS SENT
                  </div>
                  <div style={{ fontFamily: MONO, fontSize: 13, color: TERRA.lime, letterSpacing: '0.15em' }}>
                    ✓ 11:47 PM
                  </div>
                </div>
              </div>
            </div>

            {/* Bottom tagline */}
            <div style={{
              marginTop: 80, opacity: p6,
              display: 'flex', alignItems: 'baseline', gap: 24,
              flexWrap: 'wrap',
            }}>
              <div style={{
                fontFamily: SANS, fontSize: 56, fontWeight: 900,
                color: TERRA.bg, letterSpacing: '-0.03em',
              }}>
                YOUR FRONT DESK. UPGRADED.
              </div>
              <div style={{
                fontFamily: MONO, fontSize: 16, color: TERRA.bg,
                letterSpacing: '0.15em', opacity: 0.7,
              }}>
                — 24/7 · ZERO MISSED CALLS
              </div>
            </div>

            <HUD sceneLabel="OUTCOME" sceneNum={3} totalScenes={3} />
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneRinging, SceneCallInProgress, SceneBooked });