"use client";

import { useRef } from "react";
import { motion } from "framer-motion";
import {
  Section,
  Pill,
  Card,
  Chip,
  Heading,
  Reveal,
  Magnetic,
  Parallax,
} from "./ui";
import { C } from "./palette";
import {
  gsap,
  ScrollTrigger,
  useGSAP,
  syncLenisScrollTrigger,
  usePointerParallax,
  MaskWords,
} from "./gsapkit";
import { Ico, withIcons } from "./Ico";

/* 01 — INTRO / HERO
   GSAP: masked line-reveal on load · scroll-scrubbed depth parallax on the
   ambient layers · pointer parallax on the floating reward cluster. */
export function Intro() {
  const clusterRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    /* ── load timeline ─────────────────────────────────────── */
    if (reduce) {
      gsap.set("#intro .hero-line-in, #intro .hero-fade, #intro .hero-object", { opacity: 1, y: 0, yPercent: 0, scale: 1 });
    } else {
      const tl = gsap.timeline({ defaults: { ease: "power4.out" } });
      tl.from("#intro .hero-pill", { y: 18, opacity: 0, duration: 0.6 })
        .from("#intro .hero-eyebrow p", { y: 14, opacity: 0, stagger: 0.08, duration: 0.6 }, "-=0.3")
        .from("#intro .hero-line-in", { yPercent: 118, rotationX: -55, opacity: 0, stagger: 0.12, duration: 1.0, transformOrigin: "0% 100%" }, "-=0.2")
        .from("#intro .hero-underline", { scaleX: 0, transformOrigin: "0% 50%", duration: 0.5, ease: "power2.out" }, "-=0.35")
        .from("#intro .hero-chip", { y: 14, opacity: 0, duration: 0.55 }, "-=0.35")
        .from("#intro .hero-cta", { y: 14, opacity: 0, stagger: 0.08, duration: 0.5 }, "-=0.3")
        .from("#intro .hero-strip", { y: 14, opacity: 0, duration: 0.5 }, "-=0.3")
        .from("#intro .hero-object", { scale: 0, opacity: 0, rotation: "+=18", transformOrigin: "50% 50%", stagger: 0.1, ease: "back.out(1.7)", duration: 0.7 }, "-=0.95");

      /* ── scroll-scrubbed parallax as the hero leaves ───────── */
      const st = { trigger: "#intro", start: "top top", end: "bottom top", scrub: 0.6 } as const;
      gsap.to("#intro .hero-watermark", { yPercent: -22, ease: "none", scrollTrigger: st });
      gsap.to("#intro .hero-glow", { yPercent: (i) => -14 - i * 8, ease: "none", scrollTrigger: st });
      gsap.to("#intro .hero-copy", { yPercent: -8, opacity: 0.35, ease: "none", scrollTrigger: st });
      gsap.utils.toArray<HTMLElement>("#intro .hero-object").forEach((el) => {
        gsap.to(el, { yPercent: -30 * parseFloat(el.dataset.speed || "1"), ease: "none", scrollTrigger: st });
      });
    }
  }, []);

  usePointerParallax(clusterRef, ".hero-object");

  return (
    <Section id="intro" variant="deep" size="epic" width="wide" align="start">
      {/* animated ambient glows — soft washes, heavily blurred so no hard edge shows */}
      <span aria-hidden className="hero-glow animate-pulse-glow pointer-events-none absolute -left-40 -top-16 -z-0 h-[30rem] w-[30rem] rounded-full bg-[#FF2E88]/15 blur-[150px]" />
      <span aria-hidden className="hero-glow animate-float pointer-events-none absolute -bottom-16 left-1/4 -z-0 h-[28rem] w-[28rem] rounded-full bg-[#8B3DFF]/20 blur-[150px]" />
      <span aria-hidden className="hero-glow animate-float pointer-events-none absolute -right-16 top-1/3 -z-0 h-[26rem] w-[26rem] rounded-full bg-[#C8FF37]/10 blur-[140px]" style={{ animationDelay: "1.5s" }} />

      {/* giant watermark — drifts against the scroll for depth */}
      <div
        aria-hidden
        className="hero-watermark pointer-events-none absolute left-1/2 top-[58%] -z-0 -translate-x-1/2 -translate-y-1/2 select-none"
      >
        <span className="font-sora text-[30vw] font-extrabold leading-none text-white/[0.05]">
          LYTS
        </span>
      </div>

      {/* dotted grid — top right accent */}
      <div
        aria-hidden
        className="pointer-events-none absolute right-10 top-10 hidden -z-0 h-24 w-40 opacity-60 lg:block"
        style={{
          backgroundImage: "radial-gradient(#C8FF37 1.6px, transparent 1.6px)",
          backgroundSize: "18px 18px",
        }}
      />

      <div className="relative z-10 grid items-center gap-14 pt-20 sm:pt-24 lg:grid-cols-[1.05fr_0.95fr] lg:pt-12">
        {/* ── LEFT: message column ─────────────────────────────── */}
        <div className="hero-copy">
          {/* status pill */}
          <span className="hero-pill nb-sm inline-flex items-center gap-2 rounded-full bg-[#C8FF37] px-4 py-2 font-sora text-xs font-extrabold uppercase tracking-wider text-[#0a0a0a]">
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-[#FF2E88] opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-[#FF2E88]" />
            </span>
            now in early access
          </span>

          {/* eyebrow copy */}
          <div
            className="hero-eyebrow mt-6 space-y-1 bg-clip-text font-bold text-transparent sm:text-lg"
            style={{ backgroundImage: "linear-gradient(180deg, #FF4D9E 0%, #FF7A59 100%)" }}
          >
            <p>we built this for you —</p>
            <p>the one who keeps showing up</p>
            <p>and never gets a thank-you.</p>
          </div>

          {/* headline — masked line reveal, "real life." shimmers, "real" underlined */}
          <h1 className="mt-7 font-sora text-6xl font-extrabold leading-[0.86] tracking-tight text-white sm:text-7xl lg:text-8xl [perspective:800px]">
            <span className="block overflow-hidden pb-[0.06em]"><span className="hero-line-in inline-block">social</span></span>
            <span className="block overflow-hidden pb-[0.06em]"><span className="hero-line-in inline-block">currency</span></span>
            <span className="block overflow-hidden pb-[0.06em]">
              <span className="hero-line-in inline-block">
                for{" "}
                <span className="animate-shimmer bg-gradient-to-r from-[#FFC72C] via-[#FF2E88] to-[#8B3DFF] bg-[length:200%_auto] bg-clip-text text-transparent">
                  <span className="relative inline-block">
                    real
                    <svg
                      aria-hidden
                      viewBox="0 0 120 12"
                      preserveAspectRatio="none"
                      className="hero-underline absolute -bottom-1 left-0 h-2.5 w-full text-[#C8FF37]"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="3"
                      strokeLinecap="round"
                    >
                      <path d="M2 8 C 20 2, 40 12, 60 6 S 100 2, 118 7" />
                    </svg>
                  </span>{" "}
                  life.
                </span>
              </span>
            </span>
          </h1>

          {/* tagline chip */}
          <div className="hero-chip mt-8">
            <span className="nb-sm inline-flex flex-wrap items-center gap-x-2 rounded-xl bg-[#0a0a0a] px-4 py-2.5 font-sora text-sm font-extrabold">
              <span className="text-[#C8FF37]">&quot;earn. spend. live more.&quot;</span>
              <span className="font-semibold text-white/90">
                a quiet promise, not a promise.
              </span>
            </span>
          </div>

          {/* CTAs */}
          <div className="mt-9 flex flex-wrap items-center gap-4">
            <Magnetic className="hero-cta">
              <a
                href="#how-it-works"
                className="nb nb-hover inline-flex items-center gap-2 rounded-full bg-[#FFC72C] px-7 py-3.5 font-sora text-base font-extrabold uppercase tracking-wide text-[#0a0a0a]"
              >
                get started
                <span aria-hidden>→</span>
              </a>
            </Magnetic>
            <a
              href="#difference"
              className="hero-cta group inline-flex items-center gap-2 font-sora text-base font-bold text-white/90 transition-colors hover:text-[#C8FF37]"
            >
              see how it works
              <span aria-hidden className="transition-transform group-hover:translate-x-1">↗</span>
            </a>
          </div>

          {/* credibility strip */}
          <div className="hero-strip mt-10 flex flex-wrap items-center gap-x-8 gap-y-3 font-sora text-sm font-bold text-white/55">
            <span><span className="text-white">12k+</span> LYTIANS earning</span>
            <span className="hidden h-4 w-px bg-white/20 sm:block" />
            <span><span className="text-white">240</span> partner spots</span>
            <span className="hidden h-4 w-px bg-white/20 sm:block" />
            <span><span className="text-white">1</span> currency for real life</span>
          </div>
        </div>

        {/* ── RIGHT: floating brand-object cluster (desktop) ────── */}
        <div ref={clusterRef} aria-hidden className="relative hidden h-[30rem] lg:block">
          {/* rotating "make everyday count" badge */}
          <div className="hero-object absolute right-6 top-4" data-depth="0.08" data-speed="0.6">
            <div className="animate-float nb flex h-44 w-44 rotate-6 items-center justify-center rounded-full bg-[#FFD21E] text-center font-sora text-lg font-extrabold text-[#0a0a0a]">
              <div>
                <div className="text-xs font-bold uppercase tracking-widest text-[#FF2E88]">psst</div>
                make everyday
                <br />
                count. <span className="text-[#FF2E88]"><Ico e="♡" /></span>
              </div>
            </div>
          </div>

          {/* reward stickers */}
          <div className="hero-object absolute left-4 top-24" data-depth="0.16" data-speed="1.4">
            <span className="animate-float nb-sm inline-block -rotate-6 rounded-xl bg-[#FF2E88] px-4 py-2 font-sora text-lg font-extrabold text-white">
              +50 LYTS
            </span>
          </div>
          <div className="hero-object absolute left-10 top-1/2" data-depth="0.12" data-speed="1.0">
            <span className="animate-float nb-sm inline-block rotate-3 rounded-xl bg-white px-4 py-2 font-sora text-lg font-extrabold text-[#0a0a0a]" style={{ animationDelay: "0.8s" }}>
              <Ico e="🔥" /> 7-day streak
            </span>
          </div>
          <div className="hero-object absolute bottom-8 right-16" data-depth="0.2" data-speed="1.7">
            <span className="animate-float nb-sm inline-block -rotate-3 rounded-xl bg-[#C8FF37] px-4 py-2 font-sora text-lg font-extrabold text-[#0a0a0a]" style={{ animationDelay: "1.6s" }}>
              <Ico e="🎁" /> reward unlocked
            </span>
          </div>

          {/* hand-drawn arrow linking sticker to badge */}
          <div className="hero-object pointer-events-none absolute left-1/2 top-16" data-depth="0.1" data-speed="0.8">
            <svg
              viewBox="0 0 80 80"
              className="animate-float h-14 w-14 text-[#C8FF37]"
              fill="none"
              stroke="currentColor"
              strokeWidth="4"
              strokeLinecap="round"
              strokeLinejoin="round"
              style={{ animationDelay: "0.4s" }}
            >
              <path d="M12 60 C 30 40, 46 26, 66 14" />
              <path d="M46 12 L 68 12 L 68 34" />
            </svg>
          </div>
        </div>
      </div>

    </Section>
  );
}

