import { Link } from "@tanstack/react-router";
import { ArrowRight, Play, Sparkles, Tv, Volume2, Zap } from "lucide-react";

// Inspired by vibe.co — vibrant CTV-style gradients, big play hero, cinematic feel
export function ThemeVibe() {
  return (
    <div className="min-h-dvh bg-[#0a0420] text-white overflow-hidden">
      <nav className="sticky top-0 z-50 backdrop-blur-xl bg-[#0a0420]/60 border-b border-white/5">
        <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6">
          <div className="flex items-center gap-2">
            <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-fuchsia-500 via-orange-400 to-yellow-300" />
            <span className="font-bold tracking-tight">
              VotersAlert<span className="text-fuchsia-300">.live</span>
            </span>
          </div>
          <div className="flex items-center gap-2">
            <Link to="/login" className="text-sm text-white/80 hover:text-white px-3">
              Sign in
            </Link>
            <Link
              to="/register"
              className="rounded-full bg-white text-[#0a0420] text-sm font-bold px-5 py-2 hover:bg-white/90"
            >
              Launch a campaign
            </Link>
          </div>
        </div>
      </nav>

      <section className="relative px-4 sm:px-6 pt-20 pb-32">
        <div className="absolute -top-32 -left-32 h-96 w-96 rounded-full bg-fuchsia-600/40 blur-3xl" />
        <div className="absolute -top-20 right-0 h-[28rem] w-[28rem] rounded-full bg-orange-500/30 blur-3xl" />
        <div className="absolute bottom-0 left-1/3 h-72 w-72 rounded-full bg-yellow-300/20 blur-3xl" />
        <div className="relative mx-auto max-w-6xl text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 backdrop-blur-xl px-4 py-1.5 text-xs font-semibold">
            <Sparkles className="h-3.5 w-3.5 text-yellow-300" /> The voter outreach platform built
            for the streaming era
          </span>
          <h1 className="mt-8 text-5xl sm:text-8xl font-black tracking-tighter leading-[0.95]">
            Cut through.
            <br />
            <span className="bg-gradient-to-r from-fuchsia-400 via-orange-300 to-yellow-200 bg-clip-text text-transparent">
              Move millions.
            </span>
          </h1>
          <p className="mx-auto mt-8 max-w-2xl text-lg text-white/70">
            Run cinematic, cross-channel political campaigns powered by AI — from connected voice
            and video to WhatsApp, SMS and social.
          </p>
          <div className="mt-10 flex flex-wrap items-center justify-center gap-3">
            <Link
              to="/register"
              className="inline-flex items-center gap-2 rounded-full bg-white text-[#0a0420] font-bold px-7 py-3.5 hover:bg-white/90"
            >
              <Play className="h-4 w-4 fill-current" /> Launch a campaign
            </Link>
            <Link
              to="/login"
              className="inline-flex items-center gap-2 rounded-full border border-white/20 px-7 py-3.5 font-semibold hover:bg-white/10"
            >
              Sign in
            </Link>
          </div>

          <div className="relative mt-20 mx-auto max-w-4xl aspect-video rounded-3xl bg-gradient-to-br from-fuchsia-500 via-orange-400 to-yellow-300 p-1">
            <div className="h-full w-full rounded-[22px] bg-[#0a0420] grid place-items-center">
              <div className="h-20 w-20 rounded-full bg-white/10 backdrop-blur grid place-items-center border border-white/20">
                <Play className="h-8 w-8 fill-white text-white" />
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="px-4 sm:px-6 py-24 border-t border-white/5">
        <div className="mx-auto max-w-6xl grid lg:grid-cols-3 gap-6">
          {[
            {
              icon: Tv,
              title: "Cinematic reach",
              body: "Voter-grade creative across voice broadcasts, video and social.",
            },
            {
              icon: Zap,
              title: "Activate in minutes",
              body: "Launch a national multi-channel campaign before your morning coffee.",
            },
            {
              icon: Volume2,
              title: "Voices that vote",
              body: "Hyper-local audio in English, Hausa, Yoruba, Igbo and Pidgin.",
            },
          ].map((f) => (
            <div
              key={f.title}
              className="rounded-3xl border border-white/10 bg-white/[0.03] p-8 hover:bg-white/[0.06] transition-colors"
            >
              <div className="h-12 w-12 rounded-2xl bg-gradient-to-br from-fuchsia-500 to-orange-400 grid place-items-center">
                <f.icon className="h-6 w-6" />
              </div>
              <h3 className="mt-6 text-2xl font-bold">{f.title}</h3>
              <p className="mt-3 text-white/70">{f.body}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="px-4 sm:px-6 py-28 text-center">
        <div className="mx-auto max-w-3xl">
          <h2 className="text-4xl sm:text-6xl font-black tracking-tight">
            Your next breakthrough is one{" "}
            <span className="bg-gradient-to-r from-fuchsia-400 to-yellow-200 bg-clip-text text-transparent">
              campaign
            </span>{" "}
            away.
          </h2>
          <Link
            to="/register"
            className="mt-10 inline-flex items-center gap-2 rounded-full bg-gradient-to-r from-fuchsia-500 via-orange-400 to-yellow-300 text-[#0a0420] font-bold px-10 py-4 text-lg"
          >
            Get started <ArrowRight className="h-5 w-5" />
          </Link>
        </div>
      </section>

      <footer className="border-t border-white/5 px-4 sm:px-6 py-10 text-xs text-white/50">
        <div className="mx-auto max-w-6xl flex items-center justify-between">
          <span>VotersAlert.live</span>
          <span>&copy; {new Date().getFullYear()} VotersAlert</span>
        </div>
      </footer>
    </div>
  );
}