import { FaChurch, FaClock, FaMusic } from "react-icons/fa";
import Dirndlrocker from "../Dirndlrocker";

export default function Program() {
  return (
    <section id="program" className="bg-flyer-black text-white py-20 md:py-28">
      <div className="container mx-auto px-4">
        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-yellow mb-16">
          Programm
        </h2>

        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
          <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
            <h3 className="font-stick uppercase text-3xl mb-6">Samstag</h3>

            <ul className="space-y-3 font-medium mb-8">
              <li className="flex items-center gap-3">
                <FaClock className="shrink-0" /> Beginn: 19 Uhr
              </li>
              <li className="flex items-center gap-3">
                <FaMusic className="shrink-0" /> Ab 21 Uhr Musik
              </li>
            </ul>

            <div className="mt-auto grid grid-cols-2 gap-4">
              <a
                href="https://www.dirndl-rocker.at/"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
              >
                <div className="aspect-[1920/576] w-full">
                  <Dirndlrocker />
                </div>
              </a>
              <a
                href="https://www.instagram.com/dj_baecksn/"
                target="_blank"
                rel="noopener noreferrer"
                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
              >
                <img
                  src="/images/dj_baecksn.png"
                  alt="DJ BÄCKSN"
                  className="w-full h-auto object-contain"
                />
              </a>
            </div>
          </div>

          <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
            <h3 className="font-stick uppercase text-3xl mb-6">Sonntag</h3>

            <ul className="space-y-4 font-medium mb-8">
              <li className="flex items-start gap-3">
                <FaChurch className="shrink-0 mt-1" /> Ab 8.45 Uhr Hl. Messe
              </li>
              <li className="flex items-start gap-3">
                <FaMusic className="shrink-0 mt-1" />
                Frühschoppen mit der{" "}
                <span className="font-bold">Stadtkapelle Friedberg</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}