import { Check } from "lucide-react";
import { SectionWrapper } from "@/components/ui/SectionWrapper";
import { Container } from "@/components/ui/Container";
import { SectionHeading } from "@/components/ui/SectionHeading";
import { Reveal } from "@/components/ui/Reveal";
import { criteria } from "@/lib/vpn-data";
import { siteConfig } from "@/lib/site-config";

export function Methodology() {
  return (
    <SectionWrapper id="method">
      <Container>
        <SectionHeading
          eyebrow="Our method"
          title="How we rank these VPNs"
          lead="We score on what actually changes the experience on a Mac — and we tell you when a product is our own."
        />

        <Reveal className="mx-auto mt-9 max-w-[900px]">
          <div className="rounded-[18px] border border-border/80 bg-white p-6 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.04)] md:p-8">
            <ul className="grid grid-cols-1 gap-5 min-[560px]:grid-cols-2">
              {criteria.map((c) => (
                <li key={c.title} className="flex gap-3">
                  <span className="mt-0.5 grid h-6 w-6 shrink-0 place-items-center rounded-full bg-brand-light">
                    <Check className="h-3.5 w-3.5 text-brand" strokeWidth={3} />
                  </span>
                  <span>
                    <b className="font-extrabold">{c.title}</b>
                    <span className="mt-1 block text-[0.9rem] leading-relaxed text-muted">
                      {c.description}
                    </span>
                  </span>
                </li>
              ))}
            </ul>

            <p className="mt-6 border-t border-border/60 pt-5 text-[0.88rem] leading-relaxed text-muted">
              <b className="font-bold text-ink">Transparency:</b> {siteConfig.appName} is made
              by {siteConfig.operator}, who also operate this guide. We disclose that at the top
              of the page, on its card and in the comparison table. Ratings shown for the other
              VPNs are their live App Store scores; the rating for {siteConfig.appName} is
              supplied by {siteConfig.operator}. Links to other providers may earn us a
              commission, which never changes the order they appear in.
            </p>
          </div>
        </Reveal>
      </Container>
    </SectionWrapper>
  );
}