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

/* 01 — INTRO / HERO */
export function Intro() {
  return (
    <Section id="intro" variant="deep">
      {/* giant watermark */}
      <span className="pointer-events-none absolute right-0 top-1/2 -z-0 -translate-y-1/2 select-none font-sora text-[28vw] font-extrabold leading-none text-white/5">
        LYTS
      </span>
      <div className="relative z-10">
        <Card bg="#fff" className="mb-8 w-fit px-6 py-4" rounded="rounded-2xl">
          <Logo />
        </Card>
        <div className="mt-8 space-y-1 font-bold text-[#FFD21E] sm:text-lg">
          <p>we built this for you.</p>
          <p>
            social currency is value earned for <em className="italic">participating</em> in life.
          </p>
          <p>a LYTIAN believes every meaningful interaction has value.</p>
        </div>
        <h1 className="mt-8 font-sora text-6xl font-extrabold leading-[0.9] tracking-tight text-white sm:text-7xl lg:text-8xl">
          social
          <br />
          currency
          <br />
          for real life.
        </h1>
        <div className="mt-8">
          <Chip bg="#0a0a0a" text="#fff">
            <span className="text-[#C8FF37]">&quot;earn. spend. live more.&quot;</span>
            <span className="ml-2 font-semibold text-white/80">
              a quiet belief that everyday moments matter.
            </span>
          </Chip>
        </div>
      </div>
      <div className="absolute right-8 top-24 hidden h-40 w-40 rotate-6 items-center justify-center rounded-full bg-[#FFD21E] text-center font-sora text-lg font-extrabold text-[#0a0a0a] nb lg:flex">
        <div>
          <div className="text-xs font-bold text-[#FF2E88]">psst</div>
          make everyday count.
        </div>
      </div>
    </Section>
  );
}

/* 02 — THE WHY */
export function TheWhy() {
  return (
    <Section id="the-why" variant="cream">
      <div className="flex flex-col gap-8">
        <Pill bg="#0a0a0a" text="#FFD21E">💌 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">⏳ 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">🎬 DISCOVER ON TIKTOK</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">👯 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">✨ REWARD PARTICIPATION</div>
              <div className="text-sm font-semibold text-black/70">recognition, not coupons</div>
            </Card>
          </div>
        </div>
      </div>
    </Section>
  );
}

/* 03 — THE PROBLEM */
export function TheProblem() {
  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">
      <Pill>⚡ 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>
      <Group className="mt-10 grid gap-5 md:grid-cols-3">
        {cards.map((c) => (
          <Card key={c.n} group bg={c.bg} text={c.tc} className="flex flex-col p-6">
            <div className="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}>✗ {i}</li>
              ))}
            </ul>
            <div className="mt-4 rounded-lg bg-[#0a0a0a] py-2 text-center text-sm font-extrabold text-[#FFD21E]">{c.foot}</div>
          </Card>
        ))}
      </Group>
      <div className="mt-6">
        <Chip bg={C.yellow}>❗ 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">⚡ 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">📺 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">{t}</div>
                  <div className="text-sm font-semibold text-black/60">{s}</div>
                </Card>
              ))}
            </div>
          </div>
          <div>
            <div className="font-sora text-2xl font-extrabold">✨ 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">{t}</div>
                  <div className="text-sm font-semibold text-white/80">{s}</div>
                </Card>
              ))}
            </div>
          </div>
        </div>
        <div className="mt-8">
          <Chip bg={C.yellow}>🔥 biggest miss in consumer tech right now: offline commerce still rewards only spending. that changes with LYTs.</Chip>
        </div>
      </div>
    </Section>
  );
}

