"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import Link from "next/link";
import { Zap, Award } from "lucide-react";

export default function FeaturesPage() {
  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="features" data-section="features">
        <FeatureCardSix
          tag="Core Features"
          tagIcon={Zap}
          title="Everything You Need to Run Your Travel Business"
          description="From customer management to itinerary creation and PDF export, our platform provides all the tools travel agencies need."
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            {
              id: 1,
              title: "Customer Management",              description: "Centralized customer database with contact history, past trips, preferences, and notes. Track all interactions and manage relationships effortlessly.",              imageSrc: "http://img.b2bpic.net/free-photo/crm-business-company-strategy-marketing-concept_53876-132312.jpg?_wi=2"
            },
            {
              id: 2,
              title: "Enquiry Tracking",              description: "Convert leads to bookings with intelligent enquiry management. Track status from New to Quoted to Confirmed with automated workflows.",              imageSrc: "http://img.b2bpic.net/free-vector/contact-us-icons-set_98292-6887.jpg?_wi=2"
            },
            {
              id: 3,
              title: "Itinerary Builder",              description: "Create professional day-wise itineraries with hotel details, meals, activities, and dynamic pricing calculations. Generate beautiful PDFs instantly.",              imageSrc: "http://img.b2bpic.net/free-vector/travel-booking-app-screens_52683-42532.jpg?_wi=2"
            },
            {
              id: 4,
              title: "Pricing Engine",              description: "Automated cost calculation with hotel, transport, activities, and taxes. Real-time total updates ensure accurate quotations every time.",              imageSrc: "http://img.b2bpic.net/free-photo/multi-ethnic-business-team-sitting-table-office-center-speaking-about-project-meeting-broadroom_482257-5077.jpg?_wi=3"
            }
          ]}
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Why Choose 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=4"
          imageAlt="Guesto Dashboard Interface"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
        />
      </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=5"
          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>
  );
}