"use client";

import Link from "next/link";
import { useState } from "react";
import {
  ArrowRight,
  Check,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type SectionId = "learn" | "website" | "different" | "roles";

const sections: Array<{
  id: SectionId;
  label: string;
  headline: string;
  summary: string;
  bullets: string[];
}> = [
  {
    id: "learn",
    label: "Learn & grow",
    headline: "We learn your business, social platforms, and the roles you need to succeed",
    summary:
      "Business Brain onboarding captures your industry, competitors, and goals — then maps the roles successful businesses in your space rely on. Social analysis scores visibility and who buyers pick vs. rivals. Opportunities rank by urgency, estimated revenue, and which role should own each play.",
    bullets: [
      "Industry team blueprint: 10+ roles across leadership, revenue, growth, and ops.",
      "Priority hire and missing roles tied to your biggest challenge and today's opportunities.",
      "Website and social channels analyzed together — every priority shows estimated revenue.",
    ],
  },
  {
    id: "website",
    label: "Website upgrades",
    headline: "Update your website to compete with top businesses in your industry",
    summary:
      "Website aesthetic analysis benchmarks your site against top performers in your industry. BrandLxft prepares the upgrade, saves it as a draft on your website host, and updates your live site for you — but only after you approve the draft.",
    bullets: [
      "Industry benchmark score vs. top sellers — home services, SaaS, med spa, dental, and more.",
      "Seven dimensions scored: typography, layout, trust signals, mobile, conversion, and more.",
      "BrandLxft drafts the upgrade on WordPress or your connected host — you review before anything goes live.",
      "After you approve the draft, BrandLxft publishes the update to your website for you.",
      "Recommendations preserve your brand — adopt what top sellers do without cloning competitors.",
    ],
  },
  {
    id: "different",
    label: "How we're different",
    headline: "One co-founder loop — not another tool in the stack",
    summary:
      "Most business AI solves one slice: assistants answer prompts, CRM AI needs pipeline data, content tools generate copy, social tools report engagement. BrandLxft connects learn → find revenue → assist execution in one place.",
    bullets: [
      "Learns your business once — not a blank chat every session.",
      "Social + website analysis wired to ranked opportunities and Role Agents.",
      "Industry role blueprint: learn who you need to hire and what's missing.",
      "Federal work guide and live SAM.gov bids for trades.",
      "Strategy Room ML for messaging; receipts on every agent run.",
    ],
  },
  {
    id: "roles",
    label: "Your roles",
    headline: "We learn the roles you need — then you pick how to run them",
    summary:
      "BrandLxft maps your industry to the roles that drive revenue — who to hire first, what's missing on your team, and which digital roles can run as agents today. Set your title, turn on AI Leader when you want a boss, or run Role Agents for marketing, sales, reputation, and ops.",
    bullets: [
      "Team blueprint shows current team vs. gaps blocking growth.",
      "Today's top opportunity links to the role that should own it — hire or agent.",
      "Your title · AI Leader · Marketing Manager · SDR · Reputation Manager — you choose what runs.",
    ],
  },
];

export function WhatMakesUsDifferentInteractive() {
  const [active, setActive] = useState<SectionId>("learn");
  const section = sections.find((s) => s.id === active)!;

  return (
    <>
      <section className="relative mx-auto max-w-6xl overflow-hidden px-4 py-14 md:py-16">
        <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(14,165,233,0.12),transparent_55%)]" />
        <div className="relative max-w-3xl">
          <p className="mb-2 text-sm uppercase tracking-wide text-sky-400">What makes us different</p>
          <h1 className="text-3xl font-bold leading-tight md:text-4xl">
            Learn your business. Upgrade your website.{" "}
            <span className="text-gradient-brand">Grow revenue.</span>
          </h1>
          <p className="mt-4 text-slate-400">
            BrandLxft learns how you operate online, the roles you need to be more successful, benchmarks your site
            against top businesses in your industry, drafts website upgrades for your approval, then updates your live
            site for you — plus ranked revenue opportunities and Role Agents you pick, including an optional AI Leader
            boss.
          </p>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-14">
        <div className="mb-5 flex flex-wrap gap-2">
          {sections.map((s) => (
            <button
              key={s.id}
              type="button"
              onClick={() => setActive(s.id)}
              className={cn(
                "rounded-full border px-4 py-2 text-sm transition-all duration-300",
                active === s.id
                  ? "border-sky-500/50 bg-sky-500/15 text-sky-200 shadow-lg shadow-sky-500/10"
                  : "border-slate-700 text-slate-400 hover:border-slate-600 hover:text-slate-200",
              )}
            >
              {s.label}
            </button>
          ))}
        </div>

        <Card className="overflow-hidden border-slate-700/80">
          <CardContent className="grid gap-6 p-6 md:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] md:p-8">
            <div>
              <h2 className="text-xl font-semibold text-slate-100">{section.headline}</h2>
              <p className="mt-3 text-sm text-slate-400">{section.summary}</p>
              <ul className="mt-5 space-y-2">
                {section.bullets.map((bullet) => (
                  <li key={bullet} className="flex gap-2 text-sm text-slate-400">
                    <Check className="mt-0.5 h-4 w-4 shrink-0 text-emerald-400" />
                    {bullet}
                  </li>
                ))}
              </ul>
            </div>

            <div className="rounded-xl border border-slate-800 bg-slate-950/50 p-5">
              {active === "website" ? (
                <>
                  <p className="text-xs uppercase tracking-wide text-violet-400">How website updates work</p>
                  <ol className="mt-3 space-y-2 text-sm text-slate-400">
                    <li>
                      <span className="font-medium text-slate-300">1. Analyze</span> — score your site vs. industry
                      top performers.
                    </li>
                    <li>
                      <span className="font-medium text-slate-300">2. Recommend</span> — prioritized upgrades that
                      preserve your brand.
                    </li>
                    <li>
                      <span className="font-medium text-slate-300">3. Draft</span> — BrandLxft saves the upgrade as a
                      draft on WordPress or your website host.
                    </li>
                    <li>
                      <span className="font-medium text-slate-300">4. Approve</span> — you review the draft upgrade.
                    </li>
                    <li>
                      <span className="font-medium text-slate-300">5. Update</span> — after your approval, BrandLxft
                      updates your live website for you.
                    </li>
                  </ol>
                  <p className="mt-4 text-xs text-slate-500">Profile → Website aesthetic analysis · Settings → WordPress</p>
                </>
              ) : active === "learn" ? (
                <>
                  <p className="text-xs uppercase tracking-wide text-slate-500">Where it lives</p>
                  <p className="mt-2 text-sm text-slate-300">
                    Onboarding · Dashboard · Profile → Team blueprint & social analysis · Opportunities
                  </p>
                  <p className="mt-4 text-sm text-slate-400">Roles → platforms → revenue</p>
                </>
              ) : active === "roles" ? (
                <>
                  <p className="text-xs uppercase tracking-wide text-slate-500">What we learn about your team</p>
                  <p className="mt-2 text-sm text-slate-400">
                    First hire · next hire · priority hire · missing roles · which role owns today&apos;s opportunity
                  </p>
                  <p className="mt-4 text-xs text-slate-500">
                    Profile → Team blueprint · Settings → Your role · /agents
                  </p>
                </>
              ) : (
                <>
                  <p className="text-xs uppercase tracking-wide text-slate-500">The loop</p>
                  <p className="mt-2 text-sm text-slate-300">
                    Learn business & platforms → benchmark website vs. industry leaders → rank opportunities → pick roles
                    to execute
                  </p>
                  <div className="mt-4 grid grid-cols-2 gap-2 text-xs text-slate-500">
                    <span className="rounded-lg border border-slate-800 p-2">Assistants · one prompt at a time</span>
                    <span className="rounded-lg border border-sky-500/20 bg-sky-500/5 p-2 text-sky-300">
                      BrandLxft · full co-founder loop
                    </span>
                  </div>
                </>
              )}

              <div className="mt-6 flex flex-wrap gap-2">
                <Link href="/signup">
                  <Button size="sm">Build My Business Brain</Button>
                </Link>
                <Link href="/demo">
                  <Button variant="outline" size="sm">
                    Try a demo
                  </Button>
                </Link>
              </div>
            </div>
          </CardContent>
        </Card>

        <div className="mt-8 grid gap-3 sm:grid-cols-3">
          <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
            <p className="text-sm font-medium text-slate-200">Learn & grow</p>
            <p className="mt-2 text-xs text-slate-400">
              Business Brain, social analysis, ranked opportunities with dollar scores.
            </p>
          </div>
          <div className="rounded-xl border border-violet-500/20 bg-violet-500/5 p-4">
            <p className="text-sm font-medium text-slate-200">Roles you need</p>
            <p className="mt-2 text-xs text-slate-400">
              Industry blueprint, priority hire, missing roles — linked to what pays today.
            </p>
          </div>
          <div className="rounded-xl border border-sky-500/20 bg-sky-500/5 p-4">
            <p className="text-sm font-medium text-slate-200">Roles you run</p>
            <p className="mt-2 text-xs text-slate-400">
              Your title, AI Leader boss, or Role Agents — with receipts you approve.
            </p>
          </div>
        </div>
      </section>

      <section className="mx-auto max-w-6xl px-4 pb-14">
        <Card className="border-indigo-500/25 bg-gradient-to-br from-indigo-500/10 to-slate-900/50">
          <CardContent className="flex flex-wrap items-center justify-between gap-4 p-6">
            <div>
              <h2 className="text-lg font-semibold">See it on a demo</h2>
              <p className="mt-1 max-w-lg text-sm text-slate-400">
                Website analysis, social intel, ranked opportunities, and Role Agents — try Launchpad or a trades demo.
              </p>
            </div>
            <Link href="/demo">
              <Button className="gap-2">
                Browse demos
                <ArrowRight className="h-4 w-4" />
              </Button>
            </Link>
          </CardContent>
        </Card>
      </section>
    </>
  );
}