import { FaHandHoldingHeart, FaTicketAlt } from "react-icons/fa";

const VENDORS = [
  "Trafik Gressenbauer",
  "Der Salon - Monika Krammer",
  "Tapeziermeister Michäler",
  "FF-Mitglieder",
];

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

        <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
          <div className="bg-flyer-black text-white rounded-2xl shadow-xl p-8">
            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6">
              <FaTicketAlt className="text-flyer-yellow" /> Karten
            </h3>
            <div className="flex items-baseline gap-4 mb-6">
              <span className="font-stick text-4xl text-flyer-yellow">€ 10,-</span>
              <span className="uppercase text-sm tracking-wide text-white/70">VVK</span>
              <span className="text-white/40">/</span>
              <span className="font-stick text-4xl text-flyer-yellow">€ 12,-</span>
              <span className="uppercase text-sm tracking-wide text-white/70">AK</span>
            </div>
            <p className="uppercase text-sm tracking-wide text-white/70 mb-3">Erhältlich bei</p>
            <ul className="space-y-2">
              {VENDORS.map((vendor) => (
                <li
                  key={vendor}
                  className="bg-white/10 rounded-lg px-4 py-2 text-sm md:text-base"
                >
                  {vendor}
                </li>
              ))}
            </ul>
          </div>

          <div className="bg-white rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
              <FaHandHoldingHeart className="text-flyer-yellow" /> Reinerlös
            </h3>
            <p className="text-flyer-black/80 leading-relaxed">
              Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