/* 05 — MEET LYTs */
export function MeetLyts() {
  return (
    <Section id="lyts" variant="deep">
      <Pill bg={C.yellow} text="#0a0a0a">✦ introducing</Pill>
      <h2 className="mt-6 font-sora text-8xl font-extrabold tracking-tight text-white">LYTs.</h2>
      <Card bg="#fff" className="mt-6 max-w-3xl p-6">
        <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>
      </Card>
      <div className="mt-8 flex flex-wrap items-center gap-2">
        <Chip>walk 🚶</Chip>
        <Chip bg={C.yellow}>visit 📍</Chip>
        <Chip bg={C.lime}>friend 🤝</Chip>
        <Chip bg={C.orange} text="#fff">shop 🛍️</Chip>
        <Chip bg={C.purple} text="#fff">event 🎉</Chip>
        <span>→</span>
        <Chip bg="#0a0a0a" text={C.lime}>your LYTs balance</Chip>
        <span>→</span>
        <Chip bg={C.orange} text="#fff">spend</Chip>
        <span>→</span>
        <Chip bg={C.purple} text="#fff">live more</Chip>
      </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;
  return (
    <Section id="one-day" variant="deep">
      <Pill bg={C.lime} text="#0a0a0a">💚 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="mt-8 max-w-3xl space-y-3">
        {rows.map(([e, a, b, c], i) => (
          <Reveal key={a} delay={i * 0.08} y={18}>
            <div className="nb flex items-center gap-3 rounded-xl px-5 py-3 font-bold text-[#0a0a0a]" style={{ background: c }}>
              <span className="text-xl">{e}</span>
              <span>{a}</span>
              <span className="font-extrabold">{b}</span>
            </div>
          </Reveal>
        ))}
      </div>
      <Card bg="#fff" className="mt-6 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. 🤍</div>
      </Card>
    </Section>
  );
}

/* 07 — FEELINGS */
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", "#0a0a0a", C.lime],
  ] as const;
  return (
    <Section id="feelings" variant="cream">
      <Pill bg={C.purple} text="#fff">💗 why social currency</Pill>
      <Heading className="mt-6">
        people don&apos;t want points. they want <span className="text-[#FF2E88]">feelings.</span>
      </Heading>
      <Group className="mt-10 grid gap-4 sm:grid-cols-3 lg:grid-cols-5">
        {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-6 font-sora text-lg font-extrabold">{t}</div>
            <div className="text-xs font-bold opacity-80">{s}</div>
          </Card>
        ))}
      </Group>
      <Card bg={C.purple} text="#fff" className="mt-6 flex flex-col items-start gap-2 p-6 sm:flex-row sm:items-center sm:gap-6">
        <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>
      </Card>
    </Section>
  );
}

/* 08 — THE DIFFERENCE */
export function Difference() {
  return (
    <Section id="difference" variant="night">
      <Pill>⚡ the fundamental difference</Pill>
      <Heading className="mt-6 text-[#FFD21E]">
        loyalty starts at spend.
        <br />
        LYTs starts at engage.
      </Heading>
      <div className="mt-10 grid items-start gap-4 md:grid-cols-2">
        <div>
          <Pill bg={C.yellow} text="#0a0a0a">💻 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="nb rounded-lg bg-white px-4 py-2 text-center font-extrabold text-[#0a0a0a]">PURCHASE ↓</div>
            <div className="nb rounded-lg px-4 py-2 text-center font-extrabold text-[#0a0a0a]" style={{ background: C.yellow }}>EARN POINTS ↓</div>
            <div className="nb rounded-lg px-4 py-2 text-center font-extrabold text-white" style={{ background: C.orange }}>REDEEM ↓</div>
            <div className="font-extrabold text-[#C8FF37]">⏳ POINTS EXPIRE</div>
          </div>
          <div className="mt-4"><Chip bg={C.lime}>🔥 not a better coupon. a whole new currency. 🌱</Chip></div>
        </div>
        <div className="nb-lg rounded-2xl bg-gradient-to-br from-[#FF2E88] to-[#A020F0] p-5">
          <Pill bg={C.yellow} text="#0a0a0a">✨ 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="nb rounded-lg px-4 py-2 text-center font-extrabold" style={{ background: bg, color: tc }}>{t} {t !== "💞 LYTIAN" && "↓"}</div>
            ))}
          </div>
        </div>
      </div>
    </Section>
  );
}

/* 09 — THE LOOP */
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;
  return (
    <Section id="the-loop" variant="night">
      <Pill bg={C.lime} text="#0a0a0a">🚀 your 6-step loop</Pill>
      <Heading className="mt-6">
        six small moments.
        <br />
        one big life that <span className="text-[#FFD21E]">keeps going.</span>
      </Heading>
      <Group className="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-6">
        {cards.map(([n, t, s, bg, tc]) => (
          <Card key={n} group bg={bg} text={tc} className="p-4">
            <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">{s}</div>
          </Card>
        ))}
      </Group>
      <div className="mt-6"><Chip bg={C.purple} text="#fff">♻️ every interaction creates value. every LYTIAN invites another.</Chip></div>
    </Section>
  );
}
