"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import ContactText from '@/components/sections/contact/ContactText';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function MarketingAgencyPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="expand-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="medium"
      sizing="largeSizeMediumTitles"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="primary-glow"
      secondaryButtonStyle="glass"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="KPI Marketing"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "services" },
            { name: "Results", id: "metrics" },
            { name: "Testimonials", id: "testimonials" },
            { name: "Contact", id: "contact" }
          ]}
          button={{
            text: "Start Free Audit",            href: "contact"
          }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroCarouselLogo
          logoText="ORGANIC KPI GROWTH"
          description="Data-driven marketing strategies that deliver measurable, sustainable results. We focus on metrics that matter."
          buttons={[
            { text: "View Our Results", href: "metrics" },
            { text: "Get Started", href: "contact" }
          ]}
          slides={[
            {
              imageSrc: "https://img.b2bpic.net/free-photo/businessman-examining-graphs-digital-tablet-while-planning-with-coworkers-desk-office_662251-126.jpg",              imageAlt: "Marketing analytics and growth visualization"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/two-women-entrepreneurs-working-together-office_93675-134471.jpg",              imageAlt: "Digital marketing strategy and campaign performance"
            },
            {
              imageSrc: "https://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-58033.jpg",              imageAlt: "Organic growth metrics and dashboard analytics"
            }
          ]}
          autoplayDelay={5000}
          showDimOverlay={true}
          logoLineHeight={1.2}
        />
      </div>

      <div id="about" data-section="about">
        <MediaSplitTabsAbout
          title="Our Approach"
          description="We believe in transparency and results-driven marketing that aligns with your business objectives."
          tabs={[
            {
              id: "strategy",              label: "Strategy",              description: "We start with comprehensive audits to understand your market, competitors, and audience. Our KPI-focused strategies are built on data, not assumptions, ensuring every decision drives measurable growth."
            },
            {
              id: "execution",              label: "Execution",              description: "Our expert team executes campaigns across organic channels with precision and accountability. We optimize continuously, testing and refining based on real-time performance data to maximize ROI."
            },
            {
              id: "reporting",              label: "Reporting",              description: "Transparent dashboards and regular reports keep you informed of progress. We track every KPI and provide actionable insights to drive your business forward with clarity and confidence."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/man-executive-instructing-diverse-employees-new-modern-company-office-room-before-business-meeting-with-partners-analysing-reports-tablet_482257-5242.jpg"
          imageAlt="Team collaborating on marketing strategy"
          imagePosition="right"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardNine
          title="Our Services"
          description="Comprehensive marketing solutions designed to deliver measurable KPI growth across all channels."
          features={[
            {
              id: 1,
              title: "SEO & Organic Traffic",              description: "Drive sustainable growth through optimized content, technical SEO, and strategic link building. We focus on ranking improvements and organic visibility that translates to qualified leads.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/businessman-examining-graphs-digital-tablet-while-planning-with-coworkers-desk-office_662251-126.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/two-women-entrepreneurs-working-together-office_93675-134471.jpg"
              }
            },
            {
              id: 2,
              title: "Content Strategy",              description: "Create compelling, KPI-aligned content that resonates with your audience. From blog posts to landing pages, every piece is optimized for engagement and conversion metrics.",              phoneOne: {
                imageSrc: "https://img.b2bpic.net/free-photo/two-women-entrepreneurs-working-together-office_93675-134471.jpg"
              },
              phoneTwo: {
                imageSrc: "https://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-58033.jpg"
              }
            }
          ]}
          showStepNumbers={true}
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardSeven
          title="Our Impact"
          description="Real results from real clients. These metrics reflect our commitment to organic KPI-driven growth."
          metrics={[
            {
              id: "1",              value: "340%",              title: "Average Organic Traffic Increase",              items: [
                "Achieved within first 6 months",                "Sustained growth quarter-over-quarter",                "Across all client verticals"
              ]
            },
            {
              id: "2",              value: "2.8x",              title: "Average ROI Multiple",              items: [
                "Average client return on investment",                "Calculated across all campaigns",                "Over 12-month periods"
              ]
            },
            {
              id: "3",              value: "89%",              title: "Client Retention Rate",              items: [
                "Clients who renew annually",                "Year-over-year consistency",                "Built on proven results"
              ]
            },
            {
              id: "4",              value: "150+",              title: "Successful Campaigns Launched",              items: [
                "Across 40+ industries",                "Multiple client segments",                "All results-driven and measured"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardFifteen
          testimonial="Working with this team transformed our marketing strategy. Their KPI-focused approach gave us clarity on what actually works. In just 8 months, we saw a 420% increase in qualified leads and cut our customer acquisition cost by 40%. Exceptional results and even better communication."
          rating={5}
          author="Sarah Chen, VP of Growth - TechStart Inc."
          avatars={[
            {
              src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              alt: "Client testimonial avatar 1"
            },
            {
              src: "https://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",              alt: "Client testimonial avatar 2"
            },
            {
              src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              alt: "Client testimonial avatar 3"
            },
            {
              src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",              alt: "Client testimonial avatar 4"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Ready to accelerate your organic growth? Let's discuss your KPI targets and build a strategy that delivers measurable results."
          animationType="entrance-slide"
          buttons={[
            { text: "Schedule Consultation", href: "https://calendar.app.com" },
            { text: "Free Audit", href: "contact" }
          ]}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://img.b2bpic.net/free-photo/group-asia-young-creative-people-smart-casual-wear-discussing-business-brainstorming_7861-3066.jpg?id=15113201"
          imageAlt="Marketing growth and analytics background"
          columns={[
            {
              title: "Services",              items: [
                { label: "SEO Strategy", href: "services" },
                { label: "Content Marketing", href: "services" },
                { label: "Organic Growth", href: "services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "about" },
                { label: "Our Results", href: "metrics" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact Us", href: "contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            }
          ]}
          logoText="KPI Marketing"
          copyrightText="© 2025 KPI Marketing. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}