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

import { cn } from '@/lib/utils';
import { PiggyBank, FileText, CheckCircle2 } from 'lucide-react';

export const FundingSection = () => {
  return (
    <section className="py-16 bg-accent-light text-primary">
      <div className="container mx-auto px-4 md:px-8 max-w-6xl relative">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-flex items-center gap-2 px-3 py-1 bg-white/50 backdrop-blur-sm rounded-full text-sm font-semibold mb-6">
              <PiggyBank className="w-4 h-4 text-accent" />
              Dotacje i dofinansowania
            </div>
            
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Odbierz nawet do 35 200 zł dotacji na pompę ciepła
            </h2>
            
            <p className="text-primary/80 text-lg mb-8">
              [PLACEHOLDER - DO AKTUALIZACJI] Obecnie trwają programy rządowe &quot;Czyste Powietrze&quot; oraz &quot;Mój Prąd&quot;, które pozwalają na zwrot znacznej części kosztów inwestycji. Pomożemy Ci przejść przez cały proces formalny i przygotować niezbędne wnioski.
            </p>

            <ul className="space-y-4 mb-10">
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
                <span className="font-medium">Bezpłatny audyt możliwości dofinansowania</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
                <span className="font-medium">Pomoc w wypełnieniu dokumentacji</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-6 h-6 text-accent shrink-0" />
                <span className="font-medium">Możliwość prefinansowania inwestycji</span>
              </li>
            </ul>

            <Link 
              href="/dofinansowania"
              className={cn("btn btn-primary group")}
            >
              Dowiedz się więcej o dotacjach
            </Link>
            <p className="text-xs text-primary/60 mt-4 max-w-sm">
              * Wysokość dotacji uzależniona jest od progu dochodowego i zakresu termomodernizacji. Skontaktuj się z nami w celu dokładnej wyceny.
            </p>
          </div>

          <div className="relative">
            {/* Dekoracyjna karta */}
            <div className="bg-white rounded-3xl p-8 shadow-xl relative z-10 border border-white/50">
              <div className="flex justify-between items-start mb-8">
                <div>
                  <p className="text-sm text-gray-500 font-semibold mb-1">Twój kosztorys z dotacją</p>
                  <h3 className="text-xl font-bold text-primary">Przykładowa kalkulacja</h3>
                </div>
                <div className="w-12 h-12 bg-accent/10 rounded-full flex items-center justify-center">
                  <FileText className="w-6 h-6 text-accent" />
                </div>
              </div>

              <div className="space-y-4 text-sm">
                <div className="flex justify-between pb-4 border-b border-gray-100">
                  <span className="text-gray-600">Wartość inwestycji</span>
                  <span className="font-semibold text-gray-900">45 000 zł</span>
                </div>
                <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
                  <span>Dotacja &quot;Czyste Powietrze&quot;</span>
                  <span>- 20 500 zł</span>
                </div>
                <div className="flex justify-between pb-4 border-b border-gray-100 text-green-600 font-medium">
                  <span>Ulga termomodernizacyjna</span>
                  <span>- 4 600 zł</span>
                </div>
                <div className="flex justify-between pt-2">
                  <span className="text-gray-900 font-bold">Ostateczny koszt inwestora</span>
                  <span className="font-bold text-2xl text-primary">19 900 zł</span>
                </div>
              </div>
            </div>

            {/* Background elements */}
            <div className="absolute -top-6 -right-6 w-full h-full bg-accent/20 rounded-3xl -z-10 blur-sm"></div>
            <div className="absolute -bottom-8 -left-8 w-32 h-32 bg-white/40 rounded-full -z-10 blur-xl"></div>
          </div>
        </div>
      </div>
    </section>
  );
};