// ============================================================
// ABOUT TYRONE PAGE
// ============================================================

const PAYOUT_DECK = [
  { src: 'assets/payouts/tradeify-1500.png', brand: 'TRADEIFY', color: 'cyan',  amount: '$1,500', status: 'Paid' },
  { src: 'assets/payouts/apex-1920.png',     brand: 'APEX',     color: 'amber', amount: '$1,920', status: 'Approved' },
  { src: 'assets/payouts/tradeify-2000.png', brand: 'TRADEIFY', color: 'cyan',  amount: '$2,000', status: 'Paid' },
  { src: 'assets/payouts/apex-3000.png',     brand: 'APEX',     color: 'amber', amount: '$3,000', status: 'Approved' },
];

const PayoutDeck = () => {
  const stageRef = React.useRef(null);
  const [hoverIdx, setHoverIdx] = React.useState(null);
  const [parallax, setParallax] = React.useState({ x: 0, y: 0 });

  const onMove = (e) => {
    if (!stageRef.current) return;
    const r = stageRef.current.getBoundingClientRect();
    const x = ((e.clientX - r.left) / r.width  - 0.5) * 2;  // -1..1
    const y = ((e.clientY - r.top)  / r.height - 0.5) * 2;
    setParallax({ x, y });
  };
  const onLeave = () => { setParallax({ x: 0, y: 0 }); setHoverIdx(null); };

  // Base transforms per card (offset + rotation) — like the reference image
  // z values are unique (1..4) so brands alternate cleanly front-to-back:
  // front: apex-3000 (z=4), tradeify-2000 (z=3), apex-1920 (z=2), tradeify-1500 (z=1) :back
  const slots = [
    { x: -28, y:  28, r:  -7, z: 1 },
    { x:  10, y:   0, r:  -2, z: 2 },
    { x:  56, y:  18, r:   4, z: 3 },
    { x:  98, y:  -8, r:   8, z: 4 },
  ];

  return (
    <div className="payout-stage" ref={stageRef} onMouseMove={onMove} onMouseLeave={onLeave}>
      {/* ambient glow behind stack */}
      <div className="payout-stage-glow" />

      {/* cards */}
      {PAYOUT_DECK.map((p, i) => {
        const s = slots[i] || slots[0];
        const isHover = hoverIdx === i;
        const isOther = hoverIdx !== null && hoverIdx !== i;
        const px = parallax.x * (4 + i * 2);
        const py = parallax.y * (3 + i * 1.5);
        const baseTransform = `translate3d(${s.x + px}px, ${s.y + py}px, 0) rotate(${s.r}deg)`;
        const hoverTransform = `translate3d(${s.x * 0.2}px, ${-30}px, 0) rotate(0deg) scale(1.18)`;
        return (
          <div
            key={i}
            className={`payout-tile payout-tile-${p.color} ${isHover ? 'is-hover' : ''} ${isOther ? 'is-other' : ''}`}
            style={{
              zIndex: isHover ? 50 : s.z,
              transform: isHover ? hoverTransform : baseTransform,
            }}
            onMouseEnter={() => setHoverIdx(i)}>
            <div className="payout-tile-img-wrap">
              <img src={p.src} alt={`${p.brand} payout`} className="payout-tile-img" loading="lazy" />
              <div className="payout-tile-shade" />
            </div>
            <div className="payout-tile-meta">
              <div className="payout-tile-top">
                <span className={`tag ${p.color}`}>{p.brand}</span>
                <span className="payout-tile-status">
                  <span className="dot" />{p.status}
                </span>
              </div>
              <div className="payout-tile-amount">{p.amount}</div>
            </div>
          </div>
        );
      })}

      {/* PHONE — far right edge, slightly off-canvas */}
      <div
        className={`payout-phone ${hoverIdx === 'phone' ? 'is-hover' : ''} ${hoverIdx !== null && hoverIdx !== 'phone' ? 'is-other' : ''}`}
        style={{
          transform: hoverIdx === 'phone'
            ? `translate3d(-80px, -40px, 0) rotate(0deg) scale(1.18)`
            : `translate3d(${parallax.x * -6}px, ${parallax.y * -4}px, 0) rotate(${-3 + parallax.x * 1.2}deg)`,
          zIndex: hoverIdx === 'phone' ? 60 : 40,
        }}
        onMouseEnter={() => setHoverIdx('phone')}>
        <div className="payout-phone-frame">
          <div className="payout-phone-notch" />
          <img src="assets/payouts/phone-shot.png" alt="Apex payout notification" className="payout-phone-img" />
          <div className="payout-phone-reflection" />
        </div>
        <div className="payout-phone-shadow" />
      </div>
    </div>
  );
};

