"use client";

import Link from "next/link";
import Image from "next/image";
import { ArrowRight, Play } from "lucide-react";

export default function DemoLandingPage() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-[#FAFAF7] px-6 relative overflow-hidden">
      {/* Decorative background */}
      <div className="absolute top-20 right-[-10%] w-[500px] h-[500px] rounded-full bg-[#6B8F71]/[0.04] blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 left-[-5%] w-[300px] h-[300px] rounded-full bg-[#C4856A]/[0.03] blur-3xl pointer-events-none" />

      <div className="relative mx-auto max-w-lg text-center">
        {/* Logo */}
        <Link href="/" className="inline-flex items-center gap-2.5 mb-10">
          <Image
            src="/logo.png"
            alt="honeyDue"
            width={36}
            height={36}
            className="rounded-lg"
          />
          <span className="font-heading text-2xl font-bold tracking-tight text-[#2D3436]">
            honeyDue
          </span>
        </Link>

        {/* Hero */}
        <h1 className="font-heading text-4xl font-bold tracking-tight text-[#2D3436]">
          See honeyDue in action
        </h1>
        <p className="mt-4 text-lg text-[#8A8F87] leading-relaxed">
          Explore the full app with sample data. No account needed —
          just click and start exploring.
        </p>

        {/* Actions */}
        <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Link
            href="/demo/app"
            className="group inline-flex items-center gap-2.5 rounded-full bg-[#C4856A] px-8 py-4 text-base font-semibold text-white shadow-lg shadow-[#C4856A]/20 hover:bg-[#A86B52] transition-all"
          >
            <Play className="size-4" />
            Launch Demo
            <ArrowRight className="size-4 transition-transform group-hover:translate-x-0.5" />
          </Link>
        </div>

        {/* Login link */}
        <p className="mt-8 text-sm text-[#9A9E97]">
          Already have an account?{" "}
          <Link href="/login" className="text-[#6B8F71] font-medium hover:underline">
            Sign In
          </Link>
        </p>
      </div>
    </div>
  );
}
