// upprofiler — Marketing Landing /

const WHOP_LINK = 'https://whop.com/linkupbyjasmin?a=whpreviews';

function PageLanding({ onNavigate }) {
  const [url, setUrl] = useState('');
  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState('');

  function submit(e) {
    if (e && e.preventDefault) e.preventDefault();
    const v = url.trim();
    if (!v) { setErr('Paste your LinkedIn URL first.'); return; }
    if (!/linkedin\.com\/in\//i.test(v)) {
      setErr('Use a linkedin.com/in/... URL.');
      return;
    }
    setErr('');
    setSubmitting(true);
    // Hand off to the /score page which does the API call and renders the result.
    onNavigate(`/score?url=${encodeURIComponent(v)}`);
  }

  return (
    <div>
      {/* Top nav (lighter, marketing version) */}
      <header className="nav" style={{ background: 'transparent', borderBottom: 'none', position: 'absolute' }}>
        <Logo />
        <nav className="nav-links">
          <a className="nav-link" href={WHOP_LINK} target="_blank" rel="noopener" style={{ cursor: 'pointer' }}>Link Up community</a>
          <a className="nav-link" onClick={() => onNavigate('/account')} style={{ cursor: 'pointer' }}>Account</a>
        </nav>
        <div className="nav-right">
          <ThemeToggle />
        </div>
      </header>

      {/* Hero */}
      <section className="hero-section" style={{
        background: 'var(--gradient-hero)',
        padding: '140px 64px 100px',
        position: 'relative',
        overflow: 'hidden',
        minHeight: '90vh',
      }}>
        <div style={{ maxWidth: 1480, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 48, alignItems: 'center' }}>
          <div>
            <div className="row gap-12" style={{ marginBottom: 36, flexWrap: 'wrap' }}>
              <span className="tag soft">Your LinkedIn profile is a landing page</span>
              <span className="label-mono">Make sure it's converting</span>
            </div>
            <h1 className="hero-h1" style={{
              fontSize: 'clamp(40px, 7.5vw, 116px)',
              fontWeight: 800, lineHeight: 0.96, letterSpacing: '-0.04em',
              color: 'var(--ink)',
              margin: 0,
            }}>
              <span className="hero-h1-line">How convincing</span>
              <span className="hero-h1-line">is your profile?</span>
              <span className="hero-h1-line pink">Get your score.</span>
            </h1>
            <p style={{ fontSize: 18, color: 'var(--ink-soft)', marginTop: 40, maxWidth: '54ch', lineHeight: 1.5 }}>
              Insert your LinkedIn profile URL and get actionable feedback:
            </p>
            <form onSubmit={submit} style={{ marginTop: 24, maxWidth: 540 }}>
              <div className={err ? '' : 'cta-glow'} style={{
                display: 'flex', gap: 8,
                background: 'var(--surface)', border: `1px solid ${err ? 'var(--warn)' : 'var(--pink)'}`,
                borderRadius: 12, padding: 6,
              }}>
                <input
                  type="text"
                  value={url}
                  onChange={(e) => { setUrl(e.target.value); if (err) setErr(''); }}
                  placeholder="https://linkedin.com/in/jasminalic"
                  spellCheck={false}
                  autoComplete="off"
                  style={{
                    flex: 1, padding: '14px 16px', fontSize: 16, fontFamily: 'var(--font-display)',
                    border: 'none', background: 'transparent', color: 'var(--ink)', outline: 'none',
                  }}
                />
                <button type="submit" className="btn btn-primary btn-lg" disabled={submitting} style={{ padding: '14px 24px', fontSize: 16 }}>
                  {submitting ? 'Scoring…' : 'Score me →'}
                </button>
              </div>
              {err && <div className="label-mono" style={{ color: 'var(--warn)', marginTop: 10 }}>{err}</div>}
            </form>
            <div className="row gap-24" style={{ marginTop: 28, flexWrap: 'wrap' }}>
              <div className="row gap-8">
                <span className="pulse-dot"></span>
                <span className="label-mono">Free · no signup</span>
              </div>
              <span style={{ color: 'var(--line)' }}>·</span>
              <div className="label-mono">Public profile data only · last 30 posts analyzed</div>
            </div>
          </div>

          {/* Hero score ring — sized generously, floating annotations clear the ring */}
          <div className="hero-ring-col" style={{ display: 'flex', justifyContent: 'center', position: 'relative' }}>
            <div style={{ position: 'relative' }}>
              <ScoreRing value={71} size={560} delta={9} animateKey="hero" />
              {/* Top-right floating annotation */}
              <div className="hero-annot top-right" style={{
                position: 'absolute', top: 40, right: -60,
                background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 10, padding: '10px 14px',
                fontSize: 12, boxShadow: 'var(--shadow-card)',
                maxWidth: 220,
              }}>
                <div className="label-mono" style={{ marginBottom: 2 }}>Profile claims</div>
                <div style={{ fontWeight: 700, color: 'var(--ink)' }}>Award-winning brand coach</div>
              </div>
              {/* Bottom-left floating annotation */}
              <div className="hero-annot bottom-left" style={{
                position: 'absolute', bottom: 70, left: -80,
                background: 'var(--surface)', border: '1px solid var(--line)',
                borderRadius: 10, padding: '10px 14px',
                fontSize: 12, boxShadow: 'var(--shadow-card)',
                maxWidth: 240,
              }}>
                <div className="label-mono" style={{ marginBottom: 2 }}>You actually post</div>
                <div style={{ fontWeight: 700, color: 'var(--ink)' }}>DM-to-sales tactics · 58%</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* The thesis */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="label-mono">§ 01 · The thesis</div>
          <h2 style={{ fontSize: 'clamp(28px, 4.5vw, 52px)', fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.1, marginTop: 16 }}>
            Your profile is your virtual handshake.<br />
            <span className="pink">Make it firm. Not weak.</span>
          </h2>
          <p style={{ fontSize: 18, color: 'var(--ink-soft)', marginTop: 24, maxWidth: '64ch', lineHeight: 1.6 }}>
            upprofiler measures whether your profile and your last 30 posts make the same impression.
            Firm grip — the algorithm puts you in front of people. Weak grip — you get scrolled past.
          </p>
          <p style={{ fontSize: 16, color: 'var(--ink-soft)', marginTop: 18, maxWidth: '64ch', lineHeight: 1.6, fontStyle: 'italic' }}>
            — built on the framework Jasmin Alić uses 1:1 with founders inside Link Up.
          </p>
        </div>
      </section>

      {/* Three pillars — match what we actually do */}
      <section style={{ padding: '0 64px 120px' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {[
            ['01', 'One honest number',
              'AI scores 0–100 from your profile + your last 30 posts. The one metric that measures whether you actually mean what you say.'],
            ['02', 'The drift, called out',
              'Themes you claim but never post. Themes you post but never claim. Plus the three biggest gaps, named in Coach J\'s voice.'],
            ['03', 'Built-in share card',
              'Every score generates a branded LinkedIn post image. Brag a little, challenge a friend, or just stay convicted.'],
          ].map(([n, t, d]) => (
            <div key={n} className="card" style={{ padding: 32 }}>
              <div className="label-mono" style={{ color: 'var(--pink)' }}>§ {n}</div>
              <div style={{ fontSize: 26, fontWeight: 700, letterSpacing: '-0.02em', marginTop: 12 }}>{t}</div>
              <div style={{ color: 'var(--ink-soft)', marginTop: 12, fontSize: 15 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Free public tool */}
      <section style={{ padding: '120px 64px', background: 'var(--gradient-hero)' }}>
        <div style={{ maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', maxWidth: 980, margin: '0 auto' }}>
            <div className="label-mono">§ 02 · How much</div>
            <h2 style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.05, marginTop: 16, textWrap: 'balance' }}>
              Free for everyone. <span className="pink">No signup. No upsell.</span>
            </h2>
            <p style={{ fontSize: 19, color: 'var(--ink-soft)', marginTop: 24, maxWidth: '60ch', margin: '24px auto 0', lineHeight: 1.6 }}>
              This isn't a paid product. It's a tool. Paste your profile, get a number, use it however you want.
              If you want the rest of the work — coaching, community, real feedback — that lives inside{' '}
              <a href={WHOP_LINK} target="_blank" rel="noopener" style={{ color: 'var(--pink)', fontWeight: 700 }}>Link Up</a>.
              That's how Jasmin wants it.
            </p>
          </div>

          {/* What you actually get — concrete visual breakdown */}
          <div className="label-mono" style={{ textAlign: 'center', marginTop: 64, marginBottom: 20 }}>
            What you actually get
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: 16,
          }}>
            {/* Card 1: The score */}
            <div className="card" style={{ padding: 24, background: 'var(--surface)' }}>
              <div style={{
                height: 96, display: 'flex',
                alignItems: 'center', justifyContent: 'center',
                background: 'var(--bg)', borderRadius: 10,
                border: '1px solid var(--line)',
              }}>
                <svg width="80" height="80" viewBox="0 0 80 80">
                  <circle cx="40" cy="40" r="34" className="ring-track" strokeWidth="6" fill="none" />
                  <circle cx="40" cy="40" r="34"
                    stroke="var(--pink)" strokeWidth="6" fill="none"
                    strokeLinecap="round"
                    strokeDasharray={`${0.71 * 2 * Math.PI * 34} ${2 * Math.PI * 34}`}
                    transform="rotate(-90 40 40)" />
                  <text x="40" y="48" textAnchor="middle"
                    style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 800, fill: 'var(--pink)', letterSpacing: '-1px' }}>
                    71
                  </text>
                </svg>
              </div>
              <div style={{ fontWeight: 700, fontSize: 16, marginTop: 16, letterSpacing: '-0.01em' }}>
                One conviction score
              </div>
              <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 6, lineHeight: 1.5 }}>
                0–100, by AI, in 90 seconds. With a band: Convinced, Aligned, Mixed, Drifting.
              </div>
            </div>

            {/* Card 2: Themes */}
            <div className="card" style={{ padding: 24, background: 'var(--surface)' }}>
              <div style={{
                height: 96, padding: 12,
                background: 'var(--bg)', borderRadius: 10,
                border: '1px solid var(--line)',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 6,
              }}>
                <div className="chip-row">
                  <span className="chip shared">coaching</span>
                  <span className="chip shared">community</span>
                </div>
                <div className="chip-row">
                  <span className="chip warn">consulting</span>
                  <span className="chip good">Sarajevo</span>
                </div>
              </div>
              <div style={{ fontWeight: 700, fontSize: 16, marginTop: 16, letterSpacing: '-0.01em' }}>
                The drift, in plain words
              </div>
              <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 6, lineHeight: 1.5 }}>
                Themes you claim but don't post. Themes you post but never claim.
              </div>
            </div>

            {/* Card 3: Gaps */}
            <div className="card" style={{ padding: 24, background: 'var(--surface)' }}>
              <div style={{
                height: 96, padding: 12,
                background: 'var(--bg)', borderRadius: 10,
                border: '1px solid var(--line)',
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 8,
              }}>
                {[
                  ['01', 'Your profile claims X, your posts say Y.'],
                  ['02', 'You stopped posting on Z 90 days ago.'],
                ].map(([n, t]) => (
                  <div key={n} className="row gap-8" style={{ alignItems: 'flex-start' }}>
                    <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--pink)', fontSize: 11, fontWeight: 600 }}>{n}</span>
                    <span style={{ fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.4 }}>{t}</span>
                  </div>
                ))}
              </div>
              <div style={{ fontWeight: 700, fontSize: 16, marginTop: 16, letterSpacing: '-0.01em' }}>
                Three biggest gaps
              </div>
              <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 6, lineHeight: 1.5 }}>
                Diagnosed and prescribed in Coach J's voice. Blunt, no hedging.
              </div>
            </div>

            {/* Card 4: Share card */}
            <div className="card" style={{ padding: 24, background: 'var(--surface)' }}>
              <div style={{
                height: 96,
                background: 'radial-gradient(ellipse at center, #0E1A33 0%, #060B16 70%)',
                borderRadius: 10, border: '1px solid var(--line)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
                position: 'relative', overflow: 'hidden',
              }}>
                <svg width="44" height="44" viewBox="0 0 44 44">
                  <circle cx="22" cy="22" r="19" stroke="rgba(148,163,184,0.18)" strokeWidth="3" fill="none" />
                  <circle cx="22" cy="22" r="19"
                    stroke="#2DD4BF" strokeWidth="3" fill="none"
                    strokeLinecap="round"
                    strokeDasharray={`${0.88 * 2 * Math.PI * 19} ${2 * Math.PI * 19}`}
                    transform="rotate(-90 22 22)" />
                  <circle cx="22" cy="22" r="12" fill="#2DD4BF" opacity="0.3" />
                </svg>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <span style={{ fontSize: 26, fontWeight: 800, color: '#2DD4BF', letterSpacing: '-1px', lineHeight: 1 }}>88</span>
                  <span style={{ fontSize: 9, color: '#94A3B8', fontFamily: 'var(--font-mono)', letterSpacing: 1, marginTop: 2 }}>CONVINCED</span>
                </div>
              </div>
              <div style={{ fontWeight: 700, fontSize: 16, marginTop: 16, letterSpacing: '-0.01em' }}>
                Branded LinkedIn card
              </div>
              <div style={{ fontSize: 13, color: 'var(--mute)', marginTop: 6, lineHeight: 1.5 }}>
                Every score generates a ready-to-post image with your photo + score.
              </div>
            </div>
          </div>

          {/* Bottom strip — the small fine-print value props */}
          <div style={{
            display: 'flex', justifyContent: 'center', flexWrap: 'wrap',
            gap: 40, marginTop: 48,
            padding: '24px 0 0',
            borderTop: '1px solid var(--line)',
          }}>
            {[
              ['No login required', 'Paste a URL. That\'s it.'],
              ['Public data only', 'We read what LinkedIn shows. We never post.'],
              ['Re-score anytime', 'Your number changes when your content does.'],
            ].map(([t, d]) => (
              <div key={t} className="row gap-12" style={{ alignItems: 'center' }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <circle cx="8" cy="8" r="7.5" stroke="var(--pink)" strokeWidth="1.4" fill="none" />
                  <path d="M5 8 L7 10 L11 6" stroke="var(--pink)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
                </svg>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{t}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: '120px 64px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <h2 style={{ fontSize: 64, fontWeight: 800, letterSpacing: '-0.035em', lineHeight: 1.05 }}>
            Stop guessing.<br /><span className="pink">Paste your URL.</span>
          </h2>
          <p style={{ fontSize: 19, color: 'var(--ink-soft)', marginTop: 24, maxWidth: '54ch', margin: '24px auto 0' }}>
            Ninety seconds from paste to a number you can actually use. No signup. No payment. Just an honest answer.
          </p>
          <form onSubmit={submit} style={{ marginTop: 40, maxWidth: 580, margin: '40px auto 0' }}>
            <div style={{
              display: 'flex', gap: 8,
              background: 'var(--surface)', border: `1px solid ${err ? 'var(--warn)' : 'var(--line)'}`,
              borderRadius: 12, padding: 6,
              boxShadow: 'var(--shadow-card)',
            }}>
              <input
                type="text"
                value={url}
                onChange={(e) => { setUrl(e.target.value); if (err) setErr(''); }}
                placeholder="https://linkedin.com/in/jasminalic"
                spellCheck={false}
                autoComplete="off"
                style={{
                  flex: 1, padding: '14px 16px', fontSize: 16, fontFamily: 'var(--font-display)',
                  border: 'none', background: 'transparent', color: 'var(--ink)', outline: 'none',
                }}
              />
              <button type="submit" className="btn btn-primary btn-lg" disabled={submitting} style={{ padding: '14px 24px', fontSize: 16 }}>
                {submitting ? 'Scoring…' : 'Score me →'}
              </button>
            </div>
          </form>
        </div>
      </section>

      <Footer onNavigate={onNavigate} />
    </div>
  );
}

window.PageLanding = PageLanding;