import { Metadata } from 'next';
import {
  ArrowRight,
  Braces,
  Chrome,
  Code2,
  ExternalLink,
  Flame,
  Github,
  Package,
  TerminalSquare,
} from 'lucide-react';

export const metadata: Metadata = {
  title: 'Developer Ecosystem | QR Master',
  description:
    'Create QR codes with QR Master in VS Code, Chrome, Firefox, Python, Node.js, GitHub Actions, and your own workflows.',
  alternates: {
    canonical: 'https://www.qrmaster.net/developers',
  },
};

const tools = [
  {
    title: 'VS Code / Cursor / Windsurf Extension',
    icon: Code2,
    description:
      'Generate QR codes directly in VS Code, Cursor, VSCodium, and Windsurf preview tabs.',
    command: 'qrmaster.generate',
    linkLabel: 'Open VSX Registry',
    url: 'https://open-vsx.org/extension/qrmaster/qrmaster-generator',
  },
  {
    title: 'GitHub Action Marketplace',
    icon: Braces,
    description:
      'Automate QR code generation in GitHub Actions workflows and build artifacts.',
    command: 'uses: knuthtimo-lab/qrmaster-cli@v1.0.0',
    linkLabel: 'GitHub Marketplace Action',
    url: 'https://github.com/marketplace/actions/qr-master-code-generator',
  },
  {
    title: 'Node.js CLI & npm Package',
    icon: Package,
    description:
      'Generate vector SVG and PNG QR codes from any terminal or Node.js application.',
    command: 'npx qrmaster-cli generate "https://www.qrmaster.net"',
    linkLabel: 'View on npm',
    url: 'https://www.npmjs.com/package/qrmaster-cli',
  },
  {
    title: 'PyPI Python Package',
    icon: TerminalSquare,
    description:
      'Use QR Master from Python scripts and Django or Flask applications.',
    command: 'pip install qrmaster',
    linkLabel: 'View on PyPI',
    url: 'https://pypi.org/project/qrmaster/',
  },
  {
    title: 'GitHub Repository',
    icon: Github,
    description:
      'Explore the source, clone the CLI, open issues, and build on QR Master.',
    command: 'git clone https://github.com/knuthtimo-lab/qrmaster-cli.git',
    linkLabel: 'Explore on GitHub',
    url: 'https://github.com/knuthtimo-lab/qrmaster-cli',
  },
  {
    title: 'Chrome Web Store Extension',
    icon: Chrome,
    description:
      'Generate instant QR codes for any webpage, active tab, selected text, Wi-Fi, or contact card in Chrome.',
    command: 'Item ID: cieplgkdeempmjknljhabookhfhejgno',
    linkLabel: 'Chrome Web Store',
    url: 'https://chromewebstore.google.com/detail/cieplgkdeempmjknljhabookhfhejgno',
  },
  {
    title: 'Firefox Add-ons Extension',
    icon: Flame,
    description:
      'Generate instant QR codes for any webpage, active tab, selected text, Wi-Fi, or contact card in Firefox.',
    command: 'Add-on ID: qr-master-qr-generator',
    linkLabel: 'Firefox Add-ons',
    url: 'https://addons.mozilla.org/addon/qr-master-qr-generator/',
  },
];

export default function DevelopersPage() {
  return (
    <div className="min-h-screen bg-white text-slate-900">
      <section className="relative overflow-hidden border-b border-slate-200 bg-gradient-to-br from-white via-slate-50 to-blue-50/70">
        <div
          aria-hidden="true"
          className="absolute -right-32 -top-40 h-[32rem] w-[32rem] rounded-full bg-blue-200/30 blur-3xl"
        />
        <div className="container relative mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
          <nav aria-label="Breadcrumb" className="mb-8 text-sm text-slate-500">
            <a className="transition-colors hover:text-slate-900" href="/">Home</a>
            <span className="mx-2 text-slate-300">/</span>
            <span className="text-slate-700">Developers</span>
          </nav>

          <div className="max-w-3xl">
            <span className="inline-flex items-center rounded-md border border-blue-100 bg-blue-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-blue-700">
              Developer ecosystem
            </span>
            <h1 className="mt-6 max-w-3xl text-4xl font-light leading-[1.1] tracking-[-0.03em] text-slate-900 sm:text-5xl lg:text-6xl">
              QR tools for every workflow.
            </h1>
            <p className="mt-6 max-w-2xl text-base leading-relaxed text-slate-500 sm:text-lg">
              Create, automate, and ship QR codes from the editor, terminal, browser, or CI workflow you already use.
            </p>
            <a
              href="https://github.com/knuthtimo-lab/qrmaster-cli"
              target="_blank"
              rel="noopener noreferrer"
              className="mt-8 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
            >
              Explore the repository
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </a>
          </div>
        </div>
      </section>

      <section className="border-b border-slate-200 bg-slate-50/60 py-16 sm:py-20">
        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-10 max-w-2xl">
            <span className="text-xs font-semibold uppercase tracking-wider text-blue-600">The toolkit</span>
            <h2 className="mt-3 text-3xl font-semibold tracking-[-0.02em] text-slate-900 sm:text-4xl">
              Choose your environment.
            </h2>
            <p className="mt-4 text-base leading-relaxed text-slate-500">
              Each integration lets you generate QR codes without leaving the tools you already use.
            </p>
          </div>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {tools.map((tool) => {
              const Icon = tool.icon;

              return (
                <article
                  key={tool.title}
                  className="group flex min-h-[19rem] flex-col rounded-xl border border-slate-200 bg-white p-7 shadow-sm transition-all duration-200 hover:-translate-y-1 hover:border-slate-300 hover:shadow-md"
                >
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex h-11 w-11 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-600">
                      <Icon className="h-5 w-5" strokeWidth={1.8} aria-hidden="true" />
                    </div>
                    {tool.status ? (
                      <span className="rounded-md border border-amber-200 bg-amber-50 px-2 py-1 text-[11px] font-semibold text-amber-700">
                        {tool.status}
                      </span>
                    ) : null}
                  </div>
                  <h3 className="mt-6 text-xl font-semibold text-slate-900">{tool.title}</h3>
                  <p className="mt-3 text-sm leading-6 text-slate-500">{tool.description}</p>

                  <code className="mt-6 block overflow-x-auto rounded-md border border-slate-100 bg-slate-50 px-3 py-2.5 font-mono text-xs leading-5 text-slate-700">
                    {tool.command}
                  </code>

                  <a
                    href={tool.url}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-auto inline-flex w-fit items-center gap-2 pt-7 text-sm font-semibold text-blue-600 transition-colors hover:text-blue-700"
                  >
                    {tool.linkLabel}
                    <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
                  </a>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      <section className="py-16 sm:py-20">
        <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="rounded-2xl border border-slate-200 bg-slate-50 p-8 sm:p-12">
            <span className="text-xs font-semibold uppercase tracking-wider text-blue-600">Open source</span>
            <h2 className="mt-3 max-w-2xl text-3xl font-semibold tracking-[-0.02em] text-slate-900 sm:text-4xl">
              Start with the CLI, then make it your own.
            </h2>
            <p className="mt-4 max-w-2xl text-base leading-relaxed text-slate-500">
              Browse the repository for the CLI source, command examples, and GitHub Action setup.
            </p>
            <a
              href="https://github.com/knuthtimo-lab/qrmaster-cli"
              target="_blank"
              rel="noopener noreferrer"
              className="mt-7 inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-blue-700 hover:shadow-md"
            >
              View the repository
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}