// light_chrome.jsx — shared light-canvas chrome for product animations.

const LC_BG = '#FAFAFB';
const LC_INK = '#16161F';
const LC_INK_SOFT = '#6B6878';
const LC_INK_MUTED = '#9B98A8';
const LC_LINE = '#E8E6EE';
const LC_PURPLE = '#7C3AED';
const LC_PURPLE_SOFT = '#F4EEFF';
const LC_PURPLE_DARK = '#5B21B6';
const LC_GREEN = '#10B981';
const LC_ORANGE = '#F59E0B';
const LC_BLUE = '#3B82F6';
const LC_RED = '#EF4444';

// ── Light canvas background: warm near-white + soft purple aurora ───────
function LCBackground() {
  const t = useTime();
  const drift1 = Math.sin(t * 0.2) * 30;
  const drift2 = Math.cos(t * 0.15) * 40;
  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, #FAFAFB 0%, #F4F3F8 100%)`,
      }}/>
      {/* purple aurora top right */}
      <div style={{
        position: 'absolute',
        right: `${-10 + drift1 * 0.15}%`, top: `${-20 + drift2 * 0.1}%`,
        width: 1100, height: 900,
        background: 'radial-gradient(ellipse at center, rgba(124,58,237,0.12) 0%, rgba(124,58,237,0) 60%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
      }}/>
      {/* warm peach bottom-left */}
      <div style={{
        position: 'absolute',
        left: `${-15 + drift2 * 0.15}%`, bottom: `${-25 + drift1 * 0.1}%`,
        width: 1000, height: 800,
        background: 'radial-gradient(ellipse at center, rgba(245,158,11,0.07) 0%, rgba(245,158,11,0) 60%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
      }}/>
      {/* subtle grid */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(22,22,31,0.05) 1px, transparent 0)',
        backgroundSize: '40px 40px',
        pointerEvents: 'none',
        maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 0%, transparent 80%)',
      }}/>
    </>
  );
}

