// Shared small primitives for the UI kit. Expose to window for
// cross-script access since multiple <script type="text/babel"> files
// don't share scope.

const { useState, useEffect, useRef } = React;

function Logo({ size = 44, showWordmark = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img src="assets/logo-primary.png" alt="moms and groms" style={{ width: size, height: size, objectFit: 'contain', mixBlendMode: 'multiply' }} />
      {showWordmark && (
        <div style={{ fontFamily: 'var(--font-display)', fontVariationSettings: "'opsz' 144, 'SOFT' 50", fontSize: 22, color: 'var(--tide-600)', letterSpacing: '-0.02em', lineHeight: 1 }}>
          moms and groms
        </div>
      )}
    </div>
  );
}

function Icon({ name, size = 20, stroke = 1.5, style }) {
  const paths = {
    search: <><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></>,
    bag: <><path d="M4 6h16l-2 12H6z"/><path d="M8 6V4a4 4 0 0 1 8 0v2"/></>,
    heart: <path d="M20 12c0 4-4 7-8 9-4-2-8-5-8-9a4 4 0 0 1 8-1 4 4 0 0 1 8 1z"/>,
    user: <><circle cx="12" cy="9" r="4"/><path d="M5 20c0-4 3-7 7-7s7 3 7 7"/></>,
    menu: <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>,
    close: <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>,
    arrowRight: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    arrowLeft:  <><path d="M19 12H5"/><path d="m11 6-6 6 6 6"/></>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    check: <path d="m5 12 5 5 9-10"/>,
    star: <path d="M12 3l2.8 6 6.2.9-4.5 4.4 1 6.1-5.5-3-5.5 3 1-6.1L3 9.9l6.2-.9z"/>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r="0.5" fill="currentColor"/></>,
    ship: <><path d="M3 16l1.5-5h15L21 16"/><path d="M3 16c0 2 2 3 4 3h10c2 0 4-1 4-3"/><path d="M8 11V7h8v4"/></>,
    leaf: <><path d="M20 4c0 9-7 15-16 16 1-9 7-15 16-16z"/><path d="M4 20c5-5 10-8 16-16"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>
      {paths[name]}
    </svg>
  );
}

function Button({ variant = 'primary', size = 'md', children, onClick, style, ...rest }) {
  const base = {
    fontFamily: 'var(--font-sans)',
    fontWeight: 500,
    letterSpacing: '0.01em',
    borderRadius: 8,
    cursor: 'pointer',
    border: '1px solid transparent',
    transition: 'background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out)',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    lineHeight: 1,
  };
  const sizes = {
    sm: { padding: '9px 16px', fontSize: 13 },
    md: { padding: '13px 22px', fontSize: 14 },
    lg: { padding: '16px 28px', fontSize: 15 },
  };
  const variants = {
    primary: { background: 'var(--tide-600)', color: 'var(--sand-50)' },
    secondary: { background: 'transparent', color: 'var(--tide-700)', borderColor: 'var(--tide-400)' },
    ghost: { background: 'transparent', color: 'var(--tide-600)', padding: '10px 6px' },
    onDark: { background: 'var(--sand-100)', color: 'var(--tide-700)' },
  };
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);
  const hoverStyle = hover && !press ? {
    primary: { background: 'var(--tide-700)' },
    secondary: { background: 'var(--sand-200)' },
    ghost: { color: 'var(--tide-800)' },
    onDark: { background: 'var(--sand-50)' },
  }[variant] : {};
  const pressStyle = press ? { transform: 'scale(0.985)', background: variant === 'primary' ? 'var(--tide-800)' : 'var(--sand-300)' } : {};
  return (
    <button
      {...rest}
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{ ...base, ...sizes[size], ...variants[variant], ...hoverStyle, ...pressStyle, ...style }}
    >
      {children}
    </button>
  );
}

function Eyebrow({ children, color = 'var(--tide-400)', style }) {
  return <div style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color, ...style }}>{children}</div>;
}

function Chip({ children, variant = 'quiet' }) {
  const v = {
    solid: { background: 'var(--tide-600)', color: 'var(--sand-50)' },
    quiet: { background: 'var(--sand-200)', color: 'var(--tide-600)' },
    line: { background: 'transparent', color: 'var(--tide-600)', border: '1px solid var(--tide-300)' },
    accent: { background: 'var(--clay-400)', color: 'var(--sand-50)' },
    fern: { background: 'var(--fern-600)', color: 'var(--sand-50)' },
  }[variant];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 12px', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500, borderRadius: 999, ...v }}>
      {children}
    </span>
  );
}

Object.assign(window, { Logo, Icon, Button, Eyebrow, Chip });