"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TeamCardFive from '@/components/sections/team/TeamCardFive';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, Palette, Layout, RefreshCw, TrendingUp, MessageSquare, Target, BarChart3, Users, Star, ArrowRight } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="largeSmall"
      background="fluid"
      cardStyle="gradient-mesh"
      primaryButtonStyle="radial-glow"
      secondaryButtonStyle="solid"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="NovaWeb"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Portfolio", id: "portfolio" },
            { name: "Team", id: "team" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Start Project",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          tag="Transforming Digital Experiences"
          tagIcon={Sparkles}
          title="We Transform Websites Into Powerful Digital Experiences"
          description="NovaWeb is a creative agency that redesigns and builds modern, aesthetic, and strategic websites that elevate brands and increase conversions. We combine creativity, marketing psychology, and clean technical execution."
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email for updates"
          buttonText="View Our Work"
          containerClassName="min-h-screen flex items-center justify-center"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Built by Creators." },
            { type: "text", content: "Driven by Strategy." }
          ]}
          buttons={[
            { text: "Learn More", href: "#services" },
            { text: "Schedule a Call", href: "#contact" }
          ]}
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTen
          title="Our Services"
          description="We provide comprehensive digital solutions tailored to elevate your brand and drive measurable results."
          tag="What We Offer"
          tagIcon={Zap}
          features={[
            {
              id: "1",              title: "Website Design",              description: "Custom modern website design tailored to your brand identity and marketing goals. We create visually stunning, user-centric experiences that reflect your brand's unique value proposition.",              media: { imageSrc: "https://img.b2bpic.net/free-psd/fashion-design-landing-page-template_23-2149545211.jpg" },
              items: [
                { icon: Palette, text: "Custom visual design" },
                { icon: Layout, text: "Responsive layouts" },
                { icon: Zap, text: "Performance optimized" }
              ],
              reverse: false
            },
            {
              id: "2",              title: "Website Redesign",              description: "Transform outdated websites into modern, clean, high-performing digital experiences. We breathe new life into your existing digital presence with strategic improvements.",              media: { imageSrc: "https://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-341.jpg" },
              items: [
                { icon: RefreshCw, text: "Complete modernization" },
                { icon: Zap, text: "Speed optimization" },
                { icon: TrendingUp, text: "Improved conversions" }
              ],
              reverse: true
            },
            {
              id: "3",              title: "Brand Identity Integration",              description: "Align website visuals with your brand positioning, tone, and audience psychology. Every element reinforces your brand message and builds trust with your audience.",              media: { imageSrc: "https://img.b2bpic.net/free-psd/fashion-landing-page-template_197582-339.jpg" },
              items: [
                { icon: Palette, text: "Visual consistency" },
                { icon: MessageSquare, text: "Brand voice alignment" },
                { icon: Target, text: "Audience psychology" }
              ],
              reverse: false
            },
            {
              id: "4",              title: "Conversion Optimization",              description: "Design structures that guide visitors toward action and increase engagement. We strategically optimize every touchpoint to maximize your conversion potential.",              media: { imageSrc: "https://img.b2bpic.net/free-vector/fashion-sale-landing-page_23-2148589554.jpg" },
              items: [
                { icon: Target, text: "Strategic CTAs" },
                { icon: TrendingUp, text: "Funnel optimization" },
                { icon: BarChart3, text: "Data-driven design" }
              ],
              reverse: true
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardThree
          title="Our Work"
          description="Explore our curated collection of transformed digital experiences that showcase our creative vision and strategic excellence."
          tag="Case Studies"
          products={[
            {
              id: "1",              name: "Tech Startup Redesign",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-psd/fashion-design-landing-page-template_23-2149545211.jpg",              imageAlt: "Tech startup website redesign"
            },
            {
              id: "2",              name: "E-Commerce Transformation",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-psd/e-commerce-furniture-landing-page_197582-341.jpg",              imageAlt: "E-commerce platform modernization"
            },
            {
              id: "3",              name: "Brand Identity Build",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-psd/fashion-landing-page-template_197582-339.jpg",              imageAlt: "Brand identity and website project"
            },
            {
              id: "4",              name: "Conversion Optimization",              price: "View Case",              imageSrc: "https://img.b2bpic.net/free-vector/fashion-sale-landing-page_23-2148589554.jpg",              imageAlt: "Conversion optimization case study"
            }
          ]}
          gridVariant="two-columns-alternating-heights"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardFive
          title="Meet the Founders"
          description="Two creative digital strategists dedicated to redefining how brands exist online."
          tag="Leadership"
          tagIcon={Users}
          team={[
            {
              id: "1",              name: "Mia Philosophos",              role: "CEO & Co-Founder",              imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg",              imageAlt: "Mia Philosophos, CEO and Creative Director"
            },
            {
              id: "2",              name: "Maggie Whiting",              role: "Co-Founder",              imageSrc: "https://img.b2bpic.net/free-photo/cheerful-young-businesswoman-wearing-eyeglasses_1262-4761.jpg",              imageAlt: "Maggie Whiting, Brand and Website Strategist"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Trusted by Industry Leaders"
          description="See what our clients have to say about their transformation with NovaWeb."
          tag="Client Stories"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "CEO, TechFlow Systems",              testimonial: "NovaWeb completely transformed our digital presence. Their strategic approach and aesthetic execution exceeded our expectations. Our conversion rates increased by 47% within three months.",              imageSrc: "https://img.b2bpic.net/free-photo/successful-senior-businesswoman-eyeglasses_1262-5856.jpg"
            },
            {
              id: "2",              name: "Marcus Johnson",              role: "Founder, Innovation Labs",              testimonial: "Working with NovaWeb was a game-changer. They understood our brand vision and brought it to life in ways we hadn't imagined. Their attention to detail and strategic thinking set them apart.",              imageSrc: "https://img.b2bpic.net/free-photo/positive-young-businesswoman-pointing-camera_1262-5406.jpg"
            },
            {
              id: "3",              name: "Elena Rodriguez",              role: "Marketing Director, GrowthCo",              testimonial: "The website NovaWeb designed for us is not just beautiful—it's a conversion machine. Every element serves a purpose, and the results speak for themselves. Highly recommended.",              imageSrc: "https://img.b2bpic.net/free-photo/image-corporate-woman-working-office-sitting-front-laptop-preparing-business_1258-194628.jpg"
            },
            {
              id: "4",              name: "David Okonkwo",              role: "Chief Product Officer, StartupXYZ",              testimonial: "NovaWeb delivered a website that perfectly reflects our brand personality while driving measurable business results. Their blend of creativity and strategy is truly exceptional.",              imageSrc: "https://img.b2bpic.net/free-photo/happy-professional_1098-12931.jpg"
            },
            {
              id: "5",              name: "Jennifer Park",              role: "COO, Digital Ventures",              testimonial: "From concept to launch, NovaWeb demonstrated exceptional professionalism and creativity. The website we received is elegant, functional, and perfectly aligned with our business goals.",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12811.jpg"
            },
            {
              id: "6",              name: "Thomas Mitchell",              role: "VP of Operations, Creative Studios",              testimonial: "NovaWeb's strategic approach to design ensures that every pixel serves a purpose. The results have been transformative for our business and our client relationships.",              imageSrc: "https://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="cta" data-section="cta">
        <PricingCardTwo
          title="Your Website Should Reflect Your Full Potential"
          description="Let's work together to create a digital experience that elevates your brand and drives real business growth."
          tag="Ready to Transform?"
          tagIcon={ArrowRight}
          plans={[
            {
              id: "starter",              badge: "Starting Point",              badgeIcon: Sparkles,
              price: "From $5,000",              subtitle: "Perfect for early-stage projects",              buttons: [
                { text: "Schedule Consultation", href: "#contact" },
                { text: "Learn More", href: "#" }
              ],
              features: [
                "Custom website design",                "Responsive optimization",                "Basic SEO setup",                "Performance tuning",                "3 revision rounds"
              ]
            },
            {
              id: "professional",              badge: "Most Popular",              badgeIcon: Star,
              price: "From $12,000",              subtitle: "Comprehensive transformation",              buttons: [
                { text: "Start Your Project", href: "#contact" },
                { text: "View Details", href: "#" }
              ],
              features: [
                "Complete website redesign",                "Brand strategy integration",                "Advanced SEO optimization",                "Conversion optimization",                "Unlimited revisions",                "3-month support"
              ]
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground={true}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-vector/blue-background-cone-shaped_1017-4109.jpg"
          imageAlt="NovaWeb creative workspace"
          logoText="NovaWeb"
          copyrightText="© 2025 NovaWeb. All rights reserved."
          columns={[
            {
              title: "Services",              items: [
                { label: "Website Design", href: "#services" },
                { label: "Website Redesign", href: "#services" },
                { label: "Brand Integration", href: "#services" },
                { label: "Optimization", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Work", href: "#portfolio" },
                { label: "Team", href: "#team" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Blog", href: "#" },
                { label: "Case Studies", href: "#portfolio" },
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}