"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
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 TeamCardOne from '@/components/sections/team/TeamCardOne';
import { Headphones, Monitor, Palette, Rocket, Shield, Smartphone, Sparkles, Star, Tablet, 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: "Work", id: "work" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Pricing", id: "pricing" },
            { name: "Team", id: "team" }
          ]}
          button={{ text: "Start Project", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Web Design That Drives Results"
          description="We craft beautiful, high-performance websites that convert visitors into customers. Proofweb is your partner in building digital experiences that matter."
          background={{ variant: "downward-rays-static" }}
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Client 1" },
            { src: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", alt: "Client 2" },
            { src: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", alt: "Client 3" }
          ]}
          avatarText="Trusted by 50+ brands worldwide"
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "View Our Work", href: "#work" }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureBento
          title="Our Services"
          description="From concept to launch, we deliver comprehensive web solutions tailored to your business goals."
          tag="What We Do"
          features={[
            {
              title: "Web Design",              description: "Custom, modern designs that reflect your brand identity and engage your audience.",              bentoComponent: "globe"
            },
            {
              title: "Development",              description: "Fast, scalable websites built with cutting-edge technologies and best practices.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Responsive Design",              description: "Pixel-perfect experiences across all devices and screen sizes.",              bentoComponent: "3d-stack-cards",              items: [
                { icon: Smartphone, title: "Mobile", subtitle: "Perfect on phones", detail: "Optimized for all screen sizes" },
                { icon: Tablet, title: "Tablet", subtitle: "Seamless tablet experience", detail: "Touch-friendly interfaces" },
                { icon: Monitor, title: "Desktop", subtitle: "Full desktop power", detail: "Rich desktop interactions" }
              ]
            },
            {
              title: "Performance",              description: "Lightning-fast load times and optimized code for better user experience and SEO.",              bentoComponent: "line-chart"
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="work" data-section="work">
        <FeatureBorderGlow
          title="Why Choose Proofweb"
          description="We combine strategic thinking with technical expertise to deliver websites that drive real business results."
          features={[
            { icon: Zap, title: "Lightning Fast", description: "Optimized performance ensures users stay engaged and search engines rank you higher." },
            { icon: Shield, title: "Secure by Default", description: "Enterprise-grade security measures protect your site and customer data from day one." },
            { icon: TrendingUp, title: "SEO Optimized", description: "Built with search engines in mind to drive organic traffic and visibility." },
            { icon: Users, title: "User Focused", description: "Every design decision is based on research and best practices for user experience." },
            { icon: Headphones, title: "Dedicated Support", description: "Your success is our success. We provide ongoing support and maintenance for your site." },
            { icon: Palette, title: "Custom Design", description: "No templates or cookie-cutter solutions. Every website is uniquely crafted for you." }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Proofweb completely transformed our online presence. The website they built is not just beautiful, but it's driving real conversions. Their team understood our vision and delivered beyond expectations."
          rating={5}
          author="Sarah Mitchell, CEO of TechFlow"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", alt: "Testimonial 1" },
            { src: "https://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg", alt: "Testimonial 2" },
            { src: "https://img.b2bpic.net/free-vector/man-avatar-collection_24908-60253.jpg", alt: "Testimonial 3" },
            { src: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", alt: "Testimonial 4" },
            { src: "https://img.b2bpic.net/free-photo/smiling-young-handsome-guy-wearing-green-shirt_141793-122624.jpg", alt: "Testimonial 5" },
            { src: "https://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg", alt: "Testimonial 6" }
          ]}
          ratingAnimation="slide-up"
          avatarsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </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 maintenance."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          plans={[
            {
              id: "starter",              badge: "Great for startups",              badgeIcon: Sparkles,
              price: "$3,500",              subtitle: "Perfect for small business websites",              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "5 page website",                "Mobile responsive design",                "Basic SEO optimization",                "Contact form",                "30 days of support"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "$7,500",              subtitle: "For growing businesses with complex needs",              buttons: [{ text: "Get Started", href: "#contact" }],
              features: [
                "15 page website",                "Advanced responsive design",                "Full SEO optimization",                "CMS integration",                "E-commerce setup",                "3 months of support"
              ]
            },
            {
              id: "enterprise",              badge: "For enterprises",              badgeIcon: Rocket,
              price: "Custom",              subtitle: "Large-scale solutions with dedicated team",              buttons: [{ text: "Let's Talk", href: "#contact" }],
              features: [
                "Unlimited pages",                "Custom development",                "Advanced integrations",                "Performance optimization",                "Security audit",                "12 months of support"
              ]
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Team"
          description="Get to know the talented people behind our success"
          tag="Team"
          tagIcon={Users}
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          gridVariant="four-items-2x2-equal-grid"
          members={[
            { id: "1", name: "Sophie P.", role: "Digital Nomad", imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageAlt: "Portrait of Sophie P." },
            { id: "2", name: "Alex M.", role: "Creative Director", imageSrc: "https://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg", imageAlt: "Portrait of Alex M." },
            { id: "3", name: "Jordan K.", role: "Lead Developer", imageSrc: "https://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "Portrait of Jordan K." },
            { id: "4", name: "Casey R.", role: "UX Designer", imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageAlt: "Portrait of Casey R." }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Let's Connect"
          title="Ready to Transform Your Online Presence?"
          description="Get in touch with our team to discuss your project, ask questions, or schedule a consultation. We're here to help bring your digital vision to life."
          background={{ variant: "rotated-rays-animated" }}
          useInvertedBackground={false}
          inputPlaceholder="your@email.com"
          buttonText="Start Conversation"
          termsText="We respect your privacy. We'll only use your email to discuss your project."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseReveal
          copyrightText="© 2025 Proofweb. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Services", href: "#services" },
                { label: "Pricing", href: "#pricing" },
                { label: "Work", href: "#work" },
                { label: "Team", href: "#team" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#" },
                { label: "Blog", href: "/blog" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}