// upprofiler — /report/weekly

function PageReport({ onNavigate, score: globalScore }) {
  const lines = [12, 14, 16, 14, 18, 22, 28, 24, 30, 35, 32, 40, 38];
  return (
    <div>
      <Nav current="/report/weekly" onNavigate={onNavigate} score={globalScore} delta={9} />
      <div className="page prose">
        <PageHeader
          id="/report/weekly"
          name="The Monday Brief"
          sub="Week 17 · 21 Apr — 27 Apr · for Jasmin Alić · sent before your morning coffee"
          tag={{ label: 'Retention engine' }}
          right={<span className="label-mono">Sent · Mon 07:00 GMT</span>}
        />

        {/* Email-style report */}
        <article style={{
          background: 'var(--surface)',
          border: '1px solid var(--line)',
          borderLeft: '4px solid var(--pink)',
          borderRadius: 12,
          padding: '48px 56px',
        }}>
          <div className="label-mono" style={{ marginBottom: 8 }}>Week 17 · The Monday Brief</div>
          <h1 style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05, marginBottom: 32 }}>
            Your conviction moved from <span style={{ color: 'var(--mute)' }}>68</span> to <span className="pink">71</span>. Good week, Jasmin.
          </h1>

          {/* Big delta */}
          <div className="row gap-32" style={{ padding: '24px 0', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', marginBottom: 32 }}>
            <div>
              <div className="label-mono">Score change</div>
              <div style={{ fontSize: 56, fontWeight: 800, color: 'var(--good)', letterSpacing: '-0.03em', fontFamily: 'var(--font-display)', lineHeight: 1, marginTop: 4 }}>
                +3
              </div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }}></div>
            <div>
              <div className="label-mono">Posts this week</div>
              <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1, marginTop: 4 }}>5</div>
            </div>
            <div style={{ width: 1, alignSelf: 'stretch', background: 'var(--line)' }}></div>
            <div>
              <div className="label-mono">Best post</div>
              <div style={{ fontSize: 56, fontWeight: 800, color: 'var(--pink)', letterSpacing: '-0.03em', fontFamily: 'var(--font-display)', lineHeight: 1, marginTop: 4 }}>8.4</div>
            </div>
            <div style={{ flex: 1, alignSelf: 'flex-end' }}>
              <Sparkline data={lines} width={220} height={50} />
            </div>
          </div>

          {/* Headline narrative */}
          <p style={{ fontSize: 22, lineHeight: 1.5, color: 'var(--ink)', fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 32, textWrap: 'pretty' }}>
            The win this week? You leaned harder into <span className="pink">storytelling and your 1:1 coaching narrative</span>
            {' '}and dialled the lifestyle posts back. Long-form held strong, your headline now matches the language
            of your top three posts, and the new banner copy is finally pulling its weight.
          </p>
          <p style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink-soft)', marginBottom: 32 }}>
            Keep going. This is the work. Hope this helps. — Coach J ❤️
          </p>

          {/* Action block */}
          <div style={{
            background: 'var(--gradient-hero)',
            borderRadius: 12,
            padding: 28,
            marginBottom: 40,
          }}>
            <span className="tag pink">This week's homework</span>
            <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 12, lineHeight: 1.3 }}>
              Ship one carousel on the DM-to-sales script by Thursday.
            </div>
            <div style={{ color: 'var(--ink-soft)', marginTop: 8, fontSize: 15 }}>
              The 28 Apr algorithm shift bumped dwell weighting by 22%. A carousel from you on this lifts your score
              an estimated +2.4 and reinforces your strongest story pillar. You've got this.
            </div>
            <div className="row gap-12 mt-16">
              <button className="btn btn-primary btn-sm" onClick={() => onNavigate('/check')}>Open the composer →</button>
              <button className="btn btn-tertiary btn-sm">Skip this week</button>
            </div>
          </div>

          {/* Top contributors / detractors */}
          <div className="label-mono" style={{ marginBottom: 16 }}>Top movers · last 7 days</div>
          <div className="col gap-8" style={{ marginBottom: 40 }}>
            {[
              ['+', '+2.1', '"I\'ve been writing online for 17 years. Today, I run a business in 70+ countries."', 'Mon · 418k impressions'],
              ['+', '+1.4', '"I don\'t sell courses. I coach. Here\'s the difference."', 'Wed · 192k impressions'],
              ['+', '+0.6', '"Link Up member just signed her first $4k client. Here\'s how."', 'Fri · 71k impressions'],
              ['−', '−0.8', '"Bosnian coffee + sunset · just enjoying life"', 'Tue · 11k impressions'],
              ['−', '−0.3', '"Just thinking out loud on a Sunday"', 'Sun · 3k impressions'],
            ].map(([sign, delta, title, meta], i) => {
              const good = sign === '+';
              return (
                <div key={i} className="row" style={{
                  padding: '14px 16px', borderRadius: 8, border: '1px solid var(--line)',
                  background: good ? 'rgba(31,171,137,0.04)' : 'rgba(244,165,43,0.04)', gap: 16,
                }}>
                  <div style={{ width: 60, fontFamily: 'var(--font-mono)', fontWeight: 500, color: good ? 'var(--good)' : 'var(--warn)' }}>{delta}</div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em' }}>{title}</div>
                    <div className="label-mono" style={{ marginTop: 4 }}>{meta}</div>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Algo note */}
          <div style={{ borderTop: '1px solid var(--line)', paddingTop: 32 }}>
            <div className="row gap-8" style={{ marginBottom: 12 }}>
              <span className="tag pink">Algorithm note</span>
              <span className="label-mono">28 Apr</span>
            </div>
            <p style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.55 }}>
              LinkedIn shipped a feed update overnight. Dwell-time now weighs ~22% more vs reactions.
              We rescored your last 30 posts automatically — net effect on your conviction was −0.4. Carousels
              and 800–1,200 character posts benefit most. The play is obvious. Make one.
            </p>
          </div>

          <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--line)' }} className="row between">
            <span className="label-mono">Next brief · Mon 5 May · 07:00 GMT</span>
            <a className="btn btn-tertiary btn-sm" onClick={() => onNavigate('/dashboard')} style={{ cursor: 'pointer' }}>Back to dashboard →</a>
          </div>
        </article>
      </div>
      <Footer />
    </div>
  );
}

window.PageReport = PageReport;