"use client"

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { Sparkles, Tag, Crown, Smartphone, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="iPhone Store"
          navItems={[
            { name: "Models", id: "products" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "testimonials" },
            { name: "Support", id: "faq" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="Premium iPhone Experience"
          bottomRightText="sales@iphonestore.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="iPHONE"
          description="Experience the future in your hands. Discover the latest iPhone models with cutting-edge technology, stunning camera systems, and revolutionary features designed to enhance every moment of your life."
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Shop Now", href: "#products" },
            { text: "Learn More", href: "#" }
          ]}
          layoutOrder="default"
          imageSrc="https://img.b2bpic.net/free-photo/elegant-smartphone-composition_23-2149437106.jpg"
          imageAlt="Latest iPhone models showcase"
          frameStyle="browser"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Our Latest iPhone Models"
          description="Explore our premium collection of the newest iPhone models with exceptional performance and design"
          tag="Featured"
          tagIcon={Sparkles}
          products={[
            {
              id: "1",              brand: "Apple",              name: "iPhone 15 Pro Max",              price: "$1,199.00",              rating: 5,
              reviewCount: "12.5k",              imageSrc: "https://img.b2bpic.net/free-photo/view-electronic-product-balancing-podium_23-2150141321.jpg",              imageAlt: "iPhone 15 Pro Max"
            },
            {
              id: "2",              brand: "Apple",              name: "iPhone 15 Pro",              price: "$999.00",              rating: 5,
              reviewCount: "10.2k",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-smartphone-composition_23-2149437080.jpg",              imageAlt: "iPhone 15 Pro"
            },
            {
              id: "3",              brand: "Apple",              name: "iPhone SE",              price: "$429.00",              rating: 4,
              reviewCount: "8.7k",              imageSrc: "https://img.b2bpic.net/free-photo/elegant-smartphone-composition_23-2149437083.jpg",              imageAlt: "iPhone SE"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Choose Your Perfect Plan"
          description="Select the iPhone model that fits your needs and budget"
          tag="Pricing"
          tagIcon={Tag}
          plans={[
            {
              id: "1",              badge: "Essential",              badgeIcon: Smartphone,
              price: "$429",              subtitle: "Perfect for everyday use",              buttons: [
                { text: "Get iPhone SE", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "5G Connectivity",                "Dual Camera System",                "All-day Battery Life",                "iOS 17"
              ]
            },
            {
              id: "2",              badge: "Professional",              badgeIcon: Crown,
              price: "$999",              subtitle: "For power users",              buttons: [
                { text: "Get iPhone 15 Pro", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Advanced Camera Pro",                "A17 Pro Chip",                "ProMotion Display",                "Titanium Design",                "Emergency SOS"
              ]
            },
            {
              id: "3",              badge: "Ultimate",              badgeIcon: Zap,
              price: "$1,199",              subtitle: "Maximum power and capability",              buttons: [
                { text: "Get iPhone 15 Pro Max", href: "#" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Largest Display Ever",                "5x Optical Zoom",                "Advanced Thermal Engine",                "Longest Battery Life",                "Premium Materials"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Why Choose Us"
          description="Industry-leading performance and customer satisfaction"
          metrics={[
            {
              id: "1",              value: "98%",              description: "Customer Satisfaction Rate"
            },
            {
              id: "2",              value: "50K+",              description: "Happy Customers Worldwide"
            },
            {
              id: "3",              value: "24/7",              description: "Expert Support Available"
            },
            {
              id: "4",              value: "#1",              description: "Authorized Apple Retailer"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Customer Reviews"
          description="See what our satisfied customers have to say about their iPhone purchases"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Photography Enthusiast",              testimonial: "The camera system is absolutely incredible. I've been able to capture professional-quality photos with ease. The Pro Max is worth every penny!",              imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Tech Professional",              testimonial: "Outstanding performance and reliability. The battery life gets me through my entire workday, and the 5G connectivity is blazingly fast.",              imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              role: "Creative Director",              testimonial: "The display is stunning. Colors are vibrant, and the ProMotion makes scrolling incredibly smooth. Couldn't ask for a better device for my work.",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-stylish-pretty-young-woman-look-professional-cross-hands-chest-smiling-confident-camera-wear-glasses-standing-near-reception-office-hall-discuss-business_197531-22165.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Park",              role: "Business Owner",              testimonial: "The iPhone SE offers excellent value without compromising on quality. Perfect for my business needs. Highly recommend!",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-beautiful-middle-aged-business-woman_1262-3085.jpg",              imageAlt: "David Park"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Frequently Asked Questions"
          description="Find answers to common questions about our iPhones and services"
          faqs={[
            {
              id: "1",              title: "What's the difference between iPhone 15 Pro and Pro Max?",              content: "The iPhone 15 Pro Max features a larger 6.7-inch display compared to the 6.1-inch screen of the Pro model. The Max also includes a 5x optical zoom camera and enhanced battery life. Both feature the same powerful A17 Pro chip and professional camera system."
            },
            {
              id: "2",              title: "Do you offer trade-in programs?",              content: "Yes! We offer competitive trade-in values for your old iPhone. Simply bring your device to our store or mention it during your purchase, and we'll evaluate it instantly. Get credit towards your new iPhone purchase."
            },
            {
              id: "3",              title: "What warranty coverage is included?",              content: "All iPhones come with a one-year limited warranty covering hardware defects. We also offer extended AppleCare+ plans that provide up to two years of coverage, accidental damage protection, and priority service."
            },
            {
              id: "4",              title: "How long does shipping take?",              content: "Standard shipping takes 5-7 business days. We also offer expedited 2-3 day shipping and same-day delivery in select areas. All shipments are fully insured and come with free returns within 30 days."
            },
            {
              id: "5",              title: "Can I upgrade to 5G?",              content: "All our iPhone models support 5G connectivity. You'll need a compatible 5G plan from your carrier. Check with your provider to see if 5G is available in your area."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="Customer support representative"
          mediaPosition="left"
          animationType="smooth"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to upgrade to the latest iPhone? Contact us today for expert advice, special offers, and personalized recommendations tailored to your needs."
          animationType="background-highlight"
          buttons={[
            { text: "Get in Touch", href: "#" },
            { text: "Schedule Demo", href: "#" }
          ]}
          background={{ variant: "animated-grid" }}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="iPhone Store"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}