SnapOtter/apps/landing/src/components/Pricing.astro

---
// biome-ignore-all lint/correctness/noUnusedImports: Astro template consumes component imports.
// biome-ignore-all lint/correctness/noUnusedVariables: Astro template consumes frontmatter values.
import { TOOLS } from "@snapotter/shared";
import SectionHeading from "./SectionHeading.astro";

const toolCount = TOOLS.length;

const checkIcon =
  '<svg class="h-4 w-4 shrink-0 text-success" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
---

<section class="bg-background-alt px-6 py-20 md:py-28" id="pricing">
  <SectionHeading
    title="Free for everyone. Enterprise when you need it."
    subtitle="Start with the full open source edition. Upgrade when your team needs enterprise controls."
  />

  <div class="mx-auto grid max-w-4xl gap-8 md:grid-cols-2">
    <!-- Open Source (Free) -->
    <div class="reveal glow-warm relative flex flex-col overflow-hidden rounded-2xl border-2 border-primary/40 bg-surface p-8 md:scale-[1.03]">
      <div class="pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/[0.04] to-transparent"></div>

      <div class="relative">
        <span class="mb-4 inline-block rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
          Most Popular
        </span>
        <h3 class="font-display text-2xl font-bold">Open Source</h3>
        <div class="mt-2 flex items-baseline gap-1">
          <span class="font-display text-4xl font-extrabold">Free</span>
          <span class="text-sm text-muted">forever</span>
        </div>
        <p class="mt-3 text-sm leading-relaxed text-muted">
          Everything you need for file processing. No limits, no trials, no credit card.
        </p>

        <a
          href="https://docs.snapotter.com/guide/getting-started"
          target="_blank"
          rel="noopener noreferrer"
          class="btn-primary mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold"
        >
          Deploy Now
        </a>

        <ul class="mt-8 space-y-3">
          {[
            `All ${toolCount} tools across 5 modalities`,
            "Unlimited usage, no rate limits",
            "Full REST API with OpenAPI docs",
            "Pipeline automation & batch processing",
            "19 local AI tools",
            "Multi-user with role-based access",
            "OIDC / SSO login (Google, Okta, any provider)",
            "21 languages",
            "Docker, Kubernetes, bare metal",
            "ARM and x86, air-gapped ready",
            "Community support (GitHub + Discord)",
            "AGPL-3.0 licensed",
          ].map((feature) => (
            <li class="flex items-start gap-2.5 text-sm">
              <Fragment set:html={checkIcon} />
              <span>{feature}</span>
            </li>
          ))}
        </ul>
      </div>
    </div>

    <!-- Enterprise -->
    <div class="reveal flex flex-col rounded-2xl border border-border bg-surface p-8">
      <h3 class="font-display text-2xl font-bold">Enterprise</h3>
      <div class="mt-2 flex items-baseline gap-1">
        <span class="font-display text-4xl font-extrabold">Custom</span>
      </div>
      <p class="mt-3 text-sm leading-relaxed text-muted">
        Commercial license, enterprise security, priority support, and deployment assistance.
      </p>

      <a
        href="/contact"
        class="btn-outline mt-6 block rounded-xl px-6 py-3 text-center text-sm font-semibold"
      >
        Let's talk
      </a>

      <ul class="mt-8 space-y-3">
        {[
          "Everything in Open Source",
          "Commercial license (no AGPL)",
          "SAML SSO + SSO enforcement",
          "SCIM provisioning",
          "Multi-factor authentication",
          "Multi-tenancy",
          "Per-tool permissions",
          "S3-compatible storage",
          "Webhooks + audit log export",
          "Priority support with SLA",
          "Dedicated deployment help",
          "Security review + compliance docs",
        ].map((feature) => (
          <li class="flex items-start gap-2.5 text-sm">
            <Fragment set:html={checkIcon} />
            <span>{feature}</span>
          </li>
        ))}
      </ul>
    </div>
  </div>
</section>