"use client"

import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import { Award, Code, Crown, DollarSign, Rocket, Send, Shield, Sparkles, Star, TrendingUp, Users, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="medium"
      sizing="medium"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="layered"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="Proofweb"
          navItems={[
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" }
          ]}
          button={{
            text: "Start Your Project",            href: "#contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Craft Digital Experiences That Convert"
          description="We design and build stunning websites that drive results. From concept to launch, Proofweb transforms your vision into high-performing digital solutions."
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Proofweb team member 1"
            },
            {
              src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              alt: "Proofweb team member 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg",              alt: "Proofweb team member 3"
            }
          ]}
          avatarText="Trusted by 150+ businesses worldwide"
          buttons={[
            {
              text: "Explore Our Work",              href: "#portfolio"
            },
            {
              text: "Schedule Consultation",              href: "#contact"
            }
          ]}
          background={{ variant: "rotated-rays-static" }}
          buttonAnimation="slide-up"
          ariaLabel="Proofweb hero section"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Our Capabilities"
          description="Comprehensive web solutions designed to elevate your brand and engage your audience."
          tag="Services"
          tagIcon={Sparkles}
          features={[
            {
              title: "Web Design & Development",              description: "Custom, responsive websites built with cutting-edge technologies and best practices.",              bentoComponent: "globe"
            },
            {
              title: "Performance Optimization",              description: "Lightning-fast load times and seamless user experiences that keep visitors engaged.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Global Reach",              description: "Deploy your website with confidence across all devices and markets worldwide.",              bentoComponent: "map"
            },
            {
              title: "Analytics & Insights",              description: "Real-time data and actionable insights to drive continuous improvement and growth.",              bentoComponent: "line-chart"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <FeatureBorderGlow
          title="Featured Projects"
          description="Hover to see the premium glowing border effect on our latest client success stories."
          tag="Portfolio"
          tagIcon={Award}
          features={[
            {
              icon: Zap,
              title: "E-Commerce Platform",              description: "Scalable online store with 40% increased conversion and seamless payment integration."
            },
            {
              icon: Shield,
              title: "SaaS Dashboard",              description: "Real-time analytics platform serving 5000+ active users with enterprise-grade security."
            },
            {
              icon: Rocket,
              title: "Marketing Website",              description: "Brand-focused site generating 3x more leads through optimized funnel design."
            },
            {
              icon: Users,
              title: "Community Platform",              description: "Engagement hub connecting 25,000+ members with interactive features and social tools."
            },
            {
              icon: TrendingUp,
              title: "SaaS Landing",              description: "Conversion-optimized landing page achieving 12% signup rate with A/B testing."
            },
            {
              icon: Code,
              title: "Developer Portal",              description: "Technical documentation site with 50,000+ monthly active developer users."
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Proofweb transformed our online presence completely. Their strategic approach, attention to detail, and commitment to our success made all the difference. We've seen a 150% increase in qualified leads since launch."
          rating={5}
          author="Sarah Mitchell, CEO at TechVenture"
          avatars={[
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771451577262-6j9g1seb.jpg",              alt: "Sarah Mitchell"
            },
            {
              src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771451597467-k6g38fzb.jpg",              alt: "James Chen"
            },
            {
              src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg",              alt: "Emma Rodriguez"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              alt: "David Kim"
            },
            {
              src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              alt: "Lisa Thompson"
            },
            {
              src: "https://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",              alt: "Michael Zhang"
            }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardTwo
          members={[
            {
              id: "1",              name: "Luke",              role: "Team Member",              description: "Dedicated to delivering exceptional results and driving digital innovation.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771451577262-6j9g1seb.jpg",              imageAlt: "Luke"
            },
            {
              id: "2",              name: "Caleb",              role: "Team Member",              description: "Passionate about creating beautiful and functional digital experiences.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SzEkxKoNyIbQ4hnQYui6BHsfB/uploaded-1771451597467-k6g38fzb.jpg",              imageAlt: "Caleb"
            }
          ]}
          title="Meet Our Team"
          description="The talented professionals behind Proofweb's success."
          tag="Team"
          tagIcon={Users}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
          gridVariant="uniform-all-items-equal"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardEight
          title="Simple, Transparent Pricing"
          description="Choose the perfect plan for your project. All plans include ongoing support and optimization."
          tag="Pricing"
          tagIcon={DollarSign}
          plans={[
            {
              id: "starter",              badge: "Starting Point",              badgeIcon: Rocket,
              price: "$2,500",              subtitle: "Perfect for small projects and startups",              buttons: [
                {
                  text: "Get Started",                  href: "#contact"
                }
              ],
              features: [
                "5-page responsive website",                "Mobile optimization",                "Basic SEO setup",                "Contact form integration",                "30 days of support"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$7,500",              subtitle: "Ideal for growing businesses",              buttons: [
                {
                  text: "Start Project",                  href: "#contact"
                }
              ],
              features: [
                "Up to 15-page website",                "Advanced mobile design",                "SEO optimization",                "E-commerce integration",                "Analytics setup",                "3 months of support"
              ]
            },
            {
              id: "enterprise",              badge: "Premium",              badgeIcon: Crown,
              price: "Custom",              subtitle: "Full-scale solutions for enterprises",              buttons: [
                {
                  text: "Schedule Call",                  href: "#contact"
                }
              ],
              features: [
                "Unlimited pages and features",                "Custom development",                "Advanced integrations",                "Performance optimization",                "Dedicated account manager",                "Ongoing support & maintenance"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Let's Connect"
          title="Ready to Build Something Amazing?"
          description="Join 150+ businesses that trust Proofweb with their digital transformation. Get a free consultation from our team and discover how we can accelerate your growth."
          tagIcon={Send}
          background={{ variant: "downward-rays-animated" }}
          useInvertedBackground={true}
          inputPlaceholder="your@email.com"
          buttonText="Get Free Consultation"
          termsText="We respect your privacy. You'll receive project insights and occasional updates. Unsubscribe anytime."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          columns={[
            {
              title: "Product",              items: [
                { label: "Services", href: "#services" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Pricing", href: "#pricing" },
                { label: "Case Studies", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#" },
                { label: "Team", href: "#team" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "GitHub", href: "https://github.com" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
          copyrightText="© 2025 Proofweb. All rights reserved. Crafted with excellence for digital excellence."
        />
      </div>
    </ThemeProvider>
  );
}