import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, ReceiptText, ShieldCheck, Wallet } from "lucide-react";

import { Button } from "@/components/ui/button";
import logoAsset from "@/assets/logo-smn.png.asset.json";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: "Catatan Duit SMN — Kas Operasional & Kas Besar" },
      {
        name: "description",
        content:
          "Catat pemasukan dan pengeluaran petty cash operasional, pantau saldo, dan kelola kas besar perusahaan dalam satu aplikasi.",
      },
      { property: "og:title", content: "Catatan Duit SMN — Kas Operasional & Kas Besar" },
      {
        property: "og:description",
        content:
          "Pencatatan duit pengeluaran dan pemasukan tanpa ribet dan akurat, lengkap dengan unggah invoice otomatis.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: Landing,
});

function Landing() {
  return (
    <div className="min-h-screen bg-background">
      <header className="mx-auto flex max-w-3xl items-center justify-between gap-3 px-4 py-4">
        <img
          src={logoAsset.url}
          alt="Logo Swadaya Muda Network"
          className="h-9 w-auto object-contain sm:h-10"
        />
        <Button asChild size="sm">
          <Link to="/auth">Masuk</Link>
        </Button>
      </header>

      <main className="mx-auto max-w-3xl px-4 pb-16">
        <section className="rounded-3xl bg-brand-gradient p-6 text-primary-foreground shadow-sm sm:p-8">
          <h1 className="text-2xl font-semibold leading-snug sm:text-3xl">
            Pencatatan duit pengeluaran dan pemasukan tanpa ribet dan akurat
          </h1>
          <ul className="mt-4 space-y-2 text-sm opacity-90">
            <li className="flex items-start gap-2">
              <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary-foreground" />
              Unggah invoice image otomatis dengan report dashboard transaksi
            </li>
            <li className="flex items-start gap-2">
              <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary-foreground" />
              Dua akses: pengguna operasional (petty cash) dan administrator (kas besar)
            </li>
          </ul>
          <Button asChild size="lg" variant="secondary" className="mt-6 gap-2">
            <Link to="/auth">
              Mulai sekarang <ArrowRight className="size-4" />
            </Link>
          </Button>
        </section>

        <section className="mt-6 grid gap-3 sm:grid-cols-3">
          <Fitur
            icon={<Wallet className="size-5" />}
            judul="Saldo petty cash"
            isi="Saldo operasional terpantau dari topup kas besar, pemasukan, dan pengeluaran harian."
          />
          <Fitur
            icon={<ReceiptText className="size-5" />}
            judul="Bukti & invoice"
            isi="Unggah foto atau PDF bukti transfer, isi form otomatis dari gambar invoice."
          />
          <Fitur
            icon={<ShieldCheck className="size-5" />}
            judul="Akses administrator"
            isi="Pembelian barang, topup petty cash, dan pembayaran project tercatat terpisah."
          />
        </section>
      </main>
    </div>
  );
}

function Fitur({ icon, judul, isi }: { icon: React.ReactNode; judul: string; isi: string }) {
  return (
    <div className="rounded-2xl border border-border/70 bg-card p-4">
      <span className="flex size-9 items-center justify-center rounded-full bg-accent text-primary">
        {icon}
      </span>
      <p className="mt-3 text-sm font-semibold">{judul}</p>
      <p className="mt-1 text-xs text-muted-foreground">{isi}</p>
    </div>
  );
}