"use client";

import { SmoothLink } from "@/components/providers/NavigationProvider";
import { Button } from "@/components/ui/button";
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";
import {
  FileText,
  TrendingUp,
  Users,
  Calendar,
  Star,
  Globe,
  BarChart3,
  DollarSign,
  ChevronDown,
  Play,
} from "lucide-react";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

const features = [
  {
    title: "Invoicing",
    description:
      "Create and send professional invoices in minutes. Track payments and automate reminders.",
    icon: FileText,
  },
  {
    title: "Bank reconciliation",
    description:
      "Automatically match transactions and keep your books balanced without manual entry.",
    icon: TrendingUp,
  },
  {
    title: "Payroll",
    description:
      "Run payroll in minutes with automatic tax calculations and direct deposit.",
    icon: Users,
  },
  {
    title: "Leave management",
    description:
      "Track employee time off, approve requests, and maintain accurate leave balances.",
    icon: Calendar,
  },
  {
    title: "Performance reviews",
    description:
      "Conduct structured performance reviews and track employee development goals.",
    icon: Star,
  },
  {
    title: "Multi-jurisdiction tax",
    description:
      "Automatically calculate and file taxes across different states and jurisdictions.",
    icon: Globe,
  },
];

const faqs = [
  {
    question: "Is Vela really free?",
    answer:
      "Vela offers a free tier for up to 5 employees. For larger teams, our paid plans start at just $49/month - significantly less than enterprise solutions.",
  },
  {
    question: "Which countries are supported for payroll?",
    answer:
      "We currently support payroll processing in the United States, Canada, UK, and Australia. We're actively expanding to more countries.",
  },
  // {
  //   question: "Can I migrate from Xero or QuickBooks?",
  //   answer:
  //     "Yes! We provide free migration tools and support to transfer your data from Xero, QuickBooks, and other major accounting platforms.",
  // },
  {
    question: "How does multi-user access work?",
    answer:
      "Each team member gets their own login with role-based permissions. Owners can control who can view reports, process payroll, or manage employee data.",
  },
  {
    question: "Is my financial data secure?",
    answer:
      "Absolutely. We use bank-level encryption, regular security audits, and comply with SOC 2 and GDPR standards to protect your data.",
  },
];

