"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitDualMedia from "@/components/sections/hero/HeroSplitDualMedia";
import MediaAbout from "@/components/sections/about/MediaAbout";
import FeatureCardSixteen from "@/components/sections/feature/FeatureCardSixteen";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterBase from "@/components/sections/footer/FooterBase";
import Link from "next/link";
import { Zap } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Live Status", id: "live-status" },
    { name: "PNR Check", id: "pnr-status" },
    { name: "How It Works", id: "how-it-works" },
    { name: "Support", id: "contact" },
  ];

  const footerColumns = [
    {
      title: "Service",
      items: [
        { label: "Track Train", href: "/" },
        { label: "Check PNR", href: "/pnr" },
        { label: "Live Status", href: "#live-status" },
        { label: "FAQ", href: "#faq" },
      ],
    },
    {
      title: "Company",
      items: [
        { label: "About Us", href: "/about" },
        { label: "Contact", href: "/contact" },
        { label: "Blog", href: "/blog" },
        { label: "Careers", href: "/careers" },
      ],
    },
    {
      title: "Legal",
      items: [
        { label: "Privacy Policy", href: "/privacy" },
        { label: "Terms of Service", href: "/terms" },
        { label: "Disclaimer", href: "/disclaimer" },
        { label: "Cookie Policy", href: "/cookies" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSmall"
      background="noiseDiagonalGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="medium"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="RailTrack"
          navItems={navItems}
          button={{ text: "Track Now", href: "#hero" }}
          animateOnLoad={true}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          title="Track Your Train in Real-Time"
          description="Enter your 5-digit train number and get instant live status updates including current location, delay information, and station arrivals. Simple, fast, and reliable train tracking."
          tag="Live Tracking"
          tagIcon={Zap}
          background={{ variant: "plain" }}
          buttons={[
            { text: "Track Status", href: "#live-status" },
            { text: "Check PNR", href: "/pnr" },
          ]}
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-photo/empty-railroad-platform_1359-702.jpg",
              imageAlt: "Train tracking interface",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/underground-infographic-set_1284-16818.jpg",
              imageAlt: "Real-time status visualization",
            },
          ]}
          rating={5}
          ratingText="Trusted by 500K+ Indian Travelers"
        />
      </div>

      <div id="live-status" data-section="live-status">
        <MediaAbout
          title="Live Status Timeline"
          description="View your train's journey station by station. See passed stations in grey, upcoming stations highlighted in bold blue, real-time delays in red, and platform numbers in green badges. Every detail you need at a glance."
          tag="Status Tracking"
          imageSrc="http://img.b2bpic.net/free-vector/underground-infographic-set_1284-16818.jpg"
          imageAlt="Live status timeline display"
          buttons={[{ text: "Start Tracking", href: "#hero" }]}
          useInvertedBackground={false}
        />
      </div>

      <div id="pnr-section" data-section="pnr-section">
        <FeatureCardSixteen
          title="PNR Status Lookup"
          description="Enter your 10-digit PNR number to get complete booking and journey details in one card view."
          tag="Passenger Info"
          negativeCard={{
            items: [
              "Manual phone calls to enquiry",
              "Waiting hours for information",
              "Unclear booking status",
              "No real-time updates",
            ],
          }}
          positiveCard={{
            items: [
              "Instant PNR status check",
              "Live booking confirmation",
              "Current passenger status",
              "Seat and coach details",
              "Confirmed vs RAC status",
            ],
          }}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          names={[
            "Indian Railways",
            "IRCTC",
            "Ministry of Railways",
            "Railway Board",
            "Transportation Ministry",
          ]}
          title="Trusted by Official Partners"
          description="Verified integration with Indian Railways official systems and government transportation authorities."
          tag="Official Partners"
          textboxLayout="default"
          useInvertedBackground={false}
          speed={40}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          faqs={[
            {
              id: "1",
              title: "How do I track my train?",
              content:
                "Enter your 5-digit train number and the journey date in the search bar on our home page. You'll instantly see live location, all station stops, delays, and platform information.",
            },
            {
              id: "2",
              title: "What is a PNR number?",
              content:
                "A Passenger Name Record (PNR) is a unique 10-digit confirmation number given when you book a train ticket. Use it to check your exact booking status, seat number, and passenger details.",
            },
            {
              id: "3",
              title: "Is the data real-time?",
              content:
                "Yes! Our system is integrated with official Indian Railways data and updates every 2-3 minutes. You get the most current train location and status information available.",
            },
            {
              id: "4",
              title: "Can I use this for multiple trains?",
              content:
                "Absolutely! Track unlimited trains simultaneously. Each search gives you complete real-time details about that specific train's journey.",
            },
            {
              id: "5",
              title: "What does the red delay time mean?",
              content:
                "Red delay time shows how many minutes the train is running late from its scheduled time. Green indicates the train is on schedule.",
            },
            {
              id: "6",
              title: "How accurate are platform numbers?",
              content:
                "Platform numbers are displayed in green badges and are updated based on the latest railway authority information, typically confirmed 1-2 hours before arrival.",
            },
          ]}
          title="Frequently Asked Questions"
          description="Get quick answers about train tracking, PNR status, and how to use our service."
          tag="Help & Support"
          textboxLayout="default"
          useInvertedBackground={false}
          faqsAnimation="slide-up"
        />
      </div>

      <div id="monetization" data-section="monetization">
        <ContactSplitForm
          title="Book Your Meal & Travel Better"
          description="Reserve meals for your journey through our partner food service. Enjoy delicious food delivered to your seat."
          inputs={[
            { name: "train_number", type: "text", placeholder: "Train Number", required: true },
            { name: "pnr", type: "text", placeholder: "PNR Number", required: true },
          ]}
          textarea={{
            name: "food_preference",
            placeholder: "Meal preferences and dietary requirements",
            rows: 3,
            required: false,
          }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/people-traveling-subway-winter-time_23-2149217900.jpg"
          imageAlt="Meal booking service"
          mediaAnimation="slide-up"
          mediaPosition="right"
          buttonText="Book Meal & Earn Rewards"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          columns={footerColumns}
          logoText="RailTrack"
          copyrightText="© 2025 RailTrack. Unofficial Indian Railway Tracking Tool. Not affiliated with Indian Railways."
        />
      </div>
    </ThemeProvider>
  );
}