"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardMetrics from '@/components/sections/hero/HeroBillboardMetrics';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardFifteen from '@/components/sections/feature/FeatureCardFifteen';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardFour from '@/components/sections/pricing/PricingCardFour';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="mediumLargeSizeLargeTitles"
      background="noiseDiagonalGradient"
      cardStyle="outline-light"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="minimal"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Clipping Studio"
          navItems={[
            { name: "Home", id: "hero" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Pricing", id: "pricing" }
          ]}
          button={{
            text: "Get Started",
            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardMetrics
          title="Premium Photo Clipping & Image Editing Services"
          description="Transform your product images with expert clipping paths, seamless background removal, and advanced image enhancement We deliver sharp, professional results tailored for ecommerce, fashion, and product photography"
          tag="Professional Image Editing"
          buttons={[
            { text: "Start Your Project", href: "#contact" },
            { text: "View Portfolio", href: "#portfolio" }
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_339dVf94DAODTfYQfi9pwJxtvKj/tmp/take-me-an-image-of-a-girl-on-her-laptop-1767448895021-c28b64fd.jpg"
          imageAlt="Professional clipping and image editing examples"
          frameStyle="card"
          metricsLabel="Trusted by leading brands and e-commerce businesses worldwide"
          metrics={[
            { id: "1", value: "5000+", label: "Projects Completed" },
            { id: "2", value: "98%", label: "Client Satisfaction" },
            { id: "3", value: "24h", label: "Average Turnaround" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Precision Meets Perfection"
          description="We are specialists in transforming raw product images into stunning visual assets. Our team combines technical expertise with artistic vision to deliver clipping paths and image enhancements that elevate your brand."
          tag="About Us"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448339792-6mwtcm7k.jpg"
          imageAlt="Our creative team working on image editing projects"
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn More", href: "#services" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardFifteen
          title="Our Core Services"
          description="Comprehensive image editing solutions designed for modern e-commerce and professional photography"
          tag="Services"
          features={[
            {
              id: "1",
              title: "Clipping Path & Masking",
              description: "Precise object isolation and background removal for clean, professional product images",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448340481-oi0begyr.jpg"
            },
            {
              id: "2",
              title: "Color Correction & Enhancement",
              description: "Professional color grading and image adjustment to ensure accurate, vibrant product representation",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448340852-azfjd7iy.jpg"
            },
            {
              id: "3",
              title: "Background Removal & Replacement",
              description: "Expert background elimination and custom backdrop integration for consistent brand aesthetics",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448341159-2z1o9ijw.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardSix
          title="Recent Projects"
          description="Explore our portfolio of completed clipping and image editing work across various industries"
          tag="Portfolio"
          products={[
            {
              id: "1",
              name: "Luxury Jewelry",
              price: "Starting from $15",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448341613-r7h52do7.jpg"
            },
            {
              id: "2",
              name: "Fashion Apparel",
              price: "Starting from $12",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448341902-jxai7v3u.jpg"
            },
            {
              id: "3",
              name: "Electronics",
              price: "Starting from $18",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448342248-eam1idzn.jpg"
            },
            {
              id: "4",
              name: "Beauty Products",
              price: "Starting from $14",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448342645-rgs9ymaz.jpg"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardSix
          title="Client Success Stories"
          description="Hear from brands and businesses who transformed their product imagery with our services"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "E-commerce Manager",
              testimonial: "Outstanding quality and attention to detail. Our product images look stunning and our sales have increased significantly.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971052-5paod60c.jpg"
            },
            {
              id: "2",
              name: "David Chen",
              handle: "Fashion Brand Owner",
              testimonial: "Professional, reliable, and incredibly fast. Clipping Studio is our go-to partner for all image editing needs.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971396-8z0vqol9.jpg"
            },
            {
              id: "3",
              name: "Jessica Rodriguez",
              handle: "Photography Director",
              testimonial: "Exceptional technical skills combined with artistic sensibility. They consistently exceed expectations.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767391971803-ej8f6jxf.jpg"
            },
            {
              id: "4",
              name: "Michael Thompson",
              handle: "Retail Operations",
              testimonial: "Best clipping service we have worked with. Turnaround time is quick and quality is always top-notch.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448343297-4asr5tm3.jpg"
            },
            {
              id: "5",
              name: "Amanda Lewis",
              handle: "Marketing Manager",
              testimonial: "Transformed our product catalog completely. The precision and professionalism are remarkable.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448343664-ayzidq85.jpg"
            },
            {
              id: "6",
              name: "Robert Jackson",
              handle: "Business Owner",
              testimonial: "Reliable partner for our image editing needs. Highly recommend to anyone serious about image quality.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767448343986-06euu5fi.jpg"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardFour
          title="Transparent Pricing for Every Scale"
          tag="Pricing Plans"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          ctaCards={[
            {
              title: "Schedule a Call",
              description: "Let's discuss your project requirements and custom solutions.",
              href: "#contact"
            },
            {
              title: "Custom Packages",
              description: "Need something specific? We create tailored solutions for large projects.",
              href: "#contact"
            }
          ]}
          plans={[
            {
              id: "starter",
              name: "Starter",
              price: "$99/month",
              subtitle: "Perfect for small online shops and product photographers",
              features: [
                "Up to 50 images",
                "Basic clipping paths",
                "Standard turnaround",
                "Email support"
              ]
            },
            {
              id: "professional",
              name: "Professional",
              price: "$299/month",
              subtitle: "Ideal for growing e-commerce businesses",
              features: [
                "Up to 200 images",
                "Complex clipping paths",
                "Priority turnaround",
                "Dedicated support",
                "Color correction included"
              ]
            },
            {
              id: "enterprise",
              name: "Enterprise",
              price: "Custom",
              subtitle: "For large-scale operations and agencies",
              features: [
                "Unlimited images",
                "All service types",
                "24-hour turnaround",
                "Account manager",
                "Custom workflows",
                "Volume discounts"
              ]
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <FaqDouble
          faqs={[
            {
              id: "1",
              title: "How much does it cost?",
              content: "Our pricing is flexible and scales with your project needs. We offer monthly subscription plans starting at $99 for small operations, as well as pay-per-image pricing for one-off projects. Contact us for a custom quote based on your specific requirements and volume."
            },
            {
              id: "2",
              title: "What are the implications of using clipping services?",
              content: "Using professional clipping services can significantly impact your business by providing clean, consistent product images that boost conversion rates and reduce return rates. Quality clipping paths ensure seamless integration into various backgrounds, whether for e-commerce platforms or print materials. Professional editing also saves your team valuable time and resources."
            },
            {
              id: "3",
              title: "How long will it take?",
              content: "Standard turnaround time is 24-48 hours for most projects. We offer expedited services for urgent requests, with some projects completed within 12 hours. Enterprise and subscription clients receive priority processing. Bulk orders may be completed faster depending on complexity and volume."
            }
          ]}
          title="Frequently Asked Questions"
          description="Find answers to common questions about our clipping and image editing services"
          tag="FAQ"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Clipping Studio"
          copyrightText="© 2025 Clipping Studio. All rights reserved."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Clipping Paths", href: "#services" },
                { label: "Color Correction", href: "#services" },
                { label: "Background Removal", href: "#services" },
                { label: "Image Enhancement", href: "#services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Pricing", href: "#pricing" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",
              items: [
                { label: "Blog", href: "#" },
                { label: "FAQ", href: "#contact" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Support", href: "#contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}