/* 02 — THE WHY */
export function TheWhy() {
  return (
    <Section id="the-why" variant="cream" size="punch" width="narrow">
      <div className="flex flex-col gap-8">
        <Pill bg="#0a0a0a" text="#FFD21E"><Ico e="💌" /> hey. quick story before we dive in</Pill>
        <div className="grid gap-8 lg:grid-cols-[1.4fr_1fr]">
          <div>
            <Card bg="#0a0a0a" text="#fff" className="p-6">
              <div className="font-sora text-6xl font-extrabold text-[#C8FF37]">30+ yrs</div>
              <div className="mt-2 text-sm font-bold tracking-wide">
                OF LOYALTY = SPEND · EARN POINTS · REDEEM REWARDS{" "}
                <span className="text-white/60">(the same old loop)</span>
              </div>
            </Card>
            <Heading className="mt-8">
              <span className="strike-pink">loyalty began after you swiped.</span>
              <br />
              <span className="text-[#FF2E88]">the world moved on.</span>
            </Heading>
            <div className="mt-8 flex flex-wrap items-center gap-2">
              <Chip bg={C.orange} text="#fff">SPEND MONEY</Chip>
              <span>→</span>
              <Chip bg={C.yellow}>EARN POINTS</Chip>
              <span>→</span>
              <Chip bg={C.lime}>REDEEM</Chip>
              <span>→</span>
              <Chip bg="#0a0a0a" text="#fff"><Ico e="⏳" /> POINTS EXPIRE</Chip>
            </div>
          </div>
          <div className="flex flex-col gap-4">
            <Card bg="#fff" className="-rotate-1 p-5">
              <div className="font-sora font-extrabold"><Ico e="🎬" /> DISCOVER ON SOCIAL MEDIA</div>
              <div className="text-sm font-semibold text-black/70">brand relationships start before purchase</div>
            </Card>
            <Card bg={C.pink} text="#fff" className="rotate-1 p-5">
              <div className="font-sora font-extrabold"><Ico e="👯" /> COMMUNITIES DECIDE</div>
              <div className="text-sm font-semibold text-white/80">influence &gt; paid advertising</div>
            </Card>
            <Card bg={C.lime} className="-rotate-1 p-5">
              <div className="font-sora font-extrabold"><Ico e="✨" /> REWARD PARTICIPATION</div>
              <div className="text-sm font-semibold text-black/70">recognition, not coupons</div>
            </Card>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* 03 — THE PROBLEM
   GSAP: 3D Horizontal Flip Card Reveal */
export function TheProblem() {
  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    /* Set 3D perspective container and initial 180-degree horizontal flip state */
    gsap.set("#the-problem .prob-card-grid", { perspective: 1400 });

    gsap.set("#the-problem .prob-card", {
      transformStyle: "preserve-3d",
      transformOrigin: "50% 50%",
      rotationY: -180,
      y: 45,
      scale: 0.85,
      autoAlpha: 0,
      boxShadow: "0 30px 60px rgba(0,0,0,0.5)",
    });

    gsap.set("#the-problem .prob-num", {
      scale: 0,
      rotation: -30,
      transformOrigin: "50% 50%",
    });

    const tl = gsap.timeline({
      scrollTrigger: { trigger: "#the-problem", start: "top 72%", once: true },
      defaults: { ease: "back.out(1.5)" },
      onComplete: () => gsap.set("#the-problem .prob-card", { clearProps: "transform,transformStyle" }),
    });

    /* Horizontal 3D flip animation sequence */
    tl.to("#the-problem .prob-card", {
      rotationY: 0,
      y: 0,
      scale: 1,
      autoAlpha: 1,
      boxShadow: "6px 6px 0 0 #0a0a0a",
      duration: 0.85,
      stagger: 0.2,
      ease: "back.out(1.5)",
    })
      .to(
        "#the-problem .prob-num",
        {
          scale: 1,
          rotation: 0,
          duration: 0.45,
          stagger: 0.2,
          ease: "back.out(2.2)",
        },
        "-=0.7"
      );
  }, []);

  const cards = [
    { n: "01", t: "starts too late.", bg: "#fff", tc: "#0a0a0a", items: ["Visits a store", "Discovers a brand", "Refers a friend", "Attends an event", "Joins a community"], foot: "= $0 value today" },
    { n: "02", t: "points = useless.", bg: C.pink, tc: "#fff", items: ["Expiring numbers", "Transactional incentives", "Isolated brand currencies", "Complex redemptions", "Zero emotional bond"], foot: "no flex · no vibe." },
    { n: "03", t: "businesses stuck.", bg: C.lime, tc: "#0a0a0a", items: ["CAC is thru the roof", "Engagement nosedives", "Retention is melting", "Communities = missing", "Zero pre-purchase insight"], foot: "spend $$$ · earn $0." },
  ];
  return (
    <Section id="the-problem" variant="night" size="full" width="wide">
      <Pill><Ico e="⚡" /> the problem</Pill>
      <Heading className="mt-6">
        traditional loyalty is <span className="strike-pink">broken.</span>
        <br />
        <span className="text-[#FFD21E]">here&apos;s why.</span>
      </Heading>
      <div className="prob-card-grid mt-10 grid gap-5 [perspective:1400px] md:grid-cols-3">
        {cards.map((c) => (
          <div
            key={c.n}
            className="prob-card nb nb-hover flex flex-col rounded-2xl p-6 cursor-pointer"
            style={{ background: c.bg, color: c.tc }}
          >
            <div className="prob-num mb-2 w-fit rounded-md bg-[#0a0a0a] px-2 py-0.5 text-xs font-extrabold text-white">{c.n}</div>
            <div className="font-sora text-2xl font-extrabold">{c.t}</div>
            <ul className="mt-3 flex-1 space-y-1.5 text-sm font-bold">
              {c.items.map((i) => (
                <li key={i}><Ico e="✗" /> {i}</li>
              ))}
            </ul>
            <div className="mt-4 rounded-lg bg-[#0a0a0a] py-2 text-center text-sm font-extrabold text-[#FFD21E]">{c.foot}</div>
          </div>
        ))}
      </div>
      <div className="mt-6">
        <Chip bg={C.yellow}><Ico e="❗" /> customers create value before spending. then traditional loyalty assigns zero credit.</Chip>
      </div>
    </Section>
  );
}

