"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Star, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="layered"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "Services",
          id: "services",
        },
        {
          name: "Pricing",
          id: "pricing",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="SEO Expert"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlay
      title="Rank Higher. Grow Faster. Dominate Search."
      description="SCU Expert helps businesses grow with powerful SEO, AI Search Optimization, content strategy, and digital visibility solutions."
      buttons={[
        {
          text: "Get Free Consultation",
          href: "#contact",
        },
        {
          text: "View Services",
          href: "#services",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150165975.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904329.jpg",
          alt: "Dynamic data visualization in 3d",
        },
        {
          src: "http://img.b2bpic.net/free-photo/dynamic-data-visualization-3d_23-2151904326.jpg",
          alt: "Dynamic data visualization in 3d",
        },
        {
          src: "http://img.b2bpic.net/free-photo/streaky-light-patterns-black-surface-backdrop_23-2148055568.jpg",
          alt: "Streaky light patterns on black surface backdrop",
        },
        {
          src: "http://img.b2bpic.net/free-photo/3d-render-network-communications-background-with-flowing-digital-particles_1048-15686.jpg",
          alt: "3D render of a network communications background with flowing digital particles",
        },
        {
          src: "http://img.b2bpic.net/free-photo/abstract-dark-background-with-purple-lines-generative-ai_169016-30670.jpg",
          alt: "Abstract dark background with purple lines generative AI",
        },
      ]}
      avatarText="Trusted by 100+ innovative brands"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          icon: Users,
          title: "Clients Served",
          value: "100+",
        },
        {
          id: "m2",
          icon: Star,
          title: "Satisfaction Rating",
          value: "5/5",
        },
        {
          id: "m3",
          icon: Star,
          title: "AI Specialists",
          value: "15+",
        },
        {
          id: "m4",
          icon: TrendingUp,
          title: "Ranking Growth",
          value: "300%",
        },
      ]}
      title="Proven Performance"
      description="Driving tangible growth across all modern search engines."
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "s1",
          title: "Website SEO",
          descriptions: [
            "Complete technical auditing",
            "On-page optimization",
            "Performance scaling",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/digital-connectivity-technology-icon-neon-gradient-background_53876-119515.jpg",
        },
        {
          id: "s2",
          title: "AI SEO",
          descriptions: [
            "ChatGPT search visibility",
            "AI response optimization",
            "Semantic search indexing",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/employee-working-marketing-setting_23-2151871164.jpg",
        },
        {
          id: "s3",
          title: "Local SEO",
          descriptions: [
            "Google My Business",
            "Local citation building",
            "Maps optimization",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-light-painting-dark_23-2149627923.jpg",
        },
        {
          id: "s4",
          title: "Content Strategy",
          descriptions: [
            "Authority blog content",
            "Link acquisition strategy",
            "Conversion optimization",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/3d-shape-glowing-with-bright-holographic-colors_23-2151037238.jpg",
        },
      ]}
      title="Premium SEO Services"
      description="Tailored strategies for modern search dominance."
    />
  </div>

  <div id="why-us" data-section="why-us">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "AI-Powered Systems",
          descriptions: [
            "Data-driven decision making",
            "Predictive search modeling",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/rendering-abstract-futuristic-background-with-glowing-neon-blue-lights_181624-26042.jpg",
        },
        {
          id: "f2",
          title: "Performance Tracking",
          descriptions: [
            "Monthly reporting metrics",
            "ROI-focused optimization",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/internet-things-technological-background-with-hexagons_23-2147630098.jpg",
        },
        {
          id: "f3",
          title: "Organic Growth",
          descriptions: [
            "Sustainable traffic growth",
            "Brand visibility scaling",
          ],
          imageSrc: "http://img.b2bpic.net/free-vector/discord-social-media-marketing-background_271628-348.jpg",
        },
      ]}
      title="Why Choose Us?"
      description="Innovation meets proven marketing results."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          badge: "Entry",
          price: "$150",
          subtitle: "For small business starters",
          buttons: [
            {
              text: "Select Plan",
            },
          ],
          features: [
            "5 Keywords",
            "Basic Audit",
            "On-Page SEO",
            "1 Week Support",
          ],
        },
        {
          id: "std",
          badge: "Most Popular",
          price: "$350",
          subtitle: "Professional SEO Package",
          buttons: [
            {
              text: "Select Plan",
            },
          ],
          features: [
            "15 Keywords",
            "Full Website SEO",
            "Technical SEO",
            "Speed Optimization",
            "Competitor Analysis",
            "2 Weeks Support",
          ],
        },
        {
          id: "prem",
          badge: "Advanced",
          price: "$700",
          subtitle: "For rapid market dominance",
          buttons: [
            {
              text: "Select Plan",
            },
          ],
          features: [
            "Advanced SEO",
            "AI Optimization",
            "Content Strategy",
            "Authority Backlinks",
            "Monthly Reports",
            "Full Support",
          ],
        },
      ]}
      title="Transparent Pricing"
      description="Choose the level of growth that fits your business goals."
    />
  </div>

  <div id="results" data-section="results">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          brand: "E-Commerce",
          name: "Traffic Increase",
          price: "300%",
          rating: 5,
          reviewCount: "120+",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-with-flowing-lines-particles_1048-13576.jpg",
        },
        {
          id: "p2",
          brand: "Tech Startup",
          name: "Search Ranking",
          price: "1st Page",
          rating: 5,
          reviewCount: "95+",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-low-poly-background-with-connecting-dots-lines_1048-5910.jpg",
        },
        {
          id: "p3",
          brand: "Local Business",
          name: "ROI Growth",
          price: "450%",
          rating: 5,
          reviewCount: "80+",
          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg",
        },
        {
          id: "p4",
          brand: "SaaS Platform",
          name: "Lead Increase",
          price: "220%",
          rating: 5,
          reviewCount: "150+",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-modern-background-with-cyber-particles_1048-12380.jpg",
        },
        {
          id: "p5",
          brand: "Retail Store",
          name: "Map Rankings",
          price: "Top 3",
          rating: 5,
          reviewCount: "200+",
          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",
        },
        {
          id: "p6",
          brand: "Blog/Content",
          name: "Organic Traffic",
          price: "500%",
          rating: 5,
          reviewCount: "300+",
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-background-with-flowing-cyber-lines_1048-14148.jpg",
        },
      ]}
      title="Proven Results"
      description="Measurable growth from industry case studies."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSix
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah Johnson",
          handle: "CEO, GrowthCorp",
          testimonial: "SCU Expert completely transformed our website traffic.",
          imageSrc: "http://img.b2bpic.net/free-photo/redhead-female-supervisor-dressed-elegant-suit-grey-background_613910-10390.jpg",
        },
        {
          id: "2",
          name: "Michael Chen",
          handle: "CTO, InnovateLab",
          testimonial: "Our business rankings increased dramatically.",
          imageSrc: "http://img.b2bpic.net/free-photo/serious-senior-business-woman-office-desk_1262-3824.jpg",
        },
        {
          id: "3",
          name: "Emily Rodriguez",
          handle: "Marketing Director",
          testimonial: "Professional, fast, and result-driven.",
          imageSrc: "http://img.b2bpic.net/free-photo/employee-drinking-coffee-holding-laptop-working-strategy_482257-78092.jpg",
        },
        {
          id: "4",
          name: "David Kim",
          handle: "Founder, StartupXYZ",
          testimonial: "The best SEO decision we ever made for scaling.",
          imageSrc: "http://img.b2bpic.net/free-photo/front-view-business-woman-thinking_23-2148317340.jpg",
        },
        {
          id: "5",
          name: "Jane Doe",
          handle: "Owner, RetailOne",
          testimonial: "Exceptional service and measurable ROI.",
          imageSrc: "http://img.b2bpic.net/free-photo/attractive-determined-caucasian-blond-woman-glasses-turning-back-look-camera-being-called-by-coworker-while-sitting-office-working-via-laptop-communicating-with-customers_197531-21324.jpg",
        },
      ]}
      title="Client Success"
      description="What partners say about SEO Expert results."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "How long does SEO take?",
          content: "Results typically start appearing within 3-6 months depending on competition.",
        },
        {
          id: "q2",
          title: "What is AI SEO?",
          content: "Optimizing content to perform well in LLM search responses like ChatGPT and Perplexity.",
        },
        {
          id: "q3",
          title: "Do you guarantee rankings?",
          content: "No agency can guarantee Google results, but we employ proven strategies for maximum visibility.",
        },
        {
          id: "q4",
          title: "Which businesses benefit?",
          content: "Any business looking to grow organic traffic, digital sales, or search authority.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/dark-blue-kitchen-cabinets-with-metal-dividers-ergonomic-storage-solution-furniture_169016-72397.jpg"
      mediaAnimation="slide-up"
      title="Frequently Asked Questions"
      description="Everything you need to know about scaling your digital presence."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Let's Grow Your Brand"
      description="Get a free strategy consultation today."
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Name",
        },
        {
          name: "email",
          type: "email",
          placeholder: "Email",
        },
        {
          name: "website",
          type: "text",
          placeholder: "Business Website",
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "How can we help?",
      }}
      imageSrc="http://img.b2bpic.net/free-vector/front-back-design-card_1308-86654.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="SEO Expert"
      columns={[
        {
          title: "Services",
          items: [
            {
              label: "Website SEO",
              href: "#services",
            },
            {
              label: "AI Search",
              href: "#services",
            },
            {
              label: "Local SEO",
              href: "#services",
            },
          ],
        },
        {
          title: "Resources",
          items: [
            {
              label: "Case Studies",
              href: "#results",
            },
            {
              label: "FAQ",
              href: "#faq",
            },
          ],
        },
        {
          title: "Contact",
          items: [
            {
              label: "Get Consultation",
              href: "#contact",
            },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
