import { FlightListingClient } from "@/components/flight/FlightListingClient";
import { NewsletterSection } from "@/components/tour/NewsletterSection";
import { ChevronLeft, ChevronRight, ShieldCheck, Clock, Wallet } from "lucide-react";
import { prisma } from "@/lib/prisma";

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

  return (
    <>
      <section className="relative min-h-[70vh] overflow-hidden text-white pt-24 pb-16">
        {/* Background Airplane Image */}
        <img
          src="https://images.unsplash.com/photo-1436491865332-7a61a109cc05?auto=format&fit=crop&w=1600&q=80"
          alt="Airplane wing"
          className="absolute inset-0 h-full w-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-black/80 via-black/40 to-black/10" />
        
        <div className="relative z-10 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-12 md:mt-0">
              <p className="text-[11px] font-bold tracking-[0.2em] text-[#ff4b4b] uppercase mb-4">
                FLIGHT TICKETS
              </p>
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-[1.15] mb-6 drop-shadow-md">
                Terbang Nyaman,<br />
                Sampai Tujuan Impian
              </h1>
              <p className="text-base md:text-lg text-white/90 mb-10 max-w-xl leading-relaxed font-light">
                Pesan tiket pesawat dengan mudah dan hemat.<br />
                Pilihan maskapai lengkap, harga terbaik setiap hari.
              </p>
              
              {/* Bullet points */}
              <div className="flex flex-col sm:flex-row gap-6 sm:gap-8">
                {[
                  { icon: Wallet, title: "Harga Terbaik", desc: "Harga kompetitif setiap hari" },
                  { icon: ShieldCheck, title: "Pembayaran Aman", desc: "Transaksi aman berbagai metode" },
                  { icon: Clock, title: "Layanan 24/7", desc: "Tim siap membantu kapan pun" },
                ].map((item, idx) => (
                  <div key={idx} className="flex gap-3">
                    <item.icon className="w-5 h-5 text-white shrink-0 mt-0.5" />
                    <div>
                      <h4 className="text-[12px] font-bold mb-0.5">{item.title}</h4>
                      <p className="text-[10px] text-white/70 max-w-[120px]">{item.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right Card: Siap Terbang? */}
            <div className="w-full lg:w-[380px] bg-white rounded-2xl p-8 text-center text-slate-900 shadow-2xl relative mt-8 lg:mt-0">
              <div className="absolute -top-5 left-1/2 -translate-x-1/2 w-10 h-10 bg-[#d32f2f] rounded-full flex items-center justify-center text-white border-4 border-white shadow-md">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m17.8 19.2 4.6-4.6a2 2 0 0 0 0-2.8l-11-11a2 2 0 0 0-2.8 0l-4.6 4.6a2 2 0 0 0 0 2.8l11 11a2 2 0 0 0 2.8 0Z"/><path d="m22 2-7 20-4-9-9-4 20-7Z"/></svg>
              </div>
              <h3 className="text-2xl font-bold mt-4 mb-2">Siap Terbang?</h3>
              <p className="text-[13px] text-slate-500 mb-6 px-4">
                Temukan penerbangan terbaik ke berbagai destinasi favoritmu.
              </p>
              <button className="w-full bg-[#d32f2f] text-white py-3.5 rounded-xl font-bold text-sm hover:bg-[#b71c1c] transition-colors shadow-md flex items-center justify-center gap-2">
                Cari Penerbangan <ChevronRight className="w-4 h-4" />
              </button>
            </div>
            
          </div>
        </div>
        
        {/* Navigation Arrows & Dots */}
        <div className="absolute inset-x-0 bottom-10 z-10 hidden md:flex items-center justify-between px-10">
          <button className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center hover:bg-white/40 transition-colors">
            <ChevronLeft className="w-5 h-5 text-white" />
          </button>
          <div className="flex gap-2">
            <div className="w-6 h-1.5 bg-[#d32f2f] rounded-full" />
            <div className="w-1.5 h-1.5 bg-white/50 rounded-full" />
            <div className="w-1.5 h-1.5 bg-white/50 rounded-full" />
            <div className="w-1.5 h-1.5 bg-white/50 rounded-full" />
          </div>
          <button className="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center hover:bg-white/40 transition-colors">
            <ChevronRight className="w-5 h-5 text-white" />
          </button>
        </div>
      </section>

      <section className="bg-[#fcfdfd] pb-24 relative">
        <FlightListingClient flights={flights} />
        <div className="max-w-[1300px] mx-auto w-full px-4 sm:px-6 mt-10">
          <NewsletterSection />
        </div>
      </section>
    </>
  );
}