import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { MapPin } from "lucide-react";

const attractions = [
  "Port rybacki i przystań nad jeziorem",
  "Rejsy stateczkiem wycieczkowym",
  "Wypożyczalnia sprzętu pływającego",
  "Szlaki turystyczne i rowerowe",
  "Ścieżka zdrowia w lasku sosnowym",
  "Idealne warunki do sportów wodnych",
];

export function Location() {
  return (
    <section id="location" className="py-24 bg-background">
      <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">
            Lokalizacja
          </p>
          <h2 className="font-serif text-4xl md:text-5xl font-bold text-foreground">
            Dźwirzyno
          </h2>
        </div>

        <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
          <div>
            <p className="text-muted-foreground leading-relaxed mb-6">
              Dźwirzyno jest małym, spokojnym letniskiem i uzdrowiskiem usytuowanym tuż nad brzegiem Bałtyku, na zachodnim wybrzeżu, w gminie Kołobrzeg.
            </p>
            <p className="text-muted-foreground leading-relaxed mb-6">
              Turystyczne i rekreacyjne walory Dźwirzyna wynikają głównie z jego atrakcyjnego położenia - tuż nad brzegiem Bałtyku i jednocześnie blisko jeziora Resko Przymorskie.
            </p>
            <p className="text-muted-foreground leading-relaxed mb-8">
              Nadbałtycka plaża w Dźwirzynie jest piaszczysta i szeroka, z wydzielonym strzeżonym latem kąpieliskiem, a od lądu oddzielają ją malownicze wydmy z lasem sosnowym.
            </p>

            <div className="bg-secondary rounded-2xl p-6">
              <h4 className="font-serif font-semibold text-foreground mb-4">
                Atrakcje w okolicy
              </h4>
              <ul className="space-y-3">
                {attractions.map((attraction) => (
                  <li
                    key={attraction}
                    className="flex items-center gap-3 text-muted-foreground text-sm"
                  >
                    <span className="w-1.5 h-1.5 rounded-full bg-primary shrink-0" />
                    {attraction}
                  </li>
                ))}
              </ul>
            </div>
          </div>

          <div>
            <Card className="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm overflow-hidden">
              <div data-slot="card-header" className="@container/card-header has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6">
                <div data-slot="card-title" className="font-semibold leading-none flex items-center space-x-2">
                  <MapPin className="w-5 h-5" />
                  <span>Jak do nas dojechać</span>
                </div>
              </div>
              <div data-slot="card-content" className="px-6">
                <div className="space-y-4">
                  <div>
                    <iframe 
                      title="mapa do dojazdu" 
                      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d982.277750011523!2d15.409488121318219!3d54.15769800054639!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47001337971faad3%3A0x8a2d70122a7ab742!2sPiastowska%209%2C%2078-133%20D%C5%BAwirzyno!5e0!3m2!1spl!2spl!4v1752078233886!5m2!1spl!2spl" 
                      style={{ border: 0 }} 
                      loading="lazy" 
                      referrerPolicy="no-referrer-when-downgrade" 
                      className="w-full h-64 rounded-md"
                    />
                  </div>
                  <div>
                    <p className="font-medium text-foreground">Adres:</p> 
                    <p className="text-muted-foreground">Piastowska 9, Dźwirzyno</p>
                  </div>
                  <div>
                    <p className="font-medium text-foreground">Odległości:</p>
                    <ul className="text-sm text-muted-foreground space-y-1 mt-1">
                      <li>• Morze Bałtyckie: 450m</li> 
                      <li>• Jezioro Resko: 900m</li> 
                      <li>• Kołobrzeg: ~10km</li> 
                      <li>• Mrzeżyno: ~7km</li> 
                      <li>• Grzybowo: ~5km</li>
                    </ul>
                  </div>
                  <div className="bg-green-50 p-3 rounded-lg border border-green-100 dark:bg-green-900/20 dark:border-green-800">
                    <p className="text-sm text-green-800 dark:text-green-300">
                      <strong>Mikroklimat</strong> polecany w leczeniu dróg oddechowych
                    </p>
                  </div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
}