// upprofiler — /pillars

function PagePillars({ onNavigate, score: globalScore }) {
  const pillars = [
    { name: 'Storytelling frameworks', pct: 36, status: 'core', claimed: true },
    { name: 'Profile positioning', pct: 23, status: 'core', claimed: true },
    { name: 'DM-to-sales playbooks', pct: 13, status: 'on', claimed: true },
    { name: 'Offer creation', pct: 10, status: 'on', claimed: true },
    { name: 'Member wins · Link Up', pct: 9, status: 'light', claimed: false },
    { name: 'Bosnia & lifestyle', pct: 9, status: 'drift', claimed: false },
    { name: 'High-ticket coaching sales', pct: 0, status: 'missing', claimed: true },
    { name: 'Brand-building masterclasses', pct: 0, status: 'missing', claimed: true },
  ];

  const profileClaims = ['Storytelling frameworks', 'Profile positioning', 'DM-to-sales playbooks', 'Offer creation', 'High-ticket coaching sales', 'Brand-building masterclasses'];
  const youPostAbout = ['Storytelling frameworks', 'Profile positioning', 'DM-to-sales playbooks', 'Offer creation', 'Member wins · Link Up', 'Bosnia & lifestyle'];

  return (
    <div>
      <Nav current="/pillars" onNavigate={onNavigate} score={globalScore} delta={9} />
      <div className="page">
        <PageHeader
          id="/pillars"
          name="Story pillars"
          sub="What your profile says you're about, vs what you actually post. The drift hides here — and it's where most of you leak conviction."
          tag={{ label: 'Diagnostic' }}
          right={<span className="label-mono">90-day window · 52 posts</span>}
        />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 32 }}>
          {pillars.map((p, i) => {
            const missing = p.status === 'missing';
            const drift = p.status === 'drift';
            return (
              <div key={i} className="card hoverable" style={{
                padding: 20,
                borderStyle: missing ? 'dashed' : 'solid',
                opacity: missing ? 0.85 : 1,
              }}>
                <div className="row between" style={{ marginBottom: 12 }}>
                  <span className="card-id">PILLAR · {String(i + 1).padStart(2, '0')}</span>
                  {missing && <span className="tag warn">Missing</span>}
                  {drift && <span className="tag warn">Drift</span>}
                  {p.status === 'core' && <span className="tag pink">Core</span>}
                </div>
                <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: '-0.01em', minHeight: 48, lineHeight: 1.3 }}>
                  {p.name}
                </div>
                <div className="row gap-8" style={{ alignItems: 'baseline', marginTop: 16 }}>
                  <span style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', color: missing ? 'var(--mute)' : 'var(--ink)', fontVariantNumeric: 'tabular-nums' }}>
                    {p.pct}
                  </span>
                  <span className="label-mono" style={{ color: 'var(--mute)' }}>% of posts</span>
                </div>
                {/* fill bar */}
                <div style={{
                  marginTop: 16, height: 4, background: 'var(--bg)', borderRadius: 100, overflow: 'hidden',
                }}>
                  <div style={{
                    height: '100%',
                    width: `${Math.max(p.pct, missing ? 0 : 2)}%`,
                    background: drift ? 'var(--warn)' : 'var(--pink)',
                    borderRadius: 100,
                    transition: 'width 1.2s cubic-bezier(0.4, 0, 0.2, 1)',
                  }} />
                </div>
                <div className="label-mono" style={{ marginTop: 12 }}>
                  {p.claimed ? 'Claimed in profile' : 'Not in profile'}
                </div>
              </div>
            );
          })}
        </div>

        {/* Comparison */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 32 }}>
          <Card id="/pillars.claims" title="What your profile claims" tag={{ label: '6 pillars' }}>
            <div className="col gap-8" style={{ marginTop: 8 }}>
              {profileClaims.map(p => {
                const matched = youPostAbout.includes(p);
                return (
                  <div key={p} className="row between" style={{ padding: '10px 14px', background: matched ? 'var(--pink-wash)' : 'var(--bg)', borderRadius: 8, border: '1px solid var(--line)' }}>
                    <span style={{ fontWeight: 500 }}>{p}</span>
                    <span className="label-mono" style={{ color: matched ? 'var(--good)' : 'var(--warn)' }}>
                      {matched ? '✓ Posting' : '✕ Silent'}
                    </span>
                  </div>
                );
              })}
            </div>
          </Card>
          <Card id="/pillars.actual" title="What you actually post" tag={{ label: '6 pillars' }}>
            <div className="col gap-8" style={{ marginTop: 8 }}>
              {youPostAbout.map(p => {
                const matched = profileClaims.includes(p);
                return (
                  <div key={p} className="row between" style={{ padding: '10px 14px', background: matched ? 'var(--pink-wash)' : 'var(--bg)', borderRadius: 8, border: '1px solid var(--line)' }}>
                    <span style={{ fontWeight: 500 }}>{p}</span>
                    <span className="label-mono" style={{ color: matched ? 'var(--good)' : 'var(--warn)' }}>
                      {matched ? '✓ On profile' : '✕ Not claimed'}
                    </span>
                  </div>
                );
              })}
            </div>
          </Card>
        </div>

        <div className="card" style={{ background: 'var(--gradient-hero)', display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center', padding: 32 }}>
          <div>
            <span className="tag pink">Your move</span>
            <div style={{ fontSize: 28, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 12 }}>
              Two pillars are silent. <span className="pink">Two are drifting.</span>
            </div>
            <div style={{ color: 'var(--ink-soft)', marginTop: 8, fontSize: 15, maxWidth: 64 + 'ch' }}>
              You claim "high-ticket coaching" and "masterclasses" on your profile, but you haven't posted about
              either in 90 days. Honest answer? Either post on them or remove the claim. The score moves
              6–8 points either way. Your call.
            </div>
          </div>
          <div className="row gap-12">
            <button className="btn btn-secondary" onClick={() => onNavigate('/profile/rewrite')}>Fix the profile</button>
            <button className="btn btn-primary" onClick={() => onNavigate('/check')}>Draft a post →</button>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

window.PagePillars = PagePillars;