/* HERO - "The Door" */

function Hero() {
  const ctaRef = useRef(null);
  const handRef = useRef(null);

  // Magnetic CTA + reaching hand silhouette response
  useEffect(() => {
    const onMove = (e) => {
      if (handRef.current) {
        const cx = innerWidth / 2;
        const cy = innerHeight / 2;
        const dx = (e.clientX - cx) / cx;
        const dy = (e.clientY - cy) / cy;
        handRef.current.style.transform = `translate(${dx * 30}px, ${dy * 20}px) rotate(${dx * 4}deg)`;
      }
    };
    addEventListener("mousemove", onMove);
    return () => removeEventListener("mousemove", onMove);
  }, []);

  return (
    <section id="top" className="hero">
      {/* Atmosphere */}
      <div
        className="light-pool green drift-a"
        style={{ width: 520, height: 520, left: "-10%", top: "15%" }}
      />
      <div
        className="light-pool purple drift-b"
        style={{ width: 620, height: 620, right: "-10%", top: "40%" }}
      />
      <div
        className="light-pool yellow drift-a"
        style={{
          width: 240,
          height: 240,
          left: "40%",
          top: "70%",
          opacity: 0.35,
        }}
      />

      {/* Faint mesh */}
      <div className="hero-mesh" />

      {/* Anime silhouette w/ glowing eyes */}
      <div className="hero-silhouette" ref={handRef}>
        <svg
          viewBox="0 0 600 700"
          width="100%"
          height="100%"
          preserveAspectRatio="xMidYMid meet"
        >
          <defs>
            <radialGradient id="silglow" cx="50%" cy="30%" r="60%">
              <stop offset="0%" stopColor="rgba(139,92,246,.55)" />
              <stop offset="40%" stopColor="rgba(22,224,122,.15)" />
              <stop offset="100%" stopColor="rgba(0,0,0,0)" />
            </radialGradient>
            <linearGradient id="silbody" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#0d0a1a" />
              <stop offset="100%" stopColor="#050208" />
            </linearGradient>
          </defs>
          <ellipse cx="300" cy="250" rx="280" ry="200" fill="url(#silglow)" />
          {/* hooded silhouette */}
          <path
            d="M300 80
                   C 220 80, 170 130, 165 210
                   L 165 280
                   C 130 290, 100 320, 95 380
                   L 95 600
                   C 95 660, 130 700, 200 700
                   L 400 700
                   C 470 700, 505 660, 505 600
                   L 505 380
                   C 500 320, 470 290, 435 280
                   L 435 210
                   C 430 130, 380 80, 300 80 Z"
            fill="url(#silbody)"
            stroke="rgba(139,92,246,.2)"
            strokeWidth="1"
          />
          {/* face shadow */}
          <ellipse
            cx="300"
            cy="220"
            rx="90"
            ry="110"
            fill="#000"
            opacity=".85"
          />
          {/* glowing eyes */}
          <g filter="url(#blur1)">
            <ellipse
              cx="270"
              cy="220"
              rx="22"
              ry="12"
              fill="#FFD60A"
              opacity=".95"
            >
              <animate
                attributeName="ry"
                values="12;7;12"
                dur="3.2s"
                repeatCount="indefinite"
              />
            </ellipse>
            <ellipse
              cx="330"
              cy="220"
              rx="22"
              ry="12"
              fill="#FFD60A"
              opacity=".95"
            >
              <animate
                attributeName="ry"
                values="12;7;12"
                dur="3.2s"
                repeatCount="indefinite"
                begin=".18s"
              />
            </ellipse>
          </g>
          <filter id="blur1">
            <feGaussianBlur stdDeviation="3" />
          </filter>
          <ellipse cx="270" cy="220" rx="8" ry="4" fill="#FFF2C8" />
          <ellipse cx="330" cy="220" rx="8" ry="4" fill="#FFF2C8" />
        </svg>
      </div>

      {/* Speed lines */}
      <svg
        className="hero-lines"
        viewBox="0 0 1600 900"
        preserveAspectRatio="none"
      >
        {Array.from({ length: 14 }).map((_, i) => (
          <line
            key={i}
            x1={Math.random() * 1600}
            y1={Math.random() * 900}
            x2={Math.random() * 1600 + 200}
            y2={Math.random() * 900 + 100}
            strokeWidth="1"
            className="hero-speedline"
          />
        ))}
      </svg>

      <div className="hero-inner container">
        <Reveal className="hero-eyebrow">
          <span className="dot pulse"></span>
          <span className="eyebrow">LAGOS · WEB3 · CREATOR GANG</span>
          <span className="stamp">est. yktv</span>
        </Reveal>

        <h1 className="hero-title">
          <span className="hero-line line-1 reveal in">
            <span className="h-display">WINNERS</span>
            <span className="amp">&amp;</span>
          </span>
          <span className="hero-line line-2 reveal delay-1 in">
            <span className="h-display italic gradient-text">MOTIONOOR</span>
          </span>
        </h1>

        <Reveal delay={2} className="hero-sub">
          <p>
            A tight, ride-or-die circle of African Web3 creators -
            <strong> when one of us eats, all of us eat.</strong>
            We're maxing AI, Web3 and NFTs together. Delusional. Confident asf.
            In motion.
          </p>
        </Reveal>

        <Reveal delay={3} className="hero-ctas">
          <Magnetic strength={0.35}>
            <a href="#join" className="btn btn-spark hot" ref={ctaRef}>
              <span className="reach-hand">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M3 12c0-1.1.9-2 2-2s2 .9 2 2v-4c0-1.1.9-2 2-2s2 .9 2 2v-2c0-1.1.9-2 2-2s2 .9 2 2v3c0-1.1.9-2 2-2s2 .9 2 2v6c0 4-3 8-8 8s-8-3-8-7v-4z"
                    fill="#0a0711"
                  />
                </svg>
              </span>
              Join the GNG
              <Arrow />
            </a>
          </Magnetic>
          <a href="#wins" className="btn btn-ghost hot">
            See the wins <Arrow />
          </a>
        </Reveal>

        <Reveal delay={4} className="hero-stats">
          <div className="hstat">
            <div className="hstat-n">
              <CountUp to={427} />
            </div>
            <div className="hstat-l">members in motion</div>
          </div>
          <span className="div"></span>
          <div className="hstat">
            <div className="hstat-n">
              $<CountUp to={184320} />
            </div>
            <div className="hstat-l">paid out to the gang</div>
          </div>
          <span className="div"></span>
          <div className="hstat">
            <div className="hstat-n">
              <CountUp to={1290} />+
            </div>
            <div className="hstat-l">wins logged</div>
          </div>
        </Reveal>

        <div className="hero-scroll-cue">
          <span>motion this way</span>
          <span className="line"></span>
        </div>
      </div>

      <style>{`
        .hero {
          min-height: 100vh;
          padding: 140px 0 80px;
          display: flex;
          align-items: center;
          position: relative;
          overflow: hidden;
        }
        .hero-mesh {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(var(--ln-04) 1px, transparent 1px),
            linear-gradient(90deg, var(--ln-04) 1px, transparent 1px);
          background-size: 80px 80px;
          mask-image: radial-gradient(60% 50% at 50% 50%, #000 30%, transparent 80%);
          opacity: .5;
          pointer-events: none;
        }
        .hero-lines {
          position: absolute; inset: 0; width: 100%; height: 100%;
          pointer-events: none;
          opacity: .8;
        }
        .hero-speedline { stroke: var(--ln-06); }
        .hero-silhouette {
          position: absolute;
          right: 4%;
          bottom: -10%;
          width: 540px;
          height: 700px;
          pointer-events: none;
          opacity: .92;
          z-index: 1;
          transition: transform 1.2s var(--ease-out);
          mix-blend-mode: normal;
        }
        [data-theme="dark"] .hero-silhouette { mix-blend-mode: screen; }
        @media (max-width: 1100px) {
          .hero-silhouette { right: -10%; bottom: -20%; width: 440px; height: 560px; opacity: .35; }
        }

        .hero-inner {
          position: relative;
          z-index: 5;
          display: flex;
          flex-direction: column;
          gap: 32px;
          max-width: 1400px;
        }

        .hero-eyebrow {
          display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
        }
        .hero-eyebrow .dot {
          width: 10px; height: 10px; border-radius: 50%;
          background: var(--green);
          box-shadow: 0 0 18px var(--green);
        }
        .hero-eyebrow .dot.pulse {
          animation: heroDot 1.6s ease-in-out infinite;
        }
        @keyframes heroDot {
          0%,100% { opacity: 1; transform: scale(1); }
          50% { opacity: .55; transform: scale(.85); }
        }

        .hero-title {
          font-size: clamp(72px, 14vw, 220px);
          line-height: .82;
          margin: 0;
          font-weight: 900;
        }
        .hero-line { display: block; }
        .hero-line.line-1 .h-display { display: inline-block; }
        .hero-line.line-2 { padding-left: clamp(40px, 8vw, 140px); }
        .hero-title .amp {
          font-family: var(--font-display);
          font-style: italic;
          font-weight: 400;
          font-size: .5em;
          color: #B8780A;
          margin-left: .15em;
          vertical-align: 0.18em;
          text-shadow: 0 0 24px rgba(184,120,10,.25);
        }
        [data-theme="dark"] .hero-title .amp {
          color: var(--yellow);
          text-shadow: 0 0 30px rgba(255,199,0,.55);
        }

        .hero-sub {
          max-width: 620px;
          font-size: clamp(15px, 1.15vw, 18px);
          color: var(--muted);
          line-height: 1.6;
        }
        .hero-sub strong {
          color: var(--text);
          font-weight: 700;
          background: linear-gradient(120deg, rgba(22,224,122,.18), rgba(139,92,246,.18));
          padding: 1px 6px;
          border-radius: 4px;
        }

        .hero-ctas {
          display: flex; gap: 16px; flex-wrap: wrap;
          margin-top: 8px;
        }
        .reach-hand {
          width: 20px; height: 20px;
          display: inline-flex; align-items: center; justify-content: center;
        }

        .hero-stats {
          display: flex; align-items: center; gap: 28px;
          margin-top: 24px;
          flex-wrap: wrap;
        }
        .hstat-n {
          font-family: var(--font-display);
          font-weight: 700;
          font-size: clamp(22px, 2.4vw, 32px);
          color: var(--text);
          letter-spacing: -.02em;
          font-variant-numeric: tabular-nums;
        }
        .hstat-l {
          font-size: 11px;
          letter-spacing: .14em;
          text-transform: uppercase;
          color: var(--muted);
          margin-top: 2px;
        }
        .div {
          width: 1px; height: 36px;
          background: linear-gradient(180deg, transparent, var(--ln-2), transparent);
        }

        .hero-scroll-cue {
          position: absolute;
          bottom: 30px;
          right: 32px;
          display: flex; align-items: center; gap: 14px;
          color: var(--muted);
          font-size: 11px;
          letter-spacing: .28em;
          text-transform: uppercase;
        }
        .hero-scroll-cue .line {
          display: block; width: 80px; height: 1px;
          background: linear-gradient(90deg, var(--muted), transparent);
          position: relative; overflow: hidden;
        }
        .hero-scroll-cue .line::after {
          content: ""; position: absolute; inset: 0;
          background: linear-gradient(90deg, transparent, var(--green), transparent);
          animation: cueLine 2.4s ease-in-out infinite;
        }
        @keyframes cueLine {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(100%); }
        }
        @media (max-width: 720px) {
          .hero-scroll-cue { display: none; }
          .hero-stats { gap: 20px; }
          .hero-line.line-2 { padding-left: 24px; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;
