// 06 · Thank-you / confirmation page.

function ThankYou({ t }) {
  return (
    <div style={{ width: 420, height: 1000, background: TP.c.paper, padding: 12 }}>
      <div style={{
        width: 396, height: 976, borderRadius: 46,
        background: '#000', padding: 8,
        boxShadow: '0 30px 60px -30px rgba(0,0,0,0.4), 0 6px 0 #d4d0c8',
        position: 'relative', margin: '0 auto',
      }}>
        <div style={{
          width: '100%', height: '100%', borderRadius: 38,
          background: '#fff', overflow: 'hidden', position: 'relative',
          fontFamily: 'var(--font-body)', color: TP.c.ink,
        }}>
          <div style={{
            position: 'absolute', top: 10, left: '50%', transform: 'translateX(-50%)',
            width: 110, height: 32, borderRadius: 16, background: '#000', zIndex: 50,
          }} />
          <div style={{
            height: 52, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            padding: '14px 28px 0', fontSize: 13, fontWeight: 700,
          }}>
            <span>9:41</span>
            <Mono style={{ fontSize: 11 }}>●●●● 5G ▮</Mono>
          </div>

          <div style={{ position: 'absolute', top: 52, left: 0, right: 0, bottom: 0, overflowY: 'hidden', padding: '18px 18px 0' }}>
            {/* Receipt header */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{
                width: 44, height: 44, borderRadius: 999,
                background: TP.c.trust, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 24, fontWeight: 900,
              }}>✓</div>
              <div>
                <Mono style={{ fontSize: 9, color: TP.c.ink3 }}>ORDER #TP-48217</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em' }}>
                  You're in, Marcus.
                </div>
              </div>
            </div>

            <p style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.55, marginBottom: 14 }}>
              Your starter kit ships <b>tomorrow morning</b> — tracking will hit your inbox at <Mono style={{ fontSize: 11 }}>marcus@gmail.com</Mono>. While you wait, three things to set you up for success ↓
            </p>

            {/* What's next */}
            <Eyebrow style={{ marginBottom: 10 }}>What happens next</Eyebrow>
            <div style={{ marginBottom: 16 }}>
              {[
                { n: 'NOW', t: 'Check your texts', s: 'Send "READY" to (512) 555-0101 to start your protocol guide.' },
                { n: 'DAY 1', t: 'Welcome video drops', s: 'Coach Mike walks you through your first injection — 4 minutes.' },
                { n: 'DAY 7', t: 'First check-in', s: 'We ask one question: "Notice anything yet?" Most users say yes.' },
                { n: 'DAY 30', t: 'Cycle planning', s: 'On/off scheduling for the next 90 days. Personalized.' },
              ].map((s, i, arr) => (
                <div key={i} style={{ display: 'flex', gap: 12 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 56 }}>
                    <Mono style={{
                      fontSize: 9, color: TP.c.cta, fontWeight: 700,
                      background: '#fff0f1', padding: '3px 6px',
                    }}>{s.n}</Mono>
                    {i < arr.length - 1 && <div style={{ flex: 1, width: 1, background: TP.c.line2, marginTop: 4 }} />}
                  </div>
                  <div style={{ flex: 1, paddingBottom: 12 }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>{s.t}</div>
                    <div style={{ fontSize: 11, color: TP.c.ink2, marginTop: 2, lineHeight: 1.4 }}>{s.s}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Referral block */}
            <div style={{
              padding: 14, background: '#0a0a0a', color: '#fff', marginBottom: 12,
              position: 'relative', overflow: 'hidden',
            }}>
              <Stamp size={56} rotate={10} color={TP.c.warn} style={{ position: 'absolute', top: -10, right: -10 }}>
                <span style={{ color: '#0a0a0a' }}>$25 + $25</span>
              </Stamp>
              <Mono style={{ fontSize: 9, color: TP.c.warn, marginBottom: 6 }}>BONUS · TELL A FRIEND</Mono>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 16, marginBottom: 6, lineHeight: 1.1 }}>
                You get $25. They get $25.
              </div>
              <div style={{ fontSize: 11, color: '#aaa', marginBottom: 10, lineHeight: 1.5 }}>
                Share your link. We'll credit your account the moment they order.
              </div>
              <div style={{
                padding: '10px 12px', background: '#1a1a1a', border: '1px dashed #444',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontFamily: 'var(--font-mono)', fontSize: 11,
              }}>
                <span style={{ color: '#fff' }}>tp.co/marcus-25</span>
                <span style={{ color: TP.c.warn, fontSize: 10, fontWeight: 700 }}>COPY</span>
              </div>
            </div>

            {/* Community */}
            <div style={{
              padding: 12, background: TP.c.paper, border: `1px solid ${TP.c.line2}`,
              display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12,
            }}>
              <div style={{ display: 'flex' }}>
                {[0, 1, 2].map(i => (
                  <div key={i} style={{
                    width: 26, height: 26, borderRadius: 999,
                    background: ['#3a2a1a', '#1a3a2a', '#2a1a3a'][i],
                    border: '2px solid #fff', marginLeft: i ? -8 : 0,
                  }} />
                ))}
              </div>
              <div style={{ flex: 1, fontSize: 11, color: TP.c.ink2, lineHeight: 1.4 }}>
                <b style={{ color: TP.c.ink }}>Join 4,210 members</b> in the private group. Coaches answer Mon–Fri.
              </div>
              <div style={{
                padding: '6px 10px', background: TP.c.ink, color: '#fff',
                fontSize: 10, fontWeight: 700, fontFamily: 'var(--font-display)',
              }}>JOIN</div>
            </div>

            <Mono style={{ fontSize: 9, color: TP.c.ink3, textAlign: 'center', display: 'block', lineHeight: 1.6 }}>
              Saved your receipt to marcus@gmail.com<br />
              Help: hello@tested-peptides.com · (512) 555-0101
            </Mono>
          </div>

          <div style={{
            position: 'absolute', bottom: 8, left: '50%', transform: 'translateX(-50%)',
            width: 130, height: 4, borderRadius: 2, background: '#0a0a0a', opacity: 0.6, zIndex: 50,
          }} />
        </div>
      </div>
    </div>
  );
}

window.ThankYou = ThankYou;