import Image from "next/image"
import { LoginForm } from "@/components/login-form"

export default function Page() {
  return (
    <main className="flex min-h-svh w-full">
      {/* Left: hero / map */}
      <section className="relative hidden w-1/2 overflow-hidden lg:block">
        <Image
          src="/images/map-bg.png"
          alt="Visualisasi peta analisis spasial"
          fill
          priority
          className="object-cover"
        />
        {/* Layered red overlay for elegant depth */}
        <div
          aria-hidden
          className="absolute inset-0 bg-gradient-to-br from-[oklch(0.42_0.2_27/0.85)] via-[oklch(0.32_0.15_25/0.8)] to-[oklch(0.18_0.06_25/0.92)]"
        />
        {/* Fine grid texture */}
        <div
          aria-hidden
          className="absolute inset-0 opacity-[0.06]"
          style={{
            backgroundImage:
              "linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px)",
            backgroundSize: "52px 52px",
          }}
        />

        {/* Content */}
        <div className="relative z-10 flex h-full flex-col justify-between p-12 xl:p-16">
          {/* Top badge */}
          <div className="flex items-center gap-2.5">
            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 backdrop-blur-sm ring-1 ring-white/25">
              <svg
                viewBox="0 0 24 24"
                fill="none"
                className="h-5 w-5 text-white"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden
              >
                <path d="M12 21s-7-5.6-7-11a7 7 0 1 1 14 0c0 5.4-7 11-7 11Z" />
                <circle cx="12" cy="10" r="2.5" />
              </svg>
            </div>
            <span className="font-heading text-sm font-bold tracking-wide text-white">
              WebGIS Geospasial
            </span>
          </div>

          {/* Headline */}
          <div className="relative max-w-xl">
            {/* glowing radial gradient behind headline */}
            <div
              aria-hidden
              className="pointer-events-none absolute -left-10 top-8 -z-10 h-72 w-[34rem] -translate-y-4"
              style={{
                background:
                  "radial-gradient(closest-side, rgba(255,255,255,0.32), rgba(255,120,120,0.12), transparent)",
                filter: "blur(8px)",
              }}
            />
            <div className="mb-5 inline-flex items-center gap-2 rounded-full bg-white/12 px-3.5 py-1.5 text-xs font-semibold text-white/90 ring-1 ring-white/20 backdrop-blur-sm">
              <span className="h-1.5 w-1.5 rounded-full bg-white" />
              Platform Analisis Data Spasial
            </div>
            <h1 className="font-heading text-4xl font-extrabold leading-[1.1] tracking-tight text-white text-balance xl:text-5xl">
              Analisis Spasial Pengentasan Kemiskinan
            </h1>
            <p className="mt-5 max-w-md text-base leading-relaxed text-white/80 text-pretty">
              Petakan, pantau, dan analisis indikator kemiskinan secara geospasial untuk
              pengambilan keputusan kebijakan yang tepat sasaran dan berbasis data.
            </p>

            {/* Mini stats */}
            <div className="mt-10 grid grid-cols-3 gap-4 border-t border-white/15 pt-7">
              {[
                { v: "514", l: "Kabupaten/Kota" },
                { v: "34", l: "Provinsi" },
                { v: "99.9%", l: "Akurasi Data" },
              ].map((s) => (
                <div key={s.l}>
                  <p className="font-heading text-2xl font-bold text-white">{s.v}</p>
                  <p className="mt-1 text-xs font-medium text-white/65">{s.l}</p>
                </div>
              ))}
            </div>
          </div>

          <p className="text-xs font-medium text-white/55">
            Data terintegrasi · Pembaruan berkala · Aman &amp; terenkripsi
          </p>
        </div>
      </section>

      {/* Right: form */}
      <section className="relative flex w-full items-center justify-center bg-background px-6 py-12 sm:px-10 lg:w-1/2">
        {/* soft ambient accents */}
        <div
          aria-hidden
          className="pointer-events-none absolute right-0 top-0 h-72 w-72 rounded-full bg-primary/8 blur-3xl"
        />
        <div
          aria-hidden
          className="pointer-events-none absolute bottom-0 left-0 h-72 w-72 rounded-full bg-accent/40 blur-3xl"
        />
        <LoginForm />
      </section>
    </main>
  )
}