import React, { useState, useEffect } from 'react';
import { Calendar as CalendarIcon, Wrench, CheckCircle, ArrowLeft, Info, ShoppingCart, Menu, X, Clock, Settings, User, Phone, ShieldCheck, AlertTriangle } from 'lucide-react';

// --- MOCK DATA: SKONSOLIDOWANA BAZA SPRZĘTU ---
const EQUIPMENT_GROUPS = [
  {
    id: 'grp-odk-pior',
    name: 'Odkurzacz Piorący Karcher',
    category: 'Odkurzacze',
    shortDesc: 'Profesjonalny sprzęt do ekstrakcyjnego prania tapicerki i dywanów.',
    fullDesc: 'Wydajny odkurzacz piorący, idealny do dogłębnego czyszczenia wykładzin, dywanów oraz tapicerki samochodowej i meblowej. Pozostawia minimalną wilgoć resztkową, dzięki czemu powierzchnie są szybko gotowe do użytku. W zestawie standardowa dysza do tapicerki.',
    pricePerDay: 60,
    imageUrl: 'https://images.unsplash.com/photo-1558317374-067fb5f30001?auto=format&fit=crop&q=80&w=800',
    units: Array.from({ length: 5 }).map((_, i) => ({ id: `odk-pior-${i + 1}`, label: `Egzemplarz #${i + 1}` }))
  },
  {
    id: 'grp-osuszacz',
    name: 'Osuszacz powietrza Master',
    category: 'Budowa',
    shortDesc: 'Przemysłowy osuszacz kondensacyjny do zwalczania wilgoci.',
    fullDesc: 'Bardzo wydajny osuszacz powietrza, niezbędny przy pracach tynkarskich, malarskich oraz po zalaniach. Przyspiesza proces schnięcia budynków, zapobiega powstawaniu pleśni. Posiada duży zbiornik na wodę z możliwością podłączenia stałego odpływu.',
    pricePerDay: 40,
    imageUrl: 'https://images.unsplash.com/photo-1616880014022-297c554e20eb?auto=format&fit=crop&q=80&w=800',
    units: Array.from({ length: 2 }).map((_, i) => ({ id: `osuszacz-${i + 1}`, label: `Egzemplarz #${i + 1}` }))
  },
  {
    id: 'grp-kosa',
    name: 'Kosa spalinowa STIHL/Husqvarna',
    category: 'Ogród',
    shortDesc: 'Mocna kosa do wycinania twardej trawy i zarośli.',
    fullDesc: 'Profesjonalna kosa spalinowa przeznaczona do intensywnych prac w trudnym terenie. Doskonale radzi sobie z wysoką trawą, chwastami oraz drobnymi zaroślami. Wyposażona w wygodne szelki odciążające kręgosłup i system antywibracyjny.',
    pricePerDay: 80,
    imageUrl: 'https://images.unsplash.com/photo-1592424001807-686967f6b7c5?auto=format&fit=crop&q=80&w=800',
    units: [{ id: 'kosa-1', label: 'Egzemplarz #1' }]
  },
  {
    id: 'grp-termo',
    name: 'Kamera termowizyjna FLIR',
    category: 'Pomiary',
    shortDesc: 'Precyzyjna kamera do wykrywania strat ciepła i wilgoci.',
    fullDesc: 'Zaawansowana kamera termowizyjna o wysokiej rozdzielczości. Umożliwia szybką i bezinwazyjną diagnostykę budynków: wykrywanie mostków termicznych, nieszczelności w izolacji, awarii ogrzewania podłogowego oraz zawilgocenia ścian.',
    pricePerDay: 120,
    imageUrl: 'https://images.unsplash.com/photo-1581092334651-ddf26d9a09d0?auto=format&fit=crop&q=80&w=800',
    units: [{ id: 'termo-1', label: 'Egzemplarz #1' }]
  },
  {
    id: 'grp-odk-bud',
    name: 'Odkurzacz budowlany Karcher',
    category: 'Budowa',
    shortDesc: 'Odkurzacz do pracy na sucho/mokro z otrzepywaczem.',
    fullDesc: 'Uniwersalny odkurzacz warsztatowo-budowlany. Niezbędny przy współpracy z elektronarzędziami (żyrafa, bruzdownica). Posiada automatyczny system oczyszczania filtra, co gwarantuje stałą siłę ssącą nawet przy drobnym pyle.',
    pricePerDay: 50,
    imageUrl: 'https://images.unsplash.com/photo-1527515637462-cff94eecc1ac?auto=format&fit=crop&q=80&w=800',
    units: [{ id: 'odk-bud-1', label: 'Egzemplarz #1' }]
  },
  {
    id: 'grp-komp',
    name: 'Kompresor olejowy 50L',
    category: 'Warsztat',
    shortDesc: 'Kompresor do narzędzi pneumatycznych i malowania.',
    fullDesc: 'Wydajna sprężarka powietrza ze zbiornikiem 50 litrów. Zapewnia stabilne ciśnienie niezbędne do pracy z kluczami pneumatycznymi, pistoletami lakierniczymi, tynkarskimi oraz do przedmuchiwania układów.',
    pricePerDay: 45,
    imageUrl: 'https://images.unsplash.com/photo-1621905252507-b35492d90eb4?auto=format&fit=crop&q=80&w=800',
    units: [{ id: 'komp-1', label: 'Egzemplarz #1' }]
  },
  {
    id: 'grp-pila',
    name: 'Piła stołowa do drewna',
    category: 'Warsztat',
    shortDesc: 'Precyzyjna pilarka do cięcia drewna i płyt.',
    fullDesc: 'Profesjonalna piła stołowa z mocnym silnikiem. Posiada regulację kąta i głębokości cięcia oraz stabilną prowadnicę równoległą. Idealna do prac stolarskich, układania paneli i docinania desek szalunkowych.',
    pricePerDay: 70,
    imageUrl: 'https://images.unsplash.com/photo-1504148455328-c376907d081c?auto=format&fit=crop&q=80&w=800',
    units: [{ id: 'pila-1', label: 'Egzemplarz #1' }]
  }
];

