import { createFileRoute, Link } from "@tanstack/react-router";
import { useState } from "react";
import { SiteLayout, PageHero } from "@/components/site/SiteLayout";
import { LifeBuoy, MessageSquare, BookOpen, Activity, ChevronDown } from "lucide-react";

export const Route = createFileRoute("/support")({
  head: () => ({
    meta: [
      { title: "Support Center — AxiomPlay" },
      { name: "description", content: "Help articles, FAQ and 24/7 support channels for the AxiomPlay platform." },
      { property: "og:url", content: "/support" },
    ],
    links: [{ rel: "canonical", href: "/support" }],
  }),
  component: SupportPage,
});

const channels = [
  { icon: BookOpen, t: "Documentation", b: "Guides, API reference and SDKs", to: "/docs" },
  { icon: MessageSquare, t: "Open a ticket", b: "Get a human within your SLA window", to: "/contact" },
  { icon: Activity, t: "System status", b: "Live uptime across regions and APIs", to: "/support" },
  { icon: LifeBuoy, t: "Emergency line", b: "P0 production incidents · +356 2000 9999", to: "/contact" },
];

const faqs = [
  { q: "How fast can we go live?", a: "Most operators complete sandbox integration in under two weeks and reach production within 4–6 weeks including certification." },
  { q: "Which jurisdictions do you support?", a: "We are certified or operating in 38 markets including MGA, UKGC, Curaçao, Anjouan, Romania, Sweden, Ontario, New Jersey and Brazil." },
  { q: "Do you provide a turnkey platform?", a: "Yes. You can integrate our APIs into your own platform, or use AxiomPlay's full white-label platform with CMS, payments and BI included." },
  { q: "How is uptime measured?", a: "We track p99 availability per API per region. The contractual SLA is 99.99% measured monthly with credits for breaches." },
  { q: "What support tiers are available?", a: "Email (Startup), priority email + chat (Growth) and dedicated 24/7 with a named TAM (Enterprise)." },
];

function SupportPage() {
  const [open, setOpen] = useState<number | null>(0);

  return (
    <SiteLayout>
      <PageHero
        eyebrow="Support Center"
        title={<>We've got <span className="text-gradient">your back</span>.</>}
        description="Self-serve answers, structured tickets, and a 24/7 on-call team for production incidents."
      />

      <section className="container-page py-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
        {channels.map(({ icon: Icon, t, b, to }) => (
          <Link key={t} to={to} className="surface-card p-5 glow-ring group">
            <div className="h-10 w-10 rounded-lg grid place-items-center mb-4" style={{ background: "var(--gradient-brand)" }}>
              <Icon className="h-5 w-5 text-background" />
            </div>
            <h3 className="font-display font-semibold">{t}</h3>
            <p className="mt-1 text-xs text-muted-foreground">{b}</p>
          </Link>
        ))}
      </section>

      <section className="container-page pb-20">
        <h2 className="font-display text-2xl font-semibold mb-6">Frequently asked</h2>
        <div className="surface-card divide-y divide-border">
          {faqs.map((f, i) => (
            <button
              key={f.q}
              onClick={() => setOpen(open === i ? null : i)}
              className="w-full text-left px-5 py-4 hover:bg-surface/50 transition"
            >
              <div className="flex items-center justify-between gap-4">
                <p className="font-medium text-sm">{f.q}</p>
                <ChevronDown className={`h-4 w-4 text-muted-foreground transition ${open === i ? "rotate-180" : ""}`} />
              </div>
              {open === i && <p className="mt-3 text-sm text-muted-foreground leading-relaxed">{f.a}</p>}
            </button>
          ))}
        </div>
      </section>
    </SiteLayout>
  );
}