// Shared primitives. Zen edition: lighter, sparser, no decorative dashes.

const Eyebrow = ({ children, tone = 'teal', style }) => {
  const color = tone === 'teal' ? '#2d6a7a' : tone === 'pale' ? 'rgba(95,160,176,0.55)' : '#7a8290';
  return (
    <div style={{
      fontFamily: "'Jost',sans-serif", fontWeight: 400, fontSize: '0.75rem',
      letterSpacing: '0.4em', textTransform: 'uppercase', color,
      marginBottom: '2rem', ...style,
    }}>{children}</div>
  );
};

const H2 = ({ children, onDark, style }) => (
  <h2 style={{
    fontFamily: "'Cormorant Garamond',serif", fontWeight: 500,
    fontSize: 'clamp(2.4rem,4vw,3.6rem)', lineHeight: 1.18,
    letterSpacing: '0.005em',
    color: onDark ? '#fbfaf5' : '#1a2b4a', marginBottom: '1.5rem', ...style,
  }}>{children}</h2>
);

const SecP = ({ children, onDark, style }) => (
  <p style={{
    fontFamily: "'Sarabun',sans-serif", fontWeight: 400, fontSize: '1.1rem',
    color: onDark ? 'rgba(251,250,245,0.7)' : '#4a5260', lineHeight: 1.85,
    maxWidth: 540, ...style,
  }}>{children}</p>
);

const Pill = ({ children, active }) => (
  <span style={{
    fontFamily: "'Jost',sans-serif", fontWeight: 300, fontSize: '0.6rem',
    letterSpacing: '0.18em', textTransform: 'uppercase',
    padding: '0.35rem 0',
    color: active ? '#2d6a7a' : '#7a8290',
    cursor: 'default',
  }}>{children}</span>
);

const Btn = ({ kind = 'ink', children, onClick, style }) => {
  const base = {
    fontFamily: "'Jost',sans-serif", fontSize: '0.82rem',
    letterSpacing: '0.25em', textTransform: 'uppercase',
    padding: '1rem 0', border: 'none', cursor: 'pointer',
    background: 'transparent',
    transition: 'color 0.4s, border-color 0.4s, opacity 0.4s',
  };
  const v = {
    ink:   { fontWeight: 500, color: '#1a2b4a', borderBottom: '2px solid #1a2b4a' },
    teal:  { fontWeight: 500, color: '#2d6a7a', borderBottom: '2px solid #2d6a7a' },
    white: { fontWeight: 500, color: '#fbfaf5', borderBottom: '2px solid #fbfaf5' },
    ghost: { fontWeight: 400, color: 'rgba(251,250,245,0.75)', borderBottom: '1px solid rgba(251,250,245,0.35)' },
  }[kind];
  const [h, setH] = React.useState(false);
  const hov = h ? { opacity: 0.6 } : {};
  return (
    <button onClick={onClick} style={{ ...base, ...v, ...hov, ...style }}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}>
      {children}
    </button>
  );
};

const Field = ({ label, children, onDark }) => (
  <div style={{ marginBottom: '1.6rem' }}>
    <label style={{
      fontFamily: "'Jost',sans-serif", fontWeight: 500, fontSize: '0.7rem',
      letterSpacing: '0.28em', textTransform: 'uppercase',
      color: onDark ? 'rgba(251,250,245,0.6)' : '#4a5260',
      marginBottom: '0.6rem', display: 'block',
    }}>{label}</label>
    {children}
  </div>
);

const inputStyle = (onDark) => ({
  width: '100%', padding: '0.75rem 0',
  border: 'none',
  borderBottom: `1px solid ${onDark ? 'rgba(251,250,245,0.15)' : 'rgba(26,43,74,0.18)'}`,
  borderRadius: 0,
  fontFamily: "'Sarabun',sans-serif", fontSize: '1.05rem', fontWeight: 400,
  color: onDark ? '#fbfaf5' : '#1a2b4a',
  background: 'transparent',
  outline: 'none', transition: 'border-color 0.3s',
});

const Wrap = ({ children, style, narrow }) => (
  <div style={{ maxWidth: narrow ? 980 : 1180, margin: '0 auto', padding: '0 5rem', ...style }}>{children}</div>
);

Object.assign(window, { Eyebrow, H2, SecP, Pill, Btn, Field, inputStyle, Wrap });