import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Star } from "lucide-react";
import { buttonClasses } from "@/components/ui/Button";

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

export function HeroSection({
  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/home_page_hero.webp",
  features
}: HeroSectionProps = {}) {
  return (
    <section className="relative bg-primary min-h-[480px] md:min-h-[600px] flex items-center overflow-hidden w-full">
      {/* 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"
      />
      <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">
          <h1 className="text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight font-heading leading-[1.1] text-white">
            {title}
          </h1>
          <p className="mt-6 text-base md:text-lg lg:text-xl text-white/90 max-w-2xl leading-relaxed">
            {subtitle}
          </p>
          {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>
          )}
          <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={buttonClasses({ variant: 'primary', size: 'md', className: 'w-fit sm:w-auto group' })}>
                <span>{ctaText}</span>
                <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
              </Link>
            )}
            {secondaryCtaText && secondaryCtaLink && (
              <Link href={secondaryCtaLink} className={buttonClasses({ variant: 'outline', size: 'md', className: 'w-fit sm:w-auto' })}>
                <span>{secondaryCtaText}</span>
              </Link>
            )}
          </div>


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