"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSignup from '@/components/sections/hero/HeroSignup';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBase from '@/components/sections/footer/FooterBase';
import { Cloud, Database, Mail, Sparkles, Star, TrendingUp, Zap, Shield } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="icon-arrow"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="largeSmallSizeMediumTitles"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          brandName="Peak Creations"
          navItems={[
            { name: "Features", id: "features" },
            { name: "About", id: "about" },
            { name: "Metrics", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          bottomLeftText="AI Innovation"
          bottomRightText="hello@peakcreations.ai"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSignup
          title="Transform Your Business with AI"
          description="Peak Creations delivers cutting-edge artificial intelligence solutions that automate workflows, unlock insights, and accelerate growth. Join leading companies revolutionizing their operations."
          tag="Next Generation AI"
          tagIcon={Sparkles}
          background={{ variant: "sparkles-gradient" }}
          inputPlaceholder="Enter your email"
          buttonText="Get Early Access"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Powerful AI Capabilities"
          description="Unlock the full potential of artificial intelligence with our comprehensive suite of tools designed for enterprise-grade performance and reliability."
          tag="Features"
          tagIcon={Zap}
          features={[
            {
              title: "Intelligent Automation",              description: "Automate complex workflows and repetitive tasks with AI-driven process optimization.",              bentoComponent: "globe"
            },
            {
              title: "Advanced Analytics",              description: "Gain deep insights into your data with machine learning-powered predictive analytics.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Seamless Integration",              description: "Connect Peak Creations to your existing tools and systems for unified operations.",              bentoComponent: "orbiting-icons",              centerIcon: Shield,
              items: [
                { icon: Zap, ring: 1 },
                { icon: Cloud, ring: 2 },
                { icon: Database, ring: 3 }
              ]
            },
            {
              title: "Real-time Processing",              description: "Process and analyze data instantly for rapid decision-making and instant results.",              bentoComponent: "line-chart"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "Peak Creations is reimagining AI innovation with" },
            { type: "image", src: "http://img.b2bpic.net/free-photo/geometric-bokeh_1017-3221.jpg", alt: "artificial intelligence AI technology machine learning neural networks innovation" },
            { type: "text", content: "solutions that drive real business impact." }
          ]}
          useInvertedBackground="noInvert"
          buttons={[
            { text: "Learn Our Story", href: "#contact" },
            { text: "Explore Solutions", href: "#features" }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Our Impact"
          description="See the measurable results Peak Creations delivers for forward-thinking enterprises worldwide."
          tag="Results"
          tagIcon={TrendingUp}
          metrics={[
            {
              id: "1",              value: "500+",              title: "Enterprises Served",              description: "Leading companies trust our AI solutions",              imageSrc: "http://img.b2bpic.net/free-photo/businessman-touching-glowing-increasing-arrow-business-profit-investment-growth-concept_616485-72.jpg"
            },
            {
              id: "2",              value: "40%",              title: "Cost Reduction",              description: "Average operational expense reduction achieved",              imageSrc: "http://img.b2bpic.net/free-vector/stylish-business-leader-background_1017-20822.jpg"
            }
          ]}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="Loved by Industry Leaders"
          description="Discover why enterprises choose Peak Creations for AI transformation."
          tag="Testimonials"
          tagIcon={Star}
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen_ai",              testimonial: "Peak Creations transformed our workflow automation. We saw a 60% reduction in processing time within the first month. Absolutely game-changing for our enterprise.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg"
            },
            {
              id: "2",              name: "Michael Rodriguez",              handle: "@mrodriguez_tech",              testimonial: "The integration was seamless and the support team is exceptional. Peak Creations has become an integral part of our data analytics pipeline.",              rating: 5,
              imageSrc: "http://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"
            },
            {
              id: "3",              name: "Jennifer Park",              handle: "@jpark_insights",              testimonial: "Finally, an AI solution that actually understands enterprise needs. The ROI was evident in our first quarter. Highly recommend to any data-driven organization.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg"
            },
            {
              id: "4",              name: "David Thompson",              handle: "@dthompson_innovation",              testimonial: "Working with Peak Creations has been transformative. Their AI capabilities have unlocked insights we never knew existed in our data.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg"
            }
          ]}
          showRating={true}
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Business?"
          description="Let Peak Creations power your AI journey. Contact our team today to schedule a personalized demo and discover how we can drive your business forward."
          buttons={[
            { text: "Schedule Demo", href: "mailto:hello@peakcreations.ai" },
            { text: "Learn More", href: "#features" }
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Peak Creations"
          copyrightText="© 2025 Peak Creations. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "features" },
                { label: "Solutions", href: "#features" },
                { label: "Pricing", href: "#features" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "about" },
                { label: "Blog", href: "#features" },
                { label: "Careers", href: "#contact" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "contact" },
                { label: "Twitter", href: "https://twitter.com" },
                { label: "LinkedIn", href: "https://linkedin.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}