"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Phone } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="mediumLarge"
      background="fluid"
      cardStyle="soft-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <main>
        <div id="nav" data-section="nav">
          <NavbarStyleApple 
            brandName="MyCo"
            navItems={[
              {name: "Home", id: "/"},
              {name: "About", id: "#about"},
              {name: "Features", id: "#features"},
              {name: "Products", id: "#products"},
              {name: "Testimonials", id: "#testimonials"},
              {name: "FAQ", id: "#faq"},
              {name: "Contact", id: "#contact"},
              {name: "Blog", id: "/blog"},
              {name: "Shop", id: "/shop"}
            ]}
          />
        </div>

        <div id="hero" data-section="hero">
          <HeroLogo
            logoText="MyCo"
            description="Innovative solutions for a brighter future."
            buttons={[
              { text: "Get Started", href: "/#contact" },
              { text: "Learn More", href: "/#about" }
            ]}
            imageSrc="https://via.placeholder.com/1920x1080.png?text=Modern+Business"
            imageAlt="Modern business cityscape"
            showDimOverlay={true}
          />
        </div>

        <div id="about" data-section="about">
          <MediaSplitTabsAbout
            title="Our Story & Vision"
            description="We are dedicated to building innovative solutions that empower businesses and individuals."
            tabs={[
              { id: "mission", label: "Our Mission", description: "To deliver cutting-edge technology and exceptional service that drives success." },
              { id: "values", label: "Our Values", description: "Integrity, innovation, customer focus, and collaboration are at the core of everything we do." },
              { id: "team", label: "Our Team", description: "A passionate group of experts committed to excellence and achieving remarkable results." }
            ]}
            imageSrc="https://via.placeholder.com/800x600.png?text=Team+Collaboration"
            imageAlt="Team collaborating in an office"
            imagePosition="right"
            mediaAnimation="slide-up"
            useInvertedBackground={false}
          />
        </div>

        <div id="products" data-section="products">
          <ProductCardTwo
            title="Our Featured Products"
            description="Explore a selection of our most popular and innovative products designed to meet your needs."
            products={[
              { id: "1", brand: "TechInnovate", name: "AI Assistant Pro", price: "$199.99", rating: 5, reviewCount: "1.2k", imageSrc: "https://via.placeholder.com/400x400.png?text=AI+Assistant" },
              { id: "2", brand: "FutureGadgets", name: "Smart Home Hub", price: "$249.00", rating: 4, reviewCount: "850", imageSrc: "https://via.placeholder.com/400x400.png?text=Smart+Home" },
              { id: "3", brand: "InnovateCo", name: "Cloud Storage Plus", price: "$49.99", rating: 4, reviewCount: "3.5k", imageSrc: "https://via.placeholder.com/400x400.png?text=Cloud+Storage" },
              { id: "4", brand: "FutureTech", name: "Eco-Friendly Charger", price: "$29.99", rating: 5, reviewCount: "2.1k", imageSrc: "https://via.placeholder.com/400x400.png?text=Eco+Charger" }
            ]}
            gridVariant="four-items-2x2-equal-grid"
            animationType="slide-up"
            useInvertedBackground={true}
            textboxLayout="default"
          />
        </div>

        <div id="features" data-section="features">
          <FeatureCardThree
            title="Key Features That Set Us Apart"
            description="Discover the core functionalities and benefits that make our solutions stand out."
            features={[
              { id: "01", title: "Advanced Analytics", description: "Gain deep insights with our powerful and intuitive analytics dashboard.", imageSrc: "https://via.placeholder.com/600x400.png?text=Analytics" },
              { id: "02", title: "Seamless Integration", description: "Connect effortlessly with your existing tools and workflows.", imageSrc: "https://via.placeholder.com/600x400.png?text=Integration" },
              { id: "03", title: "24/7 Support", description: "Our dedicated support team is always here to help you succeed.", imageSrc: "https://via.placeholder.com/600x400.png?text=Support" }
            ]}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            useInvertedBackground={false}
            textboxLayout="default"
          />
        </div>

        <div id="testimonials" data-section="testimonials">
          <TestimonialCardOne
            title="What Our Clients Say"
            description="Hear directly from our satisfied customers about their experience with our services."
            testimonials={[
              { id: "1", name: "Alice Wonderland", role: "CEO, InnovateCo", company: "Tech Solutions", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+1" },
              { id: "2", name: "Bob The Builder", role: "Founder, ConstructCo", company: "Design Agency", rating: 4, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+2" },
              { id: "3", name: "Charlie Chaplin", role: "Manager, Creative Hub", company: "Media Group", rating: 5, imageSrc: "https://via.placeholder.com/400x400.png?text=Client+3" }
            ]}
            gridVariant="three-columns-all-equal-width"
            animationType="slide-up"
            useInvertedBackground={true}
            textboxLayout="default"
          />
        </div>

        <div id="faq" data-section="faq">
          <FaqSplitMedia
            title="Frequently Asked Questions"
            description="Find quick answers to the most common questions about our products and services."
            faqs={[
              { id: "1", title: "How does your service work?", content: "Our service provides seamless integration with your existing systems, ensuring a smooth transition and minimal disruption." },
              { id: "2", title: "What is your pricing model?", content: "We offer flexible pricing tiers designed to fit businesses of all sizes, from startups to large enterprises." },
              { id: "3", title: "Can I customize the features?", content: "Yes, our platform is highly customizable, allowing you to tailor features to your specific business needs." },
              { id: "4", title: "Do you offer support?", content: "Absolutely! We provide 24/7 customer support via chat, email, and phone to assist you with any inquiries." }
            ]}
            imageSrc="https://via.placeholder.com/800x600.png?text=FAQ+Support"
            imageAlt="Customer support representatives"
            mediaAnimation="slide-up"
            mediaPosition="left"
            faqsAnimation="slide-up"
            useInvertedBackground={false}
            animationType="smooth"
          />
        </div>

        <div id="contact" data-section="contact">
          <ContactFaq
            ctaTitle="Ready to Start?"
            ctaDescription="Get in touch with our team today to discuss your project and discover how we can help."
            ctaButton={{ text: "Contact Us Now", href: "/#contact" }}
            ctaIcon={Phone}
            faqs={[
              { id: "1", title: "What are your office hours?", content: "Our support team is available Monday to Friday, 9 AM to 5 PM EST." },
              { id: "2", title: "Where are you located?", content: "We operate globally with a primary office in a major tech hub. Contact us for specific details." },
              { id: "3", title: "How quickly do you respond?", content: "We aim to respond to all inquiries within 24 business hours." }
            ]}
            useInvertedBackground={true}
            animationType="slide-up"
          />
        </div>

        <div id="footer" data-section="footer">
          <FooterBaseCard 
            logoText="MyCo"
            columns={[
              {title: "Solutions", items: [
                {label: "Products", href: "/#products"},
                {label: "Features", href: "/#features"}
              ]},
              {title: "Company", items: [
                {label: "About Us", href: "/#about"},
                {label: "Blog", href: "/blog"},
                {label: "FAQ", href: "/#faq"},
                {label: "Contact", href: "/#contact"}
              ]}
            ]}
            copyrightText="© 2024 MyCo. All rights reserved."
          />
        </div>
      </main>
    </ThemeProvider>
  );
}
