import { Button } from "@/components/ui/button";

const AboutSection = () => {
  return (
    <section id="about" className="py-16">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-gray-900 mb-6">Über TG Laudenbach</h2>
            <div className="space-y-4 text-lg">
              <p>
                Der Volleyballverein TG Laudenbach wurde 1974 gegründet und blickt auf eine erfolgreiche Geschichte zurück. 
                Wir sind mehr als nur ein Sportverein – wir sind eine Gemeinschaft aus begeisterten Volleyballern jeden Alters und Spielniveaus.
              </p>
              <p>
                Unsere Philosophie ist es, Volleyball für alle zugänglich zu machen. Ob Wettkampf oder Freizeit, jung oder alt, 
                Anfänger oder Profi – bei uns findet jeder seinen Platz.
              </p>
              <p>
                Neben dem sportlichen Erfolg ist uns auch das Miteinander wichtig. Regelmäßige Vereinsfeste, gemeinsame Ausflüge und 
                unser jährliches Beachvolleyball-Turnier sorgen für ein aktives Vereinsleben.
              </p>
              <div className="pt-4">
                <Button className="bg-frog-500 hover:bg-frog-600">
                  Mehr über uns erfahren
                </Button>
              </div>
            </div>
          </div>
          <div className="space-y-6">
            <div className="rounded-xl overflow-hidden shadow-md">
              <img 
                src="https://images.unsplash.com/photo-1574271143515-5cddf8da19be?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
                alt="Teamfoto TG Laudenbach" 
                className="w-full h-auto"
              />
            </div>
            <div className="grid grid-cols-2 gap-6">
              <div className="rounded-xl overflow-hidden shadow-md">
                <img 
                  src="https://images.unsplash.com/photo-1529676468461-bd9955e9e4f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
                  alt="Volleyball Training" 
                  className="w-full h-auto"
                />
              </div>
              <div className="rounded-xl overflow-hidden shadow-md">
                <img 
                  src="https://images.unsplash.com/photo-1612214070475-1e73f478188c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
                  alt="Volleyballhalle" 
                  className="w-full h-auto"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default AboutSection;