/* Soph deck — slides 1–4: cover, mirror, shift, receipts.
   Reframe: "scrappy → serious," not "defend the spend."
   Footers: page label only on the left, no name on the right. */

const C = {
  paper:    'hsl(40, 30%, 98%)',
  bone:     'hsl(40, 25%, 95%)',
  panel:    'hsl(40, 18%, 93%)',
  ink:      'hsl(220, 14%, 11%)',
  carbon:   'hsl(220, 14%, 9%)',
  graphite: 'hsl(220, 8%, 32%)',
  mute:     'hsl(220, 6%, 50%)',
  hairline: 'hsl(220, 10%, 88%)',
  rule:     'hsl(220, 10%, 82%)',
  accent:   'hsl(195, 100%, 50%)',
  accentInk:'hsl(195, 100%, 32%)',
  success:  'hsl(142, 76%, 36%)',
  warn:     'hsl(38, 92%, 50%)',
  destruct: 'hsl(0, 84%, 60%)',
};

const fonts = {
  display: '"Sora", "Inter", system-ui, sans-serif',
  body:    '"Inter", system-ui, -apple-system, sans-serif',
  mono:    '"JetBrains Mono", "SF Mono", monospace',
};

// Larger scale — slides feel airier with bigger type and less of it.
const TYPE_SCALE = {
  hero:     176,
  title:    104,
  subtitle: 36,
  lede:     28,
  body:     20,
  small:    16,
  micro:    12,
};

const SPACING = {
  padX: 120,
  padTop: 96,
  padBottom: 110,
  titleGap: 56,
};

const Frame = ({ children, bg = C.paper, ink = C.ink, style = {}, padBottom }) => (
  <div style={{
    width: 1920, height: 1080, background: bg, color: ink,
    paddingLeft: SPACING.padX, paddingRight: SPACING.padX,
    paddingTop: SPACING.padTop, paddingBottom: padBottom || SPACING.padBottom,
    boxSizing: 'border-box',
    fontFamily: fonts.body,
    display: 'flex', flexDirection: 'column',
    ...style,
  }}>
    {children}
  </div>
);

const Eyebrow = ({ children, color = C.mute }) => (
  <div style={{
    fontFamily: fonts.body, fontSize: TYPE_SCALE.micro, fontWeight: 600,
    letterSpacing: '0.16em', textTransform: 'uppercase', color,
  }}>{children}</div>
);

// Real Justify mark from /assets/icons/appJustify.svg, inlined so we can
// recolor via CSS currentColor.
const JustifyMark = ({ size = 36, color = C.ink }) => (
  <svg width={size} height={size} viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <g transform="translate(0,256) scale(0.1,-0.1)" fill={color} stroke="none">
      <path d="M1025 2526 c-421 -89 -769 -383 -924 -780 -151 -386 -106 -821 122 -1168 74 -113 241 -283 347 -353 223 -148 447 -216 715 -216 262 0 486 65 697 204 288 188 481 473 555 817 25 119 25 381 0 500 -55 257 -177 479 -364 662 -183 179 -415 299 -667 343 -135 23 -345 19 -481 -9z m615 -570 c165 -87 164 -327 -2 -410 -184 -92 -383 75 -328 275 13 48 75 118 124 140 60 27 150 25 206 -5z m-642 -575 c18 -107 77 -274 142 -405 33 -66 60 -121 60 -122 0 -6 -166 68 -209 93 -50 29 -56 25 -67 -45 -19 -126 73 -254 202 -283 112 -25 218 25 278 131 l31 55 3 320 3 320 110 0 109 0 0 -290 c0 -329 -7 -391 -54 -490 -41 -85 -88 -141 -161 -189 -176 -118 -398 -109 -560 22 -241 194 -239 518 6 841 35 46 68 90 74 98 17 22 20 16 33 -56z" />
      <path d="M1492 1814 c-49 -34 -48 -97 2 -130 75 -48 155 58 91 121 -28 29 -61 32 -93 9z" />
    </g>
  </svg>
);

const Wordmark = ({ inverted = false, size = 32 }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
    <JustifyMark size={size} color={inverted ? C.paper : C.ink} />
    <div style={{
      fontFamily: fonts.display, fontWeight: 700, fontSize: size * 0.78,
      color: inverted ? C.paper : C.ink, letterSpacing: '-0.025em',
    }}>Justify</div>
  </div>
);

