"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import TextAbout from '@/components/sections/about/TextAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import TestimonialCardEight from '@/components/sections/testimonial/TestimonialCardEight';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';

export default function TechVisionPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeLargeTitles"
      background="fluid"
      cardStyle="solid"
      primaryButtonStyle="layered-depth"
      secondaryButtonStyle="outline"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="TechVision"
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>
      
      <div id="hero" data-section="hero">
        <HeroBillboardCarousel
          title="Building Tomorrow's Digital Solutions"
          description="Transform your business with cutting-edge IT services and innovative technology solutions designed for growth"
          tag="Portfolio"
          mediaItems={[
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402148611-r6qkom2b.jpg",
              imageAlt: "Software development project"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572425924-9obbzad4.jpg",
              imageAlt: "Web design and interface"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402147527-aqsywtjn.jpg",
              imageAlt: "Mobile app development"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572427142-68n2jhn6.png",
              imageAlt: "Cloud infrastructure"
            },
            {
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572428701-xo79tdvo.jpg",
              imageAlt: "Data analytics dashboard"
            }
          ]}
          buttons={[
            {
              text: "View Our Work",
              href: "#"
            },
            {
              text: "Contact Us",
              href: "contact"
            }
          ]}
        />
      </div>
      
      <div id="about" data-section="about">
        <TextAbout
          title="We empower businesses through intelligent technology, strategic innovation, and unwavering commitment to excellence in every project we deliver"
          useInvertedBackground="noInvert"
          buttons={[
            {
              text: "Learn Our Story",
              href: "#"
            }
          ]}
        />
      </div>
      
      <div id="features" data-section="features">
        <FeatureCardNine
          title="Our Core Services"
          description="Comprehensive technology solutions tailored to elevate your business"
          tag="Services"
          features={[
            {
              id: 1,
              title: "Custom Software Development",
              description: "Scalable and secure software solutions built to your exact specifications using the latest technologies and best practices",
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766496686627-7o9q2l8m.jpg"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572430281-ul1kcjbf.jpg"
              }
            },
            {
              id: 2,
              title: "Cloud Infrastructure & DevOps",
              description: "Optimize your infrastructure with enterprise-grade cloud solutions and automated deployment pipelines for maximum efficiency",
              phoneOne: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766496686627-7o9q2l8m.jpg"
              },
              phoneTwo: {
                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572430281-ul1kcjbf.jpg"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="metrics" data-section="metrics">
        <MetricCardTwo
          title="Why Companies Choose Us"
          description="Proven track record of delivering exceptional results"
          metrics={[
            {
              id: "1",
              value: "150+",
              description: "Successful Projects Delivered"
            },
            {
              id: "2",
              value: "98%",
              description: "Client Satisfaction Rate"
            },
            {
              id: "3",
              value: "50+",
              description: "Enterprise Clients Worldwide"
            },
            {
              id: "4",
              value: "12+",
              description: "Years Industry Experience"
            }
          ]}
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEight
          title="Client Success Stories"
          description="Hear from leaders who transformed their business with our technology solutions"
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Chen",
              role: "CTO",
              company: "StartupXYZ",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402159077-rcohkwtj.jpg",
              imageAlt: "Sarah Chen"
            },
            {
              id: "2",
              name: "Michael Torres",
              role: "Founder & CEO",
              company: "InnovateCo",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766402157943-c3nj0vnx.jpg",
              imageAlt: "Michael Torres"
            },
            {
              id: "3",
              name: "Emily Rodriguez",
              role: "VP Product",
              company: "TechCorp Global",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766572431891-e5sjaw1n.jpg",
              imageAlt: "Emily Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              role: "CIO",
              company: "Enterprise Solutions Inc",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766496689882-hqygyxp0.jpg",
              imageAlt: "David Kim"
            }
          ]}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>
      
      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get In Touch"
          title="Ready to Transform Your Technology?"
          description="Join leading companies that trust us to deliver innovative solutions. Let's discuss how we can help your business thrive."
          useInvertedBackground="noInvert"
          inputPlaceholder="Enter your email"
          buttonText="Subscribe"
        />
      </div>
      
      <div id="footer" data-section="footer">
        <FooterCard
          logoText="TechVision"
          copyrightText="© 2025 TechVision. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}