"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Camera, Zap, Sparkles, Monitor, Shield, Star, Heart } from "lucide-react";
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import CardStack from '@/components/cardStack/CardStack';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="largeSmall"
      background="none"
      cardStyle="soft-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="hero" data-section="hero">
        <HeroBillboardScroll title="Explore the Latest iPhone Models" description="Discover the latest features and designs in our iPhone collection. From photography to performance, we've got you covered." background={{ variant: "downward-rays-animated" }} tag="New Arrivals" tagIcon="Calendar" buttons={[{ label: "Shop Now", href: "/iphones", className: "bg-black text-white hover:bg-gray-800" }]} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" ariaLabel="iPhone Collection Hero Section" />
      </div>

      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="iPhone Store"
          navItems={[
            { name: "Products", id: "products" },
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardThree
          title="Shop Our Latest Collection"
          description="Browse our premium selection of iPhone models. Each device delivers exceptional performance, stunning cameras, and innovative features."
          products={[
            {
              id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              imageSrc: "https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg",              imageAlt: "iPhone 15 Pro Max with titanium design",              initialQuantity: 1
            },
            {
              id: "2",              name: "iPhone 15 Pro",              price: "$999",              imageSrc: "https://img.b2bpic.net/free-photo/view-electronic-product-balancing-podium_23-2150141321.jpg",              imageAlt: "iPhone 15 Pro premium model",              initialQuantity: 1
            },
            {
              id: "3",              name: "iPhone 15",              price: "$799",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-17-pro-social-media-banner-design-template_47987-33075.jpg",              imageAlt: "iPhone 15 standard version",              initialQuantity: 1
            },
            {
              id: "4",              name: "iPhone SE",              price: "$429",              imageSrc: "https://img.b2bpic.net/free-photo/people-holding-colorful-smartphones_23-2151969201.jpg",              imageAlt: "iPhone SE affordable model",              initialQuantity: 1
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySix
          title="Revolutionary Features"
          description="Discover what makes iPhone the most advanced smartphone ever created"
          features={[
            {
              title: "Advanced Camera System",              description: "Professional-grade photography and cinematography capabilities with AI-powered processing",              imageSrc: "https://img.b2bpic.net/free-vector/camera-interfeace-smartphone-template_1361-2224.jpg",              imageAlt: "Advanced camera technology",              buttonIcon: Camera,
              buttonHref: "#products"
            },
            {
              title: "All-Day Battery Life",              description: "Intelligent battery management ensures power when you need it most",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-two-croissants_23-2149277917.jpg",              imageAlt: "Battery performance features",              buttonIcon: Zap,
              buttonHref: "#products"
            },
            {
              title: "Premium Design",              description: "Aerospace-grade titanium construction with stunning aesthetics and durability",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-hands-taking-coffee-photos_23-2149294500.jpg",              imageAlt: "Premium materials and design",              buttonIcon: Sparkles,
              buttonHref: "#products"
            },
            {
              title: "Stunning Display",              description: "Super Retina XDR display with exceptional brightness and color accuracy",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-using-smartphone-with-pop-socket-outdoors_23-2150168486.jpg",              imageAlt: "Retina XDR display technology",              buttonIcon: Monitor,
              buttonHref: "#products"
            },
            {
              title: "Blazing Fast Performance",              description: "A17 Pro chip delivers unprecedented speed and efficiency for demanding tasks",              imageSrc: "https://img.b2bpic.net/free-vector/camera-interfeace-smartphone-template_1361-2224.jpg",              imageAlt: "A17 Pro chip performance",              buttonIcon: Zap,
              buttonHref: "#products"
            },
            {
              title: "Enhanced Security",              description: "Advanced Face ID and secure enclave protect your data with military-grade encryption",              imageSrc: "https://img.b2bpic.net/free-photo/woman-taking-photo-two-croissants_23-2149277917.jpg",              imageAlt: "Face ID security technology",              buttonIcon: Shield,
              buttonHref: "#products"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Perfect iPhone"
          description="Select from our premium lineup designed to fit every budget and lifestyle"
          plans={[
            {
              id: "1",              price: "$429",              name: "iPhone SE",              buttons: [
                { text: "Select Plan", href: "#contact" },
                { text: "Learn More", href: "#features" }
              ],
              features: [
                "5G connectivity",                "A15 Bionic chip",                "64GB storage",                "12MP camera",                "IP67 water resistant",                "1 year warranty"
              ]
            },
            {
              id: "2",              price: "$799",              name: "iPhone 15",              buttons: [
                { text: "Select Plan", href: "#contact" },
                { text: "Learn More", href: "#features" }
              ],
              features: [
                "5G with Wi-Fi 6E",                "A16 Bionic chip",                "128GB storage",                "Dual 48MP camera",                "Action mode video",                "1 year warranty"
              ]
            },
            {
              id: "3",              badge: "Most Popular",              badgeIcon: Star,
              price: "$999",              name: "iPhone 15 Pro",              buttons: [
                { text: "Select Plan", href: "#contact" },
                { text: "Learn More", href: "#features" }
              ],
              features: [
                "5G with Wi-Fi 7",                "A17 Pro chip",                "256GB storage",                "Advanced 48MP camera",                "ProMotion 120Hz display",                "Titanium design",                "2 year warranty"
              ]
            },
            {
              id: "4",              price: "$1,199",              name: "iPhone 15 Pro Max",              buttons: [
                { text: "Select Plan", href: "#contact" },
                { text: "Learn More", href: "#features" }
              ],
              features: [
                "5G with Wi-Fi 7",                "A17 Pro chip",                "512GB storage",                "Pro camera system",                "Periscope zoom lens",                "6.7\" display",                "Titanium design",                "2 year warranty"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by over 50,000 satisfied customers worldwide who experience iPhone excellence daily"
          cardTag="See what our customers say"
          cardTagIcon={Heart}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              imageAlt: "Sarah Johnson"
            },
            {
              id: "2",              name: "Michael Chen",              imageSrc: "https://img.b2bpic.net/free-photo/blond-businessman-happy-expression_1194-3797.jpg",              imageAlt: "Michael Chen"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-with-backpack_23-2149915917.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1681.jpg",              imageAlt: "David Kim"
            },
            {
              id: "5",              name: "Jessica Walsh",              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg",              imageAlt: "Jessica Walsh"
            },
            {
              id: "6",              name: "Amanda Foster",              imageSrc: "https://img.b2bpic.net/free-photo/confident-young-bald-call-center-man-standing-with-closed-posture-profile-view-isolated-purple-with-copy-space_141793-76759.jpg",              imageAlt: "Amanda Foster"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Get Your iPhone Today"
          description="Have questions about our products or need assistance? Reach out to our expert team. We're here to help you find the perfect iPhone for your needs."
          inputs={[
            { name: "fullname", type: "text", placeholder: "Full Name", required: true },
            { name: "email", type: "email", placeholder: "Email Address", required: true },
            { name: "phone", type: "tel", placeholder: "Phone Number", required: true },
            { name: "model", type: "text", placeholder: "iPhone Model of Interest", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us how we can help you...",            rows: 5,
            required: true
          }}
          useInvertedBackground="invertDefault"
          imageSrc="https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg"
          imageAlt="iPhone contact us"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="layout" data-section="layout">
        <CardStack mode="buttons" gridVariant="uniform-all-items-equal" title="Bestsellers" description="Explore our top-selling iPhone accessories and gadgets." buttons={[{ text: "Shop Now", href: "#" }]} className="mb-8">
            <div className="card">
                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="iPhone Case" />
                <h3>iPhone X Case</h3>
                <p>Protect your iPhone with our premium case.</p>
            </div>
            <div className="card">
                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="iPhone Charger" />
                <h3>Fast Charger</h3>
                <p>Charge your iPhone up to 50% in just 30 minutes.</p>
            </div>
            <div className="card">
                <img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" alt="iPhone Screen Protector" />
                <h3>Screen Protector</h3>
                <p>Keep your iPhone screen scratch-free with our ultra-clear protector.</p>
            </div>
        </CardStack>
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Products",              items: [
                { label: "iPhone 15 Pro", href: "#products" },
                { label: "iPhone 15", href: "#products" },
                { label: "iPhone SE", href: "#products" },
                { label: "Compare Models", href: "#pricing" }
              ]
            },
            {
              title: "Support",              items: [
                { label: "Help Center", href: "#contact" },
                { label: "Contact Us", href: "#contact" },
                { label: "Warranty Info", href: "#" },
                { label: "Shipping & Returns", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Press", href: "#" }
              ]
            }
          ]}
          copyrightText="© 2025 iPhone Store. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}