// brand.jsx — Digital Heroes shared brand system
// Colors, fonts, grain overlay, drop orb, timeline rail, browser mockup frame, wordmark.

const DH = {
  bg: '#f5f0e8',
  surface: '#ffffff',
  surfaceTranslucent: 'rgba(255, 252, 245, 0.65)',
  ink: '#0f1713',
  moss500: '#6fa37a',
  moss600: '#3f6b54',
  moss700: '#24453a',
  amber: '#cd8a4b',
  rule: 'rgba(63, 107, 84, 0.22)',
  ruleStrong: 'rgba(63, 107, 84, 0.55)',

  display: "'Space Grotesk', system-ui, sans-serif",
  serif: "'Instrument Serif', Georgia, serif",
  body: "'Inter', system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace",

  ease: 'cubic-bezier(0.2, 0.7, 0.2, 1)',
};

// Grain overlay — tiled SVG
function GrainOverlay({ opacity = 0.15 }) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>`;
  const url = `data:image/svg+xml;utf8,${svg.replace(/#/g, '%23')}`;
  return (
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `url("${url}")`,
      backgroundSize: '220px 220px',
      mixBlendMode: 'multiply',
      opacity,
      pointerEvents: 'none',
      zIndex: 100,
    }}/>
  );
}

// Floating moss drop orb — soft radial, drifts slowly
function DropOrb({ x = 1600, y = 150, size = 280, color = DH.moss500, amplitude = 24, speed = 0.15 }) {
  const time = useTime();
  const dx = Math.sin(time * speed * Math.PI * 2) * amplitude;
  const dy = Math.cos(time * speed * 0.7 * Math.PI * 2) * amplitude * 0.6;
  return (
    <div style={{
      position: 'absolute',
      left: x - size / 2, top: y - size / 2,
      width: size, height: size,
      background: `radial-gradient(circle, ${color} 0%, ${color}40 40%, transparent 70%)`,
      borderRadius: '50%',
      filter: 'blur(40px)',
      opacity: 0.55,
      transform: `translate(${dx}px, ${dy}px)`,
      pointerEvents: 'none',
      willChange: 'transform',
    }}/>
  );
}

// Secondary amber orb for highlights
function AmberOrb({ x = 300, y = 900, size = 180, amplitude = 18, speed = 0.12, opacity = 0.4 }) {
  const time = useTime();
  const dx = Math.cos(time * speed * Math.PI * 2) * amplitude;
  const dy = Math.sin(time * speed * 0.5 * Math.PI * 2) * amplitude * 0.5;
  return (
    <div style={{
      position: 'absolute',
      left: x - size / 2, top: y - size / 2,
      width: size, height: size,
      background: `radial-gradient(circle, ${DH.amber} 0%, ${DH.amber}40 40%, transparent 70%)`,
      borderRadius: '50%',
      filter: 'blur(50px)',
      opacity,
      transform: `translate(${dx}px, ${dy}px)`,
      pointerEvents: 'none',
      willChange: 'transform',
    }}/>
  );
}

// Wordmark — uses the uploaded PNG
function Wordmark({ x, y, height = 28, showMascot = true, opacity = 1, live = false }) {
  const time = useTime();
  const pulse = 0.6 + 0.4 * Math.sin(time * Math.PI * 2 * 1.2);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      display: 'flex', alignItems: 'center', gap: 10,
      opacity,
    }}>
      {live && (
        <div style={{
          width: 8, height: 8, borderRadius: '50%',
          background: DH.moss500,
          boxShadow: `0 0 ${8 * pulse}px ${DH.moss500}`,
          opacity: 0.5 + 0.5 * pulse,
        }}/>
      )}
      <img src="/assets/process-animations/assets/dh-wordmark.png" alt="digital.HEROES." style={{
        height, width: 'auto', display: 'block',
      }}/>
    </div>
  );
}

