// Shared primitives: Logo mark, FleurDot, Pill, Button, icons
const { useState, useEffect, useRef, useMemo } = React;

function Wordmark({ color = 'currentColor' }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10, color }}>
      <img
        src="/castor-mark.png"
        alt=""
        width="65"
        height="30"
        style={{ display: 'block', height: 30, width: 'auto', flexShrink: 0 }}
      />
      <span style={{
        fontFamily: 'var(--font-display)',
        fontWeight: 600,
        letterSpacing: '-0.015em',
        fontSize: 18,
      }}>Castor<span style={{ opacity: 0.5, marginLeft: 5, fontWeight: 400 }}>IA</span></span>
    </div>
  );
}

function FleurDot({ size = 10, color = 'var(--accent-ink)' }) {
  return (
    <svg width={size} height={size * 1.1} viewBox="0 0 10 11" fill={color} aria-hidden>
      <path d="M5 0 C5.8 2 6.6 2.5 7.3 2.8 C6.6 3.5 6 4 5.8 5 H8.5 V6 H5.8 C6 7.5 6.5 9 7 11 H3 C3.5 9 4 7.5 4.2 6 H1.5 V5 H4.2 C4 4 3.4 3.5 2.7 2.8 C3.4 2.5 4.2 2 5 0 Z"/>
    </svg>
  );
}

function Pill({ children, tone = 'neutral', icon }) {
  const tones = {
    neutral: { bg: 'color-mix(in oklch, var(--ink) 4%, transparent)', fg: 'var(--ink-soft)', bd: 'var(--border)' },
    brand:   { bg: 'color-mix(in oklch, var(--brand) 10%, transparent)', fg: 'var(--brand)', bd: 'color-mix(in oklch, var(--brand) 25%, transparent)' },
    accent:  { bg: 'color-mix(in oklch, var(--accent) 12%, transparent)', fg: 'var(--accent-ink)', bd: 'color-mix(in oklch, var(--accent) 28%, transparent)' },
    ok:      { bg: 'color-mix(in oklch, #1f9d55 12%, transparent)', fg: '#2B8C52', bd: 'color-mix(in oklch, #1f9d55 28%, transparent)' },
  };
  const tt = tones[tone] || tones.neutral;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '5px 11px', borderRadius: 999,
      background: tt.bg, color: tt.fg, border: `1px solid ${tt.bd}`,
      fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.02em', lineHeight: 1,
      backdropFilter: 'blur(8px)',
    }}>
      {icon}
      {children}
    </span>
  );
}

function Button({ children, variant = 'primary', icon, onClick, size = 'md', href }) {
  const sizes = {
    sm: { pad: '7px 13px', fs: 12.5 },
    md: { pad: '11px 18px', fs: 13.5 },
    lg: { pad: '14px 22px', fs: 14.5 },
  }[size];
  const [hover, setHover] = useState(false);
  const variants = {
    primary: {
      bg: hover ? 'color-mix(in oklch, var(--brand) 88%, black)' : 'var(--brand)',
      fg: 'white',
      bd: 'var(--brand)',
      shadow: hover
        ? '0 0 0 4px var(--glow), 0 8px 24px -8px var(--brand)'
        : '0 1px 0 rgba(255,255,255,0.15) inset, 0 4px 14px -4px var(--glow)',
    },
    secondary: {
      bg: hover ? 'color-mix(in oklch, var(--ink) 5%, var(--bg-elev))' : 'var(--bg-elev)',
      fg: 'var(--ink)',
      bd: 'var(--border-strong)',
      shadow: 'none',
    },
    ghost: {
      bg: hover ? 'color-mix(in oklch, var(--ink) 5%, transparent)' : 'transparent',
      fg: 'var(--ink)',
      bd: 'transparent',
      shadow: 'none',
    },
  };
  const v = variants[variant];
  const Tag = href ? 'a' : 'button';
  return (
    <Tag
      href={href}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 7,
        padding: sizes.pad, fontSize: sizes.fs,
        fontFamily: 'var(--font-ui)', fontWeight: 500,
        background: v.bg, color: v.fg,
        border: `1px solid ${v.bd}`,
        borderRadius: 9, cursor: 'pointer',
        textDecoration: 'none',
        transition: 'all 140ms ease',
        transform: hover ? 'translateY(-1px)' : 'none',
        letterSpacing: '-0.005em',
        boxShadow: v.shadow,
      }}
    >
      {children}
      {icon}
    </Tag>
  );
}

function ArrowRight({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10m0 0L9 4m4 4L9 12" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function Check({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8.5l3 3 7-7" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}
function XMark({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M4 4l8 8M12 4l-8 8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  );
}
function Spark({ size = 12, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 12 12" fill={color} aria-hidden>
      <path d="M6 0 L7 5 L12 6 L7 7 L6 12 L5 7 L0 6 L5 5 Z"/>
    </svg>
  );
}

Object.assign(window, { Wordmark, FleurDot, Pill, Button, ArrowRight, Check, XMark, Spark });