const STORY_ITEMS = [
  {
    year: '2021',
    title: 'Start retail trading',
    desc: 'M-am apucat de trading pe crypto cu futures. Am dat peste un „mentor" fals — care nu făcea payout-uri, nu avea rezultate reale, doar marketing. Prima lecție dură: nu te lua după nimeni care nu poate dovedi ce predă.',
  },
  {
    year: '2022',
    title: 'Tranziție la NASDAQ futures',
    desc: 'Focus exclusiv pe NQ și MNQ. Studiere serioasă a liquidității, order flow și sesiuni. Primele setup-uri consistente.',
  },
  {
    year: '2023',
    title: 'Primul payout din prop firms',
    desc: 'Primul payout de $1.000 încasat dintr-un cont funded. Mic ca sumă, uriaș ca dovadă — confirmarea că strategia, risk management-ul și răbdarea funcționează.',
  },
  {
    year: '2024–2026',
    title: 'Payout-uri constante & comunitate',
    desc: 'Payout-uri constante pe strategia mea pe timeframe-uri de 5m / 1m / 15s. Media trade-urilor mele este de 30–45 de secunde. 500+ membri, $109K+ payout-uri verificate, live calls bi-săptămânale și Elite mentorship lansat.',
  },
];

const StoryTimeline = () => {
  const sectionRef = React.useRef(null);
  const cardsRef = React.useRef([]);

  React.useLayoutEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced || !window.gsap || !window.ScrollTrigger) return;

    const gsap = window.gsap;
    const ScrollTrigger = window.ScrollTrigger;
    gsap.registerPlugin(ScrollTrigger);

    const cards = cardsRef.current.filter(Boolean);
    if (cards.length === 0) return;
    const triggers = [];

    // 2 from left (i=0,1), 2 from right (i=2,3) — puzzle assembly
    cards.forEach((card, i) => {
      const fromLeft = i < 2;
      gsap.set(card, {
        x: fromLeft ? '-65vw' : '65vw',
        opacity: 0,
        scale: 0.92,
        filter: 'blur(8px)',
        willChange: 'transform, opacity, filter',
      });
    });

    cards.forEach((card, i) => {
      const tween = gsap.to(card, {
        x: 0,
        opacity: 1,
        scale: 1,
        filter: 'blur(0px)',
        ease: 'power3.out',
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top 80%',
          end: 'center 60%',
          scrub: 0.5 + i * 0.08,
        },
      });
      if (tween.scrollTrigger) triggers.push(tween.scrollTrigger);
    });

    // First snap: ALL cards lightning pulse simultaneously.
    // After that: only the LAST card pulses every 7s.
    let lastCardInterval = null;
    const fireAll = () => {
      cards.forEach((card, i) => {
        setTimeout(() => {
          card.classList.add('glow-pulse');
          setTimeout(() => card.classList.remove('glow-pulse'), 1800);
        }, i * 80);
      });
    };
    const fireLast = () => {
      const lastCard = cards[cards.length - 1];
      if (!lastCard) return;
      lastCard.classList.add('glow-pulse');
      setTimeout(() => lastCard.classList.remove('glow-pulse'), 1800);
    };
    const pulseST = ScrollTrigger.create({
      trigger: sectionRef.current,
      start: 'top 30%',
      once: true,
      onEnter: () => {
        fireAll();
        // start the last-card-only 7s loop after the first burst settles
        setTimeout(() => {
          fireLast();
          lastCardInterval = setInterval(fireLast, 7000);
        }, 2000);
      },
    });
    triggers.push(pulseST);

    return () => {
      if (lastCardInterval) clearInterval(lastCardInterval);
      triggers.forEach((t) => t && t.kill && t.kill());
      cards.forEach((card) => card && gsap.set(card, { clearProps: 'all' }));
    };
  }, []);

  return (
    <div ref={sectionRef} className="story-grid">
      {STORY_ITEMS.map((s, i) =>
        <div key={s.year}
          ref={(el) => { cardsRef.current[i] = el; }}
          className="story-card learn-card">
          <div className="story-year">{s.year}</div>
          <h4>{s.title}</h4>
          <p style={{ marginTop: 10, fontSize: 14 }}>{s.desc}</p>
        </div>
      )}
    </div>
  );
};

