import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

const pricingData = [
  {
    name: "Pokój 1-osobowy (31)",
    low: 120,
    high: 150,
    lowEnd: 120,
  },
  {
    name: "Pokój 2-osobowy (30, 32)",
    low: 140,
    high: 170,
    lowEnd: 140,
  },
  {
    name: "Pokój studio - 2 pokoje, łazienka dla 5 osób (27 - 29)",
    low: 300,
    high: 350,
    lowEnd: 300,
  },
  {
    name: "Domek 2-osobowy (1, 5, 6, 10, 20)",
    low: 160,
    high: 200,
    lowEnd: 160,
  },
  {
    name: "Domek 3-osobowy (2, 3, 7, 8, 14, 15)",
    low: 190,
    high: 230,
    lowEnd: 190,
  },
  {
    name: "Domek 4-osobowy z 1 sypialnią (4, 9, 11, 12, 13)",
    low: 200,
    high: 270,
    lowEnd: 200,
  },
  {
    name: "Domek 4-osobowy z 2 sypialniami (21 - 26)",
    low: 250,
    high: 320,
    lowEnd: 250,
  },
];

export function Pricing() {
  return (
    <section id="pricing" className="py-24 bg-secondary">
      <div className="container mx-auto px-6">
        <div className="text-center mb-16">
          <p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
            Cennik
          </p>
          <h2 className="font-serif text-4xl md:text-5xl font-bold text-foreground">
            Cennik 2026
          </h2>
        </div>

        <div className="max-w-4xl mx-auto">
          <Card className="border-none shadow-lg">
            <CardHeader>
              <CardTitle className="font-serif">Ceny za dobę (PLN)</CardTitle>
              <CardDescription>
                Doba rozpoczyna się od godziny 14:00 i trwa do godziny 10:00 w dniu wyjazdu
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="overflow-x-auto">

                <p className="font-serif text-2xl text-center md:text-2xl font-bold text-foreground">
                  Cennik zostanie zaktualizowany na dniach
                </p>

                 {/* <table className="w-full">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-4 px-3 text-sm font-medium text-muted-foreground">
                        Rodzaj zakwaterowania
                      </th>
                      <th className="text-center py-4 px-3 text-sm font-medium text-muted-foreground">
                        01.06 - 11.07
                      </th>
                      <th className="text-center py-4 px-3 text-sm font-medium text-muted-foreground bg-accent/50 rounded-t-lg">
                        12.07 - 16.08
                      </th>
                      <th className="text-center py-4 px-3 text-sm font-medium text-muted-foreground">
                        17.08 - 30.09
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {pricingData.map((item, index) => (
                      <tr
                        key={item.name}
                        className={`border-b border-border/50 transition-colors hover:bg-secondary/50 ${
                          index === pricingData.length - 1 ? "border-none" : ""
                        }`}
                      >
                        <td className="py-4 px-3 text-sm font-medium text-foreground">
                          {item.name}
                        </td>
                        <td className="text-center py-4 px-3 text-sm text-muted-foreground">
                          {item.low} zł
                        </td>
                        <td className="text-center py-4 px-3 text-sm font-semibold text-foreground bg-accent/30">
                          {item.high} zł
                        </td>
                        <td className="text-center py-4 px-3 text-sm text-muted-foreground">
                          {item.lowEnd} zł
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>*/}
              </div>

              {/* <div className="mt-8 p-6 border-t border-border rounded-xl text-left">
                <h3 className="font-semibold text-foreground mb-4">Informacje dodatkowe:</h3>
                <ul className="space-y-2 text-muted-foreground mb-6">
                  <li>• Rezerwujemy pobyty minimum od 6 noclegów</li>
                  <li>• Zwierzęta - 15 zł/dzień</li>
                  <li>• Opłata klimatyczna wg ustaleń Gminy Kołobrzeg</li>
                  <li>• Opłata za zużycie energii elektrycznej – 2,50 zł / kWh</li>
                  <li>• Stałym klientom udzielamy rabatu 😊</li>
                </ul>
                <div className="p-6 bg-secondary rounded-xl">
                  <p className="font-medium text-foreground">Numer konta bankowego ING:</p>
                  <p className="text-muted-foreground font-mono mt-1">78 1050 1559 1000 0092 4707 1898</p>
                </div>
              </div> */}
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
}