"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="large"
      sizing="large"
      background="none"
      cardStyle="solid-accent"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <div className="min-h-screen bg-gray-100 flex items-center justify-center">
          <div className="text-center">
            <h1 className="text-4xl font-bold mb-4">Dubai Super Premium</h1>
            <p className="text-lg text-gray-600">Premium Real Estate Solutions</p>
          </div>
        </div>
      </div>

      <div id="hero" data-section="hero">
        <div className="min-h-screen bg-white flex items-center justify-center">
          <div className="text-center max-w-4xl mx-auto px-6">
            <h2 className="text-5xl font-bold mb-6">Luxury Properties in Dubai</h2>
            <p className="text-xl text-gray-600 mb-8">Discover luxury real estate investments in Dubai's most prestigious locations. From waterfront villas to downtown penthouses, we connect discerning buyers with Dubai's finest properties.</p>
            <div className="flex gap-4 justify-center">
              <a href="#properties" className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Explore Properties</a>
              <a href="#contact" className="border border-blue-600 text-blue-600 px-6 py-3 rounded-lg hover:bg-blue-50">Schedule Consultation</a>
            </div>
          </div>
        </div>
      </div>

      <div id="properties" data-section="properties">
        <div className="py-16 bg-gray-50">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-12">
              <h3 className="text-3xl font-bold mb-4">Featured Properties</h3>
              <p className="text-lg text-gray-600">Hand-selected luxury properties across Dubai's most sought-after neighborhoods</p>
            </div>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766676115125-qy80b7pe.jpg" alt="Downtown penthouse" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h4 className="text-xl font-semibold mb-2">Modern Downtown Penthouse</h4>
                  <p className="text-gray-600 mb-2">3 Bedrooms, 3 Bathrooms, Marina View</p>
                  <p className="text-2xl font-bold text-blue-600">3.2M AED</p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766676116024-zk7eqt6h.jpg" alt="Beachfront villa" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h4 className="text-xl font-semibold mb-2">Beachfront Luxury Villa</h4>
                  <p className="text-gray-600 mb-2">5 Bedrooms, 6 Bathrooms, Private Beach</p>
                  <p className="text-2xl font-bold text-blue-600">5.8M AED</p>
                </div>
              </div>
              <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766676116944-8eu4qi5d.jpg" alt="Office residence" className="w-full h-48 object-cover" />
                <div className="p-6">
                  <h4 className="text-xl font-semibold mb-2">Business Bay Office Residence</h4>
                  <p className="text-gray-600 mb-2">2 Bedrooms, 2 Bathrooms, City View</p>
                  <p className="text-2xl font-bold text-blue-600">2.1M AED</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="about" data-section="about">
        <div className="py-16 bg-white">
          <div className="max-w-4xl mx-auto px-6 text-center">
            <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">Who We Are</span>
            <p className="text-lg text-gray-600 mt-4">With over two decades of experience in Dubai real estate, we are the trusted partner for international investors and high-net-worth individuals seeking premium properties. Our expert team combines market insights with personalized service to help you find the perfect investment opportunity in one of the world's most dynamic real estate markets.</p>
          </div>
        </div>
      </div>

      <div id="services" data-section="services">
        <div className="py-16 bg-gray-50">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-12">
              <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">Expert Guidance</span>
              <h3 className="text-3xl font-bold mb-4 mt-2">Our Services</h3>
              <p className="text-lg text-gray-600">Comprehensive real estate solutions tailored to your needs</p>
            </div>
            <div className="grid md:grid-cols-3 gap-8">
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766676114079-yjuz3xj2.jpg" alt="Property search" className="w-full h-48 object-cover rounded-lg mb-4" />
                <h4 className="text-xl font-semibold mb-2">Property Discovery</h4>
                <p className="text-sm text-gray-500 mb-2">Find your perfect property match</p>
                <p className="text-gray-600">Advanced search tools and personalized recommendations to discover properties that meet your investment criteria and lifestyle requirements.</p>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140098536-9jc7ywck.jpg" alt="Investment analysis" className="w-full h-48 object-cover rounded-lg mb-4" />
                <h4 className="text-xl font-semibold mb-2">Investment Guidance</h4>
                <p className="text-sm text-gray-500 mb-2">Expert market analysis and planning</p>
                <p className="text-gray-600">Data-driven insights on market trends, ROI potential, and investment strategies from our experienced analysts and market specialists.</p>
              </div>
              <div className="text-center">
                <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766676116024-zk7eqt6h.jpg" alt="Property management" className="w-full h-48 object-cover rounded-lg mb-4" />
                <h4 className="text-xl font-semibold mb-2">Property Management</h4>
                <p className="text-sm text-gray-500 mb-2">Professional ongoing care</p>
                <p className="text-gray-600">Full-service property management including maintenance, tenant coordination, financial reporting, and regular property updates.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="testimonials" data-section="testimonials">
        <div className="py-16 bg-white">
          <div className="max-w-6xl mx-auto px-6">
            <div className="text-center mb-12">
              <span className="text-sm font-semibold text-blue-600 uppercase tracking-wide">Client Reviews</span>
              <h3 className="text-3xl font-bold mb-4 mt-2">What Our Clients Say</h3>
              <p className="text-lg text-gray-600">Trusted by international investors and Dubai residents</p>
            </div>
            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div className="bg-gray-50 rounded-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766399072529-1z8sle2r.jpg" alt="Sarah Al Maktoum" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold">Sarah Al Maktoum</h4>
                    <p className="text-sm text-gray-500">Investment Advisor</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">The team's expertise in Dubai real estate is unmatched. They guided me through the entire process and helped me secure a property that exceeded my expectations.</p>
                <p className="text-sm text-gray-500">November 15, 2024</p>
              </div>
              <div className="bg-gray-50 rounded-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318234070-3a71e283.jpg" alt="Michael Chen" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold">Michael Chen</h4>
                    <p className="text-sm text-gray-500">Business Owner</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">Working with this team transformed my investment strategy. Their market insights helped me identify properties with exceptional growth potential.</p>
                <p className="text-sm text-gray-500">October 8, 2024</p>
              </div>
              <div className="bg-gray-50 rounded-lg p-6">
                <div className="flex items-center mb-4">
                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766184201718-hfojd9bk.jpg" alt="Amira Hassan" className="w-12 h-12 rounded-full mr-4" />
                  <div>
                    <h4 className="font-semibold">Amira Hassan</h4>
                    <p className="text-sm text-gray-500">Property Investor</p>
                  </div>
                </div>
                <p className="text-gray-600 mb-4">They didn't just sell me a property, they helped me build my investment portfolio. The after-sales service is exceptional.</p>
                <p className="text-sm text-gray-500">September 22, 2024</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="contact" data-section="contact">
        <div className="py-16 bg-gray-50">
          <div className="max-w-4xl mx-auto px-6">
            <div className="text-center mb-12">
              <h3 className="text-3xl font-bold mb-4">Ready to Invest in Dubai?</h3>
              <p className="text-lg text-gray-600 mb-8">Get in touch with our expert team to explore premium properties and investment opportunities tailored to your goals.</p>
              <a href="#" className="bg-blue-600 text-white px-8 py-3 rounded-lg hover:bg-blue-700 inline-flex items-center gap-2">
                Schedule Free Consultation
              </a>
            </div>
            <div className="space-y-6">
              <div className="bg-white rounded-lg p-6">
                <h4 className="font-semibold mb-2">What are the current investment opportunities in Dubai?</h4>
                <p className="text-gray-600">Dubai offers excellent investment potential across multiple sectors. Current opportunities include residential properties in emerging areas with strong growth projections, luxury apartments in established communities like Downtown and Dubai Marina.</p>
              </div>
              <div className="bg-white rounded-lg p-6">
                <h4 className="font-semibold mb-2">What is the typical return on investment for Dubai properties?</h4>
                <p className="text-gray-600">ROI varies by property type and location. Residential properties typically yield 5-8% annually, while commercial properties can achieve 8-12%. Prime locations offer stability with consistent appreciation.</p>
              </div>
              <div className="bg-white rounded-lg p-6">
                <h4 className="font-semibold mb-2">Are there financing options available for property purchases?</h4>
                <p className="text-gray-600">Yes, both UAE banks and international lenders offer financing options. Typically, up to 80% financing is available for primary residences and 50-60% for investment properties.</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div id="footer" data-section="footer">
        <div className="bg-gray-900 text-white py-12">
          <div className="max-w-6xl mx-auto px-6">
            <div className="grid md:grid-cols-4 gap-8 mb-8">
              <div>
                <h4 className="font-semibold mb-4">Properties</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#" className="hover:text-white">Buy Properties</a></li>
                  <li><a href="#" className="hover:text-white">Investment Guide</a></li>
                  <li><a href="#" className="hover:text-white">Market Report</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Company</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#about" className="hover:text-white">About Us</a></li>
                  <li><a href="#" className="hover:text-white">Our Team</a></li>
                  <li><a href="#services" className="hover:text-white">Our Services</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Support</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#contact" className="hover:text-white">Contact Us</a></li>
                  <li><a href="#" className="hover:text-white">FAQ</a></li>
                  <li><a href="#" className="hover:text-white">Blog</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold mb-4">Legal</h4>
                <ul className="space-y-2 text-gray-300">
                  <li><a href="#" className="hover:text-white">Terms of Service</a></li>
                  <li><a href="#" className="hover:text-white">Privacy Policy</a></li>
                  <li><a href="#" className="hover:text-white">Cookie Policy</a></li>
                </ul>
              </div>
            </div>
            <div className="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
              <div className="mb-4 md:mb-0">
                <h3 className="text-2xl font-bold mb-2">DubaiPremium</h3>
                <p className="text-gray-400 max-w-md">Premium real estate solutions for discerning investors and homebuyers in Dubai. Your trusted partner in finding luxury properties.</p>
              </div>
              <div className="text-center md:text-right">
                <p className="text-gray-400">© 2024 Dubai Premium Real Estate. All rights reserved.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ThemeProvider>
  );
}