// Footer: page label only, no right-side name.
const FootNote = ({ left, ink = C.mute }) => (
  <div style={{
    position: 'absolute', left: SPACING.padX, right: SPACING.padX, bottom: 44,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontFamily: fonts.body, fontSize: TYPE_SCALE.micro, color: ink,
    letterSpacing: '0.04em',
  }}>
    <span>{left}</span><span></span>
  </div>
);

// ════════════════════════════════════════════════════════════════════════
// SLIDE 1 — Cover. Reframed: in-house expert, not proof layer.
// ════════════════════════════════════════════════════════════════════════
function Slide01() {
  const { useSlideEnter, enterStyle, REDUCE } = window.SoAnim;
  const on = useSlideEnter(0);
  return (
    <Frame style={{ position: 'relative', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', ...enterStyle(on, { y: 0, dur: 500 }) }}>
        <Wordmark size={36} />
        <Eyebrow>For founders running creators in-house</Eyebrow>
      </div>

      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24, marginBottom: 28, ...enterStyle(on, { delay: 100, dur: 500 }) }}>
          <span style={{
            width: 16, height: 16, borderRadius: 999, background: C.accent,
            boxShadow: REDUCE ? 'none' : `0 0 0 0 hsl(195, 100%, 50% / 0.7)`,
            animation: REDUCE ? 'none' : 'soph-pulse 2.6s ease-out 0.6s infinite',
          }} />
          <div style={{ fontFamily: fonts.body, fontSize: TYPE_SCALE.small, fontWeight: 500, color: C.mute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            Your in-house influencer expert &mdash; in an app
          </div>
        </div>
        <h1 style={{ fontFamily: fonts.display, fontSize: 184, fontWeight: 700, lineHeight: 0.95, letterSpacing: '-0.035em', margin: 0, textTransform: 'uppercase', ...enterStyle(on, { y: 16, delay: 200, dur: 700 }) }}>
          Scrappy<br/>made serious.
        </h1>
        <p style={{ fontFamily: fonts.body, fontSize: TYPE_SCALE.lede, fontWeight: 400, color: C.graphite, marginTop: 36, marginBottom: 0, maxWidth: 1100, lineHeight: 1.4, ...enterStyle(on, { delay: 400, dur: 600 }) }}>
          Ten minutes. One conversation. Then you decide.
        </p>
      </div>

      <FootNote left="01" />

      <style>{`
        @keyframes soph-pulse {
          0%   { box-shadow: 0 0 0 0 hsl(195 100% 50% / 0.55); }
          70%  { box-shadow: 0 0 0 22px hsl(195 100% 50% / 0); }
          100% { box-shadow: 0 0 0 0 hsl(195 100% 50% / 0); }
        }
      `}</style>
    </Frame>
  );
}

// ════════════════════════════════════════════════════════════════════════
// SLIDE 2 — Voss mirror. Reframed: serious, not defendable.
// ════════════════════════════════════════════════════════════════════════
function Slide02() {
  const { useSlideEnter, enterStyle } = window.SoAnim;
  const on = useSlideEnter(1);
  return (
    <Frame bg={C.bone} style={{ position: 'relative', justifyContent: 'center' }}>
      <div style={enterStyle(on, { delay: 50, dur: 500 })}>
        <Eyebrow>Before we start</Eyebrow>
      </div>
      <div style={{ marginTop: 48, maxWidth: 1500 }}>
        <p style={{ fontFamily: fonts.display, fontWeight: 400, fontSize: 104, lineHeight: 1.06, letterSpacing: '-0.02em', color: C.ink, margin: 0 }}>
          <span style={enterStyle(on, { y: 12, delay: 200, dur: 700 })}>You&rsquo;re already running creators.</span>
          <br/>
          <span style={{ color: C.mute, ...enterStyle(on, { y: 12, delay: 900, dur: 700 }) }}>
            You want to make it more serious.
          </span>
        </p>
      </div>
      <div style={{ marginTop: 64, display: 'flex', alignItems: 'baseline', gap: 24, ...enterStyle(on, { delay: 1500, dur: 600 }) }}>
        <div style={{ width: 72, height: 2, background: C.ink }} />
        <div style={{ fontFamily: fonts.body, fontSize: TYPE_SCALE.body, color: C.graphite }}>
          Sound about right?
        </div>
      </div>
      <FootNote left="02" />
    </Frame>
  );
}

// ════════════════════════════════════════════════════════════════════════
// SLIDE 3 — The shift. Direct lift from her own words: "ad-hoc → rigour."
// ════════════════════════════════════════════════════════════════════════
function Slide03() {
  const { useSlideEnter, enterStyle } = window.SoAnim;
  const on = useSlideEnter(2);
  return (
    <Frame style={{ position: 'relative', justifyContent: 'center' }}>
      <div style={enterStyle(on, { dur: 500 })}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: C.accent }} />
          <Eyebrow>The shift</Eyebrow>
        </div>
      </div>

      <div style={{ marginTop: 56, ...enterStyle(on, { y: 16, delay: 200, dur: 800 }) }}>
        <h2 style={{
          fontFamily: fonts.display, fontSize: 116, fontWeight: 400,
          letterSpacing: '-0.025em', lineHeight: 1.05, margin: 0, maxWidth: 1640,
        }}>
          <span style={{ color: C.mute }}>Mates. DMs.</span><br/>
          <span style={{ color: C.mute }}>Throwing stuff at the wall.</span><br/>
          <span style={{ fontWeight: 700 }}>Time to make it an operation.</span>
        </h2>
      </div>

      <FootNote left="03" />
    </Frame>
  );
}

