// primitives.jsx — shared building blocks (v2: strict simplification)
// Fewer primitives, bigger breathing room. No more stacked micro-labels.

// ---------- Button ----------
// GI Link Audit (Part 3): when href is present, the Button auto-emits
// data-gtm-event="cta_click" so the global click delegate in shared/jsx/gtm.jsx
// captures it without per-call wiring. Override by passing a `gtm` prop:
//   <Button href="/about/contact/" gtm={{ label: 'Custom', location: 'sol-x', stage: 'decision' }}>
// Or by passing explicit data-gtm-* attributes via {...rest}.
//
// Buttons WITHOUT href stay non-tracked (they typically toggle local state).
const Button = ({ variant = 'primary', size = 'md', children, href, gtm, ...rest }) => {
  const base = {
    fontFamily: 'var(--ff-sans)', fontWeight: 500, letterSpacing: '-0.005em',
    borderRadius: 4, cursor: 'pointer', border: '1px solid transparent',
    display: 'inline-flex', alignItems: 'center', gap: 10,
    transition: 'all 200ms cubic-bezier(.2,0,0,1)', textDecoration: 'none',
    whiteSpace: 'nowrap'
  };
  const sizeMap = {
    sm: { fontSize: 13, padding: '9px 16px' },
    md: { fontSize: 14, padding: '12px 22px' },
    lg: { fontSize: 15, padding: '16px 28px' }
  };
  const variants = {
    primary: { background: 'var(--gi-soft-green)', color: '#fff' },
    ink: { background: 'var(--gi-wise-blue)', color: '#fff' },
    outline: { background: 'transparent', color: 'var(--gi-wise-blue)', borderColor: 'rgba(15,33,51,.22)' },
    ghost: { background: 'transparent', color: 'var(--gi-wise-blue)', borderBottom: '1px solid currentColor', borderRadius: 0, padding: '6px 0' },
    onDark: { background: '#fff', color: 'var(--gi-wise-blue)' },
    outlineOnDark: { background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.35)' }
  };
  const hoverStyle = {
    primary: { background: '#2E4A39' },
    ink: { background: '#1B3159' },
    outline: { borderColor: 'var(--gi-sage-accent)' },
    ghost: { opacity: 0.6 },
    onDark: { background: 'rgba(255,255,255,0.92)' },
    outlineOnDark: { borderColor: 'rgba(255,255,255,0.7)' }
  };
  const [hover, setHover] = React.useState(false);
  const Tag = href ? 'a' : 'button';

  // Auto-track anchor variants. Caller can override by passing
  // data-gtm-* in `rest` (which spreads last and wins).
  const autoGtm = href ? {
    'data-gtm-event': 'cta_click',
    ...(gtm && gtm.label ?    { 'data-gtm-label': gtm.label } : {}),
    ...(gtm && gtm.location ? { 'data-gtm-location': gtm.location } : {}),
    ...(gtm && gtm.stage ?    { 'data-gtm-stage': gtm.stage } : {})
  } : {};

  return (
    <Tag
      href={href}
      style={{ ...base, ...sizeMap[size], ...variants[variant], ...(hover ? hoverStyle[variant] : {}) }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      {...autoGtm}
      {...rest}>
      
      {children}
    </Tag>);

};

// ---------- Eyebrow — used sparingly now ----------
// Color is driven by `.gi-eyebrow--green` / `.gi-eyebrow--gold` modifier
// classes (passed via `className`). The `onDark` prop and a caller-supplied
// `style.color` still win normally because they're applied via inline style.
const Eyebrow = ({ children, onDark = false, style, className }) =>
<span className={['gi-eyebrow', className].filter(Boolean).join(' ')} style={{
  fontFamily: 'var(--ff-mono)', fontSize: 11, lineHeight: '16px',
  letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500,
  ...(onDark ? { color: '#D4A24C' } : null),
  ...style, color: "rgb(94, 143, 109)"
}}>{children}</span>;


// ---------- SectionHeader — the ONE header pattern ----------
// Single H2 + optional one-line supporting sentence. Nothing else.
const SectionHeader = ({
  eyebrow, // optional — used on 1–2 top-level sections only
  eyebrowClassName, // optional — forwarded to inner <Eyebrow> (e.g. 'gi-eyebrow--green')
  title, // required
  sub, // optional — single short sentence
  onDark = false,
  align = 'split', // 'split' = title left, sub right | 'stack' = both left, stacked
  maxTitle = 760,
  maxSub = 480
}) => {
  const colorTitle = onDark ? '#fff' : 'var(--gi-deep-ink)';
  const colorSub = onDark ? 'rgba(255,255,255,0.72)' : 'var(--gi-slate)';

  if (align === 'stack' || !sub) {
    return (
      <div style={{ maxWidth: maxTitle }}>
        {eyebrow && <div style={{ marginBottom: 20 }}><Eyebrow onDark={onDark} className={eyebrowClassName}>{eyebrow}</Eyebrow></div>}
        <h2 style={{
          font: '500 56px/60px var(--ff-sans)', letterSpacing: '-0.028em',
          color: colorTitle, margin: 0, textWrap: 'balance'
        }}>{title}</h2>
        {sub &&
        <p style={{
          font: '400 18px/28px var(--ff-sans)', color: colorSub,
          margin: '20px 0 0', maxWidth: maxSub, textWrap: 'pretty'
        }}>{sub}</p>
        }
      </div>);

  }

  // 'split' — title left (dominant), one-line sub right-aligned
  return (
    <div className="gi-section-head" style={{
      display: 'flex', gap: 80,
      alignItems: 'flex-end', justifyContent: 'space-between'
    }}>
      <div>
        {eyebrow && <div style={{ marginBottom: 20 }}><Eyebrow onDark={onDark} className={eyebrowClassName}>{eyebrow}</Eyebrow></div>}
        <h2 style={{
          font: '500 56px/60px var(--ff-sans)', letterSpacing: '-0.028em',
          color: colorTitle, margin: 0, textWrap: 'balance', maxWidth: maxTitle
        }}>{title}</h2>
      </div>
      <p style={{
        font: '400 17px/28px var(--ff-sans)', color: colorSub,
        margin: 0, maxWidth: maxSub, textWrap: 'pretty', paddingBottom: 6
      }}>{sub}</p>
    </div>);

};

// ---------- Icon wrapper (Lucide, 1.5 stroke) ----------
const Icon = ({ name, size = 24, color = 'var(--gi-sage-accent)', style }) => {
  React.useEffect(() => {
    const t = setTimeout(() => window.lucide && window.lucide.createIcons({ attrs: { 'stroke-width': 1.5 } }), 10);
    return () => clearTimeout(t);
  }, [name]);
  return (
    <i data-lucide={name} style={{
      width: size, height: size, display: 'inline-flex',
      color, strokeWidth: 1.5, ...style
    }} />);

};

// ---------- No-op shims (so any stray references don't break) ----------
const RunHead = () => null;
const FigCaption = () => null;
const ls = (s) => s;

Object.assign(window, { Button, Eyebrow, SectionHeader, Icon, RunHead, FigCaption, ls });