/* ─── Shared UI Components — Sufficient Certainty ─── */

/* Button */
const Button = ({ children, variant = 'primary', size = 'md', onClick, style, disabled, href }) => {
  const base = {
    fontFamily: 'var(--font-sans)',
    fontWeight: 'var(--btn-weight)',
    borderRadius: 'var(--btn-radius)',
    cursor: disabled ? 'default' : 'pointer',
    border: 'none',
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '6px',
    transition: 'background var(--duration-fast) var(--easing), border-color var(--duration-fast) var(--easing), color var(--duration-fast) var(--easing)',
    opacity: disabled ? 0.5 : 1,
    whiteSpace: 'nowrap',
    textDecoration: 'none',
    lineHeight: 1.2,
  };
  const sizes = {
    sm: { fontSize: '12px', padding: '6px 14px' },
    md: { fontSize: 'var(--btn-size)', padding: 'var(--btn-padding)' },
    lg: { fontSize: '15px', padding: '12px 32px' },
  };
  const variants = {
    primary: { background: 'var(--accent)', color: '#fff' },
    secondary: { background: 'transparent', color: 'var(--fg-primary)', border: '1px solid var(--border)' },
    ghost: { background: 'transparent', color: 'var(--accent)', border: '1px solid transparent' },
    dark: { background: 'var(--fg-primary)', color: 'var(--bg-primary)' },
  };

  const [hovered, setHovered] = React.useState(false);
  const hoverStyle = hovered && !disabled ? (
    variant === 'primary' ? { background: 'var(--accent-hover)' } :
    variant === 'dark' ? { background: '#333' } :
    variant === 'secondary' ? { borderColor: 'var(--border-strong)' } :
    { color: 'var(--accent-hover)' }
  ) : {};

  const props = {
    onClick: disabled ? undefined : onClick,
    onMouseEnter: () => setHovered(true),
    onMouseLeave: () => setHovered(false),
    style: { ...base, ...sizes[size], ...variants[variant], ...hoverStyle, ...style },
  };

  if (href) return React.createElement('a', { ...props, href }, children);
  return React.createElement('button', props, children);
};

/* Overline / Section Label */
const Overline = ({ children, style }) => {
  return React.createElement('span', {
    style: {
      fontFamily: 'var(--font-sans)',
      fontSize: 'var(--label-size)',
      fontWeight: 'var(--label-weight)',
      letterSpacing: 'var(--label-tracking)',
      textTransform: 'uppercase',
      color: 'var(--fg-tertiary)',
      display: 'block',
      ...style,
    }
  }, children);
};

/* Divider */
const Divider = ({ spacing = 0 }) => {
  return React.createElement('hr', {
    style: {
      border: 'none',
      borderTop: '1px solid var(--border-light)',
      margin: typeof spacing === 'number' && spacing === 0 ? '0' : `${spacing} 0`,
    }
  });
};

/* Section wrapper — max-width + padding + safe areas */
const Section = ({ children, style, width = '700px', id, bg }) => {
  return React.createElement('section', {
    id,
    style: {
      background: bg || 'transparent',
      ...(bg ? { padding: '0' } : {}),
    }
  },
    React.createElement('div', {
      style: {
        maxWidth: width,
        margin: '0 auto',
        padding: '0 var(--space-6)',
        paddingLeft: 'calc(var(--space-6) + var(--safe-left, 0px))',
        paddingRight: 'calc(var(--space-6) + var(--safe-right, 0px))',
        ...style,
      }
    }, children)
  );
};

/* Responsive helper — returns different content based on window width */
const useMediaQuery = (maxWidth) => {
  const [matches, setMatches] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth <= maxWidth : false
  );
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${maxWidth}px)`);
    const handler = (e) => setMatches(e.matches);
    setMatches(mq.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, [maxWidth]);
  return matches;
};

Object.assign(window, { Button, Overline, Divider, Section, useMediaQuery });