// TAO Design System — Shared Components
// ui_kits/tao-website/Components.jsx

const TAO_COLORS = {
  black:          '#0A0908',
  primary:        '#1A1917',   // near-black — default text
  primaryHover:   '#0A0908',
  dark:           '#3D3A36',
  mid:            '#7A7670',
  muted:          '#A8A4A0',
  light:          '#C8C4BE',
  border:         '#E4E0DA',
  bgWarm:         '#F5F2EC',   // cream page bg
  bgNear:         '#FAF9F7',
  bgSurface:      '#FFFFFF',
  // Greens — active palette
  deepForest:     '#1A2E1C',   // darkest — hero/footer bg
  forest:         '#1A3C34',   // primary green CTA
  forestHover:    '#1A2E1C',
  forestMid:      '#3A5C30',
  olive:          '#5C7A46',   // secondary green
  oliveHover:     '#4A6438',
  sage:           '#8A9E72',
  sageTint:       '#EDEBE0',   // light warm-sage bg sections
  // Aliases
  accent:         '#1A3C34',
  textPrimary:    '#1A1917',
  textSecondary:  '#7A7670',
  textMuted:      '#A8A4A0',
  bgPage:         '#F5F2EC',
};

// ---- Primitives ----

function Btn({ children, variant = 'primary', size = 'md', onClick, href, style = {} }) {
  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 8,
    fontFamily: "'DM Sans', sans-serif", fontWeight: 500,
    borderRadius: 2, cursor: 'pointer', transition: 'all 200ms ease-out',
    textDecoration: 'none', border: 'none', letterSpacing: '0.02em',
  };
  const sizes = {
    sm: { padding: '7px 16px', fontSize: 13 },
    md: { padding: '10px 22px', fontSize: 14 },
    lg: { padding: '14px 32px', fontSize: 16 },
  };
  const variants = {
    primary:   { background: TAO_COLORS.primary, color: 'white' },
    secondary: { background: 'white', color: TAO_COLORS.primary, border: `1.5px solid ${TAO_COLORS.primary}` },
    accent:    { background: TAO_COLORS.accent, color: 'white' },
    ghost:     { background: 'transparent', color: TAO_COLORS.primary, textDecoration: 'underline', textUnderlineOffset: 3, textDecorationColor: TAO_COLORS.accent, paddingLeft: 0 },
  };
  const [hov, setHov] = React.useState(false);
  const hoverMap = {
    primary: { background: TAO_COLORS.primaryHover },
    secondary: { background: TAO_COLORS.primary, color: 'white' },
    accent: { background: TAO_COLORS.accentHover },
    ghost: {},
  };
  const s = { ...base, ...sizes[size], ...variants[variant], ...(hov ? hoverMap[variant] : {}), ...style };
  return href
    ? <a href={href} style={s} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>{children}</a>
    : <button style={s} onClick={onClick} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}>{children}</button>;
}

function Icon({ name, size = 20, color = 'currentColor', strokeWidth = 1.5 }) {
  const icons = {
    arrow: <><path d="M5 12h14M12 5l7 7-7 7"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6 19.79 19.79 0 0 1 1.61 5a2 2 0 0 1 1.99-2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.3a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></>,
    map: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    star: <><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"/></>,
    users: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    globe: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
    menu: <><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    close: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    linkedin: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    facebook: <><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
  };
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
      {icons[name] || null}
    </svg>
  );
}

function Logo({ variant = 'dark', size = 'md' }) {
  const sizes = {
    sm: { mark: 28, wordmark: 14, sub: 7 },
    md: { mark: 36, wordmark: 18, sub: 8 },
    lg: { mark: 52, wordmark: 24, sub: 10 },
  };
  const s = sizes[size];
  const stroke = variant === 'dark' ? '#1A1917' : 'rgba(255,255,255,0.85)';
  const wordColor = variant === 'dark' ? '#1A1917' : '#FFFFFF';
  const subColor = variant === 'dark' ? TAO_COLORS.textMuted : 'rgba(255,255,255,0.45)';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      {/* Geometric mark: O=circle, T=cross, A=diagonals */}
      <svg width={s.mark} height={s.mark} viewBox="0 0 100 100" fill="none">
        <circle cx="50" cy="50" r="44" stroke={stroke} strokeWidth="2.2"/>
        <line x1="50" y1="6"  x2="50" y2="94" stroke={stroke} strokeWidth="2.2"/>
        <line x1="6"  y1="50" x2="94" y2="50" stroke={stroke} strokeWidth="2.2"/>
        <line x1="50" y1="6"  x2="14" y2="75" stroke={stroke} strokeWidth="2.2"/>
        <line x1="50" y1="6"  x2="86" y2="75" stroke={stroke} strokeWidth="2.2"/>
      </svg>
      <div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: s.wordmark, fontWeight: 300, color: wordColor, letterSpacing: '0.22em', lineHeight: 1, textTransform: 'uppercase' }}>TAO</div>
        <div style={{ fontFamily: "'DM Sans', sans-serif", fontSize: s.sub, fontWeight: 400, letterSpacing: '0.18em', color: subColor, textTransform: 'uppercase', marginTop: 3 }}>The Association Office</div>
      </div>
    </div>
  );
}

function Badge({ children, variant = 'green' }) {
  const styles = {
    green:   { background: TAO_COLORS.green100, color: TAO_COLORS.primary },
    gold:    { background: TAO_COLORS.gold100, color: '#8A5C0F', border: `1px solid #EDD5A8` },
    neutral: { background: TAO_COLORS.bgPage, color: TAO_COLORS.textSecondary, border: `1px solid ${TAO_COLORS.border}` },
    solid:   { background: TAO_COLORS.primary, color: 'white' },
  };
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', padding: '3px 10px', borderRadius: 2, fontSize: 11, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', fontFamily: "'DM Sans', sans-serif", ...styles[variant] }}>
      {children}
    </span>
  );
}

function Divider({ style = {} }) {
  return <div style={{ height: 1, background: TAO_COLORS.border, ...style }} />;
}

Object.assign(window, { Btn, Icon, Logo, Badge, Divider, TAO_COLORS });