import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa";

export default function Hero() {
  return (
    <section className="relative w-full bg-flyer-yellow overflow-hidden">
      <div className="absolute inset-0 bg-halftone opacity-50 pointer-events-none" />

      <div className="relative container mx-auto px-4 pt-20 pb-24 md:pt-24 md:pb-32 grid md:grid-cols-2 gap-12 items-center">
        <div className="text-black animate-fade-in-up">
          <h1 className="font-stick uppercase leading-[0.85] tracking-tight text-7xl sm:text-8xl lg:text-[7.5rem] [text-shadow:4px_4px_0_rgba(255,255,255,0.4)]">
            Stein<br />Bruch<br />Fest
          </h1>

          <div className="mt-8 inline-flex flex-wrap items-center gap-3">
            <span className="inline-flex items-center gap-2 bg-flyer-black text-flyer-yellow font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base">
              <FaCalendarAlt /> 15. + 16. Aug.
            </span>
            <span className="inline-flex items-center gap-2 bg-black/10 text-black font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base border-2 border-black">
              <FaMapMarkerAlt /> Steinbruch Friedberg
            </span>
          </div>

          <div className="mt-10 flex flex-wrap gap-4">
            <a
              href="#program"
              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
            >
              Programm
            </a>
            <a
              href="#contact"
              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
            >
              Anfahrt
            </a>
          </div>
        </div>

        <div className="hidden md:flex justify-center animate-fade-in-up [animation-delay:150ms]">
          <div className="animate-photo-sway bg-white p-4 rounded-lg shadow-2xl">
            <img
                src="/images/manschgerl_gelb.svg"
                alt="150 Jahre FF Friedberg"
                className="w-48 sm:w-64 md:w-72 h-auto shrink-0"
              />
          </div>
        </div>
      </div>

      <div className="h-10 md:h-14 bg-flyer-black [clip-path:polygon(0_100%,100%_0,100%_100%)]" />
    </section>
  );
}
