// JMAC primitives — Button, Pill, Icon, Wordmark, HazardStripe
// Globals: React, ReactDOM

const Button = ({ variant = 'primary', size = 'md', children, onClick, type, style, ...rest }) => {
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'var(--font-body)', fontWeight: 700,
    textTransform: 'uppercase', letterSpacing: '0.08em',
    border: '1px solid transparent', borderRadius: 'var(--radius-md)',
    cursor: 'pointer',
    transition: 'background 200ms cubic-bezier(.2,.9,.1,1), color 200ms, transform 120ms, box-shadow 200ms',
    fontSize: size === 'lg' ? 14 : size === 'sm' ? 12 : 13,
    padding: size === 'lg' ? '14px 22px' : size === 'sm' ? '8px 14px' : '11px 18px',
    lineHeight: 1,
    whiteSpace: 'nowrap',
  };
  const variants = {
    primary: { background: 'var(--blue-700)', color: '#fff' },
    accent:  { background: 'var(--amber-400)', color: 'var(--steel-900)' },
    ghost:   { background: 'transparent', color: 'var(--fg-1)', borderColor: 'var(--border-2)' },
    onDark:  { background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.35)' },
    danger:  { background: 'var(--danger-500)', color: '#fff' },
  };
  return (
    <button type={type || 'button'} onClick={onClick}
            style={{ ...base, ...variants[variant], ...style }} {...rest}>
      {children}
    </button>
  );
};

const Icon = ({ name, size = 20, color = 'currentColor', strokeWidth = 1.75 }) => {
  const paths = {
    truck:    <><path d="M3 17h2l1-3h12l1 3h2"/><circle cx="7" cy="17" r="2"/><circle cx="17" cy="17" r="2"/><path d="M5 17V8h11l3 4v5"/></>,
    car:      <><path d="M5 17h14"/><path d="M5 17v-5l2-5h10l2 5v5"/><circle cx="8" cy="17" r="1.5"/><circle cx="16" cy="17" r="1.5"/></>,
    key:      <><circle cx="8" cy="15" r="3"/><path d="M10.5 12.5L21 2"/><path d="M17 6l3 3"/><path d="M14 9l3 3"/></>,
    pin:      <><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
    shield:   <><path d="M12 2l9 4v6c0 5-4 9-9 10-5-1-9-5-9-10V6z"/><path d="M9 12l2 2 4-4"/></>,
    clock:    <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    phone:    <><path d="M5 4h4l2 5-2 1a11 11 0 0 0 5 5l1-2 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2z"/></>,
    arrow:    <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    arrowR:   <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    arrowDown:<><path d="M12 5v14"/><path d="M6 13l6 6 6-6"/></>,
    check:    <><path d="M5 12l5 5 9-10"/></>,
    play:     <><path d="M7 5v14l12-7z" fill={color}/></>,
    menu:     <><path d="M4 7h16M4 12h16M4 17h16"/></>,
    x:        <><path d="M6 6l12 12M6 18L18 6"/></>,
    file:     <><path d="M14 3H6v18h12V8z"/><path d="M14 3v5h4"/></>,
    alert:    <><path d="M12 3l9 16H3z"/><path d="M12 9v5"/><circle cx="12" cy="17" r=".8" fill={color}/></>,
    cash:     <><rect x="2" y="6" width="20" height="12" rx="1"/><circle cx="12" cy="12" r="3"/><path d="M5 9v6M19 9v6"/></>,
    id:       <><rect x="2" y="5" width="20" height="14" rx="1.5"/><circle cx="9" cy="12" r="2.5"/><path d="M14 10h5M14 13h5M5.5 17c.5-1.5 2-2.5 3.5-2.5s3 1 3.5 2.5"/></>,
    calendar: <><rect x="3" y="5" width="18" height="16" rx="1.5"/><path d="M8 3v4M16 3v4M3 10h18"/></>,
    user:     <><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 4.5-6 8-6s7 2 8 6"/></>,
    mail:     <><rect x="3" y="5" width="18" height="14" rx="1"/><path d="M3 7l9 7 9-7"/></>,
    boat:     <><path d="M3 18c2 1 4 1 6 0s4-1 6 0 4 1 6 0"/><path d="M5 14l2-7h10l2 7"/><path d="M12 7V3"/></>,
    wrench:   <><path d="M14 6a4 4 0 0 1 5.5 5.5l-11 11-3.5-3.5 11-11A4 4 0 0 1 14 6z"/></>,
    search:   <><circle cx="11" cy="11" r="7"/><path d="M16 16l5 5"/></>,
    trophy:   <><path d="M8 4h8v6a4 4 0 0 1-8 0V4z"/><path d="M8 6H4v2a3 3 0 0 0 3 3M16 6h4v2a3 3 0 0 1-3 3"/><path d="M9 18h6M10 14v4M14 14v4M8 21h8"/></>,
    upload:   <><path d="M12 16V4"/><path d="M6 10l6-6 6 6"/><path d="M4 20h16"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="square" strokeLinejoin="miter"
         style={{ flexShrink: 0 }}>
      {paths[name]}
    </svg>
  );
};

