/* LORE - scroll-drawn timeline */

function Lore() {
  const railRef = useRef(null);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const onScroll = () => {
      const el = railRef.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      // progress: 0 when section just enters, 1 when its bottom hits center
      const start = r.top - innerHeight * 0.7;
      const end = r.bottom - innerHeight * 0.5;
      const p = Math.min(1, Math.max(0, -start / (end - start + 1)));
      setProgress(p);
    };
    onScroll();
    addEventListener('scroll', onScroll, { passive: true });
    return () => removeEventListener('scroll', onScroll);
  }, []);

  const beats = [
    {
      year: 'Origin',
      title: 'Dad opens the door',
      body: "Founder @0xileri opened the group chat. The gang showed up. The first ‘motionorr’ got typed late at night - and nobody logged off.",
      tag: 'origin',
      color: 'green',
    },
    {
      year: 'Early',
      title: 'The volunteer era',
      body: "Started as a small crew of about 7–8, growing with volunteer roles - each one bringing a skill, a wallet, an obsession. The chat became a workshop.",
      tag: 'family',
      color: 'purple',
    },
    {
      year: 'Collab',
      title: 'We all eat',
      body: "@0xileri dropped 2 GTD whitelist spots to the gang through a collab. Not for one - for the circle. That's the whole thesis in one move.",
      tag: 'we eating',
      color: 'green',
    },
    {
      year: 'Now',
      title: '300 strong + an 8×',
      body: "Crossed 300 in the gang, and an inner-circle call ran $7 → $78 ATH. Delusional. Confident asf. Maxing AI + Web3 + NFTs, together.",
      tag: 'motionorr',
      color: 'yellow',
    },
    {
      year: 'Next',
      title: 'The HQ is open',
      body: "This site is the door. Walk through. You're already gang - we just haven't met yet.",
      tag: 'open hand',
      color: 'purple',
    },
  ];

  return (
    <section className="lore section-pad" id="lore">
      <div className="light-pool purple" style={{ width: 600, height: 600, left: '-15%', top: '20%', opacity: .4 }}/>

      <div className="container">
        <Reveal className="lore-head">
          <span className="eyebrow">- the gng · our story</span>
          <h2 className="h-display lore-title">
            We pull each<br/>
            <span className="gradient-text italic">other up.</span>
          </h2>
          <p className="lore-lede">
            Not a DAO. Not a discord. A <strong>family</strong> of African Web3 creators
            who decided early that nobody eats alone. This is how we got here.
          </p>
        </Reveal>

        <div className="lore-rail" ref={railRef}>
          <div className="lore-track">
            <div className="lore-fill" style={{ height: `${progress * 100}%` }}/>
          </div>

          {beats.map((b, i) => (
            <Reveal key={i} delay={i % 4} className={`lore-beat ${i % 2 === 0 ? 'left' : 'right'}`}>
              <div className="beat-node">
                <span className="beat-dot"></span>
              </div>
              <div className="beat-card card">
                <div className="beat-meta">
                  <span className="beat-year">{b.year}</span>
                  <span className={`stamp ${b.color}`}>{b.tag}</span>
                </div>
                <h3 className="beat-title">{b.title}</h3>
                <p className="beat-body">{b.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .lore { position: relative; }
        .lore-head {
          display: flex; flex-direction: column; gap: 18px;
          max-width: 720px; margin: 0 auto 80px;
          text-align: center; align-items: center;
        }
        .lore-title {
          font-size: clamp(48px, 8vw, 120px);
          line-height: .9;
        }
        .lore-lede {
          color: var(--muted);
          font-size: clamp(15px, 1.2vw, 18px);
          max-width: 540px;
        }
        .lore-lede strong { color: var(--text); }

        .lore-rail {
          position: relative;
          max-width: 1000px;
          margin: 0 auto;
          padding: 40px 0;
        }
        .lore-track {
          position: absolute;
          left: 50%; transform: translateX(-50%);
          top: 0; bottom: 0;
          width: 2px;
          background: var(--ln-05);
          border-radius: 999px;
        }
        .lore-fill {
          position: absolute; top: 0; left: 0; right: 0;
          background: var(--grad);
          box-shadow: 0 0 24px rgba(139,92,246,.5);
          transition: height .1s linear;
          border-radius: 999px;
        }

        .lore-beat {
          display: grid;
          grid-template-columns: 1fr 60px 1fr;
          align-items: center;
          margin: 36px 0;
          gap: 0;
        }
        .lore-beat.left .beat-card { grid-column: 1; text-align: right; }
        .lore-beat.right .beat-card { grid-column: 3; }
        .beat-node {
          grid-column: 2;
          display: flex; justify-content: center;
        }
        .beat-dot {
          width: 18px; height: 18px;
          border-radius: 50%;
          background: var(--stage);
          border: 2px solid var(--green);
          box-shadow: 0 0 0 4px rgba(22,224,122,.1), 0 0 24px var(--green);
          position: relative;
        }
        .beat-dot::after {
          content: ""; position: absolute; inset: 4px;
          border-radius: 50%;
          background: var(--green);
        }

        .beat-card {
          padding: 24px 26px;
        }
        .beat-meta {
          display: flex; gap: 12px; align-items: center;
          margin-bottom: 12px;
          justify-content: flex-end;
        }
        .lore-beat.right .beat-meta { justify-content: flex-start; }
        .beat-year {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 12px;
          letter-spacing: .2em;
          color: var(--muted);
          text-transform: uppercase;
        }
        .beat-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(22px, 2.2vw, 28px);
          color: var(--text);
          letter-spacing: -.01em;
          margin-bottom: 10px;
        }
        .beat-body {
          color: var(--muted);
          font-size: 15px;
          line-height: 1.55;
        }

        @media (max-width: 800px) {
          .lore-rail { padding-left: 40px; max-width: 100%; }
          .lore-track { left: 18px; transform: none; }
          .lore-beat {
            grid-template-columns: 60px 1fr;
          }
          .lore-beat .beat-node { grid-column: 1; justify-content: flex-start; }
          .lore-beat .beat-card,
          .lore-beat.left .beat-card,
          .lore-beat.right .beat-card { grid-column: 2; text-align: left; }
          .lore-beat .beat-meta,
          .lore-beat.left .beat-meta { justify-content: flex-start; }
        }
      `}</style>
    </section>
  );
}

window.Lore = Lore;