/* Sybilhunt — page sections. window-exported. */

const SH_TEAM = [
  { name: 'crypt0zeke',    role: 'Web3 researcher · Engineer',     img: 'assets/team/crypt0zeke.png',    bio: 'Took part in the Hop Protocol Sybil Bounty; wrote the methodology for tracing linked wallets via the Alchemy Transfers API.' },
  { name: 'Igor Pertsiya', role: 'Founder · Hypra VC',             img: 'assets/team/igor-pertsiya.png', bio: 'Founder of the Hypra venture fund; commented to CoinDesk on the scale of sybil farming across ENS, Sui and Aptos.' },
  { name: 'Alex Momot',    role: 'CEO · Peanut Trade',             img: 'assets/team/alex-momot.png',    bio: 'His team monitors sybil attacks on airdrops in real time.' },
  { name: 'Peet Chan',     role: 'CEO · Co-founder, Trusta Labs',  img: 'assets/team/peet-chan.png',     bio: 'Builds TrustScan / TrustGo for AI sybil-wallet detection; worked with Celestia, Starknet, Manta, Sonic and Plume.' },
  { name: 'Simon Chen',    role: 'CTO · Co-founder, Trusta Labs',  img: 'assets/team/simon-chen.png',    bio: 'Previously at Alipay’s AI / security lab.' },
  { name: 'bitblondy',     role: 'Sybil analyst',                  img: 'assets/team/bitblondy.png',     bio: 'Ran sybil analysis for Optimism Retro Funding Round 4.' },
];

const SH_DOCS = [
  { tag: 'What Sybils are', t: 'One person, a hundred faces', d: 'A Sybil spins up dozens or hundreds of accounts and poses as a crowd of real users — to grab rewards meant for many people.' },
  { tag: 'Why they’re dangerous', t: 'They take what isn’t theirs', d: 'Sybils drain airdrop pools, distort activity metrics and erode trust in the project. Real participants get less — or nothing.' },
  { tag: 'Why projects pay', t: 'Cheaper to catch than to lose', d: 'Handing $5M to bots is a direct loss. It’s cheaper to give hunters a slice of the pool to filter Sybils out before distribution.' },
];

function Header({ onHowItWorks, onStart, scrollTo }) {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 100, height: 'var(--header-h)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 clamp(20px, 4vw, 48px)', background: 'rgba(250,250,250,0.88)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <Logo size={28} onClick={() => scrollTo('top')} />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          <NavLink onClick={() => { window.location.href = 'docs.html'; }}>Docs</NavLink>
          <NavLink onClick={() => scrollTo('partners')}>Partners</NavLink>
          <NavLink onClick={() => scrollTo('team')}>Team</NavLink>
        </nav>
      </div>
    </header>
  );
}

function NavLink({ onClick, children }) {
  return (
    <button onClick={onClick} style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15, color: 'var(--text-muted)', padding: 0, transition: 'color var(--dur-fast)' }}
      onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-strong)')}
      onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-muted)')}>
      {children}
    </button>
  );
}

function PolyCloudLogo() {
  const [rising, setRising] = React.useState(true);
  return (
    <div className={rising ? 'sh-poly-rise-wrap' : ''} onAnimationEnd={() => setRising(false)}>
      <div className="sh-poly-bob">
        <a href="https://polymarket.com" target="_blank" rel="noopener noreferrer" className="sh-poly-badge" aria-label="Open Polymarket">
          <img src="https://github.com/Polymarket.png?size=460" alt="Polymarket" />
        </a>
      </div>
    </div>
  );
}

const SH_PUFFS = [
  // top edge
  { left: '8%',  top: -62, s: 150 }, { left: '29%', top: -84, s: 176 }, { left: '52%', top: -84, s: 176 }, { left: '74%', top: -62, s: 150 },
  // left edge
  { left: -64, top: '20%', s: 146 }, { left: -56, top: '56%', s: 134 },
  // right edge
  { right: -64, top: '20%', s: 146 }, { right: -56, top: '56%', s: 134 },
  // bottom edge
  { left: '12%', bottom: -62, s: 150 }, { left: '37%', bottom: -82, s: 176 }, { left: '63%', bottom: -62, s: 150 },
  // thought-bubble tail (bottom-left)
  { left: 6, bottom: -104, s: 54 }, { left: -42, bottom: -150, s: 34 }, { left: -78, bottom: -184, s: 20 },
];

