// upprofiler — /profile/rewrite

function PageProfileRewrite({ onNavigate, score: globalScore }) {
  const sections = [
    {
      key: 'headline',
      name: 'Headline',
      before: 'Founder, speaker, copywriter. Coffee enthusiast ☕ Let\'s connect!',
      after: 'Award-winning personal branding & business coach | Founder of Link Up community (in 70+ countries) | Teaching founders how to build a trusted online brand & a profitable business.',
      delta: 8,
    },
    {
      key: 'about',
      name: 'About section',
      before: 'Hey! I\'m Jasmin. I love LinkedIn and writing and helping people grow. I post most days about marketing, branding, and whatever\'s on my mind. Drop a comment, I read them all 🙌',
      after: 'Are you struggling to find your voice on LinkedIn? To position yourself as the "go-to" authority in your industry?\n\nBetter yet... struggling to get "seen" or "heard" by your ideal customers? Same ones you KNOW you can actually help?\n\nIf you\'ve been nodding along, congrats. I can help.\n\nI\'ve coached 300+ founders 1:1 and trained 50,000+ people in workshops. Link Up — my coaching community — is in 70+ countries. 17 years writing online. Every word my own. Featured in Forbes, Bloomberg. Past clients: Microsoft, Marriott Bonvoy, Digicel, Dash.\n\nHere\'s how I work:\n\n— I don\'t do the work for you. I show the way.\n— I don\'t tell you the nice stuff. I share the data.\n— I don\'t focus on today. I focus on 2 years from now.\n\nFrom Bosnia to the world. ❤️\n\n— Coach J',
      delta: 12,
    },
    {
      key: 'banner',
      name: 'Banner copy',
      before: 'Helping you grow on LinkedIn 🚀',
      after: 'I don\'t sell courses. I coach. Link Up — in 70+ countries.',
      delta: 5,
    },
    {
      key: 'skills',
      name: 'Top skills',
      before: 'Marketing · Social Media · Branding · Public Speaking · Copywriting',
      after: 'Personal Branding · Coaching · LinkedIn Training · LinkedIn Growth · Content Strategy',
      delta: 7,
    },
  ];

  const [accepted, setAccepted] = useState({});
  const acceptedCount = Object.values(accepted).filter(Boolean).length;
  const totalDelta = sections.reduce((s, x) => s + (accepted[x.key] ? x.delta : 0), 0);

  return (
    <div>
      <Nav current="/profile/rewrite" onNavigate={onNavigate} score={globalScore} delta={9} />
      <div className="page">
        <PageHeader
          id="/profile/rewrite"
          name="Profile rewrites"
          sub="Generated this morning from what you actually post — same framework I use 1:1 with founders inside Link Up. One click to accept per section. Reject the bad ones; that's how the model gets sharper next month."
          tag={{ kind: 'pink', label: 'Monthly · Apr 2026' }}
          right={
            <div className="row gap-12">
              <span className="label-mono">{acceptedCount}/{sections.length} accepted</span>
              <span className="tag pink">+{totalDelta} conviction</span>
            </div>
          }
        />

        <div className="col gap-24">
          {sections.map((s) => {
            const isAccepted = accepted[s.key];
            return (
              <div key={s.key} className="card" style={{ padding: 0, overflow: 'hidden' }}>
                {/* header */}
                <div className="row between" style={{ padding: '20px 28px', borderBottom: '1px solid var(--line)' }}>
                  <div>
                    <div className="card-id">PROFILE · {s.key.toUpperCase()}</div>
                    <div className="card-title">{s.name}</div>
                  </div>
                  <div className="row gap-12">
                    <span className="tag pink">+{s.delta} conviction</span>
                    {!isAccepted ? (
                      <>
                        <button className="btn btn-secondary btn-sm" onClick={() => setAccepted(a => ({ ...a, [s.key]: 'rejected' }))}>Reject</button>
                        <button className="btn btn-primary btn-sm" onClick={() => setAccepted(a => ({ ...a, [s.key]: true }))}>Accept</button>
                      </>
                    ) : isAccepted === 'rejected' ? (
                      <>
                        <span className="tag warn">Rejected</span>
                        <button className="btn btn-tertiary btn-sm" onClick={() => setAccepted(a => ({ ...a, [s.key]: false }))}>Undo</button>
                      </>
                    ) : (
                      <>
                        <span className="tag good">✓ Accepted</span>
                        <button className="btn btn-tertiary btn-sm" onClick={() => setAccepted(a => ({ ...a, [s.key]: false }))}>Undo</button>
                      </>
                    )}
                  </div>
                </div>
                {/* before / after */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                  <div style={{
                    padding: '24px 28px',
                    background: 'rgba(244,165,43,0.06)',
                    borderRight: '1px solid var(--line)',
                  }}>
                    <div className="label-mono" style={{ color: 'var(--warn)', marginBottom: 12 }}>Before · current</div>
                    <div style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>
                      {s.before}
                    </div>
                  </div>
                  <div style={{
                    padding: '24px 28px',
                    background: 'var(--pink-wash)',
                  }}>
                    <div className="label-mono" style={{ color: 'var(--pink-deep)', marginBottom: 12 }}>After · proposed</div>
                    <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.6, fontWeight: 500, whiteSpace: 'pre-wrap' }}>
                      {s.after}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bulk action */}
        <div className="row between mt-32" style={{
          padding: 24, background: 'var(--gradient-hero)', borderRadius: 12,
        }}>
          <div>
            <div className="label-mono" style={{ marginBottom: 6 }}>Bulk action</div>
            <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>
              Accept all four · projected lift <span className="pink">+{sections.reduce((s, x) => s + x.delta, 0)} conviction</span>
            </div>
          </div>
          <div className="row gap-12">
            <button className="btn btn-secondary" onClick={() => setAccepted({})}>Reset</button>
            <button className="btn btn-primary" onClick={() => {
              const all = {};
              sections.forEach(s => all[s.key] = true);
              setAccepted(all);
            }}>Accept all · push to LinkedIn →</button>
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

window.PageProfileRewrite = PageProfileRewrite;