/* Soph deck — slides 5–8: the product narrative.
   Reframed: in-house expert, not "defend the spend."
   Pillar order: Plan → Execute → Optimise (Creative Testing as hero).
   Brand Lift becomes "what good looks like later" — not the wedge.
   Footers: page label only. */

(function () {
  const { C, fonts, TYPE_SCALE, SPACING, Frame, Eyebrow, Wordmark, FootNote } = window.SoSlides;
  const { useSlideEnter, useCountUp, enterStyle, drawStyle, REDUCE } = window.SoAnim;

  // ══════════════════════════════════════════════════════════════════════
  // SLIDE 5 — One sentence. The doc-validated one-liner, full stop.
  // ══════════════════════════════════════════════════════════════════════
  function Slide05() {
    const on = useSlideEnter(4);
    return (
      <Frame bg={C.carbon} ink={C.paper} style={{ position: 'relative', justifyContent: 'center' }}>
        <div style={{ position: 'absolute', top: SPACING.padTop, left: SPACING.padX, ...enterStyle(on, { y: 0, dur: 500 }) }}>
          <Wordmark inverted size={32} />
        </div>
        <div style={enterStyle(on, { delay: 100, dur: 500 })}>
          <Eyebrow color="hsl(0, 0%, 60%)">What we are</Eyebrow>
        </div>
        <h2 style={{
          fontFamily: fonts.display, fontWeight: 400, fontSize: 116, letterSpacing: '-0.03em',
          lineHeight: 1.02, marginTop: 32, maxWidth: 1700, color: C.paper,
          ...enterStyle(on, { y: 16, delay: 250, dur: 800 }),
        }}>
          Your <span style={{ fontWeight: 700, color: C.accent }}>in-house</span> influencer expert.<br/>
          <span style={{ color: 'hsl(0, 0%, 70%)' }}>In an app.</span>
        </h2>
        <p style={{
          fontFamily: fonts.display, fontSize: 32, fontWeight: 400, color: 'hsl(0, 0%, 75%)',
          marginTop: 36, maxWidth: 1500, letterSpacing: '-0.005em', lineHeight: 1.35,
          ...enterStyle(on, { y: 12, delay: 700, dur: 700 }),
        }}>
          The structure of an agency. None of the asymmetry.
        </p>
        <div style={{
          position: 'absolute', left: SPACING.padX, right: SPACING.padX, bottom: 44,
          display: 'flex', justifyContent: 'space-between',
          fontFamily: fonts.body, fontSize: TYPE_SCALE.micro, color: 'hsl(0, 0%, 50%)', letterSpacing: '0.04em',
        }}>
          <span>05</span><span></span>
        </div>
      </Frame>
    );
  }

  // ══════════════════════════════════════════════════════════════════════
  // SLIDE 6 — Plan. Creators picked on evidence.
  // ══════════════════════════════════════════════════════════════════════
  function CreatorRow({ avatar, name, handle, followers, score, tier, style }) {
    const tierBg = { Diamond: 'hsl(210, 100%, 32%)', Gold: 'hsl(38, 92%, 24%)', Silver: 'hsl(220, 8%, 32%)', Emerging: 'hsl(150, 35%, 27%)' }[tier];
    return (
      <div style={{ display: 'grid', gridTemplateColumns: '48px 1fr 140px 140px 110px', gap: 20, alignItems: 'center', padding: '14px 0', borderBottom: `1px solid ${C.hairline}`, ...style }}>
        <div style={{ width: 40, height: 40, borderRadius: 999, background: avatar, color: C.paper, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: fonts.body, fontWeight: 600, fontSize: 14 }}>{name[0]}</div>
        <div>
          <div style={{ fontFamily: fonts.body, fontSize: 18, fontWeight: 600, color: C.ink }}>{name}</div>
          <div style={{ fontFamily: fonts.body, fontSize: 14, color: C.mute }}>{handle}</div>
        </div>
        <div style={{ fontFamily: fonts.body, fontSize: 16, color: C.graphite }}>{followers}</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 10, height: 10, borderRadius: 999, background: score >= 80 ? C.success : score >= 60 ? C.warn : C.destruct }} />
          <span style={{ fontFamily: fonts.body, fontSize: 16, fontWeight: 600, color: C.ink }}>{score}</span>
        </div>
        <div style={{ background: tierBg, color: C.paper, fontFamily: fonts.body, fontSize: 12, fontWeight: 600, padding: '4px 10px', borderRadius: 4, letterSpacing: '0.04em', textAlign: 'center', width: 'fit-content' }}>{tier.toUpperCase()}</div>
      </div>
    );
  }

  function Slide06() {
    const on = useSlideEnter(5);
    const creators = [
      { avatar: 'hsl(195, 100%, 50%)', name: 'Maya Okonkwo',  handle: '@mayaisclear',     followers: '42.1K', score: 92, tier: 'Diamond' },
      { avatar: 'hsl(265, 60%, 48%)',  name: 'Tess Lindgren',  handle: '@tess.skin',       followers: '28.4K', score: 87, tier: 'Gold' },
      { avatar: 'hsl(173, 80%, 26%)',  name: 'Robyn Patel',    handle: '@robynp',          followers: '15.9K', score: 81, tier: 'Gold' },
      { avatar: 'hsl(38, 92%, 50%)',   name: 'Jordan Asare',   handle: '@jordan_asare',    followers: '11.2K', score: 74, tier: 'Silver' },
      { avatar: 'hsl(0, 84%, 60%)',    name: 'Cleo Park',      handle: '@cleopark',        followers: '6.8K',  score: 68, tier: 'Silver' },
    ];
    return (
      <Frame style={{ position: 'relative' }}>
        <div style={{ ...enterStyle(on, { dur: 500 }) }}>
          <Eyebrow>Plan</Eyebrow>
          <h2 style={{ fontFamily: fonts.display, fontSize: TYPE_SCALE.title, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 24, marginBottom: 0, lineHeight: 1.1 }}>
            The pool the agencies use.
          </h2>
          <p style={{ fontFamily: fonts.body, fontSize: TYPE_SCALE.lede, color: C.graphite, marginTop: 16, marginBottom: 0, fontWeight: 400 }}>
            Without the markup.
          </p>
        </div>

        <div style={{ marginTop: 48, background: C.paper, border: `1px solid ${C.rule}`, borderRadius: 12, boxShadow: '0 8px 16px -4px rgb(0 0 0 / 0.06)', overflow: 'hidden', maxWidth: 1680, ...enterStyle(on, { y: 16, delay: 200, dur: 600 }) }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 28px', borderBottom: `1px solid ${C.hairline}`, background: C.panel, gap: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, minWidth: 0, flex: 1 }}>
              <div style={{ width: 8, height: 8, borderRadius: 999, background: C.accent, flexShrink: 0 }} />
              <div style={{ fontFamily: fonts.body, fontSize: 15, fontWeight: 600, color: C.ink, whiteSpace: 'nowrap' }}>Skincare &middot; UK &middot; 5–50K</div>
              <div style={{ fontFamily: fonts.body, fontSize: 14, color: C.mute, whiteSpace: 'nowrap' }}>248 matches</div>
            </div>
            <div style={{ background: C.ink, color: C.paper, fontFamily: fonts.body, fontSize: 13, fontWeight: 600, padding: '8px 14px', borderRadius: 6, whiteSpace: 'nowrap' }}>Add to campaign</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '48px 1fr 140px 140px 110px', gap: 20, padding: '14px 28px', borderBottom: `1px solid ${C.hairline}`, background: C.bone, fontFamily: fonts.body, fontSize: 12, fontWeight: 600, color: C.mute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
            <div></div><div>Creator</div><div>Followers</div><div>Trust score</div><div>Tier</div>
          </div>
          <div style={{ padding: '0 28px' }}>
            {creators.map((c, i) => (
              <CreatorRow key={i} {...c} style={enterStyle(on, { y: 8, delay: 400 + i * 80, dur: 400 })} />
            ))}
          </div>
        </div>
        <FootNote left="06" />
      </Frame>
    );
  }

  // ══════════════════════════════════════════════════════════════════════
  // SLIDE 7 — Execute. One canvas, no screenshot trail.
  // ══════════════════════════════════════════════════════════════════════
  function StatusPill({ kind, children }) {
    const map = {
      live:    { bg: 'hsl(142, 76% / 0.12)', fg: C.success, dot: C.success },
      pending: { bg: 'hsl(38, 92% / 0.12)',  fg: 'hsl(38, 92%, 35%)', dot: C.warn },
      done:    { bg: 'hsl(220, 8% / 0.08)',  fg: C.graphite, dot: C.graphite },
      review:  { bg: 'hsl(195, 100% / 0.10)', fg: C.accentInk, dot: C.accent },
    }[kind];
    return (
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: map.bg, color: map.fg, fontFamily: fonts.body, fontSize: 12, fontWeight: 600, padding: '4px 10px', borderRadius: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: map.dot }} />{children}
      </div>
    );
  }

  function Slide07() {
    const on = useSlideEnter(6);
    const hours = useCountUp(on, 14, { dur: 1100 });
    const tasks = [
      { title: 'Brief & contract',     owner: 'Lena',   due: 'Jun 04', status: 'done' },
      { title: 'Creator approvals',    owner: 'Soph',   due: 'Jun 06', status: 'done' },
      { title: 'Asset draft &middot; Maya',   owner: 'Maya',   due: 'Jun 09', status: 'review' },
      { title: 'Asset draft &middot; Tess',   owner: 'Tess',   due: 'Jun 10', status: 'pending' },
      { title: 'Posts go live',        owner: '—',      due: 'Jun 12', status: 'pending' },
    ];
    return (
      <Frame bg={C.bone} style={{ position: 'relative' }}>
        <div style={{ ...enterStyle(on, { dur: 500 }) }}>
          <Eyebrow>Execute</Eyebrow>
          <h2 style={{ fontFamily: fonts.display, fontSize: TYPE_SCALE.title, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 24, marginBottom: 0, lineHeight: 1.1 }}>
            One canvas. No screenshot trail.
          </h2>
        </div>

        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, maxWidth: 1680 }}>
          {/* Canvas card */}
          <div style={{ background: C.paper, border: `1px solid ${C.rule}`, borderRadius: 12, boxShadow: '0 4px 8px -2px rgb(0 0 0 / 0.05)', overflow: 'hidden', ...enterStyle(on, { y: 16, delay: 200, dur: 600 }) }}>
            <div style={{ padding: '18px 24px', borderBottom: `1px solid ${C.hairline}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontFamily: fonts.body, fontSize: 12, color: C.mute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Campaign canvas</div>
                <div style={{ fontFamily: fonts.body, fontSize: 17, fontWeight: 600, color: C.ink, marginTop: 2 }}>Summer Glow &middot; Q2 2026</div>
              </div>
              <StatusPill kind="live">In flight</StatusPill>
            </div>
            <div style={{ padding: '8px 24px 20px' }}>
              {tasks.map((t, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 90px 90px 110px', gap: 16, alignItems: 'center', padding: '14px 0', borderBottom: i < tasks.length - 1 ? `1px solid ${C.hairline}` : 'none', ...enterStyle(on, { y: 8, delay: 400 + i * 70, dur: 400 }) }}>
                  <div style={{ fontFamily: fonts.body, fontSize: 15, color: C.ink }} dangerouslySetInnerHTML={{ __html: t.title }} />
                  <div style={{ fontFamily: fonts.body, fontSize: 14, color: C.graphite }}>{t.owner}</div>
                  <div style={{ fontFamily: fonts.body, fontSize: 14, color: C.mute }}>{t.due}</div>
                  <StatusPill kind={t.status}>{t.status}</StatusPill>
                </div>
              ))}
            </div>
          </div>

          {/* Stat cards */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ background: C.paper, border: `1px solid ${C.rule}`, borderRadius: 12, padding: '28px 32px', flex: 1, ...enterStyle(on, { y: 12, delay: 500, dur: 500 }) }}>
              <div style={{ fontFamily: fonts.body, fontSize: 13, color: C.mute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Hours saved &middot; per week</div>
              <div style={{ fontFamily: fonts.display, fontSize: 104, fontWeight: 700, color: C.ink, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 8, fontVariantNumeric: 'tabular-nums' }}>
                {hours}<span style={{ color: C.mute, fontWeight: 400, fontSize: 44 }}> hrs</span>
              </div>
            </div>
            <div style={{ background: C.paper, border: `1px solid ${C.rule}`, borderRadius: 12, padding: '28px 32px', flex: 1, ...enterStyle(on, { y: 12, delay: 700, dur: 500 }) }}>
              <div style={{ fontFamily: fonts.body, fontSize: 13, color: C.mute, letterSpacing: '0.06em', textTransform: 'uppercase' }}>Things in WhatsApp</div>
              <div style={{ fontFamily: fonts.display, fontSize: 104, fontWeight: 700, color: C.accent, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 8 }}>0</div>
            </div>
          </div>
        </div>
        <FootNote left="07" />
      </Frame>
    );
  }

  // ══════════════════════════════════════════════════════════════════════
  // SLIDE 8 — Test before you spend. Creative Testing is now THE wedge.
  // (Was slide 9. Brand Lift demoted; this is the validated "holy sh*t.")
  // ══════════════════════════════════════════════════════════════════════
  function Slide08() {
    const on = useSlideEnter(7);
    const variants = [
      { label: 'A', headline: '"Glow you can feel."',                  score: 74, color: 'hsl(265, 60%, 48%)', winner: false },
      { label: 'B', headline: '"Skin that earns compliments."',         score: 91, color: 'hsl(173, 80%, 26%)', winner: true  },
      { label: 'C', headline: '"The 3-step routine I keep."',           score: 68, color: 'hsl(38, 92%, 45%)', winner: false },
    ];
    return (
      <Frame style={{ position: 'relative' }}>
        <div style={{ ...enterStyle(on, { dur: 500 }) }}>
          <Eyebrow>Optimise</Eyebrow>
          <h2 style={{ fontFamily: fonts.display, fontSize: TYPE_SCALE.title, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 24, marginBottom: 0, lineHeight: 1.1 }}>
            Pick the hook before you pay for the post.
          </h2>
        </div>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, maxWidth: 1680 }}>
          {variants.map((v, i) => (
            <div key={v.label} style={{
              background: C.paper, border: `2px solid ${v.winner ? C.accent : C.hairline}`, borderRadius: 12,
              padding: '32px 32px 36px', position: 'relative',
              boxShadow: v.winner ? '0 16px 32px -10px hsl(195, 100% / 0.30)' : '0 2px 4px -1px rgb(0 0 0 / 0.04)',
              ...enterStyle(on, { y: 16, delay: 200 + i * 130, dur: 500 }),
            }}>
              {v.winner && (
                <div style={{ position: 'absolute', top: -14, left: 28, background: C.accent, color: C.paper, fontFamily: fonts.body, fontSize: 11, fontWeight: 700, padding: '5px 12px', borderRadius: 4, letterSpacing: '0.08em', textTransform: 'uppercase', opacity: on ? 1 : 0, transition: 'opacity 400ms ease 900ms' }}>
                  Winner
                </div>
              )}
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
                <div style={{ width: 48, height: 48, borderRadius: 8, background: v.color, color: C.paper, fontFamily: fonts.display, fontSize: 24, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{v.label}</div>
              </div>
              <div style={{ fontFamily: fonts.display, fontSize: 32, fontWeight: 400, color: C.ink, lineHeight: 1.25, letterSpacing: '-0.01em', minHeight: 120 }}>{v.headline}</div>
              <div style={{ marginTop: 28, paddingTop: 22, borderTop: `1px solid ${C.hairline}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div style={{ fontFamily: fonts.body, fontSize: 13, color: C.mute, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Intent</div>
                <div style={{ fontFamily: fonts.display, fontSize: 40, fontWeight: 700, color: v.winner ? C.accent : C.graphite, letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums' }}>{v.score}</div>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 40, fontFamily: fonts.body, fontSize: TYPE_SCALE.body, color: C.graphite, ...enterStyle(on, { delay: 800, dur: 500 }) }}>
          Tested with 600 shoppers in your category. Before a single creator posts.
        </div>
        <FootNote left="08" />
      </Frame>
    );
  }

  Object.assign(window.SoSlides, { Slide05, Slide06, Slide07, Slide08 });
})();