import { Button } from "@/components/ui/button";
import { Volleyball } from "lucide-react";

const Hero = () => {
  return (
    <div
      className="relative min-h-[600px] md:min-h-[700px] lg:min-h-[800px] bg-cover bg-center bg-no-repeat pt-28 pb-16"
      style={{ backgroundImage: "url('/images/abteilung-bg.jpg')" }}
    >
      <div className="absolute inset-0 bg-black/15 z-0" />

      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex flex-col md:flex-row items-center">
          <div className="md:w-1/2 text-white">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
              Willkommen bei der <span className="text-white">TG Laudenbach - Abteilung Volleyball</span>
            </h1>
            <p className="mt-4 text-lg md:text-xl">
              Volleyball mit Leidenschaft und Teamgeist – werde Teil unserer Gemeinschaft!
            </p>
            <div className="mt-8 flex flex-wrap gap-4">
              <Button className="bg-white text-frog-700 hover:bg-gray-100">
                Training besuchen
              </Button>
              <Button className="bg-white text-frog-700 hover:bg-gray-100">
                Teams kennenlernen
              </Button>
            </div>
          </div>
          <div className="md:w-1/2 flex justify-center mt-8 md:mt-0">
            <div className="relative">
              <div className="absolute -inset-1 rounded-full bg-white/20 blur-xl"></div>
              <div className="relative bg-white/10 backdrop-blur-sm h-64 w-64 rounded-full flex items-center justify-center border border-white/30">
                <Volleyball className="h-24 w-24 text-white animate-bounce-slow" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Hero;
