"use client";

import {
  Section,
  Pill,
  Card,
  Chip,
  Heading,
  Logo,
  Group,
  Marquee,
  ScrollLitText,
} from "./ui";
import { C } from "./palette";
import { gsap, useGSAP, syncLenisScrollTrigger, MaskWords } from "./gsapkit";

/* 10 — FOR YOU */
export function ForYou() {
  const cards = [
    ["🚶", "earn before spending", "value starts before purchase. discovery, visits, sharing.", C.pink, "#fff"],
    ["🌅", "everyday life = value", "walking. exploring. visiting. sharing. everything matters.", C.yellow, "#0a0a0a"],
    ["🌐", "one connected currency", "one LYTs balance across experiences and brands. no silos.", C.lime, "#0a0a0a"],
    ["📢", "real recognition", "rewarded for contribution and engagement, not just transactions.", C.purple, "#fff"],
  ] as const;
  return (
    <Section id="for-you" variant="cream" size="full" width="wide">
      <div className="grid gap-8 lg:grid-cols-[1.3fr_1fr] lg:items-start">
        <div>
          <Pill>🙋 for you</Pill>
          <h2 className="mt-6 font-sora text-4xl sm:text-6xl md:text-7xl font-extrabold leading-[0.9] tracking-tight">
            your life
            <br />
            is <span className="text-[#A020F0]">worth</span>
            <br />
            something.
          </h2>
          <p className="mt-4 font-bold">every step. every visit. every selfie. it&apos;s all worth it here. 💗</p>
        </div>
        <div className="space-y-4">
          <Card bg="#0a0a0a" text={C.lime} className="p-5">
            <div className="font-sora text-lg sm:text-xl font-extrabold">value begins before purchase. 🌱</div>
          </Card>
          <Card bg={C.orange} text="#fff" className="p-5">
            <div className="font-sora text-xl sm:text-2xl font-extrabold">walk in. win more.</div>
            <div className="mt-1 text-sm font-bold">
              10k steps? <span className="rounded bg-[#FFD21E] px-1 text-[#0a0a0a]">earn.</span> coffee with a friend?{" "}
              <span className="rounded bg-[#FFD21E] px-1 text-[#0a0a0a]">earn.</span> sharing a vibe?{" "}
              <span className="rounded bg-[#FFD21E] px-1 text-[#0a0a0a]">earn.</span>
            </div>
          </Card>
        </div>
      </div>
      <Group className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        {cards.map(([e, t, s, bg, tc]) => (
          <Card key={t} group bg={bg} text={tc} className="p-5">
            <div className="text-2xl">{e}</div>
            <div className="mt-4 font-sora text-lg font-extrabold leading-tight">{t}</div>
            <div className="mt-1 text-xs font-bold opacity-85">{s}</div>
          </Card>
        ))}
      </Group>
    </Section>
  );
}

/* 11 — FOR BUSINESS */
export function ForBusiness() {
  const cards = [
    ["1", "🤝 ACQUIRE", "CUSTOMERS EARLIER", "Engage them BEFORE the transaction.", C.pink, "#fff"],
    ["2", "👟 FOOTFALL", "INCREASE VISITS", "Reward the showing up.", C.lime, "#0a0a0a"],
    ["3", "📁 CAC", "SLASH ACQUISITION COSTS", "Organic loops replace paid ads.", C.yellow, "#0a0a0a"],
    ["4", "🔁 KEEP", "STICKIER CUSTOMERS", "Continuous engagement = love.", C.orange, "#fff"],
    ["5", "👥 TRIBE", "BUILD ADVOCATES", "Customers turn into LYTIANS.", C.purple, "#fff"],
    ["6", "🧠 INSIGHT", "BETTER INTENT SIGNALS", "See them before the receipt.", "#fff", "#0a0a0a"],
  ] as const;
  return (
    <Section id="for-business" variant="night" size="full" width="wide">
      <Pill bg={C.yellow} text="#0a0a0a">🤝 for businesses</Pill>
      <Heading className="mt-6">
        acquire earlier.
        <br />
        retain <span className="text-[#FFD21E]">forever.</span>
      </Heading>
      <p className="mt-4 font-bold text-[#C8FF37]">meet people before they buy. keep them warm after. 💞</p>
      <Group className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map(([n, tag, t, s, bg, tc]) => (
          <Card key={n} group bg={bg} text={tc} className="relative overflow-hidden p-5">
            <span className="absolute right-3 top-2 font-sora text-4xl font-extrabold opacity-20">{n}</span>
            <div className="w-fit rounded bg-[#0a0a0a] px-2 py-0.5 text-xs font-extrabold text-[#FFD21E]">{tag}</div>
            <div className="mt-3 font-sora text-xl font-extrabold leading-tight">{t}</div>
            <div className="mt-1 text-sm font-bold opacity-85">{s}</div>
          </Card>
        ))}
      </Group>
    </Section>
  );
}

