import type { Metadata } from "next";
import Link from "next/link";
import { ArrowRight, ExternalLink, Mail, Server, ShieldCheck, UserRound } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Container, Eyebrow } from "@/components/marketing/section";
import { Reveal } from "@/components/marketing/reveal";

export const metadata: Metadata = {
  title: "Contact",
  description: "How to reach the person behind PolyLLM, where it is hosted, and how to report a security issue.",
  alternates: { canonical: "/contact" },
};

const CARDS = [
  {
    icon: <Mail />,
    title: "E-mail",
    body: "For questions, bug reports, feature requests or anything about your account.",
    action: (
      <a href="mailto:contact@spboucher.ai" className="inline-flex items-center gap-1.5 font-medium text-accent underline-offset-4 hover:underline">
        contact@spboucher.ai <ArrowRight className="size-4" aria-hidden />
      </a>
    ),
  },
  {
    icon: <UserRound />,
    title: "Who built it",
    body: "PolyLLM is designed, built and operated by Simon-Pierre Boucher. One person, so replies are personal but not instant — expect a day or two.",
    action: <span className="text-fg">Simon-Pierre Boucher</span>,
  },
  {
    icon: <Server />,
    title: "Where it runs",
    body: "PolyLLM is hosted on MacLustr, a private cluster of Apple silicon Macs in Québec, fronted by a dedicated gateway. Your data stays in PolyLLM's own PostgreSQL database.",
    action: (
      <a href="https://www.maclustr.io" target="_blank" rel="noreferrer noopener" className="inline-flex items-center gap-1.5 font-medium text-accent underline-offset-4 hover:underline">
        www.maclustr.io <ExternalLink className="size-3.5" aria-hidden />
      </a>
    ),
  },
  {
    icon: <ShieldCheck />,
    title: "Security reports",
    body: "Found a vulnerability? Write to the same address with “security” in the subject. Please allow a reasonable window before disclosing publicly.",
    action: (
      <Link href="/security" className="inline-flex items-center gap-1.5 font-medium text-accent underline-offset-4 hover:underline">
        Read the security page <ArrowRight className="size-4" aria-hidden />
      </Link>
    ),
  },
];

export default function ContactPage() {
  return (
    <Container className="py-12 sm:py-20">
      <Reveal className="max-w-2xl">
        <Eyebrow>Contact</Eyebrow>
        <h1 className="mt-3 text-balance text-4xl font-semibold tracking-[-0.03em]">Talk to a person.</h1>
        <p className="mt-4 text-pretty text-base leading-7 text-fg-muted sm:text-lg sm:leading-8">No ticketing system, no chatbot. One e-mail address, read by the person who wrote the code.</p>
        <Button asChild size="lg" className="mt-7 w-full sm:w-auto">
          <a href="mailto:contact@spboucher.ai">
            <Mail /> contact@spboucher.ai
          </a>
        </Button>
      </Reveal>
      <ul className="mt-12 grid gap-x-10 gap-y-9 sm:grid-cols-2">
        {CARDS.map((c, i) => (
          <Reveal key={c.title} as="li" delay={0.04 * i} className="flex gap-3.5">
            <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-accent-soft text-accent [&_svg]:size-5">{c.icon}</span>
            <div className="min-w-0">
              <h2 className="text-[16px] font-semibold tracking-tight">{c.title}</h2>
              <p className="mt-1 text-[14.5px] leading-6 text-fg-muted">{c.body}</p>
              <p className="mt-2.5 text-[14px]">{c.action}</p>
            </div>
          </Reveal>
        ))}
      </ul>
      <Reveal delay={0.15} className="mt-14 rounded-2xl bg-bg-subtle p-5 sm:p-6">
        <p className="text-[13px] leading-6 text-fg-muted">
          Provider issues (billing, quotas, a model that misbehaves) are handled by the provider — OpenAI, Anthropic, Google, xAI, Mistral, DeepSeek, Moonshot AI, OpenRouter or Cerebras — under your own account with them. PolyLLM never resells model access. See the{" "}
          <Link href="/privacy" className="text-accent underline-offset-4 hover:underline">
            privacy policy
          </Link>{" "}
          and{" "}
          <Link href="/terms" className="text-accent underline-offset-4 hover:underline">
            terms
          </Link>
          .
        </p>
      </Reveal>
    </Container>
  );
}