const VALUES = [
{ icon: 'eye', color: 'acid', title: 'Transparență',
  desc: 'Payout screenshots reale, trade-uri postate înainte și după execuție. Fără cherry-picking.' },
{ icon: 'shield', color: 'cyan', title: 'Disciplină',
  desc: 'Reguli clare de execuție, plan zilnic, sesiuni respectate. Fără chase, fără revenge.' },
{ icon: 'target', color: 'blue', title: 'Risk Management',
  desc: 'Sizing-ul corect și protecția capitalului sunt fundația. Restul vine după.' },
{ icon: 'brain', color: 'gold', title: 'Psihologie',
  desc: 'Mind-ul tău e capital. Tratează-l ca atare — rutină, journal, recovery.' },
{ icon: 'users', color: 'acid', title: 'Comunitate',
  desc: 'Înveți mai repede înconjurat de traderi serioși. Singur e mai greu — și mai lent.' }];


const AboutPage = ({ onNav, onApply, user }) =>
<>
    <section style={{ paddingTop: 60, paddingBottom: 20 }}>
      <div className="container">
        <div className="about-hero">
          <div className="about-hero-left">
            <div className="eyebrow"><span className="dot" />ABOUT · TYRONE</div>
            <h1 style={{ marginTop: 20 }}>
              Despre <span className="acid">Tyrone.</span>
            </h1>
            <p className="lead" style={{ marginTop: 22, maxWidth: 540 }}>
              Trader activ specializat pe NASDAQ futures, prop firms și dezvoltarea unei comunități românești transparente de trading.
            </p>
            <div className="about-stats about-stats-3 about-stats-glass">
              <div className="about-stats-glow" />
              <div className="about-stat-cell"><div className="num">4+</div><div className="lbl">ani trading</div></div>
              <div className="about-stat-cell"><div className="num">500+</div><div className="lbl">membri</div></div>
              <div className="about-stat-cell"><div className="num">$109K+</div><div className="lbl">payouts</div></div>
            </div>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="ghost"><Icon name="discord" size={16} />Join Discord</Button>
              <Button variant="acid" onClick={() => onNav('elite')}>Vezi Elite Plan</Button>
            </div>
          </div>
          <div className="about-hero-right">
            <PayoutDeck />
          </div>
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <SectionHeader
        eyebrow="STORY"
        title="De la retail trader la mentor." />
      
        <StoryTimeline />
      </div>
    </section>

    <section>
      <div className="container">
        <SectionHeader
        eyebrow="VALUES"
        title="Principii pe care nu le negociez."
        subtitle="Nu pentru că sună frumos pe site, ci pentru că fără ele contul nu rezistă." />
      
        <div className="grid grid-3">
          {VALUES.map((v, i) =>
        <Reveal key={v.title} delay={i * 60}>
              <div className="card" style={{ padding: 28 }}>
                <IconChip icon={v.icon} color={v.color} size="lg" />
                <h4 style={{ marginTop: 22, fontSize: 18 }}>{v.title}</h4>
                <p style={{ marginTop: 10, fontSize: 14, lineHeight: 1.6 }}>{v.desc}</p>
              </div>
            </Reveal>
        )}
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <SectionHeader
        eyebrow="PROOF"
        title="Receipts, nu povești."
        subtitle="Consider că dacă un trader are rezultate trebuie să le și arate, iar cei care nu le arată înseamnă că nu le au." />

        <div className="grid grid-3 proof-grid">
          {[
        { tag: 'APEX', color: 'acid', val: '$8,420.00', date: 'Mai 2026' },
        { tag: 'TRADEIFY', color: 'cyan', val: '$3,180.00', date: 'Apr 2026' },
        { tag: 'APEX', color: 'acid', val: '$5,640.00', date: 'Mar 2026' },
        { tag: 'TRADEIFY', color: 'cyan', val: '$2,950.00', date: 'Feb 2026' },
        { tag: 'APEX', color: 'acid', val: '$6,720.00', date: 'Ian 2026' },
        { tag: 'FUNDEDNEXT', color: 'blue', val: '$4,150.00', date: 'Dec 2025' }].
        map((p, i) =>
        <div key={i} className={`card payout-card payout-card-${p.color}`} style={{ '--reveal-delay': `${i * 80}ms` }}>
              <div className="payout-glow" />
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 1 }}>
                <span className={`tag ${p.color}`}>{p.tag}</span>
                <span style={{ fontSize: 11, color: 'var(--text-mute)', fontFamily: 'JetBrains Mono', letterSpacing: '0.08em' }}>{p.date}</span>
              </div>
              <div style={{ marginTop: 18, position: 'relative', zIndex: 1 }}>
                <div style={{ fontSize: 11, color: 'var(--text-mute)', letterSpacing: '0.14em', textTransform: 'uppercase' }}>Payout verificat</div>
                <div style={{ fontSize: 36, fontWeight: 800, letterSpacing: '-0.03em', marginTop: 6, color: `var(--${p.color})` }}>
                  +{p.val}
                </div>
              </div>
              <div className="payout-chart">
                <svg viewBox="0 0 200 40" preserveAspectRatio="none">
                  <polyline points="0,30 20,25 40,28 60,18 80,22 100,15 120,12 140,16 160,8 180,10 200,4"
              fill="none" stroke={`var(--${p.color})`} strokeWidth="1.5" opacity="0.8" />
                </svg>
              </div>
            </div>
        )}
        </div>
      </div>
    </section>

    <section>
      <div className="container">
        <div className="card card-pad-xl" style={{ textAlign: 'center' }}>
          <h2 style={{ maxWidth: 720, margin: '0 auto' }}>Hai în <span className="acid">comunitate.</span></h2>
          <p className="lead" style={{ marginTop: 18, maxWidth: 520, margin: '18px auto 0' }}>
            Începe gratuit în Discord. Dacă vrei mai mult, aplică pentru Elite.
          </p>
          <div style={{ marginTop: 32, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="ghost"><Icon name="discord" size={16} />Join Free Discord</Button>
            {!isEliteUser(user) && <Button variant="acid" onClick={onApply}>Apply for Elite</Button>}
          </div>
        </div>
      </div>
    </section>

    <style>{`
      .about-hero {
        display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center;
      }
      @media (max-width: 920px) { .about-hero { grid-template-columns: 1fr; gap: 48px; } }
      .about-stats {
        position: relative;
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
        margin-top: 36px;
        padding: 26px 28px;
        border-radius: 22px;
        overflow: hidden;
        isolation: isolate;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.015) 100%),
          rgba(10, 10, 12, 0.55);
        border: 1px solid rgba(255,255,255,0.10);
        backdrop-filter: blur(18px) saturate(140%);
        -webkit-backdrop-filter: blur(18px) saturate(140%);
        box-shadow:
          0 18px 50px rgba(0,0,0,0.55),
          0 1px 0 rgba(255,255,255,0.08) inset,
          0 -1px 0 rgba(0,0,0,0.35) inset;
      }
      .about-stats::before {
        content: '';
        position: absolute; inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        z-index: 2;
      }
      .about-stats-glow {
        position: absolute;
        inset: -2px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.22),
          0 0 40px rgba(255, 255, 255, 0.10),
          0 0 90px rgba(183, 255, 26, 0.12);
        animation: about-stats-pulse 10s ease-in-out infinite;
        animation-delay: 1.6s;
        z-index: 3;
      }
      @keyframes about-stats-pulse {
        0%, 88%, 100% { opacity: 0; }
        6%            { opacity: 1; }
        14%           { opacity: 0; }
      }
      .about-stats-3 { grid-template-columns: repeat(3, 1fr); }
      .about-stat-cell { position: relative; z-index: 1; }
      .about-stat-cell + .about-stat-cell::before {
        content: '';
        position: absolute;
        top: 8%; bottom: 8%; left: -10px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(255,255,255,0.10), transparent);
      }
      .about-stats .num {
        font-size: 34px;
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--acid);
        text-shadow: 0 0 30px rgba(183,255,26,0.25);
      }
      .about-stats .lbl {
        font-size: 11px;
        color: var(--text-mute);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        margin-top: 6px;
        font-family: 'JetBrains Mono', monospace;
      }
      @media (max-width: 540px) {
        .about-stats, .about-stats-3 { grid-template-columns: repeat(2, 1fr); }
        .about-stat-cell + .about-stat-cell::before { display: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .about-stats-glow { animation: none; opacity: 0; }
      }

      /* ============================================================
         PAYOUT DECK — layered 3D stack + phone (right side)
         ============================================================ */
      .payout-stage {
        position: relative;
        height: 540px;
        perspective: 1400px;
        transform-style: preserve-3d;
      }
      .payout-stage-glow {
        position: absolute;
        inset: 10% -8% 10% 4%;
        background:
          radial-gradient(ellipse at 30% 50%, rgba(183,255,26,0.18), transparent 60%),
          radial-gradient(ellipse at 80% 40%, rgba(79,231,213,0.14), transparent 60%);
        filter: blur(40px);
        pointer-events: none;
        z-index: 0;
        animation: stage-breathe 8s ease-in-out infinite;
      }
      @keyframes stage-breathe {
        0%, 100% { opacity: 0.8; transform: scale(1); }
        50%      { opacity: 1;   transform: scale(1.04); }
      }

      .payout-tile {
        position: absolute;
        top: 60px;
        left: 0;
        width: 320px;
        border-radius: 22px;
        overflow: hidden;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%),
          rgba(10, 10, 12, 0.85);
        border: 1px solid rgba(255,255,255,0.10);
        box-shadow:
          0 28px 70px rgba(0,0,0,0.65),
          0 0 0 1px rgba(255,255,255,0.03) inset,
          0 1px 0 rgba(255,255,255,0.12) inset;
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        transition:
          transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.4s ease,
          filter 0.4s ease,
          box-shadow 0.4s ease;
        cursor: pointer;
        will-change: transform;
        animation: tile-float 8s ease-in-out infinite;
      }
      .payout-tile:nth-child(2) { animation-delay: -1.2s; }
      .payout-tile:nth-child(3) { animation-delay: -2.4s; }
      .payout-tile:nth-child(4) { animation-delay: -3.6s; }
      .payout-tile:nth-child(5) { animation-delay: -4.8s; }
      @keyframes tile-float {
        0%, 100% { translate: 0 0; }
        50%      { translate: 0 -6px; }
      }
      .payout-tile.is-other {
        opacity: 0.35;
        filter: blur(2px) saturate(0.7);
      }
      .payout-tile.is-hover {
        animation-play-state: paused;
        box-shadow:
          0 50px 120px rgba(0,0,0,0.8),
          0 0 0 1px rgba(255,255,255,0.18) inset,
          0 0 70px var(--tile-glow, rgba(183,255,26,0.30));
      }

      .payout-tile-amber { --tile-glow: rgba(245,158,11,0.36); }
      .payout-tile-cyan  { --tile-glow: rgba(79,231,213,0.36); }
      .payout-tile-acid  { --tile-glow: rgba(183,255,26,0.36); }
      .payout-tile-blue  { --tile-glow: rgba(90,200,255,0.36); }

      .payout-tile-img-wrap {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 10;
        overflow: hidden;
        background: #050505;
        transition: aspect-ratio 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      }
      /* On hover the image area drops the fixed aspect ratio and the
         <img> renders at its natural ratio — fills the card with no margins,
         regardless of source dimensions (Apex 4:3, Tradeify ~16:9). */
      .payout-tile.is-hover .payout-tile-img-wrap {
        aspect-ratio: auto;
      }
      .payout-tile-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 22%;
        display: block;
        image-rendering: -webkit-optimize-contrast;
        transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), object-position 0.6s ease;
      }
      .payout-tile.is-hover .payout-tile-img {
        object-fit: contain;
        object-position: center;
        height: auto;
        width: 100%;
        background: #050505;
        transform: scale(1);
      }
      .payout-tile-shade {
        position: absolute; inset: 0;
        background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55) 100%);
        pointer-events: none;
      }

      .payout-tile-meta {
        padding: 14px 16px 16px;
        position: relative;
      }
      .payout-tile-meta::before {
        content: '';
        position: absolute;
        top: 0; left: 16px; right: 16px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
      }
      .payout-tile-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .payout-tile-amount {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 800;
        letter-spacing: -0.02em;
        color: var(--text);
      }
      .payout-tile-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--acid);
        text-transform: uppercase;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
        letter-spacing: 0.06em;
      }
      .payout-tile-status .dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: var(--acid);
        box-shadow: 0 0 8px var(--acid-glow);
        animation: pulse-dot 2s infinite;
      }

      /* PHONE */
      .payout-phone {
        position: absolute;
        right: -110px;
        top: 60px;
        width: 280px;
        z-index: 40;
        transition:
          transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
          opacity 0.4s ease,
          filter 0.4s ease,
          box-shadow 0.4s ease;
        will-change: transform;
        animation: phone-float 9s ease-in-out infinite;
        cursor: pointer;
      }
      @keyframes phone-float {
        0%, 100% { translate: 0 0; }
        50%      { translate: 0 -10px; }
      }
      .payout-phone.is-other {
        opacity: 0.35;
        filter: blur(2px) saturate(0.7);
      }
      .payout-phone.is-hover {
        animation-play-state: paused;
      }
      .payout-phone.is-hover .payout-phone-frame {
        box-shadow:
          0 60px 140px rgba(0,0,0,0.85),
          0 0 0 4px #050507,
          0 0 0 5px rgba(255,255,255,0.10),
          0 0 80px rgba(183,255,26,0.30),
          0 0 120px rgba(79,231,213,0.18);
      }
      .payout-phone-frame {
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 19;
        border-radius: 44px;
        overflow: hidden;
        background: #0a0a0d;
        border: 1.5px solid rgba(255,255,255,0.10);
        box-shadow:
          0 50px 100px rgba(0,0,0,0.8),
          0 0 0 4px #050507,
          0 0 0 5px rgba(255,255,255,0.06),
          0 0 60px rgba(183,255,26,0.10);
        padding: 7px;
        transition: box-shadow 0.4s ease;
      }
      .payout-phone-notch {
        position: absolute;
        top: 14px; left: 50%;
        transform: translateX(-50%);
        width: 90px; height: 22px;
        background: #050507;
        border-radius: 14px;
        z-index: 2;
        border: 1px solid rgba(255,255,255,0.05);
      }
      .payout-phone-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        border-radius: 36px;
        image-rendering: -webkit-optimize-contrast;
      }
      .payout-phone-reflection {
        position: absolute; inset: 7px;
        border-radius: 36px;
        pointer-events: none;
        background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 75%, rgba(255,255,255,0.05) 100%);
        mix-blend-mode: screen;
      }
      .payout-phone-shadow {
        position: absolute;
        bottom: -40px; left: 8%; right: 8%;
        height: 40px;
        background: radial-gradient(ellipse at center, rgba(0,0,0,0.75), transparent 70%);
        filter: blur(18px);
        pointer-events: none;
        z-index: -1;
      }

      /* Responsive: tablet */
      @media (max-width: 1100px) {
        .payout-stage { height: 500px; }
        .payout-tile { width: 280px; }
        .payout-phone { width: 220px; right: -60px; }
      }
      /* Responsive: mobile — stacked, no negative offset */
      @media (max-width: 920px) {
        .payout-stage { height: auto; min-height: 460px; padding-bottom: 40px; }
        .payout-tile { position: relative; top: auto; left: auto; width: 100%; max-width: 360px; margin: 0 auto 14px; transform: none !important; animation: none; }
        .payout-tile.is-hover { transform: scale(1.02) !important; }
        .payout-phone { position: relative; right: auto; top: auto; margin: 20px auto 0; }
        .payout-stage-glow { display: none; }
      }
      @media (prefers-reduced-motion: reduce) {
        .payout-tile, .payout-phone, .payout-stage-glow { animation: none !important; }
      }

      .story-grid {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
        perspective: 1200px;
      }
      @media (max-width: 920px) { .story-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 540px) { .story-grid { grid-template-columns: 1fr; } }

      .story-card {
        position: relative;
        padding: 26px 24px 28px;
        border-radius: 22px;
        overflow: hidden;
        isolation: isolate;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.012) 100%),
          rgba(10, 10, 12, 0.55);
        border: 1px solid rgba(255,255,255,0.10);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        box-shadow:
          0 18px 50px rgba(0,0,0,0.50),
          0 1px 0 rgba(255,255,255,0.08) inset,
          0 -1px 0 rgba(0,0,0,0.35) inset;
        will-change: transform;
        cursor: default;
        transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s, box-shadow 0.35s;
      }
      .story-card::before {
        content: '';
        position: absolute; inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0) 60%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
        z-index: 2;
      }
      .story-card:hover {
        transform: translateY(-4px);
        border-color: rgba(255,255,255,0.18);
        box-shadow:
          0 28px 60px rgba(0,0,0,0.6),
          0 1px 0 rgba(255,255,255,0.12) inset,
          0 0 50px rgba(183,255,26,0.10);
      }
      .story-year {
        display: inline-block;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px; letter-spacing: 0.18em;
        color: var(--acid);
        text-transform: uppercase;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(183,255,26,0.08);
        border: 1px solid rgba(183,255,26,0.18);
        margin-bottom: 18px;
        position: relative;
        z-index: 1;
      }
      .story-card h4 {
        position: relative; z-index: 1;
        font-size: 17px;
        line-height: 1.25;
        letter-spacing: -0.01em;
      }
      .story-card p {
        position: relative; z-index: 1;
        color: var(--text-dim);
        line-height: 1.6;
      }

      /* ===== Lightning pulse on story cards =====
         overflow: hidden clips any outer glow, so the flash runs as an
         intense inset layered effect (border + radial + acid wash). */
      .story-card.glow-pulse {
        animation: story-flash-border 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      .story-card.glow-pulse::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        z-index: 5;
        background:
          radial-gradient(ellipse at top center, rgba(220, 255, 130, 0.35) 0%, transparent 65%),
          linear-gradient(180deg, rgba(183, 255, 26, 0.14), transparent 55%);
        box-shadow:
          inset 0 0 0 1.5px rgba(183, 255, 26, 0.85),
          inset 0 0 14px rgba(220, 255, 130, 0.55),
          inset 0 0 36px rgba(183, 255, 26, 0.40),
          inset 0 0 80px rgba(183, 255, 26, 0.22);
        opacity: 0;
        animation: story-flash 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
        mix-blend-mode: screen;
      }
      /* secondary "outer rim" sheen — overrides the masked top-gradient border */
      .story-card.glow-pulse::before {
        background:
          linear-gradient(180deg, rgba(220, 255, 130, 0.75) 0%, rgba(183, 255, 26, 0.55) 40%, rgba(79, 231, 213, 0.30) 75%, rgba(183, 255, 26, 0) 100%);
        animation: story-rim-flash 1800ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
      }
      @keyframes story-flash {
        0%   { opacity: 0; }
        14%  { opacity: 1; }
        50%  { opacity: 0.85; }
        100% { opacity: 0; }
      }
      @keyframes story-flash-border {
        0%, 100% { border-color: rgba(255,255,255,0.10); transform: translateY(0) scale(1); box-shadow: 0 18px 50px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.35) inset; }
        14%      { border-color: rgba(183, 255, 26, 0.85); transform: translateY(-1px) scale(1.005);
                   box-shadow: 0 18px 55px rgba(0,0,0,0.52), 0 0 24px rgba(183,255,26,0.32), 0 0 50px rgba(183,255,26,0.18), 0 1px 0 rgba(255,255,255,0.12) inset; }
        50%      { border-color: rgba(183, 255, 26, 0.55); transform: translateY(0) scale(1.002);
                   box-shadow: 0 18px 52px rgba(0,0,0,0.5), 0 0 18px rgba(183,255,26,0.20), 0 0 36px rgba(183,255,26,0.10), 0 1px 0 rgba(255,255,255,0.10) inset; }
      }
      @keyframes story-rim-flash {
        0%, 100% { opacity: 1; filter: none; }
        14%      { opacity: 1; filter: drop-shadow(0 0 8px rgba(220,255,130,0.7)) drop-shadow(0 0 16px rgba(183,255,26,0.5)); }
        50%      { opacity: 1; filter: drop-shadow(0 0 5px rgba(183,255,26,0.45)); }
      }

      @media (prefers-reduced-motion: reduce) {
        .story-card.glow-pulse,
        .story-card.glow-pulse::after,
        .story-card.glow-pulse::before { animation: none; }
      }

      .proof-grid { perspective: 1200px; }
      .payout-card {
        position: relative;
        padding: 24px;
        overflow: hidden;
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%),
          var(--bg-1, #0a0a0c);
        border: 1px solid var(--line);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s, box-shadow 0.4s;
        opacity: 0;
        transform: translateY(36px) scale(0.96);
        animation: payout-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        animation-delay: var(--reveal-delay, 0ms);
        will-change: transform, opacity;
      }
      @keyframes payout-reveal {
        to { opacity: 1; transform: translateY(0) scale(1); }
      }
      .payout-card::before {
        content: '';
        position: absolute; inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0) 60%);
        -webkit-mask:
          linear-gradient(#000 0 0) content-box,
          linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask-composite: exclude;
        pointer-events: none;
      }
      .payout-glow {
        position: absolute; inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0.5;
        background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--pg-color, rgba(183,255,26,0.18)), transparent 70%);
        animation: payout-pulse 4s ease-in-out infinite;
      }
      @keyframes payout-pulse {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 0.7; }
      }
      .payout-card-acid { --pg-color: rgba(183,255,26,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(183,255,26,0.10); }
      .payout-card-cyan { --pg-color: rgba(79,231,213,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(79,231,213,0.10); }
      .payout-card-blue { --pg-color: rgba(90,200,255,0.22); box-shadow: 0 14px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(90,200,255,0.10); }
      .payout-card:hover {
        transform: translateY(-6px) scale(1.015);
        border-color: var(--line-2);
        box-shadow: 0 28px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.08), 0 0 50px var(--pg-color, rgba(183,255,26,0.20));
      }
      .payout-card:hover .payout-glow { opacity: 1; animation-play-state: paused; }
      .payout-chart { margin-top: 18px; height: 40px; position: relative; z-index: 1; }
      .payout-chart svg { width: 100%; height: 100%; }
      @media (prefers-reduced-motion: reduce) {
        .payout-card { animation: none; opacity: 1; transform: none; }
        .payout-glow, .portrait-glow, .portrait-rings .ring, .portrait-logo, .portrait-scan { animation: none; }
      }
    `}</style>
  </>;


Object.assign(window, { AboutPage });