import { Metadata } from 'next';
import { HeroSection } from '@/components/sections/HeroSection';
import { CartItems } from '@/components/shop/CartItems';
import { CartSummary } from '@/components/shop/CartSummary';

export const metadata: Metadata = {
  title: 'Twój Koszyk | AirProject',
  description: 'Przejrzyj swoje zamówienie na klimatyzatory i usługi montażu przed finalizacją zakupów.',
  alternates: {
    canonical: '/koszyk',
  }
};

export default function KoszykPage() {
  return (
    <main className="bg-slate-50 min-h-screen">
      <HeroSection
        eyebrow="Sklep"
        title="Twój koszyk"
        subtitle="Zanim przejdziesz do płatności, sprawdź szczegóły swojego zamówienia. Możesz łatwo zmienić liczbę urządzeń lub dodać profesjonalny montaż dla wybranych pozycji."
        ctaText="Wróc do sklepu"
        ctaLink="/sklep"
        backgroundImage="https://images.unsplash.com/photo-1556740714-a8395b3bf30f?w=1600&q=80"
      />

      <section className="py-16 md:py-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-start">
          <div className="lg:col-span-2">
            <h2 className="text-2xl font-bold text-primary font-heading mb-8">Lista produktów</h2>
            <CartItems />
          </div>
          <div className="lg:col-span-1">
            <CartSummary />
          </div>
        </div>
      </section>
    </main>
  );
}