// NuriPass hero — printed QR sticker scan → phone centers → profile renders.
// 8s loop, 1280×720 canvas.
//
// Beats:
//   0.0–1.4  Rest. Printed NuriPass QR sticker on table. Phone hovers.
//   1.4–3.6  Scan. Red cone + sweeping laser emanate from phone's camera.
//   3.2–4.2  URL toast appears (getnuripass.com/p/jason-s).
//   3.8–5.2  Phone travels to center, scales up, screen wakes.
//   5.2–8.0  Jason Smith's profile cascades in; hold, then soft loop.

const NAVY   = '#0F1F3D';
const TEAL   = '#2FA4A9';
const PERI   = '#6FC3C7';
const ICE    = '#E8F5F5';
const ICE_HI = '#F4FAFA';
const RED    = '#D64545';
const AMBER  = '#F59E0B';
const GREEN  = '#1D9E75';

// ─── Decorative QR ─────────────────────────────────────────────────────────
function DecorativeQR({ size = 260 }) {
  const N = 29;
  const cells = React.useMemo(() => {
    const out = [];
    let h = 0; const seed = 'nuripass-hero-qr';
    for (let i = 0; i < seed.length; i++) h = (h*31 + seed.charCodeAt(i)) | 0;
    const rand = () => { h = (h*1103515245 + 12345) & 0x7fffffff; return h / 0x7fffffff; };
    for (let y = 0; y < N; y++) for (let x = 0; x < N; x++) {
      if (rand() < 0.48) out.push([x, y]);
    }
    return out;
  }, []);
  const finder = (fx, fy, i) => (
    <g key={`f${i}`}>
      <rect x={fx}   y={fy}   width="7" height="7" fill={NAVY} />
      <rect x={fx+1} y={fy+1} width="5" height="5" fill="#fff" />
      <rect x={fx+2} y={fy+2} width="3" height="3" fill={NAVY} />
    </g>
  );
  return (
    <svg viewBox={`0 0 ${N} ${N}`} width={size} height={size}
      style={{ display: 'block', shapeRendering: 'crispEdges' }}>
      <rect width={N} height={N} fill="#fff" />
      {cells.map(([x, y]) => <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" fill={NAVY} />)}
      {finder(0, 0, 1)}{finder(22, 0, 2)}{finder(0, 22, 3)}
    </svg>
  );
}

// ─── Scan target: printed QR sticker ───────────────────────────────────────
const TARGET = { cx: 520, cy: 400 }; // scan target center in 1280×720

function StickerTarget() {
  const t = useTime();
  const breathe = 1 + Math.sin(t * 0.9) * 0.004;
  const fade = interpolate([4.0, 5.0], [1, 0.15], Easing.easeInOutCubic)(t);

  return (
    <div style={{
      position: 'absolute',
      left: TARGET.cx - 160, top: TARGET.cy - 190,
      width: 320, height: 380,
      opacity: fade,
      transform: `rotate(-4deg) scale(${breathe})`,
      transformOrigin: 'center',
      background: '#fff',
      borderRadius: 18,
      boxShadow: '0 30px 60px rgba(15,31,61,.25), 0 6px 20px rgba(15,31,61,.12)',
      padding: 28,
      boxSizing: 'border-box',
      fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
    }}>
      <div style={{ textAlign: 'center', marginBottom: 14 }}>
        <span style={{
          color: TEAL, fontSize: 11, fontWeight: 800,
          letterSpacing: '.14em', textTransform: 'uppercase'
        }}>NuriPass</span>
      </div>
      <div style={{ width: 260, height: 260, margin: '0 auto', position: 'relative' }}>
        <DecorativeQR size={260} />
        <div style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          background: '#fff', border: `2px solid ${TEAL}`,
          borderRadius: 100, padding: '5px 14px',
          fontSize: 13, fontWeight: 800, color: TEAL,
          letterSpacing: '.03em', lineHeight: 1, whiteSpace: 'nowrap',
        }}>Jason S</div>
      </div>
      <div style={{ textAlign: 'center', marginTop: 12 }}>
        <div style={{ color: NAVY, fontSize: 13, fontWeight: 700 }}>Scan for allergy info</div>
      </div>
    </div>
  );
}

