import { Head, Link } from "@inertiajs/react";
import {
    IconArrowRight,
    IconChartBar,
    IconCheck,
    IconDeviceMobile,
    IconPackage,
    IconReceipt,
    IconShieldCheck,
    IconShoppingCart,
    IconUsers,
} from "@tabler/icons-react";

const features = [
    {
        title: "Product Management",
        description: "Manage products, categories, prices, and stock easily.",
        icon: IconPackage,
    },
    {
        title: "Sales Transactions",
        description: "Record sales quickly with a clean and simple POS flow.",
        icon: IconReceipt,
    },
    {
        title: "Customer Management",
        description: "Keep customer information and purchase history organized.",
        icon: IconUsers,
    },
    {
        title: "Reports & Analytics",
        description: "View sales reports and track business performance.",
        icon: IconChartBar,
    },
];

const stats = [
    "Fast checkout process",
    "Responsive dashboard",
    "Secure user access",
    "Simple shop management",
];

export default function Welcome() {
    return (
        <>
            <Head title="POS Application - Modern Point of Sale" />

            <div className="min-h-screen bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-white">
                {/* Navbar */}
                <nav className="fixed left-0 right-0 top-0 z-50 border-b border-slate-200/80 bg-white/85 backdrop-blur-xl dark:border-slate-800 dark:bg-slate-950/85">
                    <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
                        <Link href="/" className="flex items-center gap-3">
                            <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-2xl">
                                <img
                                    src="/logo.png"
                                    alt="POS Application Logo"
                                    className="h-14 w-14 object-contain"
                                />
                            </div>

                            <div>
                                <h1 className="text-lg font-bold tracking-tight">
                                    POS Application
                                </h1>
                                <p className="text-xs text-slate-500 dark:text-slate-400">
                                    Modern Point of Sale
                                </p>
                            </div>
                        </Link>

                        <div className="flex items-center gap-3">
                            <Link
                                href="/login"
                                className="rounded-xl border border-slate-200 bg-white px-5 py-2.5 text-sm font-semibold text-slate-700 transition hover:bg-slate-100 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
                            >
                                Sign in
                            </Link>

                            <Link
                                href="/login"
                                className="hidden rounded-xl bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-blue-600/25 transition hover:bg-blue-700 sm:inline-flex"
                            >
                                Get Started
                            </Link>
                        </div>
                    </div>
                </nav>

                {/* Hero Section */}
                <main className="pt-28">
                    <section className="relative overflow-hidden px-6 py-20">
                        <div className="absolute inset-0 -z-10">
                            <div className="absolute left-1/2 top-0 h-96 w-96 -translate-x-1/2 rounded-full bg-blue-500/10 blur-3xl" />
                            <div className="absolute right-0 top-40 h-72 w-72 rounded-full bg-indigo-500/10 blur-3xl" />
                        </div>

                        <div className="mx-auto grid max-w-7xl items-center gap-14 lg:grid-cols-2">
                            {/* Left Content */}
                            <div>
                                <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-blue-200 bg-blue-50 px-4 py-2 text-sm font-medium text-blue-700 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-300">
                                    <IconDeviceMobile size={16} />
                                    Responsive & Mobile-Friendly
                                </div>

                                <h2 className="max-w-2xl text-4xl font-extrabold leading-tight tracking-tight text-slate-950 dark:text-white md:text-6xl">
                                    Manage your shop with a modern{" "}
                                    <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                                        POS system
                                    </span>
                                </h2>

                                <p className="mt-6 max-w-xl text-base leading-8 text-slate-600 dark:text-slate-400 md:text-lg">
                                    A clean and reliable web-based point of sale
                                    application for small and medium-sized shops.
                                    Manage sales, products, customers, reports, and
                                    daily operations in one place.
                                </p>

                                <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                                    <Link
                                        href="/login"
                                        className="inline-flex items-center justify-center gap-2 rounded-2xl bg-blue-600 px-7 py-4 text-base font-semibold text-white shadow-xl shadow-blue-600/25 transition hover:bg-blue-700"
                                    >
                                        Start Using POS
                                        <IconArrowRight size={20} />
                                    </Link>

                                    <a
                                        href="#features"
                                        className="inline-flex items-center justify-center rounded-2xl border border-slate-200 bg-white px-7 py-4 text-base font-semibold text-slate-700 transition hover:bg-slate-100 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:hover:bg-slate-800"
                                    >
                                        View Features
                                    </a>
                                </div>

                                <div className="mt-10 grid gap-3 sm:grid-cols-2">
                                    {stats.map((item) => (
                                        <div
                                            key={item}
                                            className="flex items-center gap-3 text-sm font-medium text-slate-600 dark:text-slate-300"
                                        >
                                            <span className="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400">
                                                <IconCheck size={15} />
                                            </span>
                                            {item}
                                        </div>
                                    ))}
                                </div>
                            </div>

                            {/* Right Preview Card */}
                            <div className="relative">
                                <div className="rounded-[2rem] border border-slate-200 bg-white p-4 shadow-2xl shadow-slate-200/70 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30">
                                    <div className="rounded-[1.5rem] bg-slate-50 p-5 dark:bg-slate-950">
                                        <div className="mb-5 flex items-center justify-between">
                                            <div>
                                                <p className="text-sm text-slate-500 dark:text-slate-400">
                                                    Today&apos;s Sales
                                                </p>
                                                <h3 className="mt-1 text-3xl font-bold">
                                                    $2,845.50
                                                </h3>
                                            </div>

                                            <div className="rounded-2xl bg-emerald-100 px-3 py-1 text-sm font-semibold text-emerald-700 dark:bg-emerald-950 dark:text-emerald-400">
                                                +18.5%
                                            </div>
                                        </div>

                                        <div className="grid gap-4 sm:grid-cols-3">
                                            <div className="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                                <p className="text-xs text-slate-500">
                                                    Orders
                                                </p>
                                                <p className="mt-2 text-xl font-bold">
                                                    126
                                                </p>
                                            </div>

                                            <div className="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                                <p className="text-xs text-slate-500">
                                                    Products
                                                </p>
                                                <p className="mt-2 text-xl font-bold">
                                                    840
                                                </p>
                                            </div>

                                            <div className="rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                                <p className="text-xs text-slate-500">
                                                    Customers
                                                </p>
                                                <p className="mt-2 text-xl font-bold">
                                                    312
                                                </p>
                                            </div>
                                        </div>

                                        <div className="mt-5 rounded-2xl bg-white p-4 shadow-sm dark:bg-slate-900">
                                            <div className="mb-4 flex items-center justify-between">
                                                <p className="font-semibold">
                                                    Recent Transactions
                                                </p>
                                                <span className="text-sm text-blue-600">
                                                    View all
                                                </span>
                                            </div>

                                            <div className="space-y-3">
                                                {[
                                                    ["Invoice #1024", "$245.00"],
                                                    ["Invoice #1023", "$89.50"],
                                                    ["Invoice #1022", "$430.00"],
                                                ].map(([invoice, amount]) => (
                                                    <div
                                                        key={invoice}
                                                        className="flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3 dark:bg-slate-950"
                                                    >
                                                        <div className="flex items-center gap-3">
                                                            <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
                                                                <IconReceipt size={18} />
                                                            </div>

                                                            <div>
                                                                <p className="text-sm font-semibold">
                                                                    {invoice}
                                                                </p>
                                                                <p className="text-xs text-slate-500">
                                                                    Completed
                                                                </p>
                                                            </div>
                                                        </div>

                                                        <p className="text-sm font-bold">
                                                            {amount}
                                                        </p>
                                                    </div>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div className="absolute -bottom-6 -left-6 hidden rounded-2xl border border-slate-200 bg-white p-4 shadow-xl dark:border-slate-800 dark:bg-slate-900 md:block">
                                    <div className="flex items-center gap-3">
                                        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-100 text-emerald-600 dark:bg-emerald-950 dark:text-emerald-400">
                                            <IconShieldCheck size={22} />
                                        </div>
                                        <div>
                                            <p className="text-sm font-bold">
                                                Secure Access
                                            </p>
                                            <p className="text-xs text-slate-500">
                                                Protected POS dashboard
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>

                    {/* Features Section */}
                    <section id="features" className="px-6 py-20">
                        <div className="mx-auto max-w-7xl">
                            <div className="mx-auto max-w-2xl text-center">
                                <p className="text-sm font-semibold uppercase tracking-wide text-blue-600">
                                    Key Features
                                </p>
                                <h3 className="mt-3 text-3xl font-bold tracking-tight md:text-4xl">
                                    Everything you need to run your shop
                                </h3>
                                <p className="mt-4 text-slate-600 dark:text-slate-400">
                                    Built for daily business operations with a
                                    clean interface and practical features.
                                </p>
                            </div>

                            <div className="mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-4">
                                {features.map((feature) => {
                                    const Icon = feature.icon;

                                    return (
                                        <div
                                            key={feature.title}
                                            className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl dark:border-slate-800 dark:bg-slate-900"
                                        >
                                            <div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
                                                <Icon size={24} />
                                            </div>

                                            <h4 className="text-lg font-bold">
                                                {feature.title}
                                            </h4>

                                            <p className="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-400">
                                                {feature.description}
                                            </p>
                                        </div>
                                    );
                                })}
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </>
    );
}
