"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Shield, Info, Wrench, ShoppingCart, MessageCircle, TrendingUp, HelpCircle } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLargeSizeMediumTitles"
      background="grid"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "Products", id: "products" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="Mobile Care"
          bottomLeftText="Expert Mobile Care"
          bottomRightText="support@mobilecare.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroOverlay
          title="Professional Mobile Phone Care & Repair"
          description="Expert repair services, premium accessories, and professional care for all major brands. Fast turnaround, certified technicians, and quality guarantees."
          tag="Quality & Trust"
          tagIcon={Shield}
          imageSrc="http://img.b2bpic.net/free-photo/serviceman-uses-magnifier-screwdriver-repair-damaged-smartphone-electronic-workshop_613910-20797.jpg"
          imageAlt="Professional phone repair technician at work"
          textPosition="bottom-left"
          showBlur={true}
          showDimOverlay={false}
          buttons={[
            { text: "Book Repair Service", href: "contact" },
            { text: "Shop Products", href: "products" },
          ]}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="About Mobile Care"
          tagIcon={Info}
          title="Trusted Mobile Solutions Since 2015"
          description="Mobile Care is your go-to destination for professional phone repair and premium mobile accessories. With over 8 years of experience, we've served thousands of satisfied customers. Our certified technicians use genuine parts and latest repair techniques to ensure your device gets the best care possible. We're committed to quick turnarounds, transparent pricing, and exceptional customer service."
          metrics={[
            { value: "8+", title: "Years of Service" },
            { value: "5K+", title: "Happy Customers" },
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/car-repairman-with-protective-face-mask-texting-smart-phone-his-workshop_637285-9332.jpg"
          imageAlt="Mobile Care service center with professional equipment"
          useInvertedBackground={false}
          mediaAnimation="slide-up"
          metricsAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardOne
          title="Our Professional Services"
          description="Comprehensive mobile phone repair and maintenance solutions"
          tag="Services"
          tagIcon={Wrench}
          features={[
            {
              title: "Screen Replacement",              description: "Professional LCD and OLED screen replacement with quality assurance",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-elder-woman-disinfecting-her-smartphone_23-2148492282.jpg",              imageAlt: "Screen replacement service",              button: { text: "Learn More", href: "#" },
            },
            {
              title: "Battery Service",              description: "Battery replacement, health checks, and power optimization",              imageSrc: "http://img.b2bpic.net/free-psd/smartphone-battery-replacement-service-social-media-cover-design-template_47987-25406.jpg",              imageAlt: "Battery replacement",              button: { text: "Learn More", href: "#" },
            },
            {
              title: "Device Protection",              description: "Premium cases, screen protectors, and protective accessories",              imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-case-design_1175-329.jpg",              imageAlt: "Phone case and protection products",              button: { text: "Learn More", href: "#" },
            },
            {
              title: "Charging Solutions",              description: "Quality charging cables, power banks, and fast chargers",              imageSrc: "http://img.b2bpic.net/free-photo/usb-cable-type-c-blue-background_58702-4578.jpg",              imageAlt: "Charging cables and accessories",              button: { text: "Learn More", href: "#" },
            },
          ]}
          gridVariant="two-columns-alternating-heights"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardFour
          title="Premium Mobile Accessories"
          description="High-quality products to protect and enhance your device"
          tag="Shop Now"
          tagIcon={ShoppingCart}
          products={[
            {
              id: "screen-protector",              name: "Tempered Glass Screen Protector",              price: "$12.99",              variant: "For All Models",              imageSrc: "http://img.b2bpic.net/free-photo/high-angle-elder-woman-disinfecting-her-smartphone_23-2148492282.jpg",              imageAlt: "Tempered glass screen protector",              isFavorited: false,
            },
            {
              id: "protective-case",              name: "Premium Protective Phone Case",              price: "$24.99",              variant: "Shock Resistant",              imageSrc: "http://img.b2bpic.net/free-vector/mobile-phone-case-design_1175-329.jpg",              imageAlt: "Premium protective phone case",              isFavorited: false,
            },
            {
              id: "usb-cable",              name: "Durable USB-C Charging Cable",              price: "$9.99",              variant: "Fast Charging",              imageSrc: "http://img.b2bpic.net/free-photo/usb-cable-type-c-blue-background_58702-4578.jpg",              imageAlt: "USB-C charging cable",              isFavorited: false,
            },
            {
              id: "power-bank",              name: "20000mAh Power Bank",              price: "$34.99",              variant: "Dual Port",              imageSrc: "http://img.b2bpic.net/free-photo/usb-cable-type-c-blue-background_58702-4578.jpg",              imageAlt: "Power bank with dual charging ports",              isFavorited: false,
            },
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Customers Say"
          description="Real reviews from satisfied customers who trust Mobile Care"
          tag="Testimonials"
          tagIcon={MessageCircle}
          testimonials={[
            {
              id: "1",              name: "Sarah Johnson",              handle: "@sarah_j",              testimonial: "Amazing service! My phone screen was fixed in just 2 hours. The technician was professional and the price was very fair. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-customer-making-ok-gesture_74855-2298.jpg",              imageAlt: "Sarah Johnson"},
            {
              id: "2",              name: "Michael Chen",              handle: "@m_chen",              testimonial: "Best phone repair shop in town. They fixed my battery issue and even gave me a protective case for free. Great customer service!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Michael Chen"},
            {
              id: "3",              name: "Emily Rodriguez",              handle: "@emily_r",              testimonial: "Very professional team. My charging port was replaced perfectly and they explained everything clearly. Worth every penny!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-woman-showing-ok-sign_1262-17571.jpg",              imageAlt: "Emily Rodriguez"},
            {
              id: "4",              name: "David Kim",              handle: "@david_k",              testimonial: "Transparent pricing, fast service, and genuine parts. I've been a customer for 3 years. Mobile Care never disappoints!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/positive-customer-approving-new-offer_1262-17151.jpg",              imageAlt: "David Kim"},
            {
              id: "5",              name: "Jessica Martinez",              handle: "@jess_mart",              testimonial: "My phone fell and the screen shattered. They fixed it the same day at a reasonable price. Very satisfied with their work!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/happy-satisfied-customer-making-ok-gesture_74855-2298.jpg",              imageAlt: "Jessica Martinez"},
            {
              id: "6",              name: "Robert Wong",              handle: "@r_wong",              testimonial: "Excellent repairs and fantastic customer support. They went above and beyond to help me. Definitely coming back!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              imageAlt: "Robert Wong"},
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Our Track Record"
          description="Proven excellence in mobile phone repair services"
          tag="Metrics"
          tagIcon={TrendingUp}
          metrics={[
            { id: "1", value: "5000+", description: "Devices Repaired" },
            { id: "2", value: "98%", description: "Customer Satisfaction" },
            { id: "3", value: "2 Hours", description: "Average Turnaround" },
            { id: "4", value: "100%", description: "Genuine Parts Guarantee" },
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          carouselMode="buttons"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="We Service All Major Brands"
          description="Trusted repair partner for leading smartphone manufacturers worldwide"
          tag="Compatible Brands"
          textboxLayout="default"
          useInvertedBackground={false}
          names={["Apple", "Samsung", "Google Pixel", "OnePlus", "Motorola", "Nokia", "Sony"]}
          logos={[
            "http://img.b2bpic.net/free-vector/basic-rgb_53876-37667.jpg",            "http://img.b2bpic.net/free-vector/gradient-mobile-store-logo-design_23-2149688660.jpg",            "http://img.b2bpic.net/free-vector/social-media-logo-collection_23-2148058468.jpg",            "http://img.b2bpic.net/free-vector/plus-minus-big-set_78370-8638.jpg",            "http://img.b2bpic.net/free-vector/gradient-mobile-store-logo-template_23-2149680710.jpg",            "http://img.b2bpic.net/free-vector/mobile-shape-logo-template_1156-716.jpg",            "http://img.b2bpic.net/free-vector/flat-design-o-logo-templates-set_23-2148886082.jpg"]}
          speed={40}
          showCard={true}
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Frequently Asked Questions"
          description="Find answers to common questions about our services and products"
          tag="Help & Support"
          tagIcon={HelpCircle}
          faqs={[
            {
              id: "1",              title: "How long does phone repair typically take?",              content: "Most repairs take 1-3 hours depending on the issue. Simple repairs like screen replacements or battery changes are usually completed within 2 hours. Complex issues may take longer. We'll give you an accurate estimate when you bring your device in."},
            {
              id: "2",              title: "Do you offer warranty on repairs?",              content: "Yes! All our repairs come with a 90-day warranty on parts and labor. If any issue arises within this period, we'll fix it free of charge. We stand behind our work because we use genuine quality parts."},
            {
              id: "3",              title: "What brands do you repair?",              content: "We service all major brands including Apple, Samsung, Google Pixel, OnePlus, Motorola, Nokia, Sony, and many others. Our technicians are certified to handle both iOS and Android devices."},
            {
              id: "4",              title: "Do you use original parts?",              content: "Yes, we always use genuine or high-quality OEM parts for all repairs. We never use cheap knock-offs. Our commitment is to maintain your device's quality and longevity."},
            {
              id: "5",              title: "How much does a typical repair cost?",              content: "Pricing varies based on the repair type and your device model. Screen replacements range from $80-200, battery replacements from $50-100, and other repairs vary. We always provide a free quote before starting any work."},
            {
              id: "6",              title: "Do I need to book an appointment?",              content: "While walk-ins are welcome, we recommend booking an appointment to minimize wait time. You can call us or book online. Appointments ensure our technicians are ready when you arrive."},
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
          tagAnimation="slide-up"
          buttonAnimation="slide-up"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to get your device fixed? Contact us today for professional mobile phone repair and premium accessories. Fast service, fair prices, certified technicians."
          animationType="reveal-blur"
          buttons={[
            { text: "Call Now", href: "tel:+1-800-MOBILE-1" },
            { text: "Get in Touch", href: "#" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

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