import { IconCircleCheckFilled } from "@tabler/icons-react";

import type { Dictionary } from "@/app/[lang]/dictionaries";
import { Terminal } from "@/components/animations/terminal";
import { TypewriterCycle } from "@/components/animations/typewriter-effect";
import { Container } from "@/components/ui/container";

// Cycled in the MCP title — the AI clients that can plug into the data.
const AI_MODELS = [
  "Claude",
  "GPT",
  "Gemini",
  "Kimi",
  "Mistral",
  "Llama",
  "Grok",
  "DeepSeek",
];

export const MCP = ({ dict }: { dict: Dictionary["mcp"] }) => {
  return (
    <section
      id="mcp"
      className="relative overflow-hidden py-10 md:py-20 lg:py-32"
    >
      {/* ambient gradient glow behind the terminal spotlight */}
      <div aria-hidden className="pointer-events-none absolute inset-0 -z-10">
        <div className="bg-brand-orange/10 dark:bg-brand-orange/15 absolute top-1/2 right-0 h-[28rem] w-[28rem] translate-x-1/4 -translate-y-1/2 rounded-full blur-3xl" />
        <div className="bg-brand-blue/10 dark:bg-brand-blue/10 absolute top-1/3 left-0 h-72 w-72 -translate-x-1/4 rounded-full blur-3xl" />
      </div>

      <Container>
        <div className="grid grid-cols-1 items-center gap-10 lg:grid-cols-2 lg:gap-16">
          {/* Left: copy + checklist */}
          <div className="flex flex-col">
            <span className="eyebrow">
              <span className="bg-gradient-brand size-1.5 rounded-full" />
              {dict.eyebrow}
            </span>
            <h2 className="font-display text-ink-1 mt-4 text-[clamp(30px,4.4vw,52px)] leading-[1.04] font-extrabold tracking-[-0.03em]">
              {/* line 1: "Plug {AI}" — the cycled word sits at the line end,
                  so its changing width never shifts the rest or the terminal */}
              <span className="flex items-center gap-[0.25em]">
                {dict.title.split("Claude")[0].trim()}
                <TypewriterCycle
                  words={AI_MODELS}
                  className="text-gradient-brand"
                />
              </span>
              <span className="block">
                {dict.title.split("Claude")[1].trim()}{" "}
                <span className="text-gradient-brand">{dict.title_grad}</span>
              </span>
            </h2>
            <p className="text-ink-3 mt-4 max-w-[460px] text-[clamp(16px,1.5vw,19px)] leading-relaxed">
              {dict.subtitle}
            </p>

            <ul className="mt-8 flex flex-col gap-4">
              {dict.bullets.map((bullet) => (
                <li key={bullet} className="flex items-start gap-3">
                  <IconCircleCheckFilled className="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" />
                  <span className="text-base text-neutral-700 dark:text-neutral-300">
                    {bullet}
                  </span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right: terminal spotlight — an MCP / AI-agent SEO session */}
          <div className="w-full">
            <Terminal
              username="seo-insight"
              className="max-w-full px-0"
              typingSpeed={45}
              delayBetweenCommands={1000}
              initialDelay={500}
              commands={[
                "claude mcp list",
                "> Find my SEO quick-wins (positions 11-20)",
                '> Generate a brief for "seo mcp tool"',
              ]}
              outputs={{
                0: [
                  "Checking MCP server health...",
                  "seo-insight: connected ✓ (12 tools, 3 resources)",
                ],
                1: [
                  "3 quick-wins found (positions 11-20):",
                  "  • seo mcp tool          : pos. 12  · 880 vol/mo",
                  "  • seo mcp server        : pos. 14  · 320 vol/mo",
                  "  • seo api for agents    : pos. 18  · 210 vol/mo",
                ],
                2: [
                  'Brief generated for "seo mcp tool" ✓',
                  "  H1 + 6 sections, 8 entities, 12 PAA questions",
                  "  → saved to /briefs/seo-mcp-tool.md",
                ],
              }}
            />
          </div>
        </div>
      </Container>
    </section>
  );
};