/* Sybilhunt website — app composition + state. */

function App() {
  const [how, setHow] = React.useState(false);
  const [toast, setToast] = React.useState(false);
  const [huntStage, setHuntStage] = React.useState(0);

  const deadline = React.useMemo(() => Date.now() + 21 * 86400000 + 9 * 3600000 + 14 * 60000, []);

  function scrollTo(id) {
    if (id === 'top') { window.scrollTo({ top: 0, behavior: 'smooth' }); return; }
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  }

  function startHunt() {
    setHow(false);
    if (window.SHVisitor) {
      window.SHVisitor.getRecord().then(function (rec) {
        if (rec.onboardingDone) { window.location.href = 'crm.html'; }
        else { setHuntStage(1); }
      });
      return;
    }
    setHuntStage(1);
  }

  function acceptHunt() {
    setHuntStage(0);
    if (window.SHVisitor) window.SHVisitor.setFlag('onboardingDone', true);
    window.location.href = 'crm.html';
  }

  function declineHunt() {
    setHuntStage(0);
    scrollTo('top');
  }

  return (
    <div>
      <Header onHowItWorks={() => setHow(true)} onStart={startHunt} scrollTo={scrollTo} />
      <CampaignHero onHowItWorks={() => setHow(true)} onStart={startHunt} deadline={deadline} />

      <div id="partners"><PartnersSection onStart={startHunt} /></div>
      <div id="team"><TeamSection /></div>

      <CtaBanner onStart={startHunt} />

      <Footer scrollTo={scrollTo} />

      <Dialog open={how} onClose={() => setHow(false)} eyebrow="How it works" title="Hunting Sybils in 4 steps"
        footer={<Button variant="primary" size="lg" onClick={startHunt} rightIcon={<span>→</span>}>Start hunting Sybils</Button>}>
        <HowItWorksBody />
      </Dialog>

      <Toast show={toast} onClose={() => setToast(false)} />
      <OnboardingModal stage={huntStage} setStage={setHuntStage} onAccept={acceptHunt} onDecline={declineHunt} />
    </div>
  );
}