// ── Editorial headline (eyebrow + line 1 + line 2 italic accent) ─────────
function LCHeadline({ eyebrow, line1, accentWord, line1After, line2, start = 0, wordStart = 0.5, supportLine }) {
  const t = useTime();

  const eyebrowT = Easing.easeOutCubic(clamp((t - start - 0.1) / 0.7, 0, 1));

  // Line 1 reveals as one mask wipe
  const l1T = Easing.easeOutCubic(clamp((t - start - wordStart) / 0.6, 0, 1));
  // Accent word delayed
  const accT = Easing.easeOutCubic(clamp((t - start - wordStart - 0.2) / 0.6, 0, 1));
  // Line 2 tail
  const l2T = Easing.easeOutCubic(clamp((t - start - wordStart - 0.35) / 0.6, 0, 1));

  const supportT = Easing.easeOutCubic(clamp((t - start - 1.6) / 0.9, 0, 1));

  return (
    <div style={{ position: 'absolute', left: 100, top: 100, width: 1720 }}>
      {/* eyebrow */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 18,
        opacity: eyebrowT,
        transform: `translateY(${(1 - eyebrowT) * 10}px)`,
      }}>
        <div style={{
          width: 48 * eyebrowT, height: 1,
          background: LC_PURPLE,
        }}/>
        <div style={{
          fontFamily: 'Gilroy, sans-serif',
          fontSize: 14, fontWeight: 500,
          color: LC_PURPLE,
          letterSpacing: `${0.3 + (1 - eyebrowT) * 0.2}em`,
          textTransform: 'uppercase',
        }}>
          {eyebrow}
        </div>
      </div>

      {/* Headline */}
      <div style={{
        marginTop: 22,
        fontFamily: 'Gilroy, sans-serif',
        fontSize: 96, fontWeight: 700,
        color: LC_INK,
        letterSpacing: '-0.035em',
        lineHeight: 1.04,
      }}>
        {/* Line 1 */}
        <div>
          <span style={{
            display: 'inline-block',
            verticalAlign: 'bottom',
            clipPath: l1T >= 1 ? 'none' : `inset(-0.3em -0.3em ${(1 - l1T) * 100 - 20}% -0.3em)`,
            paddingBottom: '0.16em',
          }}>
            <span style={{
              display: 'inline-block',
              transform: `translateY(${(1 - l1T) * 100}%)`,
            }}>
              {line1}
            </span>
          </span>
          {accentWord && (
            <>
              <span>&nbsp;</span>
              <span style={{
                display: 'inline-block',
                verticalAlign: 'bottom',
                clipPath: accT >= 1 ? 'none' : `inset(-0.3em -0.3em ${(1 - accT) * 100 - 20}% -0.3em)`,
                paddingBottom: '0.16em',
              }}>
                <span style={{
                  display: 'inline-block',
                  transform: `translateY(${(1 - accT) * 100}%)`,
                  fontStyle: 'italic',
                  color: LC_PURPLE,
                }}>
                  {accentWord}
                </span>
              </span>
            </>
          )}
          {line1After && (
            <>
              <span>&nbsp;</span>
              <span style={{
                display: 'inline-block',
                verticalAlign: 'bottom',
                clipPath: l2T >= 1 ? 'none' : `inset(-0.3em -0.3em ${(1 - l2T) * 100 - 20}% -0.3em)`,
                paddingBottom: '0.16em',
              }}>
                <span style={{
                  display: 'inline-block',
                  transform: `translateY(${(1 - l2T) * 100}%)`,
                }}>
                  {line1After}
                </span>
              </span>
            </>
          )}
        </div>
        {/* Line 2 if present */}
        {line2 && (
          <div>
            <span style={{
              display: 'inline-block',
              verticalAlign: 'bottom',
              clipPath: l2T >= 1 ? 'none' : `inset(-0.3em -0.3em ${(1 - l2T) * 100 - 20}% -0.3em)`,
              paddingBottom: '0.16em',
            }}>
              <span style={{
                display: 'inline-block',
                transform: `translateY(${(1 - l2T) * 100}%)`,
              }}>
                {line2}
              </span>
            </span>
          </div>
        )}
      </div>

      {/* support line */}
      {supportLine && (
        <div style={{
          marginTop: 28,
          display: 'flex',
          alignItems: 'baseline',
          gap: 24,
          opacity: supportT,
          transform: `translateY(${(1 - supportT) * 10}px)`,
        }}>
          <div style={{
            width: 40 * supportT, height: 1,
            background: LC_INK_MUTED,
            opacity: 0.5,
          }}/>
          <div style={{
            fontFamily: 'Gilroy, sans-serif',
            fontSize: 18, fontWeight: 400,
            color: LC_INK_SOFT,
            maxWidth: 640,
            lineHeight: 1.45,
          }}>
            {supportLine}
          </div>
        </div>
      )}
    </div>
  );
}

// ── Footer brand mark + meta ────────────────────────────────────────────
function LCFooter({ meta }) {
  const t = useTime();
  const footerT = Easing.easeOutCubic(clamp((t - 6.5) / 1.2, 0, 1));

  return (
    <>
      <div style={{
        position: 'absolute', left: 100, bottom: 60,
        display: 'flex', alignItems: 'center', gap: 20,
        opacity: footerT,
        transform: `translateY(${(1 - footerT) * 12}px)`,
      }}>
        <img
          src="assets/TTP-logo-landscape-dark.svg"
          alt="The Talent People"
          style={{
            height: 38,
            width: 'auto',
            display: 'block',
          }}
        />
        <div style={{
          width: 1, height: 18,
          background: LC_LINE,
        }}/>
        <div style={{
          fontFamily: 'Gilroy, sans-serif',
          fontSize: 11, fontWeight: 500,
          color: LC_INK_MUTED,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
        }}>
          TalentScreen
        </div>
      </div>

      {meta && (
        <div style={{
          position: 'absolute', right: 100, bottom: 60,
          display: 'flex', alignItems: 'center', gap: 10,
          opacity: footerT,
          transform: `translateY(${(1 - footerT) * 12}px)`,
          fontFamily: 'Gilroy, sans-serif',
          fontSize: 11, fontWeight: 500,
          color: LC_INK_MUTED,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
        }}>
          {meta}
        </div>
      )}
    </>
  );
}

