import { EventCard } from "@/components/events/EventCard";
import { Navbar } from "@/components/layout/Navbar";
import { Footer } from "@/components/layout/Footer";
import { appName } from "@/lib/siteConfig";
import { Calendar, UserPlus, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";

type Event = {
  id: string;
  title: string;
  description?: string;
  startDate: string;
  endDate: string;
  registrationDeadline?: string | null;
  goLiveAt?: string;
  price: number;
  picture?: string;
};

import { apiFetch } from "@/lib/api";

const FEATURES = [
  { icon: CalendarCheck, title: "Meaningful Events", description: "Events designed to inspire, encourage and strengthen your faith." },
  { icon: Calendar, title: "Easy Registration", description: "Simple and secure registration so you can focus on what matters." },
  { icon: Users, title: "Community", description: "Connect with others and grow in a supportive and loving community." },
  { icon: Heart, title: "Make an Impact", description: "Be part of what God is doing and make a difference together." },
];

export default async function HomePage() {
    const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
    const now = Date.now();
    const upcoming = (events || []).filter(e => {
        const t = new Date(e.startDate).getTime();
        return !isNaN(t) && t > now;
    });
    const sorted = [...upcoming].sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());

    return (
        <div className="min-h-screen flex flex-col">
            <Navbar />

            <main className="flex-1">
                <section className="relative overflow-hidden bg-gradient-to-br from-brand-50 via-white to-brand-50 py-20 text-center">
                    <div className="absolute inset-0 pointer-events-none" aria-hidden="true">
                        <div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-brand-100/60 blur-3xl" />
                        <div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full bg-brand-100/40 blur-3xl" />
                    </div>
                    <div className="relative max-w-2xl mx-auto px-4">
                        {sorted.length > 0 && (
                            <div className="inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-full bg-white border border-brand-200 text-brand-700 shadow-sm mb-5">
                                <CalendarCheck className="w-3.5 h-3.5" />
                                {sorted.length} upcoming event{sorted.length === 1 ? "" : "s"}
                            </div>
                        )}
                        <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-gray-900">Welcome to {appName}</h1>
                        <p className="text-gray-600 text-lg mb-8">Experience unforgettable moments. Powered by purpose.</p>
                        <div className="flex flex-wrap items-center justify-center gap-3">
                            <a href="/events" className="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white rounded-xl hover:bg-brand-700 shadow-sm font-medium transition-colors">
                                <Calendar className="w-4 h-4" />
                                View Events
                            </a>
                            <a href="/register" className="inline-flex items-center gap-2 px-6 py-2.5 border border-brand-600 text-brand-600 rounded-xl hover:bg-brand-50 font-medium transition-colors">
                                <UserPlus className="w-4 h-4" />
                                Join Us
                            </a>
                        </div>
                    </div>
                </section>

                <section className="py-12 px-4 max-w-7xl mx-auto">
                    <div className="flex items-center justify-between mb-6">
                        <h2 className="text-2xl font-semibold text-gray-900">Upcoming Events</h2>
                        <a href="/events" className="hidden sm:inline-flex items-center gap-1 text-sm font-medium text-brand-600 hover:underline">
                            View all events
                            <ArrowRight className="w-3.5 h-3.5" />
                        </a>
                    </div>
                    {sorted.length === 0 ? (
                        <div className="text-center py-12 border rounded-xl bg-gray-50">
                            <CalendarCheck className="w-8 h-8 text-gray-300 mx-auto mb-2" />
                            <p className="text-gray-500 text-sm">No upcoming events right now — check back soon.</p>
                        </div>
                    ) : (
                        <div className="grid gap-6 md:grid-cols-3 sm:grid-cols-2">
                            {sorted.slice(0, 3).map(event => (
                                <EventCard key={event.id} event={event} />
                            ))}
                        </div>
                    )}
                    <div className="text-center mt-8 sm:hidden">
                        <a href="/events" className="inline-flex items-center gap-1 text-brand-600 hover:underline text-sm font-medium">
                            View all events
                            <ArrowRight className="w-3.5 h-3.5" />
                        </a>
                    </div>
                </section>

                <section className="bg-gray-50 py-14 px-4">
                    <div className="max-w-6xl mx-auto grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
                        {FEATURES.map(f => {
                            const Icon = f.icon;
                            return (
                                <div key={f.title} className="text-center sm:text-left">
                                    <div className="w-12 h-12 rounded-xl bg-brand-50 flex items-center justify-center mb-3 mx-auto sm:mx-0">
                                        <Icon className="w-6 h-6 text-brand-600" />
                                    </div>
                                    <h3 className="font-semibold text-gray-900 mb-1">{f.title}</h3>
                                    <p className="text-sm text-gray-600">{f.description}</p>
                                </div>
                            );
                        })}
                    </div>
                </section>

                <section className="py-12 px-4">
                    <div className="max-w-3xl mx-auto text-center">
                        <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-brand-50 mb-4">
                            <ShieldCheck className="w-6 h-6 text-brand-600" />
                        </div>
                        <h2 className="text-xl font-semibold text-gray-900 mb-2">Secure & reliable</h2>
                        <p className="text-sm text-gray-600">Your details and payments are handled securely from registration through to the day of the event.</p>
                    </div>
                </section>
            </main>

            <Footer />
        </div>
    );
}