function OnboardingModal({ stage, setStage, onAccept, onDecline }) {
  const open = stage > 0;
  const close = () => setStage(0);
  const blueBtn = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 9,
    height: 56, padding: '0 32px', borderRadius: 'var(--radius-pill)', border: 'none', cursor: 'pointer',
    background: '#2563EB', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17,
    letterSpacing: '-0.01em', boxShadow: '0 8px 28px rgba(37,99,235,0.32)', transition: 'filter var(--dur-fast)',
  };
  return (
    <Dialog open={open} onClose={close} width="min(94vw, 1100px)"
      eyebrow={`Step ${stage} of 3`}
      title={stage === 1 ? 'How rewards should work' : stage === 2 ? 'This is what a Sybil looks like' : 'Why projects pay to stop them'}
      footer={
        stage === 1
          ? <button style={blueBtn} onClick={() => setStage(2)}
              onMouseEnter={(e) => e.currentTarget.style.filter = 'brightness(1.08)'}
              onMouseLeave={(e) => e.currentTarget.style.filter = 'none'}>Continue <span>→</span></button>
          : stage === 2
          ? <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button style={{ ...blueBtn, background: 'transparent', color: 'var(--text-strong)', border: '1px solid var(--border-strong)', boxShadow: 'none' }} onClick={() => setStage(1)}>← Back</button>
              <button style={blueBtn} onClick={() => setStage(3)}
                onMouseEnter={(e) => e.currentTarget.style.filter = 'brightness(1.08)'}
                onMouseLeave={(e) => e.currentTarget.style.filter = 'none'}>Continue <span>→</span></button>
            </div>
          : <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button style={{ ...blueBtn, background: 'transparent', color: 'var(--text-strong)', border: '1px solid var(--border-strong)', boxShadow: 'none' }} onClick={onDecline}>Decline</button>
              <button style={{ ...blueBtn, background: 'var(--signal-500)', color: 'var(--signal-ink)', boxShadow: '0 8px 28px var(--signal-glow)' }} onClick={onAccept}
                onMouseEnter={(e) => e.currentTarget.style.filter = 'brightness(1.08)'}
                onMouseLeave={(e) => e.currentTarget.style.filter = 'none'}>Accept &amp; start hunting →</button>
            </div>
      }>

      {stage === 1 && (
        <div>
          <p style={{ fontSize: 18, color: 'var(--text-body)', marginBottom: 22 }}>
            When a project pays out rewards, the goal is simple: every share goes to a <strong style={{ color: 'var(--text-strong)' }}>different real person</strong>. One campaign, many genuine participants — each gets their fair part.
          </p>
          <img src="assets/onboarding/sybil-graph.png" alt="One campaign paying ten real, separate people"
            style={{ width: '100%', maxHeight: '46vh', objectFit: 'contain', borderRadius: 'var(--radius-lg)', display: 'block', border: '1px solid var(--border-subtle)', background: 'var(--surface-raised)' }} />
          <p style={{ fontSize: 15, color: 'var(--text-muted)', marginTop: 18, lineHeight: 1.6 }}>
            Here the reward reaches ten real, independent people — Alex, James, Ibraghim and the rest are all different humans who each legitimately received their payout. This is exactly how it's meant to look.
          </p>
        </div>
      )}
      {stage === 2 && (
        <div>
          <p style={{ fontSize: 18, color: 'var(--text-body)', marginBottom: 22 }}>
            A <strong style={{ color: 'var(--text-strong)' }}>Sybil</strong> fakes that same crowd. Behind seven of these “people” is a single operator — notice how many are literally named <strong style={{ color: 'var(--coral-500)' }}>John</strong>. They drain the pool meant for everyone else.
          </p>
          <img src="assets/onboarding/sybil-graph-2.png" alt="One Sybil operator faking seven identities among real users"
            style={{ width: '100%', maxHeight: '44vh', objectFit: 'contain', borderRadius: 'var(--radius-lg)', display: 'block', border: '1px solid var(--border-subtle)', background: 'var(--surface-raised)' }} />
          <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginTop: 18 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 12, height: 12, borderRadius: 999, background: 'var(--coral-500)', flex: 'none' }}></span>
              <span style={{ fontSize: 14, color: 'var(--text-muted)' }}><strong style={{ color: 'var(--text-strong)' }}>Red</strong> — Sybil wallets, all one actor</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 12, height: 12, borderRadius: 999, background: 'var(--signal-500)', flex: 'none' }}></span>
              <span style={{ fontSize: 14, color: 'var(--text-muted)' }}><strong style={{ color: 'var(--text-strong)' }}>Green</strong> — real, independent people</span>
            </div>
          </div>
          <p style={{ fontSize: 15, color: 'var(--text-muted)', marginTop: 18, lineHeight: 1.6 }}>
            Seven red “John” wallets are the same person; only Ibrahim, Nikolay and David are genuine. Your job as a hunter is to expose the red cluster so the pool goes to the people who earned it.
          </p>
        </div>
      )}
      {stage === 3 && (
        <div>
          <p style={{ fontSize: 18, color: 'var(--text-body)', marginBottom: 24 }}>
            Every dollar a Sybil grabs is a dollar stolen from someone who actually showed up. Left unchecked, they don't just take money — they break the whole reason projects run rewards in the first place.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 24 }}>
            <div style={{ background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 20 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)', marginBottom: 8 }}>Honest users get less</div>
              <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55 }}>A fixed pool split with hundreds of fake wallets means real contributors receive a fraction of what they earned — or nothing.</div>
            </div>
            <div style={{ background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 20 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)', marginBottom: 8 }}>Metrics become lies</div>
              <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55 }}>Inflated “users” and “volume” hide real traction, so teams make decisions on numbers that aren't true.</div>
            </div>
            <div style={{ background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', padding: 20 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 17, color: 'var(--text-strong)', marginBottom: 8 }}>Trust erodes</div>
              <div style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55 }}>When people see farmers win, they stop participating — and the community the project paid to grow walks away.</div>
            </div>
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', background: 'color-mix(in oklab, var(--signal-500) 10%, var(--surface-card))', border: '1px solid var(--border-signal)', borderRadius: 'var(--radius-lg)', padding: '18px 22px' }}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(22px, 3vw, 30px)', color: 'var(--signal-600)', flex: 'none' }}>$5M</span>
            <span style={{ fontSize: 15, color: 'var(--text-body)', lineHeight: 1.5 }}>That's why projects fund hunters: paying you to expose Sybils is far cheaper than handing the pool to bots. Catch them — and the reward is yours.</span>
          </div>

          <div style={{ marginTop: 24, background: 'var(--surface-panel)', border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 3vw, 28px)' }}>
            <div className="sh-overline" style={{ marginBottom: 10 }}>Your decision</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(20px, 2.6vw, 26px)', color: 'var(--text-strong)', letterSpacing: '-0.01em', marginBottom: 10 }}>
              Ready to hunt Sybils — and get paid for it?
            </div>
            <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>
              By accepting, you join Sibilhunt as a hunter: you'll investigate wallet clusters, submit evidence, and earn a share of partner reward pools for confirmed findings. Decline and you'll head back to the home page — no commitment.
            </p>
          </div>
        </div>
      )}
    </Dialog>
  );
}

function Toast({ show, onClose }) {
  return (
    <div style={{ position: 'fixed', left: '50%', bottom: show ? 28 : -120, transform: 'translateX(-50%)', zIndex: 1200, transition: 'bottom var(--dur-slow) var(--ease-bounce)', display: 'flex', alignItems: 'center', gap: 14, background: 'var(--surface-panel)', border: '1px solid var(--border-signal)', boxShadow: 'var(--glow-signal), var(--shadow-lg)', borderRadius: 'var(--radius-pill)', padding: '12px 14px 12px 20px' }}>
      <span style={{ width: 9, height: 9, borderRadius: 999, background: 'var(--signal-500)', boxShadow: '0 0 10px var(--signal-500)' }} />
      <span style={{ fontSize: 15, color: 'var(--text-body)' }}>Welcome aboard, hunter — your hunt dashboard is being prepared.</span>
      <button onClick={onClose} aria-label="Close" style={{ width: 30, height: 30, borderRadius: '50%', cursor: 'pointer', background: 'var(--surface-card)', color: 'var(--text-muted)', border: '1px solid var(--border-subtle)', fontSize: 15 }}>×</button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);