"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { Award, TrendingUp, Users, Globe, Clock } from "lucide-react";

export default function AboutPage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Pricing", id: "pricing" },
    { name: "About", id: "about" },
    { name: "FAQ", id: "faq" },
    { name: "Contact", id: "contact" }
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="reveal-blur"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmall"
      background="circleGradient"
      cardStyle="outline"
      primaryButtonStyle="flat"
      secondaryButtonStyle="solid"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Guesto"
          navItems={navItems}
          button={{
            text: "Get Started",            href: "https://app.guesto.com/login"
          }}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Why Guesto"
          tagIcon={Award}
          title="Built for Travel Professionals"
          description="Guesto was created by travel industry veterans who understand the complexities of managing tours, customers, and itineraries. Our platform eliminates manual work, reduces errors, and helps agencies focus on delivering exceptional experiences."
          metricsAnimation="slide-up"
          metrics={[
            { value: "500+", title: "Travel Agencies Using Guesto" },
            { value: "10,000+", title: "Itineraries Created Monthly" }
          ]}
          imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=7"
          imageAlt="Guesto Dashboard Interface"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardThree
          tag="Impact"
          tagIcon={TrendingUp}
          title="Trusted by Travel Industry Leaders"
          description="See how agencies are transforming their business with Guesto."
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          metrics={[
            { id: "1", icon: Users, title: "Agencies", value: "500+" },
            { id: "2", icon: Globe, title: "Countries", value: "85+" },
            { id: "3", icon: TrendingUp, title: "Growth", value: "240%" },
            { id: "4", icon: Clock, title: "Time Saved", value: "15hrs/week" }
          ]}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=8"
          imageAlt="Guesto Platform"
          logoText="Guesto"
          copyrightText="© 2025 Guesto. All rights reserved."
          columns={[
            {
              title: "Product",              items: [
                { label: "Features", href: "#features" },
                { label: "Pricing", href: "#pricing" },
                { label: "Security", href: "#" },
                { label: "Roadmap", href: "#" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}