"use client";

import { motion } from "framer-motion";
import { ChevronDown } from "lucide-react";
import Button from "@/components/ui/Button";

export default function HeroSection() {
  return (
    <section
      className="relative flex min-h-[90vh] items-center overflow-hidden bg-neutral-900"
      aria-label="Willkommen bei TeleNetSystems"
    >
      {/* Background Image */}
      <div className="absolute inset-0">
        <img
          src="/images/gallery/firma1.jpg"
          alt=""
          className="h-full w-full object-cover opacity-70"
          width={1920}
          height={1080}
          aria-hidden="true"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-neutral-900/80 via-neutral-900/50 to-transparent" />
        <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/40 to-transparent" />
      </div>

      {/* Content */}
      <div className="relative mx-auto max-w-6xl px-4 py-24 sm:px-6 lg:px-8">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, ease: "easeOut" }}
          className="max-w-2xl"
        >
          <p className="mb-4 inline-block rounded-full bg-primary-500/20 px-4 py-1.5 text-sm font-semibold uppercase tracking-widest !text-white">
            Aus Reutte. Für die Region.
          </p>
          <h1 className="text-4xl font-bold leading-tight tracking-tight !text-white sm:text-5xl lg:text-hero">
            Technik, die verbindet.{" "}
            <br className="hidden sm:block" />
            <span className="text-primary-400">Service, der da ist.</span>
          </h1>
          <p className="mt-6 max-w-xl text-lg leading-relaxed !text-white/80 sm:text-xl">
            Internet, Fernsehen und Telefonie direkt aus Reutte — mit persönlicher Betreuung, die
            Sie nicht bei einer Hotline suchen müssen.
          </p>
          <div className="mt-10 flex flex-col gap-4 sm:flex-row">
            <Button href="/#kontakt" variant="primary" size="lg">
              Jetzt beraten lassen
            </Button>
            <Button href="/leistungen" variant="outline" size="lg" className="border-white/30 text-white hover:bg-white/10 hover:text-white">
              Unsere Leistungen
            </Button>
          </div>
        </motion.div>
      </div>

      {/* Scroll Indicator */}
      <motion.div
        className="absolute bottom-8 left-1/2 -translate-x-1/2"
        animate={{ y: [0, 8, 0] }}
        transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
      >
        <ChevronDown className="h-6 w-6 text-white/50" aria-hidden="true" />
      </motion.div>
    </section>
  );
}
