import React from 'react';
import Link from 'next/link';

import { cn } from '@/lib/utils';
import { Settings2, Zap, Palette, Calculator, Lightbulb } from 'lucide-react';

const steps = [
  { icon: Settings2, label: 'Marka i model' },
  { icon: Zap, label: 'Moc chłodnicza' },
  { icon: Palette, label: 'Design i funkcje' },
  { icon: Calculator, label: 'Wycena montażu' },
];

export const ConfiguratorTeaser = () => {
  return (
    <section className="py-20 bg-primary text-white relative overflow-hidden">
      <div className="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-l from-accent/20 to-transparent pointer-events-none" />
      <div className="absolute -bottom-24 -left-24 w-64 h-64 bg-accent rounded-full blur-[120px] opacity-20 pointer-events-none" />
      
      <div className="container mx-auto px-4 md:px-8 max-w-7xl relative z-10">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Skonfiguruj swój idealny zestaw w 4 krokach
            </h2>
            <p className="text-gray-300 text-lg mb-8 max-w-xl">
              Nie wiesz jakie urządzenie wybrać? Nasz prosty konfigurator krok po kroku pomoże Ci dobrać sprzęt i natychmiast sprawdzić szacunkowy koszt wraz z montażem.
            </p>
            
            <div className="flex flex-col sm:flex-row gap-4 mb-10 lg:mb-0">
              <Link 
                href="/kalkulator" 
                className={cn("btn btn-primary text-white group")}
              >
                Uruchom konfigurator
              </Link>
            </div>
          </div>
          
          <div className="relative">
            <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8">
              <div className="space-y-6 relative before:absolute before:inset-0 before:ml-6 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-white/30 before:to-transparent">
                {steps.map((step, idx) => {
                  const Icon = step.icon;
                  return (
                    <div key={idx} className="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group">
                      <div className="flex items-center justify-center w-12 h-12 rounded-full border-4 border-primary bg-accent text-white shadow md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2 z-10">
                        <Icon className="w-5 h-5" />
                      </div>
                      <div className="w-[calc(100%-4rem)] md:w-[calc(50%-3rem)] bg-white/10 border border-white/20 p-4 rounded-xl backdrop-blur-sm group-hover:bg-white/20 transition-colors">
                        <h3 className="font-semibold text-lg">{step.label}</h3>
                        <p className="text-sm text-gray-300">Krok {idx + 1}</p>
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="mt-8 bg-accent/20 border border-accent/40 rounded-xl p-4 flex items-start">
                <Lightbulb className="w-6 h-6 text-accent shrink-0 mr-3 mt-0.5" />
                <div>
                  <h4 className="font-semibold text-accent-light mb-1">Porada eksperta</h4>
                  <p className="text-sm text-gray-200">
                    Szybki przelicznik mocy: <strong>10 m² = 1 kW</strong> mocy chłodniczej. Dla pokoju 25 m² szukaj urządzenia o mocy ok. 2.5 kW.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};