/* 04 — THE SHIFT */
export function TheShift() {
  return (
    <Section id="the-shift" variant="plain" className="!px-0">
      <div className="mx-auto max-w-6xl px-6 sm:px-10 lg:px-20">
        <Pill bg="#0a0a0a" text="#FFD21E"><Ico e="⚡" /> the shift</Pill>
        <Heading className="mt-6">
          from <span className="strike-pink">loyalty</span> to <span className="text-[#FF2E88]">engagement.</span>
        </Heading>
        <div className="mt-10 grid gap-8 md:grid-cols-2">
          <div>
            <div className="font-sora text-2xl font-extrabold"><Ico e="📺" /> old world</div>
            <div className="text-sm font-semibold text-white/50">rewards spending only</div>
            <div className="mt-5 space-y-3">
              {[["🛒 OFFLINE COMMERCE", "still rewards only purchases"], ["📺 TV ADS · BANNERS", "one-way broadcast · no loop"], ["💳 SPEND-BASED POINTS", "transaction, no participation"]].map(([t, s]) => (
                <Card key={t} bg="#fff" className="p-4">
                  <div className="font-sora font-extrabold"><span className="inline-flex items-center gap-2">{withIcons(t, 16)}</span></div>
                  <div className="text-sm font-semibold text-black/60">{s}</div>
                </Card>
              ))}
            </div>
          </div>
          <div>
            <div className="font-sora text-2xl font-extrabold"><Ico e="✨" /> new world</div>
            <div className="text-sm font-semibold text-[#C8FF37]">rewards participation</div>
            <div className="mt-5 space-y-3">
              {[["📱 SOCIAL MEDIA", "rewards engagement + time", C.purple], ["🎮 GAMING", "rewards achievements + grind", C.pink], ["🎬 CREATOR PLATFORMS", "rewards contribution + community", C.orange]].map(([t, s, bg]) => (
                <Card key={t as string} bg={bg as string} text="#fff" className="p-4">
                  <div className="font-sora font-extrabold"><span className="inline-flex items-center gap-2">{withIcons(t, 16)}</span></div>
                  <div className="text-sm font-semibold text-white/80">{s}</div>
                </Card>
              ))}
            </div>
          </div>
        </div>
        <div className="mt-8">
          <Chip bg={C.yellow}><Ico e="🔥" /> biggest miss in consumer tech right now: offline commerce still rewards only spending. that changes with LYTs.</Chip>
        </div>
      </div>
    </Section>
  );
}

