// ab-cta.jsx — Shared A/B reveal scene and end-card CTA

// A/B scene — two chrome-less mockups side-by-side with big metrics
// Props: start, end, metricA, metricB, lift, metricLabel, mockupA, mockupB, winner
function ABScene({ start, end, metricA, metricB, lift, metricLabel, renderA, renderB, footerText }) {
  const time = useTime();
  const localTime = time - start;
  const duration = end - start;
  if (time < start || time > end) return null;

  const progress = clamp(localTime / duration, 0, 1);

  // Mockups fly in from bottom in sequence
  const pA = clamp(localTime / 0.8, 0, 1);
  const pB = clamp((localTime - 0.2) / 0.8, 0, 1);
  // Metrics animate up
  const pNum = clamp((localTime - 0.6) / 1.2, 0, 1);
  // CI widget
  const pCI = clamp((localTime - 1.4) / 0.8, 0, 1);
  // Exit
  const exit = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const exitOp = 1 - Easing.easeInCubic(exit);

  const numA = metricA * Easing.easeOutCubic(pNum);
  const numB = metricB * Easing.easeOutCubic(pNum);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: exitOp }}>
      {/* Section label */}
      <div style={{
        position: 'absolute', left: 100, top: 80,
        fontFamily: DH.mono, fontSize: 14, letterSpacing: '0.14em',
        color: DH.moss600, textTransform: 'uppercase',
        opacity: clamp(localTime / 0.5, 0, 1),
      }}>
        § 05 · OPTIMIZE / A · B
      </div>
      <div style={{
        position: 'absolute', left: 100, top: 110,
        fontFamily: DH.display, fontWeight: 700, fontSize: 44,
        color: DH.ink, letterSpacing: '-0.02em',
        opacity: clamp(localTime / 0.6, 0, 1),
        transform: `translateY(${(1 - clamp(localTime / 0.6, 0, 1)) * 10}px)`,
      }}>
        We don't just ship. We <span style={{ fontFamily: DH.serif, fontStyle: 'italic', fontWeight: 400, color: DH.moss600 }}>tune</span>.
      </div>

      {/* Option A — left */}
      <div style={{
        position: 'absolute', left: 140, top: 240,
        width: 680, height: 440,
        opacity: pA * 0.92,
        transform: `translateY(${(1 - Easing.easeOutCubic(pA)) * 30}px)`,
        borderRadius: 20, overflow: 'hidden',
        boxShadow: '0 24px 60px -20px rgba(36, 69, 58, 0.2)',
        filter: 'saturate(0.85) brightness(0.98)',
      }}>
        {renderA}
      </div>
      {/* A label */}
      <div style={{
        position: 'absolute', left: 140, top: 200,
        display: 'flex', alignItems: 'center', gap: 10,
        opacity: pA,
        fontFamily: DH.mono, fontSize: 13, color: DH.ink, letterSpacing: '0.1em',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: DH.moss500 }}/>
        OPTION A · CONTROL
      </div>
      {/* A metric */}
      <div style={{
        position: 'absolute', left: 140, top: 700,
        opacity: pNum,
      }}>
        <div style={{
          fontFamily: DH.mono, fontSize: 11, color: DH.ink, opacity: 0.6,
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6,
        }}>
          {metricLabel}
        </div>
        <div style={{
          fontFamily: DH.display, fontWeight: 700, fontSize: 96,
          color: DH.ink, opacity: 0.55, lineHeight: 0.95,
          letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums',
        }}>
          {numA.toFixed(2)}%
        </div>
      </div>

      {/* Option B — right */}
      <div style={{
        position: 'absolute', right: 140, top: 240,
        width: 680, height: 440,
        opacity: pB,
        transform: `translateY(${(1 - Easing.easeOutCubic(pB)) * 30}px)`,
        borderRadius: 20, overflow: 'hidden',
        boxShadow: `0 24px 80px -10px rgba(111, 163, 122, 0.4), 0 4px 14px -4px rgba(36, 69, 58, 0.2)`,
      }}>
        {renderB}
      </div>
      {/* B label */}
      <div style={{
        position: 'absolute', right: 140, top: 200,
        display: 'flex', alignItems: 'center', gap: 10,
        opacity: pB, justifyContent: 'flex-end',
        fontFamily: DH.mono, fontSize: 13, color: DH.ink, letterSpacing: '0.1em',
      }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: DH.amber }}/>
        OPTION B · TREATMENT · WINNER
      </div>
      {/* B metric */}
      <div style={{
        position: 'absolute', right: 140, top: 700,
        opacity: pNum, textAlign: 'right',
      }}>
        <div style={{
          fontFamily: DH.mono, fontSize: 11, color: DH.moss600,
          letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 6,
        }}>
          {metricLabel} ↑
        </div>
        <div style={{
          fontFamily: DH.display, fontWeight: 700, fontSize: 128,
          color: DH.moss600, lineHeight: 0.95,
          letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums',
        }}>
          {numB.toFixed(2)}%
        </div>
      </div>

      {/* CI widget — bottom center */}
      <div style={{
        position: 'absolute', left: '50%', top: 900,
        transform: `translateX(-50%) translateY(${(1 - pCI) * 10}px)`,
        opacity: pCI,
        width: 540,
        background: 'rgba(255, 252, 245, 0.85)',
        border: `1px solid ${DH.rule}`,
        borderRadius: 10,
        padding: '14px 22px',
        display: 'flex', alignItems: 'center', gap: 18,
      }}>
        <div style={{
          fontFamily: DH.mono, fontSize: 11, color: DH.moss600,
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>
          95% CI
        </div>
        <div style={{ flex: 1, position: 'relative', height: 36 }}>
          {/* A bar */}
          <div style={{
            position: 'absolute', top: 6, height: 8,
            left: '18%', width: '28%',
            background: DH.moss500, opacity: 0.55,
            borderRadius: 4,
          }}/>
          {/* B bar */}
          <div style={{
            position: 'absolute', bottom: 6, height: 8,
            left: '40%', width: '36%',
            background: DH.amber,
            borderRadius: 4,
          }}/>
          {/* midline */}
          <div style={{
            position: 'absolute', left: 0, right: 0, top: '50%',
            height: 1, background: DH.rule,
          }}/>
        </div>
        <div style={{
          fontFamily: DH.body, fontSize: 12, color: DH.ink,
          whiteSpace: 'nowrap',
        }}>
          <span style={{ color: DH.moss600, fontWeight: 600 }}>↑ {lift}</span> {footerText}
        </div>
      </div>
    </div>
  );
}

