import { createFileRoute, Link } from "@tanstack/react-router";
import { LegalPage, LegalSection, MailLink } from "~/components/legal/LegalPage";
import { getLegalInfo } from "~/fns/legal";
import { seo } from "~/utils/seo";

export const Route = createFileRoute("/support")({
  loader: () => getLegalInfo(),
  head: ({ match }) => ({
    meta: seo({
      origin: match.context.publicUrl,
      path: "/support",
      title: "Support · gitfor",
      description: "How to get help with your gitfor account, billing, abuse reports and security issues.",
    }),
  }),
  component: SupportPage,
});

function SupportPage() {
  const info = Route.useLoaderData();
  const support = info.supportEmail ?? info.contactEmail;
  return (
    <LegalPage title="Support" lede="Where to send each kind of question so it reaches the right inbox." info={info}>
      <LegalSection title="Account and billing">
        <p>
          Email <MailLink address={support} placeholder="SUPPORT_EMAIL" /> from the address on your account. Include
          your username and, for billing questions, the date and amount of the charge. You can manage your plan, payment
          method and spending limit yourself on the{" "}
          <Link to="/settings/billing" className="text-accent-400 hover:underline">
            billing settings
          </Link>{" "}
          page.
        </p>
      </LegalSection>

      <LegalSection title="Abuse and copyright">
        <p>
          Report spam, phishing, malware or other abuse through the{" "}
          <Link to="/abuse" className="text-accent-400 hover:underline">
            abuse form
          </Link>{" "}
          or the report link on the page in question. Copyright notices go to{" "}
          <MailLink address={info.dmcaEmail} placeholder="DMCA_AGENT_EMAIL" />; see the{" "}
          <Link to="/dmca" className="text-accent-400 hover:underline">
            DMCA policy
          </Link>{" "}
          for what a notice must include.
        </p>
      </LegalSection>

      <LegalSection title="Security vulnerabilities">
        <p>
          Do not send vulnerabilities to support. Follow the{" "}
          <Link to="/security" className="text-accent-400 hover:underline">
            security policy
          </Link>{" "}
          and email <MailLink address={info.securityEmail ?? info.contactEmail} placeholder="SECURITY_CONTACT_EMAIL" />.
        </p>
      </LegalSection>
    </LegalPage>
  );
}