/* WIN WALL - trophies + confetti */

function Confetti({ trigger }) {
  const canvasRef = useRef(null);
  useEffect(() => {
    const c = canvasRef.current;
    if (!c) return;
    const ctx = c.getContext('2d');
    const dpr = devicePixelRatio || 1;
    const r = c.getBoundingClientRect();
    c.width = r.width * dpr;
    c.height = r.height * dpr;
    ctx.setTransform(dpr,0,0,dpr,0,0);

    const dark = document.documentElement.getAttribute('data-theme') === 'dark';
    const colors = dark
      ? ['#16E07A', '#8B5CF6', '#FFC700', '#F3F0FA']
      : ['#16E07A', '#8B5CF6', '#FFC700', '#6D28D9'];
    const parts = [];
    const spawn = () => {
      for (let i = 0; i < 60; i++) {
        parts.push({
          x: r.width / 2 + (Math.random()-.5)*40,
          y: r.height * 0.35,
          vx: (Math.random()-.5) * 8,
          vy: -Math.random() * 9 - 3,
          g: 0.22,
          c: colors[(Math.random()*colors.length)|0],
          s: Math.random() * 6 + 3,
          life: 1,
          rot: Math.random() * Math.PI,
          vr: (Math.random()-.5) * .3,
        });
      }
    };
    spawn();
    const id = setInterval(spawn, 3200);

    let raf;
    const tick = () => {
      ctx.clearRect(0, 0, r.width, r.height);
      for (const p of parts) {
        p.vy += p.g;
        p.x += p.vx;
        p.y += p.vy;
        p.rot += p.vr;
        p.life -= 0.008;
        ctx.save();
        ctx.translate(p.x, p.y);
        ctx.rotate(p.rot);
        ctx.fillStyle = p.c;
        ctx.globalAlpha = Math.max(0, p.life);
        ctx.fillRect(-p.s/2, -p.s/4, p.s, p.s/2);
        ctx.restore();
      }
      for (let i = parts.length - 1; i >= 0; i--) if (parts[i].life <= 0 || parts[i].y > r.height + 20) parts.splice(i, 1);
      raf = requestAnimationFrame(tick);
    };
    tick();
    return () => { cancelAnimationFrame(raf); clearInterval(id); };
  }, []);
  return <canvas ref={canvasRef} className="confetti-canvas"/>;
}