// ── Cursor: a subtle dot + ring pointer with click pulse ───────────────
// Path is a list of keyframes [{t, x, y, click?: true}]; interpolates between them.
function LCCursor({ path }) {
  const t = useTime();

  // find current segment
  if (!path || path.length === 0) return null;
  if (t < path[0].t) return null;
  if (t > path[path.length - 1].t + 0.5) return null;

  let x = path[0].x, y = path[0].y, clicking = false, clickTime = -1;
  for (let i = 0; i < path.length - 1; i++) {
    const a = path[i], b = path[i + 1];
    if (t >= a.t && t <= b.t) {
      const local = (t - a.t) / (b.t - a.t);
      const eased = Easing.easeInOutCubic(local);
      x = a.x + (b.x - a.x) * eased;
      y = a.y + (b.y - a.y) * eased;
    }
    if (a.click && t >= a.t && t < a.t + 0.6) {
      clicking = true;
      clickTime = t - a.t;
      x = a.x; y = a.y;
    }
  }
  if (t >= path[path.length - 1].t) {
    const last = path[path.length - 1];
    x = last.x; y = last.y;
    if (last.click && t < last.t + 0.6) {
      clicking = true;
      clickTime = t - last.t;
    }
  }

  // click ring animation
  const ringScale = clicking ? 1 + Easing.easeOutCubic(clamp(clickTime / 0.5, 0, 1)) * 2.5 : 1;
  const ringOpacity = clicking ? 1 - Easing.easeOutCubic(clamp(clickTime / 0.5, 0, 1)) : 0;
  const dotScale = clicking ? (clickTime < 0.12 ? 0.7 : 1) : 1;

  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      pointerEvents: 'none',
      zIndex: 10,
    }}>
      {/* Click ripple */}
      {clicking && (
        <div style={{
          position: 'absolute',
          left: -24, top: -24,
          width: 48, height: 48,
          borderRadius: '50%',
          border: `2px solid ${LC_PURPLE}`,
          transform: `scale(${ringScale})`,
          opacity: ringOpacity,
        }}/>
      )}
      {/* Outer ring */}
      <div style={{
        position: 'absolute',
        left: -14, top: -14,
        width: 28, height: 28,
        borderRadius: '50%',
        border: `1.5px solid ${LC_INK}`,
        background: 'rgba(255,255,255,0.6)',
        backdropFilter: 'blur(4px)',
        transform: `scale(${dotScale})`,
        boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
      }}/>
      {/* Inner dot */}
      <div style={{
        position: 'absolute',
        left: -3, top: -3,
        width: 6, height: 6,
        borderRadius: '50%',
        background: LC_INK,
      }}/>
    </div>
  );
}

