import Link from "next/link";
import brand from "@/brand.config";

const STATS = [
  { value: "200+", label: "countries" },
  { value: "<30s", label: "to activate" },
  { value: "24/7", label: "human support" },
];

export function HeroSection() {
  return (
    <section className="relative overflow-hidden">
      <div
        aria-hidden
        className="pointer-events-none absolute inset-0"
        style={{
          background: `radial-gradient(ellipse 70% 50% at 80% 10%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 70%)`,
        }}
      />
      <div className="relative mx-auto grid max-w-6xl items-center gap-12 px-4 py-20 md:grid-cols-2 md:py-28">
        <div>
          <p className="mb-5 inline-flex rounded-full border border-sand-200 bg-sand-100/80 px-3 py-1 text-xs font-medium text-sand-700 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-200">
            Global eSIM connectivity
          </p>
          <h1 className="font-display text-4xl font-semibold tracking-tight text-sand-900 sm:text-5xl md:text-6xl dark:text-sand-50">
            Stay connected,
            <span className="block" style={{ color: "var(--brand-accent)" }}>
              everywhere.
            </span>
          </h1>
          <p className="mt-5 max-w-md text-base leading-relaxed text-sand-600 dark:text-sand-400">
            {brand.tagline} Instant QR activation. No physical cards. No roaming surprises.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Link
              href="/shop"
              className="rounded-full px-7 py-3 text-sm font-semibold text-white transition-opacity hover:opacity-90"
              style={{ background: "var(--brand-accent)" }}
            >
              Browse plans
            </Link>
            <Link
              href="/#how-it-works"
              className="rounded-full border border-sand-300 bg-white px-7 py-3 text-sm font-semibold text-sand-800 transition-colors hover:border-sand-400 dark:border-sand-700 dark:bg-sand-900 dark:text-sand-100"
            >
              How it works
            </Link>
          </div>
          <dl className="mt-12 grid max-w-md grid-cols-3 gap-4">
            {STATS.map((stat) => (
              <div key={stat.label}>
                <dt className="text-2xl font-semibold text-sand-900 dark:text-sand-50">{stat.value}</dt>
                <dd className="text-xs text-sand-500">{stat.label}</dd>
              </div>
            ))}
          </dl>
        </div>
        <div className="relative hidden md:block">
          <div className="grid grid-cols-2 gap-3">
            {[
              { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=640&q=70&auto=format&fit=crop", label: "Paris" },
              { src: "https://images.unsplash.com/photo-1492571350019-22de08371fd3?w=640&q=70&auto=format&fit=crop", label: "Tokyo" },
              { src: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=640&q=70&auto=format&fit=crop", label: "Dubai" },
              { src: "https://images.unsplash.com/photo-1513635269975-59663e0ac1ad?w=640&q=70&auto=format&fit=crop", label: "London" },
            ].map((item) => (
              <figure
                key={item.label}
                className="relative overflow-hidden rounded-2xl border border-sand-200 bg-sand-100 shadow-sm dark:border-sand-800"
              >
                <img
                  src={item.src}
                  alt={item.label}
                  className="aspect-[4/3] w-full object-cover"
                />
                <figcaption className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-sand-950/70 to-transparent px-3 py-2 text-xs font-medium text-white">
                  {item.label}
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}