"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Award, Cog, Crown, Lock, ShieldCheck, Sparkles, User } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Collection",          id: "#collection"},
        {
          name: "About",          id: "#about"},
        {
          name: "Authenticity",          id: "#authenticity"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-business-opening-hours-illustration_23-2148859744.jpg"
      logoAlt="Watch Center Logo"
      brandName="Watch Center"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplit
      className="py-20 lg:py-32"
      background={{
        variant: "plain"}}
      imagePosition="right"
      title="Luxury Timepieces, Crafted for Presence"
      description="Discover premium watches with timeless design, authentic elegance, and a showroom-level buying experience."
      buttons={[
        {
          text: "Explore Collection",          href: "#collection"},
        {
          text: "Visit Showroom",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/closeup-watch_53876-32028.jpg"
      imageAlt="Luxury Rolex-style Watch"
      mediaAnimation="slide-up"
      fixedMediaHeight={true}
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-man-checking-time-his-watch-against-black-background_23-2147937487.jpg",          alt: "Satisfied client"},
        {
          src: "http://img.b2bpic.net/free-photo/moody-thoughtful-black-young-model-wearing-blank-black-t-shirt-isolated-white_346278-1013.jpg",          alt: "Happy customer"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-concentrated-young-man_171337-17412.jpg",          alt: "Luxury watch owner"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-businessman-model-dressed-elegant-black-suit_158538-11494.jpg",          alt: "Distinguished collector"},
        {
          src: "http://img.b2bpic.net/free-photo/portrait-schooler-teenage-boy-eyeglasses-dressed-stylish-jacket_613910-11986.jpg",          alt: "Premium buyer"},
      ]}
      avatarText="Trusted by discerning collectors worldwide."
      marqueeItems={[
        {
          type: "text-icon",          text: "Precision Engineering",          icon: Cog,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/alarm-clock-with-hour-minute-second-hand_23-2147943907.jpg",          alt: "Close up on clock with time change"},
        {
          type: "text-icon",          text: "Timeless Design",          icon: Sparkles,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/square-clock-outdoors-still-life_23-2150436125.jpg",          alt: "Circular clock outdoors still life"},
        {
          type: "text-icon",          text: "Exclusive Collection",          icon: Crown,
        },
        {
          type: "image",          src: "http://img.b2bpic.net/free-photo/old-white-clock-against-weathered-wall_23-2147943586.jpg",          alt: "Close up on clock with time change"},
        {
          type: "text-icon",          text: "Certified Authenticity",          icon: ShieldCheck,
        },
      ]}
      titleClassName="font-bold"
      descriptionClassName="text-lg"
    />
  </div>

  <div id="collection" data-section="collection">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        {
          id: "watch-1",          brand: "Premier Time",          name: "Chronos Black Dial",          price: "$12,500",          rating: 5,
          reviewCount: "24",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-black-smartwatch_23-2147797005.jpg",          imageAlt: "Luxury watch with black dial"},
        {
          id: "watch-2",          brand: "Premier Time",          name: "Veridian Green Dial",          price: "$12,800",          rating: 5,
          reviewCount: "19",          imageSrc: "http://img.b2bpic.net/free-photo/white-clock-white-wall-interior_169016-49298.jpg",          imageAlt: "Luxury watch with green dial"},
        {
          id: "watch-3",          brand: "Premier Time",          name: "Oceanic Blue Dial",          price: "$12,700",          rating: 5,
          reviewCount: "22",          imageSrc: "http://img.b2bpic.net/free-photo/modern-black-watch-wrist-man-sitting-car_181624-58251.jpg",          imageAlt: "Luxury watch with blue dial"},
        {
          id: "watch-4",          brand: "Premier Time",          name: "Lumina White Dial",          price: "$12,600",          rating: 5,
          reviewCount: "21",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-spring-time-change-concept_23-2149318302.jpg",          imageAlt: "Luxury watch with white dial"},
        {
          id: "watch-5",          brand: "Premier Time",          name: "Ebony Elite",          price: "$13,200",          rating: 5,
          reviewCount: "15",          imageSrc: "http://img.b2bpic.net/free-photo/businessman-hand-pants-pocket_1262-18152.jpg",          imageAlt: "Luxury watch with black dial"},
        {
          id: "watch-6",          brand: "Premier Time",          name: "Forest Sentinel",          price: "$13,100",          rating: 5,
          reviewCount: "17",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-fashion-stylish-hipster-model-dressed-warm-overcoat-posing-studio_158538-11464.jpg",          imageAlt: "Luxury watch with green dial"},
      ]}
      title="The Collection"
      description="Each timepiece in our curated collection embodies exceptional craftsmanship and timeless design, reflecting an unparalleled legacy of horological artistry."
      className="py-20 lg:py-32"
      cardClassName="shadow-lg rounded-xl"
      textBoxTitleClassName="font-bold"
    />
  </div>

  <div id="premium-experience" data-section="premium-experience">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",          title: "Carefully Selected Watches",          description: "Each timepiece is hand-picked for its exceptional heritage, craftsmanship, and enduring value.",          tag: "Curated Excellence",          imageSrc: "http://img.b2bpic.net/free-photo/craftswoman-working-workshop_107420-65252.jpg",          imageAlt: "Watchmaker carefully selecting a watch"},
        {
          id: "f2",          title: "Premium Showroom Experience",          description: "Visit our exquisite showroom for a private viewing, where luxury meets unparalleled personal service.",          tag: "Exclusive Access",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-colleagues-chatting-work_23-2149622893.jpg",          imageAlt: "Luxury watch showroom interior"},
        {
          id: "f3",          title: "Personalized Service",          description: "Our experts offer bespoke advice, ensuring you find the perfect watch that resonates with your unique style.",          tag: "Dedicated Expertise",          imageSrc: "http://img.b2bpic.net/free-photo/married-elderly-couple-signing-marriage-certificate_53876-13392.jpg",          imageAlt: "Personal consultation with a watch expert"},
        {
          id: "f4",          title: "Elegant Buying Process",          description: "Experience a seamless and sophisticated acquisition process, designed for your utmost convenience and discretion.",          tag: "Effortless Acquisition",          imageSrc: "http://img.b2bpic.net/free-photo/metal-pieces-close-up-background_23-2148882603.jpg",          imageAlt: "Elegant watch transaction"},
      ]}
      title="Our Unrivaled Experience"
      description="We are dedicated to providing a luxury journey for every client, from selection to ownership."
      className="py-20 lg:py-32"
      itemClassName="shadow-lg rounded-xl"
      cardTitleClassName="font-bold"
    />
  </div>

  <div id="authenticity" data-section="authenticity">
      <MetricCardThree
      animationType="blur-reveal"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          icon: ShieldCheck,
          title: "Authentic Watches",          value: "100%"},
        {
          id: "m2",          icon: ShieldCheck,
          title: "Professional Inspection",          value: "Certified"},
        {
          id: "m3",          icon: Lock,
          title: "Secure Purchase",          value: "Guaranteed"},
        {
          id: "m4",          icon: User,
          title: "Personal Consultation",          value: "Expert Guidance"},
        {
          id: "m5",          icon: Award,
          title: "Warranty & Service",          value: "Comprehensive"},
      ]}
      title="Assured Authenticity & Trust"
      description="Every watch we offer is backed by rigorous verification, ensuring your complete confidence in every purchase."
      className="py-20 lg:py-32"
      cardClassName="p-6 lg:p-10 shadow-lg rounded-xl"
      iconClassName="text-accent h-10 w-10"
      metricTitleClassName="text-xl font-semibold"
      valueClassName="text-4xl lg:text-5xl font-bold"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "How do you ensure authenticity?",          content: "Every watch undergoes a rigorous multi-point inspection by certified horologists and comes with official documentation guaranteeing its authenticity."},
        {
          id: "q2",          title: "Do you offer international shipping?",          content: "Yes, we provide secure and insured international shipping to most countries, ensuring your timepiece arrives safely and promptly."},
        {
          id: "q3",          title: "Can I trade in my old watch?",          content: "We offer a comprehensive trade-in program. Our experts will appraise your current timepiece to provide a fair market value towards a new acquisition."},
        {
          id: "q4",          title: "What is your warranty policy?",          content: "All new watches come with the manufacturer's international warranty. Pre-owned watches are backed by our in-house 12-month guarantee."},
        {
          id: "q5",          title: "Do you offer financing options?",          content: "We partner with selected financial institutions to offer flexible financing solutions tailored to your needs. Please inquire with our sales team for details."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/salesperson-helps-customer-fasten-gorgeous-bracelet-her-partner-prepares-pay-purchase-phone-using-nfc_166373-8870.jpg"
      imageAlt="Customer service interaction about watches"
      mediaAnimation="opacity"
      title="Your Questions, Answered"
      description="Navigate the world of luxury watches with confidence. Find answers to common inquiries about our collection and services."
      faqsAnimation="slide-up"
      className="py-20 lg:py-32"
      textBoxTitleClassName="font-bold"
      faqsContainerClassName="shadow-lg rounded-xl"
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={false}
      title="Watch Center: The Art of Horology"
      description={[
        "At Watch Center, we believe a watch is more than an accessory—it is a statement of presence, style, and status. We curate an exquisite collection for individuals who appreciate the intricate artistry and profound legacy of fine timepieces.",        "As Israel's premier luxury watch boutique, we offer an unparalleled experience, blending expert guidance with an opulent showroom atmosphere. Discover your next heirloom and become part of a tradition that transcends time."]}
      className="py-20 lg:py-32"
      titleClassName="font-bold"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      text="Connect with our experts today. Whether you seek a rare timepiece, personalized consultation, or simply wish to experience our showroom, we are here to assist you."
      buttons={[
        {
          text: "WhatsApp Us",          href: "https://wa.me/972551234567"},
        {
          text: "Call Now",          href: "tel:+972551234567"},
        {
          text: "Visit Our Showroom",          href: "#"},
      ]}
      className="py-20 lg:py-32"
      contentClassName="shadow-lg rounded-xl"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/close-up-clock-with-time-change_23-2149241140.jpg"
      imageAlt="Abstract luxury watch gears"
      logoText="Watch Center"
      columns={[
        {
          title: "Collection",          items: [
            {
              label: "All Watches",              href: "#collection"},
            {
              label: "New Arrivals",              href: "#"},
            {
              label: "Limited Editions",              href: "#"},
          ],
        },
        {
          title: "About Us",          items: [
            {
              label: "Our Story",              href: "#about"},
            {
              label: "Authenticity",              href: "#authenticity"},
            {
              label: "The Experience",              href: "#premium-experience"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Contact",              href: "#contact"},
            {
              label: "Warranty",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Watch Center. All rights reserved."
      className="pt-20 lg:pt-32"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