/* Solid "slab" icons — bare black glyphs sitting inline with the chip label.
   Each one loops a motion matching its meaning (see MeetLyts' GSAP hook). */
const SLAB_PATHS: Record<string, string> = {
  walk: "M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9 7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7z",
  visit: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
  friend: "M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z",
  shop: "M18 6h-2c0-2.21-1.79-4-4-4S8 3.79 8 6H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-6-2c1.1 0 2 .9 2 2h-4c0-1.1.9-2 2-2z",
  event: "M12 .6l3.1 7.5 8.1.7-6.1 5.3 1.8 7.9L12 17.8 5.1 22l1.8-7.9L.8 8.8l8.1-.7z",
};

function SlabIcon({ name }: { name: keyof typeof SLAB_PATHS | string }) {
  return (
    <span
      aria-hidden
      data-icon={name}
      className="slab-icon inline-flex shrink-0 items-center justify-center"
    >
      <svg width="16" height="16" viewBox="0 0 24 24" fill="#0a0a0a" style={{ willChange: "transform" }}>
        <path d={SLAB_PATHS[name]} />
      </svg>
    </span>
  );
}

/* 05 — MEET LYTs
   GSAP: the wordmark "LYTs." lands letter-by-letter in 3D as the section
   enters, then the value flow pops in beat by beat. The giant word also
   drifts on a scroll-scrubbed parallax for depth. */
