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

export interface HeroSectionProps {
  eyebrow?: string;
  title?: React.ReactNode;
  subtitle?: string;
  ctaText?: string;
  ctaLink?: string;
  secondaryCtaText?: string;
  secondaryCtaLink?: string;
  backgroundImage?: string;
  features?: string[];
}

export function HeroSection({
  eyebrow = "Wrocław i Dolny Śląsk",
  title = (
    <>
      <span className="text-white">Klimatyzacja</span><br />
      <span className="text-accent">na Dolnym Śląsku</span>
    </>
  ),
  subtitle = "Montaż, serwis i naprawa — przyjeżdżamy do Ciebie. Obsługujemy tam gdzie inni odmawiają, w tym klimatyzatory LG.",
  ctaText = "Darmowa wycena",
  ctaLink = "/kontakt",
  secondaryCtaText = "Zobacz ofertę",
  secondaryCtaLink = "/sklep",
  backgroundImage = "/images/hero/hero-section-image.webp",
  features
}: HeroSectionProps = {}) {
  return (
    <section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden max-w-[2560px] mx-auto">
      {/* TODO ZDJĘCIE HERO: realne zdjęcie firmy/montażu, format poziomy min. 1920×1080, plik public/hero.jpg */}
      <Image
        src={backgroundImage}
        alt="Montaż klimatyzacji i pomp ciepła"
        fill
        priority
        sizes="100vw"
        className="object-cover"
      />
      
      {/* NAKŁADKA POD TEKST - jednolita, przyciemniająca */}
      <div className="absolute inset-0 bg-black/50" />

      <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
        <div className="flex flex-col items-start text-left max-w-3xl">
          {/* Badge */}
          {eyebrow && (
            <div className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-accent/20 border border-accent/30 text-white text-xs font-semibold uppercase tracking-wider mb-6 font-heading">
              <span className="size-2 rounded-full bg-accent" />
              {eyebrow}
            </div>
          )}

          {/* Heading */}
          <h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight font-heading leading-[1.1] text-white">
            {title}
          </h1>

          {/* Subtitle */}
          <p className="mt-6 text-base md:text-lg lg:text-xl text-white/90 max-w-2xl leading-relaxed">
            {subtitle}
          </p>

          {/* Optional Features List */}
          {features && features.length > 0 && (
            <ul className="mt-6 grid grid-cols-2 gap-3 text-white/90 font-medium">
              {features.map((feature, idx) => (
                <li key={idx} className="flex items-center gap-2">
                  <Star className="size-4 text-yellow-400 fill-yellow-400" />
                  {feature}
                </li>
              ))}
            </ul>
          )}

          {/* CTA Buttons */}
          <div className="mt-10 flex flex-col sm:flex-row items-start sm:items-center gap-4 w-full sm:w-auto">
            {ctaText && ctaLink && (
              <Link href={ctaLink} className="w-fit sm:w-auto group btn btn-primary text-white font-bold px-8">
                <span>{ctaText}</span>
                <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
              </Link>
            )}
            {secondaryCtaText && secondaryCtaLink && (
              <Link href={secondaryCtaLink} className="w-fit sm:w-auto btn btn-outline bg-white/10 text-white border-white/20 hover:bg-white hover:text-primary font-bold px-8">
                <span>{secondaryCtaText}</span>
              </Link>
            )}
          </div>


        </div>
      </div>
    </section>
  );
}