import Link from "next/link";
import SearchBar from "@/components/SearchBar";
import RooflineDivider from "@/components/RooflineDivider";
import PropertyCard from "@/components/PropertyCard";
import VerificationStamp from "@/components/VerificationStamp";
import { PinIcon, MessageIcon } from "@/components/Icons";
import { serverExecuteSafe } from "@/lib/api/server";
import type { Property, Accommodation, Paginated } from "@/lib/types";

export default async function Home() {
  const featuredPage = await serverExecuteSafe<Paginated<Property>>("property.find-all", { verifiedOnly: true, limit: 3 });
  const featured = featuredPage?.items ?? [];

  const staysPage = await serverExecuteSafe<Paginated<Accommodation>>("accommodation.find-all", { limit: 100 });
  const stays = staysPage?.items ?? [];
  const stayCount = (t: string) => String(stays.filter((a) => a.type === t).length);
  return (
    <>
      {/* Hero */}
      <div className="max-w-6xl mx-auto px-6">
        <section className="grid grid-cols-1 lg:grid-cols-[1.2fr_1fr] gap-12 items-center py-16 lg:py-24">
          <div>
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">
              Rental discovery, verified
            </div>
            <h1 className="text-4xl lg:text-5xl leading-tight max-w-[13ch]">
              Find a home in Akim Oda you can trust
            </h1>
            <p className="mt-4 text-lg text-ink-soft max-w-[46ch]">
              Villa checks every landlord and every listing before it goes live — so you can
              search, compare, and book a viewing with confidence.
            </p>
            <SearchBar className="mt-6 max-w-[520px]" />
          </div>
          <div className="relative bg-gradient-to-br from-mist to-sage border border-mist rounded-lg min-h-[320px] flex items-center justify-center">
            <span className="font-mono text-xs uppercase tracking-widest text-ink-soft">
              Featured neighborhood photo
            </span>
            <VerificationStamp variant="property" size={84} className="absolute top-5 right-5" />
          </div>
        </section>
      </div>


      {/* Villa Stay section */}
      <div className="max-w-6xl mx-auto px-6">
        <section className="py-16">
          <div className="bg-gradient-to-br from-forest-deep to-forest rounded-2xl p-8 sm:p-12 relative overflow-hidden">
            <div className="absolute inset-0 opacity-10">
              {[...Array(5)].map((_, i) => (
                <div key={i} className="absolute rounded-full border border-white/30"
                  style={{ width: `${120 + i * 100}px`, height: `${120 + i * 100}px`, bottom: `-${40 + i * 20}px`, right: `-${30 + i * 30}px` }} />
              ))}
            </div>
            <div className="relative grid grid-cols-1 lg:grid-cols-[1fr_auto] gap-8 items-center">
              <div>
                <div className="font-mono text-xs uppercase tracking-widest text-gold mb-3">Introducing Villa Stay</div>
                <h2 className="font-display font-semibold text-3xl sm:text-4xl mb-4 max-w-[20ch]" style={{ color: "#FFFFFF" }}>
                  Hotels & guesthouses, verified and bookable online
                </h2>
                <p className="max-w-[48ch] mb-6" style={{ color: "rgba(255,255,255,0.75)" }}>
                  Villa Stay brings Akim Oda&apos;s guesthouses and hotels online for the first time — with verified listings, room availability, and simple booking in minutes.
                </p>
                <div className="flex flex-wrap gap-4">
                  <Link href="/stay"
                    className="inline-flex items-center justify-center font-semibold text-sm px-7 py-3.5 rounded-pill bg-gold text-forest-deep hover:bg-white transition-colors">
                    Find a place to stay
                  </Link>
                  <Link href="/stay/register"
                    className="inline-flex items-center justify-center font-semibold text-sm px-7 py-3.5 rounded-pill border hover:bg-white/10 transition-colors" style={{ borderColor: "rgba(255,255,255,0.3)", color: "#FFFFFF" }}>
                    List your guesthouse
                  </Link>
                </div>
              </div>
              <div className="hidden lg:grid grid-cols-2 gap-3 w-72">
                {[
                  { label: "Hotels",        count: stayCount("hotel"),  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-7 h-7"><path d="M3 21h18M3 10h18M3 7l9-4 9 4M4 10v11M20 10v11M8 10v11M12 10v11M16 10v11" strokeLinecap="round" strokeLinejoin="round"/></svg> },
                  { label: "Guesthouses",   count: stayCount("guesthouse"), icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-7 h-7"><path d="M3 12l9-9 9 9M5 10v10h14V10" strokeLinecap="round" strokeLinejoin="round"/></svg> },
                  { label: "Lodges",        count: stayCount("lodge"),  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-7 h-7"><path d="M3 17l9-13 9 13H3z" strokeLinecap="round" strokeLinejoin="round"/><path d="M9 17v-4h6v4" strokeLinecap="round"/></svg> },
                  { label: "Serviced apts", count: stayCount("serviced-apartment"),  icon: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" className="w-7 h-7"><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2" strokeLinecap="round"/></svg> },
                ].map(({ label, icon, count }) => (
                  <div key={label} className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl p-4 text-center">
                    <div className="mb-2" style={{ color: "rgba(255,255,255,0.85)" }}>{icon}</div>
                    <div className="font-mono font-bold text-xl" style={{ color: "#FFFFFF" }}>{count}</div>
                    <div className="text-xs" style={{ color: "rgba(255,255,255,0.6)" }}>{label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
      </div>

      <RooflineDivider />

      {/* Why Villa */}
      <div className="max-w-6xl mx-auto px-6">
        <section className="py-16">
          <div className="max-w-[60ch] mb-10">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">
              Why Villa
            </div>
            <h2 className="text-3xl mb-2">Verified, from the landlord to the listing</h2>
            <p className="text-ink-soft text-[15px]">
              Every property and every landlord on Villa goes through a review before it appears
              in search. Look for the Villa stamp — it means we&apos;ve checked the details.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            <div className="bg-white border border-mist rounded-md p-5">
              <div className="mb-3">
                <VerificationStamp variant="property" size={48} />
              </div>
              <h3 className="text-lg mb-2">Verified properties</h3>
              <p className="text-sm text-ink-soft">
                Villa staff confirm the photos, price, and location match what&apos;s listed
                before it goes live.
              </p>
            </div>
            <div className="bg-white border border-mist rounded-md p-5">
              <div className="mb-3">
                <VerificationStamp variant="landlord" size={48} />
              </div>
              <h3 className="text-lg mb-2">Verified landlords</h3>
              <p className="text-sm text-ink-soft">
                Landlords and agents submit identification and ownership details before they can
                list.
              </p>
            </div>
            <div className="bg-white border border-mist rounded-md p-5">
              <div className="mb-3">
                <PinIcon className="w-12 h-12 text-forest" />
              </div>
              <h3 className="text-lg mb-2">Local to your town</h3>
              <p className="text-sm text-ink-soft">
                Start in Akim Oda, with more towns added as Villa grows across the region.
              </p>
            </div>
            <div className="bg-white border border-mist rounded-md p-5">
              <div className="mb-3">
                <MessageIcon className="w-12 h-12 text-forest" />
              </div>
              <h3 className="text-lg mb-2">Direct contact</h3>
              <p className="text-sm text-ink-soft">
                Message the landlord or request a viewing — no middlemen, no hidden fees.
              </p>
            </div>
          </div>
        </section>
      </div>

      {/* Featured listings */}
      <div className="max-w-6xl mx-auto px-6">
        <section className="py-16">
          <div className="max-w-[60ch] mb-10">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">
              Featured listings
            </div>
            <h2 className="text-3xl mb-2">Recently verified in Akim Oda</h2>
            <p className="text-ink-soft text-[15px]">
              A sample of homes verified by Villa this week.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {featured.map((property) => (
              <PropertyCard key={property.id} property={property} />
            ))}
          </div>

          <div className="text-center mt-10">
            <Link
              href="/listings"
              className="inline-flex items-center justify-center font-semibold text-sm px-7 py-3.5 rounded-pill bg-forest text-white hover:bg-forest-deep transition-colors"
            >
              Browse all listings
            </Link>
          </div>
        </section>
      </div>

      {/* Landlord CTA */}
      <div className="max-w-6xl mx-auto px-6">
        <section className="py-16 text-center">
          <div className="max-w-[60ch] mx-auto mb-6">
            <div className="font-mono text-xs uppercase tracking-widest text-gold-deep mb-2">
              For landlords &amp; agents
            </div>
            <h2 className="text-3xl mb-2">List your property on Villa</h2>
            <p className="text-ink-soft text-[15px]">
              Reach tenants searching in your area. Submit your details once — Villa handles
              verification and shows your listing with a trust badge.
            </p>
          </div>
          <Link
            href="/landlord/dashboard"
            className="inline-flex items-center justify-center font-semibold text-sm px-7 py-3.5 rounded-pill bg-gold text-forest-deep hover:bg-gold-deep hover:text-white transition-colors"
          >
            Get started as a landlord
          </Link>
        </section>
      </div>
    </>
  );
}