// Timeline rail — 5 chips, persistent bottom strip
// activePhase: 0-4, or -1 for none. phases fade in progressively.
function TimelineRail({
  phases,
  activePhase,
  y = 960,
  revealAt = 0, // when the rail itself appears
  time,
}) {
  const railOpacity = clamp((time - revealAt) / 0.6, 0, 1);
  if (railOpacity <= 0) return null;

  const totalW = 1720;
  const startX = (1920 - totalW) / 2;
  const chipGap = totalW / phases.length;

  return (
    <div style={{
      position: 'absolute', left: 0, top: y, width: 1920,
      opacity: railOpacity,
    }}>
      {/* Connecting rule */}
      <div style={{
        position: 'absolute', left: startX + 20, top: 38,
        width: totalW - 40, height: 1,
        background: DH.rule,
      }}/>

      {phases.map((p, i) => {
        const chipX = startX + i * chipGap + chipGap / 2;
        const isActive = i === activePhase;
        const isPast = i < activePhase;
        const dim = isActive ? 1 : (isPast ? 0.55 : 0.3);

        // Chip reveal: each chip stagger-reveals
        const chipReveal = clamp((time - revealAt - i * 0.08) / 0.4, 0, 1);

        return (
          <div key={i} style={{
            position: 'absolute',
            left: chipX,
            top: 18,
            transform: `translateX(-50%) translateY(${(1 - chipReveal) * 8}px)`,
            opacity: chipReveal * dim,
            transition: `opacity 400ms ${DH.ease}`,
            display: 'flex', alignItems: 'center', gap: 8,
            padding: '8px 18px',
            background: isActive ? DH.moss600 : 'transparent',
            color: isActive ? '#fff' : DH.ink,
            borderRadius: 24,
            border: isActive ? 'none' : `1px solid ${DH.rule}`,
            fontFamily: DH.mono,
            fontSize: 13,
            letterSpacing: '0.04em',
            whiteSpace: 'nowrap',
            willChange: 'transform, opacity, background',
          }}>
            <span style={{
              fontFamily: DH.serif, fontStyle: 'italic',
              fontSize: 16, opacity: 0.85,
            }}>§</span>
            <span style={{ fontWeight: 600 }}>
              {String(i + 1).padStart(2, '0')}
            </span>
            <span style={{ opacity: 0.7 }}>·</span>
            <span style={{ textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              {p}
            </span>
          </div>
        );
      })}
    </div>
  );
}

// Chrome-less browser mockup container — rounded corners, moss shadow
function Mockup({ x, y, width, height, children, radius = 20, entryProgress = 1, tint = 'white' }) {
  return (
    <div style={{
      position: 'absolute',
      left: x, top: y,
      width, height,
      borderRadius: radius,
      overflow: 'hidden',
      background: tint === 'white' ? '#fff' : DH.bg,
      boxShadow: `0 24px 80px -20px rgba(36, 69, 58, 0.25), 0 4px 18px -4px rgba(36, 69, 58, 0.12)`,
      opacity: entryProgress,
      transform: `scale(${0.96 + 0.04 * entryProgress}) translateY(${(1 - entryProgress) * 12}px)`,
      transformOrigin: 'center',
      willChange: 'transform, opacity',
    }}>
      {children}
    </div>
  );
}

// Big numeric for A/B metrics
function BigNumber({ value, label, x, y, color = DH.ink, align = 'left' }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: align === 'right' ? 'translateX(-100%)' : 'none',
      fontFamily: DH.display,
      color,
    }}>
      <div style={{
        fontFamily: DH.mono,
        fontSize: 13,
        letterSpacing: '0.12em',
        textTransform: 'uppercase',
        color: DH.moss600,
        marginBottom: 8,
        opacity: 0.75,
      }}>
        {label}
      </div>
      <div style={{
        fontSize: 120,
        fontWeight: 700,
        lineHeight: 0.95,
        letterSpacing: '-0.03em',
        fontVariantNumeric: 'tabular-nums',
      }}>
        {value}
      </div>
    </div>
  );
}

Object.assign(window, {
  DH, GrainOverlay, DropOrb, AmberOrb, Wordmark, TimelineRail, Mockup, BigNumber,
});