import Link from "next/link";
import { ArrowRight, LayoutDashboard, Users, ShieldCheck } from "lucide-react";

export const metadata = {
  title: "Live demo",
  description: "Explore the Trackopia merchant dashboard with sample data — no signup, no install.",
};

const INSTALL_URL = "https://apps.shopify.com/";

export default function DemoPage() {
  return (
    <div className="bg-white">
      <section className="border-b border-gray-200 bg-gradient-to-b from-[color-mix(in_srgb,var(--brand)_8%,white)] to-white">
        <div className="mx-auto max-w-5xl px-6 py-20 text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3.5 py-1.5 text-xs font-semibold uppercase tracking-wider text-[var(--brand)] shadow-sm">
            <span className="h-1.5 w-1.5 rounded-full bg-[var(--brand-accent,#E0A82E)]" /> Live demo
          </span>
          <h1 className="mx-auto mt-6 max-w-3xl text-balance text-4xl font-extrabold leading-[1.05] tracking-tight text-gray-900 sm:text-5xl">
            Explore Trackopia with <span className="text-[var(--brand)]">sample data</span>
          </h1>
          <p className="mx-auto mt-5 max-w-2xl text-lg leading-relaxed text-gray-600">
            Open the full merchant dashboard, pre-filled with demo affiliates, campaigns, orders and
            commissions. Nothing to set up — it&rsquo;s read-only, so click around freely.
          </p>
          <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
            <Link
              href="/admin?demo=1"
              className="inline-flex items-center gap-2 rounded-xl bg-[var(--brand)] px-7 py-3.5 text-sm font-semibold text-white shadow-sm transition hover:opacity-90"
            >
              Open the demo dashboard <ArrowRight className="h-4 w-4" />
            </Link>
            <a
              href={INSTALL_URL}
              className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-7 py-3.5 text-sm font-semibold text-gray-800 transition hover:bg-gray-50"
            >
              Add to Shopify
            </a>
          </div>
          <p className="mt-4 text-xs text-gray-500">No signup · No install · Read-only sample data</p>
        </div>
      </section>

      <section className="py-16">
        <div className="mx-auto grid max-w-5xl gap-5 px-6 sm:grid-cols-3">
          {[
            { icon: LayoutDashboard, title: "Merchant dashboard", desc: "Revenue, commissions, conversions, campaigns, affiliates, and payouts." },
            { icon: Users, title: "Affiliate experience", desc: "See the branded signup and the self-serve portal affiliates get." },
            { icon: ShieldCheck, title: "Read-only & safe", desc: "The demo is view-only — explore every screen without changing anything." },
          ].map(({ icon: Icon, title, desc }) => (
            <div key={title} className="rounded-2xl border border-gray-200 bg-white p-6">
              <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--brand-50)] text-[var(--brand)]">
                <Icon className="h-5 w-5" />
              </div>
              <h3 className="mt-4 font-semibold text-gray-900">{title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-gray-600">{desc}</p>
              {title === "Affiliate experience" && (
                <Link href="/signup" className="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--brand)] hover:underline">
                  Open signup <ArrowRight className="h-3.5 w-3.5" />
                </Link>
              )}
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}