function CloudPuffs() {
  return (
    <>
      {SH_PUFFS.map((p, i) => (
        <span key={i} className="sh-cloud-puff" style={{
          width: p.s, height: p.s,
          left: p.left, right: p.right, top: p.top, bottom: p.bottom,
        }} />
      ))}
    </>
  );
}

function CampaignHero({ onHowItWorks, onStart, deadline }) {
  return (
    <section style={{ position: 'relative', minHeight: 'calc(100vh - var(--header-h))', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 'clamp(90px, 11vh, 130px) clamp(20px, 4vw, 48px) clamp(56px, 8vh, 96px)', overflow: 'hidden', background: 'radial-gradient(900px 500px at 78% -15%, rgba(125,200,32,0.09), transparent 55%), #FAFAFA' }}>
      <img className="sh-cloud-img" src="assets/cloud.png" alt="" />
      <div className="sh-cloud-hero">
        <div className="sh-poly-anchor"><PolyCloudLogo /></div>
        <div className="sh-cloud-card">
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 22, flexWrap: 'wrap' }}>
            <Badge tone="signal" dot>Hunt live</Badge>
            <Badge tone="info">Campaign · Polymarket</Badge>
          </div>

          <h1 style={{ fontSize: 'clamp(38px, 6.2vw, 76px)', lineHeight: 1.02, letterSpacing: '-0.02em' }}>
            Help hunt a Sybil<br />on <span style={{ color: 'var(--cyan-300)' }}>Polymarket</span>
          </h1>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 2vw, 20px)', color: 'var(--text-muted)', marginTop: 18, maxWidth: 620 }}>
            Polymarket put up a pool to clear out bots before rewards go out. Find clusters of accounts run by one actor — and take your share.
          </p>

          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'clamp(24px, 5vw, 56px)', alignItems: 'flex-end', margin: '34px 0' }}>
            <Stat value="$5,000,000" label="Reward pool" tone="signal" />
            <div>
              <div className="sh-overline" style={{ marginBottom: 10 }}>Campaign ends in</div>
              <Countdown deadline={deadline} size="md" tone="signal" />
            </div>
          </div>

          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center' }}>
            <Button variant="primary" size="lg" onClick={onStart} rightIcon={<span>→</span>} style={{ height: 60, fontSize: 18, padding: '0 36px' }}>Start hunting Sybils</Button>
            <Button variant="secondary" size="lg" onClick={onHowItWorks}>How it works</Button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 28, paddingTop: 22, borderTop: '1px solid var(--border-subtle)' }}>
            <span style={{ width: 28, height: 28, borderRadius: 7, overflow: 'hidden', background: '#E6F4F9', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
              <img src="https://github.com/Polymarket.png?size=64" alt="Polymarket" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
            </span>
            <span style={{ fontSize: 14, color: 'var(--text-faint)' }}>Campaign backed by <strong style={{ color: 'var(--text-body)' }}>Polymarket</strong> · payouts in USDC</span>
          </div>
          </div>
        </div>
    </section>
  );
}

function DocsSection() {
  return (
    <section style={{ padding: 'clamp(64px, 10vh, 128px) clamp(20px, 4vw, 48px)', maxWidth: 'var(--container-max)', margin: '0 auto' }}>
      <div className="sh-overline" style={{ marginBottom: 14 }}>Docs · What Sybilhunt is</div>
      <h2 style={{ fontSize: 'clamp(30px, 4.4vw, 52px)', maxWidth: 760, lineHeight: 1.05 }}>
        An open sybil hunt where the community wins
      </h2>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, color: 'var(--text-muted)', marginTop: 18, maxWidth: 680 }}>
        Sybilhunt connects projects that hand out rewards with hunters who know how to find fraud. The project puts up a pool — hunters bring the evidence — bots get nothing.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 18, marginTop: 48 }}>
        {SH_DOCS.map((c) => (
          <Card key={c.tag} interactive padding={28}>
            <Badge tone="signal" size="sm">{c.tag}</Badge>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'var(--text-strong)', margin: '16px 0 10px', letterSpacing: '-0.01em' }}>{c.t}</div>
            <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.6 }}>{c.d}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

