// receptionist-portrait.jsx — AI Receptionist, portrait (1080×1920) edition
// Relies on globals from scenes.jsx + animations.jsx:
//   TERRA, SANS, MONO, HUD, Sprite, clamp, Easing

// ───────────────────────── Scene 1P: Ringing (portrait) ───────────────────────
function SceneRingingP({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const ringT = localTime % 1.0;
        const ringScale = 1 + Math.exp(-ringT * 4) * 0.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', flexDirection: 'column',
            alignItems: 'center', justifyContent: 'center',
            padding: '0 60px',
            gap: 80,
            opacity: op,
          }}>
            {/* Top: caller */}
            <div style={{
              textAlign: 'center',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
            }}>
              <div style={{
                fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                letterSpacing: '0.25em', marginBottom: 20, textTransform: 'uppercase',
              }}>
                INCOMING CALL
              </div>
              <div style={{
                fontFamily: SANS, fontSize: 84, fontWeight: 900,
                color: TERRA.fg, letterSpacing: '-0.03em', lineHeight: 1,
                textAlign: 'center',
              }}>
                +1 (314) 555<br/>0 1 8 4
              </div>
              <div style={{
                marginTop: 22, fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                letterSpacing: '0.15em',
              }}>
                ST. LOUIS · MO · 11:47 PM
              </div>
            </div>

            {/* Middle: ring rings + phone */}
            <div style={{ position: 'relative', width: 500, height: 500 }}>
              {[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: 200, height: 200, borderRadius: '50%',
                  background: TERRA.lime,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: `0 0 80px ${TERRA.lime}66`,
                }}>
                  <svg width="96" height="96" 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>

            {/* Bottom: OLD WAY / VOICEMAIL */}
            <div style={{
              textAlign: 'center',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
            }}>
              <div style={{
                fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                letterSpacing: '0.25em', marginBottom: 20, textTransform: 'uppercase',
              }}>
                OLD WAY
              </div>
              <div style={{
                fontFamily: SANS, fontSize: 150, fontWeight: 900,
                color: TERRA.rust, letterSpacing: '-0.05em', lineHeight: 1,
                textDecoration: 'line-through', textDecorationThickness: 6,
              }}>
                VOICEMAIL
              </div>
              <div style={{
                marginTop: 22, fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                letterSpacing: '0.15em',
              }}>
                15 CALLS LOST/DAY → $0
              </div>
            </div>

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

// ───────────────────────── Scene 2P: Call In Progress (portrait) ──────────────
function SceneCallInProgressP({ 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;

        const barCount = 40;
        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 60px',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
            opacity: op,
          }}>
            {/* Header row */}
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              marginBottom: 32, opacity: headerP, flexWrap: 'wrap', gap: 12,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                <div style={{
                  width: 14, height: 14, borderRadius: 7, background: TERRA.lime,
                  boxShadow: `0 0 20px ${TERRA.lime}`,
                  opacity: 0.6 + Math.sin(localTime * 6) * 0.4,
                }}/>
                <div style={{
                  fontFamily: MONO, fontSize: 16, color: TERRA.lime,
                  letterSpacing: '0.2em', textTransform: 'uppercase',
                }}>
                  LIVE — AI RECEPTIONIST
                </div>
              </div>
              <div style={{
                fontFamily: MONO, fontSize: 16, color: TERRA.dim, letterSpacing: '0.1em',
                fontVariantNumeric: 'tabular-nums',
              }}>
                {Math.floor(localTime * 10) / 10}s
              </div>
            </div>

            {/* Stacked: waveform block + transcript block */}
            <div style={{
              display: 'flex', flexDirection: 'column', gap: 40,
              borderTop: `1px solid ${TERRA.line}`,
              borderBottom: `1px solid ${TERRA.line}`,
              padding: '40px 0',
            }}>
              {/* Waveform */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
                <div style={{
                  fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                  letterSpacing: '0.2em',
                }}>
                  AUDIO STREAM · 16KHZ
                </div>
                <div style={{
                  display: 'flex', gap: 4, alignItems: 'center', height: 160,
                }}>
                  {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 * 150;
                    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 — 2 columns */}
                <div style={{
                  display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
                  gap: 12, marginTop: 12,
                }}>
                  {[
                    { 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: '16px 20px',
                    }}>
                      <div style={{
                        fontFamily: MONO, fontSize: 13, color: TERRA.dim,
                        letterSpacing: '0.15em', marginBottom: 8,
                      }}>
                        {s.l}
                      </div>
                      <div style={{
                        fontFamily: SANS, fontSize: 28, fontWeight: 800,
                        color: TERRA.fg, letterSpacing: '-0.01em',
                      }}>
                        {s.v}
                      </div>
                    </div>
                  ))}
                </div>
              </div>

              {/* Transcript */}
              <div style={{
                borderTop: `1px solid ${TERRA.line}`,
                paddingTop: 28,
                display: 'flex', flexDirection: 'column', gap: 18,
                overflow: 'hidden',
              }}>
                <div style={{
                  fontFamily: MONO, fontSize: 16, color: TERRA.dim,
                  letterSpacing: '0.2em', marginBottom: 4,
                }}>
                  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: 14,
                        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',
                      }}>
                        {m.text}
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

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

