export default function BlockFallLandingPage() {
  const playStoreUrl = "https://play.google.com/store/apps/details?id=com.starsrenderblam.blockfall_game";

  const features = [
    {
      title: "Fast-Paced Gameplay",
      text: "A quick, satisfying block puzzle loop built around timing, focus, and smart moves.",
      icon: "⚡",
    },
    {
      title: "Logic + Reflexes",
      text: "React to falling blocks while planning ahead to clear lines efficiently.",
      icon: "🧠",
    },
    {
      title: "Easy to Start",
      text: "Simple mechanics make the game approachable from the first tap.",
      icon: "🎮",
    },
    {
      title: "Strategic Depth",
      text: "As speed increases, every move matters and every decision becomes more rewarding.",
      icon: "📈",
    },
  ];

  const steps = [
    "Watch the falling blocks and stay ready.",
    "Place and align pieces with speed and precision.",
    "Clear lines to keep the board under control.",
    "Push your focus and strategy further with every round.",
  ];

  return (
    <div className="min-h-screen bg-neutral-950 text-white">
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(59,130,246,0.25),transparent_35%),radial-gradient(circle_at_80%_20%,rgba(168,85,247,0.18),transparent_28%),linear-gradient(180deg,#09090b_0%,#0f172a_48%,#09090b_100%)]" />
        <div className="relative mx-auto max-w-7xl px-6 py-16 md:px-10 md:py-24">
          <div className="grid items-center gap-10 lg:grid-cols-2">
            <div>
              <div className="mb-4 inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-sm text-white/80 backdrop-blur">
                Casual Puzzle Game • Android
              </div>
              <h1 className="max-w-2xl text-4xl font-black leading-tight tracking-tight sm:text-5xl md:text-6xl">
                Master the fall.
                <span className="block text-blue-400">Clear the board in BlockFall.</span>
              </h1>
              <p className="mt-5 max-w-xl text-base leading-7 text-white/75 sm:text-lg">
                BlockFall is a fast-paced puzzle experience built around logic, timing, and clean decision-making.
                Stay sharp, react quickly, and turn every falling block into your next perfect line clear.
              </p>

              <div className="mt-8 flex flex-wrap gap-4">
                <a
                  href={playStoreUrl}
                  target="_blank"
                  rel="noreferrer"
                  className="rounded-2xl bg-blue-500 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-blue-500/25 transition hover:scale-[1.02] hover:bg-blue-400"
                >
                  Get it on Google Play
                </a>
                <a
                  href="#features"
                  className="rounded-2xl border border-white/15 bg-white/5 px-6 py-3 text-base font-semibold text-white/90 backdrop-blur transition hover:bg-white/10"
                >
                  Explore Features
                </a>
              </div>

              <div className="mt-8 flex flex-wrap gap-3 text-sm text-white/70">
                <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">PEGI 3</span>
                <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">1K+ Downloads</span>
                <span className="rounded-full border border-white/10 bg-white/5 px-3 py-1.5">Updated Feb 2026</span>
              </div>
            </div>

            <div className="relative mx-auto w-full max-w-md">
              <div className="absolute -inset-6 rounded-[2rem] bg-blue-500/10 blur-3xl" />
              <div className="relative rounded-[2rem] border border-white/10 bg-white/5 p-4 shadow-2xl backdrop-blur-xl">
                <div className="rounded-[1.6rem] border border-white/10 bg-neutral-900 p-4">
                  <div className="mb-4 flex items-center justify-between">
                    <div>
                      <div className="text-sm text-white/50">Now Playing</div>
                      <div className="text-2xl font-bold">BlockFall</div>
                    </div>
                    <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-500 text-2xl shadow-lg shadow-blue-500/30">
                      🧩
                    </div>
                  </div>

                  <div className="grid grid-cols-6 gap-2 rounded-2xl bg-neutral-950 p-3">
                    {[...Array(36)].map((_, i) => {
                      const active = [1, 2, 7, 8, 14, 15, 16, 22, 28, 29, 34].includes(i);
                      return (
                        <div
                          key={i}
                          className={`aspect-square rounded-xl border ${
                            active
                              ? "border-blue-400/40 bg-blue-400/30 shadow-inner shadow-blue-400/20"
                              : "border-white/5 bg-white/[0.04]"
                          }`}
                        />
                      );
                    })}
                  </div>

                  <div className="mt-4 grid grid-cols-3 gap-3 text-center text-sm">
                    <div className="rounded-2xl bg-white/5 p-3">
                      <div className="text-white/50">Mode</div>
                      <div className="mt-1 font-semibold">Casual</div>
                    </div>
                    <div className="rounded-2xl bg-white/5 p-3">
                      <div className="text-white/50">Focus</div>
                      <div className="mt-1 font-semibold">Timing</div>
                    </div>
                    <div className="rounded-2xl bg-white/5 p-3">
                      <div className="text-white/50">Style</div>
                      <div className="mt-1 font-semibold">Puzzle</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section id="features" className="mx-auto max-w-7xl px-6 py-14 md:px-10 md:py-20">
        <div className="mb-10 max-w-2xl">
          <div className="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-400">Why players like it</div>
          <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Simple to understand. Hard to put down.</h2>
          <p className="mt-4 text-white/70">
            Built for players who enjoy quick decision-making, satisfying clears, and a gameplay loop that stays engaging.
          </p>
        </div>

        <div className="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
          {features.map((feature) => (
            <div key={feature.title} className="rounded-3xl border border-white/10 bg-white/[0.04] p-6 shadow-xl shadow-black/20">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-500/15 text-2xl">
                {feature.icon}
              </div>
              <h3 className="text-xl font-bold">{feature.title}</h3>
              <p className="mt-3 leading-7 text-white/70">{feature.text}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-6 md:px-10 md:py-10">
        <div className="grid gap-6 lg:grid-cols-[1.2fr_0.8fr]">
          <div className="rounded-[2rem] border border-white/10 bg-gradient-to-br from-blue-500/10 via-white/[0.03] to-purple-500/10 p-7 md:p-10">
            <div className="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-400">Gameplay loop</div>
            <h2 className="text-3xl font-black tracking-tight sm:text-4xl">How BlockFall works</h2>
            <div className="mt-8 space-y-4">
              {steps.map((step, index) => (
                <div key={step} className="flex items-start gap-4 rounded-2xl border border-white/8 bg-black/20 p-4">
                  <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-500 font-bold text-white">
                    {index + 1}
                  </div>
                  <p className="pt-1 text-white/80">{step}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="rounded-[2rem] border border-white/10 bg-white/[0.04] p-7 md:p-8">
            <div className="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-400">Player confidence</div>
            <h2 className="text-2xl font-black tracking-tight">Privacy and safety</h2>
            <div className="mt-6 space-y-4 text-white/75">
              <div className="rounded-2xl border border-emerald-400/20 bg-emerald-400/10 p-4">
                <div className="font-semibold text-white">No data collected</div>
                <p className="mt-1 text-sm leading-6 text-white/70">The store listing states that the game does not collect user data.</p>
              </div>
              <div className="rounded-2xl border border-emerald-400/20 bg-emerald-400/10 p-4">
                <div className="font-semibold text-white">No third-party data sharing</div>
                <p className="mt-1 text-sm leading-6 text-white/70">The store listing also states that no data is shared with third parties.</p>
              </div>
              <div className="rounded-2xl border border-white/10 bg-black/20 p-4">
                <div className="font-semibold text-white">Family-friendly rating</div>
                <p className="mt-1 text-sm leading-6 text-white/70">Rated PEGI 3, making it suitable for a broad casual audience.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-7xl px-6 py-14 md:px-10 md:py-20">
        <div className="rounded-[2rem] border border-white/10 bg-white/[0.04] p-8 md:p-12">
          <div className="grid items-center gap-8 lg:grid-cols-[1fr_auto]">
            <div>
              <div className="mb-3 text-sm font-semibold uppercase tracking-[0.25em] text-blue-400">Ready to play?</div>
              <h2 className="text-3xl font-black tracking-tight sm:text-4xl">Challenge your timing. Sharpen your logic.</h2>
              <p className="mt-4 max-w-2xl text-white/70">
                Download BlockFall on Google Play and jump into a puzzle experience designed for fast reactions, clean thinking, and satisfying progress.
              </p>
            </div>

            <a
              href={playStoreUrl}
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center justify-center rounded-2xl bg-white px-6 py-3 text-base font-bold text-neutral-950 transition hover:scale-[1.02]"
            >
              Download Now
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}