// Red scan cone emanating from phone camera → target.
// Plays during the scanning phase (1.4–3.6), in BOTH scan modes.
// Geometry: phone lens at PHONE_LENS (computed from phone p1), target at TARGET.
// Cone widens toward target. A sweeping red laser plane moves across the target.
const PHONE_LENS = { x: TARGET.cx + 430, y: TARGET.cy - 170 };

function Scanner() {
  return (
    <Sprite start={1.4} end={3.6}>
      {({ localTime, duration }) => {
        // Fade in 0–.4, hold, fade out last .3
        const inT  = clamp(localTime / 0.4, 0, 1);
        const outT = localTime > duration - 0.3 ? clamp((localTime - (duration - 0.3)) / 0.3, 0, 1) : 0;
        const coneOp = inT * (1 - outT) * 0.85;

        // Laser sweep: across the scan target, slow & deliberate.
        // Sweeps down (0-.5) then back up (.5-1), two full passes in 2.2s.
        const sweepT = clamp((localTime - 0.3) / 2.1, 0, 1);
        // bounce: 0→1→0
        const sweepBounce = sweepT < 0.5
          ? Easing.easeInOutCubic(sweepT * 2)
          : 1 - Easing.easeInOutCubic((sweepT - 0.5) * 2);

        // Detection pulse ripples at end
        const pulseT = clamp((localTime - 1.8) / 0.8, 0, 1);

        const sx = PHONE_LENS.x, sy = PHONE_LENS.y;        // source (phone lens)
        const tx = TARGET.cx,    ty = TARGET.cy - 10;      // target center
        // Perpendicular to source→target direction, for cone half-width
        const dx = tx - sx, dy = ty - sy;
        const len = Math.hypot(dx, dy) || 1;
        const nx = -dy / len, ny = dx / len;               // unit normal
        const halfW = 140;                                 // cone half-width at target

        // Cone polygon points: apex at source, base across target
        const ax = sx, ay = sy;
        const bx = tx + nx * halfW, by = ty + ny * halfW;
        const cx = tx - nx * halfW, cy = ty - ny * halfW;

        // Sweep line inside cone: interpolate between near-edge and far-edge
        // Position along source→target axis then perpendicular scan
        // We'll animate a thin red strip that moves across the target
        const sweepX = tx + nx * (halfW * (sweepBounce * 2 - 1));
        const sweepY = ty + ny * (halfW * (sweepBounce * 2 - 1));

        return (
          <svg viewBox="0 0 1280 720" width="1280" height="720"
            style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            <defs>
              {/* Red cone gradient — denser at apex, softer at base */}
              <radialGradient id="coneGrad"
                gradientUnits="userSpaceOnUse"
                fx={ax} fy={ay} cx={tx} cy={ty}
                r={len}>
                <stop offset="0"   stopColor="#FF3A3A" stopOpacity=".85"/>
                <stop offset=".2"  stopColor="#FF4848" stopOpacity=".55"/>
                <stop offset=".6"  stopColor="#F25555" stopOpacity=".28"/>
                <stop offset="1"   stopColor="#D64545" stopOpacity=".12"/>
              </radialGradient>
              {/* Laser line glow */}
              <filter id="laserGlow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="4"/>
              </filter>
              {/* Edge line (bright red rim of cone) */}
              <linearGradient id="coneEdge" x1={ax} y1={ay} x2={tx} y2={ty}
                gradientUnits="userSpaceOnUse">
                <stop offset="0"  stopColor="#FF2A2A" stopOpacity=".9"/>
                <stop offset="1"  stopColor="#FF4848" stopOpacity=".4"/>
              </linearGradient>
            </defs>

            <g opacity={coneOp}>
              {/* Cone body */}
              <polygon points={`${ax},${ay} ${bx},${by} ${cx},${cy}`}
                       fill="url(#coneGrad)"/>
              {/* Softer outer glow wash */}
              <polygon points={`${ax},${ay} ${bx},${by} ${cx},${cy}`}
                       fill="#FF4848" opacity=".08"
                       filter="url(#laserGlow)"/>
              {/* Cone edges — bright rim */}
              <line x1={ax} y1={ay} x2={bx} y2={by}
                    stroke="url(#coneEdge)" strokeWidth="1.5" opacity=".7"/>
              <line x1={ax} y1={ay} x2={cx} y2={cy}
                    stroke="url(#coneEdge)" strokeWidth="1.5" opacity=".7"/>

              {/* Sweeping laser plane at target — bright red line moving side-to-side */}
              <g>
                <line
                  x1={ax} y1={ay}
                  x2={sweepX} y2={sweepY}
                  stroke="#FF2828" strokeWidth="2.5" opacity=".85"
                  filter="url(#laserGlow)"/>
                <line
                  x1={ax} y1={ay}
                  x2={sweepX} y2={sweepY}
                  stroke="#FFD0D0" strokeWidth="1" opacity="1"/>
                {/* Dot where laser hits target */}
                <circle cx={sweepX} cy={sweepY} r="6"
                        fill="#FF2828" opacity=".9" filter="url(#laserGlow)"/>
                <circle cx={sweepX} cy={sweepY} r="3" fill="#fff"/>
              </g>

              {/* Detection pulse — expanding red ring at target when scan finishes */}
              {pulseT > 0 && pulseT < 1 && (
                <g>
                  <circle cx={tx} cy={ty}
                          r={40 + Easing.easeOutQuad(pulseT) * 80}
                          fill="none" stroke="#FF3A3A" strokeWidth="2.5"
                          opacity={(1 - pulseT) * 0.7}/>
                  <circle cx={tx} cy={ty}
                          r={20 + Easing.easeOutQuad(pulseT) * 60}
                          fill="none" stroke="#FF3A3A" strokeWidth="1.5"
                          opacity={(1 - pulseT) * 0.5}/>
                </g>
              )}
            </g>
          </svg>
        );
      }}
    </Sprite>
  );
}

