// Reusable atoms: Logo, Eyebrow, ScriptText, Button, Chip, IconButton, simple Lucide icons.

const wmTokens = {
  // pulled inline from colors_and_type.css for fast prop styling
  indigo900: '#091129',
  indigo800: '#0c1737',
  indigo500: '#1e3a8a',
  indigo300: '#6175ad',
  indigo100: '#d2d7e7',
  indigo50:  '#e8ebf3',
  gold500:   '#d97706',
  gold600:   '#ad5f04',
  gold300:   '#e49f50',
  gold100:   '#f7e3cd',
  green500:  '#10b981',
  green100:  '#cff1e5',
  green800:  '#064a33',
  white:     '#ffffff',
  n50:       '#f2f2f2',
  n100:      '#d8dad9',
  n300:      '#b2b5b4',
  n500:      '#808482',
  n600:      '#4d5250',
  n800:      '#1a211e',
};

// ---------- Logo ----------
// Use the full color (=black) lockup, or an inverted (white) version for dark backgrounds
function Logo({ variant = 'dark', height = 48 }) {
  // The provided logo is monochrome black. CSS filter inverts it for dark bgs.
  const filter = variant === 'light' ? 'invert(1) brightness(2)' : 'none';
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
      <img
        src="assets/wm-logo.png"
        alt="WM Photos by Tom"
        style={{ height, width: 'auto', filter, display: 'block' }}
      />
    </span>
  );
}

// ---------- Eyebrow ----------
function Eyebrow({ children, tone = 'default', style }) {
  const color = {
    default: wmTokens.n600,
    dark:    wmTokens.indigo900,
    accent:  wmTokens.gold600,
    light:   'rgba(255,255,255,0.8)',
  }[tone];
  return (
    <div style={{
      fontFamily: 'var(--font-body)',
      fontSize: 12, fontWeight: 700,
      letterSpacing: '0.22em', textTransform: 'uppercase',
      color, ...style,
    }}>{children}</div>
  );
}

// ---------- Script accent ----------
function ScriptText({ children, size = 36, color, style }) {
  return (
    <span style={{
      fontFamily: "'Sacramento', cursive",
      fontSize: size, lineHeight: 1,
      color: color || wmTokens.indigo900, ...style,
    }}>{children}</span>
  );
}

// ---------- Button ----------
function Button({ variant = 'primary', children, onClick, type = 'button', style, icon, disabled = false }) {
  const [hover, setHover] = React.useState(false);
  const [pressed, setPressed] = React.useState(false);
  const styles = {
    primary: {
      bg: hover ? wmTokens.indigo800 : wmTokens.indigo500,
      color: wmTokens.white, border: 'none',
    },
    accent: {
      bg: hover ? wmTokens.gold600 : wmTokens.gold500,
      color: wmTokens.white, border: 'none',
    },
    secondary: {
      bg: hover ? wmTokens.indigo900 : 'transparent',
      color: hover ? wmTokens.white : wmTokens.indigo900,
      border: `1.5px solid ${wmTokens.indigo900}`,
    },
    secondaryLight: {
      bg: hover ? wmTokens.white : 'transparent',
      color: hover ? wmTokens.indigo900 : wmTokens.white,
      border: `1.5px solid ${wmTokens.white}`,
    },
    ghost: {
      bg: 'transparent',
      color: hover ? wmTokens.gold600 : wmTokens.indigo900,
      border: 'none',
    },
  }[variant];
  return (
    <button
      type={type}
      onClick={onClick}
      disabled={disabled}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPressed(false); }}
      onMouseDown={() => setPressed(true)}
      onMouseUp={() => setPressed(false)}
      style={{
        fontFamily: 'var(--font-body)',
        fontSize: 14, fontWeight: 600,
        padding: variant === 'ghost' ? '12px 8px' : '14px 24px',
        borderRadius: 8,
        background: styles.bg, color: styles.color, border: styles.border,
        cursor: disabled ? 'not-allowed' : 'pointer',
        display: 'inline-flex', alignItems: 'center', gap: 8,
        transition: 'background 240ms cubic-bezier(.22,.61,.36,1), color 240ms cubic-bezier(.22,.61,.36,1), transform 120ms ease-out',
        transform: pressed ? 'scale(0.98)' : 'scale(1)',
        ...style,
      }}
    >
      {children}
      {icon}
    </button>
  );
}

// ---------- Chip ----------
function Chip({ children, tone = 'outline', active, onClick, style }) {
  const tones = {
    outline:  { bg: 'transparent', color: wmTokens.indigo900, border: `1px solid ${wmTokens.n100}` },
    indigo:   { bg: wmTokens.indigo100, color: wmTokens.indigo800, border: 'none' },
    accent:   { bg: wmTokens.gold100, color: wmTokens.gold600, border: 'none' },
    success:  { bg: wmTokens.green100, color: wmTokens.green800, border: 'none' },
    dark:     { bg: wmTokens.indigo900, color: wmTokens.white, border: 'none' },
  }[tone];
  const isActive = active && tone === 'outline';
  return (
    <button
      onClick={onClick}
      style={{
        fontFamily: 'var(--font-body)',
        fontSize: 12, fontWeight: 600,
        padding: '7px 14px',
        borderRadius: 999,
        cursor: onClick ? 'pointer' : 'default',
        background: isActive ? wmTokens.indigo900 : tones.bg,
        color: isActive ? wmTokens.white : tones.color,
        border: isActive ? 'none' : tones.border,
        transition: 'background 200ms, color 200ms',
        ...style,
      }}
    >
      {children}
    </button>
  );
}

// ---------- Inline icon helpers (Lucide-style) ----------
const Icon = ({ d, viewBox = '0 0 24 24', size = 18, stroke = 1.5, fill = 'none' }) => (
  <svg width={size} height={size} viewBox={viewBox} fill={fill} stroke="currentColor"
       strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    {d}
  </svg>
);
const Icons = {
  arrowRight: <Icon d={<><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>} />,
  arrowUpRight: <Icon d={<><path d="M7 7h10v10"/><path d="M7 17 17 7"/></>} />,
  menu: <Icon d={<><path d="M4 7h16M4 12h16M4 17h16"/></>} />,
  close: <Icon d={<><path d="M18 6 6 18M6 6l12 12"/></>} />,
  mail: <Icon d={<><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 5L2 7"/></>} />,
  pin: <Icon d={<><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></>} />,
  calendar: <Icon d={<><path d="M8 2v4M16 2v4"/><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M3 10h18"/></>} />,
  camera: <Icon d={<><path d="M14.5 4h-5L7 7H4a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1h-3l-2.5-3Z"/><circle cx="12" cy="13" r="4"/></>} />,
  instagram: <Icon d={<><rect x="2" y="2" width="20" height="20" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37Z"/><circle cx="17.5" cy="6.5" r=".5" fill="currentColor" stroke="none"/></>} />,
  check: <Icon d={<><path d="M20 6 9 17l-5-5"/></>} />,
  star: <Icon d={<><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>} />,
  play: <Icon d={<polygon points="6 3 20 12 6 21 6 3"/>} />,
};

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