function TeamSection({ scrollRef }) {
  return (
    <section ref={scrollRef} style={{ padding: 'clamp(64px, 10vh, 120px) clamp(20px, 4vw, 48px)', maxWidth: 'var(--container-max)', margin: '0 auto' }}>
      <div className="sh-overline" style={{ marginBottom: 14 }}>Our team</div>
      <h2 style={{ fontSize: 'clamp(30px, 4.4vw, 52px)', maxWidth: 720, lineHeight: 1.05 }}>
        The people who started the hunt
      </h2>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, color: 'var(--text-muted)', marginTop: 16, maxWidth: 620 }}>
        Analysts, forensics specialists and engineers from crypto teams who spent years catching fraud — and teamed up to make it everyone’s game.
      </p>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 18, marginTop: 48 }}>
        {SH_TEAM.map((m) => (
          <Card key={m.name} interactive padding={0} style={{ overflow: 'hidden' }}>
            <div style={{ position: 'relative', width: '100%', aspectRatio: '1 / 1', overflow: 'hidden', background: 'var(--surface-raised)' }}>
              <img src={m.img} alt={m.name} loading="lazy"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} />
            </div>
            <div style={{ padding: 22 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--text-strong)' }}>{m.name}</div>
              <div className="sh-overline" style={{ margin: '6px 0 12px', color: 'var(--signal-400)' }}>{m.role}</div>
              <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.55 }}>{m.bio}</p>
            </div>
          </Card>
        ))}
      </div>
    </section>
  );
}

