"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 ContactFaq from '@/components/sections/contact/ContactFaq';
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="Elevate your product images with professional clipping paths, background removal, and image enhancement. We deliver pixel-perfect results for e-commerce, 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/gallery/uploaded-1767448339176-0ozggx6x.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">
        <ContactFaq
          ctaTitle="Ready to Transform Your Images?"
          ctaDescription="Contact us today to discuss your project and get started with professional image editing."
          ctaButton={{
            text: "Get in Touch",
            href: "mailto:contact@clippingstudio.com"
          }}
          ctaIcon={Mail}
          useInvertedBackground="noInvert"
          animationType="slide-up"
          faqs={[
            {
              id: "1",
              title: "What file formats do you accept?",
              content: "We accept JPG, PNG, PSD, TIFF, and most other common image formats. We deliver files in your preferred format."
            },
            {
              id: "2",
              title: "What is your typical turnaround time?",
              content: "Standard turnaround is 24-48 hours for most projects. Rush services available for an additional fee. Enterprise clients receive priority processing."
            },
            {
              id: "3",
              title: "Do you offer bulk discounts?",
              content: "Yes! We provide volume discounts for large projects and ongoing work. Contact us for a custom quote based on your specific needs."
            },
            {
              id: "4",
              title: "Can you match a specific background color?",
              content: "Absolutely. We can match any background color, gradient, or pattern you provide. Simply share your reference or color specification."
            },
            {
              id: "5",
              title: "Is there a revision policy?",
              content: "We offer unlimited revisions until you are completely satisfied. Quality is our priority and we work until the result meets your expectations."
            },
            {
              id: "6",
              title: "How do I submit my images?",
              content: "You can upload images directly through our portal, via email, or through cloud storage integration. We support all major file transfer methods."
            }
          ]}
        />
      </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>
  );
}