import Link from "next/link";
import Image from "next/image";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { MapPin } from "lucide-react";
import prisma from "@/lib/db";
import { TourCard } from "@/components/tour-card";
import { HeroSearch } from "@/components/hero-search";

// Enable Incremental Static Regeneration - revalidate every hour
export const revalidate = 3600;

export default async function HomePage() {
  // Fetch published, non-archived tours with their creators - optimized query
  const tours = await prisma.tour.findMany({
    where: { 
      published: true,
      archived: false,
    },
    take: 6,
    orderBy: { avgRating: "desc" },
    select: {
      id: true,
      title: true,
      slug: true,
      description: true,
      city: true,
      durationMin: true,
      priceCents: true,
      tags: true,
      avgRating: true,
      createdBy: {
        select: {
          id: true,
          name: true,
        },
      },
      images: {
        select: {
          url: true,
        },
        orderBy: { order: "asc" },
        take: 1,
      },
    },
  });

  return (
    <div className="min-h-screen bg-white">
      {/* Hero Section with Background Image */}
      <section className="relative h-[500px] bg-linear-to-br from-blue-900 to-blue-700">
        {/* Background Image */}
        <div className="absolute inset-0 z-0">
          <Image
            src="/assets/zurich.webp"
            alt="Beautiful Zurich cityscape"
            fill
            className="object-cover opacity-40"
            priority
          />
        </div>
        
        {/* Hero Content */}
        <div className="relative z-10 container mx-auto px-4 h-full flex flex-col justify-center">
          <div className="max-w-3xl">
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6 leading-tight">
              Explore Zurich
            </h1>
            <p className="text-xl text-white/90 mb-8">
              Search tours, experiences, and much more...
            </p>
            
            {/* Search Box */}
            <HeroSearch />
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-12 bg-blue-600 text-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <div className="text-4xl font-bold mb-2">500+</div>
              <div className="text-blue-100">Tours Available</div>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">200+</div>
              <div className="text-blue-100">Expert Guides</div>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">10k+</div>
              <div className="text-blue-100">Happy Explorers</div>
            </div>
            <div>
              <div className="text-4xl font-bold mb-2">4.9★</div>
              <div className="text-blue-100">Average Rating</div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured Tours Section */}
      <section className="py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Popular Tours in Zurich
            </h2>
            <p className="text-gray-600 text-lg max-w-2xl mx-auto">
              Handpicked experiences from our expert local guides. Discover the best of Zurich with passionate locals.
            </p>
          </div>
          
          {tours.length > 0 ? (
            <>
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
                {tours.map((tour) => (
                  <TourCard 
                    key={tour.id} 
                    id={tour.id}
                    title={tour.title}
                    slug={tour.slug}
                    description={tour.description}
                    city={tour.city}
                    durationMin={tour.durationMin}
                    priceCents={tour.priceCents}
                    tags={tour.tags}
                    avgRating={tour.avgRating}
                    reviewCount={0}
                    imageUrl={tour.images[0]?.url || null}
                    guideName={tour.createdBy.name || "Guide"}
                  />
                ))}
              </div>
              <div className="text-center">
                <Link href="/tours">
                  <Button size="lg" variant="outline" className="px-8">
                    View All Tours
                  </Button>
                </Link>
              </div>
            </>
          ) : (
            <div className="text-center py-12 bg-white rounded-lg max-w-md mx-auto">
              <MapPin className="h-16 w-16 text-gray-300 mx-auto mb-4" />
              <p className="text-gray-500 text-lg mb-4">
                No tours available yet. Check back soon!
              </p>
              <Link href="/signup">
                <Button>Become a Guide</Button>
              </Link>
            </div>
          )}
        </div>
      </section>

      {/* Why Choose Us Section */}
      <section className="py-16 bg-white">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Why Choose ZuriGuide?
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              The best platform for authentic local experiences in Zurich
            </p>
          </div>
          
          <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
            <Card className="border-2 hover:border-blue-500 transition-colors">
              <CardContent className="p-8 text-center">
                <div className="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center mx-auto mb-6">
                  <svg className="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">Local Expertise</h3>
                <p className="text-gray-600">
                  Discover hidden gems with passionate local guides who know Zurich inside out
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 hover:border-blue-500 transition-colors">
              <CardContent className="p-8 text-center">
                <div className="h-16 w-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-6">
                  <svg className="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">Small Groups</h3>
                <p className="text-gray-600">
                  Intimate tours for personalized experiences and meaningful connections
                </p>
              </CardContent>
            </Card>
            
            <Card className="border-2 hover:border-blue-500 transition-colors">
              <CardContent className="p-8 text-center">
                <div className="h-16 w-16 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-6">
                  <svg className="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
                <h3 className="text-xl font-semibold mb-3">Top Rated</h3>
                <p className="text-gray-600">
                  Verified reviews from real travelers. Quality experiences guaranteed
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 bg-blue-600 text-white">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h2 className="text-3xl md:text-4xl font-bold mb-4">
              Ready to Start Your Journey?
            </h2>
            <p className="text-blue-100 mb-8 text-lg">
              Join thousands of explorers discovering Zurich with local guides
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <Link href="/tours">
                <Button size="lg" variant="secondary" className="px-8 w-full sm:w-auto">
                  Browse All Tours
                </Button>
              </Link>
              <Link href="/signup">
                <Button size="lg" variant="outline" className="px-8 w-full sm:w-auto bg-transparent text-white border-white hover:bg-white hover:text-blue-600">
                  Become a Guide
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t py-12 bg-white">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
            <div>
              <Image
                src="/assets/ZuriGuide Logo.png"
                alt="ZuriGuide Logo"
                width={120}
                height={40}
                className="object-contain mb-4"
              />
              <p className="text-sm text-gray-600">
                Discover Zurich with passionate local guides. Authentic experiences, unforgettable memories.
              </p>
            </div>
            
            <div>
              <h3 className="font-semibold text-gray-900 mb-4">Support</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li><Link href="/help" className="hover:text-blue-600">Help Center</Link></li>
                <li><Link href="/safety" className="hover:text-blue-600">Safety Information</Link></li>
                <li><Link href="/cancellation" className="hover:text-blue-600">Cancellation Options</Link></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold text-gray-900 mb-4">Company</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li><Link href="/about" className="hover:text-blue-600">About Us</Link></li>
                <li><Link href="/careers" className="hover:text-blue-600">Careers</Link></li>
                <li><Link href="/press" className="hover:text-blue-600">Press</Link></li>
              </ul>
            </div>
            
            <div>
              <h3 className="font-semibold text-gray-900 mb-4">Become a Guide</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li><Link href="/signup" className="hover:text-blue-600">Register as Guide</Link></li>
                <li><Link href="/guide-resources" className="hover:text-blue-600">Guide Resources</Link></li>
                <li><Link href="/community" className="hover:text-blue-600">Community Forum</Link></li>
              </ul>
            </div>
          </div>
          
          <div className="border-t pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
            <div className="text-sm text-gray-600">
              © 2025 ZuriGuide. All rights reserved.
            </div>
            <div className="flex gap-6 text-sm text-gray-600">
              <Link href="/terms" className="hover:text-blue-600">Terms & Conditions</Link>
              <Link href="/privacy" className="hover:text-blue-600">Privacy Policy</Link>
              <Link href="/cookies" className="hover:text-blue-600">Cookie Policy</Link>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}