"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, Phone, Zap, Gift, TrendingUp, Users, Award, Shield, Star, Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="medium"
      background="floatingGradient"
      cardStyle="gradient-bordered"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="iPhone"
          navItems={[
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "reviews" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Introducing iPhone 15 Pro"
          description="Experience the future of mobile technology. Titanium design, advanced camera system, and breakthrough performance in your pocket."
          background={{ variant: "sparkles-gradient" }}
          tag="Now Available"
          tagIcon={Sparkles}
          buttons={[
            { text: "Shop Now", href: "products" },
            { text: "Learn More", href: "features" }
          ]}
          mediaItems={[
            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Premium Smartphone" },
            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Camera Features" },
            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Design and Build" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne
          title="Our iPhone Collection"
          description="Discover the perfect iPhone for your lifestyle. From cutting-edge Pro models to accessible core options, find your match."
          tag="Premium Selection"
          tagIcon={Phone}
          textboxLayout="default"
          products={[
            {
              id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              imageSrc: "https://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722629.jpg",              imageAlt: "iPhone 15 Pro Max"
            },
            {
              id: "2",              name: "iPhone 15 Pro",              price: "$999",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-16-pro-social-media-cover-design-template_47987-25428.jpg",              imageAlt: "iPhone 15 Pro"
            },
            {
              id: "3",              name: "iPhone 15",              price: "$799",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg",              imageAlt: "iPhone 15"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardSix
          title="Engineered to Perfection"
          description="Every detail matters. Discover the technologies that make iPhone extraordinary."
          tag="Innovation"
          tagIcon={Zap}
          textboxLayout="default"
          features={[
            {
              id: 1,
              title: "Advanced Camera System",              description: "Professional-grade cameras with computational photography, cinematic mode, and 8K video recording.",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg",              imageAlt: "iPhone camera system"
            },
            {
              id: 2,
              title: "Stunning Display",              description: "Retina XDR display with ProMotion 120Hz refresh rate for smooth scrolling and responsive touch.",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-16-pro-social-media-cover-design-template_47987-25428.jpg",              imageAlt: "iPhone display technology"
            },
            {
              id: 3,
              title: "All-Day Battery Life",              description: "Up to 29 hours of mixed usage. Optimized power management keeps you connected all day long.",              imageSrc: "https://img.b2bpic.net/free-vector/mobile-phone-mockup-front-rear-view_53876-97369.jpg",              imageAlt: "Battery performance"
            },
            {
              id: 4,
              title: "Lightning-Fast Performance",              description: "A17 Pro chip delivers desktop-class graphics and AI-powered experiences with exceptional speed.",              imageSrc: "https://img.b2bpic.net/free-photo/smartphone-rocks-arrangement_23-2149672674.jpg",              imageAlt: "Performance technology"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Simple, Transparent Pricing"
          description="Choose the plan that fits your needs. All plans include premium support and warranty."
          tag="Special Offers"
          tagIcon={Gift}
          textboxLayout="default"
          animationType="slide-up"
          plans={[
            {
              id: "1",              price: "$799",              name: "iPhone 15",              buttons: [
                { text: "Select Plan", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "6.1-inch Super Retina XDR display",                "Dual camera system",                "27-hour battery life",                "Advanced Face ID",                "Water resistant (IP68)"
              ]
            },
            {
              id: "2",              badge: "Most Popular",              badgeIcon: Star,
              price: "$999",              name: "iPhone 15 Pro",              buttons: [
                { text: "Select Plan", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "6.1-inch Super Retina XDR display",                "Advanced triple camera system",                "29-hour battery life",                "Titanium design",                "Pro camera controls"
              ]
            },
            {
              id: "3",              price: "$1,199",              name: "iPhone 15 Pro Max",              buttons: [
                { text: "Select Plan", href: "contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "6.7-inch Super Retina XDR display",                "Advanced triple camera with 5x zoom",                "33-hour battery life",                "Titanium design",                "Telephoto capabilities"
              ]
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Why Choose iPhone"
          description="Industry-leading performance and user satisfaction metrics."
          tag="Performance Metrics"
          tagIcon={TrendingUp}
          textboxLayout="default"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              icon: Users,
              title: "Active Users",              value: "2.2B+"
            },
            {
              id: "2",              icon: Award,
              title: "Customer Satisfaction",              value: "98%"
            },
            {
              id: "3",              icon: Zap,
              title: "Performance Speed",              value: "5x Faster"
            },
            {
              id: "4",              icon: Shield,
              title: "Security Level",              value: "Enterprise Grade"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="reviews" data-section="reviews">
        <TestimonialCardOne
          title="What Our Customers Say"
          description="Join millions of satisfied iPhone users worldwide."
          tag="Customer Reviews"
          tagIcon={Heart}
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              role: "Professional Photographer",              company: "Creative Studios",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              role: "Software Engineer",              company: "Tech Innovations",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emily Rodriguez",              role: "Content Creator",              company: "Digital Media",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg",              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              role: "Business Executive",              company: "Global Corp",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5360.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Wong",              role: "Designer",              company: "Creative Agency",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/happy-elegant-joyful-guy-grey-jacket-shirt-wears-glasses-gray_291650-1303.jpg",              imageAlt: "Jessica Wong"
            },
            {
              id: "6",              name: "Robert Thompson",              role: "Marketing Manager",              company: "Brand Solutions",              rating: 5,
              imageSrc: "https://img.b2bpic.net/free-photo/business-man-banner-concept-with-copy-space_23-2149601461.jpg",              imageAlt: "Robert Thompson"
            }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get in Touch"
          description="Have questions about our products? Our team is here to help. Reach out today and discover why iPhone is the choice of millions."
          inputs={[
            {
              name: "name",              type: "text",              placeholder: "Your Name",              required: true
            },
            {
              name: "email",              type: "email",              placeholder: "Your Email",              required: true
            },
            {
              name: "phone",              type: "tel",              placeholder: "Phone Number",              required: false
            }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us what you're interested in...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="Customer support team"
          mediaPosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

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