Pricing Tables

<%# Variant 1: 3-column cards -- Free / Pro / Enterprise, middle highlighted with "Popular" badge %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Simple, transparent pricing
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Choose the plan that fits your team. No hidden fees, cancel anytime.
      </p>
    </div>

    <div class="mt-12 grid gap-8 lg:grid-cols-3">
      <%# Free Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div>
            <h3 class="text-foreground text-lg font-semibold">Free</h3>
            <p class="text-muted-foreground mt-1 text-sm">For individuals getting started</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-foreground text-4xl font-bold tracking-tight">$0</span>
            <span class="text-muted-foreground text-sm">/month</span>
          </div>
          <%= ui.btn "Get started free", variant: :outline, block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Up to 3 projects</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">1 GB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Community support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Basic analytics</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "x-mark", size: 5, class: "text-muted-foreground shrink-0" %>
              <span class="text-muted-foreground">Custom domains</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "x-mark", size: 5, class: "text-muted-foreground shrink-0" %>
              <span class="text-muted-foreground">Priority support</span>
            </li>
          </ul>
        <% end %>
      <% end %>

      <%# Pro Plan (Highlighted) %>
      <%= ui.card class: "border-primary ring-primary/20 ring-2" do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-foreground text-lg font-semibold">Pro</h3>
              <p class="text-muted-foreground mt-1 text-sm">For growing teams</p>
            </div>
            <%= ui.badge "Popular", variant: :default, rounded: true %>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-foreground text-4xl font-bold tracking-tight">$29</span>
            <span class="text-muted-foreground text-sm">/month</span>
          </div>
          <%= ui.btn "Start free trial", block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Unlimited projects</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">50 GB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Priority email support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Advanced analytics</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Custom domains</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "x-mark", size: 5, class: "text-muted-foreground shrink-0" %>
              <span class="text-muted-foreground">Dedicated account manager</span>
            </li>
          </ul>
        <% end %>
      <% end %>

      <%# Enterprise Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div>
            <h3 class="text-foreground text-lg font-semibold">Enterprise</h3>
            <p class="text-muted-foreground mt-1 text-sm">For large organizations</p>
          </div>
          <div class="flex items-baseline gap-1">
            <span class="text-foreground text-4xl font-bold tracking-tight">$99</span>
            <span class="text-muted-foreground text-sm">/month</span>
          </div>
          <%= ui.btn "Contact sales", variant: :outline, block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Unlimited everything</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">500 GB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">24/7 phone support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Custom analytics & reports</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Custom domains & SSO</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Dedicated account manager</span>
            </li>
          </ul>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 2: 2-column simple -- Starter and Pro only, clean minimal design %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-5xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Two plans, zero complexity
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Start free, upgrade when you need more. No credit card required.
      </p>
    </div>

    <div class="mt-12 grid gap-8 lg:grid-cols-2">
      <%# Starter Plan %>
      <%= ui.card do %>
        <%= ui.card_header bordered: false, class: "pb-0" do %>
          <div class="flex items-center gap-3">
            <div class="bg-muted flex items-center justify-center rounded-lg p-2">
              <%= ui.icon "rocket-launch", size: 5, class: "text-foreground" %>
            </div>
            <div>
              <%= ui.card_title "Starter" %>
              <%= ui.card_subtitle "Perfect for side projects" %>
            </div>
          </div>
        <% end %>
        <%= ui.card_body class: "flex flex-col gap-6" do %>
          <div class="flex items-baseline gap-1">
            <span class="text-foreground text-5xl font-bold tracking-tight">$0</span>
            <span class="text-muted-foreground text-sm">/month</span>
          </div>
          <div class="border-border border-t pt-6">
            <p class="text-muted-foreground mb-4 text-xs font-medium uppercase tracking-wider">What's included</p>
            <ul class="flex flex-col gap-3 text-sm">
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Up to 5 projects</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">5 GB storage</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Basic integrations</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Community support</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Standard analytics</span>
              </li>
            </ul>
          </div>
        <% end %>
        <%= ui.card_footer bordered: false do %>
          <%= ui.btn "Get started free", variant: :outline, block: true, size: :lg, url: "#" %>
        <% end %>
      <% end %>

      <%# Pro Plan %>
      <%= ui.card class: "border-primary" do %>
        <%= ui.card_header bordered: false, class: "pb-0" do %>
          <div class="flex items-center gap-3">
            <div class="bg-primary flex items-center justify-center rounded-lg p-2">
              <%= ui.icon "sparkles", size: 5, class: "text-primary-foreground" %>
            </div>
            <div>
              <div class="flex items-center gap-2">
                <%= ui.card_title "Pro" %>
                <%= ui.badge "Recommended", variant: :default, size: :xs, rounded: true %>
              </div>
              <%= ui.card_subtitle "For teams and businesses" %>
            </div>
          </div>
        <% end %>
        <%= ui.card_body class: "flex flex-col gap-6" do %>
          <div class="flex items-baseline gap-1">
            <span class="text-foreground text-5xl font-bold tracking-tight">$29</span>
            <span class="text-muted-foreground text-sm">/month per seat</span>
          </div>
          <div class="border-border border-t pt-6">
            <p class="text-muted-foreground mb-4 text-xs font-medium uppercase tracking-wider">Everything in Starter, plus</p>
            <ul class="flex flex-col gap-3 text-sm">
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Unlimited projects</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">100 GB storage</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Advanced integrations & API</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Priority email & chat support</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Advanced analytics & exports</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Team collaboration tools</span>
              </li>
              <li class="flex items-center gap-2">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Custom branding</span>
              </li>
            </ul>
          </div>
        <% end %>
        <%= ui.card_footer bordered: false do %>
          <%= ui.btn "Start 14-day free trial", block: true, size: :lg, url: "#" %>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 3: With toggle -- Monthly/Annual toggle at top (visual only), 3 pricing cards %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Pricing that scales with you
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Save up to 20% with annual billing. All plans include a 14-day free trial.
      </p>

      <%# Billing toggle (visual only) %>
      <div class="bg-muted mt-8 inline-flex items-center gap-1 rounded-lg p-1">
        <button class="bg-background text-foreground rounded-md px-4 py-2 text-sm font-medium shadow-sm">
          Monthly
        </button>
        <button class="text-muted-foreground rounded-md px-4 py-2 text-sm font-medium">
          Annual
          <%= ui.badge "-20%", variant: :success, size: :xs, rounded: true %>
        </button>
      </div>
    </div>

    <div class="mt-12 grid gap-8 lg:grid-cols-3">
      <%# Basic Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div>
            <h3 class="text-foreground text-lg font-semibold">Basic</h3>
            <p class="text-muted-foreground mt-1 text-sm">Essential tools for small teams</p>
          </div>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-foreground text-4xl font-bold tracking-tight">$19</span>
              <span class="text-muted-foreground text-sm">/month</span>
            </div>
            <p class="text-muted-foreground mt-1 text-xs">Billed monthly</p>
          </div>
          <%= ui.btn "Start free trial", variant: :outline, block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">10 projects</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">10 GB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Up to 5 team members</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Email support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Basic reporting</span>
            </li>
          </ul>
        <% end %>
      <% end %>

      <%# Professional Plan (Highlighted) %>
      <%= ui.card class: "border-primary ring-primary/20 ring-2" do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div class="flex items-center justify-between">
            <div>
              <h3 class="text-foreground text-lg font-semibold">Professional</h3>
              <p class="text-muted-foreground mt-1 text-sm">Advanced features for scaling teams</p>
            </div>
            <%= ui.badge "Best value", variant: :default, rounded: true %>
          </div>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-foreground text-4xl font-bold tracking-tight">$49</span>
              <span class="text-muted-foreground text-sm">/month</span>
            </div>
            <p class="text-muted-foreground mt-1 text-xs">Billed monthly</p>
          </div>
          <%= ui.btn "Start free trial", block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Unlimited projects</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">100 GB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Up to 25 team members</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Priority support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Advanced reporting & API</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Custom workflows</span>
            </li>
          </ul>
        <% end %>
      <% end %>

      <%# Business Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-6 p-8" do %>
          <div>
            <h3 class="text-foreground text-lg font-semibold">Business</h3>
            <p class="text-muted-foreground mt-1 text-sm">Complete solution for enterprises</p>
          </div>
          <div>
            <div class="flex items-baseline gap-1">
              <span class="text-foreground text-4xl font-bold tracking-tight">$99</span>
              <span class="text-muted-foreground text-sm">/month</span>
            </div>
            <p class="text-muted-foreground mt-1 text-xs">Billed monthly</p>
          </div>
          <%= ui.btn "Contact sales", variant: :outline, block: true, url: "#" %>
          <ul class="flex flex-col gap-3 text-sm">
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Unlimited everything</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">1 TB storage</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Unlimited team members</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">24/7 dedicated support</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">Custom reporting & SLA</span>
            </li>
            <li class="flex items-center gap-2">
              <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
              <span class="text-foreground">SSO & audit logs</span>
            </li>
          </ul>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 4: Comparison table -- Full feature comparison table with check/x marks %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-6xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Compare plans side by side
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Find the perfect plan for your needs. Every feature laid out clearly.
      </p>
    </div>

    <%# Plan headers %>
    <div class="mt-12 overflow-x-auto">
      <table class="w-full min-w-[640px]">
        <thead>
          <tr class="border-border border-b">
            <th class="text-foreground w-2/5 pb-6 text-left text-sm font-medium">Features</th>
            <th class="w-1/5 pb-6 text-center">
              <div class="flex flex-col items-center gap-1">
                <span class="text-foreground text-lg font-semibold">Starter</span>
                <span class="text-foreground text-3xl font-bold">$0</span>
                <span class="text-muted-foreground text-xs">/month</span>
                <div class="mt-2"><%= ui.btn "Get started", variant: :outline, size: :sm, url: "#" %></div>
              </div>
            </th>
            <th class="w-1/5 pb-6 text-center">
              <div class="flex flex-col items-center gap-1">
                <div class="flex items-center gap-2">
                  <span class="text-foreground text-lg font-semibold">Pro</span>
                  <%= ui.badge "Popular", variant: :default, size: :xs, rounded: true %>
                </div>
                <span class="text-foreground text-3xl font-bold">$29</span>
                <span class="text-muted-foreground text-xs">/month</span>
                <div class="mt-2"><%= ui.btn "Start trial", size: :sm, url: "#" %></div>
              </div>
            </th>
            <th class="w-1/5 pb-6 text-center">
              <div class="flex flex-col items-center gap-1">
                <span class="text-foreground text-lg font-semibold">Enterprise</span>
                <span class="text-foreground text-3xl font-bold">$99</span>
                <span class="text-muted-foreground text-xs">/month</span>
                <div class="mt-2"><%= ui.btn "Contact us", variant: :outline, size: :sm, url: "#" %></div>
              </div>
            </th>
          </tr>
        </thead>
        <tbody class="text-sm">
          <%# Section: Usage %>
          <tr>
            <td colspan="4" class="text-foreground pb-2 pt-8 text-xs font-semibold uppercase tracking-wider">Usage</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Projects</td>
            <td class="text-muted-foreground py-3 text-center">3</td>
            <td class="text-foreground py-3 text-center font-medium">Unlimited</td>
            <td class="text-foreground py-3 text-center font-medium">Unlimited</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Storage</td>
            <td class="text-muted-foreground py-3 text-center">1 GB</td>
            <td class="text-foreground py-3 text-center font-medium">50 GB</td>
            <td class="text-foreground py-3 text-center font-medium">500 GB</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Team members</td>
            <td class="text-muted-foreground py-3 text-center">1</td>
            <td class="text-foreground py-3 text-center font-medium">Up to 20</td>
            <td class="text-foreground py-3 text-center font-medium">Unlimited</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">API requests / month</td>
            <td class="text-muted-foreground py-3 text-center">1,000</td>
            <td class="text-foreground py-3 text-center font-medium">100,000</td>
            <td class="text-foreground py-3 text-center font-medium">Unlimited</td>
          </tr>

          <%# Section: Features %>
          <tr>
            <td colspan="4" class="text-foreground pb-2 pt-8 text-xs font-semibold uppercase tracking-wider">Features</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Basic analytics</td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Advanced analytics</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Custom domains</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Custom workflows</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">White-label branding</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>

          <%# Section: Security & Support %>
          <tr>
            <td colspan="4" class="text-foreground pb-2 pt-8 text-xs font-semibold uppercase tracking-wider">Security & Support</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Two-factor authentication</td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">SSO / SAML</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Audit logs</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="py-3 text-center"><%= ui.icon "check", size: 5, class: "text-primary mx-auto" %></td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">Support level</td>
            <td class="text-muted-foreground py-3 text-center">Community</td>
            <td class="text-foreground py-3 text-center font-medium">Priority</td>
            <td class="text-foreground py-3 text-center font-medium">24/7 Dedicated</td>
          </tr>
          <tr class="border-border border-b">
            <td class="text-foreground py-3">SLA guarantee</td>
            <td class="py-3 text-center"><%= ui.icon "x-mark", size: 5, class: "text-muted-foreground mx-auto" %></td>
            <td class="text-muted-foreground py-3 text-center">99.9%</td>
            <td class="text-foreground py-3 text-center font-medium">99.99%</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>

