import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Phone } from "lucide-react";

export default function HomePage() {
  return (
    <div className="font-sans text-gray-800">
      {/* Header */}
      <header className="bg-white shadow-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto flex items-cenater justify-between p-4">
          <div className="flex items-center gap-3">
            <img src="/ben-stucco-logo.png" alt="Ben Stucco Logo" className="h-12 w-auto" />
            <h1 className="text-2xl font-bold text-blue-800">Ben Stucco & Exterior Cladding</h1>
          </div>
          <a href="tel:4166626614"><Button className="bg-blue-700 hover:bg-blue-800 text-white">Free Estimate</Button></a>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative bg-blue-900 text-white">
        <div className="absolute inset-0 bg-blue-900/70"></div>
        <div className="relative max-w-7xl mx-auto px-6 py-28 text-center">
          <div className="flex justify-center mb-6">
            <img src="/ben-stucco-logo.png" alt="Ben Stucco Logo" className="h-24 w-auto drop-shadow-lg" />
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-4">Professional Stucco & Exterior Cladding Contractors in Maple, Ontario</h2>
          <p className="text-lg md:text-xl mb-8">High-quality stucco installation for commercial & residential</p>
          <div className="flex justify-center gap-4">
            <a href="tel:4166626614"><Button className="bg-white text-blue-800 hover:bg-gray-100">Free Estimate</Button></a>
            <a href="tel:4166626614"><Button variant="outline" className="border-white text-white hover:bg-white/10 flex items-center gap-2"><Phone size={18} /> Call Now</Button></a>
          </div>
        </div>
      </section>

      {/* Trust Indicators */}
      <section className="bg-gray-50 py-16">
        <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6 px-6 text-center">
          {["Commercial & Residential Specialists", "New or Old Houses", "Clean Finishes", "Fully Insured"].map((item) => (
            <Card key={item} className="rounded-2xl shadow-sm">
              <CardContent className="p-6 font-semibold text-blue-800">{item}</CardContent>
            </Card>
          ))}
        </div>
      </section>

      {/* Services */}
      <section className="bg-white py-20">
        <div className="max-w-7xl mx-auto px-6">
          <h3 className="text-3xl font-bold text-center text-blue-800 mb-12">Our Stucco Services</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {["New EIFS Stucco & Stucco Repair", "Metal Siding", "Veneer Stone"].map((service) => (
              <Card key={service} className="rounded-2xl shadow-md">
                <CardContent className="p-8">
                  <h4 className="text-xl font-semibold mb-2">{service}</h4>
                  <p>Professional workmanship focused on durability, detail, and long-lasting results.</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Project Gallery Placeholder */}
      <section className="bg-gray-50 py-20">
        <div className="max-w-7xl mx-auto px-6">
          <h3 className="text-3xl font-bold text-center text-blue-800 mb-12">Recent Projects</h3>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {[1, 2, 3, 4, 5, 6].map((i) => (
              <div key={i} className="h-56 bg-white rounded-2xl shadow-inner flex items-center justify-center text-gray-400">
                Project Image
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="bg-blue-800 text-white py-20 text-center">
        <h3 className="text-3xl font-bold mb-4">Request Your Free Stucco Estimate</h3>
        <p className="mb-8">Serving Maple and surrounding Ontario areas</p>
        <a href="tel:4166626614"><Button className="bg-white text-blue-800 hover:bg-gray-100">Call Now – 416‑662‑6614</Button></a>
      </section>

      {/* Footer */}
      <footer className="bg-white py-6 text-center text-sm text-gray-500">
        © {new Date().getFullYear()} Ben Stucco · Maple, Ontario
      </footer>
    </div>
  );
}