import Link from "next/link";
import Image from "next/image";
import { Outfit } from "next/font/google";

const outfit = Outfit({ subsets: ["latin"], weight: ["500", "700", "800"] });

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

export function HeroSection({
  title = (
    <>
      <span className="text-primary">Klimatyzacja</span><br />
      <span className="text-accent">we Wrocławiu</span>
    </>
  ),
  subtitle = "Montaż, serwis i naprawa — przyjeżdżamy do Ciebie. Zapewniamy najwyższą jakość instalacji oraz pełne wsparcie pogwarancyjne.",
  ctaText = "Darmowa wycena",
  ctaLink = "/kontakt",
  secondaryCtaText = "Zobacz ofertę",
  secondaryCtaLink = "/sklep"
}: HeroSectionProps = {}) {
  return (
    <section className="relative w-full bg-slate-50 flex flex-col lg:flex-row min-h-[85vh] border-b border-border">
      
      {/* Lewa kolumna: Typografia i CTA */}
      <div className="w-full lg:w-[55%] flex flex-col justify-center px-6 sm:px-12 lg:px-16 xl:px-24 py-16 lg:py-24 z-10">
        
        <h1 className={`${outfit.className} text-5xl sm:text-6xl xl:text-7xl font-extrabold tracking-tight leading-[1.05] uppercase`}>
          {title}
        </h1>
        
        <p className="mt-8 text-lg sm:text-xl text-text-muted max-w-xl leading-relaxed">
          {subtitle}
        </p>
        
        <div className="mt-12 flex flex-col sm:flex-row gap-4">
          {ctaText && ctaLink && (
            <Link 
              href={ctaLink} 
              className="inline-flex items-center justify-center bg-primary text-white font-bold uppercase tracking-wider px-10 py-5 rounded-none hover:bg-primary/90 transition-colors border-2 border-primary"
            >
              {ctaText}
            </Link>
          )}
          {secondaryCtaText && secondaryCtaLink && (
            <Link 
              href={secondaryCtaLink} 
              className="inline-flex items-center justify-center bg-transparent text-primary font-bold uppercase tracking-wider px-10 py-5 rounded-none border-2 border-primary hover:bg-primary/5 transition-colors"
            >
              {secondaryCtaText}
            </Link>
          )}
        </div>

        {/* Trust Signals: Minimalistyczne dane typograficzne */}
        <div className="mt-16 sm:mt-24 pt-8 border-t border-border flex flex-wrap gap-10">
          <div>
            <p className={`${outfit.className} text-4xl font-extrabold text-primary`}>15+</p>
            <p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Lat doświadczenia</p>
          </div>
          <div className="hidden sm:block w-px bg-border self-stretch" />
          <div>
            <p className={`${outfit.className} text-4xl font-extrabold text-primary`}>5</p>
            <p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Lat gwarancji</p>
          </div>
          <div className="hidden sm:block w-px bg-border self-stretch" />
          <div>
            <p className={`${outfit.className} text-4xl font-extrabold text-primary`}>100%</p>
            <p className="text-xs font-semibold uppercase tracking-widest text-text-muted mt-2">Pokrycia w regionie</p>
          </div>
        </div>

      </div>

      {/* Prawa kolumna: Jedno wielkie, surowe zdjęcie */}
      <div className="w-full lg:w-[45%] h-[500px] lg:h-auto relative bg-slate-200">
        <Image
          src="/images/services/montaz.webp"
          alt="Profesjonalny montaż klimatyzacji"
          fill
          priority
          sizes="(max-width: 1024px) 100vw, 45vw"
          className="object-cover object-center"
        />
        {/* Subtelny overlay dla kontrastu jeśli zajdzie potrzeba (opcjonalnie) */}
        <div className="absolute inset-0 bg-black/5 lg:bg-transparent" />
      </div>

    </section>
  );
}