// scenes-vendors.jsx — clean editorial, no numeric IDs

// ── Vendor logo scene — minimal, logo as hero ───────────────────────────────
function VendorLogoScene({ start, end, name, category, logo, idx, total }) {
  return (
    <Sprite start={start} end={end}>
      <SceneShell>
        <VendorLogoInner name={name} category={category} logo={logo} idx={idx} total={total}/>
      </SceneShell>
    </Sprite>
  );
}

function VendorLogoInner({ name, category, logo, idx, total }) {
  const { localTime } = useSprite();
  const logoT = clamp((localTime - 0.3) / 0.8, 0, 1);
  const logoE = Easing.easeOutCubic(logoT);
  const drift = Math.sin(localTime * 0.5) * 3;
  const catT = clamp((localTime - 0.5) / 0.7, 0, 1);
  const catE = Easing.easeOutCubic(catT);

  return (
    <>
      {/* Centered logo */}
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        transform: `translate(-50%, calc(-50% + ${drift}px)) scale(${0.94 + 0.06*logoE})`,
        opacity: logoE,
        width: 1300, height: 360,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <img src={logo} alt={name} style={{
          maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block',
        }}/>
      </div>

      {/* Bottom: category — text only, gray */}
      <div style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 140,
        textAlign: 'center',
        opacity: catE,
        transform: `translateY(${(1-catE)*10}px)`,
      }}>
        <div style={{
          fontFamily: AK.mono, fontSize: 14, fontWeight: 600,
          letterSpacing: '0.32em', textTransform: 'uppercase',
          color: AK.gray2,
        }}>{category}</div>
      </div>
    </>
  );
}

// ── Vendor bullets — clean, logo hero, no redundant labels ─────────────────
function VendorBulletsScene({ start, end, name, category, title, bullets, logo, idx, total }) {
  return (
    <Sprite start={start} end={end}>
      <SceneShell>
        <VendorBulletsInner name={name} category={category} title={title} bullets={bullets} logo={logo}/>
      </SceneShell>
    </Sprite>
  );
}

