import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Phone } from "lucide-react";

export function Hero() {
  return (
    <section className="relative flex h-[70vh] min-h-[480px] max-h-[720px] items-end overflow-hidden">
      {/* Background image */}
      <Image
        src="/images/hero.jpg"
        alt="Stalen deuren in modern interieur"
        fill
        className="object-cover"
        priority
      />

      {/* Gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-t from-[#1A2E2E]/90 via-[#1A2E2E]/40 to-[#1A2E2E]/10" />

      {/* Content pinned to bottom */}
      <div className="relative w-full pb-12 pt-20">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            {/* Label */}
            <div className="mb-4 flex items-center gap-2">
              <div className="h-4 w-1 rounded-full bg-[#C4D668]" />
              <span className="text-xs font-medium tracking-widest uppercase text-[#C4D668]">
                Handgemaakt in Roosendaal
              </span>
            </div>

            <h1 className="text-4xl font-light leading-[1.1] tracking-tight text-white sm:text-5xl lg:text-6xl">
              Stalen deuren
              <br />
              <span className="font-semibold">op maat</span> gemaakt
            </h1>

            <p className="mt-4 max-w-md text-sm leading-relaxed text-white/60">
              Van ontwerp tot montage. Wij maken stalen deuren, kozijnen en
              wanden die perfect passen bij uw interieur.
            </p>

            <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center">
              <Link
                href="/offerte"
                className="inline-flex items-center gap-2 rounded-md bg-[#C4D668] px-6 py-3 text-sm font-semibold text-black transition-colors hover:bg-[#b5c75a]"
              >
                Configureer uw deur
                <ArrowRight className="size-4" />
              </Link>

              <a
                href="tel:0165311490"
                className="inline-flex items-center gap-2 rounded-md border border-white/20 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-white/10"
              >
                <Phone className="size-4" />
                0165 311 490
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}