import { Hero } from "@/components/hero";
import { Services } from "@/components/services";
import { Pricing } from "@/components/pricing";
import { ContactSection } from "@/components/contact-section";
import { Footer } from "@/components/footer";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { CheckCircle2 } from "lucide-react";
import Image from "next/image";

export default function Home() {
  return (
    <main className="bg-white text-neutral-900">
      <Hero />
      
      {/* Why Choose Us Section with Bright Background */}
      <section className="relative py-32 overflow-hidden bg-neutral-50">
        <div className="absolute inset-0 -z-10">
          <Image 
            src="https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2069&auto=format&fit=crop"
            alt="Bright Workspace"
            fill
            className="object-cover opacity-5"
          />
        </div>

        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
            <div>
              <Heading className="text-4xl md:text-5xl mb-6 text-neutral-900 font-bold">Why Choose Websitter?</Heading>
              <Subheading className="mb-10 text-neutral-600 text-lg font-medium">
                We don't just build websites; we build growth engines for your business. Our process is designed for speed, quality, and results.
              </Subheading>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                {[
                  "Modern & mobile-friendly designs",
                  "SEO-optimized for local search",
                  "Fast delivery (usually within 7 days)",
                  "Affordable pricing for small businesses",
                  "Free demo before you commit",
                  "24/7 Dedicated Support",
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3 group">
                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary transition-colors">
                      <CheckCircle2 className="w-5 h-5 text-primary group-hover:text-white" />
                    </div>
                    <span className="font-bold text-neutral-800">{item}</span>
                  </div>
                ))}
              </div>
            </div>
            
            <div className="relative group">
              <div className="absolute -inset-4 bg-primary/5 rounded-3xl blur-2xl opacity-50" />
              <div className="relative aspect-video rounded-2xl overflow-hidden border border-neutral-200 shadow-2xl">
                <Image 
                  src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=2015&auto=format&fit=crop"
                  alt="Analytics Preview"
                  fill
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
                <div className="absolute inset-0 bg-white/10 flex items-center justify-center">
                  <div className="p-8 bg-white/95 backdrop-blur-md rounded-2xl border border-neutral-200 shadow-2xl max-w-xs text-center transform group-hover:scale-105 transition-transform duration-500">
                    <div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4 shadow-lg">
                      <div className="w-0 h-0 border-t-[10px] border-t-transparent border-l-[15px] border-l-white border-b-[10px] border-b-transparent ml-1" />
                    </div>
                    <p className="text-lg font-black text-neutral-900 mb-2 uppercase tracking-widest">Free Demo</p>
                    <p className="text-sm text-neutral-600 leading-relaxed font-medium">We build your site first. You pay only if you love it.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <Services />
      <Pricing />
      <ContactSection />
      <Footer />
    </main>
  );
}