"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterCard from '@/components/sections/footer/FooterCard';
import { CheckCircle, Eye, Facebook, Heart, HelpCircle, Instagram, Sparkles, Twitter } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="medium"
      sizing="large"
      background="aurora"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen 
          navItems={[
            { name: "Collections", id: "products" },
            { name: "About", id: "about" },
            { name: "Features", id: "features" },
            { name: "Reviews", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          brandName="OptiVue"
          bottomLeftText="Curated Eyewear"
          bottomRightText="hello@optivue.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardCarousel 
          title="See the World Through OptiVue"
          description="Premium eyewear crafted for style, comfort, and clarity. Discover our curated collection of frames that elevate your everyday look."
          tag="New Collection"
          tagIcon={Sparkles}
          background={{ variant: "aurora" }}
          buttons={[
            { text: "Explore Collections", href: "products" },
            { text: "Learn More", href: "about" }
          ]}
          mediaItems={[
            { imageSrc: "https://img.b2bpic.net/free-photo/pretty-woman-grey-jacket-white-shirt-sunglasses-with-red-lipstick-is-touching-hair-posing-near-her-house-beautiful-lady-grey-oversize-jacket-pants-walks-outside_291650-2564.jpg", imageAlt: "Premium sunglasses collection" },
            { imageSrc: "https://img.b2bpic.net/free-photo/beautiful-smiling-model-dressed-elegant-summer-clothes-sexy-carefree-girl-sitting-street-trendy-modern-businesswoman-sunglasses-having-fun_158538-6691.jpg", imageAlt: "Modern optical frames" },
            { imageSrc: "https://img.b2bpic.net/free-photo/brunette-tanned-lady-sunglasses-talks-phone-charming-asian-woman-black-white-outfit-poses-outside_197531-27947.jpg", imageAlt: "Trendy eyewear styles" },
            { imageSrc: "https://img.b2bpic.net/free-photo/portrait-woman-with-red-hair-sunglasses_613910-16610.jpg", imageAlt: "Luxury glasses display" },
            { imageSrc: "https://img.b2bpic.net/free-photo/medium-shot-smiley-woman-talking-phone_23-2148760475.jpg", imageAlt: "Contemporary frames collection" },
            { imageSrc: "https://img.b2bpic.net/free-photo/woman-wearing-beige-coat-walking-street-christmas_1303-26106.jpg", imageAlt: "Premium eyewear showcase" }
          ]
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardOne 
          title="Featured Collections"
          description="Handpicked eyewear from our premium collections, designed for every style and occasion."
          tag="Shop Now"
          tagIcon={Eye}
          products={[
            { id: "1", name: "Classic Aviators", price: "$189", imageSrc: "https://img.b2bpic.net/free-photo/lovely-lady-with-dark-hair-wearing-sunglasses-drinks-coffee-wooden-outdoor-terrace-with-golden-leaves-background-outdoor-portrait-gorgeous-white-female-model-city_291650-1425.jpg", imageAlt: "Classic aviator frames" },
            { id: "2", name: "Sporty Shades", price: "$249", imageSrc: "https://img.b2bpic.net/free-photo/young-beautiful-girl-uses-smartphone-street-surfing-internet_1296-777.jpg", imageAlt: "Performance sunglasses" },
            { id: "3", name: "Designer Series", price: "$349", imageSrc: "https://img.b2bpic.net/free-photo/young-female-swimsuit-with-leopard-print-relaxing-blue-lounge-chair-wearing-black-sunglasses-looks-relaxed_176532-11518.jpg", imageAlt: "Luxury designer frames" },
            { id: "4", name: "Kids Frames", price: "$99", imageSrc: "https://img.b2bpic.net/free-photo/closeup-portrait-young-beautiful-smiling-female-sexy-carefree-woman-posing-sunny-day-dark-background-positive-model-having-fun-going-crazy-cheerful-happy-sunglasses_158538-25772.jpg", imageAlt: "Colorful kids eyewear" }
          ]
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "View All Products", href: "products" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne 
          title="Why OptiVue"
          description="Discover what makes our eyewear stand out in the market. From materials to design, every detail matters."
          tag="Our Advantage"
          tagIcon={CheckCircle}
          imageSrc="https://img.b2bpic.net/free-photo/man-using-traditional-crafting-process-shape-wooden-pieces_482257-97739.jpg"
          imageAlt="Eyewear craftsmanship and quality"
          mediaPosition="right"
          useInvertedBackground="noInvert"
          accordionItems={[
            { id: "1", title: "Premium Materials", content: "We use only the finest materials including Italian acetate, Japanese titanium, and high-quality polycarbonate lenses for durability and comfort." },
            { id: "2", title: "Expert Craftsmanship", content: "Each frame is hand-inspected and assembled by skilled artisans with decades of eyewear manufacturing experience." },
            { id: "3", title: "UV Protection", content: "All our lenses provide 100% UV protection to shield your eyes from harmful UVA and UVB rays while keeping your vision crystal clear." },
            { id: "4", title: "Lifetime Warranty", content: "We stand behind our products with a comprehensive lifetime warranty covering manufacturing defects and structural issues." }
          ]}
          buttons={[
            { text: "Learn About Our Process", href: "about" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <TextSplitAbout 
          title="Our Story"
          description={[
            "OptiVue was founded on the belief that quality eyewear shouldn't compromise on style. For over 15 years, we've been dedicated to creating frames that elevate your everyday vision.",            "Our commitment to excellence extends beyond products—we invest in sustainable manufacturing practices, fair trade partnerships, and accessible pricing. Every pair of glasses carries our promise of superior quality and timeless design.",            "Join thousands of satisfied customers who trust OptiVue for their most important accessory."
          ]}
          showBorder={true}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Discover Our Collections", href: "products" },
            { text: "Contact Us", href: "contact" }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve 
          cardTitle="Join over 50,000 customers who trust OptiVue for premium eyewear that combines style and substance."
          cardTag="Customer Love"
          cardTagIcon={Heart}
          useInvertedBackground="noInvert"
          testimonials={[
            { id: "1", name: "Jessica Martinez", imageSrc: "https://img.b2bpic.net/free-photo/front-view-business-woman-suit_23-2148603018.jpg", imageAlt: "Jessica Martinez" },
            { id: "2", name: "David Chen", imageSrc: "https://img.b2bpic.net/free-photo/front-view-professional-business-woman-suit_23-2148603020.jpg", imageAlt: "David Chen" },
            { id: "3", name: "Sarah Johnson", imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg", imageAlt: "Sarah Johnson" },
            { id: "4", name: "Michael Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", imageAlt: "Michael Rodriguez" },
            { id: "5", name: "Emily Watson", imageSrc: "https://img.b2bpic.net/free-photo/content-beautiful-businesswoman-standing-window_1262-1778.jpg", imageAlt: "Emily Watson" },
            { id: "6", name: "James Patel", imageSrc: "https://img.b2bpic.net/free-photo/business-woman-banner-concept-with-copy-space_23-2149601533.jpg", imageAlt: "James Patel" }
          ]
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia 
          title="Common Questions"
          description="Have questions about our eyewear? We've got answers. Browse through our most frequently asked questions below."
          tag="FAQ"
          tagIcon={HelpCircle}
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/man-using-traditional-crafting-process-shape-wooden-pieces_482257-97739.jpg"
          imageAlt="Customer support and assistance"
          animationType="smooth"
          faqs={[
            { id: "1", title: "How do I know my frame size?", content: "Frame sizes are typically printed on the inside of the temple arm. You'll see three numbers: lens width, bridge width, and temple length. We offer a comprehensive size guide on each product page to help you find the perfect fit." },
            { id: "2", title: "What's your return policy?", content: "We offer a 30-day money-back guarantee on all purchases. If you're not completely satisfied, simply return your frames in original condition for a full refund or exchange." },
            { id: "3", title: "Do you offer prescription lenses?", content: "Yes! We can fit most of our frames with prescription lenses. During checkout, you'll have the option to add your prescription details. Our certified opticians will handle the rest." },
            { id: "4", title: "How should I care for my glasses?", content: "Use our included microfiber cloth and lens cleaning solution. Store your frames in the protective case when not in use. Avoid exposing them to extreme heat and always use both hands to put on and take off your glasses." },
            { id: "5", title: "Do you ship internationally?", content: "We currently ship to over 50 countries worldwide. Shipping times and costs vary by location. Check our shipping page for detailed information about your destination." }
          ]
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm 
          title="Get in Touch"
          description="Have a question about our eyewear? We'd love to hear from you. Send us a message and our team will respond within 24 hours."
          useInvertedBackground="noInvert"
          mediaPosition="right"
          imageSrc="https://img.b2bpic.net/free-photo/man-using-traditional-crafting-process-shape-wooden-pieces_482257-97739.jpg"
          imageAlt="Contact us for eyewear inquiries"
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Your Email", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us how we can help...",            rows: 5,
            required: true
          }}
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterCard 
          logoText="OptiVue"
          copyrightText="© 2025 OptiVue. All rights reserved."
          socialLinks={[
            { icon: Instagram, href: "https://instagram.com/optivue", ariaLabel: "Instagram" },
            { icon: Facebook, href: "https://facebook.com/optivue", ariaLabel: "Facebook" },
            { icon: Twitter, href: "https://twitter.com/optivue", ariaLabel: "Twitter" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}