// Tiploy Landing — shared primitives (scoped names, exported to window)

const tpTokens = {
  bg: '#f4f5f7',
  bgDeep: '#eceff2',
  card: '#ffffff',
  ink: '#20242a',
  muted: '#5b6470',
  line: '#d7dde5',
  lineStrong: '#c3ccd7',
  accent: '#245f4c',
  accentSoft: '#edf5f2',
  accentBorder: '#cfe2da',
  warning: '#8a4b19',
  warningSoft: '#fff4ea',
  warningBorder: '#efcfb7',
  navy: '#1e3a52',
  coral: '#e05c4b',
  gold: '#e8a020',
};

// Theme hook: reads from context
const TpThemeCtx = React.createContext({ accent: tpTokens.accent, accentSoft: tpTokens.accentSoft, accentBorder: tpTokens.accentBorder, accentFg: '#fff', name: 'green' });
const useTp = () => React.useContext(TpThemeCtx);

const ACCENT_THEMES = {
  green: { accent: '#245f4c', accentSoft: '#edf5f2', accentBorder: '#cfe2da', accentFg: '#fff', label: 'Forest' },
  navy:  { accent: '#1e3a52', accentSoft: '#eaf0f5', accentBorder: '#c8d4e0', accentFg: '#fff', label: 'Navy' },
  coral: { accent: '#c4432f', accentSoft: '#fdece9', accentBorder: '#f2c7bf', accentFg: '#fff', label: 'Coral' },
  gold:  { accent: '#a97307', accentSoft: '#fdf3df', accentBorder: '#ecd5a6', accentFg: '#fff', label: 'Gold' },
};

function TpEyebrow({ children, tone = 'muted', style = {} }) {
  const t = useTp();
  const color = tone === 'accent' ? t.accent : tpTokens.muted;
  return (
    <p style={{ margin: 0, color, fontSize: 12, fontWeight: 700, letterSpacing: '.09em', textTransform: 'uppercase', ...style }}>
      {children}
    </p>
  );
}

function TpChip({ children, variant = 'default', style = {} }) {
  const t = useTp();
  const variants = {
    default: { bg: '#f7f9fb', fg: tpTokens.ink, bd: tpTokens.line },
    accent:  { bg: t.accentSoft, fg: t.accent, bd: t.accentBorder },
    navy:    { bg: '#eaf0f5', fg: tpTokens.navy, bd: '#c8d4e0' },
    warn:    { bg: tpTokens.warningSoft, fg: tpTokens.warning, bd: tpTokens.warningBorder },
    ghost:   { bg: 'transparent', fg: tpTokens.muted, bd: tpTokens.line },
  };
  const v = variants[variant] || variants.default;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6, padding: '5px 10px',
      borderRadius: 8, border: `1px solid ${v.bd}`, background: v.bg, color: v.fg,
      fontSize: 12, fontWeight: 600, lineHeight: 1.2, ...style,
    }}>{children}</span>
  );
}

function TpButton({ children, variant = 'primary', size = 'md', as = 'button', href, onClick, style = {} }) {
  const t = useTp();
  const sizes = {
    sm: { padding: '7px 12px', fontSize: 13 },
    md: { padding: '10px 16px', fontSize: 14 },
    lg: { padding: '13px 20px', fontSize: 15 },
  };
  const variants = {
    primary: { bg: t.accent, fg: t.accentFg, bd: t.accent },
    ghost:   { bg: '#fff', fg: tpTokens.ink, bd: tpTokens.line },
    navy:    { bg: tpTokens.navy, fg: '#fff', bd: tpTokens.navy },
    link:    { bg: 'transparent', fg: t.accent, bd: 'transparent' },
  };
  const v = variants[variant] || variants.primary;
  const s = sizes[size] || sizes.md;
  const base = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    fontFamily: 'inherit', fontWeight: 700, borderRadius: 8,
    border: `1px solid ${v.bd}`, background: v.bg, color: v.fg, cursor: 'pointer',
    lineHeight: 1.2, textDecoration: 'none', transition: 'filter 120ms ease, transform 120ms ease',
    ...s, ...style,
  };
  if (as === 'a') {
    return <a href={href} onClick={onClick} style={base}>{children}</a>;
  }
  return <button onClick={onClick} style={base}>{children}</button>;
}

function TpPanel({ children, style = {}, tone = 'white' }) {
  const bg = tone === 'white' ? '#fff' : tone === 'subtle' ? '#fbfcfd' : tone;
  return (
    <section style={{
      background: bg, border: `1px solid ${tpTokens.line}`, borderRadius: 14,
      boxShadow: '0 8px 20px rgba(34,45,60,.05)', padding: 20, ...style,
    }}>{children}</section>
  );
}

// Tiny arrow glyph used inside links/CTAs
function TpArrow({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Section wrapper: max width + vertical rhythm
function TpSection({ id, children, tone = 'default', style = {} }) {
  const bgMap = {
    default: 'transparent',
    subtle:  tpTokens.bgDeep,
    navy:    tpTokens.navy,
    cream:   '#fdf8ef',
    paper:   '#faf7f1',
  };
  return (
    <section id={id} style={{ background: bgMap[tone] || tone, padding: '72px 0', ...style }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 24px' }}>
        {children}
      </div>
    </section>
  );
}

// Section header
function TpSectionHeader({ eyebrow, title, lede, align = 'left', maxWidth = 680 }) {
  return (
    <header style={{ textAlign: align, marginBottom: 40, maxWidth, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0 }}>
      {eyebrow && <TpEyebrow tone="accent" style={{ marginBottom: 10 }}>{eyebrow}</TpEyebrow>}
      <h2 style={{
        margin: 0, fontFamily: 'var(--font-display)',
        fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.08, letterSpacing: '-0.02em',
        fontWeight: 800, color: tpTokens.ink, textWrap: 'balance',
      }}>{title}</h2>
      {lede && (
        <p style={{
          margin: '14px 0 0', color: tpTokens.muted, fontSize: 17, lineHeight: 1.55,
          maxWidth: 620, marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0,
          textWrap: 'pretty',
        }}>{lede}</p>
      )}
    </header>
  );
}

// Icon container — flat, matches Tiploy style (no fills, text-first, but usable in features)
function TpIconTile({ children, style = {} }) {
  const t = useTp();
  return (
    <div style={{
      width: 38, height: 38, borderRadius: 8, background: t.accentSoft,
      border: `1px solid ${t.accentBorder}`, color: t.accent,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, ...style,
    }}>{children}</div>
  );
}

Object.assign(window, {
  tpTokens, TpThemeCtx, useTp, ACCENT_THEMES,
  TpEyebrow, TpChip, TpButton, TpPanel, TpArrow,
  TpSection, TpSectionHeader, TpIconTile,
});