/* Finch pitch deck — shared atoms, tokens, and icons. */

const C = {
  bg: '#F9F9F8', card: '#FFFFFF', chip: '#F0F0ED', accent: '#E8E8E5',
  border: '#E5E5E2', borderStr: '#D9D9D5',
  fg: '#0D0D0D', fg2: '#525252', fg3: '#737373',
  primary: '#F15A29', primaryHover: '#D94D20',
  tint: 'rgba(241,90,41,0.10)', tintStr: 'rgba(241,90,41,0.15)',
  dark: '#0D0D0D', darkCard: '#1A1A1A', darkBord: '#2A2A2A',
  atsStrong: '#059669',
};

const TYPE = {
  eyebrow: 18, small: 24, body: 30, bodyLg: 34,
  subtitle: 48, title: 80, titleLg: 96, display: 128, mega: 200,
};

const S = { px: 100, py: 96, gap: 48, titleGap: 56, itemGap: 28 };

/* ---------- Atoms ---------- */

const Eyebrow = ({ children, style, color }) => (
  <div style={{
    fontSize: TYPE.eyebrow, fontWeight: 600, letterSpacing: '0.18em',
    textTransform: 'uppercase', color: color || C.primary, ...style,
  }}>{children}</div>
);

const Accent = ({ children, color }) => (
  <span style={{
    fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 500,
    color: color || C.primary,
  }}>{children}</span>
);

const Title = ({ children, color, size, style }) => (
  <h1 style={{
    fontSize: size || TYPE.title, fontWeight: 600, letterSpacing: '-0.025em',
    lineHeight: 1.05, color: color || C.fg, margin: 0,
    textWrap: 'balance', ...style,
  }}>{children}</h1>
);

const Subtitle = ({ children, color, size, style }) => (
  <div style={{
    fontSize: size || TYPE.bodyLg, fontWeight: 400, lineHeight: 1.4,
    color: color || C.fg2, maxWidth: 1200, textWrap: 'pretty',
    ...style,
  }}>{children}</div>
);

const Pill = ({ children, dark, style }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 10,
    padding: '10px 18px', borderRadius: 999,
    background: dark ? 'rgba(241,90,41,0.12)' : C.tint,
    color: C.primary, fontSize: TYPE.eyebrow, fontWeight: 600,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    border: `1px solid ${C.tintStr}`,
    ...style,
  }}>{children}</span>
);

const LivePill = ({ label = 'LIVE' }) => (
  <span style={{
    display: 'inline-flex', alignItems: 'center', gap: 6,
    fontSize: 13, fontWeight: 600, letterSpacing: '0.12em',
    color: C.atsStrong, textTransform: 'uppercase',
  }}>
    <span style={{ width: 7, height: 7, borderRadius: '50%', background: C.atsStrong, boxShadow: `0 0 0 4px rgba(5,150,105,0.15)` }} />
    {label}
  </span>
);

const SoonPill = () => (
  <span style={{
    fontSize: 13, fontWeight: 600, letterSpacing: '0.12em',
    color: C.fg3, textTransform: 'uppercase',
  }}>SOON</span>
);

const SlideFrame = ({ children, dark, pad, noFooter, idx, total = 9 }) => {
  const bg = dark ? C.dark : C.bg;
  const fg = dark ? '#F9F9F8' : C.fg;
  const footerColor = dark ? 'rgba(249,249,248,0.45)' : C.fg3;
  return (
    <div style={{
      position: 'absolute', inset: 0, background: bg, color: fg,
      fontFamily: 'var(--font-sans)',
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
    }}>
      {/* Orange top bar */}
      <div style={{ height: 6, background: C.primary, flexShrink: 0 }} />
      <div style={{
        flex: 1, padding: pad || `${S.py}px ${S.px}px`,
        display: 'flex', flexDirection: 'column', minHeight: 0,
        position: 'relative',
      }}>
        {children}
      </div>
      {!noFooter && idx != null && (
        <DeckFooter idx={idx} total={total} dark={dark} color={footerColor} />
      )}
    </div>
  );
};

