import { Section, Pill, Card, Chip, Heading, Logo, Group, Reveal } from "./ui";
import { C } from "./palette";

/* 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">
      <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">
      <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">
      <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;
  return (
    <Section id="how-it-works" variant="cream">
      <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>
      <Group className="mt-8 grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-5">
        {cards.map(([e, t, s, bg, tc]) => (
          <Card key={t} group bg={bg} text={tc} className="relative p-4">
            <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">{e}</div>
            <div className="mt-4 font-sora text-lg font-extrabold">{t}</div>
            <div className="text-xs font-bold opacity-80">{s}</div>
          </Card>
        ))}
      </Group>
    </Section>
  );
}

/* 14 — OLD vs NEW */
export function OldVsNew() {
  return (
    <Section id="old-vs-new" variant="deep">
      <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>
      <Heading className="mt-1">
        <span className="text-[#FFD21E]">LYTs says</span> another.
      </Heading>
      <div className="mt-10 grid items-stretch gap-4 md:grid-cols-[1fr_auto_1fr]">
        <Card bg="#0a0a0a" text="#fff" className="p-6">
          <Pill bg={C.yellow} text="#0a0a0a">💻 TRADITIONAL LOYALTY</Pill>
          <div className="mt-4 font-sora text-3xl font-extrabold leading-tight text-[#FFD21E]">
            the old rule<br /><span className="text-white">spend first.</span><br /><span className="text-white">earn later.</span>
          </div>
          <div className="mt-4 text-sm font-bold text-white/70">value is created only when you buy. participation = invisible. 🫥</div>
        </Card>
        <div className="flex items-center justify-center">
          <span className="nb flex h-16 w-16 items-center justify-center rounded-full bg-[#FFD21E] font-sora text-xl font-extrabold text-[#0a0a0a]">VS</span>
        </div>
        <div className="nb-lg rounded-2xl bg-gradient-to-br from-[#FF2E88] to-[#A020F0] p-6">
          <Pill bg="#0a0a0a" text="#fff">✨ THE LYTS WAY</Pill>
          <div className="mt-4 font-sora text-3xl font-extrabold leading-tight text-white">
            the new rule<br />live first.<br />earn everywhere.
          </div>
          <div className="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 */
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;
  return (
    <Section id="the-vision" variant="deep">
      <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 sm:text-6xl md:text-7xl font-extrabold leading-[0.95] tracking-tight">
            world&apos;s largest <span className="text-[#A020F0]">social</span> currency ecosystem.
          </h2>
        </div>
        <div className="space-y-3">
          {items.map(([t, bg, tc], i) => (
            <Reveal key={t} delay={i * 0.09} y={16}>
              <div className="nb flex items-center gap-3 rounded-xl px-4 py-3 font-extrabold" style={{ background: bg, color: tc }}>
                <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#C8FF37] text-sm text-[#0a0a0a]">✓</span>
                {t}
              </div>
            </Reveal>
          ))}
        </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">
      <div className="mx-auto flex flex-col items-center text-center">
        <span className="nb flex h-20 w-20 items-center justify-center rounded-full bg-[#0a0a0a] font-sora text-sm font-extrabold text-[#FFD21E] ring-2 ring-[#FF2E88]">
          🌱 our belief
        </span>
      </div>
      <div className="mt-12 space-y-6">
        <div className="flex flex-wrap items-center gap-3">
          <span className="flex h-8 w-8 items-center justify-center rounded bg-[#0a0a0a] font-extrabold text-white ring-2 ring-white/20">1</span>
          <h3 className="font-sora text-4xl font-extrabold leading-tight sm:text-5xl">
            <span className="strike-pink">traditional loyalty</span> begins when you SPEND.
          </h3>
        </div>
        <div className="flex flex-wrap items-center gap-3">
          <span className="flex h-8 w-8 items-center justify-center rounded bg-[#C8FF37] font-extrabold text-[#0a0a0a]">2</span>
          <div className="nb-lg w-full rounded-2xl bg-gradient-to-r from-[#FF2E88] to-[#A020F0] p-6">
            <h3 className="font-sora text-4xl font-extrabold leading-tight text-white sm:text-5xl">
              <span className="nb-sm bg-[#C8FF37] px-2 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">
      <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>
  );
}
