"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import ContactFaq from '@/components/sections/contact/ContactFaq';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import { Award, CheckCircle, Gem, Heart, MessageCircle, Shield, Sparkles, Star, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="rounded"
      contentWidth="small"
      sizing="mediumSizeLargeTitles"
      background="aurora"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Cally"
          navItems={[
            { name: "Shop", id: "products" },
            { name: "Collections", id: "features" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardTestimonial
          title="Timeless Elegance, Contemporary Luxury"
          description="Discover exquisite jewellery pieces handcrafted with precision. Each design tells a story of artistry and sophistication."
          tag="Premium Collection"
          imageSrc="http://img.b2bpic.net/free-photo/luxury-shine-diamonds-digital-art_23-2151695023.jpg"
          imageAlt="Luxury jewellery collection display"
          background={{ variant: "glowing-orb" }}
          mediaAnimation="slide-up"
          testimonials={[
            {
              name: "Victoria Sterling",              handle: "Jewellery Enthusiast",              testimonial: "Absolutely stunning pieces! Every item feels like art.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/portrait-blonde-woman-body-suit-white-shirt-with-pink-beautiful-lips-holding-cigar_343596-472.jpg"},
            {
              name: "James Mitchell",              handle: "Luxury Collector",              testimonial: "The craftsmanship is unparalleled. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/aged-symbol-executive-businessperson-person_1262-2734.jpg"},
            {
              name: "Sophie Laurent",              handle: "Fashion Designer",              testimonial: "These pieces elevate any collection. Exceptional quality.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/career-opportunities-women-education-concept-close-up-portrait-stylish-smiling-woman-looking-camera-with-pleased-confident-look-cross-hands-chest-lean-office-wall_197531-22169.jpg"},
          ]}
          buttons={[
            { text: "Explore Collection", href: "products" },
            { text: "Request Custom Design", href: "contact" },
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Curated Jewellery Selection"
          description="Browse our handpicked collection of premium pieces, each carefully selected for quality and design excellence."
          tag="Featured Pieces"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Cally Luxury",              name: "Diamond Solitaire Ring",              price: "$2,450.00",              rating: 5,
              reviewCount: "48",              imageSrc: "http://img.b2bpic.net/free-photo/queen-crown-still-life_23-2150409258.jpg",              imageAlt: "Diamond Solitaire Ring"},
            {
              id: "2",              brand: "Cally Luxury",              name: "Pearl Drop Earrings",              price: "$1,280.00",              rating: 5,
              reviewCount: "32",              imageSrc: "http://img.b2bpic.net/free-photo/attractive-woman-dark-wall_329181-7280.jpg",              imageAlt: "Pearl Drop Earrings"},
            {
              id: "3",              brand: "Cally Luxury",              name: "Emerald Bracelet",              price: "$3,100.00",              rating: 5,
              reviewCount: "25",              imageSrc: "http://img.b2bpic.net/free-photo/view-elegant-golden-ring_52683-111776.jpg",              imageAlt: "Emerald Bracelet"},
          ]}
          buttons={[
            { text: "View All Products", href: "products" },
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          title="Cally: Where Craftsmanship Meets Vision"
          description="Founded with a passion for exquisite design, Cally specializes in creating timeless jewellery pieces that capture life's most precious moments. Each creation is meticulously crafted by master artisans who blend traditional techniques with contemporary aesthetics."
          tag="Our Story"
          metrics={[
            { value: "15+", title: "Years of Expertise" },
            { value: "5,000+", title: "Happy Customers Worldwide" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/man-studio-creates-leather-ware_1157-33203.jpg"
          imageAlt="Artisan jewellery crafting"
          useInvertedBackground={true}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTen
          title="Why Choose Cally"
          description="Discover what sets our jewellery apart and why customers trust Cally for their most important moments."
          tag="Our Advantages"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "1",              title: "Ethical Sourcing",              description: "All our gemstones and precious metals are responsibly sourced, ensuring both quality and integrity in every piece.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-origami-object_23-2149048437.jpg" },
              items: [
                { icon: Gem, text: "Certified gems" },
                { icon: Shield, text: "Ethical standards" },
                { icon: Award, text: "Quality verified" },
              ],
              reverse: false,
            },
            {
              id: "2",              title: "Bespoke Customization",              description: "Create your dream piece with our expert design team. From concept to completion, we bring your vision to life.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/male-jeweler-working-shop_23-2150914231.jpg" },
              items: [
                { icon: Sparkles, text: "Personalized design" },
                { icon: Zap, text: "Expert consultation" },
                { icon: Star, text: "Premium execution" },
              ],
              reverse: true,
            },
            {
              id: "3",              title: "Lifetime Guarantee",              description: "Your Cally jewellery is protected by our comprehensive lifetime warranty covering craftsmanship and durability.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-engraving-art-tools_23-2149186750.jpg" },
              items: [
                { icon: CheckCircle, text: "Lifetime coverage" },
                { icon: Heart, text: "Care included" },
                { icon: Shield, text: "Peace of mind" },
              ],
              reverse: false,
            },
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSixteen
          title="Loved by Our Customers"
          description="Read what our clients say about their Cally jewellery experience and the moments they've created."
          tag="Client Stories"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Emma Richardson",              role: "Bride",              company: "London, UK",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/girlfriend-reflected-mirror_1157-131.jpg"},
            {
              id: "2",              name: "David Chen",              role: "Collector",              company: "Singapore",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-coffee-cup_23-2149396216.jpg"},
            {
              id: "3",              name: "Isabella Rossi",              role: "Anniversary Celebrant",              company: "Milan, Italy",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-near-metal-wall_23-2147771318.jpg"},
            {
              id: "4",              name: "Marcus Thompson",              role: "Engagement Ring Buyer",              company: "New York, USA",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/groom-preparing-his-wedding_1303-28304.jpg"},
          ]}
          kpiItems={[
            { value: "98%", label: "Customer Satisfaction" },
            { value: "5,000+", label: "Pieces Crafted" },
            { value: "15+", label: "Years Operating" },
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="By The Numbers"
          description="Our impact and commitment to excellence reflected in our achievements."
          tag="Milestones"
          textboxLayout="default"
          useInvertedBackground={true}
          animationType="slide-up"
          gridVariant="uniform-all-items-equal"
          metrics={[
            { id: "1", value: "15+", description: "Years of Excellence" },
            { id: "2", value: "5,000+", description: "Happy Customers" },
            { id: "3", value: "98%", description: "Satisfaction Rate" },
            { id: "4", value: "100%", description: "Ethical Sourcing" },
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactFaq
          ctaTitle="Connect With Our Team"
          ctaDescription="Interested in custom designs or have questions about our collections? We'd love to hear from you."
          ctaButton={{ text: "Schedule Consultation", href: "mailto:hello@cally.com" }}
          ctaIcon={MessageCircle}
          useInvertedBackground={false}
          animationType="slide-up"
          faqs={[
            {
              id: "1",              title: "How do I care for my jewellery?",              content: "We recommend gentle cleaning with a soft cloth and storing in a dry place. For detailed care instructions, each piece comes with a personalized care guide tailored to its materials."},
            {
              id: "2",              title: "Can I customize a piece?",              content: "Absolutely! We specialize in bespoke designs. Contact our team to discuss your vision, and our expert artisans will create something uniquely yours."},
            {
              id: "3",              title: "What is your return policy?",              content: "We offer a 30-day satisfaction guarantee. If you're not completely happy, we'll work with you to make it right or process a full return."},
            {
              id: "4",              title: "Do you offer resizing?",              content: "Yes, we provide free resizing for life on all Cally pieces. Simply contact us, and we'll arrange the service at no cost."},
            {
              id: "5",              title: "Are your gemstones certified?",              content: "All gemstones above a certain carat weight come with certification. We also provide detailed documentation for every piece."},
            {
              id: "6",              title: "How long does custom design take?",              content: "Bespoke pieces typically take 6-8 weeks from design approval. Rush orders may be available; please inquire for details."},
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Shop",              items: [
                { label: "All Collections", href: "products" },
                { label: "Rings", href: "#" },
                { label: "Earrings", href: "#" },
                { label: "Bracelets", href: "#" },
              ],
            },
            {
              title: "Company",              items: [
                { label: "About Cally", href: "about" },
                { label: "Our Craftsmanship", href: "features" },
                { label: "Contact Us", href: "contact" },
                { label: "Careers", href: "#" },
              ],
            },
            {
              title: "Support",              items: [
                { label: "Shipping Info", href: "#" },
                { label: "Returns", href: "#" },
                { label: "Care Guide", href: "#" },
                { label: "Privacy Policy", href: "#" },
              ],
            },
          ]}
          copyrightText="© 2025 Cally Jewellery. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}