const DeckFooter = ({ idx, total = 9, dark, color }) => (
  <div style={{
    position: 'absolute', left: S.px, right: S.px, bottom: 36,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 16, fontWeight: 500, color: color,
    fontVariantNumeric: 'tabular-nums',
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
      <img src="assets/logo.png" alt="finch" style={{ height: 22, opacity: dark ? 0.75 : 0.85, filter: dark ? 'none' : 'none' }} />
      <span style={{ color: color, opacity: 0.6 }}>·</span>
      <span>applyfinch.com</span>
    </div>
    <div>{String(idx).padStart(2, '0')} / {String(total).padStart(2, '0')}</div>
  </div>
);

/* ---------- Icons (Lucide-weight, 2px stroke) ---------- */

const Icon = ({ size = 22, stroke = C.primary, children, style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
       stroke={stroke} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
       style={style}>{children}</svg>
);

const IconUser = (p) => <Icon {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></Icon>;
const IconFile = (p) => <Icon {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M8 13h8"/><path d="M8 17h5"/></Icon>;
const IconMail = (p) => <Icon {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></Icon>;
const IconEdit = (p) => <Icon {...p}><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z"/></Icon>;
const IconChrome = (p) => <Icon {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/><path d="M21.2 8H12"/><path d="m3.9 7 5.1 8.8"/><path d="m14.1 15.8 4-8.8"/></Icon>;
const IconNetwork = (p) => <Icon {...p}><circle cx="12" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M12 7v4"/><path d="m10.5 12-4 5.3"/><path d="m13.5 12 4 5.3"/><circle cx="12" cy="12" r="1.5"/></Icon>;
const IconCheck = (p) => <Icon {...p}><path d="m5 12 5 5 9-11"/></Icon>;
const IconArrow = (p) => <Icon {...p}><path d="M5 12h14"/><path d="m13 5 7 7-7 7"/></Icon>;
const IconSearch = (p) => <Icon {...p}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></Icon>;
const IconSort = (p) => <Icon {...p}><path d="M3 6h18"/><path d="M6 12h12"/><path d="M10 18h4"/></Icon>;
const IconSparkle = (p) => <Icon {...p}><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="m5.6 5.6 2.8 2.8"/><path d="m15.6 15.6 2.8 2.8"/><path d="m5.6 18.4 2.8-2.8"/><path d="m15.6 8.4 2.8-2.8"/></Icon>;
const IconGauge = (p) => <Icon {...p}><path d="M12 14v-3"/><path d="M18.4 18.4A9 9 0 1 0 5.6 18.4"/><circle cx="12" cy="14" r="1"/></Icon>;
const IconSend = (p) => <Icon {...p}><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></Icon>;

/* ---------- Reusable bits ---------- */

const SectionLabel = ({ n, total, children, dark }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 18, marginBottom: 24 }}>
    <div style={{
      width: 44, height: 44, borderRadius: 8,
      background: C.tint, color: C.primary,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 18, fontWeight: 700, fontVariantNumeric: 'tabular-nums',
      border: `1px solid ${C.tintStr}`,
    }}>{n}{total ? <span style={{fontSize: 13, opacity: 0.55, marginLeft: 2}}>/{total}</span> : null}</div>
    <div style={{
      fontSize: TYPE.eyebrow, fontWeight: 600, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: dark ? 'rgba(249,249,248,0.75)' : C.fg,
      whiteSpace: 'nowrap',
    }}>{children}</div>
    <div style={{ flex: 1, height: 1, background: dark ? C.darkBord : C.border }} />
  </div>
);

Object.assign(window, {
  C, TYPE, S,
  Eyebrow, Accent, Title, Subtitle, Pill, LivePill, SoonPill,
  SlideFrame, DeckFooter, SectionLabel,
  Icon, IconUser, IconFile, IconMail, IconEdit, IconChrome, IconNetwork,
  IconCheck, IconArrow, IconSearch, IconSort, IconSparkle, IconGauge, IconSend,
});