<%# Variant 5: Horizontal cards -- Each plan as a horizontal card with features listed inline %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-5xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
        Pick your plan
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        Flexible plans designed to grow with your business. Upgrade or downgrade at any time.
      </p>
    </div>

    <div class="mt-12 flex flex-col gap-6">
      <%# Hobby Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "p-6 lg:p-8" do %>
          <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
              <div class="min-w-[140px]">
                <h3 class="text-foreground text-lg font-semibold">Hobby</h3>
                <div class="mt-1 flex items-baseline gap-1">
                  <span class="text-foreground text-3xl font-bold tracking-tight">$0</span>
                  <span class="text-muted-foreground text-sm">/mo</span>
                </div>
              </div>
              <div class="border-border lg:border-l lg:pl-8">
                <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">3 projects</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">1 GB storage</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Community support</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Basic analytics</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="shrink-0">
              <%= ui.btn "Get started", variant: :outline, url: "#" %>
            </div>
          </div>
        <% end %>
      <% end %>

      <%# Pro Plan (Highlighted) %>
      <%= ui.card class: "border-primary ring-primary/20 ring-2" do %>
        <%= ui.card_body class: "p-6 lg:p-8" do %>
          <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
              <div class="min-w-[140px]">
                <div class="flex items-center gap-2">
                  <h3 class="text-foreground text-lg font-semibold">Pro</h3>
                  <%= ui.badge "Popular", variant: :default, size: :xs, rounded: true %>
                </div>
                <div class="mt-1 flex items-baseline gap-1">
                  <span class="text-foreground text-3xl font-bold tracking-tight">$29</span>
                  <span class="text-muted-foreground text-sm">/mo</span>
                </div>
              </div>
              <div class="border-border lg:border-l lg:pl-8">
                <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Unlimited projects</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">50 GB storage</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Priority support</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Advanced analytics</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Custom domains</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">API access</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="shrink-0">
              <%= ui.btn "Start free trial", url: "#" %>
            </div>
          </div>
        <% end %>
      <% end %>

      <%# Team Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "p-6 lg:p-8" do %>
          <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
              <div class="min-w-[140px]">
                <h3 class="text-foreground text-lg font-semibold">Team</h3>
                <div class="mt-1 flex items-baseline gap-1">
                  <span class="text-foreground text-3xl font-bold tracking-tight">$79</span>
                  <span class="text-muted-foreground text-sm">/mo</span>
                </div>
              </div>
              <div class="border-border lg:border-l lg:pl-8">
                <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Unlimited everything</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">200 GB storage</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Dedicated support</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">SSO & audit logs</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Custom contracts</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">SLA guarantee</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="shrink-0">
              <%= ui.btn "Contact sales", variant: :outline, url: "#" %>
            </div>
          </div>
        <% end %>
      <% end %>

      <%# Enterprise Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "p-6 lg:p-8" do %>
          <div class="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:gap-8">
              <div class="min-w-[140px]">
                <h3 class="text-foreground text-lg font-semibold">Enterprise</h3>
                <div class="mt-1">
                  <span class="text-foreground text-2xl font-bold tracking-tight">Custom</span>
                </div>
              </div>
              <div class="border-border lg:border-l lg:pl-8">
                <ul class="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Everything in Team</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Unlimited storage</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">On-premise deployment</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Custom integrations</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">Dedicated engineer</span>
                  </li>
                  <li class="flex items-center gap-1.5">
                    <%= ui.icon "check", size: 4, class: "text-primary shrink-0" %>
                    <span class="text-foreground">99.99% SLA</span>
                  </li>
                </ul>
              </div>
            </div>
            <div class="shrink-0">
              <%= ui.btn "Talk to us", variant: :outline, url: "#" %>
            </div>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</section>

