// Shared brand tokens + pixel mascot for The AI Blueprint waitlist.
// Brand visual DNA pulled from the supplied reference banners:
//   bg          #0a0a0a near-black with subtle grid
//   accent      coral / orange around #E07856
//   type pair   chunky condensed bold sans (display) + serif italic (accent)
//
// Fonts loaded once at the top of index.html so all three direction files share them.

const BRAND = {
  bg:        '#0a0a0a',
  bgPanel:   '#111111',
  bgRaise:   '#161616',
  ink:       '#ffffff',
  inkDim:    'rgba(255,255,255,0.62)',
  inkFaint:  'rgba(255,255,255,0.38)',
  rule:      'rgba(255,255,255,0.08)',
  ruleHi:    'rgba(255,255,255,0.16)',
  accent:    '#E07856',
  accentDim: '#b85d3f',
  accentSoft:'rgba(224,120,86,0.14)',
  accentGlow:'rgba(224,120,86,0.55)',
  display:   '"Archivo Black", "Arial Black", system-ui, sans-serif',
  serif:     '"DM Serif Display", "Playfair Display", Georgia, serif',
  body:      '"Plus Jakarta Sans", -apple-system, system-ui, sans-serif',
  mono:      '"JetBrains Mono", "SF Mono", Menlo, monospace',
};

// ── Mascot ──────────────────────────────────────────────────────────────
// The Claude-style SVG sprite was replaced with the project's own brand
// mascot PNG (2000×2000, transparent). Legacy props (variant / pointing /
// crown / color / outline / eye) are accepted for backwards compatibility
// at the call sites but silently ignored — the new mascot is a static image.
function Mascot({ size = 80, glow = false, className, style }) {
  return (
    <img
      src="mascot.png"
      alt=""
      width={size}
      height={size}
      className={className}
      draggable="false"
      style={{
        display: 'inline-block',
        verticalAlign: 'middle',
        imageRendering: 'pixelated',
        filter: glow ? `drop-shadow(0 0 ${size * 0.22}px ${BRAND.accentGlow})` : 'none',
        userSelect: 'none',
        pointerEvents: 'none',
        ...style,
      }}
    />
  );
}

// ── Grid backgrounds (radiating perspective grid + dots) ─────────────────
function PerspectiveGrid({ opacity = 0.18, color = BRAND.accent, density = 22 }) {
  // Vertical rays converging at top-center + horizontal lines for floor.
  const rays = [];
  for (let i = -density; i <= density; i++) {
    const angle = (i / density) * 60; // degrees fan
    rays.push(
      <line key={`r${i}`} x1={500} y1={0} x2={500 + Math.tan(angle * Math.PI / 180) * 600} y2={600}
        stroke={color} strokeWidth={0.6} strokeOpacity={opacity} />
    );
  }
  const lines = [];
  for (let i = 1; i <= 10; i++) {
    const y = 600 - (600 / Math.pow(1.18, i));
    lines.push(<line key={`l${i}`} x1={0} y1={y} x2={1000} y2={y}
      stroke={color} strokeWidth={0.5} strokeOpacity={opacity * 0.7} />);
  }
  return (
    <svg viewBox="0 0 1000 600" preserveAspectRatio="none"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none' }}>
      {rays}
      {lines}
    </svg>
  );
}

function DotGrid({ size = 24, color = 'rgba(255,255,255,0.08)', style }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `radial-gradient(${color} 1px, transparent 1px)`,
      backgroundSize: `${size}px ${size}px`,
      ...style,
    }} />
  );
}

// ── Small reused atoms ───────────────────────────────────────────────────
function Eyebrow({ children, color = BRAND.accent, style }) {
  return (
    <div style={{
      fontFamily: BRAND.mono,
      fontSize: 11,
      letterSpacing: '0.22em',
      textTransform: 'uppercase',
      color,
      ...style,
    }}>{children}</div>
  );
}

function FauxPhoto({ name, role, w = 88, h = 88, accent = BRAND.accent }) {
  // Stand-in for real founder photo — keeps the visual block + name plate.
  const initials = name.split(' ').map(s => s[0]).join('').slice(0, 2);
  return (
    <div style={{
      width: w, height: h, borderRadius: 4,
      background: `linear-gradient(135deg, #2a2a2a, #1a1a1a)`,
      border: `1px solid ${BRAND.ruleHi}`,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-start',
      padding: 8,
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* diagonal stripe placeholder */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,0.04) 6px 7px)`,
      }} />
      <div style={{
        position: 'absolute', top: 8, right: 8,
        fontFamily: BRAND.mono, fontSize: 9, letterSpacing: '0.1em',
        color: BRAND.inkFaint,
      }}>PHOTO</div>
      <div style={{
        fontFamily: BRAND.display, fontSize: w * 0.32, color: accent,
        lineHeight: 1, position: 'relative',
      }}>{initials}</div>
    </div>
  );
}

// ── Make them globally available to the direction files ─────────────────
Object.assign(window, {
  BRAND, Mascot, PerspectiveGrid, DotGrid, Eyebrow, FauxPhoto,
});