// S1 — Beacon, the platform.
// We don't build one-off agents. Beacon is a modular, tool-based scaffold —
// orchestration, tools/MCP, grounding, evaluation, delivery already
// engineered — that we compose and fit to a bespoke workflow in weeks.
//
// The metaphor: the platform's proven modules stack into a rocket, ignite,
// and lift off — its tip becoming a beacon of light (the delivered insight).
// Left: the launch animation. Right: the modular parts + the payoff.

const { useState: bcUse, useEffect: bcEff } = React;
const { pitchC, pitchMono } = window;

// Modules stack bottom → top. The nose (delivery) becomes the beacon light.
const MODULES = [
  { key: 'orch',  label: 'Orchestration', color: pitchC.navy },
  { key: 'tools', label: 'Tools · MCP',   color: pitchC.sea },
  { key: 'ground',label: 'Grounding',     color: pitchC.moss },
  { key: 'eval',  label: 'Evaluation',    color: pitchC.orange },
];

const PARTS = [
  { icon: 'orch',   name: 'Orchestration', blurb: 'Multi-step agent control' },
  { icon: 'tools',  name: 'Tools · MCP',   blurb: 'Pluggable data & actions' },
  { icon: 'ground', name: 'Grounding',     blurb: 'Every claim traced to source' },
  { icon: 'eval',   name: 'Evaluation',    blurb: 'Quality gates & regression' },
  { icon: 'deliver',name: 'Delivery',      blurb: 'Branded, deterministic output' },
];

function injectBeaconKf() {
  if (document.getElementById('beacon-kf')) return;
  const s = document.createElement('style');
  s.id = 'beacon-kf';
  s.textContent = `
    @keyframes bc-flame {
      0%,100% { transform: scaleY(1)   scaleX(1);    opacity: 0.95; }
      50%     { transform: scaleY(0.7) scaleX(1.12); opacity: 0.75; }
    }
    @keyframes bc-beam {
      0%,100% { opacity: 0.55; transform: scaleX(0.92); }
      50%     { opacity: 0.9;  transform: scaleX(1.06); }
    }
    @keyframes bc-glow {
      0%,100% { box-shadow: 0 0 22px 6px rgba(255,102,58,0.55), 0 0 60px 18px rgba(127,51,153,0.30); }
      50%     { box-shadow: 0 0 34px 12px rgba(255,102,58,0.75), 0 0 84px 26px rgba(127,51,153,0.42); }
    }
    @keyframes bc-spark {
      0%   { transform: translateY(0) scale(1);   opacity: 0; }
      15%  { opacity: 0.9; }
      100% { transform: translateY(-150px) scale(0.4); opacity: 0; }
    }
    @keyframes bc-halo {
      0%,100% { opacity: 0.5;  transform: scale(1); }
      50%     { opacity: 0.85; transform: scale(1.08); }
    }
  `;
  document.head.appendChild(s);
}