export function MeetLyts() {
  const chars = ["L", "Y", "T", "s", "."];

  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    const tl = gsap.timeline({
      scrollTrigger: { trigger: "#lyts", start: "top 72%" },
      defaults: { ease: "power3.out" },
    });
    tl.from("#lyts .lyts-pill", { y: 16, opacity: 0, duration: 0.5 })
      .from("#lyts .lyts-char", {
        yPercent: 130,
        rotationX: -90,
        opacity: 0,
        transformOrigin: "50% 100%",
        stagger: 0.09,
        duration: 1.0,
        ease: "back.out(1.5)",
      }, "-=0.2")
      .from("#lyts .lyts-card", { y: 34, opacity: 0, duration: 0.7 }, "-=0.4")
      .from("#lyts .lyts-chip", { scale: 0, opacity: 0, stagger: 0.05, duration: 0.5, ease: "back.out(2)" }, "-=0.3");

    /* subtle scroll-scrubbed lift on the giant wordmark */
    gsap.to("#lyts .lyts-word", {
      yPercent: -12,
      ease: "none",
      scrollTrigger: { trigger: "#lyts", start: "top bottom", end: "bottom top", scrub: 0.6 },
    });

    /* ── living slab icons — each glyph loops a motion that matches its meaning ── */
    const glyph = (name: string) => `#lyts .slab-icon[data-icon="${name}"] svg`;

    // walk → steps up and down
    gsap.to(glyph("walk"), { y: -2.5, duration: 0.42, yoyo: true, repeat: -1, ease: "sine.inOut" });
    // visit → the pin drops and settles
    gsap.to(glyph("visit"), { y: -3.5, duration: 0.75, yoyo: true, repeat: -1, ease: "power2.inOut" });
    // friend → the pair rocks side to side
    gsap.to(glyph("friend"), { rotation: 9, transformOrigin: "50% 80%", duration: 0.8, yoyo: true, repeat: -1, ease: "sine.inOut" });
    // shop → the bag swings from its handle
    gsap.to(glyph("shop"), { rotation: -11, transformOrigin: "50% 0%", duration: 0.9, yoyo: true, repeat: -1, ease: "sine.inOut" });
    // event → the star spins and twinkles
    gsap.to(glyph("event"), { rotation: 360, transformOrigin: "50% 50%", duration: 6, ease: "none", repeat: -1 });
    gsap.to(glyph("event"), { scale: 0.78, duration: 0.7, yoyo: true, repeat: -1, ease: "sine.inOut" });
  }, []);

  return (
    <Section id="lyts" variant="deep" size="normal" width="narrow">
      <span className="lyts-pill inline-block">
        <Pill bg={C.yellow} text="#0a0a0a"><Ico e="✦" /> introducing</Pill>
      </span>
      <h2 className="lyts-word mt-6 flex font-sora text-[24vw] font-extrabold leading-none tracking-tight text-white [perspective:1000px] sm:text-9xl">
        {chars.map((ch, i) => (
          <span
            key={i}
            className={`lyts-char inline-block ${ch === "." ? "text-[#C8FF37]" : ""}`}
          >
            {ch}
          </span>
        ))}
      </h2>
      <div className="lyts-card nb nb-hover mt-6 max-w-3xl rounded-2xl bg-white p-6 text-[#0a0a0a]">
        <p className="text-lg font-bold">
          a LYT is <span className="text-[#FF2E88]">a unit of digital social currency</span> you earn by participating in real life. one LYT = one moment of showing up.
        </p>
      </div>
      <div className="mt-12 flex flex-wrap items-center gap-2">
        <span className="lyts-chip inline-block"><Chip>walk <SlabIcon name="walk" /></Chip></span>
        <span className="lyts-chip inline-block"><Chip bg={C.yellow}>visit <SlabIcon name="visit" /></Chip></span>
        <span className="lyts-chip inline-block"><Chip bg={C.lime}>friend <SlabIcon name="friend" /></Chip></span>
        <span className="lyts-chip inline-block"><Chip bg={C.orange} text="#fff">shop <SlabIcon name="shop" /></Chip></span>
        <span className="lyts-chip inline-block"><Chip bg={C.purple} text="#fff">event <SlabIcon name="event" /></Chip></span>
        <span className="lyts-chip">→</span>
        <span className="lyts-chip inline-block"><Chip bg="#0a0a0a" text={C.lime}>your LYTs balance</Chip></span>
        <span className="lyts-chip">→</span>
        <span className="lyts-chip inline-block"><Chip bg={C.orange} text="#fff">spend</Chip></span>
        <span className="lyts-chip">→</span>
        <span className="lyts-chip inline-block"><Chip bg={C.purple} text="#fff">live more</Chip></span>
      </div>
    </Section>
  );
}

