import Image from "next/image";

const nav = [
  { label: "ENTER ALIV", href: "#enter" },
  { label: "ACCESS", href: "#access" },
  { label: "COME ALIV", href: "#come" },
  { label: "VIP SOCIETY", href: "#vip" },
  { label: "DIR SHOP", href: "#shop" },
];

const experience = [
  {
    title: "FOOD VILLAGE",
    desc: "Curated cuisine from around the world.",
    icon: "🍽️",
  },
  {
    title: "CARNIVAL RIDES",
    desc: "Thrilling rides and spectacular views.",
    icon: "🎡",
  },
  {
    title: "CARNIVAL GAMES",
    desc: "Classic games and fun challenges.",
    icon: "🎯",
  },
  {
    title: "IMMERSIVE ACTIVATIONS",
    desc: "Interactive moments & brand experiences.",
    icon: "🔥",
    highlight: true,
  },
  {
    title: "PARTY AREA",
    desc: "Epic DJ sets and all-night celebrations.",
    icon: "🕺🏽",
  },
];

export default function Page() {
  return (
    <div className="min-h-screen bg-black text-white">
      {/* Ambient background */}
      <div className="pointer-events-none fixed inset-0 -z-10 overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(1200px_600px_at_50%_-10%,rgba(255,190,90,0.18),transparent_65%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(900px_500px_at_10%_30%,rgba(255,120,0,0.12),transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(900px_500px_at_90%_55%,rgba(255,170,60,0.10),transparent_60%)]" />
        <div className="absolute inset-0 opacity-[0.18] [background-image:radial-gradient(rgba(255,200,120,0.22)_1px,transparent_1px)] [background-size:22px_22px]" />
        <div className="absolute inset-0 bg-gradient-to-b from-black via-black/70 to-black" />
      </div>

      <Header />

      <main className="mx-auto max-w-6xl px-4">
        <Hero />
        <Experience />
        <VIP />
        <Footer />
      </main>
    </div>
  );
}

function Header() {
  return (
    <header className="sticky top-0 z-50 border-b border-white/10 bg-black/60 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <a href="#" className="flex items-center gap-3">
          <div className="h-8 w-8 rounded-xl bg-gradient-to-br from-amber-200 to-orange-500 shadow-[0_0_25px_rgba(255,170,60,0.35)]" />
          <div className="leading-tight">
            <div className="text-sm font-semibold tracking-[0.18em]">ALIVFEST</div>
            <div className="text-[11px] text-white/60 tracking-[0.18em]">ACCRA • DECEMBER SEASON</div>
          </div>
        </a>

        <nav className="hidden md:flex items-center gap-6">
          {nav.map((n) => (
            <a
              key={n.href}
              href={n.href}
              className="text-xs tracking-[0.24em] text-white/70 hover:text-white transition"
            >
              {n.label}
            </a>
          ))}
        </nav>

        <div className="flex items-center gap-2">
          <a
            href="#tickets"
            className="rounded-2xl border border-amber-200/30 px-4 py-2 text-xs tracking-[0.22em] text-amber-100 hover:bg-amber-200/10 transition"
          >
            TICKETS
          </a>
          <a
            href="#vip"
            className="rounded-2xl bg-gradient-to-r from-amber-200 to-orange-500 px-4 py-2 text-xs font-semibold tracking-[0.22em] text-black hover:opacity-90 transition shadow-[0_0_30px_rgba(255,170,60,0.35)]"
          >
            VIP SOCIETY
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="pt-10 md:pt-14">
      <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5">
        {/* top glow line */}
        <div className="absolute inset-x-0 top-0 h-[2px] bg-gradient-to-r from-transparent via-amber-200/70 to-transparent" />

        <div className="px-5 py-10 md:px-10 md:py-14">
          {/* Logo Hero */}
          <div className="relative mx-auto max-w-5xl">
            <div className="absolute -inset-6 rounded-[40px] bg-[radial-gradient(circle_at_50%_30%,rgba(255,170,60,0.22),transparent_60%)] blur-2xl" />

            {/* YOUR LOGO IMAGE */}
            <div className="relative w-full overflow-hidden rounded-3xl border border-white/10 bg-black">
              <Image
                src="/alivfest-logo.jpg"
                alt="ALIVFEST Logo"
                width={1600}
                height={900}
                priority
                className="h-auto w-full object-cover"
              />
            </div>

            {/* Date line like your screenshot */}
            <div className="mt-6 flex flex-wrap items-center justify-center gap-3 text-center">
              <span className="text-xs tracking-[0.30em] text-white/70">
                DECEMBER 17 — JANUARY 4
              </span>
              <Dot />
              <span className="text-xs tracking-[0.30em] text-white/70">
                MULTIPLE STAGES
              </span>
              <Dot />
              <span className="text-xs tracking-[0.30em] text-white/70">
                CURATED VILLAGES
              </span>
              <Dot />
              <span className="text-xs tracking-[0.30em] text-white/70">
                VIP SOCIETY
              </span>
            </div>

            {/* Buttons */}
            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
              <a
                id="tickets"
                href="#tickets"
                className="w-full sm:w-auto rounded-2xl bg-gradient-to-r from-amber-200 to-orange-500 px-7 py-3 text-sm font-semibold tracking-[0.20em] text-black shadow-[0_0_35px_rgba(255,170,60,0.38)] hover:opacity-90 transition"
              >
                GET TICKETS
              </a>
              <a
                href="#enter"
                className="w-full sm:w-auto rounded-2xl border border-amber-200/30 px-7 py-3 text-sm tracking-[0.20em] text-amber-100 hover:bg-amber-200/10 transition"
              >
                EXPLORE THE EXPERIENCE
              </a>
            </div>
          </div>
        </div>

        {/* bottom glow line */}
        <div className="absolute inset-x-0 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-amber-200/40 to-transparent" />
      </div>
    </section>
  );
}