/* 12 — WHY NOW */
export function WhyNow() {
  const cards = [
    ["🌴", "EXPERIENCE ECONOMY", "Experiences > possessions.", "↑↑", "#fff", "#0a0a0a"],
    ["👯", "COMMUNITY COMMERCE", "Tribes > ads.", "↑", C.yellow, "#0a0a0a"],
    ["🤲", "PARTICIPATION REWARDED", "Attention = the new spend.", "↑↑", C.lime, "#0a0a0a"],
    ["🎮", "GAMIFIED LIFE", "Systems make it real.", "↑", C.orange, "#fff"],
    ["📉", "OLD LOYALTY FADING", "No real bond anymore.", "↓↓", C.pink, "#fff"],
  ] as const;
  return (
    <Section id="why-now" variant="deep" size="normal" width="wide">
      <Pill bg={C.lime} text="#0a0a0a">⏰ why this matters</Pill>
      <Heading className="mt-6">
        5 currents
        <br />
        are converging <span className="text-[#FFD21E]">right now.</span>
      </Heading>
      <Group className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
        {cards.map(([e, t, s, a, bg, tc]) => (
          <Card key={t} group bg={bg} text={tc} className="flex flex-col p-5">
            <div className="text-2xl">{e}</div>
            <div className="mt-4 font-sora text-lg font-extrabold leading-tight">{t}</div>
            <div className="mt-1 text-xs font-bold opacity-80">{s}</div>
            <div className="mt-4 text-2xl font-extrabold">{a}</div>
          </Card>
        ))}
      </Group>
    </Section>
  );
}

/* 13 — HOW IT WORKS */
export function HowItWorks() {
  const cards = [
    ["🚶", "Walk", "turn every step into social currency", C.pink, "#fff"],
    ["📍", "Visit", "explore local spots, earn for showing up", C.yellow, "#0a0a0a"],
    ["🤳", "Selfie", "turn memories into rewards", C.lime, "#0a0a0a"],
    ["🎡", "Spin", "surprise LYTs + experiences daily", C.orange, "#fff"],
    ["🎟️", "Scratch", "instant wins, hidden surprises", C.purple, "#fff"],
    ["🏆", "Challenge", "missions, goals, achievements", C.lime, "#0a0a0a"],
    ["🤝", "Friend", "invite + grow community together", C.purple, "#fff"],
    ["🛍️", "Shop", "purchases still matter · earn more", "#0a0a0a", C.lime],
    ["🎉", "Event", "show up, get rewarded for the moment", C.pink, "#fff"],
    ["🏷️", "Brand", "campaigns + unlock exclusive LYTs", C.orange, "#fff"],
  ] as const;
  const top = cards.slice(0, 5);
  const bottom = cards.slice(5);
  return (
    <Section id="how-it-works" variant="cream" size="epic" width="wide">
      <Pill bg="#0a0a0a" text={C.lime}>⚡ how it works</Pill>
      <h2 className="mt-6 font-sora text-5xl font-extrabold leading-[0.95] tracking-tight sm:text-6xl">
        every action earns points{" "}
        <span className="nb-sm bg-[#C8FF37] px-2 text-[#0a0a0a]">LYTs.</span>
      </h2>
      <p className="mt-4 font-bold">
        no app-opening rituals. no complicated loyalty rules.{" "}
        <span className="bg-[#FFD21E] px-1">no waiting until you spend.</span> just live your life, engage the world, and watch your LYTs grow. 🌱
      </p>

      {/* Two counter-scrolling tracks. The opposing directions read as a
          machine that never stops running — which is the point of the copy. */}
      <div className="mt-14 -mx-6 space-y-4 sm:-mx-10 lg:-mx-20">
        <Marquee duration={34}>
          {top.map(([e, t, s, bg, tc], i) => (
            <ActionTile key={`t${i}`} emoji={e} title={t} sub={s} bg={bg} text={tc} />
          ))}
        </Marquee>
        <Marquee duration={40} reverse>
          {bottom.map(([e, t, s, bg, tc], i) => (
            <ActionTile key={`b${i}`} emoji={e} title={t} sub={s} bg={bg} text={tc} />
          ))}
        </Marquee>
      </div>
    </Section>
  );
}

