// 07 · Email + SMS follow-up — 4-touch cart rescue + post-purchase sequence.
// Laid out as a horizontal timeline of message cards.

const RESCUE = [
  {
    when: '+15 min', via: 'email', subject: 'You left your protocol in cart 👀',
    preview: 'Holding it for the next 24h — your $100 discount is still attached.',
    body: [
      'Marcus —',
      'Quick heads up: your 30-Day BPC-157 Recovery Protocol is still in your cart. We saved your $100 discount, but it expires at midnight tonight.',
      'If you had a question that stopped you — just hit reply. A real human (not a bot) reads every email.',
      '— Coach Mike',
    ],
    cta: 'Finish my order →',
    flag: 'rescue · soft-touch',
  },
  {
    when: '+4 hours', via: 'sms', subject: null,
    preview: 'Marcus — Mike from Tested Peptides. Saw your cart. Still want it? Discount\'s good till midnight: tp.co/finish',
    body: null,
    cta: null,
    flag: 'rescue · sms tap',
  },
  {
    when: '+22 hours', via: 'email', subject: '⏰ 2 hrs left — your $100 off expires at midnight',
    preview: 'After tonight it goes back to full price + you lose the bonuses.',
    body: [
      'Last note from me on this.',
      'Your cart + the $100 discount + all 4 bonuses (Sleep stack, mobility eBook, onboarding call, COA tool) — all of it disappears at midnight tonight.',
      'After that it\'s $197 with no bonuses, just the vial.',
      'If money is the issue — you\'re covered. ' + '60-day money-back. You don\'t feel it, we refund you 100%. You literally cannot lose.',
    ],
    cta: 'Reclaim my discount — $97',
    flag: 'rescue · urgency',
  },
  {
    when: '+3 days', via: 'email', subject: 'OK — final offer (and a question)',
    preview: 'Was it the price, the protocol, or something else?',
    body: [
      'Not a sales pitch, promise.',
      'I noticed you didn\'t check out. Mind if I ask which one was it?',
      '☐ Too expensive  ☐ Not sure if it\'ll work for me  ☐ Want to talk to someone first  ☐ Just researching',
      'Hit reply with the letter — that\'s it. If money was the issue, I can extend your discount one more time. If it\'s the protocol, I\'ll send the clinical studies.',
    ],
    cta: 'Reply A / B / C / D',
    flag: 'rescue · survey',
  },
];

function Avatar({ initials, color = '#0a0a0a' }) {
  return (
    <div style={{
      width: 32, height: 32, borderRadius: 999,
      background: color, color: '#fff',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
      flexShrink: 0,
    }}>{initials}</div>
  );
}

