// Scenes 5 (security) and 6 (end card)

function Scene5Security() {
  const { localTime, duration } = useSprite();
  const exitOp = animate({ from: 1, to: 0, start: duration - 0.4, end: duration, ease: Easing.easeInCubic })(localTime);

  const pulse = (Math.sin(localTime * 2) + 1) / 2;

  const chips = [
    { icon: '🛡', t: 'EU Data Boundary', d: 'Al inference, backup og logs ligger i EU.' },
    { icon: '🔒', t: 'ACL per chunk', d: 'Kontrol helt ned til enkelt-dokument niveau.' },
    { icon: '👁', t: 'Fuld audit log', d: 'Hver læsning, chat og godkendelse.' },
    { icon: '🔑', t: 'Multi-provider auth', d: 'Entra SSO, Google eller magisk link.' },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: V.bg1,
      opacity: exitOp,
    }}>
      {/* left: big shield mark + heading */}
      <div style={{ position: 'absolute', left: 160, top: 260, width: 720 }}>
        <div style={{
          display: 'inline-block', marginBottom: 36,
          opacity: animate({ from: 0, to: 1, start: 0.1, end: 0.5 })(localTime),
          transform: `scale(${animate({ from: 0.85, to: 1, start: 0.1, end: 0.7, ease: Easing.easeOutBack })(localTime)})`,
          filter: `drop-shadow(0 0 ${20 + pulse * 16}px oklch(0.5 0.14 25 / 0.5))`,
        }}>
          <Shield size={120}/>
        </div>
        <div style={{
          fontFamily: V.font, fontSize: 15, fontWeight: 500,
          color: V.primaryStrong, textTransform: 'uppercase', letterSpacing: '0.1em',
          marginBottom: 14,
          opacity: animate({ from: 0, to: 1, start: 0.2, end: 0.6 })(localTime),
        }}>Sikkerhed</div>
        <div style={{
          fontFamily: V.font, fontSize: 60, fontWeight: 600,
          color: V.fg0, letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 22,
          opacity: animate({ from: 0, to: 1, start: 0.35, end: 0.8, ease: Easing.easeOutCubic })(localTime),
          transform: `translateY(${animate({ from: 20, to: 0, start: 0.35, end: 0.8, ease: Easing.easeOutCubic })(localTime)}px)`,
        }}>
          Bygget for kommuner<br/>og kritisk infrastruktur.
        </div>
        <div style={{
          display: 'flex', gap: 10, flexWrap: 'wrap',
          opacity: animate({ from: 0, to: 1, start: 0.8, end: 1.3 })(localTime),
        }}>
          {['ISO 27001', 'GDPR DPA', 'EU Data Boundary'].map(tag => (
            <div key={tag} style={{
              padding: '8px 14px', borderRadius: 999,
              background: V.bg2, border: `1px solid ${V.line}`,
              color: V.fg2, fontFamily: V.font, fontSize: 15, fontWeight: 500,
            }}>{tag}</div>
          ))}
        </div>
      </div>

      {/* right: 4 cards */}
      <div style={{
        position: 'absolute', right: 140, top: 220, width: 820,
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18,
      }}>
        {chips.map((c, i) => {
          const s = 0.6 + i * 0.18;
          const op = animate({ from: 0, to: 1, start: s, end: s + 0.4, ease: Easing.easeOutCubic })(localTime);
          const scale = animate({ from: 0.92, to: 1, start: s, end: s + 0.4, ease: Easing.easeOutBack })(localTime);
          return (
            <div key={c.t} style={{
              opacity: op, transform: `scale(${scale})`,
              background: V.bg0, border: `1px solid ${V.lineSoft}`,
              borderRadius: 14, padding: 30, minHeight: 180,
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 11,
                background: `color-mix(in oklch, ${V.primary} 28%, transparent)`,
                color: V.primaryStrong,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 24, marginBottom: 18,
              }}>{c.icon}</div>
              <div style={{ fontFamily: V.font, fontSize: 22, fontWeight: 600, color: V.fg0, marginBottom: 8 }}>{c.t}</div>
              <div style={{ fontFamily: V.font, fontSize: 16, color: V.fg2, lineHeight: 1.45 }}>{c.d}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ───────── SCENE 6 · End card (28 – 30) ─────────

function Scene6End() {
  const { localTime, duration } = useSprite();
  const logoOp = animate({ from: 0, to: 1, start: 0.1, end: 0.7, ease: Easing.easeOutCubic })(localTime);
  const logoScale = animate({ from: 0.88, to: 1, start: 0.1, end: 0.9, ease: Easing.easeOutBack })(localTime);
  const ctaOp = animate({ from: 0, to: 1, start: 0.7, end: 1.2 })(localTime);
  const ctaY = animate({ from: 16, to: 0, start: 0.7, end: 1.2, ease: Easing.easeOutCubic })(localTime);
  const urlOp = animate({ from: 0, to: 1, start: 1.1, end: 1.5 })(localTime);
  // Subtle float
  const float = Math.sin(localTime * 1.8) * 4;

  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 50%, ${V.bg1} 0%, ${V.bg0} 60%)`,
    }}>
      {/* ambient glow */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        width: 900, height: 900, marginLeft: -450, marginTop: -450,
        background: `radial-gradient(circle, color-mix(in oklch, ${V.primary} 22%, transparent) 0%, transparent 60%)`,
        opacity: 0.5 + Math.sin(localTime * 1.2) * 0.15,
      }}/>

      <div style={{
        position: 'absolute', left: '50%', top: '40%',
        transform: `translate(-50%, calc(-50% + ${float}px)) scale(${logoScale})`,
        opacity: logoOp,
      }}>
        <CMLogo size={96}/>
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: '58%',
        transform: `translate(-50%, ${ctaY}px)`,
        opacity: ctaOp,
        fontFamily: V.font, fontSize: 32, fontWeight: 500,
        color: V.fg1, letterSpacing: '-0.01em', textAlign: 'center',
      }}>
        AI der styrker jeres rådgivning.
      </div>

      <div style={{
        position: 'absolute', left: '50%', top: '72%',
        transform: 'translateX(-50%)',
        opacity: urlOp,
        display: 'flex', alignItems: 'center', gap: 20,
      }}>
        <div style={{
          padding: '18px 36px', background: V.primary, color: V.primaryFg,
          borderRadius: 10, fontFamily: V.font, fontSize: 22, fontWeight: 600,
          boxShadow: `0 8px 32px color-mix(in oklch, ${V.primary} 40%, transparent)`,
        }}>
          Tal med os →
        </div>
        <div style={{
          fontFamily: V.mono, fontSize: 20, color: V.fg2,
        }}>
          coremindvault.com
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Scene5Security, Scene6End });