/* One tile on the HowItWorks marquee tracks. Fixed width so the loop reads as
   an even cadence rather than a ragged queue. */
function ActionTile({
  emoji,
  title,
  sub,
  bg,
  text,
}: {
  emoji: string;
  title: string;
  sub: string;
  bg: string;
  text: string;
}) {
  return (
    <div
      className="nb relative flex h-[150px] w-[248px] shrink-0 flex-col justify-center rounded-2xl p-5"
      style={{ background: bg, color: text }}
    >
      <span className="absolute right-2 top-2 rounded bg-[#0a0a0a] px-1.5 py-0.5 text-[10px] font-extrabold text-[#FFD21E]">
        +LYTs
      </span>
      <div className="text-2xl">{emoji}</div>
      <div className="mt-2 font-sora text-lg font-extrabold leading-tight">{title}</div>
      <div className="mt-0.5 text-xs font-bold opacity-80">{sub}</div>
    </div>
  );
}

/* 14 — OLD vs NEW
   GSAP: a face-off. The headline reveals word by word, the two worlds charge
   in from opposite edges, and the VS badge slams in with an elastic pop and a
   quick shake — the clash — before each card's rule lines stagger up. */
export function OldVsNew() {
  useGSAP(() => {
    syncLenisScrollTrigger();
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) return;

    gsap.set("#old-vs-new .ovn-w-in", { yPercent: 120, autoAlpha: 0 });
    gsap.set("#old-vs-new .ovn-left", { xPercent: -18, rotationZ: -4, autoAlpha: 0 });
    gsap.set("#old-vs-new .ovn-right", { xPercent: 18, rotationZ: 4, autoAlpha: 0 });
    gsap.set("#old-vs-new .ovn-vs", { scale: 0, autoAlpha: 0 });
    gsap.set("#old-vs-new .ovn-rule", { y: 18, autoAlpha: 0 });

    const tl = gsap.timeline({
      scrollTrigger: { trigger: "#old-vs-new", start: "top 70%", once: true },
      defaults: { ease: "power3.out" },
    });
    tl.to("#old-vs-new .ovn-w-in", { yPercent: 0, autoAlpha: 1, stagger: 0.05, duration: 0.7, ease: "power4.out" })
      .to("#old-vs-new .ovn-left", { xPercent: 0, rotationZ: 0, autoAlpha: 1, duration: 0.7 }, "-=0.2")
      .to("#old-vs-new .ovn-right", { xPercent: 0, rotationZ: 0, autoAlpha: 1, duration: 0.7 }, "<")
      .to("#old-vs-new .ovn-vs", { scale: 1, autoAlpha: 1, duration: 0.6, ease: "elastic.out(1, 0.5)" }, "-=0.15")
      .to("#old-vs-new .ovn-vs", { rotation: "+=8", duration: 0.08, yoyo: true, repeat: 3, ease: "power1.inOut" }, "<0.1")
      .to("#old-vs-new .ovn-rule", { y: 0, autoAlpha: 1, stagger: 0.08, duration: 0.5 }, "-=0.3");
  }, []);

  return (
    <Section id="old-vs-new" variant="deep" size="full" width="wide">
      <Pill bg={C.yellow} text="#0a0a0a">💞 a new kind of loyalty</Pill>
      <p className="mt-4 font-bold text-[#C8FF37]">traditional loyalty said one thing.</p>
      <h2 className="mt-1 font-sora text-4xl font-extrabold leading-[0.95] tracking-tight [perspective:800px] sm:text-5xl lg:text-6xl">
        <MaskWords text="LYTs says" wordClass="ovn-w-in" inner="text-[#FFD21E]" />
        <MaskWords text="another." wordClass="ovn-w-in" />
      </h2>
      <div className="mt-10 grid items-stretch gap-4 md:grid-cols-[1fr_auto_1fr]">
        <div className="ovn-left nb nb-hover rounded-2xl bg-[#0a0a0a] p-6 text-white [will-change:transform]">
          <Pill bg={C.yellow} text="#0a0a0a">💻 TRADITIONAL LOYALTY</Pill>
          <div className="mt-4 font-sora text-3xl font-extrabold leading-tight text-[#FFD21E]">
            <span className="ovn-rule block">the old rule</span>
            <span className="ovn-rule block text-white">spend first.</span>
            <span className="ovn-rule block text-white">earn later.</span>
          </div>
          <div className="ovn-rule mt-4 text-sm font-bold text-white/70">value is created only when you buy. participation = invisible. 🫥</div>
        </div>
        <div className="flex items-center justify-center">
          <span className="ovn-vs nb flex h-16 w-16 items-center justify-center rounded-full bg-[#FFD21E] font-sora text-xl font-extrabold text-[#0a0a0a] [will-change:transform]">VS</span>
        </div>
        <div className="ovn-right nb-lg rounded-2xl bg-gradient-to-br from-[#FF2E88] to-[#A020F0] p-6 [will-change:transform]">
          <Pill bg="#0a0a0a" text="#fff">✨ THE LYTS WAY</Pill>
          <div className="mt-4 font-sora text-3xl font-extrabold leading-tight text-white">
            <span className="ovn-rule block">the new rule</span>
            <span className="ovn-rule block">live first.</span>
            <span className="ovn-rule block">earn everywhere.</span>
          </div>
          <div className="ovn-rule mt-4 text-sm font-bold text-white/85">value is created when you participate. everyday life is the unlock. 🎉</div>
        </div>
      </div>
      <div className="mt-6">
        <Chip bg="#0a0a0a" text="#fff">
          discover · engage · <span className="text-[#C8FF37]">earn LYTs</span> · spend LYTs · live more · <span className="text-[#FFD21E]">become a LYTIAN.</span>
        </Chip>
      </div>
    </Section>
  );
}