// ───────────────────────── Scene 3P: Booked (portrait) ────────────────────────
function SceneBookedP({ start, end }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const p1 = clamp(localTime / 0.5, 0, 1);
        const p2 = clamp((localTime - 0.5) / 0.5, 0, 1);
        const p3 = clamp((localTime - 1.2) / 0.6, 0, 1);
        const p4 = clamp((localTime - 2.0) / 0.6, 0, 1);
        const p5 = clamp((localTime - 2.8) / 0.5, 0, 1);
        const p6 = clamp((localTime - 3.6) / 0.5, 0, 1);
        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 60px', display: 'flex', flexDirection: 'column',
            justifyContent: 'center', alignItems: 'center',
            opacity: op,
          }}>
            {/* Header */}
            <div style={{
              display: 'flex', alignItems: 'center', gap: 16,
              marginBottom: 32, opacity: p1, alignSelf: 'flex-start',
            }}>
              <div style={{ width: 48, height: 2, background: TERRA.bg }}/>
              <div style={{
                fontFamily: MONO, fontSize: 16, color: TERRA.bg,
                letterSpacing: '0.2em', textTransform: 'uppercase',
              }}>
                CALL COMPLETE · 00:11 · BOOKED
              </div>
            </div>

            {/* Check icon */}
            <div style={{
              width: 140, height: 140, borderRadius: 70,
              background: TERRA.bg,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 32,
              transform: `scale(${0.6 + p2 * 0.4})`,
              opacity: p2,
            }}>
              <svg width="76" height="76" 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>

            {/* Headline */}
            <div style={{
              fontFamily: SANS, fontSize: 140, fontWeight: 900,
              color: TERRA.bg, letterSpacing: '-0.05em', lineHeight: 0.95,
              textAlign: 'center',
              clipPath: `inset(0 ${(1 - Easing.easeOutExpo(p3)) * 100}% 0 0)`,
            }}>
              LEAD<br/>CAPTURED.
            </div>

            {/* Subtitle */}
            <div style={{
              marginTop: 24, fontFamily: SANS, fontSize: 26, fontWeight: 500,
              color: TERRA.bg, opacity: p4 * 0.85, letterSpacing: '0.01em',
              maxWidth: 880, lineHeight: 1.4, textAlign: 'center',
            }}>
              Booked, confirmed, routed to your tech — in 11 seconds.
            </div>

            {/* Ticket — full width */}
            <div style={{
              marginTop: 40,
              background: TERRA.bg, color: TERRA.fg, padding: 36,
              opacity: p5, transform: `translateY(${(1 - p5) * 20}px)`,
              border: `2px solid ${TERRA.bg}`,
              width: '100%', maxWidth: 920,
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                paddingBottom: 16, borderBottom: `1px dashed ${TERRA.dim}`,
                marginBottom: 22,
              }}>
                <div style={{
                  fontFamily: MONO, fontSize: 15, color: TERRA.lime,
                  letterSpacing: '0.2em',
                }}>
                  WORK ORDER
                </div>
                <div style={{
                  fontFamily: MONO, fontSize: 15, 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',
                  alignItems: 'center',
                  padding: '14px 0',
                  borderBottom: i < 5 ? `1px solid ${TERRA.line}` : 'none',
                  gap: 16,
                }}>
                  <div style={{
                    fontFamily: MONO, fontSize: 15, color: TERRA.dim,
                    letterSpacing: '0.15em',
                  }}>
                    {r.k}
                  </div>
                  <div style={{
                    fontFamily: SANS, fontSize: 20, fontWeight: 600,
                    color: r.accent ? TERRA.lime : TERRA.fg, letterSpacing: '0.01em',
                    textAlign: 'right',
                  }}>
                    {r.v}
                  </div>
                </div>
              ))}
              <div style={{
                marginTop: 22, padding: '16px 0 0',
                borderTop: `1px dashed ${TERRA.dim}`,
                display: 'flex', justifyContent: 'space-between',
              }}>
                <div style={{
                  fontFamily: MONO, fontSize: 15, color: TERRA.dim,
                  letterSpacing: '0.15em',
                }}>
                  SMS SENT
                </div>
                <div style={{
                  fontFamily: MONO, fontSize: 15, color: TERRA.lime,
                  letterSpacing: '0.15em',
                }}>
                  ✓ 11:47 PM
                </div>
              </div>
            </div>

            {/* Bottom tagline */}
            <div style={{
              marginTop: 40, opacity: p6,
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              gap: 10, textAlign: 'center',
            }}>
              <div style={{
                fontFamily: SANS, fontSize: 46, fontWeight: 900,
                color: TERRA.bg, letterSpacing: '-0.03em',
              }}>
                YOUR FRONT DESK.<br/>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, { SceneRingingP, SceneCallInProgressP, SceneBookedP });