// End-card CTA
function EndCard({ start, end, url = 'digitalheroes.co.in' }) {
  const time = useTime();
  const localTime = time - start;
  if (time < start) return null;

  const pIn = clamp(localTime / 0.9, 0, 1);
  const pSub = clamp((localTime - 0.4) / 0.9, 0, 1);
  const pDot = clamp((localTime - 0.8) / 0.5, 0, 1);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center',
      padding: 60,
    }}>
      <div style={{
        fontFamily: DH.mono, fontSize: 13, letterSpacing: '0.16em',
        color: DH.moss600, textTransform: 'uppercase',
        opacity: pIn, marginBottom: 22,
        transform: `translateY(${(1 - pIn) * 8}px)`,
      }}>
        § FIN · START YOUR LIFECYCLE
      </div>

      <div style={{
        fontFamily: DH.display, fontWeight: 700, fontSize: 128,
        color: DH.ink, textAlign: 'center',
        letterSpacing: '-0.035em', lineHeight: 1.0,
        opacity: pIn,
        transform: `translateY(${(1 - Easing.easeOutCubic(pIn)) * 24}px)`,
        maxWidth: 1400,
      }}>
        See how we'd <span style={{ fontFamily: DH.serif, fontStyle: 'italic', fontWeight: 400, color: DH.moss600 }}>ship</span> yours →
      </div>

      <div style={{
        marginTop: 64,
        display: 'flex', alignItems: 'center', gap: 16,
        opacity: pSub,
        transform: `translateY(${(1 - pSub) * 10}px)`,
      }}>
        {/* Live pulsing dot */}
        <div style={{
          width: 10, height: 10, borderRadius: 5,
          background: DH.moss500,
          boxShadow: `0 0 ${8 + Math.sin(time * 6) * 4}px ${DH.moss500}`,
          opacity: pDot * (0.6 + 0.4 * Math.sin(time * Math.PI * 2 * 1.2)),
        }}/>
        <img src="/assets/process-animations/assets/dh-wordmark.png" alt="digital.HEROES." style={{ height: 44 }}/>
        <div style={{
          fontFamily: DH.mono, fontSize: 14, color: DH.ink, opacity: 0.55,
          letterSpacing: '0.06em', marginLeft: 10,
          paddingLeft: 20, borderLeft: `1px solid ${DH.rule}`,
        }}>
          {url}
        </div>
      </div>
    </div>
  );
}

// Intro scene: cream fade, wordmark bottom-left, headline upper-left
function IntroScene({ start, end, headline, italicWord }) {
  const time = useTime();
  const localTime = time - start;
  if (time < start || time > end) return null;

  const duration = end - start;
  const pHead = clamp(localTime / 0.8, 0, 1);
  const pWord = clamp((localTime - 0.3) / 0.8, 0, 1);

  // Exit at end
  const exitT = clamp((localTime - (duration - 0.5)) / 0.5, 0, 1);
  const opacity = 1 - exitT;

  // Split headline around italic word
  const parts = headline.split(italicWord);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity }}>
      <div style={{
        position: 'absolute', left: 100, top: 420,
        maxWidth: 1100,
        opacity: pHead,
        transform: `translateY(${(1 - Easing.easeOutCubic(pHead)) * 20}px)`,
      }}>
        <div style={{
          fontFamily: DH.mono, fontSize: 14, letterSpacing: '0.16em',
          color: DH.moss600, textTransform: 'uppercase', marginBottom: 24,
        }}>
          § 00 · digital.HEROES lifecycle
        </div>
        <div style={{
          fontFamily: DH.display, fontWeight: 700, fontSize: 132,
          color: DH.ink, letterSpacing: '-0.035em', lineHeight: 1.0,
        }}>
          {parts[0]}
          <span style={{
            fontFamily: DH.serif, fontStyle: 'italic', fontWeight: 400,
            color: DH.moss600,
          }}>
            {italicWord}
          </span>
          {parts[1]}
        </div>
      </div>

      <div style={{
        position: 'absolute', left: 100, bottom: 80,
        opacity: pWord,
        transform: `translateY(${(1 - pWord) * 8}px)`,
      }}>
        <img src="/assets/process-animations/assets/dh-wordmark.png" alt="digital.HEROES." style={{ height: 40 }}/>
      </div>
    </div>
  );
}

Object.assign(window, { ABScene, EndCard, IntroScene });