"use client";

import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { MarketingNav } from "@/components/layout/marketing-nav";
import { LandingFeatures } from "@/components/marketing/landing-features";
import { Button } from "@/components/ui/button";

export default function LandingPage() {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <MarketingNav />
      <section className="relative mx-auto max-w-6xl overflow-hidden px-4 py-20">
        <div className="pointer-events-none absolute -left-20 top-10 h-72 w-72 animate-pulse-soft rounded-full bg-sky-500/10 blur-3xl" />
        <div className="pointer-events-none absolute -right-10 top-0 h-56 w-56 animate-float rounded-full bg-indigo-500/10 blur-3xl" />
        <div className="relative">
          <p className="mb-4 inline-flex rounded-full border border-sky-500/30 bg-sky-500/10 px-3 py-1 text-xs text-sky-300">
            BrandLxft MVP
          </p>
          <h1 className="max-w-3xl text-4xl font-bold leading-tight md:text-6xl">
            Your AI Co-Founder for{" "}
            <span className="text-gradient-brand">Growth</span>
          </h1>
          <p className="mt-6 max-w-2xl text-lg leading-relaxed text-slate-300">
            BrandLxft learns your business, studies your market, finds revenue opportunities, monitors competitors,
            and tells you exactly what to do next.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <Link href="/signup">
              <Button size="lg" className="gap-2 shadow-lg shadow-sky-500/20">
                Build My Business Brain
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
            <Link href="/demo">
              <Button variant="outline" size="lg">
                Try a live demo
              </Button>
            </Link>
            <Link href="/login">
              <Button variant="ghost" size="lg">
                I already have an account
              </Button>
            </Link>
          </div>
        </div>
      </section>

      <LandingFeatures />
    </div>
  );
}