function VendorBulletsInner({ name, category, title, bullets, logo }) {
  const { localTime } = useSprite();
  const logoT = clamp((localTime - 0.1) / 0.7, 0, 1);
  const logoE = Easing.easeOutCubic(logoT);
  const drift = Math.sin(localTime * 0.4) * 2;

  return (
    <>
      {/* ─── LEFT column: text ────────────────────────────────────── */}

      {/* Title */}
      <MaskTitle
        x={140} y={250}
        text={title}
        size={62} weight={900}
        delay={0.3} perWord={0.06}
        maxWidth={1040} lineHeight={1.05}
      />

      {/* Red rule */}
      <div style={{
        position: 'absolute', left: 140, top: 560,
        width: 120, height: 4,
        background: AK.red,
        transform: `scaleX(${clamp((localTime - 0.7)/0.6, 0, 1)})`,
        transformOrigin: 'left',
      }}/>

      {/* Bullets */}
      <div style={{ position: 'absolute', left: 140, top: 620, width: 1040 }}>
        {bullets.map((b, i) => {
          const local = clamp((localTime - 1.0 - i * 0.18) / 0.6, 0, 1);
          const e = Easing.easeOutCubic(local);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'baseline', gap: 24,
              paddingBottom: 12, marginBottom: 12,
              borderBottom: `1px solid ${AK.rule}`,
              opacity: e,
              transform: `translateX(${(1-e)*16}px)`,
            }}>
              <div style={{
                width: 26, height: 4, background: AK.red,
                flexShrink: 0, transform: 'translateY(-8px)',
              }}/>
              <div style={{
                fontFamily: AK.display, fontWeight: 600,
                fontSize: 28, lineHeight: 1.3, color: AK.ink,
                letterSpacing: '-0.012em', flex: 1,
              }}>{b}</div>
            </div>
          );
        })}
      </div>

      {/* ─── RIGHT column: logo, top-aligned ────────────────────── */}
      <div style={{
        position: 'absolute',
        right: 140, top: 200,
        width: 520, height: 360,
        display: 'flex', alignItems: 'flex-start', justifyContent: 'center',
        opacity: logoE,
        transform: `translateY(${(1-logoE)*12 + drift}px)`,
      }}>
        {/* Soft red glow behind logo */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(50% 45% at 50% 40%, ${AK.red}1A 0%, transparent 70%)`,
          filter: 'blur(20px)',
          opacity: logoE,
        }}/>
        <img src={logo} alt={name} style={{
          maxWidth: '100%', maxHeight: '100%', objectFit: 'contain',
          objectPosition: 'top center',
          display: 'block', position: 'relative',
        }}/>
      </div>
    </>
  );
}

// ── Clean bullet list — no numbers, just red dash + bold text ──────────────
function CleanBullets({ items, x, y, delay = 0, perItem = 0.18 }) {
  const { localTime } = useSprite();
  return (
    <div style={{ position: 'absolute', left: x, top: y, right: 96 }}>
      {items.map((b, i) => {
        const local = clamp((localTime - delay - i * perItem) / 0.6, 0, 1);
        const e = Easing.easeOutCubic(local);
        return (
          <div key={i} style={{
            display: 'flex', alignItems: 'baseline', gap: 28,
            paddingBottom: 14, marginBottom: 14,
            borderBottom: `1px solid ${AK.rule}`,
            opacity: e,
            transform: `translateX(${(1-e)*16}px)`,
          }}>
            <div style={{
              width: 28, height: 4, background: AK.red,
              flexShrink: 0, transform: 'translateY(-9px)',
            }}/>
            <div style={{
              fontFamily: AK.display, fontWeight: 600,
              fontSize: 36, lineHeight: 1.3, color: AK.ink,
              letterSpacing: '-0.012em',
              flex: 1,
            }}>{b}</div>
          </div>
        );
      })}
    </div>
  );
}

// ── Service icon (geometric, ícone) ─────────────────────────────────────────
function ServiceIcon({ kind, size = 200, color = AK.red, secondary = AK.ink }) {
  const s = size;
  if (kind === 'awareness') {
    // Concentric circles + dot — radiating awareness
    return (
      <svg width={s} height={s} viewBox="0 0 200 200">
        <circle cx="100" cy="100" r="90" fill="none" stroke={secondary} strokeWidth="3"/>
        <circle cx="100" cy="100" r="60" fill="none" stroke={secondary} strokeWidth="3"/>
        <circle cx="100" cy="100" r="30" fill="none" stroke={color} strokeWidth="3"/>
        <circle cx="100" cy="100" r="10" fill={color}/>
      </svg>
    );
  }
  if (kind === 'tprm') {
    // Network nodes — third party links
    return (
      <svg width={s} height={s} viewBox="0 0 200 200">
        <line x1="100" y1="100" x2="40" y2="40" stroke={secondary} strokeWidth="3"/>
        <line x1="100" y1="100" x2="160" y2="40" stroke={secondary} strokeWidth="3"/>
        <line x1="100" y1="100" x2="40" y2="160" stroke={secondary} strokeWidth="3"/>
        <line x1="100" y1="100" x2="160" y2="160" stroke={secondary} strokeWidth="3"/>
        <circle cx="40" cy="40" r="14" fill={secondary}/>
        <circle cx="160" cy="40" r="14" fill={secondary}/>
        <circle cx="40" cy="160" r="14" fill={secondary}/>
        <circle cx="160" cy="160" r="14" fill={secondary}/>
        <circle cx="100" cy="100" r="22" fill={color}/>
      </svg>
    );
  }
  if (kind === 'assessment') {
    // Bar chart ascending — assessment / maturity
    return (
      <svg width={s} height={s} viewBox="0 0 200 200">
        <line x1="20" y1="170" x2="180" y2="170" stroke={secondary} strokeWidth="3"/>
        <rect x="40" y="120" width="22" height="50" fill={secondary}/>
        <rect x="76" y="90" width="22" height="80" fill={secondary}/>
        <rect x="112" y="60" width="22" height="110" fill={secondary}/>
        <rect x="148" y="30" width="22" height="140" fill={color}/>
      </svg>
    );
  }
  if (kind === 'resilience') {
    // Diamond / shield abstract — resilience
    return (
      <svg width={s} height={s} viewBox="0 0 200 200">
        <path d="M 100,15 L 175,100 L 100,185 L 25,100 Z" fill="none" stroke={secondary} strokeWidth="3"/>
        <path d="M 100,55 L 145,100 L 100,145 L 55,100 Z" fill="none" stroke={secondary} strokeWidth="3"/>
        <circle cx="100" cy="100" r="14" fill={color}/>
      </svg>
    );
  }
  return null;
}

// ── Service scene ───────────────────────────────────────────────────────────
function ServiceScene({ start, end, kind, title, bullets, idx, total }) {
  return (
    <Sprite start={start} end={end}>
      <SceneShell>
        <ServiceInner kind={kind} title={title} bullets={bullets}/>
      </SceneShell>
    </Sprite>
  );
}

function ServiceInner({ kind, title, bullets }) {
  const { localTime } = useSprite();
  const iconT = clamp(localTime / 0.7, 0, 1);
  const iconE = Easing.easeOutCubic(iconT);

  return (
    <>
      {/* Icon — large, left, centered vertically */}
      <div style={{
        position: 'absolute',
        left: 140, top: 380,
        opacity: iconE,
        transform: `scale(${0.85 + 0.15 * iconE})`,
        transformOrigin: 'center',
      }}>
        <ServiceIcon kind={kind} size={300}/>
      </div>

      {/* Title — top right block */}
      <MaskTitle
        x={620} y={260}
        text={title}
        size={84} weight={900}
        delay={0.4} perWord={0.07}
        maxWidth={1220} lineHeight={1.05}
      />

      {/* Bullets right column — bigger, distributed */}
      <div style={{ position: 'absolute', left: 620, top: 600, right: 96 }}>
        {bullets.map((b, i) => {
          const local = clamp((localTime - 1.3 - i * 0.18) / 0.6, 0, 1);
          const e = Easing.easeOutCubic(local);
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'baseline', gap: 28,
              paddingBottom: 14, marginBottom: 14,
              borderBottom: `1px solid ${AK.rule}`,
              opacity: e,
              transform: `translateX(${(1-e)*14}px)`,
            }}>
              <div style={{
                width: 24, height: 4, background: AK.red,
                flexShrink: 0, transform: 'translateY(-8px)',
              }}/>
              <div style={{
                fontFamily: AK.display, fontWeight: 600,
                fontSize: 30, lineHeight: 1.3, color: AK.ink,
                letterSpacing: '-0.01em', flex: 1,
              }}>{b}</div>
            </div>
          );
        })}
      </div>
    </>
  );
}

Object.assign(window, {
  VendorLogoScene, VendorBulletsScene, ServiceScene, ServiceIcon,
});