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 { VpnCard } from "@/components/ui/VpnCard";
import { allProviders } from "@/lib/vpn-data";

export function TopTen() {
  return (
    <SectionWrapper id="picks" className="pt-9 md:pt-12">
      <Container>
        <SectionHeading
          eyebrow="Our picks"
          title="Which Mac VPN should you choose?"
          lead="VPNFast is our own app and it sits at number one — we say so up front, and it is scored against the same four criteria as every other VPN on this page."
        />

        <div className="mx-auto mt-9 flex max-w-[900px] flex-col gap-4">
          {allProviders.map((provider, i) => (
            <Reveal key={provider.slug} delay={Math.min(i, 4) * 70}>
              <VpnCard provider={provider} rank={i + 1} />
            </Reveal>
          ))}
        </div>
      </Container>
    </SectionWrapper>
  );
}