// --- UTILS ---
const getDatesInRange = (startDate, endDate) => {
  const dates = [];
  let current = new Date(startDate);
  current.setHours(0,0,0,0);
  const end = new Date(endDate);
  end.setHours(0,0,0,0);
  
  while (current <= end) {
    dates.push(current.toISOString().split('T')[0]);
    current.setDate(current.getDate() + 1);
  }
  return dates;
};

// --- KOMPONENT GŁÓWNY ---
export default function App() {
  const [view, setView] = useState('catalog'); // 'catalog', 'item', 'cart', 'service', 'success'
  const [selectedItemGroup, setSelectedItemGroup] = useState(null);
  
  const [bookings, setBookings] = useState({
    'odk-pior-1': ['2026-04-15', '2026-04-16'], 
  });

  const [cart, setCart] = useState([]); 
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const goToCatalog = () => {
    setView('catalog');
    setSelectedItemGroup(null);
  };

  const goToItem = (itemGroup) => {
    setSelectedItemGroup(itemGroup);
    setView('item');
    window.scrollTo(0,0);
  };

  const handleBookingComplete = (itemGroup, unit, startDate, startTime, endDate, endTime, calculatedDays, totalCost) => {
    const dates = getDatesInRange(startDate, endDate || startDate);
    
    setCart([...cart, { 
      itemGroup, unit, startDate, startTime, 
      endDate: endDate || startDate, endTime, calculatedDays, totalCost, dates 
    }]);

    setBookings(prev => ({
      ...prev,
      [unit.id]: [...(prev[unit.id] || []), ...dates]
    }));
    setView('cart');
  };

  const handleCheckoutSuccess = () => {
    setCart([]); // Czyszczenie koszyka po udanej rezerwacji
    setView('success');
    window.scrollTo(0,0);
  };

  return (
    <div className="min-h-screen bg-gray-50 text-gray-800 font-sans">
      {/* NAVBAR */}
      <nav className="bg-slate-900 text-white sticky top-0 z-50 shadow-lg">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-16 items-center">
            <div className="flex items-center cursor-pointer" onClick={goToCatalog}>
              <Wrench className="h-8 w-8 text-amber-500 mr-2" />
              <span className="font-bold text-xl tracking-tight">Wypożyczalnia<span className="text-amber-500">PRO</span></span>
            </div>
            
            <div className="hidden md:flex items-center space-x-8">
              <button onClick={goToCatalog} className={`hover:text-amber-400 transition ${view === 'catalog' || view === 'item' ? 'text-amber-500' : ''}`}>Sprzęt</button>
              <button onClick={() => setView('service')} className={`hover:text-amber-400 transition ${view === 'service' ? 'text-amber-500' : ''}`}>Serwis i Naprawa</button>
              <button className="hover:text-amber-400 transition">Regulamin</button>
              <button 
                onClick={() => setView('cart')}
                className="bg-amber-500 hover:bg-amber-600 text-slate-900 px-4 py-2 rounded-lg font-semibold flex items-center transition"
              >
                <ShoppingCart className="w-5 h-5 mr-2" />
                Rezerwacje {cart.length > 0 && `(${cart.length})`}
              </button>
            </div>

            <div className="md:hidden flex items-center">
               <button onClick={() => setView('cart')} className="mr-4 relative">
                 <ShoppingCart className="w-6 h-6 text-white" />
                 {cart.length > 0 && (
                   <span className="absolute -top-2 -right-2 bg-amber-500 text-slate-900 text-xs font-bold px-1.5 py-0.5 rounded-full">
                     {cart.length}
                   </span>
                 )}
               </button>
               <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
                 {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
               </button>
            </div>
          </div>
        </div>
        
        {mobileMenuOpen && (
          <div className="md:hidden bg-slate-800 px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <button onClick={() => { goToCatalog(); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Sprzęt</button>
            <button onClick={() => { setView('service'); setMobileMenuOpen(false); }} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Serwis i Naprawa</button>
            <button className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Regulamin</button>
          </div>
        )}
      </nav>

      {/* MAIN CONTENT AREA */}
      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {view === 'catalog' && <Catalog items={EQUIPMENT_GROUPS} onSelect={goToItem} />}
        {view === 'service' && <ServiceView />}
        {view === 'item' && selectedItemGroup && (
          <ItemDetails 
            itemGroup={selectedItemGroup} 
            onBack={goToCatalog} 
            bookings={bookings}
            onBook={handleBookingComplete}
          />
        )}
        {view === 'cart' && <CartView cart={cart} onBack={goToCatalog} onCheckoutSuccess={handleCheckoutSuccess} />}
        {view === 'success' && <SuccessView onBack={goToCatalog} />}
      </main>

      <footer className="bg-slate-900 text-slate-400 py-8 text-center mt-12">
        <p>&copy; 2026 WypożyczalniaPRO. Wszelkie prawa zastrzeżone.</p>
        <p className="text-sm mt-2">Zbudowane z pasją dla profesjonalistów.</p>
      </footer>
    </div>
  );
}

// --- KOMPONENTY WIDOKÓW (Catalog, Service, ItemDetails) pozostają bez zmian w logice ---
function Catalog({ items, onSelect }) {
  return (
    <div className="animate-in fade-in duration-500">
      <div className="mb-8">
        <h1 className="text-3xl font-extrabold text-slate-900">Katalog Sprzętu</h1>
        <p className="text-slate-600 mt-2">Wybierz maszynę, aby sprawdzić dostępność konkretnych egzemplarzy.</p>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        {items.map((item) => (
          <div key={item.id} className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-xl transition-shadow duration-300 flex flex-col cursor-pointer group" onClick={() => onSelect(item)}>
            <div className="relative h-48 overflow-hidden bg-gray-100">
              <img src={item.imageUrl} alt={item.name} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
              <div className="absolute top-3 right-3 bg-white/90 backdrop-blur px-3 py-1 rounded-full text-sm font-bold text-slate-900 shadow-sm">{item.pricePerDay} zł / doba</div>
              <div className="absolute bottom-3 left-3 bg-slate-900/80 backdrop-blur text-white px-3 py-1 rounded-md text-xs font-semibold">Dostępne sztuki: {item.units.length}</div>
            </div>
            <div className="p-5 flex flex-col flex-grow">
              <span className="text-xs font-semibold text-amber-600 uppercase tracking-wider mb-1">{item.category}</span>
              <h3 className="text-xl font-bold text-slate-900 mb-2">{item.name}</h3>
              <p className="text-slate-600 text-sm mb-4 flex-grow">{item.shortDesc}</p>
              <button className="w-full mt-auto bg-slate-100 text-slate-800 font-semibold py-2.5 rounded-lg group-hover:bg-amber-500 group-hover:text-white transition-colors duration-300 flex justify-center items-center">
                <CalendarIcon className="w-4 h-4 mr-2" /> Sprawdź kalendarz
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function ServiceView() {
  return (
    <div className="animate-in fade-in zoom-in-95 duration-500 max-w-4xl mx-auto">
      <div className="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="bg-slate-900 p-10 text-center relative overflow-hidden">
          <Settings className="w-32 h-32 text-amber-500/20 absolute -right-4 -top-4" />
          <h1 className="text-4xl font-extrabold text-white mb-4 relative z-10">Profesjonalny Serwis Sprzętu</h1>
          <p className="text-amber-400 text-lg relative z-10">Naprawiamy to, co inni spisali na straty.</p>
        </div>
        <div className="p-8 md:p-12">
          <div className="grid md:grid-cols-2 gap-12">
            <div>
              <h3 className="text-2xl font-bold text-slate-900 mb-4 flex items-center"><Wrench className="w-6 h-6 mr-2 text-amber-500" /> Co serwisujemy?</h3>
              <ul className="space-y-3 text-slate-600">
                <li className="flex items-start"><CheckCircle className="w-5 h-5 mr-2 text-green-500 shrink-0" /> Odkurzacze piorące i budowlane (m.in. Karcher, Profi)</li>
                <li className="flex items-start"><CheckCircle className="w-5 h-5 mr-2 text-green-500 shrink-0" /> Kosy i kosiarki spalinowe (Stihl, Husqvarna)</li>
                <li className="flex items-start"><CheckCircle className="w-5 h-5 mr-2 text-green-500 shrink-0" /> Elektronarzędzia (wiertarki, szlifierki, piły)</li>
                <li className="flex items-start"><CheckCircle className="w-5 h-5 mr-2 text-green-500 shrink-0" /> Kompresory i nagrzewnice</li>
              </ul>
            </div>
            <div className="bg-slate-50 p-6 rounded-2xl border border-gray-100">
              <h3 className="text-lg font-bold text-slate-900 mb-2">Zasady serwisu</h3>
              <p className="text-slate-600 mb-4 text-sm">Przed przystąpieniem do naprawy zawsze wykonujemy darmową diagnozę i wycenę. Ty decydujesz, czy naprawiamy.</p>
              <div className="bg-white p-4 rounded-xl border border-gray-200 mb-4 text-center">
                <span className="block text-sm text-slate-500 mb-1">Godziny przyjęć sprzętu</span>
                <span className="font-bold text-slate-800">Pn - Pt: 8:00 - 16:00</span>
              </div>
              <button className="w-full bg-slate-900 text-white font-bold py-3 rounded-xl hover:bg-amber-500 hover:text-slate-900 transition-colors">
                Zadzwoń do serwisu
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ItemDetails({ itemGroup, onBack, bookings, onBook }) {
  const [selectedUnitId, setSelectedUnitId] = useState(itemGroup.units[0].id);
  const [startDate, setStartDate] = useState(null);
  const [startTime, setStartTime] = useState('08:00');
  const [endDate, setEndDate] = useState(null);
  const [endTime, setEndTime] = useState('08:00');
  const [currentMonth, setCurrentMonth] = useState(new Date());

  const selectedUnit = itemGroup.units.find(u => u.id === selectedUnitId);
  const unitBookedDates = bookings[selectedUnitId] || [];

  const daysInMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 0).getDate();
  const firstDayOfMonth = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), 1).getDay();
  const startOffset = firstDayOfMonth === 0 ? 6 : firstDayOfMonth - 1;

  const handleDateClick = (day) => {
    const clickedDate = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day, 12, 0, 0);
    const dateString = clickedDate.toISOString().split('T')[0];
    const today = new Date();
    today.setHours(0,0,0,0);
    
    if (clickedDate < today || unitBookedDates.includes(dateString)) return;

    if (!startDate || (startDate && endDate)) {
      setStartDate(clickedDate);
      setEndDate(null);
    } else {
      if (clickedDate < startDate) {
        setStartDate(clickedDate);
      } else {
        const range = getDatesInRange(startDate, clickedDate);
        if (range.some(d => unitBookedDates.includes(d))) {
          alert('Wybrany zakres obejmuje daty, w których ten egzemplarz jest zajęty.');
          setStartDate(clickedDate);
        } else {
          setEndDate(clickedDate);
        }
      }
    }
  };

  const getDayStatus = (day) => {
    if (!day) return 'empty';
    const date = new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day, 12, 0, 0);
    const dateStr = date.toISOString().split('T')[0];
    const today = new Date();
    today.setHours(0,0,0,0);
    
    if (date < today) return 'past';
    if (unitBookedDates.includes(dateStr)) return 'booked';
    if (startDate && !endDate && dateStr === startDate.toISOString().split('T')[0]) return 'selected-start';
    if (startDate && endDate && date >= startDate && date <= endDate) return 'selected-range';
    return 'available';
  };

  const calculateDays = () => {
    if (!startDate) return 0;
    const startD = new Date(startDate);
    const [sH, sM] = startTime.split(':').map(Number);
    startD.setHours(sH, sM, 0, 0);

    const endD = new Date(endDate || startDate);
    const [eH, eM] = endTime.split(':').map(Number);
    endD.setHours(eH, eM, 0, 0);

    const diffMs = endD - startD;
    if (diffMs < 0) return 0; 
    const totalHours = diffMs / (1000 * 60 * 60);

    if (totalHours === 0 && !endDate) return 1;
    if (totalHours <= 32) return 1;
    return Math.ceil((totalHours - 8) / 24);
  };

  const calculatedDays = calculateDays();
  const totalCost = calculatedDays * itemGroup.pricePerDay;

  const handleConfirm = () => {
    if (!startDate) return alert("Proszę wybrać datę z kalendarza.");
    if (calculatedDays === 0) return alert("Czas zwrotu nie może być wcześniejszy niż czas odbioru.");
    onBook(itemGroup, selectedUnit, startDate, startTime, endDate, endTime, calculatedDays, totalCost);
  };

  return (
    <div className="animate-in slide-in-from-right-4 duration-300">
      <button onClick={onBack} className="flex items-center text-slate-500 hover:text-slate-900 mb-6 font-medium transition"><ArrowLeft className="w-5 h-5 mr-1" /> Powrót do listy</button>
      <div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
        <div className="grid grid-cols-1 xl:grid-cols-2">
          
          <div className="p-6 md:p-10 bg-slate-50 border-r border-gray-100 flex flex-col">
            <span className="w-max bg-slate-200 text-slate-700 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">{itemGroup.category}</span>
            <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mt-4 mb-2">{itemGroup.name}</h1>
            <p className="text-lg text-slate-600 mb-8">{itemGroup.fullDesc}</p>
            
            {itemGroup.units.length > 1 && (
              <div className="mb-8 bg-white p-5 rounded-xl shadow-sm border border-gray-200">
                <label className="block text-sm font-bold text-slate-700 mb-3">Wybierz konkretny egzemplarz:</label>
                <div className="flex flex-wrap gap-2">
                  {itemGroup.units.map(unit => (
                    <button key={unit.id} onClick={() => { setSelectedUnitId(unit.id); setStartDate(null); setEndDate(null); }} className={`px-4 py-2 rounded-lg text-sm font-medium transition ${selectedUnitId === unit.id ? 'bg-amber-500 text-slate-900 shadow-md' : 'bg-gray-100 text-slate-600 hover:bg-gray-200'}`}>
                      {unit.label}
                    </button>
                  ))}
                </div>
              </div>
            )}

            <div className="bg-white p-6 rounded-xl border border-gray-200 mb-8">
              <div className="flex items-center justify-between mb-4">
                <span className="text-slate-500 font-medium">Cena wynajmu</span>
                <span className="text-2xl font-bold text-slate-900">{itemGroup.pricePerDay} zł <span className="text-sm font-normal text-slate-500">/ dobę</span></span>
              </div>
              <div className="flex items-start text-sm text-slate-600 mb-4 bg-green-50 p-3 rounded-lg border border-green-100">
                <CheckCircle className="w-5 h-5 mr-2 text-green-600 shrink-0" />
                <p><strong className="text-green-800">Nie pobieramy kaucji.</strong> Płatność z dołu.</p>
              </div>
            </div>
          </div>

          <div className="p-6 md:p-10">
            <h3 className="text-xl font-bold text-slate-900 mb-6 flex items-center"><CalendarIcon className="w-6 h-6 mr-2 text-amber-500" /> Kalendarz</h3>
            <div className="bg-white border border-gray-200 rounded-xl p-4 mb-6 shadow-sm">
              <div className="flex justify-between items-center mb-4">
                <button onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1))} className="px-3 py-1.5 border rounded-lg hover:bg-slate-50 text-sm font-medium">&larr; Poprz.</button>
                <h4 className="font-bold text-slate-800 capitalize">{currentMonth.toLocaleDateString('pl-PL', { month: 'long', year: 'numeric' })}</h4>
                <button onClick={() => setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1))} className="px-3 py-1.5 border rounded-lg hover:bg-slate-50 text-sm font-medium">Nast. &rarr;</button>
              </div>
              <div className="grid grid-cols-7 gap-1">
                {['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'So', 'Nd'].map(n => <div key={n} className="text-center font-bold text-slate-400 text-xs py-2">{n}</div>)}
                {Array.from({length: startOffset}).map((_, i) => <div key={`e-${i}`} />)}
                {Array.from({length: daysInMonth}).map((_, i) => {
                  const d = i + 1; const status = getDayStatus(d);
                  let classes = "h-10 w-full flex items-center justify-center text-sm rounded-md transition-all cursor-pointer border border-transparent ";
                  if(status === 'past') classes += "text-gray-300 cursor-not-allowed";
                  else if(status === 'booked') classes += "bg-red-50 text-red-400 line-through cursor-not-allowed";
                  else if(status === 'selected-start') classes += "bg-amber-500 text-white font-bold shadow-md";
                  else if(status === 'selected-range') classes += "bg-amber-400 text-white font-bold";
                  else classes += "hover:border-amber-400 hover:bg-amber-50 text-slate-700";
                  return <div key={`d-${d}`} className="p-0.5"><button disabled={status==='past'||status==='booked'} onClick={()=>handleDateClick(d)} className={classes}>{d}</button></div>;
                })}
              </div>
            </div>

            <div className="bg-slate-100 p-5 rounded-xl border border-gray-200 mb-6">
              <h4 className="font-bold text-slate-800 mb-4 flex items-center"><Clock className="w-5 h-5 mr-2 text-slate-500" /> Precyzyjne godziny</h4>
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-600 mb-1">Odbiór (Od)</label>
                  <select value={startTime} onChange={e => setStartTime(e.target.value)} className="w-full p-2.5 rounded-lg border border-gray-300 bg-white text-sm font-medium">
                    {Array.from({length: 12}).map((_, i) => <option key={i} value={`${i + 8}:00`.padStart(5, '0')}>{`${i + 8}:00`.padStart(5, '0')}</option>)}
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-bold text-slate-600 mb-1">Zwrot (Do)</label>
                  <select value={endTime} onChange={e => setEndTime(e.target.value)} className="w-full p-2.5 rounded-lg border border-gray-300 bg-white text-sm font-medium">
                    {Array.from({length: 12}).map((_, i) => <option key={i} value={`${i + 8}:00`.padStart(5, '0')}>{`${i + 8}:00`.padStart(5, '0')}</option>)}
                  </select>
                </div>
              </div>
            </div>

            <div className="bg-slate-900 text-white p-6 rounded-xl shadow-lg">
              <button onClick={handleConfirm} disabled={!startDate || calculatedDays === 0} className={`w-full py-4 rounded-xl font-bold text-lg flex items-center justify-center transition-all ${(startDate && calculatedDays > 0) ? 'bg-amber-500 text-slate-900 hover:bg-amber-400 shadow-md' : 'bg-slate-800 text-slate-500 cursor-not-allowed'}`}>
                <CheckCircle className="w-5 h-5 mr-2" /> Potwierdź tę rezerwację
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- NOWY / ZMODYFIKOWANY KOMPONENT: KOSZYK Z FORMULARZEM I ZABEZPIECZENIAMI ---
function CartView({ cart, onBack, onCheckoutSuccess }) {
  const sum = cart.reduce((acc, curr) => acc + curr.totalCost, 0);

  // Stany formularza
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [phone, setPhone] = useState('');
  
  // Stany Captcha (zabezpieczenie anty-bot)
  const [num1, setNum1] = useState(0);
  const [num2, setNum2] = useState(0);
  const [captchaAnswer, setCaptchaAnswer] = useState('');
  const [captchaError, setCaptchaError] = useState(false);

  // Inicjalizacja prostego równania matematycznego
  useEffect(() => {
    setNum1(Math.floor(Math.random() * 9) + 1);
    setNum2(Math.floor(Math.random() * 9) + 1);
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // Walidacja formatu telefonu (dokładnie 9 cyfr, bez spacji)
    const phoneRegex = /^[0-9]{9}$/;
    if (!phoneRegex.test(phone.replace(/\s/g, ''))) {
      alert("Proszę podać poprawny, 9-cyfrowy polski numer telefonu bez spacji i kierunkowego.");
      return;
    }

    // Walidacja Captcha
    if (parseInt(captchaAnswer) !== (num1 + num2)) {
      setCaptchaError(true);
      setCaptchaAnswer('');
      // Zmieńmy pytanie po błędzie
      setNum1(Math.floor(Math.random() * 9) + 1);
      setNum2(Math.floor(Math.random() * 9) + 1);
      return;
    }

    setCaptchaError(false);
    
    // Sukces - tu w prawdziwej aplikacji wysłalibyśmy dane na backend
    console.log("Wysłano rezerwację:", { firstName, lastName, phone, cart });
    onCheckoutSuccess();
  };

  return (
    <div className="max-w-4xl mx-auto animate-in fade-in zoom-in-95 duration-300">
      <button onClick={onBack} className="flex items-center text-slate-500 hover:text-slate-900 mb-6 font-medium transition">
        <ArrowLeft className="w-5 h-5 mr-1" /> Dobierz kolejny sprzęt
      </button>

      {cart.length === 0 ? (
         <div className="bg-white rounded-2xl shadow-sm border border-gray-200 p-12 text-center">
            <ShoppingCart className="w-16 h-16 mx-auto text-gray-300 mb-4" />
            <h2 className="text-2xl font-bold text-slate-800 mb-2">Brak rezerwacji</h2>
            <p className="text-lg text-slate-500 mb-6">Wybierz sprzęt z katalogu, aby rozpocząć.</p>
            <button onClick={onBack} className="bg-amber-500 text-slate-900 px-6 py-3 rounded-xl font-bold hover:bg-amber-400">Przejdź do sprzętu</button>
         </div>
      ) : (
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-8">
          
          {/* LEWA STRONA: Lista sprzętów (Zajmuje 3 kolumny) */}
          <div className="lg:col-span-3 bg-white rounded-2xl shadow-sm border border-gray-200 p-6 md:p-8">
            <h2 className="text-2xl font-extrabold text-slate-900 mb-6 flex items-center border-b border-gray-100 pb-4">
              <ShoppingCart className="w-6 h-6 mr-3 text-amber-500" /> Twój Koszyk
            </h2>

            <div className="space-y-4 mb-6">
              {cart.map((booking, index) => (
                <div key={index} className="flex flex-col sm:flex-row items-start justify-between p-4 bg-slate-50 rounded-xl border border-gray-100">
                  <div className="flex items-start w-full">
                    <div className="flex-grow">
                      <h4 className="font-bold text-slate-900 text-md">{booking.itemGroup.name}</h4>
                      <span className="text-xs font-semibold text-slate-500 bg-gray-200 px-2 py-0.5 rounded mt-1 inline-block mb-2">
                        {booking.unit.label}
                      </span>
                      <div className="text-sm text-slate-600">
                        {booking.startDate.toLocaleDateString()} {booking.startTime} &rarr; {booking.endDate.toLocaleDateString()} {booking.endTime}
                      </div>
                    </div>
                  </div>
                  <div className="text-right mt-2 sm:mt-0 whitespace-nowrap">
                    <span className="block text-xs text-slate-500 font-bold">{booking.calculatedDays} doby</span>
                    <div className="font-extrabold text-xl text-slate-800">{booking.totalCost} zł</div>
                  </div>
                </div>
              ))}
            </div>

            <div className="flex justify-between items-center bg-amber-50 p-4 rounded-xl border border-amber-200">
               <span className="text-lg font-bold text-amber-900">Do zapłaty (przy zwrocie):</span>
               <span className="text-2xl font-extrabold text-amber-600">{sum} zł</span>
            </div>
          </div>

          {/* PRAWA STRONA: Formularz i zabezpieczenia (Zajmuje 2 kolumny) */}
          <div className="lg:col-span-2">
            <form onSubmit={handleSubmit} className="bg-white rounded-2xl shadow-sm border border-gray-200 p-6 md:p-8 sticky top-24">
              <h3 className="text-xl font-bold text-slate-900 mb-6">Dane kontaktowe</h3>
              
              <div className="space-y-4 mb-6">
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-1 flex items-center"><User className="w-4 h-4 mr-1 text-slate-400"/> Imię</label>
                  <input type="text" required value={firstName} onChange={e => setFirstName(e.target.value)} className="w-full p-3 rounded-xl border border-gray-300 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition" placeholder="np. Jan" />
                </div>
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-1 flex items-center"><User className="w-4 h-4 mr-1 text-slate-400"/> Nazwisko</label>
                  <input type="text" required value={lastName} onChange={e => setLastName(e.target.value)} className="w-full p-3 rounded-xl border border-gray-300 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition" placeholder="np. Kowalski" />
                </div>
                <div>
                  <label className="block text-sm font-bold text-slate-700 mb-1 flex items-center"><Phone className="w-4 h-4 mr-1 text-slate-400"/> Telefon kontaktowy</label>
                  <input type="tel" required value={phone} onChange={e => setPhone(e.target.value)} className="w-full p-3 rounded-xl border border-gray-300 focus:border-amber-500 focus:ring-2 focus:ring-amber-200 outline-none transition" placeholder="123456789" maxLength="9" minLength="9" />
                  <p className="text-xs text-slate-500 mt-1">Wpisz 9 cyfr bez spacji.</p>
                </div>
              </div>

              {/* ZABEZPIECZENIE: Informacja o wstępnej rezerwacji */}
              <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 mb-6">
                <div className="flex items-start">
                  <AlertTriangle className="w-5 h-5 text-blue-600 mr-2 shrink-0 mt-0.5" />
                  <div>
                    <h4 className="text-sm font-bold text-blue-900 mb-1">Zabezpieczenie rezerwacji</h4>
                    <p className="text-xs text-blue-800">
                      Złożenie tej prośby tworzy rezerwację <strong>wstępną</strong>. Ze względów bezpieczeństwa ostateczne zablokowanie kalendarza nastąpi dopiero po naszym kontakcie telefonicznym.
                    </p>
                  </div>
                </div>
              </div>

              {/* ZABEZPIECZENIE: Math Captcha */}
              <div className="bg-slate-50 border border-slate-200 rounded-xl p-4 mb-6">
                 <label className="block text-sm font-bold text-slate-700 mb-2 flex items-center">
                   <ShieldCheck className="w-4 h-4 mr-1 text-green-600"/> 
                   Ochrona Anty-Bot (wymagane)
                 </label>
                 <div className="flex items-center space-x-3">
                   <span className="text-lg font-bold text-slate-800 bg-white px-4 py-2 rounded-lg border border-gray-300">
                     {num1} + {num2} = 
                   </span>
                   <input 
                     type="number" 
                     required 
                     value={captchaAnswer} 
                     onChange={e => setCaptchaAnswer(e.target.value)} 
                     className={`w-20 p-2 text-center text-lg font-bold rounded-lg border focus:outline-none focus:ring-2 ${captchaError ? 'border-red-500 bg-red-50 focus:ring-red-200' : 'border-gray-300 focus:border-amber-500 focus:ring-amber-200'}`}
                   />
                 </div>
                 {captchaError && <p className="text-xs text-red-500 mt-2 font-bold">Błędny wynik. Spróbuj ponownie.</p>}
              </div>

              <button type="submit" className="w-full bg-slate-900 hover:bg-amber-500 hover:text-slate-900 text-white font-bold text-lg py-4 rounded-xl shadow-lg transition-all flex justify-center items-center">
                <CheckCircle className="w-5 h-5 mr-2" /> Wyślij wstępną rezerwację
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

// --- NOWY KOMPONENT: WIDOK SUKCESU PO ZŁOŻENIU ZAMÓWIENIA ---
function SuccessView({ onBack }) {
  return (
    <div className="max-w-2xl mx-auto animate-in zoom-in duration-500 text-center py-16 px-4">
      <div className="bg-white rounded-3xl shadow-xl border border-gray-100 p-10 md:p-16">
        <div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <CheckCircle className="w-12 h-12 text-green-500" />
        </div>
        <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-4">Rezerwacja Wstępna Przyjęta!</h1>
        <p className="text-lg text-slate-600 mb-8">
          Dziękujemy. Otrzymaliśmy Twoje zgłoszenie. W celu weryfikacji i ostatecznego potwierdzenia wynajmu, skontaktujemy się z Tobą telefonicznie w najbliższym czasie.
        </p>
        <div className="bg-amber-50 border border-amber-200 p-4 rounded-xl mb-8 inline-block text-left">
          <h4 className="font-bold text-amber-900 flex items-center mb-2"><Info className="w-5 h-5 mr-2" /> Co dalej?</h4>
          <ul className="text-sm text-amber-800 space-y-1 list-disc list-inside">
             <li>Oczekuj na połączenie z naszego biura.</li>
             <li>Przygotuj dowód osobisty do okazania przy odbiorze.</li>
             <li>Płatność zrealizujesz przy zwrocie maszyny.</li>
          </ul>
        </div>
        <div>
          <button onClick={onBack} className="bg-slate-900 text-white font-bold px-8 py-4 rounded-xl hover:bg-amber-500 hover:text-slate-900 transition shadow-lg">
            Wróć do strony głównej
          </button>
        </div>
      </div>
    </div>
  );
}