// Shared tokens & helpers for AXIA.do landing proposals
// Brand: #0B0F19 bg / #2563EB primary / #10B981 accent / #64748B muted / #F8FAFC text

const AXIA = {
  bg: '#0B0F19',
  surface: '#111827',
  card: '#0F172A',
  border: '#1F2937',
  borderHi: '#334155',
  primary: '#2563EB',
  primaryHover: '#1D4ED8',
  accent: '#10B981',
  text: '#F8FAFC',
  muted: '#64748B',
  mutedHi: '#94A3B8',
};

// AXIA "A" mark — official icon (loaded from brand/axia-icon.svg)
function AxiaMark({ size = 40 }) {
  return (
    <img
      src="brand/axia-icon.svg"
      alt="AXIA"
      width={size}
      height={size}
      style={{ display: 'block', width: size, height: size, objectFit: 'contain' }}
    />
  );
}

// Wordmark "AXIA.do" — uses the FULL official logo SVG (icon + wordmark together)
function AxiaWordmark({ size = 22 }) {
  // Original logo viewBox 2400x1792 → aspect ratio ~1.34:1
  // We render the full SVG and let the height drive the size; width auto-scales.
  const height = Math.round(size * 1.6);
  return (
    <img
      src="brand/axia-logo.svg"
      alt="AXIA.do"
      style={{
        display: 'block',
        height,
        width: 'auto',
        objectFit: 'contain',
      }}
    />
  );
}

// Tech grid background
function TechGrid({ opacity = 0.4, size = 48 }) {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, opacity, pointerEvents: 'none',
      backgroundImage: `
        linear-gradient(${AXIA.border} 1px, transparent 1px),
        linear-gradient(90deg, ${AXIA.border} 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%)',
    }} />
  );
}

// Glow ellipse
function Glow({ color = AXIA.primary, top = '0%', left = '50%', size = 600, opacity = 0.25 }) {
  return (
    <div aria-hidden style={{
      position: 'absolute',
      top, left,
      width: size, height: size * 0.6,
      transform: 'translate(-50%, -30%)',
      background: `radial-gradient(ellipse at center, ${color}${Math.round(opacity * 255).toString(16).padStart(2, '0')} 0%, transparent 60%)`,
      pointerEvents: 'none',
      filter: 'blur(40px)',
    }} />
  );
}

// Mono badge (Digital Operations + AI Systems)
function MonoBadge({ children, accent = AXIA.primary }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px',
      borderRadius: 999,
      border: `1px solid ${AXIA.border}`,
      background: 'rgba(17,24,39,0.6)',
      backdropFilter: 'blur(8px)',
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 11,
      letterSpacing: '0.12em',
      color: AXIA.mutedHi,
      textTransform: 'uppercase',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: accent, boxShadow: `0 0 8px ${accent}` }} />
      {children}
    </span>
  );
}

// Primary button
function BtnPrimary({ children, size = 'lg' }) {
  const pad = size === 'lg' ? '14px 22px' : '10px 16px';
  const fs = size === 'lg' ? 15 : 13;
  return (
    <button style={{
      padding: pad, fontSize: fs, fontWeight: 600,
      background: AXIA.primary, color: AXIA.text,
      border: 'none', borderRadius: 10,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      cursor: 'pointer',
      boxShadow: `0 0 0 1px ${AXIA.primary}, 0 8px 24px -8px ${AXIA.primary}`,
      fontFamily: 'inherit',
    }}>
      {children}
    </button>
  );
}

function BtnSecondary({ children, size = 'lg' }) {
  const pad = size === 'lg' ? '14px 22px' : '10px 16px';
  const fs = size === 'lg' ? 15 : 13;
  return (
    <button style={{
      padding: pad, fontSize: fs, fontWeight: 600,
      background: 'transparent', color: AXIA.text,
      border: `1px solid ${AXIA.border}`, borderRadius: 10,
      display: 'inline-flex', alignItems: 'center', gap: 8,
      cursor: 'pointer',
      fontFamily: 'inherit',
    }}>
      {children}
    </button>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 5l7 7-7 7"/>
    </svg>
  );
}

// Section eyebrow (mono)
function Eyebrow({ children, color = AXIA.primary }) {
  return (
    <span style={{
      fontFamily: '"JetBrains Mono", monospace',
      fontSize: 11, letterSpacing: '0.16em',
      color, textTransform: 'uppercase', fontWeight: 500,
    }}>
      {children}
    </span>
  );
}

// Service icons (line style, brand-consistent)
function SvcIcon({ name, size = 28, accent = AXIA.primary }) {
  const stroke = accent;
  const s = size;
  const common = { width: s, height: s, viewBox: '0 0 32 32', fill: 'none', stroke, strokeWidth: 1.5, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const icons = {
    forms: <svg {...common}><rect x="7" y="4" width="18" height="24" rx="2"/><path d="M11 11h10M11 16h10M11 21h6"/></svg>,
    data: <svg {...common}><ellipse cx="16" cy="8" rx="9" ry="3"/><path d="M7 8v8c0 1.66 4 3 9 3s9-1.34 9-3V8M7 16v8c0 1.66 4 3 9 3s9-1.34 9-3v-8"/></svg>,
    dashboards: <svg {...common}><path d="M5 26V14M11 26V8M17 26v-9M23 26v-5M27 26H3"/></svg>,
    automation: <svg {...common}><circle cx="16" cy="6" r="2.5"/><circle cx="6" cy="22" r="2.5"/><circle cx="26" cy="22" r="2.5"/><circle cx="16" cy="22" r="2.5"/><path d="M16 8.5v11M14.5 7.5L7.5 20.5M17.5 7.5l7 13M8.5 22h5M18.5 22h5"/></svg>,
    ai: <svg {...common}><path d="M16 4c-4 0-7 3-7 7 0 2 1 4 2 5v3a2 2 0 002 2h6a2 2 0 002-2v-3c1-1 2-3 2-5 0-4-3-7-7-7zM12 24v2a2 2 0 002 2h4a2 2 0 002-2v-2"/></svg>,
    diagnose: <svg {...common}><circle cx="14" cy="14" r="8"/><path d="M27 27l-7-7"/></svg>,
    spark: <svg {...common}><path d="M16 4l3 9 9 3-9 3-3 9-3-9-9-3 9-3z"/></svg>,
  };
  return icons[name] || icons.forms;
}

window.AXIA = AXIA;
window.AxiaMark = AxiaMark;
window.AxiaWordmark = AxiaWordmark;
window.TechGrid = TechGrid;
window.Glow = Glow;
window.MonoBadge = MonoBadge;
window.BtnPrimary = BtnPrimary;
window.BtnSecondary = BtnSecondary;
window.ArrowRight = ArrowRight;
window.Eyebrow = Eyebrow;
window.SvcIcon = SvcIcon;