// JMAC Wordmark — recreated to match the chrome/blue logo
const Wordmark = ({ height = 36, variant = 'chrome' }) => {
  const isLight = variant === 'light';
  const isDark  = variant === 'dark';
  const stroke  = isLight ? '#ffffff' : '#163672';
  const fill    = isLight ? '#ffffff' : (isDark ? '#163672' : 'url(#chr)');
  return (
    <svg height={height} viewBox="0 0 480 140" aria-label="JMAC" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="chr" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%"  stopColor="#eef1f5"/>
          <stop offset="18%" stopColor="#c0c8d2"/>
          <stop offset="50%" stopColor="#5a6473"/>
          <stop offset="78%" stopColor="#a8b2bf"/>
          <stop offset="100%" stopColor="#f3f5f8"/>
        </linearGradient>
      </defs>
      <g stroke={stroke} strokeWidth="3" fill="none">
        <line x1="0" y1="20"  x2="60" y2="20"/><line x1="0" y1="34"  x2="44" y2="34"/>
        <line x1="0" y1="118" x2="60" y2="118"/><line x1="0" y1="106" x2="44" y2="106"/>
      </g>
      <g transform="skewX(-14) translate(40,0)" fontFamily="'Barlow Condensed','Oswald',sans-serif" fontWeight="800" fontStyle="italic">
        <text x="50" y="105" fontSize="120"
              fill={fill}
              stroke={variant === 'chrome' ? '#163672' : 'none'}
              strokeWidth={variant === 'chrome' ? 6 : 0}
              paintOrder="stroke fill"
              letterSpacing="-2">JMAC</text>
      </g>
      <g stroke={stroke} strokeWidth="3" fill="none">
        <line x1="420" y1="20"  x2="480" y2="20"/><line x1="436" y1="34"  x2="480" y2="34"/>
        <line x1="420" y1="118" x2="480" y2="118"/><line x1="436" y1="106" x2="480" y2="106"/>
      </g>
    </svg>
  );
};

const HazardStripe = ({ height = 8 }) => (
  <div style={{ height, background: 'var(--pattern-hazard)' }}/>
);

const Eyebrow = ({ children, color = 'var(--brand-primary)' }) => (
  <div style={{
    fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12,
    letterSpacing: '0.16em', textTransform: 'uppercase', color,
    display: 'inline-flex', alignItems: 'center', gap: 10,
  }}>
    <span style={{ width: 28, height: 2, background: color }}/>
    {children}
  </div>
);

const Section = ({ children, dark, narrow, padY = 96, style, ...rest }) => (
  <section style={{
    background: dark ? 'var(--steel-900)' : 'var(--bg-page)',
    color: dark ? '#fff' : 'inherit',
    padding: `${padY}px 28px`,
    ...style,
  }} {...rest}>
    <div style={{ maxWidth: narrow ? 'var(--container-narrow)' : 'var(--container-max)', margin: '0 auto' }}>
      {children}
    </div>
  </section>
);

Object.assign(window, { Button, Icon, Wordmark, HazardStripe, Eyebrow, Section });