import { Head, Link } from "@inertiajs/react";
import { Nav } from "@/components/sections/Nav";
import { Hero } from "@/components/sections/Hero";
import { ProblemStats } from "@/components/sections/ProblemStats";
import { Pathway } from "@/components/sections/Pathway";
import { Programmes } from "@/components/sections/Programmes";
import { ImpactStrip } from "@/components/sections/ImpactStrip";
import { CountriesStrip } from "@/components/sections/CountriesStrip";
import { Stories } from "@/components/sections/Stories";
import { Partners } from "@/components/sections/Partners";
import { OpportunitiesHub } from "@/components/sections/OpportunitiesHub";
import { CtaBanner } from "@/components/sections/CtaBanner";
import { Footer } from "@/components/sections/Footer";

interface Post {
  id: number;
  title: string;
  slug: string;
  excerpt: string | null;
  image_url: string | null;
  category: string;
  published_at: string;
}

export default function Home({ latestPosts }: { latestPosts?: Post[] }) {
  return (
    <>
      <Head title="Home" />
      <Nav />
      <main>
        <Hero />
        <ProblemStats />
        <Pathway />
        <Programmes />
        <ImpactStrip />
        <CountriesStrip />
        <Stories />
        <Partners />

        {/* News & Events */}
        {latestPosts && latestPosts.length > 0 && (
          <section className="border-b border-border px-16 py-20 max-md:px-8">
            <div className="mb-10 flex items-end justify-between max-md:flex-col max-md:items-start max-md:gap-3">
              <div>
                <p className="mb-2 font-mono text-[11px] font-bold tracking-[0.18em] text-amber uppercase">
                  Latest News
                </p>
                <h2 className="text-[clamp(22px,2.5vw,34px)] font-bold leading-tight text-navy">
                  News &amp; Updates
                </h2>
              </div>
              <Link href="/newsletter" className="text-sm font-semibold text-amber hover:underline">
                All news →
              </Link>
            </div>
            <div className="grid gap-6 md:grid-cols-3">
              {latestPosts.map((post) => (
                <Link
                  key={post.id}
                  href={`/news/${post.slug}`}
                  className="group flex flex-col overflow-hidden rounded-2xl border border-border bg-white shadow-sm transition-shadow hover:shadow-md"
                >
                  {post.image_url ? (
                    <img
                      src={post.image_url}
                      alt={post.title}
                      className="h-44 w-full object-cover transition-transform duration-300 group-hover:scale-105"
                    />
                  ) : (
                    <div className="flex h-44 items-center justify-center bg-surface text-4xl">
                      📰
                    </div>
                  )}
                  <div className="flex flex-1 flex-col p-5">
                    <span className="mb-2 text-xs font-semibold uppercase tracking-widest text-amber">
                      {post.category}
                    </span>
                    <p className="mb-2 font-serif text-base font-normal leading-snug text-navy group-hover:text-amber transition-colors">
                      {post.title}
                    </p>
                    <p className="mt-auto text-xs text-muted">
                      {new Date(post.published_at).toLocaleDateString("en-GB", {
                        day: "numeric",
                        month: "long",
                        year: "numeric",
                      })}
                    </p>
                  </div>
                </Link>
              ))}
            </div>
          </section>
        )}

        <OpportunitiesHub />
        <CtaBanner />
      </main>
      <Footer />
    </>
  );
}
