"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
import TestimonialAboutCard from "@/components/sections/about/TestimonialAboutCard";
import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import FooterCard from "@/components/sections/footer/FooterCard";
import { CheckCircle, Facebook, Instagram, Linkedin, Phone, Sparkles, Target, TrendingUp, Zap, Megaphone, BarChart3, Users, Briefcase, Lightbulb, LineChart, Settings } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumLarge"
      sizing="mediumLarge"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Louis Evans"
          navItems={[
            { name: "How It Works", id: "how-it-works" },
            { name: "Why Me", id: "why-me" },
            { name: "Services", id: "services" },
            { name: "Results", id: "results" },
          ]}
          button={{ text: "Book a Free Call", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero" style={{ marginTop: "5rem" }}>
        <HeroBillboardCarousel
          title="I Help Local Businesses Generate New Customers Using Facebook & Instagram Ads"
          description="Tired of guessing where your next customers will come from? I use targeted Meta advertising to bring in qualified leads from people right in your area—people who are actively looking for what you offer."
          background={{ variant: "plain" }}
          buttons={[{ text: "Book a Free Strategy Call", href: "contact" }]}
          mediaItems={[
            {
              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=1",              imageAlt: "Meta Ads Specialist Strategy"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1522869635100-ce3c3b548351?w=800&h=600&fit=crop",              imageAlt: "Facebook and Instagram Advertising"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e565db18?w=800&h=600&fit=crop&_wi=1",              imageAlt: "Lead Generation Campaigns"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Local Business Marketing"
            },
            {
              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e565db18?w=800&h=600&fit=crop&_wi=2",              imageAlt: "Customer Acquisition Strategy"
            },
          ]}
        />
      </div>

      <div id="how-it-works" data-section="how-it-works" style={{ marginTop: "4rem" }}>
        <FeatureCardNineteen
          title="How It Works"
          description="A simple three-step process to transform your lead generation and grow your business consistently"
          tag="Our Process"
          features={[
            {
              id: 1,
              tag: "Step One",              title: "Target Local Customers",              subtitle: "Precision audience targeting using Meta's powerful tools",              description: "We identify and reach the exact customers you want to attract using advanced demographic, interest, and behavioral targeting. Your ads appear in front of people in your area who are actively searching for your services or products.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop&_wi=1",              imageAlt: "Targeting local customers with Meta ads"
            },
            {
              id: 2,
              tag: "Step Two",              title: "Capture Leads",              subtitle: "High-converting forms and landing pages",              description: "Interested prospects fill out forms or land on optimized pages designed specifically for conversion. Every interaction is tracked and analyzed so we know exactly what's working and what needs improvement.",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e565db18?w=600&h=400&fit=crop",              imageAlt: "Lead capture through forms and landing pages"
            },
            {
              id: 3,
              tag: "Step Three",              title: "Convert to Customers",              subtitle: "Nurture leads and close sales",              description: "We help you follow up with interested prospects through strategic sequences and nurturing. Track which leads convert into paying customers and understand your true return on ad spend.",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop&_wi=2",              imageAlt: "Converting leads into paying customers"
            },
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="why-me" data-section="why-me" style={{ marginTop: "4rem" }}>
        <TestimonialAboutCard
          tag="Why Work With Me"
          tagIcon={Target}
          title="You Get Predictable, Measurable Results—Not Empty Promises"
          description="Local business owners like you deserve more than vanity metrics."
          subdescription="You deserve a partner who is focused on real leads and real customers."
          icon={TrendingUp}
          imageSrc="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=600&h=400&fit=crop"
          imageAlt="Analytics and performance metrics"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="results" data-section="results" style={{ marginTop: "4rem" }}>
        <MetricCardTwo
          title="Proven Results"
          description="See the impact of targeted Meta advertising on your lead pipeline"
          tag="Case Study Example"
          metrics={[
            {
              id: "1",              value: "3.2x",              description: "Average ROI improvement"
            },
            {
              id: "2",              value: "47%",              description: "Cost per lead reduction"
            },
            {
              id: "3",              value: "156%",              description: "Lead volume increase"
            },
            {
              id: "4",              value: "$2.1M+",              description: "Client revenue generated"
            },
          ]}
          gridVariant="uniform-all-items-equal"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="case-study" data-section="case-study" style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: "4rem 2rem", marginTop: "2rem" }}>
        <div style={{ maxWidth: "600px", textAlign: "center" }}>
          <img
            src="https://images.unsplash.com/photo-1460925895917-adf4e565db18?w=600&h=400&fit=crop"
            alt="Case Study"
            style={{ width: "100%", height: "auto", borderRadius: "0.5rem" }}
          />
        </div>
      </div>

      <div id="services" data-section="services" style={{ marginTop: "4rem" }}>
        <ProductCardThree
          title="What I Offer"
          description="Comprehensive Meta advertising services designed to grow your local business"
          products={[
            {
              id: "1",              name: "Meta Ad Campaign Setup & Management",              price: "Custom",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop&_wi=1",              imageAlt: "Campaign management service"
            },
            {
              id: "2",              name: "Ad Creative Design & Copywriting",              price: "Custom",              imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400&h=300&fit=crop",              imageAlt: "Creative design service"
            },
            {
              id: "3",              name: "Lead Generation Funnel Setup",              price: "Custom",              imageSrc: "https://images.unsplash.com/photo-1460925895917-adf4e565db18?w=400&h=300&fit=crop",              imageAlt: "Lead funnel setup"
            },
            {
              id: "4",              name: "Campaign Optimization & Scaling",              price: "Custom",              imageSrc: "https://images.unsplash.com/photo-1552664730-d307ca884978?w=400&h=300&fit=crop&_wi=2",              imageAlt: "Campaign optimization"
            },
          ]}
          gridVariant="two-columns-alternating-heights"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="pilot-campaign" data-section="pilot-campaign" style={{ marginTop: "4rem" }}>
        <PricingCardOne
          title="Start Small, Scale Fast"
          description="New clients start with a focused pilot campaign to prove results before committing to larger ad spend"
          tag="Pilot Campaign Offer"
          plans={[
            {
              id: "pilot",              badge: "Perfect for Testing",              badgeIcon: Sparkles,
              price: "Custom",              subtitle: "Prove the concept with real results",              features: [
                "1-month pilot campaign",                "Ad setup and strategy planning",                "Daily campaign monitoring",                "Weekly performance reports",                "Full transparency on spend and results",                "Scale roadmap after pilot success"
              ],
            },
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact" style={{ marginTop: "4rem" }}>
        <ContactFaq
          ctaTitle="Ready to Generate New Customers?"
          ctaDescription="Book your free 30-minute strategy call. We'll discuss your business goals, current marketing challenges, and exactly how targeted Meta ads can help you attract more qualified leads. Call 078262000531 or email louisevans789@gmail.com"
          ctaButton={{
            text: "Book Your Free Call",            href: "https://calendly.com/louisevans"
          }}
          ctaIcon={Phone}
          faqs={[
            {
              id: "1",              title: "How much does this cost?",              content: "Ad spend starts at your comfort level. We typically recommend $1,000-$3,000 to properly test and prove the concept. You pay for the ads directly through Meta, and we manage the campaigns. There's also a service fee based on campaign complexity and management needs."
            },
            {
              id: "2",              title: "How quickly will I see results?",              content: "Initial results (impressions and clicks) are immediate. Qualified leads typically appear within 5-7 days. However, we need at least 2-4 weeks of data to optimize campaigns properly and prove ROI."
            },
            {
              id: "3",              title: "What if the ads don't work for my business?",              content: "If we're not seeing results after 2-4 weeks, we'll either adjust the campaign strategy or you can stop with no long-term commitment. That's why we start with pilot campaigns—to minimize risk while proving the concept."
            },
            {
              id: "4",              title: "Do you work with all types of local businesses?",              content: "I work best with service-based and local businesses including contractors, consultants, salons, dental offices, plumbers, and e-commerce retailers. If you're unsure, let's talk on your free consultation."
            },
          ]}
          useInvertedBackground={false}
          animationType="slide-up"
          accordionAnimationType="smooth"
        />
      </div>

      <div id="footer" data-section="footer" style={{ marginTop: "4rem" }}>
        <FooterCard
          logoText="Louis Evans"
          copyrightText="© 2025 Louis Evans | Meta Ads Specialist for Local Businesses"
          socialLinks={[
            {
              icon: Facebook,
              href: "https://facebook.com",              ariaLabel: "Facebook"
            },
            {
              icon: Linkedin,
              href: "https://linkedin.com",              ariaLabel: "LinkedIn"
            },
            {
              icon: Instagram,
              href: "https://instagram.com",              ariaLabel: "Instagram"
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}