import { Shield, Baby, Car, Flame } from "lucide-react";

const features = [
  { icon: Shield, label: "Teren ogrodzony i bezpieczny" },
  { icon: Baby, label: "Plac zabaw dla dzieci" },
  { icon: Flame, label: "Miejsce na ognisko i grill" },
];

export function About() {
  return (
    <section id="about" className="py-24 bg-background">
      <div className="container mx-auto px-6">
        <div className="max-w-6xl mx-auto">
          <div className="grid lg:grid-cols-2 gap-16 items-center">
            <div>
              <p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
                O naszym obiekcie
              </p>
              
              <div className="space-y-6 text-muted-foreground leading-relaxed">
                <p>
                  Ośrodek jest położony w cichym, spokojnym miejscu 450 m od morza i 900 m od jeziora Resko. Oferujemy domki letniskowe oraz pokoje, w pełni wyposażone z łazienkami.
                </p>
                <p>
                  Teren obiektu jest ogrodzony i bezpieczny. Na terenie obiektu jest plac zabaw dla dzieci (huśtawki, piaskownica, itd.) jest również możliwość parkowania samochodu.
                </p>
                <p>
                  Zadbaliśmy też o wydzielone miejsce na ognisko lub grill. Zapewniamy miłą i rodzinną atmosferę!
                </p>
              </div>
            </div>
            
            <div className="bg-secondary rounded-2xl p-8">
              <h3 className="font-serif text-xl font-semibold text-foreground mb-6">
                Udogodnienia na terenie
              </h3>
              <div className="grid gap-4">
                {features.map((feature) => (
                  <div
                    key={feature.label}
                    className="flex items-center gap-4 p-4 bg-card rounded-xl transition-all hover:shadow-sm"
                  >
                    <div className="w-12 h-12 rounded-full bg-accent/50 flex items-center justify-center shrink-0">
                      <feature.icon className="w-5 h-5 text-primary" />
                    </div>
                    <span className="text-foreground font-medium">{feature.label}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}