// Phase 0 Labs — shared brand atoms.
// The hex+dashed-zero mark, wordmarks, and a few SVG primitives that show up across all variations.

const P0_COLORS = {
  blue: '#185FA5',
  blueLight: '#3A7FBF',
  blueDark: '#0E4170',
  blueBg: '#E6F1FB',
  teal: '#0F6E56',
  tealLight: '#1A9B78',
  tealDark: '#084D3C',
  tealBg: '#E1F5EE',
  purple: '#534AB7',
  purpleLight: '#7068D0',
  purpleDark: '#3C3489',
  purpleBg: '#EEEDFE',
  navy: '#0C1E33',
  charcoal: '#1A2332',
  warmWhite: '#F5F5F3',
  offWhite: '#FAFAF8',
  cream: '#EFEDE3',
  sand: '#E8E3D2',
  ink: '#0A1420',
  gray100: '#F0EFE9',
  gray200: '#E0DFD8',
  gray300: '#C5C4BC',
  gray400: '#8A8980',
  gray500: '#5F5E5A',
  gray600: '#3D3D3A',
  blueDk: '#85B7EB',
  tealDk: '#5DCAA5',
  purpleDk: '#AFA9EC',
};

// The icon mark: hex + dashed governance ring + 6 purple node dots + center node.
// Theme tokens make it usable on light/dark/inverted contexts.
function BrandMark({ size = 64, theme = 'light', animated = false }) {
  const themes = {
    light: { hex: P0_COLORS.blue, ring: P0_COLORS.teal, node: P0_COLORS.purple, center: P0_COLORS.blue },
    dark: { hex: P0_COLORS.blueDk, ring: P0_COLORS.tealDk, node: P0_COLORS.purpleDk, center: P0_COLORS.blueDk },
    mono: { hex: 'currentColor', ring: 'currentColor', node: 'currentColor', center: 'currentColor' },
    white: { hex: '#fff', ring: 'rgba(255,255,255,0.65)', node: 'rgba(255,255,255,0.85)', center: '#fff' },
  };
  const t = themes[theme] || themes.light;
  const innerNodes = [
    { x: 0, y: -15.5 }, { x: 11.2, y: -6.5 }, { x: 11.2, y: 6.5 },
    { x: 0, y: 15.5 }, { x: -11.2, y: 6.5 }, { x: -11.2, y: -6.5 },
  ];
  const outerNodes = [
    { x: 0, y: -26 }, { x: 22.5, y: -13 }, { x: 22.5, y: 13 },
    { x: 0, y: 26 }, { x: -22.5, y: 13 }, { x: -22.5, y: -13 },
  ];
  return (
    <svg width={size} height={size} viewBox="0 0 60 64" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
      <g transform="translate(30, 32)">
        <polygon
          points="0,-26 22.5,-13 22.5,13 0,26 -22.5,13 -22.5,-13"
          fill="none" stroke={t.hex} strokeWidth="2.2" strokeLinejoin="round"
        />
        {outerNodes.map((n, i) => (
          <line key={`spoke-${i}`} x1={n.x} y1={n.y} x2={innerNodes[i].x} y2={innerNodes[i].y}
            stroke={t.ring} strokeWidth="0.6" opacity="0.32" />
        ))}
        <ellipse cx="0" cy="0" rx="12" ry="15.5" fill="none" stroke={t.ring} strokeWidth="1.6" strokeDasharray="5 1.4">
          {animated && (
            <animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="60s" repeatCount="indefinite" />
          )}
        </ellipse>
        {outerNodes.map((n, i) => (
          <circle key={`outer-${i}`} cx={n.x} cy={n.y} r="2.6" fill={t.node} />
        ))}
        {innerNodes.map((n, i) => (
          <circle key={`inner-${i}`} cx={n.x} cy={n.y} r="1.3" fill={t.ring} />
        ))}
        <circle cx="0" cy="0" r="3" fill={t.center} opacity="0.18" />
        <circle cx="0" cy="0" r="1.7" fill={t.center} />
      </g>
    </svg>
  );
}

