import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/privacy")({
  head: () => ({
    meta: [
      { title: "Privacy Policy — Vigor Group of Companies" },
      {
        name: "description",
        content:
          "How Vigor Group of Companies collects, uses and protects information submitted through this website.",
      },
      { property: "og:title", content: "Privacy Policy — Vigor Group of Companies" },
      { property: "og:description", content: "Our approach to privacy and data on this website." },
      { property: "og:type", content: "website" },
      { property: "og:url", content: "/privacy" },
    ],
    links: [{ rel: "canonical", href: "/privacy" }],
  }),
  component: Privacy,
});

const sections = [
  {
    k: "Information we collect",
    v: "We collect only the information you choose to give us through this website — such as your name, email address, phone number and message when you use our contact or newsletter forms.",
  },
  {
    k: "How we use it",
    v: "Information is used to respond to your enquiry, to route it to the relevant business within the group, and — where you have opted in — to send you group updates. We do not sell your information.",
  },
  {
    k: "Sharing",
    v: "We may share your enquiry with the specific Vigor Group business it concerns, and with service providers who help us operate this website. They may use it only for that purpose.",
  },
  {
    k: "Retention",
    v: "We keep enquiry records only as long as needed to handle your request and to meet our record-keeping obligations.",
  },
  {
    k: "Your choices",
    v: "You may ask us to correct or delete the information you have submitted, or unsubscribe from group updates at any time, by contacting us through the details on our contact page.",
  },
  {
    k: "Changes",
    v: "We may update this policy from time to time. The version published on this page is the current one.",
  },
];

function Privacy() {
  return (
    <>
      <section className="container-x pt-16 md:pt-20 pb-12 border-b border-border">
        <p className="eyebrow">Legal</p>
        <h1 className="mt-6 text-5xl md:text-6xl max-w-3xl leading-[1]">Privacy Policy</h1>
      </section>
      <section className="container-x py-16 md:py-20 max-w-3xl space-y-10">
        {sections.map((s) => (
          <div key={s.k}>
            <h2 className="text-2xl">{s.k}</h2>
            <p className="mt-3 text-ink-soft leading-relaxed">{s.v}</p>
          </div>
        ))}
      </section>
    </>
  );
}