// ── Intro card: full-screen hero that plays BEFORE each scene ───────────
// Renders: aurora background + eyebrow + editorial headline + support line +
// TTP brand mark + chapter number. Fades out around `exitAt`.
function LCIntro({
  chapter,            // e.g. "01"
  eyebrow,            // e.g. "DASHBOARD"
  line1,              // e.g. "One view."
  accentWord,         // e.g. "Everything"
  line1After,         // e.g. "that matters."
  line2,              // optional second line
  supportLine,        // longer subtitle
  exitAt = 4.0,       // when the intro begins fading out
  exitDuration = 0.9, // fade duration
}) {
  const t = useTime();
  const exitT = Easing.easeInOutCubic(clamp((t - exitAt) / exitDuration, 0, 1));
  const alpha = 1 - exitT;
  if (alpha <= 0.001) return null;

  const chapT = Easing.easeOutCubic(clamp((t - 0.05) / 0.8, 0, 1));
  const footT = Easing.easeOutCubic(clamp((t - 1.6) / 0.9, 0, 1));

  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: alpha,
      transform: `translateY(${exitT * -24}px)`,
      pointerEvents: 'none',
      zIndex: 10,
    }}>
      <LCBackground/>

      {/* giant chapter number, watermark style, top-right */}
      <div style={{
        position: 'absolute',
        right: 140, top: 120,
        fontFamily: 'Gilroy, sans-serif',
        fontSize: 420, fontWeight: 700,
        color: LC_PURPLE,
        opacity: 0.08 * chapT,
        letterSpacing: '-0.04em',
        lineHeight: 0.85,
        transform: `translateY(${(1 - chapT) * 30}px)`,
      }}>
        {chapter}
      </div>

      <LCHeadline
        eyebrow={eyebrow}
        line1={line1}
        accentWord={accentWord}
        line1After={line1After}
        line2={line2}
        supportLine={supportLine}
        wordStart={0.7}
      />

      {/* TTP mark bottom-left with chapter meta bottom-right */}
      <div style={{
        position: 'absolute', left: 100, bottom: 80,
        display: 'flex', alignItems: 'center', gap: 20,
        opacity: footT,
        transform: `translateY(${(1 - footT) * 12}px)`,
      }}>
        <img
          src="assets/TTP-logo-landscape-dark.svg"
          alt="The Talent People"
          style={{ height: 42, width: 'auto', display: 'block' }}
        />
        <div style={{ width: 1, height: 20, background: LC_LINE }}/>
        <div style={{
          fontFamily: 'Gilroy, sans-serif',
          fontSize: 12, fontWeight: 500,
          color: LC_INK_MUTED,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
        }}>TalentScreen</div>
      </div>

      <div style={{
        position: 'absolute', right: 100, bottom: 80,
        fontFamily: 'Gilroy, sans-serif',
        fontSize: 12, fontWeight: 500,
        color: LC_INK_MUTED,
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        opacity: footT,
      }}>
        Chapter {chapter}
      </div>
    </div>
  );
}

// ── Wraps a scene: plays LCIntro for `introDuration`s, then renders scene ──
// We shift time into the scene so its own animations start from t=0 when
// the intro finishes.
function TimeShift({ offset, children }) {
  const parent = React.useContext(TimelineContext);
  const shifted = React.useMemo(() => ({
    ...parent,
    time: Math.max(0, parent.time - offset),
  }), [parent.time, parent.duration, parent.playing, offset]);
  return <TimelineContext.Provider value={shifted}>{children}</TimelineContext.Provider>;
}

function IntroThenScene({ intro, children, introDuration = 4.0, handoff = 0.9 }) {
  const t = useTime();
  // Scene becomes visible as intro fades — starts at introDuration - handoff
  const sceneStart = introDuration - handoff;
  const sceneVisible = t >= sceneStart;
  const sceneT = Math.max(0, t - sceneStart);

  return (
    <>
      {/* Intro overlay */}
      <LCIntro {...intro} exitAt={introDuration - handoff} exitDuration={handoff}/>

      {/* Scene: we wrap children inside a time-shifted TimeContext so their
          useTime() reads from sceneT instead of absolute t. */}
      {sceneVisible && (
        <TimeShift offset={sceneStart}>
          {children}
        </TimeShift>
      )}
    </>
  );
}

Object.assign(window, {
  LC_BG, LC_INK, LC_INK_SOFT, LC_INK_MUTED, LC_LINE,
  LC_PURPLE, LC_PURPLE_SOFT, LC_PURPLE_DARK,
  LC_GREEN, LC_ORANGE, LC_BLUE, LC_RED,
  LCBackground, LCHeadline, LCFooter, LCCursor,
  LCIntro, IntroThenScene,
});