function WinWall() {
  const [expanded, setExpanded] = useState(null);

  const featured = {
    name: 'Webes GNG',
    handle: '@webesgng',
    role: 'inner circle · gang call',
    title: 'Inner-circle call ran $7 → $78 ATH - an 8×',
    multiple: '8×',
    from: '$7',
    to: '$78',
    sub: 'A call shared inside the gang topped out at an 8x. When the circle moves, the circle eats.',
    postUrl: 'https://x.com/webesgng/status/2060618216095785300',
    proof: '/assets/wins/token-call-8x.jpg',
    when: 'this week',
    img: '/assets/avatars/webesgng.jpg',
    color: '#16E07A',
  };

  // Verified, proof-backed wins first; remaining are honest anonymized gang wins
  // (no invented names/$ - see safety notes). `proof`/`postUrl` only where real.
  const wins = [
    { name: 'webesgng', label: 'GNG', display: '8×', what: 'Inner-circle call ran $7 → $78 ATH', tag: 'tuff win', color: 'green', when: 'this week', img: '/assets/avatars/webesgng.jpg', postUrl: 'https://x.com/webesgng/status/2060618216095785300', verified: true },
    { name: 'webesgng', label: 'GNG', display: '300', what: 'Hit 300 in the gang - milestone unlocked', tag: 'motionorr', color: 'purple', when: 'recently', img: '/assets/avatars/webesgng.jpg', postUrl: 'https://x.com/webesgng/status/2060053534540702189', verified: true },
    { name: '0xileri', label: 'WL', display: '2 WL', what: 'GTD whitelist spots dropped to the gang (InkGenetics collab)', tag: 'we eating', color: 'yellow', when: 'recently', img: '/assets/avatars/0xileri.jpg', postUrl: 'https://x.com/0xileri/status/2060405826083312062', verified: true },
    { name: 'gng member', label: '', display: '', what: 'First mint of the week sold same-day', tag: 'yktv', color: 'green', when: 'this week', verified: false },
    { name: 'gng member', label: '', display: '', what: 'Landed a writing gig out of the chat', tag: 'e pos', color: 'purple', when: 'this week', verified: false },
    { name: 'gng member', label: '', display: '', what: 'Cleared a community task + reward', tag: 'big motion', color: 'yellow', when: 'this week', verified: false },
  ];

  return (
    <section className="wins section-pad" id="wins">
      <div className="light-pool green" style={{ width: 500, height: 500, right: '-10%', top: '10%', opacity: .35 }}/>

      <div className="container">
        <Reveal className="wins-head">
          <div>
            <span className="eyebrow">- the trophies · win wall</span>
            <h2 className="h-display wins-title">
              When one of us eats, <span className="gradient-text">all of us eat.</span>
            </h2>
          </div>
          <a href="#join" className="btn btn-ghost hot">Share a win <Arrow/></a>
        </Reveal>

        <Reveal delay={1} className="featured-win card">
          <Confetti />
          <div className="featured-tag">
            <span className="stamp">win of the week</span>
            <span className="featured-when">· {featured.when}</span>
          </div>

          <div className="featured-grid">
            <div className="featured-left">
              <div className="featured-amount">
                <span className="big"><CountUp to={8} duration={1600} suffix="×"/></span>
                <span className="curr-tag">{featured.from} → {featured.to}</span>
              </div>
              <h3 className="featured-title">{featured.title}</h3>
              <p className="featured-sub">{featured.sub}</p>
              <div className="featured-meta">
                <Avatar img={featured.img} name={featured.name} className="avatar"
                  style={{ background: `linear-gradient(135deg, ${featured.color}, #8B5CF6)` }} />
                <div>
                  <div className="featured-name">{featured.name}</div>
                  <div className="featured-role">{featured.role}</div>
                </div>
                <div className="featured-ref">
                  <span className="eyebrow">proof</span>
                  <a href={featured.postUrl} target="_blank" rel="noopener noreferrer"><code>view post ↗</code></a>
                </div>
              </div>
            </div>
            <div className="featured-right">
              <div className="receipt">
                <img src={featured.proof} alt="Proof of the call" loading="lazy"
                  onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.parentNode.classList.add('no-proof'); }}
                  style={{ width: '100%', borderRadius: '10px', display: 'block', marginBottom: '12px' }} />
                <div className="r-row"><span>Call</span><strong>{featured.from} → {featured.to} ATH</strong></div>
                <div className="r-row"><span>Result</span><strong>{featured.multiple}</strong></div>
                <div className="r-row"><span>Where</span><strong>Inner circle</strong></div>
                <div className="r-stamp">VERIFIED ✓</div>
              </div>
            </div>
          </div>
        </Reveal>

        <div className="wins-grid">
          {wins.map((w, i) => (
            <Reveal key={i} delay={(i % 4) + 1} className={`win-card card ${expanded === i ? 'is-expanded' : ''}`}
              onClick={() => setExpanded(expanded === i ? null : i)}>
              <div className="win-top">
                <Avatar img={w.img} name={w.name} className="win-avatar"
                  style={{ background: `hsl(${i*50}, 60%, 50%)` }} />
                <div className="win-who">
                  <div className="win-name">@{w.name}</div>
                  <div className="win-when">{w.when}</div>
                </div>
                <span className={`stamp ${w.color}`}>{w.tag}</span>
              </div>
              {w.display && <div className="win-amount">{w.display}</div>}
              <div className="win-what">{w.what}</div>
              <div className="win-receipt">
                {w.verified ? (
                  <>
                    <div className="r-row"><span>Status</span><strong>Verified ✓</strong></div>
                    {w.postUrl && <div className="r-row"><span>Proof</span><a href={w.postUrl} target="_blank" rel="noopener noreferrer"><code>view post ↗</code></a></div>}
                  </>
                ) : (
                  <div className="r-row"><span>Status</span><strong>Gang win</strong></div>
                )}
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .wins { position: relative; }
        .wins-head {
          display: flex; align-items: flex-end; justify-content: space-between;
          gap: 24px; margin-bottom: 48px; flex-wrap: wrap;
        }
        .wins-title {
          font-size: clamp(40px, 6.5vw, 90px);
          line-height: .92;
        }

        .featured-win {
          position: relative;
          padding: 32px;
          margin-bottom: 32px;
          background: linear-gradient(160deg, rgba(22,224,122,.08), rgba(139,92,246,.06) 50%, var(--w-02));
        }
        .confetti-canvas {
          position: absolute; inset: 0; width: 100%; height: 100%;
          pointer-events: none; z-index: 0;
        }
        .featured-tag {
          display: flex; align-items: center; gap: 10px;
          margin-bottom: 24px;
          position: relative; z-index: 1;
        }
        .featured-when { color: var(--muted); font-size: 12px; }

        .featured-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 36px;
          position: relative; z-index: 1;
        }
        @media (max-width: 800px) {
          .featured-grid { grid-template-columns: 1fr; gap: 28px; }
          .featured-win { padding: 24px 22px; }
        }

        .featured-amount {
          display: flex; align-items: flex-start; gap: 6px;
          margin-bottom: 18px;
          font-family: var(--font-display);
        }
        .featured-amount .curr {
          font-size: clamp(22px,2vw,28px);
          color: var(--green);
          font-weight: 600;
          margin-top: 12px;
        }
        .featured-amount .big {
          font-family: var(--font-tight);
          font-weight: 900;
          font-size: clamp(64px, 9vw, 120px);
          line-height: .9;
          color: var(--text);
          letter-spacing: -.04em;
          font-variant-numeric: tabular-nums;
          background: linear-gradient(180deg, #fff, #16E07A);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .featured-amount .curr-tag {
          font-size: 11px;
          letter-spacing: .2em;
          color: var(--muted);
          text-transform: uppercase;
          margin-top: 18px;
        }
        .featured-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(22px, 2.2vw, 30px);
          color: var(--text);
          letter-spacing: -.01em;
          margin-bottom: 8px;
          max-width: 480px;
        }
        .featured-sub { color: var(--muted); font-size: 15px; max-width: 460px; margin-bottom: 22px; }

        .featured-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
        .avatar {
          width: 44px; height: 44px; border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--font-display);
          font-weight: 700; color: #0a0711;
          font-size: 18px;
        }
        .featured-name { font-weight: 700; font-size: 14px; }
        .featured-role { color: var(--muted); font-size: 12px; }
        .featured-ref {
          margin-left: auto; text-align: right;
        }
        .featured-ref code {
          font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace);
          font-size: 12px; color: var(--text);
          letter-spacing: .04em;
        }

        .receipt {
          background: var(--glass-strong);
          border: 1px solid rgba(22,224,122,.25);
          border-radius: var(--r-md);
          padding: 20px 22px;
          font-size: 13px;
          backdrop-filter: blur(6px);
        }
        .r-row {
          display: flex; align-items: center; justify-content: space-between;
          padding: 8px 0;
        }
        .r-row span { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .14em; }
        .r-row strong { color: var(--text); font-weight: 600; font-size: 14px; }
        .r-row.big strong { font-size: 22px; font-family: var(--font-display); }
        .r-row code { font-family: ui-monospace, "JetBrains Mono", monospace; color: var(--text); font-size: 12px; }
        .r-divider { height: 1px; background: var(--ln-08); margin: 8px 0; }
        .r-stamp {
          margin-top: 14px;
          padding: 8px 12px;
          background: rgba(22,224,122,.15);
          color: var(--green);
          border: 1px dashed rgba(22,224,122,.4);
          border-radius: 6px;
          font-weight: 700;
          font-size: 12px;
          letter-spacing: .2em;
          text-align: center;
        }

        .wins-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 16px;
        }
        @media (max-width: 1100px) { .wins-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 800px)  { .wins-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 520px)  { .wins-grid { grid-template-columns: 1fr; } }

        .win-card {
          padding: 18px;
          cursor: none;
        }
        .win-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
        .win-avatar {
          width: 32px; height: 32px; border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--font-display); font-weight: 700; color: #fff;
          font-size: 13px;
        }
        .win-who { flex: 1; }
        .win-name { font-size: 13px; font-weight: 600; }
        .win-when { font-size: 11px; color: var(--muted); }
        .win-amount {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: 32px;
          color: var(--text);
          font-variant-numeric: tabular-nums;
          letter-spacing: -.02em;
          margin-bottom: 4px;
        }
        .win-what { color: var(--muted); font-size: 13px; line-height: 1.5; }
        .win-receipt {
          max-height: 0; overflow: hidden;
          transition: max-height .5s var(--ease-out), margin-top .5s var(--ease-out);
          font-size: 12px;
        }
        .win-card.is-expanded .win-receipt {
          max-height: 220px;
          margin-top: 16px;
          padding-top: 16px;
          border-top: 1px dashed var(--ln-1);
        }
      `}</style>
    </section>
  );
}

window.WinWall = WinWall;