"use client";

import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import HeroCentered from "@/components/sections/hero/HeroCentered";
import FeatureCardTwentySeven from "@/components/sections/feature/FeatureCardTwentySeven";
import MetricCardFourteen from "@/components/sections/metrics/MetricCardFourteen";
import AboutMetric from "@/components/sections/about/AboutMetric";
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import ContactCTA from "@/components/sections/contact/ContactCTA";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Shield, Lock, Eye, Fingerprint, Mail, Sparkles } from "lucide-react";

export default function HomePage() {
  const navItems = [
    { name: "Features", id: "features" },
    { name: "Workflow", id: "workflow" },
    { name: "Security", id: "security" },
    { name: "Roles", id: "roles" },
    { name: "Contact", id: "contact" },
  ];

  const footerColumns = [
    {
      items: [
        { label: "Features", href: "#features" },
        { label: "Workflow", href: "#workflow" },
        { label: "Security", href: "#security" },
      ],
    },
    {
      items: [
        { label: "User Roles", href: "#roles" },
        { label: "Pricing", href: "#pricing" },
        { label: "Contact", href: "#contact" },
      ],
    },
    {
      items: [
        { label: "Privacy Policy", href: "#" },
        { label: "Terms of Service", href: "#" },
        { label: "Documentation", href: "#" },
      ],
    },
    {
      items: [
        { label: "Support", href: "mailto:support@sy-refund.test" },
        { label: "Sales", href: "mailto:sales@sy-refund.test" },
        { label: "Twitter", href: "https://twitter.com" },
      ],
    },
  ];

  return (
    <ThemeProvider
      defaultButtonVariant="bounce-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="layered-gradient"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="radial-glow"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple brandName="SY-Refund" navItems={navItems} />
      </div>

      <div id="hero" data-section="hero">
        <HeroCentered
          title="Streamline Airline Refund Processing"
          description="SY-Refund is a comprehensive multi-tier refund management system designed specifically for Syrian Airlines. Automate approval workflows, manage documents securely, and track refunds from submission to completion."
          background={{ variant: "plain" }}
          avatars={[
            {
              src: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              alt: "dashboard interface management system"},
            {
              src: "http://img.b2bpic.net/free-vector/hiring-recruitment-process_23-2148624250.jpg",              alt: "workflow process approval pipeline"},
            {
              src: "http://img.b2bpic.net/free-vector/secure-technology-background-abstract-design_52683-28630.jpg",              alt: "security protection encryption shield"},
          ]}
          avatarText="Trusted by Travel Agencies Across the Region"
          buttons={[
            { text: "Get Started", href: "#contact" },
            { text: "Learn More", href: "#features" },
          ]}
          buttonAnimation="slide-up"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentySeven
          title="Core System Features"
          description="Discover the powerful capabilities that make SY-Refund the ideal solution for airline refund management"
          tag="Capabilities"
          features={[
            {
              id: "1",              title: "Multi-Tier Approval Workflow",              description:
                "Automated approval pipeline with Office → Admin → Finance Director stages. Each role has specific permissions and responsibilities.",              imageSrc:
                "http://img.b2bpic.net/free-vector/hiring-recruitment-process_23-2148624250.jpg",              imageAlt: "Approval Workflow"},
            {
              id: "2",              title: "Secure Document Management",              description:
                "Camera-based ID and photo capture, base64 storage, and role-based access controls ensure passenger data security.",              imageSrc:
                "http://img.b2bpic.net/free-photo/person-calculating-tax-returns-home-with-documents-laptop_73899-54547.jpg",              imageAlt: "Document Upload"},
            {
              id: "3",              title: "Real-Time Notifications",              description:
                "AJAX polling keeps users updated on request status changes. Automatic notifications on approvals, rejections, and finance approvals.",              imageSrc:
                "http://img.b2bpic.net/free-vector/important-announcement-text-with-megaphone-label-set-promotion-banner-marketing-advertising_632498-23998.jpg",              imageAlt: "Notification Center"},
            {
              id: "4",              title: "Role-Based Dashboards",              description:
                "Custom dashboards for Admin, Finance, and Office roles with relevant metrics, statistics, and action items.",              imageSrc:
                "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg",              imageAlt: "Dashboard Interface"},
          ]}
          gridVariant="uniform-4-items"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="workflow" data-section="workflow">
        <MetricCardFourteen
          title="The SY-Refund approval process ensures complete transparency and control at every step of the refund journey."
          tag="Workflow"
          tagAnimation="slide-up"
          metrics={[
            {
              id: "1",              value: "3 Stages",              description:
                "Office submission, Admin review, Finance approval. Clear progression with audit trails."},
            {
              id: "2",              value: "100% Tracked",              description:
                "Every action recorded with timestamps, reviewer information, and comprehensive history."},
            {
              id: "3",              value: "Auto-Validation",              description:
                "System automatically flags tickets over 1 year old for MCO conversion referral."},
            {
              id: "4",              value: "Instant Notifications",              description:
                "Real-time AJAX updates keep all parties informed of status changes and decisions."},
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="security" data-section="security">
        <AboutMetric
          title="Enterprise-Grade Security for Passenger Data Protection"
          metrics={[
            { icon: Shield, label: "CSRF Protection", value: "All Forms" },
            {
              icon: Lock,
              label: "Encrypted Storage",              value: "Base64 Documents"},
            { icon: Eye, label: "Role-Based Access", value: "Fine-Grained" },
            {
              icon: Fingerprint,
              label: "Anti-Abuse Detection",              value: "IP + Fingerprint"},
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="roles" data-section="roles">
        <TeamCardEleven
          title="User Roles & Responsibilities"
          description="SY-Refund supports four distinct user roles, each with tailored dashboards and permissions."
          groups={[
            {
              id: "roles-group",              groupTitle: "System Roles",              members: [
                {
                  id: "1",                  title: "Travel Agency Office",                  subtitle: "Submit & Track Refunds",                  detail:
                    "Submit new refund requests, view history, receive notifications, manage own requests",                  imageSrc:
                    "http://img.b2bpic.net/free-photo/businesspeople-working-as-team_1098-803.jpg",                  imageAlt: "Travel Agency Office"},
                {
                  id: "2",                  title: "Refund Department Admin",                  subtitle: "Review & Approve",                  detail:
                    "Review new requests, approve/reject with reasons, view history, export data, manage users",                  imageSrc:
                    "http://img.b2bpic.net/free-photo/businesspeople-working-as-team_1098-803.jpg",                  imageAlt: "Refund Department Admin"},
                {
                  id: "3",                  title: "Finance Director",                  subtitle: "Final Approval",                  detail:
                    "Approve/cancel finance stage, view finance history, export approved transactions",                  imageSrc:
                    "http://img.b2bpic.net/free-photo/businesspeople-working-as-team_1098-803.jpg",                  imageAlt: "Finance Director"},
                {
                  id: "4",                  title: "System Administrator",                  subtitle: "Full Control",                  detail:
                    "Super-admin access to all features, user management, office management, site settings",                  imageSrc:
                    "http://img.b2bpic.net/free-photo/businesspeople-working-as-team_1098-803.jpg",                  imageAlt: "System Administrator"},
              ],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Implementation & Support Plans"
          description="Choose the perfect deployment option for your organization's needs."
          plans={[
            {
              id: "1",              badge: "Standard",              price: "Custom",              subtitle: "Perfect for single airline operations",              buttons: [
                { text: "Request Demo", href: "#contact" },
                { text: "Learn More", href: "#features" },
              ],              features: [
                "Multi-tier approval workflow",                "Role-based access control",                "Real-time notifications",                "Document management",                "Basic reporting & exports",                "Email support"],
            },
            {
              id: "2",              badge: "Enterprise",              badgeIcon: Sparkles,
              price: "Custom",              subtitle: "For large-scale operations with custom needs",              buttons: [
                { text: "Contact Sales", href: "#contact" },
                { text: "Schedule Call", href: "#contact" },
              ],              features: [
                "Everything in Standard",                "Advanced analytics & dashboards",                "Custom integrations",                "API access",                "Priority support",                "Dedicated account manager",                "24/7 technical support",                "Custom training programs"],
            },
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCTA
          tag="Get Started"
          tagIcon={Mail}
          title="Ready to Transform Your Refund Process?"
          description="Contact our team today to schedule a demonstration of SY-Refund and discover how we can streamline your airline's refund management operations."
          buttons={[
            { text: "Contact Sales", href: "mailto:sales@sy-refund.test" },
            { text: "Schedule Demo", href: "mailto:demo@sy-refund.test" },
          ]}
          background={{ variant: "plain" }}
          useInvertedBackground={false}
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="SY-Refund"
          columns={footerColumns}
        />
      </div>
    </ThemeProvider>
  );
}