"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import FaqBase from '@/components/sections/faq/FaqBase';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { Sparkles, CheckCircle, Zap, Award, Users, TrendingUp, DollarSign, Star, HelpCircle, ArrowRight, Package } from 'lucide-react';
import Link from 'next/link';

export default function HomePage() {
  const navItems = [
    { name: "Home", id: "/" },
    { name: "Services", id: "/services" },
    { name: "Portfolio", id: "/portfolio" },
    { name: "Pricing", id: "/pricing" },
    { name: "Contact", id: "/contact" },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="compact"
      sizing="mediumLarge"
      background="blurBottom"
      cardStyle="inset"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="bold"
    >
      {/* Navbar */}
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Home", id: "/" },
            { name: "Services", id: "/services" },
            { name: "Portfolio", id: "/portfolio" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" },
          ]}
          brandName="WebVitrina"
          bottomLeftText="Strategic Web Design"
          bottomRightText="hello@webvitrina.it"
        />
      </div>

      {/* Hero Section */}
      <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
        <HeroSplitDoubleCarousel
          title="Transform Your Local Business with a Professional Website"
          description="Get a custom, high-converting website designed specifically for local businesses. Drive more calls, leads, and customers with strategic web design."
          tag="Local Business Growth"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "glowing-orb" }}
          leftCarouselItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-modern-restaurant-website-design-showc-1772481394203-6f429e65.png",
              imageAlt: "Restaurant website showcase"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-plumbing-service-website--1772481394136-2b59a7cf.png",
              imageAlt: "Plumber service website"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-modern-fitness-gym-website-on-desktop--1772481393975-0d566165.png",
              imageAlt: "Gym membership website"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-services-website-accounti-1772481393496-1f7d6de2.png?_wi=1",
              imageAlt: "Professional office website"
            }
          ]}
          rightCarouselItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/an-electrician-service-website-displayed-1772481394103-9526a798.png",
              imageAlt: "Electrician website design"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-beauty-salon-website-on-desktop-featur-1772481394175-ec345cda.png",
              imageAlt: "Beauty salon website"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-medical-clinic-or-dental-office-websit-1772481393027-a9ac14a2.png",
              imageAlt: "Medical clinic website"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-retail-shop-website-on-desktop-showing-1772481394704-e8aac05d.png",
              imageAlt: "Retail shop website"
            }
          ]}
          buttons={[
            { text: "Book Free Consultation", href: "/contact" },
            { text: "See Our Work", href: "/portfolio" }
          ]}
          buttonAnimation="slide-up"
          carouselPosition="right"
        />
      </div>

      {/* About Section */}
      <div id="about" data-section="about" className="mx-auto px-4 md:px-6">
        <MediaAbout
          title="Why Local Businesses Trust WebVitrina"
          description="We specialize in creating vetrina websites that convert local traffic into paying customers. Our proven approach combines strategic design, local SEO optimization, and conversion psychology to deliver measurable ROI for plumbers, electricians, restaurants, gyms, and professional services."
          tag="About Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/a-professional-web-design-team-working-c-1772481393010-20c338ee.png?_wi=1"
          imageAlt="WebVitrina team working on websites"
          buttons={[
            { text: "Learn Our Method", href: "/services" }
          ]}
          buttonAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      {/* Features Section */}
      <div id="features" data-section="features" className="mx-auto px-4 md:px-6">
        <FeatureCardTwentySix
          features={[
            {
              title: "Discovery & Strategy",
              description: "We analyze your local market, competitors, and target customers to build a data-driven strategy that converts.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/strategic-business-analysis-and-market-r-1772481393424-7eaef511.png?_wi=1",
              imageAlt: "Strategic discovery phase",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            },
            {
              title: "Custom Design & Development",
              description: "Mobile-first, fast-loading websites optimized for local SEO and conversion. Every pixel designed for results.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/web-development-workspace-showing-multip-1772481393234-05497ef7.png?_wi=1",
              imageAlt: "Web development process",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            },
            {
              title: "Local SEO Optimization",
              description: "Your site ranks for local searches. Customers find you when they search for your services nearby.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/seo-optimization-dashboard-showing-ranki-1772481393537-b0ddb69c.png?_wi=1",
              imageAlt: "SEO optimization strategy",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            },
            {
              title: "Conversion & Analytics Setup",
              description: "Integrated Google Analytics, Meta Pixel, and call tracking. Know exactly where your leads come from.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/comprehensive-analytics-dashboard-displa-1772481393885-8549e572.png?_wi=1",
              imageAlt: "Analytics dashboard setup",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            },
            {
              title: "Ongoing Support & Growth",
              description: "Your website isn't static. We optimize, update, and improve based on real performance data.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/ongoing-website-support-and-optimization-1772481392699-fa7a26fc.png?_wi=1",
              imageAlt: "Client support and optimization",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            },
            {
              title: "Training & Handoff",
              description: "You understand every aspect of your site. We provide training so you can manage content independently.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/business-owner-training-session-on-websi-1772481394531-aff2fd41.png?_wi=1",
              imageAlt: "Client training session",
              buttonIcon: ArrowRight,
              buttonHref: "/services"
            }
          ]}
          title="Our Web Design Process"
          description="A strategic, results-driven approach built specifically for local business growth"
          tag="How We Work"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Portfolio Section */}
      <div id="product" data-section="product" className="mx-auto px-4 md:px-6">
        <ProductCardFour
          products={[
            {
              id: "1",
              name: "Luigi's Pizzeria",
              price: "Custom Design",
              variant: "Restaurant Website",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/modern-restaurant-website-design-showcas-1772481396855-a20f944f.png?_wi=1",
              imageAlt: "Luigi's Pizzeria website"
            },
            {
              id: "2",
              name: "Marco Plumbing Services",
              price: "Custom Design",
              variant: "Service Business",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/professional-plumbing-service-website-fe-1772481398203-8167a6d1.png?_wi=1",
              imageAlt: "Marco Plumbing website"
            },
            {
              id: "3",
              name: "FitZone Gym",
              price: "Custom Design",
              variant: "Fitness Business",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/modern-fitness-gym-website-design-with-c-1772481398132-f3404b9c.png?_wi=1",
              imageAlt: "FitZone Gym website"
            },
            {
              id: "4",
              name: "Dr. Rossi Dental Studio",
              price: "Custom Design",
              variant: "Professional Service",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/professional-dental-office-website-showc-1772481404977-6eac484e.png?_wi=1",
              imageAlt: "Dr. Rossi Dental Studio website"
            },
            {
              id: "5",
              name: "Elegance Hair Salon",
              price: "Custom Design",
              variant: "Beauty Business",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/beauty-salon-website-showcasing-stylists-1772481395714-ac41d4af.png?_wi=1",
              imageAlt: "Elegance Hair Salon website"
            }
          ]}
          title="Featured Client Websites"
          description="Real websites for real local businesses. See the results we deliver."
          tag="Portfolio"
          tagIcon={Award}
          tagAnimation="slide-up"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          buttons={[
            { text: "View All Projects", href: "/portfolio" }
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      {/* Social Proof Section */}
      <div id="social-proof" data-section="social-proof" className="mx-auto px-4 md:px-6">
        <SocialProofOne
          title="Trusted by Hundreds of Local Businesses"
          description="From single-location restaurants to multi-franchise operations, our clients trust us to drive results."
          tag="Social Proof"
          tagIcon={Users}
          tagAnimation="slide-up"
          names={[
            "Luigi's Pizzeria",
            "Marco Plumbing",
            "FitZone Gym",
            "Dr. Rossi Dental",
            "Elegance Salon",
            "EuroElectric",
            "TechRepair Pro",
            "Bella Ristorante"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      {/* Metrics Section */}
      <div id="metrics" data-section="metrics" className="mx-auto px-4 md:px-6">
        <MetricCardEleven
          metrics={[
            {
              id: "1",
              value: "+250%",
              title: "Avg. Increase in Phone Calls",
              description: "Within 6 months of website launch",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/phone-call-tracking-analytics-dashboard--1772481393916-22a44d88.png",
              imageAlt: "Call tracking dashboard"
            },
            {
              id: "2",
              value: "+180%",
              title: "Avg. Lead Form Submissions",
              description: "First-month conversion rate",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/lead-generation-dashboard-displaying-for-1772481393821-6e886007.png",
              imageAlt: "Lead generation metrics"
            },
            {
              id: "3",
              value: "98%",
              title: "Client Satisfaction Rate",
              description: "Clients recommend us to others",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/client-satisfaction-and-testimonial-show-1772481396661-8966786b.png?_wi=1",
              imageAlt: "Client satisfaction"
            }
          ]}
          title="Proven Results for Our Clients"
          description="Real numbers from real local businesses who partnered with WebVitrina"
          tag="Results"
          tagIcon={TrendingUp}
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
        />
      </div>

      {/* Testimonials Section */}
      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Luigi Rossi",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-professional-male-business-1772481392333-288c9df5.png",
              imageAlt: "Luigi Rossi"
            },
            {
              id: "2",
              name: "Marco Bianchi",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-professional-male-entrepre-1772481392140-7179f4fe.png",
              imageAlt: "Marco Bianchi"
            },
            {
              id: "3",
              name: "Francesca Moretti",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-professional-female-busine-1772481393117-f513f6a5.png",
              imageAlt: "Francesca Moretti"
            },
            {
              id: "4",
              name: "Giuseppe Ferrari",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-male-professional-age-45-5-1772481394119-874b1be2.png",
              imageAlt: "Giuseppe Ferrari"
            },
            {
              id: "5",
              name: "Sofia Conti",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-professional-woman-age-30--1772481391483-366570bf.png",
              imageAlt: "Sofia Conti"
            },
            {
              id: "6",
              name: "Antonio Romano",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5Jb8x2efcxplLP7w1RrFSkrT/portrait-of-a-professional-man-age-40-50-1772481392236-08ce51d8.png",
              imageAlt: "Antonio Romano"
            }
          ]}
          cardTitle="Over 300+ local business owners have transformed their online presence with WebVitrina"
          cardTag="Client Success Stories"
          cardTagIcon={Star}
          cardAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

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