"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles, Zap, Award, Heart } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="background-highlight"
      borderRadius="sharp"
      contentWidth="smallMedium"
      sizing="medium"
      background="none"
      cardStyle="solid"
      primaryButtonStyle="inset-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="Webild"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Products", id: "products" },
            { name: "Contact", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitKpi
          title="Automate Generation at Scale"
          description="Webild transforms how teams generate, manage, and deliver projects. Our AI-powered platform accelerates development cycles and maximizes productivity with intelligent automation."
          tag="Next Generation Platform"
          tagIcon={Sparkles}
          kpis={[
            { value: "10x", label: "Faster Generation" },
            { value: "99.9%", label: "Uptime Reliability" },
            { value: "500K+", label: "Projects Delivered" }
          ]}
          enableKpiAnimation={true}
          imageSrc="https://img.b2bpic.net/free-photo/information-technology-connection-graphics-concept_53876-121040.jpg"
          imageAlt="AI-powered project generation interface"
          imagePosition="right"
          buttons={[
            { text: "Get Started Free", href: "#contact" },
            { text: "Watch Demo", href: "#products" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Powerful Features Built for Performance"
          description="Discover what makes Webild the industry standard for project generation and automation."
          tag="Core Capabilities"
          tagIcon={Zap}
          imageSrc="https://img.b2bpic.net/free-photo/computer-scientist-updating-ai-systems_482257-91183.jpg"
          imageAlt="AI-powered automation"
          mediaPosition="left"
          useInvertedBackground="invertDefault"
          accordionItems={[
            {
              id: "1",              title: "AI-Powered Generation Engine",              content: "Our machine learning algorithms analyze your requirements and generate optimized project structures in seconds. Intelligent templates adapt to your specific needs and industry standards."
            },
            {
              id: "2",              title: "Real-Time Collaboration",              content: "Team members collaborate seamlessly with live updates, commenting systems, and version control. Eliminate silos and accelerate decision-making across departments."
            },
            {
              id: "3",              title: "Advanced Analytics & Insights",              content: "Track project metrics, performance indicators, and team productivity with comprehensive dashboards. Make data-driven decisions with actionable insights and reporting."
            },
            {
              id: "4",              title: "Seamless Integrations",              content: "Connect with your favorite tools including GitHub, Jira, Slack, and more. Build custom workflows that fit your existing tech stack perfectly."
            }
          ]}
          buttons={[
            { text: "Explore Features", href: "#" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Impact by the Numbers"
          description="See how Webild drives measurable results for thousands of teams worldwide."
          tag="Our Achievements"
          tagIcon={Award}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "50M+",              title: "Projects Generated",              description: "Successful automations powering global operations",              imageSrc: "https://img.b2bpic.net/free-photo/business-colleagues-banner-concept-with-copy-space_23-2149601494.jpg",              imageAlt: "Project success metrics"
            },
            {
              id: "2",              value: "15K+",              title: "Active Teams",              description: "Organizations trusting Webild daily",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-young-colleagues-having-meeting_23-2149060234.jpg",              imageAlt: "Team collaboration"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Redefining how projects are built with" },
            { type: "image", src: "https://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241226.jpg", alt: "Innovation and technology" },
            { type: "text", content: "intelligent automation" }
          ]}
          useInvertedBackground="invertDefault"
          buttons={[
            { text: "Our Story", href: "#" },
            { text: "Careers", href: "#" }
          ]}
        />
      </div>

      <div id="products" data-section="products">
        <ProductCardTwo
          title="Product Solutions"
          description="Comprehensive tools designed for every stage of project development"
          tag="Platform Suite"
          tagIcon={Sparkles}
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="three-columns-all-equal-width"
          products={[
            {
              id: "1",              brand: "Webild Pro",              name: "Project Generator",              price: "$299/mo",              rating: 5,
              reviewCount: "12.4k",              imageSrc: "https://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147904142.jpg",              imageAlt: "Project Generator Interface"
            },
            {
              id: "2",              brand: "Webild Enterprise",              name: "Team Workspace",              price: "$499/mo",              rating: 5,
              reviewCount: "8.9k",              imageSrc: "https://img.b2bpic.net/free-vector/user-panel-business-dashboard_23-2148359901.jpg",              imageAlt: "Team Collaboration Tools"
            },
            {
              id: "3",              brand: "Webild Analytics",              name: "Performance Hub",              price: "$199/mo",              rating: 5,
              reviewCount: "15.2k",              imageSrc: "https://img.b2bpic.net/free-vector/gradient-dashboard-user-panel-template_23-2148370540.jpg",              imageAlt: "Analytics Dashboard"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          cardTitle="Trusted by 50,000+ Teams and Growing"
          cardTag="Customer Stories"
          cardTagIcon={Heart}
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Sarah Chen"
            },
            {
              id: "2",              name: "Marcus Johnson",              imageSrc: "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",              imageAlt: "Marcus Johnson"
            },
            {
              id: "3",              name: "Emma Rodriguez",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "Emma Rodriguez"
            },
            {
              id: "4",              name: "David Kim",              imageSrc: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              imageAlt: "David Kim"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Ready to Transform Your Projects?"
          description="Join thousands of teams using Webild to automate and accelerate project generation. Get started today with our free trial."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "Work Email Address", required: true },
            { name: "company", type: "text", placeholder: "Company Name", required: false }
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your project needs...",            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://img.b2bpic.net/free-photo/close-up-young-business-team-working_23-2149153838.jpg"
          imageAlt="Team collaborating"
          mediaPosition="right"
          buttonText="Start Free Trial"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/digital-environment-scene_23-2151873106.jpg"
          imageAlt="Webild Technology"
          logoText="Webild"
          copyrightText="© 2025 Webild. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Resources",              items: [
                { label: "Documentation", href: "#" },
                { label: "API Reference", href: "#" },
                { label: "Community", href: "#" },
                { label: "Support", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}