import { EventListingClient } from "@/components/event/EventListingClient";
import { NewsletterSection } from "@/components/tour/NewsletterSection";
import { Search, Ticket, ShieldCheck, HeadphonesIcon } from "lucide-react";
import { prisma } from "@/lib/prisma";

export default async function EventPage() {
  const events = await prisma.event.findMany({
    orderBy: [{ isFeatured: "desc" }, { sortOrder: "asc" }],
  });

  return (
    <>
      <section className="relative min-h-[60vh] md:min-h-[75vh] overflow-hidden text-white pt-24 pb-16 bg-[#1a0505]">
        {/* Background Overlay */}
        <div className="absolute inset-0 bg-gradient-to-r from-[#8a0f0f] via-[#5a0606]/80 to-[#1a0505]/90 z-10" />
        <div className="absolute inset-0 bg-gradient-to-t from-[#fcfdfd] via-transparent to-transparent z-10 h-full w-full" style={{ top: '80%' }} />
        
        {/* Concert background image */}
        <img
          src="https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1600&q=80"
          alt="Concert Crowd"
          className="absolute inset-0 h-full w-full object-cover mix-blend-overlay opacity-60 z-0"
        />
        
        <div className="relative z-30 mx-auto flex h-full max-w-[1300px] items-center px-4 sm:px-6">
          <div className="flex flex-col lg:flex-row items-center justify-between w-full gap-12">
            
            {/* Left Content */}
            <div className="flex-1 max-w-2xl mt-8 md:mt-0">
              <p className="text-[11px] font-bold tracking-[0.1em] text-white/90 uppercase mb-4">
                EVENT TERBAIK UNTUKMU
              </p>
              <h1 className="text-4xl md:text-5xl lg:text-[56px] font-bold leading-[1.15] mb-6 text-white drop-shadow-md">
                Temukan Event Seru,<br />
                <span className="text-[#ff4b4b]">Pengalaman Tak Terlupakan</span>
              </h1>
              <p className="text-base md:text-[16px] text-white/90 mb-8 max-w-lg leading-relaxed font-light">
                Dapatkan tiket event pilihan dengan harga terbaik.<br />
                Konser, festival, workshop, hingga event wisata semua ada di sini!
              </p>
              
              {/* Search Bar Inline */}
              <div className="flex flex-col sm:flex-row items-center gap-2 bg-white p-2 rounded-3xl w-full max-w-lg shadow-2xl">
                <input 
                  type="text" 
                  placeholder="Cari event, konser, atau kegiatan..."
                  className="w-full bg-transparent px-4 py-3 outline-none text-slate-800 placeholder-slate-400 text-sm"
                />
                <button className="w-full sm:w-auto bg-[#d32f2f] text-white px-8 py-3.5 rounded-2xl font-bold text-sm hover:bg-[#b71c1c] transition-colors shadow-md flex items-center justify-center gap-2 shrink-0">
                  <Search className="w-4 h-4" /> Cari Event
                </button>
              </div>
            </div>

            {/* Right Cards (Glassmorphism) */}
            <div className="w-full lg:w-[420px] flex flex-col gap-4 relative mt-8 lg:mt-0">
              {[
                { icon: Ticket, title: "Tiket Resmi & Terpercaya", desc: "100% tiket resmi, aman dan terverifikasi." },
                { icon: ShieldCheck, title: "Pembayaran Aman", desc: "Transaksi cepat, aman, dan terlindungi." },
                { icon: HeadphonesIcon, title: "Customer Support 24/7", desc: "Tim kami siap membantu kapan pun Anda butuhkan." },
              ].map((item, idx) => (
                <div key={idx} className="flex items-center gap-5 bg-white/10 backdrop-blur-md border border-white/20 rounded-2xl p-5 hover:bg-white/20 transition-colors shadow-xl">
                  <div className="w-12 h-12 rounded-full bg-white flex items-center justify-center shrink-0 shadow-sm">
                    <item.icon className="w-6 h-6 text-[#d32f2f]" />
                  </div>
                  <div>
                    <h4 className="text-[14px] font-bold text-white mb-1">{item.title}</h4>
                    <p className="text-[12px] text-white/80 leading-snug">{item.desc}</p>
                  </div>
                </div>
              ))}
            </div>
            
          </div>
        </div>
      </section>

      <section className="bg-[#fcfdfd] pb-24 relative z-40">
        <EventListingClient events={events} />
        <div className="max-w-[1300px] mx-auto w-full px-4 sm:px-6">
          {/* Overriding Newsletter Section color for event if needed, but standard is fine */}
          <NewsletterSection />
        </div>
      </section>
    </>
  );
}