"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Heart, Star, Quote, Instagram, Facebook, MapPin, Phone, Clock, CheckCircle2, Check, Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="sharp"
      contentWidth="medium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div className="min-h-screen bg-white text-black">
        <div className="container mx-auto px-4">
          <h1 className="text-4xl font-bold text-center py-12">Sweet Bakes</h1>
          <div className="text-center py-8">
            <p className="text-xl text-gray-600 mb-8">Handcrafted pastries and fresh-baked goods made daily</p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
              <div className="p-6 border rounded-lg">
                <Star className="w-8 h-8 text-yellow-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Fresh Daily</h3>
                <p className="text-gray-600">Baked fresh every morning with premium ingredients</p>
              </div>
              <div className="p-6 border rounded-lg">
                <Heart className="w-8 h-8 text-red-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Made with Love</h3>
                <p className="text-gray-600">Every item crafted with care and attention to detail</p>
              </div>
              <div className="p-6 border rounded-lg">
                <Sparkles className="w-8 h-8 text-purple-500 mx-auto mb-4" />
                <h3 className="text-lg font-semibold mb-2">Signature Collection</h3>
                <p className="text-gray-600">Unique recipes passed down through generations</p>
              </div>
            </div>
            <div className="bg-gray-50 p-8 rounded-lg mb-12">
              <h2 className="text-2xl font-bold mb-4">Visit Our Bakery</h2>
              <div className="flex items-center justify-center space-x-4 text-gray-600">
                <MapPin className="w-5 h-5" />
                <span>123 Sweet Street, Bakery Town</span>
              </div>
              <div className="flex items-center justify-center space-x-4 text-gray-600 mt-2">
                <Phone className="w-5 h-5" />
                <span>(555) 123-BAKE</span>
              </div>
              <div className="flex items-center justify-center space-x-4 text-gray-600 mt-2">
                <Clock className="w-5 h-5" />
                <span>Open 6AM - 6PM Daily</span>
              </div>
            </div>
            <div className="text-center">
              <h3 className="text-xl font-semibold mb-4">Follow Us</h3>
              <div className="flex justify-center space-x-4">
                <a href="https://instagram.com" className="text-gray-600 hover:text-pink-500">
                  <Instagram className="w-6 h-6" />
                </a>
                <a href="https://facebook.com" className="text-gray-600 hover:text-blue-500">
                  <Facebook className="w-6 h-6" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}