export default function MeatyoriteComingSoon() {
  const foods = ["Tacos", "Nachos", "Ramen", "Baked Potatoes", "Pizza", "Mac & Cheese"];
  const features = [
    {
      title: "Real smoked meat",
      text: "Craft BBQ meat bites made for real flavor, real convenience, and real cravings.",
    },
    {
      title: "Ready when you are",
      text: "Snack them straight from the pack or drop them onto your next meal for instant impact.",
    },
    {
      title: "Built for anywhere",
      text: "Convenience stores, grocery shelves, tailgates, camping trips, game days, and fast-paced lives.",
    },
  ];

  return (
    <div className="min-h-screen bg-black text-white overflow-x-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,104,0,0.25),transparent_35%),radial-gradient(circle_at_70%_30%,rgba(255,60,0,0.18),transparent_25%),linear-gradient(to_bottom,#090909,rgba(20,20,20,0.96),#000000)]" />
        <div className="absolute inset-0 opacity-25 bg-[url('https://images.unsplash.com/photo-1517093157656-b9eccef91cb1?auto=format&fit=crop&w=1600&q=80')] bg-cover bg-center mix-blend-overlay" />
        <div className="absolute -top-24 left-1/2 h-72 w-72 -translate-x-1/2 rounded-full bg-orange-500/30 blur-3xl" />
        <div className="absolute top-24 right-10 h-56 w-56 rounded-full bg-red-600/20 blur-3xl" />
        <div className="absolute bottom-24 left-10 h-64 w-64 rounded-full bg-orange-400/10 blur-3xl" />
      </div>

      <main className="relative z-10">
        <section className="mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 py-16 md:px-10">
          <div className="grid items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
            <div>
              <div className="mb-5 inline-flex items-center rounded-full border border-orange-500/40 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-[0.28em] text-orange-300 shadow-[0_0_30px_rgba(255,98,0,0.12)]">
                From the pit to orbit
              </div>

              <h1 className="max-w-4xl text-5xl font-black uppercase leading-[0.95] tracking-tight text-white sm:text-6xl md:text-7xl lg:text-8xl">
                MEATYORITE
              </h1>

              <div className="mt-4 h-1.5 w-40 rounded-full bg-gradient-to-r from-orange-500 via-red-500 to-yellow-300" />

              <p className="mt-6 max-w-2xl text-lg leading-8 text-zinc-300 md:text-xl">
                The smoked meat snack built for flavor impact. Craft BBQ meat bites that hit meals hard and fuel life fast.
              </p>

              <div className="mt-8 space-y-3 text-xl font-bold uppercase tracking-wide text-orange-200 md:text-2xl">
                <div>Flavor Impact</div>
                <div>Add Meat Anytime In No Time</div>
                <div>Real Smoke. Real Meat.</div>
              </div>

              <p className="mt-8 max-w-2xl text-base leading-7 text-zinc-400 md:text-lg">
                MEATYORITE is a new category of ready-to-eat smoked meat bites made to be eaten on the go or dropped onto tacos, nachos, eggs, ramen, rice bowls, pizza, and more. Bold, smoky, versatile, and unforgettable on the shelf.
              </p>

              <div className="mt-10 flex flex-wrap gap-4">
                <a
                  href="#notify"
                  className="rounded-2xl border border-orange-400 bg-gradient-to-r from-orange-500 via-red-500 to-orange-400 px-7 py-4 text-sm font-extrabold uppercase tracking-[0.2em] text-white shadow-[0_10px_40px_rgba(255,95,31,0.35)] transition hover:scale-[1.02]"
                >
                  Get Launch Updates
                </a>
                <a
                  href="#product"
                  className="rounded-2xl border border-white/15 bg-white/5 px-7 py-4 text-sm font-bold uppercase tracking-[0.2em] text-zinc-200 transition hover:bg-white/10"
                >
                  See The Concept
                </a>
              </div>
            </div>

            <div className="relative mx-auto w-full max-w-xl">
              <div className="absolute inset-0 rounded-[2rem] bg-gradient-to-br from-orange-500/30 via-red-500/20 to-transparent blur-2xl" />
              <div className="relative overflow-hidden rounded-[2rem] border border-orange-500/20 bg-zinc-950/80 p-6 shadow-[0_20px_80px_rgba(0,0,0,0.55)] backdrop-blur">
                <div className="mb-5 flex items-center justify-between">
                  <div>
                    <div className="text-xs font-semibold uppercase tracking-[0.3em] text-orange-300">Coming Soon</div>
                    <div className="mt-2 text-2xl font-black uppercase text-white">Meteor Flavor Strike</div>
                  </div>
                  <div className="rounded-full border border-orange-400/30 bg-orange-500/10 px-4 py-2 text-xs font-bold uppercase tracking-[0.2em] text-orange-200">
                    Shelf-Stable
                  </div>
                </div>

                <div className="relative flex aspect-square items-center justify-center overflow-hidden rounded-[1.75rem] border border-white/10 bg-[radial-gradient(circle_at_center,rgba(255,110,20,0.22),rgba(0,0,0,0.25)_45%,rgba(0,0,0,0.95))]">
                  <div className="absolute inset-0 opacity-40 bg-[radial-gradient(circle_at_center,rgba(255,255,255,0.2),transparent_30%),radial-gradient(circle_at_30%_30%,rgba(255,120,0,0.22),transparent_18%),radial-gradient(circle_at_70%_60%,rgba(255,40,0,0.18),transparent_24%)]" />
                  <div className="absolute top-12 right-10 h-24 w-24 rounded-full bg-orange-500/30 blur-2xl" />
                  <div className="absolute left-10 bottom-16 h-20 w-20 rounded-full bg-red-500/25 blur-2xl" />

                  <div className="relative flex h-60 w-60 items-center justify-center rounded-full border border-orange-400/20 bg-gradient-to-br from-orange-600 via-red-600 to-zinc-900 shadow-[0_0_90px_rgba(255,98,0,0.45)]">
                    <div className="absolute inset-3 rounded-full border border-yellow-300/10" />
                    <div className="absolute -left-10 top-20 h-5 w-28 rotate-[-20deg] rounded-full bg-orange-400/60 blur-xl" />
                    <div className="absolute right-[-1.5rem] top-10 h-4 w-24 rotate-[30deg] rounded-full bg-red-400/60 blur-xl" />
                    <div className="grid grid-cols-4 gap-2 p-6">
                      {Array.from({ length: 12 }).map((_, i) => (
                        <div
                          key={i}
                          className="h-10 w-10 rounded-md border border-black/10 bg-gradient-to-br from-amber-500 via-orange-700 to-stone-900 shadow-[inset_0_1px_0_rgba(255,255,255,0.15),0_8px_16px_rgba(0,0,0,0.35)]"
                        />
                      ))}
                    </div>
                  </div>
                </div>

                <div className="mt-6 grid gap-3 sm:grid-cols-2">
                  <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">Core product</div>
                    <div className="mt-2 text-lg font-black uppercase text-white">Smoked Meat Bites</div>
                    <p className="mt-2 text-sm leading-6 text-zinc-400">
                      Tender, smoky pork shoulder cubes and future flavor drops built for snacking or adding to meals.
                    </p>
                  </div>
                  <div className="rounded-2xl border border-white/10 bg-white/5 p-4">
                    <div className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-300">Brand promise</div>
                    <div className="mt-2 text-lg font-black uppercase text-white">Add meat to anything</div>
                    <p className="mt-2 text-sm leading-6 text-zinc-400">
                      Turn simple food into a bold BBQ experience in seconds.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="product" className="mx-auto max-w-7xl px-6 pb-12 md:px-10">
          <div className="rounded-[2rem] border border-white/10 bg-white/[0.03] p-8 shadow-[0_10px_60px_rgba(0,0,0,0.3)] backdrop-blur md:p-10">
            <div className="grid gap-8 lg:grid-cols-[0.9fr_1.1fr] lg:gap-12">
              <div>
                <div className="text-sm font-semibold uppercase tracking-[0.28em] text-orange-300">What is MEATYORITE?</div>
                <h2 className="mt-3 text-3xl font-black uppercase leading-tight text-white md:text-5xl">
                  A meat meteor strike for everyday meals
                </h2>
                <p className="mt-5 max-w-xl text-base leading-7 text-zinc-300 md:text-lg">
                  MEATYORITE is built around one unforgettable idea: a meteor made of delicious smoked meat cubes crashing into food and creating an explosion of flavor. It is fast protein, real BBQ craft, and convenience-store energy in one bold format.
                </p>
              </div>

              <div className="grid gap-4 sm:grid-cols-3">
                {features.map((feature) => (
                  <div
                    key={feature.title}
                    className="rounded-[1.5rem] border border-orange-500/15 bg-zinc-950/70 p-5 shadow-[0_8px_30px_rgba(0,0,0,0.25)]"
                  >
                    <div className="text-lg font-black uppercase text-white">{feature.title}</div>
                    <p className="mt-3 text-sm leading-6 text-zinc-400">{feature.text}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-12 md:px-10 md:py-20">
          <div className="grid gap-10 lg:grid-cols-[0.95fr_1.05fr] lg:items-center">
            <div>
              <div className="text-sm font-semibold uppercase tracking-[0.28em] text-orange-300">Flavor targets</div>
              <h3 className="mt-3 text-3xl font-black uppercase text-white md:text-5xl">
                Drop it on everything
              </h3>
              <p className="mt-5 max-w-xl text-base leading-7 text-zinc-300 md:text-lg">
                Built for quick meals, late-night cravings, game days, lunch upgrades, road trips, and everyday wins.
              </p>
              <div className="mt-8 flex flex-wrap gap-3">
                {foods.map((food) => (
                  <span
                    key={food}
                    className="rounded-full border border-orange-400/20 bg-orange-500/10 px-4 py-2 text-sm font-bold uppercase tracking-[0.16em] text-orange-100"
                  >
                    {food}
                  </span>
                ))}
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {[
                {
                  title: 'Craft BBQ energy',
                  text: 'Black, ember-red, and fire-orange visuals with smoky depth built to jump off the shelf.',
                },
                {
                  title: 'Impulse buy appeal',
                  text: 'Fast, bold, dramatic packaging designed for c-stores, grocery snack aisles, and wholesale retail.',
                },
                {
                  title: 'Protein with personality',
                  text: 'Not another boring meat snack. This is a flavor weapon with a story people remember.',
                },
                {
                  title: 'Coming soon',
                  text: 'We are building the next bold category in smoked meat snacks. Follow the launch and be first to know.',
                },
              ].map((item) => (
                <div
                  key={item.title}
                  className="rounded-[1.5rem] border border-white/10 bg-white/[0.04] p-6"
                >
                  <div className="text-lg font-black uppercase text-white">{item.title}</div>
                  <p className="mt-3 text-sm leading-6 text-zinc-400">{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="notify" className="mx-auto max-w-5xl px-6 pb-20 md:px-10 md:pb-28">
          <div className="relative overflow-hidden rounded-[2rem] border border-orange-500/20 bg-gradient-to-br from-zinc-950 via-black to-zinc-900 p-8 shadow-[0_20px_80px_rgba(0,0,0,0.55)] md:p-12">
            <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,110,20,0.25),transparent_28%),radial-gradient(circle_at_bottom_left,rgba(255,40,0,0.18),transparent_25%)]" />
            <div className="relative z-10 text-center">
              <div className="text-sm font-semibold uppercase tracking-[0.32em] text-orange-300">Coming soon</div>
              <h4 className="mt-4 text-3xl font-black uppercase text-white md:text-5xl">
                Be first when the meteor lands
              </h4>
              <p className="mx-auto mt-5 max-w-2xl text-base leading-7 text-zinc-300 md:text-lg">
                MEATYORITE is gearing up for launch. Follow the brand, grab early updates, and be ready for the first flavor strike.
              </p>

              <form className="mx-auto mt-8 flex max-w-2xl flex-col gap-4 sm:flex-row">
                <input
                  type="email"
                  placeholder="Enter your email"
                  className="h-14 flex-1 rounded-2xl border border-white/10 bg-white/5 px-5 text-base text-white placeholder:text-zinc-500 outline-none ring-0 transition focus:border-orange-400"
                />
                <button
                  type="submit"
                  className="h-14 rounded-2xl bg-gradient-to-r from-orange-500 via-red-500 to-orange-400 px-8 text-sm font-extrabold uppercase tracking-[0.2em] text-white shadow-[0_10px_40px_rgba(255,95,31,0.35)] transition hover:scale-[1.02]"
                >
                  Notify Me
                </button>
              </form>

              <div className="mt-5 text-xs uppercase tracking-[0.22em] text-zinc-500">
                Flavor Impact • Add Meat Anytime • Real Smoke. Real Meat.
              </div>
            </div>
          </div>
        </section>
      </main>
    </div>
  );
}