"use client";

import Link from "next/link";
import { Target, CheckCircle } from "lucide-react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';

export default function ContactPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeLargeTitles"
      background="floatingGradient"
      cardStyle="soft-shadow"
      primaryButtonStyle="shadow"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Invest King"
          navItems={[
            { name: "Home", id: "/" },
            { name: "About", id: "/about" },
            { name: "Courses", id: "/courses" },
            { name: "Pricing", id: "/pricing" },
            { name: "Contact", id: "/contact" }
          ]}
          button={{
            text: "Join Now",
            href: "/pricing"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Get in Touch"
          tagIcon={Target}
          title="Ready to Transform Your Financial Future?"
          description="We're here to help you take the next step in your investment journey. Whether you have questions about our training programs, need guidance on which membership level is right for you, or want to speak with one of our investment advisors, our team is ready to support you. Reach out today and let's discuss how Invest King can help you achieve your financial goals. Our expert advisors are available Monday through Friday, 9 AM to 6 PM EST, and we typically respond to all inquiries within 24 hours."
          metrics={[
            { value: "< 24hrs", title: "Average Response Time" },
            { value: "Expert", title: "Advisor Support Team" }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-as-team-company_23-2149136874.jpg"
          imageAlt="Invest King support team ready to help"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwelve
          testimonials={[
            {
              id: "1",
              name: "Marcus Johnson",
              imageSrc: "https://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg"
            },
            {
              id: "2",
              name: "Sarah Chen",
              imageSrc: "https://img.b2bpic.net/free-photo/portrait-successful-young-businessman-with-his-arms-crossed-looking-camera_23-2148176207.jpg"
            },
            {
              id: "3",
              name: "David Williams",
              imageSrc: "https://img.b2bpic.net/free-photo/front-view-smiley-man-with-backpack_23-2149915917.jpg"
            },
            {
              id: "4",
              name: "Jessica Martinez",
              imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1588.jpg"
            }
          ]}
          cardTitle="Join Thousands Who've Already Transformed Their Financial Lives"
          cardTag="Success Stories"
          cardTagIcon={CheckCircle}
          useInvertedBackground="invertDefault"
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardFourteen
          title="We're committed to providing exceptional support and guidance to every member of the Invest King community."
          tag="Support Excellence"
          metrics={[
            {
              id: "1",
              value: "98%",
              description: "Member satisfaction rate with our customer support and advisory services"
            },
            {
              id: "2",
              value: "15 min",
              description: "Average response time during business hours for urgent member inquiries"
            }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <FooterLogoReveal
        logoText="Invest King"
      />
    </ThemeProvider>
  );
}