"use client";


import { Phone, Mail, MapPin } from "lucide-react";

export function Contact() {


  return (
    <section id="contact" className="py-24 bg-primary text-primary-foreground">
      <div className="container mx-auto px-4">
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl font-bold mb-8">Kontakt i rezerwacje</h2>
          <p className="text-xl mb-8 text-blue-100">
            Serdecznie zapraszamy na wypoczynek w rodzinnej atmosferze! ❤️
          </p>
          <div className="grid md:grid-cols-3 gap-8 mb-8">
            <div className="text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm bg-white/10 border-white/20">
              <div className="p-6">
                <Phone className="w-8 h-8 mx-auto mb-4 text-yellow-400" />
                <h3 className="text-lg text-white font-semibold mb-2">
                  Telefony
                </h3>
                <a href="tel:+48943585412" className="block hover:opacity-80 transition-opacity">
                  <p className="text-blue-100">+48 943 585 412</p>
                </a>
                <a href="tel:+48664786167" className="block hover:opacity-80 transition-opacity">
                  <p className="text-blue-100">+48 664 786 167</p>
                </a>
              </div>
            </div>
            <div className="text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm bg-white/10 border-white/20">
              <div className="p-6">
                <MapPin className="w-8 h-8 mx-auto mb-4 text-yellow-400" />
                <h3 className="text-lg font-semibold mb-2 text-white">Adres</h3>
                <p className="text-blue-100">Piastowska 9</p>
                <p className="text-blue-100">Dźwirzyno</p>
              </div>
            </div>
            <div className="text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm bg-white/10 border-white/20">
              <div className="p-6">
                <Mail className="w-8 h-8 mx-auto mb-4 text-yellow-400" />
                <h3 className="text-lg font-semibold mb-2 text-white">
                  Email
                </h3>
                <a href="mailto:krystynaciolek@wp.pl" className="block hover:opacity-80 transition-opacity">
                  <p className="text-blue-100">krystynaciolek@wp.pl</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}