Pricing Enterprise Form

<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
  <div class="mx-auto max-w-6xl px-6">
    <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
      <!-- Left: Content -->
      <div>
        <p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Enterprise</p>
        <h2 class="mt-3 text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Need more?</h2>
        <p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">Get a custom solution tailored to your organization's needs.</p>

        <ul class="mt-8 space-y-4">
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Unlimited team seats</p>
              <p class="text-sm text-[var(--ws-pricing-text-soft)]">Scale without per-seat pricing. Add your entire organization.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Custom integrations</p>
              <p class="text-sm text-[var(--ws-pricing-text-soft)]">Connect with your existing tools through a dedicated API.</p>
            </div>
          </li>
          <li class="flex items-start gap-3">
            <svg class="mt-0.5 h-5 w-5 shrink-0 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
            <div>
              <p class="text-sm font-semibold text-[var(--ws-pricing-text)]">Dedicated account manager</p>
              <p class="text-sm text-[var(--ws-pricing-text-soft)]">A single point of contact for onboarding and ongoing support.</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Right: Contact form -->
      <div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
        <h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Contact Sales</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">We'll get back to you within one business day.</p>

        <form class="mt-6 space-y-4">
          <div>
            <label for="ef-name" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Name</label>
            <input type="text" id="ef-name" placeholder="Jane Smith" class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
          </div>
          <div>
            <label for="ef-email" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Email</label>
            <input type="email" id="ef-email" placeholder="jane@company.com" class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
          </div>
          <div>
            <label for="ef-company" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Company</label>
            <input type="text" id="ef-company" placeholder="Acme Inc." class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20">
          </div>
          <div>
            <label for="ef-message" class="block text-sm font-medium text-[var(--ws-pricing-text)]">Message</label>
            <textarea id="ef-message" rows="3" placeholder="Tell us about your needs..." class="mt-1 w-full rounded-lg border border-[var(--ws-pricing-card-border)] bg-transparent px-3.5 py-2.5 text-sm text-[var(--ws-pricing-text)] placeholder:text-[var(--ws-pricing-text-muted)] focus:border-[var(--ws-pricing-highlight-bg)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-pricing-highlight-bg)]/20"></textarea>
          </div>
          <button type="submit" class="w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Get in touch</button>
        </form>
      </div>
    </div>
  </div>
</section>