// ════════════════════════════════════════════════════════════════════════
// SLIDE 4 — What "ad-hoc" looks like. Six tiny exhibits, less framing.
// ════════════════════════════════════════════════════════════════════════
function Slide04() {
  const { useSlideEnter, enterStyle } = window.SoAnim;
  const on = useSlideEnter(3);
  const items = [
    { tag: 'A DM thread',         note: '"loved the product, send me the link"' },
    { tag: 'A spreadsheet',       note: 'three tabs deep, last edited 9 days ago' },
    { tag: 'A creator&rsquo;s grid',  note: '12k likes &middot; no idea if any of them shopped' },
    { tag: 'A promo code',        note: '23 redemptions &middot; post or email?' },
    { tag: 'A WhatsApp brief',    note: 'agreed in voice notes &middot; nothing in writing' },
    { tag: 'A &ldquo;vibes&rdquo; call',  note: 'reading the comments together' },
  ];
  return (
    <Frame bg={C.bone} style={{ position: 'relative' }}>
      <div style={enterStyle(on, { dur: 500 })}>
        <Eyebrow>Today</Eyebrow>
        <h2 style={{ fontFamily: fonts.display, fontSize: TYPE_SCALE.title, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 24, marginBottom: SPACING.titleGap }}>
          What you&rsquo;re running on now.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, maxWidth: 1680 }}>
        {items.map((it, i) => (
          <div key={i} style={{
            background: C.paper, borderRadius: 12, padding: '32px 32px 36px',
            border: `1px solid ${C.hairline}`, boxShadow: '0 2px 4px -1px rgb(0 0 0 / 0.04)',
            minHeight: 180, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            ...enterStyle(on, { y: 16, delay: 200 + i * 80, dur: 500 }),
          }}>
            <div style={{ fontFamily: fonts.mono, fontSize: TYPE_SCALE.micro, color: C.mute, letterSpacing: '0.04em' }}>
              {String(i + 1).padStart(2, '0')}
            </div>
            <div>
              <div style={{ fontFamily: fonts.display, fontSize: TYPE_SCALE.subtitle, fontWeight: 700, color: C.ink, letterSpacing: '-0.01em', marginBottom: 12 }}
                   dangerouslySetInnerHTML={{ __html: it.tag }} />
              <div style={{ fontFamily: fonts.body, fontSize: TYPE_SCALE.small, color: C.graphite, lineHeight: 1.5 }}
                   dangerouslySetInnerHTML={{ __html: it.note }} />
            </div>
          </div>
        ))}
      </div>
      <FootNote left="04" />
    </Frame>
  );
}

window.SoSlides = { Slide01, Slide02, Slide03, Slide04, C, fonts, TYPE_SCALE, SPACING, Frame, Eyebrow, Wordmark, FootNote, JustifyMark };