// Horizontal lockup with optional tagline.
function BrandLockup({ size = 28, theme = 'light', tagline = false, tracking = 4 }) {
  const fg = theme === 'dark' ? '#E8E6DC' : P0_COLORS.navy;
  const sub = theme === 'dark' ? P0_COLORS.gray400 : P0_COLORS.gray400;
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.55 }}>
      <BrandMark size={size * 1.55} theme={theme} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{
          fontFamily: "'DM Sans', system-ui, sans-serif",
          fontWeight: 500,
          fontSize: size,
          letterSpacing: tracking,
          color: fg,
          lineHeight: 1,
        }}>PHASE 0 LABS</div>
        {tagline && (
          <div style={{
            fontFamily: "'DM Sans', system-ui, sans-serif",
            fontWeight: 400,
            fontSize: size * 0.32,
            letterSpacing: tracking * 0.55,
            color: sub,
            textTransform: 'uppercase',
          }}>AI Products · Services · Governance</div>
        )}
      </div>
    </div>
  );
}

// Numbered eyebrow used across all variations: "01 / SERVICES"
function Eyebrow({ num, label, color = P0_COLORS.teal, mono = true }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      fontFamily: mono ? "'JetBrains Mono', monospace" : "'DM Sans', system-ui, sans-serif",
      fontSize: 11, letterSpacing: mono ? 1.5 : 2.5, textTransform: 'uppercase',
      color, fontWeight: 500,
    }}>
      <span style={{ opacity: 0.7 }}>{num}</span>
      <span style={{ width: 24, height: 1, background: 'currentColor', opacity: 0.4 }} />
      <span>{label}</span>
    </div>
  );
}

// Hairline rule.
function Rule({ color = 'rgba(12,30,51,0.12)', vertical = false, length = '100%' }) {
  return vertical
    ? <div style={{ width: 1, height: length, background: color }} />
    : <div style={{ height: 1, width: length, background: color }} />;
}

// A subtle blueprint grid for backgrounds.
function BlueprintGrid({ color = 'rgba(12,30,51,0.05)', size = 48 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      backgroundImage: `linear-gradient(${color} 1px, transparent 1px), linear-gradient(90deg, ${color} 1px, transparent 1px)`,
      backgroundSize: `${size}px ${size}px`,
      maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
      WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
    }} />
  );
}

// A placeholder image block — striped, with mono caption.
function Placeholder({ label, height = 240, tone = 'cool', radius = 0 }) {
  const tones = {
    cool: { bg: '#EEF1F4', stripe: 'rgba(12,30,51,0.06)', text: '#5F5E5A' },
    warm: { bg: '#F2EFE5', stripe: 'rgba(80,60,30,0.07)', text: '#5F5E5A' },
    dark: { bg: '#172234', stripe: 'rgba(255,255,255,0.04)', text: '#8A8980' },
    blue: { bg: P0_COLORS.blueBg, stripe: 'rgba(24,95,165,0.08)', text: P0_COLORS.blueDark },
  };
  const t = tones[tone] || tones.cool;
  return (
    <div style={{
      height, background: t.bg, borderRadius: radius,
      backgroundImage: `repeating-linear-gradient(135deg, ${t.stripe} 0 1px, transparent 1px 8px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: 1.5,
      color: t.text, textTransform: 'uppercase',
      position: 'relative', overflow: 'hidden',
    }}>
      <span style={{
        background: t.bg, padding: '4px 10px',
        border: `1px solid ${t.stripe.replace('0.06','0.18').replace('0.07','0.18').replace('0.04','0.18').replace('0.08','0.25')}`,
      }}>{label}</span>
    </div>
  );
}

// The dashed governance ring as a standalone decorative element.
function GovernanceRing({ size = 200, color = P0_COLORS.teal, opacity = 0.5, animated = true }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <ellipse cx="50" cy="50" rx="38" ry="44" fill="none" stroke={color}
        strokeWidth="1.2" strokeDasharray="5 1.4" opacity={opacity}>
        {animated && (
          <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="120s" repeatCount="indefinite" />
        )}
      </ellipse>
    </svg>
  );
}

Object.assign(window, {
  P0_COLORS,
  BrandMark,
  BrandLockup,
  Eyebrow,
  Rule,
  BlueprintGrid,
  Placeholder,
  GovernanceRing,
});