thermcool/components/sections/PricingTable.tsx

import React from 'react';
import { pricingData, PricingItem } from '@/content/pricing';
import { Check, Info, ArrowRight, Download } from 'lucide-react';

export const PricingTable = () => {
  const splitItems = pricingData.filter((item) => item.category === 'split');
  const multisplitItems = pricingData.filter((item) => item.category === 'multisplit');
  const additionalItems = pricingData.filter((item) => item.category === 'additional');

  const renderTableRows = (items: PricingItem[]) => {
    return items.map((item) => (
      <tr key={item.id} className="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
        <td className="py-4 px-4 text-gray-800 font-medium">{item.name}</td>
        <td className="py-4 px-4 text-center whitespace-nowrap text-gray-600">{item.priceNet} zł</td>
        <td className="py-4 px-4 text-center whitespace-nowrap font-semibold text-primary">{item.priceGrossPrivate} zł</td>
        <td className="py-4 px-4 text-center whitespace-nowrap text-gray-600 hidden sm:table-cell">{item.priceGrossCompany} zł</td>
      </tr>
    ));
  };

  return (
    <section className="py-16 bg-white" id="cennik">
      <div className="container mx-auto px-4 md:px-8 max-w-5xl">
        <div className="text-center mb-12">
          <h2 className="text-3xl font-bold text-primary mb-4">Cennik usług instalacyjnych</h2>
          <p className="text-gray-600 max-w-2xl mx-auto">
            Przejrzyste ceny bez ukrytych kosztów. Ostateczna wycena zależy od specyfiki budynku i trudności montażu – dokonywana jest zawsze przed rozpoczęciem prac.
          </p>
        </div>

        <div className="overflow-x-auto rounded-xl border border-gray-200 shadow-sm mb-8">
          <table className="w-full text-left border-collapse min-w-[600px]">
            <thead>
              <tr className="bg-gray-50 border-b border-gray-200 text-sm uppercase text-gray-500">
                <th className="py-4 px-4 font-semibold w-1/2">Usługa</th>
                <th className="py-4 px-4 font-semibold text-center">Cena netto</th>
                <th className="py-4 px-4 font-semibold text-center">Brutto (8% VAT)*</th>
                <th className="py-4 px-4 font-semibold text-center hidden sm:table-cell">Brutto (23% VAT)</th>
              </tr>
            </thead>
            <tbody>
              {/* Split */}
              <tr>
                <td colSpan={4} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
                  Montaż układów SPLIT
                </td>
              </tr>
              {renderTableRows(splitItems)}

              {/* Multisplit */}
              <tr>
                <td colSpan={4} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
                  Montaż układów MULTISPLIT
                </td>
              </tr>
              {renderTableRows(multisplitItems)}

              {/* Usługi dodatkowe */}
              <tr>
                <td colSpan={4} className="bg-gray-50/80 py-3 px-4 font-semibold text-primary text-sm uppercase">
                  Usługi dodatkowe i serwis
                </td>
              </tr>
              {renderTableRows(additionalItems)}
            </tbody>
          </table>
        </div>

        <div className="flex flex-col md:flex-row gap-8 items-start justify-between bg-gray-50 p-6 rounded-xl border border-gray-100">
          <div className="flex-1">
            <h4 className="font-semibold text-primary mb-3 flex items-center gap-2">
              <Check className="w-5 h-5 text-accent" />
              Co obejmuje montaż podstawowy?
            </h4>
            <ul className="grid grid-cols-1 sm:grid-cols-2 gap-2 text-sm text-gray-600">
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Wykonanie przewiertu przez ścianę</li>
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Instalacja chłodnicza do 3 mb</li>
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Podłączenie do gniazdka (kabel 3m)</li>
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Grawitacyjne odprowadzenie skroplin</li>
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Montaż jednostek do wysokości 3m</li>
              <li className="flex items-start gap-2"><div className="w-1.5 h-1.5 rounded-full bg-accent mt-1.5 shrink-0" /> Próba szczelności i uruchomienie</li>
            </ul>
          </div>
          
          <div className="md:w-64 shrink-0 flex flex-col gap-4">
            <button className="btn btn-outline btn-primary bg-white w-full justify-between group">
              Pobierz cennik PDF
              <Download className="w-4 h-4 ml-2 group-hover:-translate-y-1 transition-transform" />
            </button>
            
            <div className="text-xs text-gray-500 flex items-start gap-2 bg-white p-3 rounded-lg border border-gray-100">
              <Info className="w-4 h-4 shrink-0 text-accent mt-0.5" />
              <p>
                *Stawka 8% VAT obowiązuje przy montażu w obiektach mieszkalnych (domy do 300m², mieszkania do 150m²).
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};