"use client";

import Link from "next/link";
import { useState } from "react";
import {
  ArrowRight,
  BrainCircuit,
  Landmark,
  Rocket,
  Sparkles,
  Target,
  TrendingUp,
  Users,
  Zap,
} from "lucide-react";
import { MarketingNav } from "@/components/layout/marketing-nav";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const stages = [
  {
    id: "idea",
    label: "Pre-revenue",
    title: "Validate demand before you burn runway",
    detail: "BrandLxft maps competitors, surfaces buyer signals, and ranks what to test first — not another blank Notion doc.",
    metric: "3 priorities",
    metricSub: "ranked by revenue potential",
  },
  {
    id: "traction",
    label: "$5K–$50K/mo",
    title: "Turn noise into a weekly execution plan",
    detail: "Opportunity Engine + AI Strategy Room tell you what is happening, why it matters, and what to do today.",
    metric: "$48K+",
    metricSub: "pipeline value detected (demo avg)",
  },
  {
    id: "scale",
    label: "Growing team",
    title: "Role Agents without hiring a full stack",
    detail: "Marketing, sales, and ops tasks run with receipts — you approve before anything goes live.",
    metric: "10 roles",
    metricSub: "automated in demo workspaces",
  },
];

const paths = [
  { icon: Rocket, title: "SaaS & tech startups", href: "/demo?filter=startup", cta: "Launchpad & Stackline demos" },
  { icon: Landmark, title: "Trades & home services", href: "/opportunities", cta: "Federal work guide" },
  { icon: Users, title: "Local services", href: "/why-it-matters", cta: "Why it matters" },
];

export default function StartupPage() {
  const [stage, setStage] = useState(stages[0].id);
  const active = stages.find((s) => s.id === stage)!;

  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 inset-0 bg-[radial-gradient(ellipse_at_top,rgba(99,102,241,0.15),transparent_50%)]" />
        <div className="relative grid gap-12 lg:grid-cols-2 lg:items-center">
          <div>
            <p className="mb-4 inline-flex items-center gap-2 rounded-full border border-indigo-500/30 bg-indigo-500/10 px-3 py-1 text-xs text-indigo-300">
              <Sparkles className="h-3.5 w-3.5" />
              For founders & small teams
            </p>
            <h1 className="text-4xl font-bold leading-tight md:text-5xl">
              Your startup&apos;s{" "}
              <span className="text-gradient-brand">AI co-founder</span>
            </h1>
            <p className="mt-5 text-lg leading-relaxed text-slate-300">
              No MBA required. BrandLxft learns your business in minutes, finds revenue you&apos;re missing, and tells
              you the highest-value move today.
            </p>
            <div className="mt-8 flex flex-wrap gap-3">
              <Link href="/signup">
                <Button size="lg" className="gap-2 shadow-lg shadow-indigo-500/20">
                  Start free — build your Business Brain
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </Link>
              <Link href="/onboarding">
                <Button variant="outline" size="lg">
                  Jump to onboarding
                </Button>
              </Link>
            </div>
          </div>

          <Card className="border-slate-700/80 bg-slate-900/80 backdrop-blur">
            <CardContent className="p-6">
              <p className="mb-4 text-xs uppercase tracking-widest text-slate-500">Where are you today?</p>
              <div className="flex flex-wrap gap-2">
                {stages.map((s) => (
                  <button
                    key={s.id}
                    type="button"
                    onClick={() => setStage(s.id)}
                    className={cn(
                      "rounded-full border px-3 py-1.5 text-sm transition-all duration-300",
                      stage === s.id
                        ? "border-indigo-500/50 bg-indigo-500/15 text-indigo-200"
                        : "border-slate-700 text-slate-400 hover:border-slate-600 hover:text-slate-200",
                    )}
                  >
                    {s.label}
                  </button>
                ))}
              </div>
              <div key={stage} className="mt-6 animate-fade-in-up rounded-xl border border-slate-800 bg-slate-950/80 p-5">
                <div className="flex items-start gap-3">
                  <Target className="mt-0.5 h-5 w-5 shrink-0 text-indigo-400" />
                  <div>
                    <p className="font-semibold text-slate-100">{active.title}</p>
                    <p className="mt-2 text-sm text-slate-400">{active.detail}</p>
                  </div>
                </div>
                <div className="mt-4 flex items-baseline gap-2 border-t border-slate-800 pt-4">
                  <span className="text-2xl font-bold text-indigo-300">{active.metric}</span>
                  <span className="text-xs text-slate-500">{active.metricSub}</span>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </section>

      <section className="border-y border-slate-800/80 bg-slate-900/30 py-16">
        <div className="mx-auto max-w-6xl px-4">
          <h2 className="text-center text-2xl font-semibold">Launch in 3 steps</h2>
          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {[
              { step: 1, icon: BrainCircuit, title: "Build your Business Brain", text: "5-minute onboarding — industry, goals, competitors.", href: "/onboarding" },
              { step: 2, icon: Zap, title: "Connect SAM.gov (optional)", text: "Live federal bids for trades; platform key works on signup.", href: "/settings#sam-gov-api" },
              { step: 3, icon: TrendingUp, title: "Execute top priority", text: "Dashboard + Strategy Room rank what pays first.", href: "/dashboard" },
            ].map((item) => {
              const Icon = item.icon;
              return (
                <Link
                  key={item.step}
                  href={item.href}
                  className="group rounded-2xl border border-slate-800 bg-slate-950/50 p-6 transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/30 hover:shadow-lg hover:shadow-indigo-500/10"
                >
                  <span className="text-xs font-mono text-slate-600">0{item.step}</span>
                  <Icon className="mt-3 h-6 w-6 text-indigo-400 transition-transform group-hover:scale-110" />
                  <h3 className="mt-3 font-semibold text-slate-100">{item.title}</h3>
                  <p className="mt-2 text-sm text-slate-400">{item.text}</p>
                  <span className="mt-4 inline-flex items-center gap-1 text-sm text-indigo-400 opacity-0 transition-opacity group-hover:opacity-100">
                    Go <ArrowRight className="h-3.5 w-3.5" />
                  </span>
                </Link>
              );
            })}
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 py-16">
        <h2 className="mb-8 text-center text-2xl font-semibold">Pick your path</h2>
        <div className="grid gap-4 md:grid-cols-3">
          {paths.map((p) => {
            const Icon = p.icon;
            return (
              <Link key={p.title} href={p.href}>
                <Card className="h-full border-slate-800 transition-all duration-300 hover:border-sky-500/30 hover:shadow-lg hover:shadow-sky-500/10">
                  <CardContent className="flex h-full flex-col p-6">
                    <Icon className="h-6 w-6 text-sky-400" />
                    <h3 className="mt-3 font-semibold">{p.title}</h3>
                    <span className="mt-auto pt-4 text-sm text-sky-400">{p.cta} →</span>
                  </CardContent>
                </Card>
              </Link>
            );
          })}
        </div>
      </section>

      <section className="mx-auto max-w-4xl px-4 pb-24 text-center">
        <h2 className="text-3xl font-semibold">Ready to stop guessing?</h2>
        <p className="mx-auto mt-3 max-w-lg text-slate-400">
          Join BrandLxft — your AI co-founder for growth, opportunities, and execution.
        </p>
        <Link href="/signup" className="mt-8 inline-block">
          <Button size="lg" className="gap-2 px-8">
            Create free account
            <ArrowRight className="h-4 w-4" />
          </Button>
        </Link>
      </section>
    </div>
  );
}