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

const Eyebrow = ({ children, style }) => (
  <span style={{
    fontSize: 12, fontWeight: 500, textTransform: 'uppercase',
    letterSpacing: '0.12em', color: 'var(--fg-2)', display: 'inline-block',
    ...style,
  }}>{children}</span>
);

const Button = ({ variant = 'primary', children, href, onClick, type = 'button', style, icon }) => {
  const [hover, setHover] = useState(false);
  const base = {
    fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 15,
    padding: '14px 22px', borderRadius: 'var(--r-1)', cursor: 'pointer',
    border: '1px solid transparent', transition: 'all var(--dur-base) var(--ease-out)',
    display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none',
    lineHeight: 1, whiteSpace: 'nowrap',
  };
  const variants = {
    primary:   { background: 'var(--latus-dark-blue)', color: 'var(--latus-off-white)' },
    secondary: { background: 'transparent', color: 'var(--latus-dark-blue)', borderColor: 'var(--latus-dark-blue)' },
    ghost:     { background: 'transparent', color: 'var(--latus-dark-blue)' },
    inverse:   { background: 'var(--latus-off-white)', color: 'var(--latus-dark-blue)' },
  };
  const hovers = {
    primary:   { background: '#01153D' },
    secondary: { background: 'var(--latus-dark-blue)', color: 'var(--latus-off-white)' },
    ghost:     { background: 'var(--latus-n-10)' },
    inverse:   { background: 'var(--latus-light-blue)' },
  };
  const merged = { ...base, ...variants[variant], ...(hover ? hovers[variant] : {}), ...style };
  const inner = (
    <>
      <span>{children}</span>
      {icon && <span style={{ display: 'inline-flex', alignItems: 'center', transform: hover ? 'translateX(2px)' : 'none', transition: 'transform var(--dur-base) var(--ease-out)' }}>{icon}</span>}
    </>
  );
  if (href) {
    return <a href={href} style={merged}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>{inner}</a>;
  }
  return (
    <button type={type} onClick={onClick} style={merged}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>{inner}</button>
  );
};

const Chip = ({ children, tone = 'default' }) => {
  const tones = {
    default: { background: 'var(--bg-1)', color: 'var(--fg-1)', borderColor: 'var(--line-1)' },
    soft:    { background: 'var(--latus-light-blue)', color: 'var(--latus-dark-blue)', borderColor: 'transparent' },
    ink:     { background: 'var(--latus-dark-blue)', color: 'var(--latus-off-white)', borderColor: 'transparent' },
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '6px 12px',
      borderRadius: 'var(--r-pill)',
      border: '1px solid',
      fontSize: 13, fontWeight: 400, lineHeight: 1.2,
      letterSpacing: 0,
      ...tones[tone],
    }}>{children}</span>
  );
};

// Small arrow used in CTAs
const ArrowRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 8h10"/><path d="M9 4l4 4-4 4"/>
  </svg>
);

const ArrowUpRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M5 11L11 5"/><path d="M6 5h5v5"/>
  </svg>
);

const SectionHead = ({ index, title, kicker }) => (
  <div className="section-head reveal">
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--s-5)', flexWrap: 'wrap' }}>
      <span className="section-head__index">{index}</span>
      <h2 className="section-head__title">{title}</h2>
    </div>
    {kicker && <span className="micro" style={{ color: 'var(--fg-3)' }}>{kicker}</span>}
  </div>
);

Object.assign(window, { Eyebrow, Button, Chip, ArrowRight, ArrowUpRight, SectionHead });