function Dot() {
  return <span className="h-1 w-1 rounded-full bg-amber-200/60" />;
}

function Experience() {
  return (
    <section id="enter" className="py-14 md:py-16">
      <div className="text-center">
        <h2 className="font-serif text-4xl md:text-5xl tracking-tight">
          The Experience<span className="text-amber-200">.</span>
        </h2>
        <p className="mt-3 text-white/65 tracking-wide">
          Curated moments from day to night.
        </p>
      </div>

      <div className="mt-10 grid gap-4 md:grid-cols-5">
        {experience.map((x) => (
          <div
            key={x.title}
            className={[
              "relative rounded-3xl border bg-white/5 p-5 text-center backdrop-blur",
              x.highlight
                ? "border-amber-200/40 shadow-[0_0_50px_rgba(255,170,60,0.18)]"
                : "border-white/10",
            ].join(" ")}
          >
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-black/40 text-2xl">
              {x.icon}
            </div>
            <div className="mt-4 text-xs font-semibold tracking-[0.22em] text-amber-100">
              {x.title}
            </div>
            <div className="mt-2 text-sm text-white/60">{x.desc}</div>

            {x.highlight && (
              <div className="pointer-events-none absolute inset-0 rounded-3xl bg-[radial-gradient(circle_at_50%_20%,rgba(255,170,60,0.22),transparent_55%)]" />
            )}
          </div>
        ))}
      </div>

      {/* subtle divider glow */}
      <div className="mt-14 h-px w-full bg-gradient-to-r from-transparent via-amber-200/30 to-transparent" />
    </section>
  );
}

function VIP() {
  return (
    <section id="vip" className="pb-20">
      <div className="grid gap-6 md:grid-cols-2 md:items-center">
        <div>
          <h3 className="text-3xl md:text-4xl font-semibold tracking-tight">
            VIP Society<span className="text-amber-200">.</span>
          </h3>
          <p className="mt-3 text-white/65">
            Premium access. Fast entry. Elevated lounge energy. The kind of night you
            post about for weeks.
          </p>

          <ul className="mt-6 space-y-3 text-white/70">
            <li>• VIP entry lane + priority security</li>
            <li>• Lounge seating + premium viewing</li>
            <li>• Curated bar & bottle service options</li>
            <li>• Photo moments + brand activations</li>
          </ul>

          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <a
              href="#tickets"
              className="rounded-2xl bg-gradient-to-r from-amber-200 to-orange-500 px-7 py-3 text-sm font-semibold tracking-[0.20em] text-black shadow-[0_0_35px_rgba(255,170,60,0.35)] hover:opacity-90 transition text-center"
            >
              REQUEST VIP
            </a>
            <a
              href="#access"
              className="rounded-2xl border border-amber-200/30 px-7 py-3 text-sm tracking-[0.20em] text-amber-100 hover:bg-amber-200/10 transition text-center"
            >
              SPONSOR / PARTNER
            </a>
          </div>
        </div>

        <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-white/5 p-6">
          <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(255,170,60,0.18),transparent_55%)]" />
          <div className="relative">
            <div className="text-xs tracking-[0.30em] text-white/70">COMING SOON</div>
            <div className="mt-3 text-2xl font-semibold">Ticket Drops + Lineup Announcements</div>
            <p className="mt-2 text-white/60">
              Add your email capture here (Mailchimp/ConvertKit later). For now, this is a premium waitlist block.
            </p>

            <form className="mt-6 flex flex-col gap-3 sm:flex-row">
              <input
                className="w-full rounded-2xl border border-white/10 bg-black/40 px-4 py-3 text-sm outline-none placeholder:text-white/35 focus:border-amber-200/40"
                placeholder="Email address"
                type="email"
              />
              <button
                type="button"
                className="rounded-2xl bg-gradient-to-r from-amber-200 to-orange-500 px-6 py-3 text-sm font-semibold tracking-[0.18em] text-black hover:opacity-90 transition"
              >
                JOIN WAITLIST
              </button>
            </form>

            <div className="mt-6 text-xs text-white/45">
              By joining, you agree to receive ALIVFEST updates.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="border-t border-white/10 py-10">
      <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
        <div>
          <div className="text-sm font-semibold tracking-[0.20em]">ALIVFEST</div>
          <div className="mt-1 text-xs text-white/50 tracking-[0.18em]">
            © {new Date().getFullYear()} • ACCRA • DECEMBER SEASON
          </div>
        </div>
        <div className="flex flex-wrap gap-5 text-xs tracking-[0.22em] text-white/60">
          <a className="hover:text-white" href="#enter">ENTER ALIV</a>
          <a className="hover:text-white" href="#vip">VIP SOCIETY</a>
          <a className="hover:text-white" href="#tickets">TICKETS</a>
        </div>
      </div>
    </footer>
  );
}