import { buttonVariants } from "@/components/ui/button";
import { page_routes } from "@/lib/routes";
import {
  ArrowRightIcon,
  LayoutDashboard,
  Bell,
  Key,
  Zap,
  Layers,
  ShoppingBag
} from "lucide-react";
import Link from "next/link";
import { cn } from "@/lib/utils";
import AnimatedShinyText from "@/components/ui/animated-shiny-text";
import { getMetadata } from "@/app/layout";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";

export const metadata = getMetadata({
  title: "WooNooW - The Ultimate WooCommerce Enhancement Suite",
});

export default function Home() {
  return (
    <div className="flex flex-col items-center justify-center px-4 py-8 text-center sm:py-20">
      <Link
        href="/docs/resources/changelog"
        className="mb-5 sm:text-lg flex items-center gap-2 underline underline-offset-4 sm:-mt-12"
      >
        <div className="z-10 flex min-h-10 items-center justify-center max-[800px]:mt-10">
          <div
            className={cn(
              "group rounded-full border border-black/5 bg-black/5 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-accent dark:border-white/5 dark:bg-transparent dark:hover:bg-accent",
            )}
          >
            <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out hover:text-neutral-100 hover:duration-300 hover:dark:text-neutral-200">
              <span>🚀 v1.0 Released: Multi-Channel Notifications</span>
              <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
            </AnimatedShinyText>
          </div>
        </div>
      </Link>

      <div className="w-full max-w-[900px] pb-8">
        <h1 className="mb-4 text-3xl font-bold sm:text-6xl bg-clip-text text-transparent bg-linear-to-r from-green-500 to-lime-500">
          Fill the Gap. <br />Elevate Your Store.
        </h1>
        <p className="mb-8 sm:text-xl text-muted-foreground max-w-2xl mx-auto">
          WooNooW bridges the divide between standard WooCommerce and a premium e-commerce experience.
          Unified dashboard, SPA performance, and enterprise-grade tools in one suite.
        </p>
      </div>

      <div className="flex flex-row items-center gap-6 mb-16">
        <Link
          href={`/docs${page_routes[0].href}`}
          className={buttonVariants({
            className: "px-8 bg-black text-white hover:bg-neutral-800 dark:bg-white dark:text-black dark:hover:bg-neutral-200",
            size: "lg",
          })}
        >
          Get Started
        </Link>
        <Link
          href="/docs/features"
          className={buttonVariants({
            variant: "outline",
            className: "px-8",
            size: "lg",
          })}
        >
          Explore Features
        </Link>
      </div>

      {/* The Gap Analysis */}
      <div className="w-full max-w-5xl mb-20 text-left">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
          {/* Production Reality (The Problem) */}
          <div className="p-8 rounded-2xl bg-red-50 dark:bg-red-950/20 border border-red-100 dark:border-red-900/30">
            <h3 className="text-xl font-bold mb-4 text-red-700 dark:text-red-400 flex items-center gap-2">
              <ShoppingBag className="w-5 h-5" />
              Standard WooCommerce
            </h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li className="flex gap-2">
                <span className="text-red-500">✕</span> Disjointed UX using multiple plugins
              </li>
              <li className="flex gap-2">
                <span className="text-red-500">✕</span> Slow standard page loads (MPA)
              </li>
              <li className="flex gap-2">
                <span className="text-red-500">✕</span> Basic, rigid email notifications
              </li>
              <li className="flex gap-2">
                <span className="text-red-500">✕</span> Complex license management via 3rd parties
              </li>
            </ul>
          </div>

          {/* The WooNooW Solution */}
          <div className="p-8 rounded-2xl bg-green-50 dark:bg-green-950/20 border border-green-100 dark:border-green-900/30">
            <h3 className="text-xl font-bold mb-4 text-green-700 dark:text-green-400 flex items-center gap-2">
              <Zap className="w-5 h-5" />
              With WooNooW
            </h3>
            <ul className="space-y-3 text-sm text-muted-foreground">
              <li className="flex gap-2">
                <span className="text-green-600">✓</span> <strong>Unified SPA Dashboard</strong> for customers
              </li>
              <li className="flex gap-2">
                <span className="text-green-600">✓</span> <strong>Multi-Channel</strong> (WhatsApp, SMS, Email)
              </li>
              <li className="flex gap-2">
                <span className="text-green-600">✓</span> <strong>Built-in Licensing</strong> & OAuth Server
              </li>
              <li className="flex gap-2">
                <span className="text-green-600">✓</span> <strong>Modular Architecture</strong> with Bridge Pattern
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div className="w-full max-w-6xl">
        <h2 className="text-2xl font-bold mb-8">Core Modules</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <Card className="text-left hover:border-green-500/50 transition-colors">
            <CardHeader>
              <LayoutDashboard className="size-8 text-green-500 mb-2" />
              <CardTitle>Customer SPA</CardTitle>
              <CardDescription>
                React-based frontend that replaces standard My Account pages with a lightning-fast interface.
              </CardDescription>
            </CardHeader>
          </Card>

          <Card className="text-left hover:border-green-500/50 transition-colors">
            <CardHeader>
              <Bell className="size-8 text-green-500 mb-2" />
              <CardTitle>Notification Engine</CardTitle>
              <CardDescription>
                Advanced template engine supporting Email, SMS, WhatsApp, and Telegram out of the box.
              </CardDescription>
            </CardHeader>
          </Card>

          <Card className="text-left hover:border-green-500/50 transition-colors">
            <CardHeader>
              <Key className="size-8 text-green-500 mb-2" />
              <CardTitle>License Manager</CardTitle>
              <CardDescription>
                Complete OAuth2 server implementation for managing software licenses and updates.
              </CardDescription>
            </CardHeader>
          </Card>

          <Card className="text-left hover:border-green-500/50 transition-colors">
            <CardHeader>
              <Layers className="size-8 text-green-500 mb-2" />
              <CardTitle>Developer Friendly</CardTitle>
              <CardDescription>
                Extend functionality using our Bridge Pattern and Module Registry APIs.
              </CardDescription>
            </CardHeader>
          </Card>
        </div>
      </div>
    </div>
  );
}