"use client";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TextAbout from '@/components/sections/about/TextAbout';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function HomePage() {
  const navItems = [
    { name: "Home", href: "/" },
    { name: "Services", href: "/services" },
    { name: "About Us", href: "/about" },
    { name: "Contact", href: "/contact" }
  ];

  const footerColumns = [
    {
      items: [
        { label: "Operations Management", href: "/services" },
        { label: "Customer Support", href: "/services" },
        { label: "Technology Solutions", href: "/services" },
        { label: "Analytics & Reporting", href: "/services" }
      ]
    },
    {
      items: [
        { label: "About Us", href: "/about" },
        { label: "Our Team", href: "/about" },
        { label: "Our Process", href: "/about" },
        { label: "Client Testimonials", href: "/" }
      ]
    },
    {
      items: [
        { label: "Contact Us", href: "/contact" },
        { label: "FAQs", href: "/contact" },
        { label: "Request a Quote", href: "/contact" },
        { label: "Privacy Policy", href: "/" }
      ]
    }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="medium"
      background="floatingGradient"
      cardStyle="gradient-radial"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="OpsFlow Solutions"
          navItems={navItems}
          button={{ text: "Call Now", href: "tel:+1-555-123-4567" }}
          topBarButton={{ text: "Request a Quote", href: "/contact" }}
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ax98vy"
          logoAlt="OpsFlow Solutions Logo"
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Reliable Technology & Operations Solutions for Modern Businesses"
          description="We help businesses streamline operations, improve efficiency, and deliver exceptional customer experiences through advanced technology and expert support teams."
          background={{ variant: "plain" }}
          buttons={[
            { text: "Call Now", href: "tel:+1-555-123-4567" },
            { text: "Request a Free Consultation", href: "/contact" }
          ]}
          mediaItems={[
            { imageSrc: "http://img.b2bpic.net/free-photo/server-hub-programmer-using-ai-machine-learning-node-tree-software_482257-126014.jpg", imageAlt: "Modern Operations Center with Dashboards" },
            { imageSrc: "http://img.b2bpic.net/free-photo/call-center-senior-agent-uses-ai-tech-enhance-customer-interactions_482257-117995.jpg", imageAlt: "Support Team Member at Workstation" },
            { imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-working-digital-monitors_23-2148910247.jpg", imageAlt: "Analytics Dashboard with Real-time Data" },
            { imageSrc: "http://img.b2bpic.net/free-photo/professional-energy-analyst-suit-examines-solar-panel-diagnostics_482257-126046.jpg", imageAlt: "Overview of Operations Floor with Multiple Screens" },
            { imageSrc: "http://img.b2bpic.net/free-photo/logistics-means-transport-together-with-technological-futuristic-holograms_23-2151662928.jpg", imageAlt: "Abstract Data Flow and Connectivity Visualization" },
            { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-taking-pictures-delivery-boxes_23-2148944570.jpg", imageAlt: "Dispatch Screen with Optimized Routes and Tracking" }
          ]}
          mediaAnimation="slide-up"
        />
      </div>
      <div id="metrics" data-section="metrics">
        <MetricCardEleven
          title="Proven Excellence in Every Operation"
          description="Our commitment to efficiency, innovation, and unwavering support drives measurable results for businesses like yours."
          metrics={[
            { id: "years", value: "10+", title: "Years Experience", description: "A decade of pioneering tech-driven operational solutions.", imageSrc: "http://img.b2bpic.net/free-vector/creative-motivation-25-blue-icon-pack-such-as-graph-goal-heart-eyes-bulls-eye-paste_1142-26679.jpg" },
            { id: "clients", value: "500+", title: "Business Clients", description: "Empowering local businesses, from startups to enterprises.", imageSrc: "http://img.b2bpic.net/free-photo/hands-with-application-icons_1134-253.jpg" },
            { id: "support", value: "24/7", title: "Dedicated Support", description: "Always available assistance for uninterrupted business flow.", imageSrc: "http://img.b2bpic.net/free-photo/ingoing-call-front-side_187299-46200.jpg" },
            { id: "response", value: "Fast", title: "Response Times", description: "Agile and proactive, minimizing downtime and maximizing productivity.", imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-man-posing-studio_176474-38484.jpg" }
          ]}
          animationType="reveal-blur"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="services-overview" data-section="services-overview">
        <FeatureCardTwentyFour
          title="Comprehensive Solutions for Your Business"
          description="Our integrated technology and operations services are designed to optimize every aspect of your business, ensuring seamless performance and continuous growth."
          features={[
            { id: "operations-management", title: "Operations Management", author: "OpsFlow Solutions", description: "Optimize workflows and business processes with our expert guidance and advanced tools.", tags: ["Efficiency", "Workflow"], imageSrc: "http://img.b2bpic.net/free-photo/digital-art-ai-technology-background_23-2151719598.jpg", imageAlt: "Operations Management Icon" },
            { id: "customer-support", title: "Customer Support Services", author: "OpsFlow Solutions", description: "Deliver exceptional customer experiences with our professional support teams and robust systems.", tags: ["Service", "CX"], imageSrc: "http://img.b2bpic.net/free-vector/call-center-design_24877-49638.jpg", imageAlt: "Customer Support Icon" },
            { id: "dispatch-coordination", title: "Dispatch & Coordination", author: "OpsFlow Solutions", description: "Streamline logistics and task management with real-time scheduling and intelligent dispatching.", tags: ["Logistics", "Scheduling"], imageSrc: "http://img.b2bpic.net/free-vector/geographic-location-system_24877-52113.jpg", imageAlt: "Dispatch Coordination Icon" },
            { id: "technology-solutions", title: "Technology Solutions", author: "OpsFlow Solutions", description: "Integrate cutting-edge software and operational systems to enhance your digital infrastructure.", tags: ["Software", "Integration"], imageSrc: "http://img.b2bpic.net/free-vector/business-elements-design_1284-1163.jpg", imageAlt: "Technology Solutions Icon" },
            { id: "analytics-reporting", title: "Analytics & Reporting", author: "OpsFlow Solutions", description: "Harness data-driven insights and performance monitoring to make informed strategic decisions.", tags: ["Data", "Insights"], imageSrc: "http://img.b2bpic.net/free-photo/rag-doll-with-his-hand-screen-with-color-chart_1156-244.jpg", imageAlt: "Analytics Reporting Icon" },
            { id: "business-consulting", title: "Business Consulting", author: "OpsFlow Solutions", description: "Leverage our expertise for operational improvement, growth strategies, and market adaptation.", tags: ["Strategy", "Growth"], imageSrc: "http://img.b2bpic.net/free-vector/tiny-business-people-with-growing-graph-progress-report-company-teamwork-performance-boost-market-promotion-plan-flat-vector-illustration-success-leadership-office-achievement-concept_74855-20959.jpg", imageAlt: "Business Consulting Icon" }
          ]}
          animationType="reveal-blur"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>
      <div id="why-choose-us" data-section="why-choose-us">
        <TextAbout
          title="Your Partner in Operational Excellence"
          buttons={[{ text: "Learn More About Us", href: "/about" }]
          }
          useInvertedBackground={false}
        />
      </div>
      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="OpsFlow Solutions has revolutionized our workflow, providing seamless support and cutting-edge technology. Their team is incredibly reliable and responsive, consistently exceeding our expectations."
          rating={5}
          author="Sarah Chen, CEO of Innovate Logistics"
          avatars={[
            { src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081912.jpg", alt: "Sarah Chen" },
            { src: "http://img.b2bpic.net/free-photo/confident-young-bald-call-center-man-holding-pointing-with-hand-laptop-isolated-olive-green-with-copy-space_141793-76626.jpg", alt: "Michael Rodriguez" },
            { src: "http://img.b2bpic.net/free-photo/female-logo-designer-working-her-tablet-connected-laptop_23-2149119251.jpg", alt: "Emily Johnson" },
            { src: "http://img.b2bpic.net/free-photo/male-factory-consultant-observes-production-systems-pc-solar-plant_482257-126030.jpg", alt: "David Kim" }
          ]}
          ratingAnimation="reveal-blur"
          avatarsAnimation="reveal-blur"
          useInvertedBackground={false}
        />
      </div>
      <div id="final-cta" data-section="final-cta">
        <ContactCenter
          tag="Ready to Transform?"
          title="Ready to Improve Your Business Operations?"
          description="Contact our team today for a free consultation and discover how we can help your business operate more efficiently, intelligently, and reliably."
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          inputPlaceholder="Your email address"
          buttonText="Request Consultation"
          termsText="By clicking 'Request Consultation', you agree to our privacy policy and terms of service."
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ax98vy"
          logoAlt="OpsFlow Solutions Logo"
          logoText="OpsFlow Solutions"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}