// Product Mockup Component
function ProductMockup() {
  return (
    <div className="hidden lg:block">
      <div className="bg-gray-900 rounded-lg shadow-2xl transform rotate-1 perspective-1000 transition-all duration-700 hover:rotate-0 hover:scale-105">
        {/* Browser Frame */}
        <div className="bg-gray-800 rounded-t-lg px-4 py-2 flex items-center space-x-2">
          <div className="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
          <div className="w-3 h-3 bg-yellow-500 rounded-full animate-pulse delay-75"></div>
          <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse delay-150"></div>
          <div className="flex-1 text-center">
            <div className="bg-gray-700 rounded px-2 py-1 text-xs text-gray-300 inline-block">
              vela.app/dashboard
            </div>
          </div>
        </div>

        {/* Dashboard Content */}
        <div className="bg-white p-4 rounded-b-lg">
          {/* Metrics Cards */}
          <div className="grid grid-cols-4 gap-2 mb-4">
            <div className="bg-teal-50 p-2 rounded border border-teal-100 transition-all duration-300 hover:shadow-md hover:scale-105 cursor-pointer">
              <div className="text-xs text-teal-600 font-medium">
                Cash on hand
              </div>
              <div className="text-sm font-bold text-teal-900">$45,230</div>
            </div>
            <div className="bg-green-50 p-2 rounded border border-green-100 transition-all duration-300 hover:shadow-md hover:scale-105 cursor-pointer">
              <div className="text-xs text-green-600 font-medium">
                Outstanding
              </div>
              <div className="text-sm font-bold text-green-900">$12,450</div>
            </div>
            <div className="bg-purple-50 p-2 rounded border border-purple-100 transition-all duration-300 hover:shadow-md hover:scale-105 cursor-pointer">
              <div className="text-xs text-purple-600 font-medium">
                Payroll due
              </div>
              <div className="text-sm font-bold text-purple-900">$8,750</div>
            </div>
            <div className="bg-orange-50 p-2 rounded border border-orange-100 transition-all duration-300 hover:shadow-md hover:scale-105 cursor-pointer">
              <div className="text-xs text-orange-600 font-medium">
                Headcount
              </div>
              <div className="text-sm font-bold text-orange-900">24</div>
            </div>
          </div>

          {/* Mini Bar Chart */}
          <div className="bg-gray-50 p-3 rounded mb-3">
            <div className="text-xs text-gray-600 mb-2">Revenue Trend</div>
            <div className="flex items-end space-x-1 h-12">
              <div className="bg-teal-400 w-3 h-6 rounded-t transition-all duration-500 hover:h-8"></div>
              <div className="bg-teal-400 w-3 h-8 rounded-t transition-all duration-500 hover:h-10"></div>
              <div className="bg-teal-400 w-3 h-10 rounded-t transition-all duration-500 hover:h-12"></div>
              <div className="bg-teal-400 w-3 h-7 rounded-t transition-all duration-500 hover:h-9"></div>
              <div className="bg-teal-400 w-3 h-9 rounded-t transition-all duration-500 hover:h-11"></div>
              <div className="bg-teal-500 w-3 h-11 rounded-t transition-all duration-500 hover:h-12"></div>
            </div>
          </div>

          {/* Employee List */}
          <div className="bg-gray-50 p-3 rounded">
            <div className="text-xs text-gray-600 mb-2">Recent Activity</div>
            <div className="space-y-1">
              <div className="flex items-center justify-between text-xs transition-all duration-300 hover:bg-gray-100 p-1 rounded cursor-pointer">
                <span className="text-gray-700">Sarah Johnson</span>
                <span className="bg-green-100 text-green-700 px-1 rounded">
                  Active
                </span>
              </div>
              <div className="flex items-center justify-between text-xs transition-all duration-300 hover:bg-gray-100 p-1 rounded cursor-pointer">
                <span className="text-gray-700">Mike Chen</span>
                <span className="bg-green-100 text-green-700 px-1 rounded">
                  Active
                </span>
              </div>
              <div className="flex items-center justify-between text-xs transition-all duration-300 hover:bg-gray-100 p-1 rounded cursor-pointer">
                <span className="text-gray-700">Emily Davis</span>
                <span className="bg-yellow-100 text-yellow-700 px-1 rounded">
                  Leave
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-white">
      <Header />

      {/* Hero Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 animate-fadeIn">
        <div className="max-w-7xl mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            {/* Left Column */}
            <div className="space-y-8">
              <h1 className="text-5xl md:text-6xl font-serif text-gray-900 mb-6 leading-tight transition-all duration-700 transform hover:scale-105">
                One platform for your entire business.
              </h1>
              <p className="text-xl text-gray-500 mb-8 transition-all duration-500 hover:text-gray-600 leading-relaxed">
                Vela combines accounting, HR, payroll, and team communications in one place. Pay only for what you use.
              </p>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 mb-8">
                <SmoothLink href="/sign-up">
                  <Button
                    size="lg"
                    className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white text-lg px-8 py-3 transition-all duration-300 hover:scale-105 hover:shadow-xl cursor-pointer transform hover:-translate-y-1"
                  >
                    Get started free
                  </Button>
                </SmoothLink>
                <SmoothLink href="#features">
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-[#1D9E75] text-[#1D9E75] hover:bg-[#1D9E75] hover:text-white text-lg px-8 py-3 transition-all duration-300 hover:scale-105 hover:shadow-lg cursor-pointer"
                  >
                    See how it works
                  </Button>
                </SmoothLink>
              </div>

              {/* Trust Signals */}
              <div className="text-sm text-gray-500 transition-all duration-500">
                No credit card required · Free forever for small teams · Cancel
                anytime
              </div>
            </div>

            {/* Right Column - Product Mockup */}
            <div className="transition-all duration-700 transform hover:scale-105">
              <ProductMockup />
            </div>
          </div>
        </div>
      </section>

      {/* Social Proof Bar */}
      <section className="py-8 px-4 sm:px-6 lg:px-8 bg-[#F8FAF9] transition-all duration-500 hover:bg-[#f0f4f3]">
        <div className="max-w-7xl mx-auto text-center">
          <div className="text-sm text-gray-600 mb-4 transition-all duration-300">
            Trusted by small businesses across 7 countries
          </div>
          <div className="text-sm text-gray-500">
            <span className="transition-all duration-300 hover:text-gray-700 cursor-pointer">
              Meridian Co
            </span>{" "}
            ·{" "}
            <span className="transition-all duration-300 hover:text-gray-700 cursor-pointer">
              Foxlane Group
            </span>{" "}
            ·{" "}
            <span className="transition-all duration-300 hover:text-gray-700 cursor-pointer">
              Nuvelo Studio
            </span>{" "}
            ·{" "}
            <span className="transition-all duration-300 hover:text-gray-700 cursor-pointer">
              Brightpath
            </span>{" "}
            ·{" "}
            <span className="transition-all duration-300 hover:text-gray-700 cursor-pointer">
              Castlerock Advisory
            </span>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-serif text-gray-900 mb-4 transition-all duration-700 hover:scale-105">
              Everything you need to run your business
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto transition-all duration-500 hover:text-gray-700">
              From invoicing to payroll, Vela brings together all the tools you
              need in one simple, affordable platform.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {features.map((feature, index) => (
              <div
                key={index}
                className="bg-white p-6 rounded-lg border border-gray-200 hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border-l-4 border-l-[#1D9E75] cursor-pointer group"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-4 transition-all duration-300 group-hover:scale-110 group-hover:bg-[#1D9E75]">
                  <feature.icon className="w-6 h-6 text-[#1D9E75] transition-all duration-300 group-hover:text-white" />
                </div>
                <h3 className="text-lg font-semibold text-gray-900 mb-2 transition-all duration-300 group-hover:text-[#1D9E75]">
                  {feature.title}
                </h3>
                <p className="text-gray-600 transition-all duration-300 group-hover:text-gray-700">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8">
        <div className="max-w-3xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-serif text-gray-900 mb-4 transition-all duration-700 hover:scale-105">
              Frequently Asked Questions
            </h2>
            <p className="text-lg text-gray-600 transition-all duration-500 hover:text-gray-700">
              Everything you need to know about Vela
            </p>
          </div>

          <Accordion type="single" collapsible className="space-y-4">
            {faqs.map((faq, index) => (
              <AccordionItem
                key={index}
                value={`item-${index}`}
                className="border border-gray-200 rounded-lg px-4 transition-all duration-300 hover:shadow-md hover:border-[#1D9E75] cursor-pointer overflow-hidden"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <AccordionTrigger className="text-left font-medium text-gray-900 hover:text-[#1D9E75] transition-all duration-300 no-underline">
                  {faq.question}
                </AccordionTrigger>
                <AccordionContent className="text-gray-600 transition-all duration-500 data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp">
                  {faq.answer}
                </AccordionContent>
              </AccordionItem>
            ))}
          </Accordion>
        </div>
      </section>

      {/* Testimonial Section */}
      <section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50">
        <div className="max-w-4xl mx-auto text-center">
          <div className="bg-white p-8 rounded-lg shadow-sm border border-gray-200 transition-all duration-500 hover:shadow-xl transform hover:-translate-y-2 cursor-pointer">
            <div className="text-4xl text-[#1D9E75] mb-4 transition-all duration-300 hover:scale-110">
              &quot;
            </div>
            <p className="text-xl text-gray-700 mb-6 italic transition-all duration-300 hover:text-gray-800">
              Vela transformed how we run our business. We went from juggling
              two separate tools for accounting and HR to having everything in
              one place. The time savings alone paid for the subscription in the
              first month.
            </p>
            <div className="flex items-center justify-center space-x-4">
              <div className="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center transition-all duration-300 hover:bg-[#1D9E75] hover:scale-110 cursor-pointer">
                <Users className="w-6 h-6 text-gray-500 transition-all duration-300 hover:text-white" />
              </div>
              <div className="text-left">
                <div className="font-semibold text-gray-900 transition-all duration-300 hover:text-[#1D9E75] cursor-pointer">
                  Alex Thompson
                </div>
                <div className="text-gray-600 transition-all duration-300 hover:text-gray-700 cursor-pointer">
                  CEO, TechStart Solutions
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />

      <style jsx>{`
        @keyframes fadeIn {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        @keyframes slideDown {
          from {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
          }
        }

        @keyframes slideUp {
          from {
            opacity: 1;
            max-height: 500px;
            transform: translateY(0);
          }
          to {
            opacity: 0;
            max-height: 0;
            transform: translateY(-10px);
          }
        }

        .animate-fadeIn {
          animation: fadeIn 0.8s ease-out;
        }

        .animate-slideDown {
          animation: slideDown 0.3s ease-out forwards;
        }

        .animate-slideUp {
          animation: slideUp 0.3s ease-out forwards;
        }

        .delay-75 {
          animation-delay: 75ms;
        }

        .delay-150 {
          animation-delay: 150ms;
        }
      `}</style>
    </div>
  );
}