"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleMinimal from '@/components/navbar/NavbarStyleMinimal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import AboutPhoneTimeline from '@/components/sections/about/AboutPhoneTimeline';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import TeamCardOne from '@/components/sections/team/TeamCardOne';
import BlogCardEleven from '@/components/sections/blog/BlogCardEleven';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofThree from '@/components/sections/socialProof/SocialProofThree';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import { Sparkles } from "lucide-react";

export default function TechVisionPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="large"
      sizing="largeSizeMediumTitles"
      background="aurora"
      cardStyle="gradient-radial"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="outline"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleMinimal
          brandName="TechVision"
          button={{
            text: "Get Started",
            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Transform Your Business with Intelligent IT Solutions"
          description="We deliver cutting-edge technology solutions that drive growth, streamline operations, and secure your digital future"
          tag="Enterprise Technology"
          tagIcon={Sparkles}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541744848-xophnw4s.jpg"
          imageAlt="IT dashboard interface"
          buttons={[
            { text: "Explore Solutions", href: "services" },
            { text: "View Portfolio", href: "portfolio" }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <AboutPhoneTimeline
          tag="About Us"
          title="Pioneering IT Innovation Since 2015"
          description="We are a team of dedicated technology experts committed to delivering enterprise-grade solutions that empower businesses to compete in the digital age. Our proven track record spans cloud infrastructure, cybersecurity, software development, and data analytics."
          textboxLayout="default"
          phoneOne={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541749631-cn0n9ij4.jpg"
          }}
          phoneTwo={{
            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541751182-u2b8bnws.jpg"
          }}
          buttons={[
            { text: "Learn More", href: "about" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardEight
          title="Our Core Services"
          description="Comprehensive technology solutions tailored to your business needs"
          tag="What We Offer"
          textboxLayout="default"
          features={[
            {
              id: 1,
              title: "Cloud Infrastructure",
              description: "Scalable, secure cloud platforms designed for enterprise growth and reliability",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541752934-4q4nf26g.jpg"
            },
            {
              id: 2,
              title: "Cybersecurity",
              description: "Advanced security solutions protecting your digital assets and data integrity",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541754603-qzu60sv6.jpg"
            },
            {
              id: 3,
              title: "Custom Development",
              description: "Bespoke software solutions built to solve your unique business challenges",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541756132-5isyqqvu.jpg"
            },
            {
              id: 4,
              title: "Data Analytics",
              description: "Transform raw data into actionable insights driving strategic decisions",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541759043-mliwe9no.jpg"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardOne
          title="Meet Our Team"
          description="Industry veterans with decades of combined experience in enterprise technology"
          tag="Expert Professionals"
          textboxLayout="default"
          members={[
            {
              id: "1",
              name: "Alex Johnson",
              role: "Chief Technology Officer",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541760745-w62m9juc.jpg"
            },
            {
              id: "2",
              name: "Sarah Chen",
              role: "Solutions Architect",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541763111-rfrbqoox.jpg"
            },
            {
              id: "3",
              name: "Michael Torres",
              role: "Security Lead",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541764908-daf67tax.jpg"
            },
            {
              id: "4",
              name: "Emma Williams",
              role: "Development Manager",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541766569-ba1eh97t.jpg"
            }
          ]}
          gridVariant="four-items-2x2-equal-grid"
          animationType="slide-up"
          containerStyle="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <BlogCardEleven
          title="Case Studies"
          description="See how we've transformed businesses across industries with innovative technology"
          tag="Success Stories"
          textboxLayout="default"
          animationType="slide-up"
          variant="card"
          useInvertedBackground="noInvert"
          blogs={[
            {
              id: "1",
              title: "Financial Services Digital Transformation",
              author: "Case Study",
              description: "Helped a Fortune 500 bank migrate to cloud infrastructure, reducing operational costs by 40% and improving system reliability to 99.99% uptime",
              tags: ["Cloud", "Finance", "Enterprise"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541769155-bicej7q8.jpg"
            },
            {
              id: "2",
              title: "Healthcare Data Security Implementation",
              author: "Case Study",
              description: "Implemented comprehensive cybersecurity infrastructure for healthcare provider, achieving HIPAA compliance and protecting millions of patient records",
              tags: ["Security", "Healthcare", "Compliance"],
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541770885-iu49j0l7.jpg"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Our Clients Say"
          description="Trusted by leading companies worldwide for delivering transformative technology solutions"
          tag="Testimonials"
          textboxLayout="default"
          animationType="slide-up"
          containerStyle="default"
          useInvertedBackground="noInvert"
          testimonials={[
            {
              id: "1",
              name: "David Kumar",
              handle: "@david.kumar",
              rating: 5,
              testimonial: "TechVision transformed our entire infrastructure. Their expertise and professionalism were exceptional.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541772129-0j02ce1k.jpg"
            },
            {
              id: "2",
              name: "Lisa Martinez",
              handle: "@lisa.martinez",
              rating: 5,
              testimonial: "The security implementation was seamless. We achieved compliance months ahead of schedule.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541773244-x5nd9yod.jpg"
            },
            {
              id: "3",
              name: "Robert Chen",
              handle: "@robert.chen",
              rating: 5,
              testimonial: "Outstanding service and support. They truly understand enterprise-level requirements.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541774579-y505ow96.jpg"
            },
            {
              id: "4",
              name: "Jennifer Walsh",
              handle: "@jen.walsh",
              rating: 5,
              testimonial: "A partnership that goes beyond vendor relationships. Highly recommended for any enterprise.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541776698-dpwkg5f7.jpg"
            },
            {
              id: "5",
              name: "Mark Thompson",
              handle: "@mark.t",
              rating: 5,
              testimonial: "The ROI was immediate. Best technology investment we've made in years.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541782814-fq4qj08w.jpg"
            },
            {
              id: "6",
              name: "Angela Foster",
              handle: "@angela.foster",
              rating: 5,
              testimonial: "Professional, reliable, and results-driven. Everything a tech partner should be.",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541784646-mdlc9rwg.jpg"
            }
          ]}
        />
      </div>

      <div id="partners" data-section="partners">
        <SocialProofThree
          title="Trusted by Industry Leaders"
          description="Partnerships with the world's leading technology companies"
          tag="Our Partners"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          logos={[
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541786861-lug52361.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541788688-337frms6.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541790519-kz7x5bv8.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541792651-9ohb4y61.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541794499-03mkv5pp.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541796336-4h2b3qbe.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541798637-lbr5crvz.jpg",
            "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541802719-qvip3dl5.jpg"
          ]}
          speed={40}
          topMarqueeDirection="left"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardThree
          title="Choose Your Plan"
          description="Flexible pricing designed for businesses of all sizes"
          tag="Transparent Pricing"
          textboxLayout="default"
          animationType="slide-up"
          containerStyle="default"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "starter",
              price: "Contact Sales",
              name: "Startup Plan",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Up to 10 team members",
                "Basic cloud infrastructure",
                "Standard support",
                "Monthly updates"
              ]
            },
            {
              id: "professional",
              price: "Contact Sales",
              name: "Professional Plan",
              badge: "Most Popular",
              badgeIcon: Sparkles,
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Up to 50 team members",
                "Advanced cloud solutions",
                "Priority support",
                "Custom integrations",
                "Security audits"
              ]
            },
            {
              id: "enterprise",
              price: "Contact Sales",
              name: "Enterprise Plan",
              buttons: [
                { text: "Get Started", href: "contact" },
                { text: "Learn More" }
              ],
              features: [
                "Unlimited team members",
                "Full-stack solutions",
                "24/7 dedicated support",
                "Custom development",
                "Compliance & security",
                "SLA guarantees"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitText
          sideTitle="Frequently Asked Questions"
          sideDescription="Everything you need to know about our services and solutions"
          textPosition="left"
          useInvertedBackground="noInvert"
          faqs={[
            {
              id: "1",
              title: "What industries do you serve?",
              content: "We serve a wide range of industries including finance, healthcare, retail, manufacturing, technology, and enterprise sectors. Our solutions are customizable for any industry's specific needs."
            },
            {
              id: "2",
              title: "How long does implementation typically take?",
              content: "Implementation timelines vary based on project complexity. Typical projects range from 3-6 months, with some enterprise solutions taking up to 12 months. We'll provide a detailed timeline during the consultation phase."
            },
            {
              id: "3",
              title: "Do you provide ongoing support?",
              content: "Yes, we offer comprehensive ongoing support packages. Our support team is available to ensure your systems run smoothly and to handle any issues that arise."
            },
            {
              id: "4",
              title: "How do you ensure data security?",
              content: "Security is our top priority. We implement industry-standard encryption, regular security audits, compliance certifications (SOC 2, ISO 27001), and follow best practices in cybersecurity."
            },
            {
              id: "5",
              title: "Can you integrate with existing systems?",
              content: "Absolutely. Our solutions are designed to integrate seamlessly with your existing infrastructure and applications. We assess your current systems during the discovery phase."
            },
            {
              id: "6",
              title: "What is your approach to cloud migration?",
              content: "We follow a phased migration approach minimizing downtime and risk. Our team handles planning, execution, testing, and validation to ensure a smooth transition to cloud infrastructure."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to transform your business? Let's discuss how our solutions can drive growth and innovation for your organization."
          animationType="reveal-blur"
          buttons={[
            { text: "Schedule Consultation", href: "contact" },
            { text: "Contact Sales", href: "contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_30ordogEOn7VO6LZdIWb5atLXky/uploaded-1765541804947-w85zlwwf.jpg"
          imageAlt="Professional IT workspace"
          logoText="TechVision"
          copyrightText="© 2024 TechVision. All rights reserved."
          columns={[
            {
              title: "Products",
              items: [
                { label: "Cloud Solutions", href: "services" },
                { label: "Security Services", href: "services" },
                { label: "Custom Development", href: "services" },
                { label: "Analytics Platform", href: "services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "about" },
                { label: "Our Team", href: "team" },
                { label: "Case Studies", href: "portfolio" },
                { label: "Blog", href: "blog" }
              ]
            },
            {
              title: "Support",
              items: [
                { label: "Documentation", href: "#" },
                { label: "Contact Support", href: "contact" },
                { label: "FAQ", href: "faq" },
                { label: "Status Page", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}