/* 15 — THE VISION
   GSAP: the headline reveals word by word with "social" punching in on an
   overshoot, while the value list stacks up — each row slides in from the
   right and its ✓ ticks in with a springy pop, like a checklist completing. */
export function TheVision() {
  const items = [
    ["every discovery has value", "#fff", "#0a0a0a"],
    ["every experience has value", C.yellow, "#0a0a0a"],
    ["every interaction has value", C.lime, "#0a0a0a"],
    ["every community has value", C.orange, "#fff"],
    ["every person can live more", C.purple, "#fff"],
  ] as const;

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

    gsap.set("#the-vision .vis-w-in", { yPercent: 118, autoAlpha: 0 });
    gsap.set("#the-vision .vis-social", { scale: 1.6, autoAlpha: 0, transformOrigin: "0% 50%" });
    gsap.set("#the-vision .vis-row", { xPercent: 26, autoAlpha: 0 });
    gsap.set("#the-vision .vis-check", { scale: 0, rotation: -40, transformOrigin: "50% 50%" });

    const tl = gsap.timeline({
      scrollTrigger: { trigger: "#the-vision", start: "top 72%", once: true },
      defaults: { ease: "power3.out" },
    });
    tl.to("#the-vision .vis-w-in", { yPercent: 0, autoAlpha: 1, stagger: 0.05, duration: 0.7, ease: "power4.out" })
      .to("#the-vision .vis-social", { scale: 1, autoAlpha: 1, duration: 0.6, ease: "back.out(2.4)" }, "-=0.35")
      .to("#the-vision .vis-row", { xPercent: 0, autoAlpha: 1, stagger: 0.11, duration: 0.6 }, "-=0.3")
      .to("#the-vision .vis-check", { scale: 1, rotation: 0, stagger: 0.11, duration: 0.5, ease: "back.out(3)" }, "<0.15");
  }, []);

  return (
    <Section id="the-vision" variant="deep" size="normal">
      <div className="grid gap-8 lg:grid-cols-[1.2fr_1fr] lg:items-center">
        <div>
          <Pill bg={C.yellow} text="#0a0a0a">🌈 the vision</Pill>
          <h2 className="mt-6 font-sora text-4xl font-extrabold leading-[0.95] tracking-tight [perspective:800px] sm:text-6xl md:text-7xl">
            <MaskWords text="world's largest" wordClass="vis-w-in" />
            <span className="mr-[0.24em] inline-block overflow-hidden align-bottom pb-[0.08em]">
              <span className="vis-w-in inline-block">
                <span className="vis-social inline-block text-[#A020F0]">social</span>
              </span>
            </span>
            <MaskWords text="currency ecosystem." wordClass="vis-w-in" />
          </h2>
        </div>
        <div className="space-y-3">
          {items.map(([t, bg, tc]) => (
            <div
              key={t}
              className="vis-row nb flex items-center gap-3 rounded-xl px-4 py-3 font-extrabold [will-change:transform]"
              style={{ background: bg, color: tc }}
            >
              <span className="vis-check flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#C8FF37] text-sm text-[#0a0a0a]">✓</span>
              {t}
            </div>
          ))}
        </div>
      </div>
      <div className="mt-8">
        <Chip bg="#0a0a0a" text={C.lime}>every meaningful interaction has value. 🤝</Chip>
      </div>
    </Section>
  );
}

