import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Paintbrush, Home, Droplets, CheckCircle2 } from "lucide-react";
import { NavLink } from "@/components/NavLink";
import { RentNoticePopup } from "@/components/RentNoticePopup";
import heroImage from "@/assets/hero-painting.jpg";

const Index = () => {
  return (
    <div className="min-h-screen bg-background">
      <RentNoticePopup />
      
      <nav className="border-b bg-card">
        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <h1 className="text-2xl font-bold text-primary">Livingston Painting</h1>
          <div className="flex gap-6">
            <NavLink to="/">Home</NavLink>
            <NavLink to="/contact">Contact</NavLink>
          </div>
        </div>
      </nav>

      <section className="relative h-[600px] flex items-center">
        <div 
          className="absolute inset-0 bg-cover bg-center"
          style={{ backgroundImage: `url(${heroImage})` }}
        >
          <div className="absolute inset-0 bg-primary/70" />
        </div>
        <div className="container mx-auto px-4 relative z-10 text-center text-primary-foreground">
          <h1 className="text-5xl md:text-6xl font-bold mb-6 animate-fade-in">
            Transform Your Space with Expert Painting
          </h1>
          <p className="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">
            Professional residential painting services in Livingston, NJ
          </p>
          <Button 
            size="lg" 
            className="bg-secondary hover:opacity-90 text-secondary-foreground text-lg px-8"
            onClick={() => window.location.href = '/contact'}
          >
            Get Your Free Estimate
          </Button>
        </div>
      </section>

      <section className="py-16 bg-muted/30">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-12">Our Services</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="p-6 hover:shadow-lg transition-shadow">
              <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                <Home className="h-8 w-8 text-primary" />
              </div>
              <h3 className="text-2xl font-semibold mb-3">Interior Painting</h3>
              <p className="text-muted-foreground">
                Refresh your living spaces with our meticulous interior painting services. From single rooms to entire homes, we deliver flawless results.
              </p>
            </Card>

            <Card className="p-6 hover:shadow-lg transition-shadow">
              <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                <Paintbrush className="h-8 w-8 text-primary" />
              </div>
              <h3 className="text-2xl font-semibold mb-3">Exterior Painting</h3>
              <p className="text-muted-foreground">
                Protect and beautify your home's exterior with premium paints and expert application techniques that withstand the elements.
              </p>
            </Card>

            <Card className="p-6 hover:shadow-lg transition-shadow">
              <div className="bg-primary/10 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                <Droplets className="h-8 w-8 text-primary" />
              </div>
              <h3 className="text-2xl font-semibold mb-3">Surface Preparation</h3>
              <p className="text-muted-foreground">
                Proper preparation is key to a lasting finish. We thoroughly prep all surfaces for optimal paint adhesion and longevity.
              </p>
            </Card>
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-4xl font-bold text-center mb-12">Why Choose Livingston Painting?</h2>
          <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            {[
              "Experienced, licensed professionals",
              "High-quality materials and paints",
              "Detailed surface preparation",
              "Clean, efficient work process",
              "Competitive pricing",
              "Customer satisfaction guaranteed",
            ].map((item) => (
              <div key={item} className="flex items-center gap-3">
                <CheckCircle2 className="h-6 w-6 text-secondary flex-shrink-0" />
                <p className="text-lg">{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-16 bg-primary text-primary-foreground">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-4xl font-bold mb-6">Ready to Get Started?</h2>
          <p className="text-xl mb-8 max-w-2xl mx-auto">
            Contact us today for a free, no-obligation estimate on your painting project.
          </p>
          <Button 
            size="lg" 
            className="bg-secondary hover:opacity-90 text-secondary-foreground text-lg px-8"
            onClick={() => window.location.href = '/contact'}
          >
            Request Free Estimate
          </Button>
        </div>
      </section>

      <footer className="border-t bg-card">
        <div className="container mx-auto px-4 py-8 text-center text-muted-foreground">
          <p>&copy; 2024 Livingston Painting. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
};

export default Index;