function EmailCard({ m, idx }) {
  return (
    <div style={{
      width: 320, background: '#fff', border: `1px solid ${TP.c.line2}`,
      boxShadow: '0 1px 0 #d4d0c8',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* mail app chrome */}
      <div style={{
        padding: '10px 12px', borderBottom: `1px solid ${TP.c.line}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: '#fafaf7',
      }}>
        <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>INBOX · GMAIL</Mono>
        <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>{m.when}</Mono>
      </div>
      {/* from */}
      <div style={{ padding: '12px 14px', display: 'flex', gap: 10, alignItems: 'flex-start' }}>
        <Avatar initials="TP" color={TP.c.cta} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12 }}>
              Mike @ Tested Peptides
            </div>
            <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>just now</Mono>
          </div>
          <div style={{ fontSize: 11, color: TP.c.ink3, marginBottom: 8 }}>to marcus@gmail.com</div>
          <div style={{
            fontFamily: 'var(--font-display)', fontWeight: 800,
            fontSize: 14, lineHeight: 1.2, marginBottom: 8, letterSpacing: '-0.01em',
          }}>{m.subject}</div>
          <div style={{ fontSize: 11, color: TP.c.ink2, marginBottom: 12, lineHeight: 1.4 }}>
            {m.preview}
          </div>

          {/* body */}
          <div style={{
            background: TP.c.paper, padding: 10, marginBottom: 12,
            border: `1px solid ${TP.c.line}`,
          }}>
            {m.body.map((p, i) => (
              <p key={i} style={{ fontSize: 11, color: TP.c.ink, lineHeight: 1.5, margin: '0 0 8px' }}>{p}</p>
            ))}
          </div>

          {/* CTA */}
          {m.cta && (
            <div style={{
              display: 'inline-block', padding: '8px 14px',
              background: TP.c.cta, color: '#fff',
              fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11,
              letterSpacing: '0.04em', textTransform: 'uppercase',
            }}>{m.cta}</div>
          )}
        </div>
      </div>
    </div>
  );
}

function SMSCard({ m }) {
  return (
    <div style={{
      width: 280, background: '#fff', border: `1px solid ${TP.c.line2}`,
      boxShadow: '0 1px 0 #d4d0c8',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        padding: '10px 12px', borderBottom: `1px solid ${TP.c.line}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        background: '#fafaf7',
      }}>
        <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>SMS · (512) 555-0101</Mono>
        <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>{m.when}</Mono>
      </div>
      <div style={{
        padding: '20px 14px', background: '#0a0a0a',
        minHeight: 180,
      }}>
        <Mono style={{ fontSize: 9, color: '#666', display: 'block', textAlign: 'center', marginBottom: 14 }}>
          Today · 1:14 PM
        </Mono>
        <div style={{
          maxWidth: 220,
          padding: '10px 12px', borderRadius: 16,
          background: '#1f1f1f', color: '#fff',
          fontSize: 12, lineHeight: 1.4,
        }}>
          {m.preview}
        </div>
        {/* their reply */}
        <div style={{
          maxWidth: 100, marginLeft: 'auto', marginTop: 8,
          padding: '10px 12px', borderRadius: 16,
          background: '#2a78f5', color: '#fff',
          fontSize: 12, lineHeight: 1.4,
        }}>👍 yes</div>
      </div>
    </div>
  );
}

// Rendered directly into the #email tab (no ScaledFrame downscale). The 4
// touches wrap as native-size email/SMS cards so the copy stays readable;
// metrics flow underneath instead of being absolutely pinned to a fixed board.
function EmailSequence() {
  return (
    <div style={{
      width: '100%',
      background: TP.c.bg, fontFamily: 'var(--font-body)', color: TP.c.ink,
    }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 24 }}>
        <div>
          <Eyebrow style={{ marginBottom: 8 }}>Stage 07 · Follow-up automation</Eyebrow>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 36, letterSpacing: '-0.03em', margin: 0,
          }}>The 4-touch rescue sequence.</h2>
          <p style={{ fontSize: 13, color: TP.c.ink2, maxWidth: 560, marginTop: 6 }}>
            Triggered when someone reaches checkout but doesn't complete. Average revenue recovered: <b>18% of abandoned carts</b>. Stops the moment they buy or unsubscribe.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <Pill color={TP.c.trust} bg="#1f5d3a14">target recovery 15%+</Pill>
          <Pill color={TP.c.ink2}>klaviyo + postscript</Pill>
        </div>
      </div>

      {/* trigger marker */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '8px 14px', background: '#0a0a0a', color: '#fff',
        width: 'fit-content', marginBottom: 18,
      }}>
        <LiveDot color={TP.c.warn} />
        <Mono style={{ fontSize: 10, letterSpacing: '0.1em' }}>TRIGGER · CHECKOUT ABANDONED</Mono>
      </div>

      {/* Sequence — native-size cards that wrap responsively */}
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, alignItems: 'flex-start' }}>
        {RESCUE.map((m, i) => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 12 }}>
            {/* node */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{
                width: 36, height: 36, borderRadius: 999,
                background: m.via === 'sms' ? TP.c.trust : TP.c.ink, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 11,
              }}>
                {m.via === 'sms' ? 'SMS' : '@'}
              </div>
              <div>
                <Mono style={{ fontSize: 9, color: TP.c.ink3, display: 'block', letterSpacing: '0.08em' }}>
                  T {m.when}
                </Mono>
                <Mono style={{ fontSize: 9, color: TP.c.cta }}>{m.flag}</Mono>
              </div>
            </div>

            {/* card */}
            {m.via === 'sms' ? <SMSCard m={m} /> : <EmailCard m={m} idx={i} />}
          </div>
        ))}
      </div>

      {/* Metrics */}
      <div style={{
        marginTop: 32,
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: 12,
      }}>
        {[
          { k: 'Touch 1', v: '38%', l: 'open rate · 4% recover' },
          { k: 'Touch 2 (sms)', v: '94%', l: 'open rate · 7% recover' },
          { k: 'Touch 3', v: '41%', l: 'open · 5% recover' },
          { k: 'Touch 4 (survey)', v: '12%', l: 'reply · qualifies the no' },
        ].map((m, i) => (
          <div key={i} style={{ padding: '12px 14px', background: '#fff', border: `1px solid ${TP.c.line2}` }}>
            <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>{m.k}</Mono>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 22, letterSpacing: '-0.02em' }}>{m.v}</div>
            <Mono style={{ fontSize: 9, color: TP.c.ink2 }}>{m.l}</Mono>
          </div>
        ))}
      </div>
    </div>
  );
}

window.EmailSequence = EmailSequence;