"use client";

import Link from "next/link";
import { useState } from "react";
import {
  ArrowRight,
  BrainCircuit,
  Compass,
  Gauge,
  Lightbulb,
  Rocket,
  Workflow,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { cn } from "@/lib/utils";

const features = [
  {
    id: "brain",
    title: "Business Brain",
    icon: BrainCircuit,
    color: "text-sky-400",
    ring: "group-hover:shadow-sky-500/20 group-hover:border-sky-500/30",
    text: "See what is happening in your business model and why those dynamics create or kill growth.",
  },
  {
    id: "opp",
    title: "Opportunity Engine",
    icon: Lightbulb,
    color: "text-indigo-400",
    ring: "group-hover:shadow-indigo-500/20 group-hover:border-indigo-500/30",
    text: "Prioritized plays with confidence, potential revenue, and immediate execution actions.",
  },
  {
    id: "strategy",
    title: "AI Strategy Room",
    icon: Workflow,
    color: "text-amber-400",
    ring: "group-hover:shadow-amber-500/20 group-hover:border-amber-500/30",
    text: "Ask your AI co-founder what to do next and get context-aware strategic guidance.",
  },
  {
    id: "comp",
    title: "Competitor Intelligence",
    icon: Compass,
    color: "text-sky-400",
    ring: "group-hover:shadow-sky-500/20 group-hover:border-sky-500/30",
    text: "Track where rivals are winning and where you can out-position and out-execute.",
  },
  {
    id: "score",
    title: "BrandLxft Score",
    icon: Gauge,
    color: "text-indigo-400",
    ring: "group-hover:shadow-indigo-500/20 group-hover:border-indigo-500/30",
    text: "A single health score covering positioning, visibility, momentum, and conversion readiness.",
  },
  {
    id: "action",
    title: "Action Center",
    icon: Rocket,
    color: "text-amber-400",
    ring: "group-hover:shadow-amber-500/20 group-hover:border-amber-500/30",
    text: "Every recommendation explains what to do now and the revenue potential it can unlock.",
  },
];

export function LandingFeatures() {
  const [active, setActive] = useState<string | null>(null);

  return (
    <>
      <section id="features" className="mx-auto max-w-6xl px-4 pb-12">
        <div className="mb-8 flex flex-wrap items-end justify-between gap-4">
          <div>
            <h2 className="text-2xl font-semibold md:text-3xl">Everything in one growth OS</h2>
            <p className="mt-2 text-slate-400">Hover a module to explore.</p>
          </div>
        </div>
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => {
            const Icon = feature.icon;
            const isActive = active === feature.id;
            return (
              <Card
                key={feature.id}
                className={cn(
                  "group card-glow cursor-default border-slate-800/80 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl",
                  feature.ring,
                  isActive && "-translate-y-1 shadow-xl",
                )}
                onMouseEnter={() => setActive(feature.id)}
                onMouseLeave={() => setActive(null)}
              >
                <CardHeader>
                  <div
                    className={cn(
                      "mb-2 flex h-10 w-10 items-center justify-center rounded-lg bg-slate-800/80 transition-transform duration-300",
                      (isActive || active === null) && "group-hover:scale-110",
                      isActive && "scale-110",
                    )}
                  >
                    <Icon className={cn("h-5 w-5", feature.color)} />
                  </div>
                  <CardTitle className="transition-colors group-hover:text-sky-100">{feature.title}</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="text-sm leading-relaxed text-slate-400">{feature.text}</p>
                </CardContent>
              </Card>
            );
          })}
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-12">
        <div className="grid gap-4 md:grid-cols-2">
          <Card className="group overflow-hidden border-sky-500/20 bg-gradient-to-br from-sky-500/10 via-slate-900/50 to-indigo-500/10 transition-all duration-500 hover:border-sky-500/40 hover:shadow-lg hover:shadow-sky-500/10">
            <CardContent className="relative flex flex-col justify-between gap-4 p-8 min-h-[200px]">
              <div>
                <p className="text-lg font-medium text-slate-100">
                  What is happening →{" "}
                  <span className="text-gradient-brand">Why it matters</span> → What to do next
                </p>
                <p className="mt-2 text-sm text-slate-400">
                  Interactive walkthrough of how BrandLxft turns market noise into ranked actions.
                </p>
              </div>
              <Link href="/why-it-matters">
                <Button variant="outline" className="w-fit gap-2 border-sky-500/30 bg-slate-950/50 hover:bg-sky-500/10">
                  Explore why it matters
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Button>
              </Link>
            </CardContent>
          </Card>

          <Card className="group overflow-hidden border-indigo-500/20 bg-gradient-to-br from-indigo-500/10 via-slate-900/50 to-fuchsia-500/10 transition-all duration-500 hover:border-indigo-500/40 hover:shadow-lg hover:shadow-indigo-500/10">
            <CardContent className="relative flex flex-col justify-between gap-4 p-8 min-h-[200px]">
              <div>
                <p className="text-lg font-medium text-slate-100">
                  What makes us <span className="text-gradient-brand">different</span>
                </p>
                <p className="mt-2 text-sm text-slate-400">
                  Learn your business, the roles you need to succeed, website benchmarks, and revenue opportunities —
                  then pick how BrandLxft assists you, even as an AI Leader boss.
                </p>
              </div>
              <Link href="/what-makes-us-different">
                <Button variant="outline" className="w-fit gap-2 border-indigo-500/30 bg-slate-950/50 hover:bg-indigo-500/10">
                  See what makes us different
                  <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
                </Button>
              </Link>
            </CardContent>
          </Card>
        </div>
      </section>
    </>
  );
}