/* 06 — ONE ORDINARY DAY */
export function OneDay() {
  const rows = [
    ["🚶", "you walked", "10,000 steps.", C.lime],
    ["☕", "met a friend", "for coffee.", C.yellow],
    ["📍", "visited", "a new place.", C.pink],
    ["🏪", "supported", "a local business.", C.orange],
    ["🌱", "showed up", "for life.", C.purple],
  ] as const;

  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    const lineBeam = document.querySelector("#one-day .line-beam");
    const lineOrb = document.querySelector("#one-day .line-orb");
    const iconBadges = gsap.utils.toArray<HTMLElement>("#one-day .icon-badge");
    const iconTexts = gsap.utils.toArray<HTMLElement>("#one-day .icon-text");
    const cardResult = document.querySelector("#one-day .card-result");

    if (!lineBeam || !lineOrb) return;

    /* Hide / dim elements initially so they reveal as line touches them */
    gsap.set(lineBeam, { width: "0%", opacity: 0 });
    gsap.set(lineOrb, { left: "10%", opacity: 0, scale: 0.5 });

    iconBadges.forEach((badge) => {
      gsap.set(badge, { opacity: 0.2, scale: 0.82, filter: "brightness(0.4) blur(1px)", boxShadow: "0 0 0px transparent" });
    });

    iconTexts.forEach((text) => {
      gsap.set(text, { opacity: 0.15, y: 12 });
    });

    if (cardResult) {
      gsap.set(cardResult, { opacity: 0, y: 30, scale: 0.9 });
    }

    /* Pinned ScrollTrigger timeline: pins section until line reaches last round icon */
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: "#one-day",
        start: "top top",
        end: "+=130%",
        pin: true,
        scrub: 0.8,
        anticipatePin: 1,
      },
    });

    const glowColors = ["#C8FF37", "#FFD21E", "#FF2E88", "#FF6B2C", "#9D4EDD"];
    const positions = ["10%", "30%", "50%", "70%", "90%"];

    /* Initial orb reveal */
    tl.to(lineOrb, { opacity: 1, scale: 1.3, duration: 0.2 });

    /* Draw line & reveal each round icon when line touches it */
    positions.forEach((pos, i) => {
      const targetWidth = `${(i / 4) * 80}%`;
      const label = `step-${i}`;

      tl.to(lineOrb, { left: pos, ease: "none", duration: 0.45 }, label);
      tl.to(lineBeam, { width: targetWidth, opacity: 1, ease: "none", duration: 0.45 }, label);

      tl.to(
        iconBadges[i],
        {
          opacity: 1,
          scale: 1.15,
          filter: "brightness(1.15) blur(0px)",
          boxShadow: `0 0 35px ${glowColors[i]}, 6px 6px 0 0 #0a0a0a`,
          duration: 0.25,
        },
        `${label}+=0.1`
      );

      tl.to(
        iconTexts[i],
        {
          opacity: 1,
          y: 0,
          duration: 0.25,
        },
        `${label}+=0.1`
      );
    });

    /* Final reward card reveal after line reaches last round icon */
    if (cardResult) {
      tl.to(cardResult, {
        opacity: 1,
        y: 0,
        scale: 1,
        duration: 0.4,
        ease: "back.out(1.5)",
      });
    }
  });

  return (
    <Section id="one-day" variant="deep" size="full" className="min-h-screen flex flex-col justify-center py-12">
      <Pill bg={C.lime} text="#0a0a0a"><Ico e="💚" /> one ordinary day</Pill>
      <Heading className="mt-6">
        here is what one ordinary day with <span className="text-[#C8FF37]">LYTs</span> looks like.
      </Heading>

      <div className="relative mt-14 max-w-5xl w-full">
        {/* Connecting Track Line & Ultra-Bright Glow Beam */}
        <div className="absolute top-6 sm:top-10 md:top-12 left-0 right-0 -translate-y-1/2 z-0 pointer-events-none">
          {/* Base Dark Track */}
          <div className="absolute left-[10%] right-[10%] top-1/2 -translate-y-1/2 h-3 bg-[#0a0a0a] rounded-full border border-white/20 shadow-inner" />
          
          {/* Super-Bright Neon Beam */}
          <div className="line-beam absolute top-1/2 -translate-y-1/2 left-[10%] h-3 rounded-full bg-gradient-to-r from-[#C8FF37] via-[#FF2E88] to-[#FFD21E] shadow-[0_0_30px_#C8FF37,0_0_15px_#FF2E88]" />

          {/* High-Intensity Energy Orb */}
          <div className="line-orb absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-7 h-7 rounded-full bg-[#C8FF37] border-3 border-[#0a0a0a] shadow-[0_0_30px_#C8FF37,0_0_15px_#ffffff] z-20 flex items-center justify-center">
            <div className="w-2 h-2 rounded-full bg-[#0a0a0a]" />
          </div>
        </div>

        {/* 5 Icons Row */}
        <div className="relative z-10 grid grid-cols-5 gap-2 sm:gap-6 md:gap-8">
          {rows.map(([e, a, b, c], i) => (
            <div key={a} className="flex flex-col items-center text-center group">
              <div
                className="icon-badge nb nb-hover relative z-10 flex h-12 w-12 sm:h-20 sm:w-20 md:h-24 md:w-24 items-center justify-center rounded-full shrink-0 text-[#0a0a0a] transition-all duration-300"
                style={{ background: c }}
              >
                <Ico e={e} size={28} />
              </div>
              <div className="icon-text mt-3.5 flex flex-col items-center text-center font-sora text-xs sm:text-sm md:text-base text-white leading-tight">
                <span>{a}</span>
                <span className="font-extrabold">{b}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      <Card bg="#fff" className="card-result mt-12 w-fit p-5">
        <div className="font-sora text-xl font-extrabold">you earned LYTs</div>
        <div className="mt-1 w-fit bg-[#FFD21E] px-2 font-sora text-xl font-extrabold">because your life has value. <Ico e="🤍" /></div>
      </Card>
    </Section>
  );
}

/* 07 — FEELINGS
   GSAP: card game dealer reveal from center stack one by one */
export function Feelings() {
  const cards = [
    ["🏆", "Recognition", "be seen, be credited", C.pink, "#fff"],
    ["🌴", "Experiences", "real life, not receipts", C.yellow, "#0a0a0a"],
    ["🫂", "Belonging", "community = currency", C.lime, "#0a0a0a"],
    ["🪞", "Identity", "who you are matters", C.orange, "#fff"],
    ["💬", "Community", "tribes win", C.purple, "#fff"],
  ] as const;

  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    /* Hide headline & sum box */
    gsap.set("#feelings .feel-w-in", { yPercent: 118, rotationZ: 4, autoAlpha: 0 });
    gsap.set("#feelings .feel-sum", { y: 34, autoAlpha: 0 });

    /* Set 3D perspective for card game dealer grid */
    gsap.set("#feelings .feel-grid", { perspective: 1200 });

    const cardEls = gsap.utils.toArray<HTMLElement>("#feelings .feel-card");

    /* Stack all cards at the CENTER of the grid before dealer deals them out */
    cardEls.forEach((card, i) => {
      gsap.set(card, {
        transformStyle: "preserve-3d",
        transformOrigin: "50% 50%",
        autoAlpha: 0,
        xPercent: (2 - i) * 110, // Shifts all cards to center column (index 2)
        y: -100,
        scale: 0.5,
        rotationY: -90,
        rotationZ: (i - 2) * 8,
        boxShadow: "0 30px 60px rgba(0,0,0,0.5)",
      });
    });

    /* Headline reveal */
    gsap.to("#feelings .feel-w-in", {
      scrollTrigger: { trigger: "#feelings", start: "top 78%", once: true },
      yPercent: 0,
      rotationZ: 0,
      autoAlpha: 1,
      stagger: 0.045,
      duration: 0.8,
      ease: "power4.out",
    });

    /* Dealer deals cards from center out to their positions one by one */
    gsap.to(cardEls, {
      scrollTrigger: { trigger: "#feelings .feel-grid", start: "top 75%", once: true },
      xPercent: 0,
      y: 0,
      scale: 1,
      rotationY: 0,
      rotationZ: 0,
      autoAlpha: 1,
      boxShadow: "6px 6px 0 0 #0a0a0a",
      duration: 0.65,
      stagger: 0.15,
      ease: "back.out(1.5)",
      onComplete: () => {
        gsap.set(cardEls, { clearProps: "transform,transformStyle,perspective" });
      },
    });

    gsap.to("#feelings .feel-sum", {
      scrollTrigger: { trigger: "#feelings .feel-sum", start: "top 88%", once: true },
      y: 0,
      autoAlpha: 1,
      duration: 0.8,
      ease: "power3.out",
    });
  }, []);

  return (
    <Section id="feelings" variant="cream" size="epic" width="wide">
      <Pill bg={C.purple} text="#fff"><Ico e="💗" /> why social currency</Pill>
      <h2 className="mt-6 font-sora text-4xl font-extrabold leading-[1.02] tracking-tight [perspective:800px] sm:text-5xl lg:text-6xl">
        <MaskWords text="people don't want points. they want" wordClass="feel-w-in" />
        <MaskWords text="feelings." wordClass="feel-w-in" inner="text-[#FF2E88]" />
      </h2>
      <div className="feel-grid mt-10 grid gap-4 sm:grid-cols-3 lg:grid-cols-5">
        {cards.map(([e, t, s, bg, tc]) => (
          <div
            key={t}
            className="feel-card nb nb-hover flex flex-col justify-between rounded-2xl p-5 cursor-pointer [will-change:transform]"
            style={{ background: bg, color: tc }}
          >
            <div>
              <div className="mb-1"><Ico e={e} size={28} /></div>
              <div className="mt-6 font-sora text-lg font-extrabold leading-tight">{t}</div>
              <div className="mt-1 text-xs font-bold opacity-80">{s}</div>
            </div>
          </div>
        ))}
      </div>
      <div className="feel-sum nb mt-6 flex flex-col items-start gap-2 rounded-2xl p-6 sm:flex-row sm:items-center sm:gap-6" style={{ background: C.purple, color: "#fff" }}>
        <div className="font-sora text-6xl font-extrabold text-[#FFD21E]">0/5</div>
        <div>
          <div className="font-sora font-extrabold tracking-wide">TRADITIONAL LOYALTY SCORES</div>
          <div className="text-sm font-semibold text-white/85">On every emotional need above, old-school points-based loyalty = 0%. LYTs is designed to reward human participation itself.</div>
        </div>
      </div>
    </Section>
  );
}

