"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import TextAbout from "@/components/sections/about/TextAbout";
import FeatureCardTwentyFive from "@/components/sections/feature/FeatureCardTwentyFive";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Award, BarChart3, BookOpen, CheckCircle, Code, Compass, DollarSign, Globe, Heart, Layers, Palette, Rocket, Send, ShoppingCart, Sparkles, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="glass-elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Precision Pages"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Pricing", id: "pricing" },
            { name: "Testimonials", id: "testimonials" },
          ]}
          button={{ text: "Get Started", href: "contact" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Build Your Digital Presence, Fast"
          description="We create stunning, conversion-focused websites for local businesses, artists, content creators, and startups. Professional design. Zero compromises."
          background={{ variant: "sparkles-gradient" }}
          tag="Web Design Agency"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/landing-page-with-laptop-with-gradient_23-2148351320.jpg"
          imageAlt="Modern website mockup on laptop"
          mediaAnimation="slide-up"
          buttons={[
            { text: "See Our Work", href: "portfolio" },
            { text: "Get a Quote", href: "contact" },
          ]}
          buttonAnimation="slide-up"
          marqueeItems={[
            { type: "text", text: "Local Businesses" },
            { type: "text", text: "Artists & Creators" },
            { type: "text", text: "E-Commerce Shops" },
            { type: "text", text: "Startups" },
            { type: "text", text: "Service Professionals" },
          ]}
          marqueeSpeed={30}
          showMarqueeCard={true}
          ariaLabel="Hero section for web design agency"
        />
      </div>

      <div id="about" data-section="about">
        <TextAbout
          tag="Why Choose Us"
          tagIcon={CheckCircle}
          tagAnimation="slide-up"
          title="We don't build generic websites. We build results-driven digital experiences that grow your business and engage your audience."
          useInvertedBackground={false}
          buttons={[
            { text: "Learn Our Process", href: "process" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyFive
          title="Our Services"
          description="Comprehensive web solutions tailored to your business needs"
          tag="What We Offer"
          tagIcon={Zap}
          tagAnimation="slide-up"
          features={[
            {
              title: "Web Design & Development",              description: "Custom-built websites that are fast, beautiful, and SEO-friendly. We focus on user experience and conversion optimization.",              icon: Code,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/modern-responsive-adaptive-web-design-mobile-apps_1284-43969.jpg?_wi=1",                  imageAlt: "Web design service showcase"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=1",                  imageAlt: "Recent web design project"},
              ],
            },
            {
              title: "E-Commerce Solutions",              description: "Fully functional online stores with secure payment integration, inventory management, and checkout optimization.",              icon: ShoppingCart,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/laptop-blank-screen-hopping-cart-full-gifts-with-copyspace-online-shopping-concept_1423-92.jpg",                  imageAlt: "E-commerce platform showcase"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=1",                  imageAlt: "E-commerce project example"},
              ],
            },
            {
              title: "SEO & Performance",              description: "Strategic optimization to rank higher on Google and deliver lightning-fast load times. Your audience deserves speed.",              icon: TrendingUp,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/seo-ranking-analysis-banner-digital-analytics-search-engine-optimization-content-landing-page-with-isometric-charts-graphs-computer-mobile-screen_107791-4336.jpg?_wi=1",                  imageAlt: "SEO optimization analytics"},
                {
                  imageSrc: "http://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg?_wi=1",                  imageAlt: "Performance optimization project"},
              ],
            },
            {
              title: "Content Strategy & Management",              description: "We help you tell your story effectively. From copywriting to content calendars, we ensure your message resonates.",              icon: BookOpen,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/working-office_1150-121.jpg?_wi=1",                  imageAlt: "Content strategy planning"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=2",                  imageAlt: "Content-focused website"},
              ],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
          buttons={[
            { text: "View All Services", href: "services" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          title="Our Impact"
          description="Proven results that speak for themselves"
          tag="Success By Numbers"
          tagIcon={Award}
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              icon: Globe,
              title: "Projects Delivered",              value: "150+"},
            {
              id: "2",              icon: Users,
              title: "Happy Clients",              value: "120+"},
            {
              id: "3",              icon: BarChart3,
              title: "Avg Traffic Growth",              value: "187%"},
            {
              id: "4",              icon: Zap,
              title: "Conversion Rate Lift",              value: "3.2x"},
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Industry Leaders"
          description="We partner with businesses and creators across diverse industries to build their digital presence"
          tag="Our Partners"
          tagIcon={Heart}
          tagAnimation="slide-up"
          names={[
            "Local Boutique Co",            "Artist Collective",            "Tech Startup Inc",            "Content Creator Network",            "E-Commerce Collective",            "Service Pro Agency",            "Creative Studio",            "Digital Innovators"]}
          textboxLayout="default"
          useInvertedBackground={false}
          speed={35}
          showCard={true}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Precision Pages transformed our online presence. Within 3 months, our traffic doubled and we're seeing real sales from our website. The team understood our vision and delivered beyond expectations."
          rating={5}
          author="Sarah Chen, Owner - Artisan Goods Boutique"
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Sarah Chen"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"},
            {
              src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial"},
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="process" data-section="process">
        <FeatureCardTwentyFive
          title="Our Process"
          description="A streamlined approach that delivers results on time and on budget"
          tag="How We Work"
          tagIcon={Layers}
          tagAnimation="slide-up"
          features={[
            {
              title: "Discovery & Strategy",              description: "We deeply understand your business goals, target audience, and competition. This foundation guides everything we build.",              icon: Compass,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/modern-responsive-adaptive-web-design-mobile-apps_1284-43969.jpg?_wi=2",                  imageAlt: "Strategy planning session"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=3",                  imageAlt: "Discovery phase mockup"},
              ],
            },
            {
              title: "Design & Development",              description: "Our creative team brings your vision to life with modern design principles and clean, efficient code. Every pixel matters.",              icon: Palette,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=2",                  imageAlt: "Design mockup"},
                {
                  imageSrc: "http://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg?_wi=2",                  imageAlt: "Development in progress"},
              ],
            },
            {
              title: "Testing & Launch",              description: "Rigorous testing across devices and browsers ensures a flawless experience. We launch when you're ready, with full support.",              icon: CheckCircle,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/modern-responsive-adaptive-web-design-mobile-apps_1284-43969.jpg?_wi=3",                  imageAlt: "Testing phase screenshot"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=4",                  imageAlt: "Live website launch"},
              ],
            },
            {
              title: "Ongoing Growth",              description: "We don't disappear after launch. Continuous optimization, analytics reviews, and updates keep your site performing at its best.",              icon: Rocket,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/seo-ranking-analysis-banner-digital-analytics-search-engine-optimization-content-landing-page-with-isometric-charts-graphs-computer-mobile-screen_107791-4336.jpg?_wi=2",                  imageAlt: "Performance analytics"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=3",                  imageAlt: "Growth tracking dashboard"},
              ],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <FeatureCardTwentyFive
          title="Simple, Transparent Pricing"
          description="We have plans for every stage of growth. All include free consultation."
          tag="Pricing Plans"
          tagIcon={DollarSign}
          tagAnimation="slide-up"
          features={[
            {
              title: "Starter",              description: "Up to 5 pages, mobile responsive design, basic SEO optimization, contact form integration, and 30 days of support.",              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/gym-promotion-landing-page-with-photo_23-2148310410.jpg?_wi=5",                  imageAlt: "Starter plan"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/modern-responsive-adaptive-web-design-mobile-apps_1284-43969.jpg?_wi=4",                  imageAlt: "Starter features"},
              ],
            },
            {
              title: "Professional",              description: "Up to 15 pages, advanced design & UX, full SEO optimization, blog/content management, e-commerce ready, analytics setup, and 3 months of support.",              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/flat-design-minimal-technology-landing-page_23-2149188470.jpg?_wi=4",                  imageAlt: "Professional plan"},
                {
                  imageSrc: "http://img.b2bpic.net/free-vector/seo-ranking-analysis-banner-digital-analytics-search-engine-optimization-content-landing-page-with-isometric-charts-graphs-computer-mobile-screen_107791-4336.jpg?_wi=3",                  imageAlt: "Professional features"},
              ],
            },
            {
              title: "Enterprise",              description: "Unlimited pages, custom functionality, full e-commerce platform, advanced integrations, dedicated support, performance optimization, and ongoing maintenance plan.",              icon: Sparkles,
              mediaItems: [
                {
                  imageSrc: "http://img.b2bpic.net/free-psd/minimal-magazine-cover-landing-page-template_23-2149660314.jpg?_wi=3",                  imageAlt: "Enterprise plan"},
                {
                  imageSrc: "http://img.b2bpic.net/free-photo/working-office_1150-121.jpg?_wi=2",                  imageAlt: "Enterprise features"},
              ],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          carouselMode="buttons"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Ready to Start?"
          title="Let's Build Your Dream Website"
          description="Share your vision, and we'll create a tailored proposal with timeline and investment. Most projects start within 2-3 weeks."
          tagIcon={Send}
          tagAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Get Your Quote"
          termsText="We'll respond within 24 hours with a personalized proposal and next steps."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Precision Pages"
          columns={[
            {
              items: [
                { label: "Services", href: "#services" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Process", href: "#process" },
              ],
            },
            {
              items: [
                { label: "Pricing", href: "#pricing" },
                { label: "Testimonials", href: "#testimonials" },
                { label: "About", href: "#about" },
              ],
            },
            {
              items: [
                { label: "Contact", href: "#contact" },
                { label: "Blog", href: "/blog" },
                { label: "Support", href: "/support" },
              ],
            },
            {
              items: [
                { label: "Privacy", href: "/privacy" },
                { label: "Terms", href: "/terms" },
                { label: "Sitemap", href: "/sitemap" },
              ],
            },
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
