/* global React */

function Icon({ name, size = 20, stroke = 1.75, style }) {
  const paths = {
    'arrow-right': <><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></>,
    'arrow-up-right': <><path d="M7 17 17 7"/><path d="M7 7h10v10"/></>,
    'arrow-down-right': <><path d="m7 7 10 10"/><path d="M17 7v10H7"/></>,
    'check': <><path d="M20 6 9 17l-5-5"/></>,
    'target': <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
    'chart': <><path d="M3 3v18h18"/><path d="m7 15 4-4 4 4 5-6"/></>,
    'zap': <><path d="M4 14h7l-3 7 10-13h-7l3-7z"/></>,
    'users': <><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></>,
    'mail': <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></>,
    'calendar': <><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></>,
    'play': <><polygon points="6 3 20 12 6 21 6 3"/></>,
    'menu': <><path d="M4 6h16M4 12h16M4 18h16"/></>,
    'sparkles': <><path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3z"/></>,
    'brain': <><path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15A2.5 2.5 0 0 1 9.5 22 2.5 2.5 0 0 1 7 19.5a2.5 2.5 0 0 1-2.5-2.5 2.5 2.5 0 0 1-1.5-2.3 2.5 2.5 0 0 1 1.5-2.2 2.5 2.5 0 0 1-.5-1.5 2.5 2.5 0 0 1 .5-1.5A2.5 2.5 0 0 1 3 7.5 2.5 2.5 0 0 1 5.5 5 2.5 2.5 0 0 1 7 2.7 2.5 2.5 0 0 1 9.5 2Z"/><path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15A2.5 2.5 0 0 0 14.5 22a2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 2.5-2.5 2.5 2.5 0 0 0 1.5-2.3 2.5 2.5 0 0 0-1.5-2.2 2.5 2.5 0 0 0 .5-1.5 2.5 2.5 0 0 0-.5-1.5A2.5 2.5 0 0 0 21 7.5 2.5 2.5 0 0 0 18.5 5 2.5 2.5 0 0 0 17 2.7 2.5 2.5 0 0 0 14.5 2Z"/></>,
    'megaphone': <><path d="m3 11 18-5v12L3 14v-3z"/><path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"/></>,
    'search': <><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>,
    'graduation': <><path d="M22 10v6"/><path d="M2 10l10-5 10 5-10 5z"/><path d="M6 12v5c3 3 9 3 12 0v-5"/></>,
    'film': <><rect x="2" y="2" width="20" height="20" rx="2.5"/><path d="M7 2v20M17 2v20M2 12h20M2 7h5M2 17h5M17 17h5M17 7h5"/></>,
    'home': <><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></>,
    'shopping': <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></>,
    'credit-card': <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/></>,
    'heart': <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></>,
    'scale': <><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1"/><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1"/><path d="M7 21h10"/><path d="M12 3v18"/><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"/></>,
    'server': <><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/></>,
    'rocket': <><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="M12 15 9 12a16 16 0 0 1 9-9c1 0 2 1 2 3a16 16 0 0 1-9 9z"/><path d="M9 12v0a6 6 0 0 0-3 5h3"/><path d="M12 15v0a6 6 0 0 0 5-3v3"/></>,
    'globe': <><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></>,
    'briefcase': <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></>,
    'compass': <><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></>,
    'message': <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    'clipboard': <><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></>,
    'quote': <><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h2c0 3-1 5-3 5z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h2c0 3-1 5-3 5z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" aria-hidden style={style}>
      {paths[name]}
    </svg>
  );
}

function Button({ variant = 'primary', size = 'md', children, icon, iconLeft, ...p }) {
  const base = {
    fontFamily: 'var(--font-body)', fontWeight: 600, border: 0, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8, lineHeight: 1,
    borderRadius: 999, letterSpacing: '-0.005em',
    transition: 'transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
    whiteSpace: 'nowrap',
  };
  const sizes = {
    sm: { padding: '9px 16px', fontSize: 13 },
    md: { padding: '13px 22px', fontSize: 15 },
    lg: { padding: '16px 28px', fontSize: 16 },
  };
  const variants = {
    cta: { background: 'var(--cta)', color: 'var(--teal-900)', boxShadow: 'var(--shadow-cta)' },
    primary: { background: 'var(--brand)', color: '#fff', boxShadow: 'var(--shadow-brand)' },
    ghost: { background: 'transparent', color: 'var(--brand)', border: '1px solid var(--teal-200)' },
    text: { background: 'transparent', color: 'var(--brand)', padding: '8px 4px' },
    inverse: { background: '#fff', color: 'var(--teal-800)' },
    dark: { background: 'var(--teal-900)', color: '#fff' },
  };
  return (
    <button {...p} style={{ ...base, ...sizes[size], ...variants[variant], ...(p.style || {}) }}
      onMouseEnter={e => { if (variant === 'cta' || variant === 'primary') e.currentTarget.style.transform = 'translateY(-1px)'; }}
      onMouseLeave={e => { e.currentTarget.style.transform = ''; }}>
      {iconLeft && <Icon name={iconLeft} size={16} />}
      {children}
      {icon && <Icon name={icon} size={16} />}
    </button>
  );
}

function Eyebrow({ children, dark, color }) {
  return (
    <span style={{
      fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
      color: color || (dark ? 'var(--cyan-300)' : 'var(--brand)'),
    }}>{children}</span>
  );
}

function Badge({ children, tone = 'brand' }) {
  const tones = {
    brand:   { bg: 'var(--teal-50)',   fg: 'var(--teal-700)' },
    accent:  { bg: 'var(--cyan-50)',   fg: 'var(--cyan-800)' },
    cta:     { bg: 'var(--yellow-50)', fg: 'var(--yellow-800)' },
    neutral: { bg: 'var(--ink-100)',   fg: 'var(--ink-700)' },
    dark:    { bg: 'rgba(255,255,255,0.1)', fg: 'rgba(255,255,255,0.92)' },
  };
  const t = tones[tone];
  return <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999,
    fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
    background: t.bg, color: t.fg,
  }}>{children}</span>;
}

function Droplets({ color = 'var(--teal-100)', opacity = 0.55, style, size = 180 }) {
  return (
    <div style={{ position: 'absolute', pointerEvents: 'none', ...style }}>
      <svg width={size} height={size} viewBox="0 0 180 180" fill={color} style={{ opacity }}>
        <ellipse cx="60" cy="50" rx="26" ry="34" transform="rotate(-10 60 50)"/>
        <ellipse cx="110" cy="78" rx="16" ry="22" transform="rotate(8 110 78)"/>
        <ellipse cx="40" cy="100" rx="12" ry="16" transform="rotate(-22 40 100)"/>
        <ellipse cx="140" cy="120" rx="8" ry="11" transform="rotate(14 140 120)"/>
      </svg>
    </div>
  );
}

// Container shorthand
function Container({ children, style, maxW = 1200 }) {
  return <div style={{ maxWidth: maxW, margin: '0 auto', padding: '0 32px', ...style }}>{children}</div>;
}

Object.assign(window, { Icon, Button, Eyebrow, Badge, Droplets, Container });