<%# Variant 6: Tiered with gradient -- 3 tiers with subtle gradient bg on the featured plan, large price numbers %>
<section class="bg-background py-16 lg:py-24">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <%= ui.badge "Pricing", variant: :default, rounded: true %>
      <h2 class="text-foreground mt-4 text-3xl font-bold tracking-tight sm:text-4xl">
        Invest in your growth
      </h2>
      <p class="text-muted-foreground mt-4 text-lg leading-relaxed">
        From solo makers to enterprise teams, we have you covered.
      </p>
    </div>

    <div class="mt-16 grid gap-8 lg:grid-cols-3">
      <%# Solo Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-8 p-8 lg:p-10" do %>
          <div class="text-center">
            <div class="bg-muted mx-auto mb-4 flex size-12 items-center justify-center rounded-full">
              <%= ui.icon "user", size: 6, class: "text-foreground" %>
            </div>
            <h3 class="text-foreground text-xl font-semibold">Solo</h3>
            <p class="text-muted-foreground mt-1 text-sm">For individual creators</p>
          </div>
          <div class="text-center">
            <span class="text-foreground text-6xl font-bold tracking-tight">$0</span>
            <p class="text-muted-foreground mt-2 text-sm">Free forever</p>
          </div>
          <div class="border-border border-t pt-8">
            <ul class="flex flex-col gap-4 text-sm">
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">5 projects</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">2 GB storage</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Basic analytics</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Community support</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "minus", size: 5, class: "text-muted-foreground shrink-0" %>
                <span class="text-muted-foreground">Team features</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "minus", size: 5, class: "text-muted-foreground shrink-0" %>
                <span class="text-muted-foreground">API access</span>
              </li>
            </ul>
          </div>
          <div class="mt-auto">
            <%= ui.btn "Start for free", variant: :outline, block: true, size: :lg, url: "#" %>
          </div>
        <% end %>
      <% end %>

      <%# Growth Plan (Featured with gradient) %>
      <div class="relative">
        <div class="from-primary/5 via-primary/10 to-primary/5 absolute inset-0 rounded-xl bg-gradient-to-b"></div>
        <%= ui.card class: "relative border-primary ring-primary/20 ring-2" do %>
          <%= ui.card_body class: "flex flex-col gap-8 p-8 lg:p-10" do %>
            <div class="text-center">
              <div class="bg-primary mx-auto mb-4 flex size-12 items-center justify-center rounded-full">
                <%= ui.icon "rocket-launch", size: 6, class: "text-primary-foreground" %>
              </div>
              <div class="flex items-center justify-center gap-2">
                <h3 class="text-foreground text-xl font-semibold">Growth</h3>
                <%= ui.badge "Most popular", variant: :default, size: :xs, rounded: true %>
              </div>
              <p class="text-muted-foreground mt-1 text-sm">For teams ready to scale</p>
            </div>
            <div class="text-center">
              <span class="text-foreground text-6xl font-bold tracking-tight">$49</span>
              <p class="text-muted-foreground mt-2 text-sm">per month, billed monthly</p>
            </div>
            <div class="border-border border-t pt-8">
              <ul class="flex flex-col gap-4 text-sm">
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">Unlimited projects</span>
                </li>
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">100 GB storage</span>
                </li>
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">Advanced analytics</span>
                </li>
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">Priority support</span>
                </li>
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">Team collaboration</span>
                </li>
                <li class="flex items-center gap-3">
                  <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                  <span class="text-foreground">API access & webhooks</span>
                </li>
              </ul>
            </div>
            <div class="mt-auto">
              <%= ui.btn "Start 14-day trial", block: true, size: :lg, url: "#" %>
            </div>
          <% end %>
        <% end %>
      </div>

      <%# Enterprise Plan %>
      <%= ui.card do %>
        <%= ui.card_body class: "flex flex-col gap-8 p-8 lg:p-10" do %>
          <div class="text-center">
            <div class="bg-muted mx-auto mb-4 flex size-12 items-center justify-center rounded-full">
              <%= ui.icon "shield-check", size: 6, class: "text-foreground" %>
            </div>
            <h3 class="text-foreground text-xl font-semibold">Enterprise</h3>
            <p class="text-muted-foreground mt-1 text-sm">For large organizations</p>
          </div>
          <div class="text-center">
            <span class="text-foreground text-6xl font-bold tracking-tight">$249</span>
            <p class="text-muted-foreground mt-2 text-sm">per month, billed monthly</p>
          </div>
          <div class="border-border border-t pt-8">
            <ul class="flex flex-col gap-4 text-sm">
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Unlimited everything</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">1 TB storage</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Custom reports & dashboards</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">24/7 dedicated support</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">SSO, SAML & audit logs</span>
              </li>
              <li class="flex items-center gap-3">
                <%= ui.icon "check", size: 5, class: "text-primary shrink-0" %>
                <span class="text-foreground">Custom SLA & contracts</span>
              </li>
            </ul>
          </div>
          <div class="mt-auto">
            <%= ui.btn "Contact sales", variant: :outline, block: true, size: :lg, url: "#" %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>
</section>