function PartnerModal({ partner, onClose, onStart }) {
  const deadline = React.useMemo(() => {
    if (!partner) return 0;
    const days = partner.live ? (partner.endDays || partner.startDays) : partner.startDays;
    return Date.now() + days * 86400000;
  }, [partner]);
  const live = partner && partner.live;
  return (
    <Dialog open={!!partner} onClose={onClose} eyebrow={partner ? partner.cat : ''} title={partner ? partner.name : ''}
      footer={live ? <Button variant="primary" size="lg" onClick={() => { onClose(); if (onStart) onStart(); }} rightIcon={<span>→</span>}>Start hunting Sybils</Button> : null}>
      {partner && (
        <div>
          <div style={{ display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap', marginBottom: 24 }}>
            <span style={{ width: 96, height: 96, flex: 'none', borderRadius: 22, overflow: 'hidden', background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', boxShadow: 'var(--shadow-md)' }}>
              <img src={partner.logoUrl} alt={partner.name} style={{ width: '78%', height: '78%', objectFit: 'contain' }} />
            </span>
            <div style={{ minWidth: 200, flex: 1 }}>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 12 }}>
                {live
                  ? <span className="sh-active-badge"><span className="sh-active-dot"></span>Hunt live now</span>
                  : <Badge tone="info">Upcoming</Badge>}
                <Badge tone="gold">{partner.pool} pool</Badge>
              </div>
              <p style={{ fontSize: 16, color: 'var(--text-muted)', lineHeight: 1.6, margin: 0 }}>{partner.desc}</p>
            </div>
          </div>
          <div style={{ background: 'var(--surface-raised)', border: live ? '1px solid var(--border-signal)' : '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'clamp(20px, 3vw, 30px)' }}>
            <div className="sh-overline" style={{ marginBottom: 14, color: live ? 'var(--signal-600)' : undefined }}>{live ? '🟢 Hunt is live — ends in' : 'Hunt starts in'}</div>
            <Countdown deadline={deadline} size="lg" tone="signal" />
            <p style={{ fontSize: 13, color: 'var(--text-faint)', marginTop: 14, fontFamily: 'var(--font-mono)' }}>
              {live
                ? `${partner.name} · hunt open now · ${partner.pool} pool · payouts in USDC`
                : `${partner.name} · ${partner.pool} reward pool · payouts in USDC`}
            </p>
          </div>
        </div>
      )}
    </Dialog>
  );
}

function PartnersSection({ scrollRef, onStart }) {
  const [active, setActive] = React.useState(null);
  return (
    <section ref={scrollRef} style={{ padding: 'clamp(64px, 10vh, 120px) clamp(20px, 4vw, 48px)', background: '#F7FAF8', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <div className="sh-overline" style={{ marginBottom: 14 }}>Partners</div>
        <h2 style={{ fontSize: 'clamp(28px, 4vw, 48px)', maxWidth: 720, lineHeight: 1.05 }}>
          Projects that trust the community's hunters
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 17, color: 'var(--text-muted)', marginTop: 14, maxWidth: 620 }}>
          From active campaigns to past sybil hunts — these projects put up pools and let the community do the work.
        </p>

        <div style={{ marginTop: 40 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <span className="sh-active-badge">
              <span className="sh-active-dot"></span>
              Active
            </span>
            <span style={{ fontSize: 13, color: 'var(--text-faint)', fontFamily: 'var(--font-mono)' }}>Currently running hunts</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
            {SH_PARTNERS_ACTIVE.map((p) => (
              <PartnerChip key={p.name} name={p.name} category={p.cat} accent={p.accent} logoUrl={p.logoUrl} onClick={() => setActive(p)} />
            ))}
          </div>
        </div>

        <div style={{ marginTop: 44 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
            <Badge tone="neutral">Past</Badge>
            <span style={{ fontSize: 13, color: 'var(--text-faint)', fontFamily: 'var(--font-mono)' }}>Completed campaigns</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12 }}>
            {SH_PARTNERS_PAST.map((p) => (
              <PartnerChip key={p.name} name={p.name} category={p.cat} accent={p.accent} logoUrl={p.logoUrl} muted />
            ))}
          </div>
        </div>
      </div>
      <PartnerModal partner={active} onClose={() => setActive(null)} onStart={onStart} />
    </section>
  );
}

function CtaBanner({ onStart }) {
  return (
    <section style={{ padding: 'clamp(48px, 9vh, 110px) clamp(20px, 4vw, 48px)' }}>
      <div style={{ position: 'relative', overflow: 'hidden', maxWidth: 'var(--container-max)', margin: '0 auto', borderRadius: 'var(--radius-2xl)', padding: 'clamp(40px, 7vw, 88px) clamp(28px, 5vw, 72px)', textAlign: 'center', background: 'linear-gradient(135deg, #0F1A12 0%, #15301B 60%, #0E2A18 100%)', boxShadow: '0 30px 80px rgba(15,40,22,0.28)' }}>
        <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(680px 340px at 50% -10%, rgba(125,200,32,0.30), transparent 60%)', pointerEvents: 'none' }} />
        <div style={{ position: 'relative' }}>
          <div className="sh-overline" style={{ color: 'var(--signal-500)', marginBottom: 18 }}>Reward pool $5,000,000 · ends soon</div>
          <h2 style={{ fontSize: 'clamp(34px, 6vw, 68px)', lineHeight: 1.03, letterSpacing: '-0.02em', color: '#fff', maxWidth: 880, margin: '0 auto' }}>
            Help hunt a Sybil
          </h2>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'clamp(16px, 2vw, 20px)', color: 'rgba(255,255,255,0.72)', marginTop: 18, maxWidth: 560, marginInline: 'auto' }}>
            Find clusters of accounts run by one actor — and take your share of the pool.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
            <Button variant="primary" size="lg" onClick={onStart} rightIcon={<span>→</span>}
              style={{ height: 64, fontSize: 19, padding: '0 42px' }}>
              Start hunting Sybils
            </Button>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ scrollTo }) {
  return (
    <footer style={{ borderTop: '1px solid var(--border-subtle)', padding: 'clamp(40px, 7vh, 72px) clamp(20px, 4vw, 48px)', background: '#F0F2F0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Logo size={26} />
          <p style={{ fontSize: 13, color: 'var(--text-faint)', marginTop: 14, maxWidth: 360 }}>An open platform for hunting Sybils in crypto distributions. © 2026 Sybilhunt.</p>
        </div>
        <div style={{ display: 'flex', gap: 28 }}>
          <NavLink onClick={() => scrollTo('partners')}>Partners</NavLink>
          <NavLink onClick={() => scrollTo('team')}>Team</NavLink>
          <NavLink onClick={() => { window.location.href = 'docs.html'; }}>Docs</NavLink>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, CampaignHero, DocsSection, PartnersSection, TeamSection, CtaBanner, Footer, SH_TEAM, SH_DOCS });