"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureBento from "@/components/sections/feature/FeatureBento";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { Brain, Cpu, Crown, Database, Sparkles, Star, Zap, Cloud, Server, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-stagger"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="compact"
      sizing="largeSmallSizeLargeTitles"
      background="blurBottom"
      cardStyle="glass-depth"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="ValorGlobal"
          navItems={[
            { name: "Features", id: "features" },
            { name: "Pricing", id: "pricing" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" },
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="ValorGlobal"
          description="Intelligent AI and Business Intelligence solutions that transform data into strategic advantage. Unlock insights, drive growth, and lead your industry."
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="slide-up"
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/a-modern-clean-software-dashboard-interf-1772544453722-7f7db653.png"
          imageAlt="AI Dashboard Interface"
          mediaAnimation="slide-up"
          frameStyle="card"
          ariaLabel="Hero section with ValorGlobal introduction"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Redefining Intelligence in Business"
          description="At ValorGlobal, we believe data is the foundation of modern business success. Our AI-powered platform combines advanced machine learning with intuitive interfaces to deliver actionable intelligence. We empower enterprises to make smarter decisions faster."
          tag="About ValorGlobal"
          buttons={[{ text: "Explore Solutions", href: "#features" }]}
          buttonAnimation="opacity"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/a-cohesive-team-of-diverse-professionals-1772544451974-83997319.png"
          imageAlt="ValorGlobal team collaboration"
          useInvertedBackground={false}
          ariaLabel="About ValorGlobal section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful AI & BI Capabilities"
          description="Transform your data into competitive advantage with our suite of intelligent tools designed for modern enterprises."
          tag="Features"
          tagAnimation="blur-reveal"
          features={[
            {
              title: "Predictive Analytics",              description: "Forecast trends and market movements with advanced machine learning models.",              bentoComponent: "globe"
            },
            {
              title: "Real-Time Dashboards",              description: "Monitor KPIs and business metrics with interactive, live-updating visualizations.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Task Automation Pipeline",              description: "Automate complex business processes with AI-driven workflows and decision engines.",              bentoComponent: "3d-task-list",              items: [
                { icon: Zap, label: "Data Processing", time: "Real-time" },
                { icon: Brain, label: "Pattern Recognition", time: "Instant" },
                { icon: Sparkles, label: "Insight Generation", time: "Live" },
              ],
            },
            {
              title: "Data Integration",              description: "Connect all your enterprise systems seamlessly for unified intelligence.",              bentoComponent: "orbiting-icons",              centerIcon: Database,
              items: [
                { icon: Cloud, ring: 1 },
                { icon: Server, ring: 1 },
                { icon: Cpu, ring: 2 },
                { icon: Shield, ring: 2 },
                { icon: Zap, ring: 3 },
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Features section"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Transparent Pricing for Every Scale"
          description="Choose the plan that fits your organization's needs. Scale up as you grow."
          tag="Pricing"
          tagAnimation="slide-up"
          plans={[
            {
              id: "starter",              badge: "Starter",              badgeIcon: Sparkles,
              price: "$2,999/mo",              subtitle: "Perfect for growing teams",              buttons: [
                { text: "Start Free Trial", href: "#contact" },
                { text: "Learn More", href: "#" },
              ],
              features: [
                "Up to 5 data sources",                "Basic AI analytics",                "Real-time dashboards",                "Email support",                "1 user seat",                "Monthly data refresh"
              ],
            },
            {
              id: "professional",              badge: "Professional",              badgeIcon: Star,
              price: "$7,999/mo",              subtitle: "Ideal for enterprises",              buttons: [
                { text: "Get Started", href: "#contact" },
                { text: "Contact Sales", href: "#" },
              ],
              features: [
                "Unlimited data sources",                "Advanced AI & ML models",                "Custom dashboards",                "Priority support",                "5 user seats",                "Real-time updates",                "API access",                "Advanced security"
              ],
            },
            {
              id: "enterprise",              badge: "Enterprise",              badgeIcon: Crown,
              price: "Custom",              subtitle: "For large-scale operations",              buttons: [
                { text: "Contact Sales", href: "#contact" },
                { text: "Request Demo", href: "#" },
              ],
              features: [
                "Full platform access",                "Unlimited users",                "Dedicated support team",                "Custom integrations",                "White-label options",                "SLA guarantees",                "On-premise deployment",                "Advanced compliance"
              ],
            },
          ]}
          animationType="scale-rotate"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Pricing plans section"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardOne
          title="Trusted by Industry Leaders"
          description="Hear from executives and analysts who've transformed their organizations with ValorGlobal."
          tag="Testimonials"
          tagAnimation="blur-reveal"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              role: "Chief Data Officer",              company: "TechCorp International",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/professional-headshot-portrait-of-a-succ-1772544454013-02b38bf4.png",              imageAlt: "Sarah Chen, CDO at TechCorp"
            },
            {
              id: "2",              name: "Michael Rodriguez",              role: "VP of Analytics",              company: "FinanceHub Solutions",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/professional-headshot-portrait-of-a-dive-1772544451280-c777eeab.png",              imageAlt: "Michael Rodriguez, VP at FinanceHub"
            },
            {
              id: "3",              name: "Emma Thompson",              role: "CEO",              company: "RetailMax",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/professional-headshot-portrait-of-a-conf-1772544451209-070164c6.png",              imageAlt: "Emma Thompson, CEO at RetailMax"
            },
            {
              id: "4",              name: "David Park",              role: "Founder & CEO",              company: "DataStream Ventures",              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/professional-headshot-portrait-of-a-dive-1772544452559-a1550278.png",              imageAlt: "David Park, CEO at DataStream"
            },
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="depth-3d"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Customer testimonials section"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="Proven Results for Our Clients"
          tag="Impact"
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "300%",              description: "Average ROI within the first 12 months of implementation"
            },
            {
              id: "2",              value: "10,000+",              description: "Enterprises worldwide leveraging ValorGlobal intelligence"
            },
            {
              id: "3",              value: "99.99%",              description: "Platform uptime and reliability guarantee"
            },
            {
              id: "4",              value: "50M+",              description: "Data points processed daily across all platforms"
            },
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          ariaLabel="Metrics and impact section"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Start Your Intelligence Journey"
          description="Connect with our team to discuss how ValorGlobal can transform your business. Let's build the future together."
          inputs={[
            { name: "name", type: "text", placeholder: "Your Name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "company", type: "text", placeholder: "Company Name", required: true },
          ]}
          textarea={{
            name: "message",            placeholder: "Tell us about your data challenges and goals...",            rows: 5,
            required: true,
          }}
          useInvertedBackground={false}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/a-welcoming-modern-support-team-environm-1772544453267-380046b5.png"
          imageAlt="ValorGlobal support team"
          mediaAnimation="blur-reveal"
          mediaPosition="right"
          buttonText="Get Started Today"
          ariaLabel="Contact form section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AR7NU9S8BzsF9NbOfZRJCWTkPO/abstract-futuristic-technology-landscape-1772544451735-9a6999f2.png"
          imageAlt="ValorGlobal technology vision"
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Integrations", 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: "Support", href: "#" },
                { label: "Status", href: "#" },
              ],
            },
          ]}
          logoText="ValorGlobal"
          copyrightText="© 2025 ValorGlobal. All rights reserved."
          ariaLabel="Site footer"
        />
      </div>
    </ThemeProvider>
  );
}
