// Design brief artboard — opens the canvas with the strategy + reasoning.

function Brief() {
  const stages = [
    { n: '01', name: 'TikTok Ads', who: 'Cold traffic', goal: 'Stop the scroll · 3s hook', kpi: 'CTR > 1.5%' },
    { n: '02', name: 'Quiz Landing', who: 'Curious clicker', goal: 'Micro-commitment + segment', kpi: 'Opt-in > 35%' },
    { n: '03', name: 'VSL / Sales Page', who: 'Warm lead', goal: 'Educate · build belief · stack value', kpi: 'Add-to-cart > 12%' },
    { n: '04', name: 'Offer + Checkout', who: 'Buyer intent', goal: 'Close · risk-reverse · order bump', kpi: 'Checkout > 65%' },
    { n: '05', name: 'Upsell / Downsell', who: 'New customer', goal: 'AOV lift · subscription anchor', kpi: 'Take rate > 25%' },
    { n: '06', name: 'Thank You', who: 'Buyer', goal: 'Confirm · reduce remorse · refer', kpi: 'Referral > 8%' },
    { n: '07', name: 'Email + SMS', who: 'Non-buyers + buyers', goal: 'Rescue + retain', kpi: 'Recovered rev 18%' },
  ];

  const principles = [
    { t: 'Dream Outcome', d: 'Recover fast. Train hard. Feel 30 again. Sold concretely — not as a vague "wellness" benefit.' },
    { t: 'Perceived Likelihood', d: 'Third-party COAs, lot numbers, real reviews. Specificity beats hyperbole.' },
    { t: 'Time Delay', d: '"Notice it in 7 days · full reset in 30." Crush the perceived timeline.' },
    { t: 'Effort & Sacrifice', d: 'One vial. One protocol card. No guesswork. We do the math, user does the dose.' },
  ];

  return (
    <div style={{
      width: 1080, padding: 56, background: TP.c.bg,
      fontFamily: 'var(--font-body)', color: TP.c.ink,
    }}>
      {/* Header */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 40 }}>
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>Design Brief · v1 · May 2026</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 900,
            fontSize: 64, lineHeight: 0.95, letterSpacing: '-0.04em',
            margin: 0, maxWidth: 820,
          }}>
            TikTok → BPC-157 starter kit.<br />
            <span style={{ color: TP.c.ink3 }}>A 7-stage direct-response funnel.</span>
          </h1>
        </div>
        <Wordmark size={14} />
      </div>

      {/* Assumptions row */}
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        borderTop: `1px solid ${TP.c.line2}`, borderBottom: `1px solid ${TP.c.line2}`,
        marginBottom: 48,
      }}>
        {[
          { l: 'Hero Product', v: 'BPC-157 5mg', s: 'Body Protective Compound · research peptide' },
          { l: 'Avatar', v: 'Active men 30–55', s: 'Lifts, runs, plays — nagging joint pain' },
          { l: 'Front-end Offer', v: '$97 · was $197', s: '30-day starter + bonuses · 60-day MBG' },
          { l: 'Channel', v: 'TikTok cold paid', s: 'Native UGC · creator-led · sub-$1 CPM target' },
        ].map((x, i) => (
          <div key={i} style={{
            padding: '24px 24px 24px 0',
            borderRight: i < 3 ? `1px solid ${TP.c.line}` : 'none',
            paddingLeft: i > 0 ? 24 : 0,
          }}>
            <Eyebrow style={{ marginBottom: 10 }}>{x.l}</Eyebrow>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em' }}>{x.v}</div>
            <div style={{ fontSize: 12, color: TP.c.ink2, marginTop: 4, lineHeight: 1.5 }}>{x.s}</div>
          </div>
        ))}
      </div>

      {/* Two columns: stages + principles */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48 }}>
        {/* Funnel stages */}
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>Funnel architecture</Eyebrow>
          <div style={{ border: `1px solid ${TP.c.line2}` }}>
            {stages.map((s, i) => (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '52px 1.2fr 1.4fr 1fr',
                alignItems: 'center', gap: 16,
                padding: '16px 18px',
                borderTop: i > 0 ? `1px solid ${TP.c.line}` : 'none',
                background: i % 2 ? TP.c.bg : '#fff',
              }}>
                <Mono style={{ color: TP.c.ink3, fontSize: 11 }}>{s.n}</Mono>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16 }}>{s.name}</div>
                <div style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.5 }}>{s.goal}</div>
                <Mono style={{ fontSize: 10, color: TP.c.trust, textAlign: 'right' }}>{s.kpi}</Mono>
              </div>
            ))}
          </div>

          {/* Compliance note */}
          <div style={{
            marginTop: 20, padding: '14px 16px',
            background: '#fff7e6', border: `1px solid ${TP.c.warn}66`,
            borderLeft: `3px solid ${TP.c.warn}`,
            display: 'flex', gap: 12, alignItems: 'flex-start',
          }}>
            <Mono style={{ color: TP.c.warn, fontSize: 11 }}>NOTE</Mono>
            <div style={{ fontSize: 12, color: TP.c.ink, lineHeight: 1.55 }}>
              Copy uses <b>"users report"</b> + <b>"research compound"</b> framing throughout. No diagnostic / treatment claims. FDA disclaimer pinned in footer of every page. Compliance level set to <b>moderate</b> across the funnel.
            </div>
          </div>
        </div>

        {/* Principles */}
        <div>
          <Eyebrow style={{ marginBottom: 16 }}>The value equation</Eyebrow>
          <div style={{ display: 'grid', gap: 12 }}>
            {principles.map((p, i) => (
              <div key={i} style={{
                padding: 16, background: '#fff', border: `1px solid ${TP.c.line2}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
                  <span style={{
                    width: 18, height: 18, borderRadius: 999,
                    background: TP.c.ink, color: '#fff',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--font-mono)', fontSize: 9,
                  }}>{i + 1}</span>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14 }}>{p.t}</div>
                </div>
                <div style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.55, paddingLeft: 26 }}>{p.d}</div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: 20, padding: '20px 0', borderTop: `1px solid ${TP.c.line2}` }}>
            <Eyebrow style={{ marginBottom: 10 }}>Visual system</Eyebrow>
            <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
              {[
                { c: '#fbfaf7', l: 'paper' },
                { c: '#0a0a0a', l: 'ink' },
                { c: '#e63946', l: 'cta' },
                { c: '#1f5d3a', l: 'trust' },
                { c: '#f5a623', l: 'warn' },
              ].map((s, i) => (
                <div key={i} style={{ flex: 1 }}>
                  <div style={{ height: 36, background: s.c, border: `1px solid ${TP.c.line2}` }} />
                  <Mono style={{ fontSize: 9, color: TP.c.ink3, marginTop: 4, display: 'block' }}>{s.l}</Mono>
                </div>
              ))}
            </div>
            <div style={{ fontSize: 12, color: TP.c.ink2, lineHeight: 1.55 }}>
              <Display style={{ fontWeight: 700 }}>Inter Tight</Display> display ·{' '}
              <span>Inter body</span> ·{' '}
              <Mono>JetBrains Mono</Mono> labels ·{' '}
              <Serif style={{ fontStyle: 'italic' }}>Newsreader</Serif> emotional pulls.
            </div>
          </div>
        </div>
      </div>

      {/* Footer / status */}
      <div style={{
        marginTop: 48, paddingTop: 20, borderTop: `1px solid ${TP.c.line2}`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <Mono style={{ fontSize: 10, color: TP.c.ink3 }}>
          7 stages · 8 ad variants · 1 hero offer · 1 bump · 1 upsell · 4-email rescue
        </Mono>
        <Mono style={{ fontSize: 10, color: TP.c.ink3 }}>tested-peptides.com</Mono>
      </div>
    </div>
  );
}

window.Brief = Brief;