// PROVE landing — extra creative sections.
// Hall of Streaks (milestone badges), Live Activity Stream, Streak Calendar.

const { useState: useStateExtra, useEffect: useEffectExtra, useRef: useRefExtra } = React;

// ─────────────────────────────────────────────────────────────
// HALL OF STREAKS — milestone badges grid
// ─────────────────────────────────────────────────────────────
function HallOfStreaks() {
  const tiles = [
    { day: 1,    label: 'First Proof',     reward: '+5',   pct: '100%' },
    { day: 3,    label: 'Liftoff',         reward: '+10',  pct: '78%'  },
    { day: 7,    label: 'One Week',        reward: '+50',  pct: '42%'  },
    { day: 14,   label: 'Two Weeks',       reward: '+75',  pct: '24%'  },
    { day: 30,   label: 'One Month',       reward: '+200', pct: '11%',  current: true },
    { day: 60,   label: 'Two Months',      reward: '+400', pct: '6%'   },
    { day: 100,  label: 'Triple Digits',   reward: '+800', pct: '3%'   },
    { day: 180,  label: 'Half Year',       reward: '+1500',pct: '1.4%' },
    { day: 365,  label: 'One Year',        reward: '+5000',pct: '0.6%' },
    { day: 500,  label: 'Half a Million',  reward: '+10K', pct: '0.2%' },
    { day: 730,  label: 'Two Years',       reward: '+25K', pct: '0.05%'},
    { day: 1000, label: 'Four Digits',     reward: '+50K', pct: '0.01%'},
  ];
  const [hovered, setHovered] = useStateExtra(-1);
  return (
    <section style={{
      background: 'var(--bg)', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)',
        width: 1200, height: 1200,
        background: 'radial-gradient(circle, rgba(255,97,85,0.04) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, position: 'relative', zIndex: 1 }}>
        <h2 style={{
          fontFamily: 'var(--display)',
          fontSize: 'clamp(56px, 6vw, 96px)',
          fontWeight: 900, lineHeight: 0.92,
          letterSpacing: '-0.045em', margin: 0,
          textTransform: 'uppercase', textWrap: 'balance',
          maxWidth: 1000,
        }}>
          The wall of <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>streaks</span> you could earn.
        </h2>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 07 / milestones</span>
      </div>

      <p style={{
        fontSize: 17, color: 'rgba(255,255,255,0.6)', maxWidth: 680,
        margin: '0 0 56px', lineHeight: 1.6, position: 'relative', zIndex: 1,
      }}>
        Hit a milestone, earn the badge. Earn the coins. Move up the leaderboard. Each one rarer than the last.
      </p>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 14,
        position: 'relative', zIndex: 1,
      }}>
        {tiles.map((t, i) => {
          const isHovered = hovered === i;
          const isCurrent = t.current;
          return (
            <div key={t.day}
              onMouseEnter={() => setHovered(i)}
              onMouseLeave={() => setHovered(-1)}
              style={{
                aspectRatio: '1',
                position: 'relative',
                border: isCurrent ? '1px solid var(--coral)' : '1px solid rgba(255,255,255,0.1)',
                background: isCurrent
                  ? 'linear-gradient(180deg, rgba(255,97,85,0.10), rgba(255,97,85,0.02))'
                  : 'linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))',
                borderRadius: 16,
                padding: '18px 14px',
                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
                gap: 8, cursor: 'pointer',
                transition: 'transform 0.25s cubic-bezier(.2,1,.3,1), border-color 0.2s, box-shadow 0.2s',
                transform: isHovered ? `translateY(-6px) rotate(${(i % 2 === 0 ? -2 : 2)}deg)` : 'translateY(0) rotate(0)',
                boxShadow: isHovered
                  ? '0 24px 60px rgba(255,97,85,0.25), 0 0 0 1px rgba(255,97,85,0.4)'
                  : isCurrent
                  ? '0 0 40px rgba(255,97,85,0.15)'
                  : 'none',
              }}>
              {/* big day number */}
              <MonoNum size={isHovered ? 42 : 36} weight={700}
                color={isCurrent || isHovered ? 'var(--coral)' : '#fff'}
                style={{
                  letterSpacing: '-0.04em', lineHeight: 1,
                  transition: 'font-size 0.2s ease, color 0.2s ease',
                  filter: isCurrent ? 'drop-shadow(0 0 12px rgba(255,97,85,0.5))' : 'none',
                }}>{t.day}</MonoNum>
              <div style={{
                fontSize: 9, fontFamily: 'var(--mono)',
                letterSpacing: 0.14 + 'em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.4)', fontWeight: 700,
              }}>day{t.day === 1 ? '' : 's'}</div>
              <div style={{
                fontSize: 11, fontWeight: 600,
                color: isCurrent || isHovered ? '#fff' : 'rgba(255,255,255,0.7)',
                marginTop: 4, textAlign: 'center', lineHeight: 1.2,
              }}>{t.label}</div>
              {/* hover detail */}
              <div style={{
                position: 'absolute', bottom: 12, left: 12, right: 12,
                fontSize: 10, fontFamily: 'var(--mono)',
                color: 'var(--coral)', fontWeight: 700,
                textAlign: 'center',
                opacity: isHovered ? 1 : 0,
                transition: 'opacity 0.2s ease',
                pointerEvents: 'none',
              }}>{t.reward} coins · {t.pct} reach it</div>
              {/* current marker */}
              {isCurrent && (
                <span style={{
                  position: 'absolute', top: -8, right: -8,
                  background: 'var(--coral)', color: '#0D0D0D',
                  fontSize: 8, fontFamily: 'var(--mono)', fontWeight: 700,
                  letterSpacing: 0.12 + 'em', textTransform: 'uppercase',
                  padding: '3px 7px', borderRadius: 999,
                }}>You're here</span>
              )}
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// LIVE ACTIVITY STREAM — auto-scrolling vertical feed
// ─────────────────────────────────────────────────────────────
function LiveActivityStream() {
  const D = window.PROVE_DATA;
  const events = [
    { user: 'maya.k',    verb: 'posted', habit: 'lifting',   day: 47,  reward: '+10' },
    { user: 'devon.r',   verb: 'backed', target: 'priya_s',  amount: 50 },
    { user: 'priya_s',   verb: 'posted', habit: 'reading',   day: 92,  reward: '+10' },
    { user: 'rae.h',     verb: 'milestone', day: 60,         reward: '+400' },
    { user: 'sasha.m',   verb: 'posted', habit: 'sobriety',  day: 184, reward: '+10' },
    { user: 'tomas.lin', verb: 'doubted', target: 'jordan.b',amount: 25 },
    { user: 'nico_w',    verb: 'posted', habit: 'writing',   day: 19,  reward: '+10' },
    { user: 'jordan.b',  verb: 'streak-broken', day: 4 },
    { user: 'amara_o',   verb: 'milestone', day: 30,         reward: '+200' },
    { user: 'kev.do',    verb: 'posted', habit: 'cold',      day: 8,   reward: '+10' },
    { user: 'devon.r',   verb: 'won-stake', amount: 75 },
    { user: 'priya_s',   verb: 'milestone', day: 90,         reward: '+800' },
    { user: 'maya.k',    verb: 'backed', target: 'rae.h',    amount: 25 },
    { user: 'rae.h',     verb: 'posted', habit: 'coding',    day: 61,  reward: '+10' },
  ];

  const [tick, setTick] = useStateExtra(0);
  useEffectExtra(() => {
    if (prefersReducedMotion()) return;
    const t = setInterval(() => setTick((v) => v + 1), 1600);
    return () => clearInterval(t);
  }, []);

  // Show 5 events at a time, rotating
  const visible = Array.from({ length: 5 }, (_, i) => events[(tick + i) % events.length]);

  return (
    <section style={{
      background: '#0a0a0a', color: '#fff',
      padding: '140px 72px',
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center' }}>
        <div>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'rgba(255,255,255,0.4)' }}>§ 08 / live now</span>
          <h2 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(48px, 5.4vw, 84px)',
            fontWeight: 900, lineHeight: 0.94,
            letterSpacing: '-0.045em', margin: '18px 0 22px',
            textTransform: 'uppercase', textWrap: 'balance',
          }}>
            The feed never <span style={{ color: 'var(--coral)', fontStyle: 'italic' }}>sleeps.</span>
          </h2>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 24px' }}>
            Every few seconds someone posts, someone backs, someone doubts. While you read this, a streak just hit day 100 in Tokyo. Someone in Lisbon just lost theirs.
          </p>
          <p style={{ fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: 0 }}>
            This is what consistency looks like at scale.
          </p>
        </div>

        <div style={{
          background: 'linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 20, padding: 4,
          overflow: 'hidden', position: 'relative',
          minHeight: 380,
        }}>
          {/* Top label */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '14px 18px',
            borderBottom: '1px solid rgba(255,255,255,0.06)',
          }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%', background: 'var(--coral)',
              animation: 'prove-pulse 1.6s ease-out infinite',
            }} />
            <span style={{
              fontSize: 11, fontFamily: 'var(--mono)',
              color: 'var(--coral)', fontWeight: 700,
              letterSpacing: 0.14 + 'em', textTransform: 'uppercase',
            }}>Activity · Live</span>
            <MonoNum size={11} color="var(--text-3)" style={{ marginLeft: 'auto' }}>{(2840 + tick * 3).toLocaleString()} events today</MonoNum>
          </div>

          <div style={{
            display: 'flex', flexDirection: 'column',
            padding: '8px 0',
          }}>
            {visible.map((e, i) => {
              const u = D.byHandle[e.user];
              const targetU = e.target ? D.byHandle[e.target] : null;
              return (
                <div key={`${tick}-${i}`} style={{
                  display: 'flex', alignItems: 'center', gap: 12,
                  padding: '12px 18px',
                  animation: i === 0 ? 'prove-activity-in 0.5s cubic-bezier(.2,.8,.3,1) backwards' : 'none',
                  opacity: 1 - (i * 0.12),
                }}>
                  <Avatar user={u} size={32} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: '#fff', display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                      <span style={{ fontWeight: 600 }}>{u.handle}</span>
                      {e.verb === 'posted' && (
                        <>
                          <span style={{ color: 'var(--text-2)' }}>posted</span>
                          <HabitPill habit={D.habits[e.habit]} size="xs" />
                          <span style={{ color: 'var(--text-2)' }}>day {e.day}</span>
                        </>
                      )}
                      {e.verb === 'backed' && targetU && (
                        <span style={{ color: 'var(--text-2)' }}>backed <span style={{ color: '#fff', fontWeight: 600 }}>{targetU.handle}</span> with <MonoNum size={13} color="var(--coral)" weight={600}>{e.amount}</MonoNum></span>
                      )}
                      {e.verb === 'doubted' && targetU && (
                        <span style={{ color: 'var(--text-2)' }}>doubted <span style={{ color: '#fff', fontWeight: 600 }}>{targetU.handle}</span> for <MonoNum size={13} color="#fff" weight={600}>{e.amount}</MonoNum></span>
                      )}
                      {e.verb === 'milestone' && (
                        <span style={{ color: 'var(--text-2)' }}>hit milestone <span style={{ color: 'var(--coral)', fontWeight: 700 }}>day {e.day}</span></span>
                      )}
                      {e.verb === 'streak-broken' && (
                        <span style={{ color: 'var(--text-2)' }}>broke a <MonoNum size={13} color="var(--text-3)" weight={600}>{e.day}d</MonoNum> streak</span>
                      )}
                      {e.verb === 'won-stake' && (
                        <span style={{ color: 'var(--text-2)' }}>won stake · earned <MonoNum size={13} color="var(--coral)" weight={600}>+{e.amount}</MonoNum></span>
                      )}
                    </div>
                  </div>
                  {e.reward && (
                    <MonoNum size={13} weight={700} color="var(--coral)">{e.reward}</MonoNum>
                  )}
                  <MonoNum size={10} color="var(--text-3)" style={{ minWidth: 28, textAlign: 'right' }}>
                    {i === 0 ? 'now' : `${i * 2}s`}
                  </MonoNum>
                </div>
              );
            })}
          </div>

          {/* Bottom fade */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: 80,
            background: 'linear-gradient(transparent, #0a0a0a)',
            pointerEvents: 'none',
          }} />
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HallOfStreaks, LiveActivityStream });