/* 08 — THE DIFFERENCE
   GSAP: the headline drops in word by word, the two worlds slide in from
   opposite edges, then each step of the two flows cascades downward like
   value moving through the funnel. */
export function Difference() {
  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    gsap.set("#difference .diff-w-in", { yPercent: 120, autoAlpha: 0 });
    gsap.set("#difference .diff-left", { xPercent: -9, autoAlpha: 0 });
    gsap.set("#difference .diff-right", { xPercent: 9, autoAlpha: 0 });
    gsap.set("#difference .diff-step", { y: -18, autoAlpha: 0 });

    const tl = gsap.timeline({
      scrollTrigger: { trigger: "#difference", start: "top 70%", once: true },
      defaults: { ease: "power3.out" },
    });
    tl.to("#difference .diff-w-in", { yPercent: 0, autoAlpha: 1, stagger: 0.045, duration: 0.75, ease: "power4.out" })
      .to("#difference .diff-left", { xPercent: 0, autoAlpha: 1, duration: 0.85 }, "-=0.25")
      .to("#difference .diff-right", { xPercent: 0, autoAlpha: 1, duration: 0.85 }, "<")
      .to("#difference .diff-left .diff-step", { y: 0, autoAlpha: 1, stagger: 0.08, duration: 0.45 }, "-=0.3")
      .to("#difference .diff-right .diff-step", { y: 0, autoAlpha: 1, stagger: 0.08, duration: 0.45 }, "<");
  }, []);

  return (
    <Section id="difference" variant="night" size="full" width="wide" bgImage="/images/background/FD_bg.png">
      <Pill><Ico e="⚡" /> the fundamental difference</Pill>
      <h2 className="mt-6 font-sora text-4xl font-extrabold leading-[0.95] tracking-tight text-[#FFD21E] [perspective:800px] sm:text-5xl lg:text-6xl">
        <span className="block"><MaskWords text="loyalty starts at spend." wordClass="diff-w-in" /></span>
        <span className="block"><MaskWords text="LYTs starts at engage." wordClass="diff-w-in" /></span>
      </h2>
      <div className="mt-10 grid items-start gap-4 md:grid-cols-2">
        <div className="diff-left">
          <Pill bg={C.yellow} text="#0a0a0a"><Ico e="💻" /> OLD WORLD</Pill>
          <div className="mt-3 font-sora text-3xl font-extrabold">TRADITIONAL LOYALTY</div>
          <div className="mt-4 space-y-2">
            <div className="diff-step nb rounded-lg bg-white px-4 py-2 text-center font-extrabold text-[#0a0a0a]">PURCHASE ↓</div>
            <div className="diff-step nb rounded-lg px-4 py-2 text-center font-extrabold text-[#0a0a0a]" style={{ background: C.yellow }}>EARN POINTS ↓</div>
            <div className="diff-step nb rounded-lg px-4 py-2 text-center font-extrabold text-white" style={{ background: C.orange }}>REDEEM ↓</div>
            <div className="diff-step font-extrabold text-[#C8FF37]"><Ico e="⏳" /> POINTS EXPIRE</div>
          </div>
          <div className="mt-4"><Chip bg={C.lime}><Ico e="🔥" /> not a better coupon. a whole new currency. <Ico e="🌱" /></Chip></div>
        </div>
        <div className="diff-right nb-lg rounded-2xl bg-gradient-to-br from-[#FF2E88] to-[#A020F0] p-5">
          <Pill bg={C.yellow} text="#0a0a0a"><Ico e="✨" /> LYTS WAY</Pill>
          <div className="mt-3 font-sora text-3xl font-extrabold text-white">LYTS SOCIAL CURRENCY</div>
          <div className="mt-4 space-y-2">
            {[["DISCOVER", C.lime, "#0a0a0a"], ["ENGAGE", C.yellow, "#0a0a0a"], ["EARN LYTS", C.orange, "#fff"], ["SPEND", C.pink, "#fff"], ["LIVE MORE", "#fff", "#0a0a0a"], ["💞 LYTIAN", "#0a0a0a", C.lime]].map(([t, bg, tc]) => (
              <div key={t} className="diff-step nb rounded-lg px-4 py-2 text-center font-extrabold" style={{ background: bg, color: tc }}><span className="inline-flex items-center justify-center gap-1.5">{withIcons(t, 15)} {t !== "💞 LYTIAN" && "↓"}</span></div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

/* 09 — THE LOOP
   GSAP: the headline flips up line by line, then the six steps flip open
   left-to-right like a chain of dominoes — the loop building itself. */
export function TheLoop() {
  const cards = [
    ["01", "DISCOVER", "brands, places, people worth meeting.", C.pink, "#fff"],
    ["02", "ENGAGE", "visit, share, take the small challenge.", C.yellow, "#0a0a0a"],
    ["03", "EARN LYTS", "every interaction turns into value.", C.lime, "#0a0a0a"],
    ["04", "SPEND LYTS", "moments, access, experiences that matter.", C.orange, "#fff"],
    ["05", "LIVE MORE", "explore, connect, feel alive.", C.purple, "#fff"],
    ["06", "BECOME A LYTIAN", "the community you always wanted. 💞", "#0a0a0a", C.lime],
  ] as const;

  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    gsap.set("#the-loop .loop-w-in", { yPercent: 118, rotationX: -85, autoAlpha: 0, transformOrigin: "50% 100%" });
    gsap.set("#the-loop .loop-card", { rotationY: -92, xPercent: -6, autoAlpha: 0, transformOrigin: "left center" });

    gsap.to("#the-loop .loop-w-in", {
      scrollTrigger: { trigger: "#the-loop", start: "top 78%", once: true },
      yPercent: 0,
      rotationX: 0,
      autoAlpha: 1,
      stagger: 0.05,
      duration: 0.8,
      ease: "power4.out",
    });

    gsap.to("#the-loop .loop-card", {
      scrollTrigger: { trigger: "#the-loop .loop-grid", start: "top 84%", once: true },
      rotationY: 0,
      xPercent: 0,
      autoAlpha: 1,
      stagger: 0.09,
      duration: 0.7,
      ease: "power3.out",
      onComplete: () => gsap.set("#the-loop .loop-card", { clearProps: "transform" }),
    });
  }, []);

  return (
    <Section id="the-loop" variant="night" size="normal">
      <Pill bg={C.lime} text="#0a0a0a"><Ico e="🚀" /> your 6-step loop</Pill>
      <h2 className="mt-6 font-sora text-4xl font-extrabold leading-[1.02] tracking-tight [perspective:900px] sm:text-5xl lg:text-6xl">
        <span className="block"><MaskWords text="six small moments." wordClass="loop-w-in" /></span>
        <span className="block">
          <MaskWords text="one big life that" wordClass="loop-w-in" />
          <MaskWords text="keeps going." wordClass="loop-w-in" inner="text-[#FFD21E]" />
        </span>
      </h2>
      <div className="loop-grid mt-10 grid gap-4 [perspective:1400px] sm:grid-cols-2 lg:grid-cols-6">
        {cards.map(([n, t, s, bg, tc]) => (
          <div
            key={n}
            className="loop-card nb nb-hover rounded-2xl p-4 [will-change:transform]"
            style={{ background: bg, color: tc }}
          >
            <div className="mb-2 w-fit rounded bg-[#0a0a0a] px-1.5 text-xs font-extrabold text-white">{n}</div>
            <div className="font-sora text-lg font-extrabold leading-tight">{t}</div>
            <div className="mt-2 text-xs font-bold opacity-80"><span className="inline-flex flex-wrap items-center gap-1">{withIcons(s, 13)}</span></div>
          </div>
        ))}
      </div>
      <div className="mt-6"><Chip bg={C.purple} text="#fff"><Ico e="♻️" /> every interaction creates value. every LYTIAN invites another.</Chip></div>
    </Section>
  );
}