/* 16 — OUR BELIEF */
export function OurBelief() {
  return (
    <Section id="our-belief" variant="night" size="normal" width="wide">
      <div className="mx-auto flex flex-col items-center text-center">
        <Pill bg="#0a0a0a" text={C.yellow}>🌱 our belief</Pill>
      </div>

      {/* The thesis, lit word by word as it scrolls past. */}
      <ScrollLitText
        className="mx-auto mt-12 max-w-4xl text-center font-sora text-2xl font-extrabold leading-snug tracking-tight sm:text-4xl"
        text="you already create value every single day. nobody has ever paid you for it."
        dim="rgba(255,255,255,0.14)"
        lit={C.lime}
      />

      <div className="mt-16 space-y-8">
        <div className="flex flex-wrap items-start gap-4">
          <span className="nb-sm flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[#0a0a0a] font-sora text-2xl font-extrabold text-white">1</span>
          <h3 className="font-sora text-4xl font-extrabold leading-[1.05] tracking-tight sm:text-6xl">
            <span className="strike-pink">traditional loyalty</span> begins when you <span className="text-[#FFD21E]">SPEND.</span>
          </h3>
        </div>
        <div className="flex flex-wrap items-start gap-4">
          <span className="nb-sm flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-[#C8FF37] font-sora text-2xl font-extrabold text-[#0a0a0a]">2</span>
          <div className="nb-lg w-full rounded-3xl bg-gradient-to-r from-[#FF2E88] to-[#A020F0] p-7 sm:p-9">
            <h3 className="font-sora text-4xl font-extrabold leading-[1.05] tracking-tight text-white sm:text-6xl">
              <span className="nb-sm inline-block rounded-lg bg-[#C8FF37] px-3 py-0.5 text-[#0a0a0a]">LYTs</span> begins when you ENGAGE.
            </h3>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* 17 — THE PROMISE */
export function ThePromise() {
  const chips = [
    ["✦ Discover.", C.pink, "#fff"],
    ["🌐 Engage.", C.yellow, "#0a0a0a"],
    ["💰 Earn LYTs.", C.lime, "#0a0a0a"],
    ["🛍️ Spend LYTs.", C.orange, "#fff"],
    ["🌱 Live More.", C.purple, "#fff"],
    ["💞 LYTIAN.", "#0a0a0a", C.lime],
  ] as const;
  return (
    <Section id="the-promise" variant="cream" size="full" width="wide" align="center">
      <div className="flex items-start justify-between">
        <Pill bg="#0a0a0a" text={C.yellow}>⚡ the promise</Pill>
        <Logo />
      </div>
      <h2 className="mt-8 font-sora text-6xl font-extrabold leading-[0.9] tracking-tight sm:text-7xl">
        the social currency
        <br />
        for real life.
      </h2>
      <div className="mt-8 flex flex-wrap gap-3">
        {chips.map(([t, bg, tc]) => (
          <Chip key={t} bg={bg} text={tc}>{t}</Chip>
        ))}
      </div>
      <div className="mt-10 flex flex-col items-start justify-between gap-6 sm:flex-row sm:items-center">
        <Chip bg={C.purple} text="#fff">
          👉 Earn. Spend. Live More. <span className="ml-1 text-[#FFD21E]">— the rest is just coupons.</span>
        </Chip>
        <span className="nb flex h-28 w-28 shrink-0 rotate-6 items-center justify-center rounded-full bg-[#C8FF37] text-center font-sora text-sm font-extrabold text-[#0a0a0a]">
          join the LYTIANS 🤝
        </span>
      </div>
    </Section>
  );
}
