/* global React */
const { useState } = React;

const Eyebrow = ({ children, style }) => (
  <div style={{
    fontSize: 12, fontWeight: 700, letterSpacing: '0.16em',
    textTransform: 'uppercase', color: 'var(--pond-mist)', ...style,
  }}>{children}</div>
);

const Button = ({ variant = 'primary', size = 'md', children, onClick, href, target, rel, style }) => {
  const [hover, setHover] = useState(false);
  const [press, setPress] = useState(false);

  const base = {
    display: 'inline-flex', alignItems: 'center', gap: 10,
    fontFamily: 'var(--font-display)', fontWeight: 800, letterSpacing: '0.04em',
    border: '2px solid var(--pond-white)', background: 'transparent', color: 'var(--pond-white)',
    cursor: 'pointer', textDecoration: 'none',
    transition: 'all 120ms var(--ease-out)',
    fontSize: size === 'sm' ? 12 : 14,
    padding: size === 'sm' ? '8px 14px' : '14px 22px',
    borderRadius: 0, userSelect: 'none',
  };
  const variants = {
    primary: {
      background: 'var(--pond-white)', color: 'var(--pond-black)', borderColor: 'var(--pond-white)',
      ...(hover && !press && { transform: 'translate(0,-1px)' }),
    },
    ghost: {
      background: 'transparent', color: 'var(--pond-white)',
      ...(hover && { background: 'var(--pond-white)', color: 'var(--pond-black)' }),
    },
    pop: {
      background: 'var(--pond-black)', color: 'var(--pond-white)',
      border: '2px solid var(--pond-white)',
      boxShadow: press ? '0 0 0 var(--pond-white)' : (hover ? '4px 4px 0 var(--pond-white)' : '6px 6px 0 var(--pond-white)'),
      transform: press ? 'translate(6px, 6px)' : (hover ? 'translate(2px, 2px)' : 'translate(0,0)'),
    },
  };
  const Tag = href ? 'a' : 'button';
  return (
    <Tag href={href} target={target} rel={rel} onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => { setHover(false); setPress(false); }}
      onMouseDown={() => setPress(true)}
      onMouseUp={() => setPress(false)}
      style={{ ...base, ...variants[variant], ...style }}>
      {children}
    </Tag>
  );
};

const Section = ({ children, style }) => (
  <section style={{ padding: '96px 32px', maxWidth: 1200, margin: '0 auto', ...style }}>{children}</section>
);

const Card = ({ children, pop = false, style }) => (
  <div style={{
    background: 'var(--pond-ink)', border: '1px solid var(--pond-stone)', padding: 32,
    ...(pop && { boxShadow: '6px 6px 0 var(--pond-white)' }), ...style,
  }}>{children}</div>
);

const Hairline = ({ style }) => (
  <div style={{ borderTop: '1px solid var(--pond-stone)', maxWidth: 1200, margin: '0 auto', ...style }} />
);

Object.assign(window, { Eyebrow, Button, Section, Card, Hairline });