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

export function CalculatorTeaser() {
  return (
    <section className="py-16 md:py-24 bg-white border-b border-border">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="bg-slate-50 p-8 md:p-12 lg:p-16 border-y border-border flex flex-col lg:grid lg:grid-cols-[45%_55%] items-center gap-12 lg:gap-16">
          
          <div className="flex flex-col gap-6 w-full">
            <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-primary font-heading leading-tight">
              Nie wiesz, jakiej mocy potrzebujesz?
            </h2>
            <p className="text-base md:text-lg text-text-muted leading-relaxed max-w-xl">
              Skorzystaj z naszego inteligentnego kalkulatora. Wystarczy podać metraż pomieszczenia, a my wskażemy optymalną moc klimatyzatora i przybliżony koszt instalacji.
            </p>
            
            <div className="mt-4">
              <Link href="/kalkulator" className={buttonClasses({ variant: 'primary', size: 'lg', className: 'group w-fit' })}>
                <span>Uruchom kalkulator</span>
                <ArrowRight className="size-5 group-hover:translate-x-1 transition-transform" />
              </Link>
            </div>
          </div>

          <div className="w-full">
            <div className="bg-white rounded-xl p-8 border border-border shadow-md">
              <div className="flex flex-col gap-8">
                <div className="flex justify-between items-end border-b border-border pb-4">
                  <div>
                    <p className="text-sm font-semibold text-text-muted mb-1">Powierzchnia</p>
                    <p className="text-3xl font-bold text-primary font-heading">35 <span className="text-xl text-text-muted">m²</span></p>
                  </div>
                  <Home className="size-8 text-accent opacity-50" />
                </div>
                
                <div className="space-y-4">
                  <div className="h-2 w-full bg-slate-100 rounded-full overflow-hidden">
                    <div className="h-full bg-accent rounded-full w-1/2"></div>
                  </div>
                  <div className="flex justify-between text-xs font-semibold text-text-muted">
                    <span>10 m²</span>
                    <span>100 m²</span>
                  </div>
                </div>

                <div className="bg-accent/5 rounded-xl p-6 border border-accent/10 flex flex-col items-center text-center">
                  <p className="text-sm font-semibold text-primary mb-1">Sugerowana moc</p>
                  <p className="text-4xl font-extrabold text-accent font-heading">3.5 <span className="text-2xl text-accent/70">kW</span></p>
                </div>
              </div>
            </div>
          </div>

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