// ─── URL toast ─────────────────────────────────────────────────────────────
function URLToast() {
  const url = 'getnuripass.com/p/jason-s';

  return (
    <Sprite start={3.2} end={4.2}>
      {({ localTime, duration }) => {
        const inT = clamp(localTime / 0.3, 0, 1);
        const outStart = duration - 0.3;
        const outT = localTime > outStart ? clamp((localTime - outStart) / 0.3, 0, 1) : 0;
        const y = (1 - Easing.easeOutBack(inT)) * 12 + outT * -6;
        const op = inT * (1 - outT);
        return (
          <div style={{
            position: 'absolute', left: TARGET.cx - 180, top: TARGET.cy - 240,
            transform: `translateY(${y}px)`, opacity: op,
            background: NAVY, color: '#fff',
            padding: '10px 16px 10px 14px',
            borderRadius: 12,
            fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
            fontSize: 13, fontWeight: 600,
            boxShadow: '0 12px 32px rgba(15,31,61,.35)',
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{
              width: 18, height: 18, borderRadius: '50%',
              background: TEAL, color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 800,
            }}>✓</span>
            <span style={{ color: PERI, fontSize: 11, fontWeight: 700, letterSpacing: '.08em' }}>FOUND</span>
            <span>{url}</span>
          </div>
        );
      }}
    </Sprite>
  );
}

// ─── Phone ─────────────────────────────────────────────────────────────────
// Phase 1 (0–3.4): hovers over scan target, tilted.
// Phase 2 (3.4–5.0): travels to screen center, scales up, rotates flat, screen wakes.
// Phase 3 (5.0+): held at center, profile content cascades in.
function Phone() {
  const t = useTime();

  // Phase timing — slower, more deliberate scan
  const travel = interpolate([3.8, 5.2], [0, 1], Easing.easeInOutCubic)(t);

  // Phase 1 position: further from target so the red scan cone is visible
  // (matches PHONE_LENS anchor: 430px right of target, 170px above)
  const p1 = { x: TARGET.cx + 430, y: TARGET.cy - 170, rotY: 22, rotZ: -4, scale: 0.78 };
  // Phase 2 position: centered on stage, facing viewer
  const p2 = { x: 880, y: 360, rotY: 0, rotZ: 0, scale: 1.05 };

  const bob = Math.sin(t * 1.6) * 3 * (1 - travel);
  const tapNudge = (() => {
    // tiny forward lean at start of scan (1.5–2.0)
    if (travel > 0.05) return { x: 0, y: 0 };
    const nT = clamp((t - 1.5) / 0.5, 0, 1);
    const punch = Math.sin(nT * Math.PI) * 8;
    return { x: -punch * 0.5, y: punch * 0.4 };
  })();

  const x = lerp(p1.x, p2.x, travel) + tapNudge.x;
  const y = lerp(p1.y, p2.y, travel) + tapNudge.y + bob;
  const rotY = lerp(p1.rotY, p2.rotY, travel);
  const rotZ = lerp(p1.rotZ, p2.rotZ, travel);
  const scale = lerp(p1.scale, p2.scale, travel);

  // Screen states
  const screenOn  = clamp((t - 4.6) / 0.4, 0, 1);  // wakes as it centers
  const contentT  = clamp((t - 5.3) / 0.4, 0, 1);  // profile appears

  const phoneW = 320, phoneH = 640;

  return (
    <div style={{
      position: 'absolute', left: 0, top: 0,
      transform: `translate(${x - phoneW/2}px, ${y - phoneH/2}px)`,
      perspective: 1400,
      width: phoneW, height: phoneH,
    }}>
      <div style={{
        width: '100%', height: '100%',
        transform: `rotateY(${rotY}deg) rotateZ(${rotZ}deg) scale(${scale})`,
        transformStyle: 'preserve-3d',
      }}>
        <PhoneBody>
          {/* Content layer */}
          <div style={{
            position: 'absolute', inset: 0,
            opacity: screenOn,
          }}>
            <PhoneScreen contentT={contentT} />
          </div>
          {/* Off-screen (black) layer */}
          <div style={{
            position: 'absolute', inset: 0,
            background: '#050505',
            opacity: 1 - screenOn,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            {/* Camera icon (pre-scan) */}
            <div style={{
              width: 68, height: 68, borderRadius: 18,
              background: 'rgba(111,195,199,.12)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: '1px solid rgba(111,195,199,.2)',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
                stroke={PERI} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 7h3l2-2h8l2 2h3v12H3z"/>
                <circle cx="12" cy="13" r="4"/>
              </svg>
            </div>
          </div>
        </PhoneBody>
      </div>
    </div>
  );
}

function lerp(a, b, t) { return a + (b - a) * t; }

function PhoneBody({ children }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: '#0A0A0A',
      borderRadius: 40,
      padding: 9,
      boxSizing: 'border-box',
      boxShadow: '0 40px 80px rgba(15,31,61,.45), 0 8px 24px rgba(15,31,61,.2), inset 0 0 0 2px rgba(255,255,255,.05)',
      position: 'relative',
    }}>
      <div style={{
        width: '100%', height: '100%',
        background: '#000',
        borderRadius: 32,
        overflow: 'hidden',
        position: 'relative',
      }}>
        <div style={{
          position: 'absolute',
          top: 10, left: '50%', transform: 'translateX(-50%)',
          width: 90, height: 24,
          background: '#000',
          borderRadius: 13,
          zIndex: 20,
        }}/>
        {children}
      </div>
    </div>
  );
}

// ─── Public profile (Jason Smith) — matches live site structure ───────────
function PhoneScreen({ contentT }) {
  const t = useTime();
  // Content timings after t=5.3
  const headerT  = clamp((t - 5.3) / 0.35, 0, 1);
  const allergyT = clamp((t - 5.75) / 0.5, 0, 1);
  const safeT    = clamp((t - 6.25) / 0.4, 0, 1);
  const callT    = clamp((t - 6.7)  / 0.4, 0, 1);

  const pulse = t > 6.8 ? 1 + Math.sin((t - 6.8) * 4.5) * 0.04 : 1;

  const stagger = (p) => ({
    opacity: p,
    transform: `translateY(${(1 - Easing.easeOutCubic(p)) * 10}px)`,
  });

  return (
    <div style={{
      width: '100%', height: '100%',
      background: ICE,
      fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* NAVY HEADER */}
      <div style={{
        background: NAVY, padding: '44px 18px 22px',
        ...stagger(headerT),
      }}>
        <div style={{
          display: 'flex', alignItems: 'center',
          justifyContent: 'space-between', marginBottom: 16,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <div style={{
              width: 20, height: 20, borderRadius: 5,
              background: NAVY, border: `1px solid ${PERI}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 10, fontWeight: 800, color: TEAL,
            }}>✓</div>
            <span style={{
              color: 'rgba(255,255,255,.55)', fontSize: 10, fontWeight: 800,
              letterSpacing: '.12em',
            }}>NURIPASS</span>
          </div>
          <div style={{
            background: 'rgba(255,255,255,.1)',
            borderRadius: 20, padding: '4px 10px',
            fontSize: 10, fontWeight: 700, color: '#fff',
          }}>🍽 Restaurant mode</div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* Photo portrait — Jason */}
          <div style={{
            width: 54, height: 54, borderRadius: '50%',
            overflow: 'hidden',
            border: `2px solid rgba(111,195,199,.35)`, flexShrink: 0,
            background: '#E5B896',
          }}>
            <img src="jason.jpg" alt="Jason Smith"
              style={{
                width: '100%', height: '100%',
                objectFit: 'cover',
                objectPosition: '38% 30%',
                display: 'block',
              }}/>
          </div>
          <div style={{ minWidth: 0 }}>
            <h1 style={{
              color: '#fff', fontSize: 20, fontWeight: 800,
              margin: '0 0 4px', letterSpacing: '-.3px',
            }}>Jason Smith</h1>
            <div style={{ display: 'flex', gap: 5, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{
                background: RED, color: '#fff',
                fontSize: 9, fontWeight: 800, padding: '3px 7px',
                borderRadius: 20, letterSpacing: '.04em',
                transform: `scale(${pulse})`, transformOrigin: 'center',
                display: 'inline-block',
              }}>⚠ SEVERE</span>
              <span style={{ color: 'rgba(255,255,255,.5)', fontSize: 10 }}>
                5 allergies on file
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* BODY */}
      <div style={{ padding: '12px 12px 0' }}>
        {/* Allergies */}
        <div style={{
          background: '#fff', borderRadius: 16, padding: 14,
          marginBottom: 9, boxShadow: '0 2px 8px rgba(15,31,61,.07)',
          ...stagger(allergyT),
        }}>
          <p style={{
            fontSize: 10, fontWeight: 800, color: RED,
            letterSpacing: '.1em', textTransform: 'uppercase',
            margin: '0 0 9px',
          }}>⚠ Allergies</p>
          {[
            { name: 'Peanuts',   sev: 'SEVERE',   note: 'Epinephrine', red: true  },
            { name: 'Eggs',      sev: 'SEVERE',   note: 'Epinephrine', red: true  },
            { name: 'Fish',      sev: 'MODERATE', note: null,          red: false },
            { name: 'Shellfish', sev: 'MODERATE', note: null,          red: false },
          ].map((a, i) => (
            <div key={a.name} style={{
              padding: '9px 11px',
              background: a.red ? '#FFE8E8' : '#FFF3E0',
              borderRadius: 9,
              border: `2px solid ${a.red ? RED : '#FFD49E'}`,
              marginBottom: 6,
              display: 'flex', alignItems: 'center',
              justifyContent: 'space-between',
            }}>
              <div>
                <span style={{ color: NAVY, fontWeight: 800, fontSize: 14, letterSpacing: '-.2px' }}>
                  {a.name}
                </span>
                {a.note && (
                  <div style={{ fontSize: 9, fontWeight: 700, color: RED, marginTop: 1 }}>
                    {a.note} required
                  </div>
                )}
              </div>
              <span style={{
                fontSize: 9, fontWeight: 800,
                color: a.red ? '#8B1A1A' : '#7A3B00',
                letterSpacing: '.08em',
                background: 'rgba(255,255,255,.65)',
                padding: '3px 7px', borderRadius: 20,
              }}>{a.sev}</span>
            </div>
          ))}
        </div>

        {/* Safe to eat */}
        <div style={{
          background: '#fff', borderRadius: 16, padding: 12,
          marginBottom: 9, boxShadow: '0 2px 8px rgba(15,31,61,.07)',
          ...stagger(safeT),
        }}>
          <p style={{
            fontSize: 10, fontWeight: 800, color: '#0F6E56',
            letterSpacing: '.1em', textTransform: 'uppercase',
            margin: '0 0 7px',
          }}>✓ Safe to eat</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            {['SunButter', 'Oat milk', 'Sunflower seeds', 'Rice'].map(s => (
              <span key={s} style={{
                background: '#fff', border: '1.5px solid #9FE1CB',
                borderRadius: 20, padding: '3px 9px',
                fontSize: 10, fontWeight: 700, color: '#085041',
                display: 'inline-flex', alignItems: 'center', gap: 3,
              }}>
                <span style={{ color: GREEN }}>✓</span>{s}
              </span>
            ))}
          </div>
        </div>

        {/* Call CTA */}
        <div style={{
          background: RED, color: '#fff',
          borderRadius: 13, padding: '12px',
          textAlign: 'center', fontSize: 13, fontWeight: 800,
          boxShadow: '0 4px 12px rgba(214,69,69,.35)',
          ...stagger(callT),
        }}>⚡ Call Jane Smith (Mother)</div>
      </div>
    </div>
  );
}

// ─── Beat narration (left column) ─────────────────────────────────────────
function BeatLabels() {
  const t = useTime();
  const beats = [
    { start: 0.0, end: 1.4, label: '01 · Printed QR sticker' },
    { start: 1.4, end: 3.2, label: '02 · Any phone scans' },
    { start: 3.2, end: 5.2, label: '03 · Instantly loads' },
    { start: 5.2, end: 8.0, label: '04 · Full allergy profile' },
  ];
  const active = beats.find(b => t >= b.start && t < b.end) || beats[3];

  return (
    <div style={{
      position: 'absolute', left: 72, top: 80,
      fontFamily: "'Plus Jakarta Sans', system-ui, sans-serif",
      width: 320,
    }}>
      <div style={{
        color: TEAL, fontSize: 11, fontWeight: 800,
        letterSpacing: '.16em', textTransform: 'uppercase',
        marginBottom: 12,
      }}>How NuriPass works</div>
      <div style={{
        color: NAVY, fontSize: 32, fontWeight: 800,
        letterSpacing: '-.6px', lineHeight: 1.1,
        minHeight: 80,
      }}>{active.label}</div>
      <div style={{ display: 'flex', gap: 6, marginTop: 20 }}>
        {beats.map((b, i) => (
          <div key={i} style={{
            width: 36, height: 3, borderRadius: 2,
            background: t >= b.start ? TEAL : 'rgba(15,31,61,.15)',
            transition: 'background .2s',
          }}/>
        ))}
      </div>
    </div>
  );
}

// ─── Background ────────────────────────────────────────────────────────────
function Bg() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 65% 45%, #1a3a5c 0%, #0F1F3D 55%, #0a1628 100%)`,
    }}/>
  );
}

function Scene() {
  return (
    <>
      <Bg />
      <StickerTarget />
      <Scanner />
      <URLToast />
      <Phone />
    </>
  );
}

function Hero() {
  return (
    <Stage width={1280} height={720} duration={8.0} background="#fff"
      persistKey="np-hero">
      <Scene />
    </Stage>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Hero />);