function SlideBeacon() {
  const [stage, setStage] = bcUse(0);
  bcEff(() => {
    injectBeaconKf();
    const ts = [
      setTimeout(() => setStage(1), 250),   // modules assemble
      setTimeout(() => setStage(2), 1300),  // ignite + lift off
      setTimeout(() => setStage(3), 2300),  // beacon light on
      setTimeout(() => setStage(4), 2700),  // right-side parts
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div style={{
      flex: 1, minHeight: 0,
      display: 'grid',
      gridTemplateColumns: '0.92fr 1.08fr',
      gap: 30,
      marginTop: 22,
    }}>
      <LaunchScene stage={stage} />
      <ModularPanel stage={stage} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// LEFT — the launch animation
// ─────────────────────────────────────────────────────────────────────

function LaunchScene({ stage }) {
  const assembled = stage >= 1;
  const launched = stage >= 2;
  const beacon = stage >= 3;

  // rocket render size (the SVG hull is drawn in a 150×286 design space)
  const RW = 186;
  const RH = 354;
  const bandH = 38.5; // module band height in design units (body 96→250)

  return (
    <div style={{
      position: 'relative',
      borderRadius: 20,
      border: `1px solid ${pitchC.hair}`,
      background: 'radial-gradient(120% 90% at 50% 12%, #fbfbff 0%, #f5f5fb 55%, #eef0f7 100%)',
      overflow: 'hidden',
      minHeight: 0,
    }}>
      {/* Ambient halo behind the apex (the beacon's reach) */}
      <div style={{
        position: 'absolute', left: '50%', top: '6%',
        width: 360, height: 360, transform: 'translateX(-50%)',
        borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,102,58,0.18) 0%, rgba(127,51,153,0.10) 40%, rgba(255,255,255,0) 70%)',
        opacity: beacon ? 1 : 0,
        transition: 'opacity 700ms ease',
        animation: beacon ? 'bc-halo 3.2s ease-in-out infinite' : 'none',
        pointerEvents: 'none',
      }} />

      {/* Rising sparks (ambient, only while/after launch) */}
      {launched && [0,1,2,3,4,5].map((i) => (
        <span key={i} style={{
          position: 'absolute',
          left: `${42 + (i * 3.1) % 16}%`,
          bottom: '18%',
          width: 4, height: 4, borderRadius: '50%',
          background: i % 2 ? pitchC.orange : pitchC.purple,
          opacity: 0,
          animation: `bc-spark ${1.8 + (i % 3) * 0.5}s ease-in ${i * 0.32}s infinite`,
          pointerEvents: 'none',
        }} />
      ))}

      {/* Launch path trail */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 64,
        width: 2, height: launched ? '52%' : 0,
        transform: 'translateX(-50%)',
        background: 'linear-gradient(180deg, rgba(255,102,58,0) 0%, rgba(255,102,58,0.35) 60%, rgba(255,102,58,0.55) 100%)',
        transition: 'height 1100ms cubic-bezier(.3,.7,.3,1)',
        pointerEvents: 'none',
      }} />

      {/* Rocket group — assembles, then lifts */}
      <div style={{
        position: 'absolute', left: '50%', bottom: 56,
        transform: `translateX(-50%) translateY(${launched ? -132 : 0}px)`,
        transition: 'transform 1200ms cubic-bezier(.3,.6,.25,1)',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        width: RW,
      }}>
        {/* Beam — the beacon light projecting up from the nose tip */}
        <div style={{
          position: 'absolute', left: '50%', bottom: '100%',
          marginBottom: -12,
          transform: 'translateX(-50%)',
          width: 150, height: 300,
          clipPath: 'polygon(50% 100%, 16% 0%, 84% 0%)',
          background: 'linear-gradient(0deg, rgba(255,140,70,0.6) 0%, rgba(255,175,105,0.2) 45%, rgba(255,255,255,0) 100%)',
          opacity: beacon ? 1 : 0,
          transformOrigin: '50% 100%',
          transition: 'opacity 600ms ease',
          animation: beacon ? 'bc-beam 2.4s ease-in-out infinite' : 'none',
          pointerEvents: 'none',
        }} />

        {/* Rocket hull (SVG) with the module labels overlaid on the body */}
        <div style={{
          position: 'relative', width: RW, height: RH,
          opacity: assembled ? 1 : 0,
          transform: assembled ? 'translateY(0)' : 'translateY(-14px)',
          transition: 'opacity 600ms ease, transform 600ms ease',
          filter: 'drop-shadow(0 10px 18px rgba(0,0,0,0.10))',
        }}>
          <svg width={RW} height={RH} viewBox="0 0 150 286" style={{ display: 'block', overflow: 'visible' }}>
            <defs>
              <linearGradient id="bcNose" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#ff663a" />
                <stop offset="55%" stopColor="#7f3399" />
                <stop offset="100%" stopColor="#000099" />
              </linearGradient>
              <linearGradient id="bcNozzle" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#41414c" />
                <stop offset="100%" stopColor="#17171d" />
              </linearGradient>
              <linearGradient id="bcBody" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor="#f4f4f8" />
                <stop offset="22%" stopColor="#ffffff" />
                <stop offset="100%" stopColor="#ececf2" />
              </linearGradient>
            </defs>

            {/* Fins (drawn first so the body overlaps their roots) */}
            <path d="M36 200 L12 264 L27 264 L42 244 Z" fill="#000099" />
            <path d="M114 200 L138 264 L123 264 L108 244 Z" fill="#000a99" />

            {/* Engine nozzle */}
            <path d="M54 247 L96 247 L106 282 L44 282 Z" fill="url(#bcNozzle)" />
            <path d="M50 247 L100 247 L100 252 L50 252 Z" fill="#2a2a31" />

            {/* Fuselage — gently barreled, not a brick */}
            <path d="M34 94 C30 150 30 206 38 250 L112 250 C120 206 120 150 116 94 Z"
                  fill="url(#bcBody)" stroke="#cfcfd8" strokeWidth="1.3" />

            {/* Nose cone (ogive) — the beacon */}
            <path d="M34 96 C36 50 54 16 75 6 C96 16 114 50 116 96 Z" fill="url(#bcNose)" />
            <path d="M75 8 C66 24 61 52 61 94" fill="none" stroke="#ffffff" strokeWidth="1.4" strokeOpacity="0.45" strokeLinecap="round" />

            {/* Collar between nose and body */}
            <rect x="34" y="92" width="82" height="6" rx="3" fill="#d3d3da" />

            {/* Cylindrical sheen */}
            <ellipse cx="55" cy="170" rx="7" ry="62" fill="#ffffff" opacity="0.5" />

            {/* Module band dividers */}
            <line x1="40" y1="134.5" x2="110" y2="134.5" stroke="#e4e4ea" strokeWidth="1" />
            <line x1="39" y1="173"   x2="111" y2="173"   stroke="#e4e4ea" strokeWidth="1" />
            <line x1="38" y1="211.5" x2="112" y2="211.5" stroke="#e4e4ea" strokeWidth="1" />
          </svg>

          {/* Beacon orb at the nose tip */}
          <div style={{
            position: 'absolute', left: '50%', top: `${6 / 286 * 100}%`,
            transform: 'translate(-50%,-50%)',
            width: 16, height: 16, borderRadius: '50%',
            background: '#fff6ef',
            opacity: beacon ? 1 : 0,
            transition: 'opacity 400ms ease',
            animation: beacon ? 'bc-glow 2.2s ease-in-out infinite' : 'none',
          }} />

          {/* Module labels (overlay each body band) */}
          {MODULES.map((m, i) => (
            <div key={m.key} style={{
              position: 'absolute', left: 0, right: 0,
              top: `${(96 + i * bandH) / 286 * 100}%`,
              height: `${bandH / 286 * 100}%`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 7,
              opacity: assembled ? 1 : 0,
              transform: assembled ? 'translateX(0)' : `translateX(${i % 2 ? 30 : -30}px)`,
              transition: `opacity 480ms cubic-bezier(.2,.7,.2,1) ${i * 130}ms, transform 480ms cubic-bezier(.2,.7,.2,1) ${i * 130}ms`,
            }}>
              <span style={{ width: 3, height: 15, borderRadius: 3, background: m.color }} />
              <span style={{
                fontFamily: pitchMono, fontSize: 11, fontWeight: 700,
                letterSpacing: 0.2, color: pitchC.ink, whiteSpace: 'nowrap',
              }}>{m.label}</span>
            </div>
          ))}
        </div>

        {/* Flame from the nozzle */}
        <div style={{
          marginTop: -6,
          width: 46, height: 72,
          clipPath: 'polygon(50% 100%, 0% 0%, 100% 0%)',
          background: 'linear-gradient(180deg, #ffe07a 0%, #ff9b3a 42%, #ff5a2a 100%)',
          opacity: launched ? 1 : 0,
          transformOrigin: '50% 0%',
          transition: 'opacity 300ms ease',
          animation: launched ? 'bc-flame 0.18s ease-in-out infinite' : 'none',
          filter: 'drop-shadow(0 8px 12px rgba(255,90,42,0.45))',
        }} />
      </div>

      {/* Launch pad / ground line */}
      <div style={{
        position: 'absolute', left: '14%', right: '14%', bottom: 56,
        height: 2, background: pitchC.hair2,
        opacity: launched ? 0 : 1, transition: 'opacity 500ms ease',
      }} />
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 0, height: 56,
        background: pitchC.bgSoft,
        borderTop: `1px solid ${pitchC.hair}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <span style={{
          fontFamily: pitchMono, fontSize: 13, fontWeight: 700,
          letterSpacing: 2, textTransform: 'uppercase',
          color: beacon ? pitchC.orange : pitchC.muted2,
          transition: 'color 500ms ease',
        }}>
          {beacon ? 'Live' : launched ? 'Lift-off' : 'Composed'}
        </span>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// RIGHT — the modular parts + the payoff
// ─────────────────────────────────────────────────────────────────────

function ModularPanel({ stage }) {
  const show = stage >= 4;
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 16,
      minHeight: 0, justifyContent: 'center',
    }}>
      <div style={{
        fontFamily: pitchMono, fontSize: 14, fontWeight: 700,
        letterSpacing: 1.8, textTransform: 'uppercase', color: pitchC.navy,
      }}>Composed from proven parts</div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
        {PARTS.map((p, i) => (
          <div key={p.name} style={{
            display: 'flex', alignItems: 'center', gap: 16,
            padding: '14px 18px',
            background: '#fff',
            border: `1px solid ${pitchC.hair}`,
            borderRadius: 13,
            opacity: show ? 1 : 0,
            transform: show ? 'translateX(0)' : 'translateX(22px)',
            transition: `opacity 420ms cubic-bezier(.2,.7,.2,1) ${i * 70}ms, transform 420ms cubic-bezier(.2,.7,.2,1) ${i * 70}ms`,
          }}>
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 40, height: 40, borderRadius: 11, flexShrink: 0,
              background: pitchC.bgSoft, color: pitchC.navy,
            }}>
              <PartGlyph kind={p.icon} />
            </span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontSize: 19, fontWeight: 600, color: pitchC.ink,
                letterSpacing: -0.01, lineHeight: 1.1,
              }}>{p.name}</div>
              <div style={{ fontSize: 14.5, color: pitchC.muted, marginTop: 2 }}>{p.blurb}</div>
            </div>
          </div>
        ))}
      </div>

      {/* Payoff + connective to the next slide */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 16,
        marginTop: 4,
        fontSize: 21, color: pitchC.muted,
        opacity: show ? 1 : 0,
        transition: 'opacity 500ms ease 420ms',
      }}>
        <span style={{ width: 46, height: 2, background: 'var(--gradient-brand-h, linear-gradient(90deg,#ff663a,#000099))', flexShrink: 0 }} />
        <span>
          Fitted to a bespoke workflow in <strong style={{ color: pitchC.ink, fontWeight: 600 }}>weeks, not years</strong> — here's one for Basis Global.
        </span>
      </div>
    </div>
  );
}

function PartGlyph({ kind }) {
  const c = { width: 21, height: 21, viewBox: '0 0 24 24', fill: 'none', stroke: pitchC.navy, strokeWidth: 1.7, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'orch':    return <svg {...c}><circle cx="12" cy="5" r="2.4"/><circle cx="5" cy="18" r="2.4"/><circle cx="19" cy="18" r="2.4"/><path d="M12 7.4v4M12 11.4L6.4 16M12 11.4L17.6 16"/></svg>;
    case 'tools':   return <svg {...c}><path d="M8 6l-5 6 5 6M16 6l5 6-5 6"/><path d="M14 4l-4 16"/></svg>;
    case 'ground':  return <svg {...c}><path d="M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case 'eval':    return <svg {...c}><path d="M9 3h6M10 3v6l-5 9a1.5 1.5 0 001.3 2.2h11.4A1.5 1.5 0 0015 18l-5-9V3"/><path d="M7.5 14h9"/></svg>;
    case 'deliver': return <svg {...c}><rect x="3" y="5" width="18" height="12" rx="1.5"/><path d="M8 21h8M12 17v4M7 9h6M7 12h4"/></svg>;
    default: return null;
  }
}

window.SlideBeacon = SlideBeacon;