Interactive Pricing Plan Card with Billing Toggle

<div class="relative max-w-6xl sm:px-6 lg:px-8 bg-neutral-950 border-gray-800 border rounded-3xl mr-auto ml-auto pt-20 pr-20 pb-10 pl-20">
  <!-- Header -->
  <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between animate-[slideUp_0.6s_ease-out] mb-12">
    <div class="mb-6 sm:mb-0">
      <h2 class="sm:text-7xl text-4xl font-light text-white tracking-tighter font-geist mb-6" style="">Pricing Plans</h2>
      <p class="text-lg max-w-2xl font-geist text-neutral-400" style="">Flexible options that match your pace. Built for startups, growing brands, and teams that value thoughtful design.</p>
    </div>
    <!-- Billing toggle -->
    <div id="billingToggle" class="inline-flex items-center rounded-full ring-1 ring-white/10 bg-white/5 p-1 gap-1">
      <button type="button" data-billing="monthly" aria-pressed="true" class="px-3.5 py-1.5 rounded-full text-xs sm:text-sm font-geist bg-neutral-100 text-black transition-colors" style="">Monthly</button>
      <button type="button" data-billing="project" aria-pressed="false" class="px-3.5 py-1.5 rounded-full text-xs sm:text-sm font-geist text-neutral-300 hover:text-neutral-100 transition-colors" style="">Project based</button>
    </div>
  </div>

  <!-- Plan card -->
  <div class="rounded-2xl border overflow-hidden border-white/10 bg-neutral-900/40 animate-[slideUp_0.6s_ease-out_0.1s_both]">
    <div class="grid grid-cols-1 lg:grid-cols-2 items-center">
      <!-- Left: Plan summary (light card) -->
      <div class="sm:p-6 lg:p-8 pt-5 pr-5 pb-5 pl-5">
        <div class="relative rounded-2xl border border-white/10 bg-neutral-100 text-neutral-900 p-5 sm:p-6 lg:p-7">
          <div class="absolute top-4 right-5 text-xs font-geist text-neutral-500 select-none" style="">Lumina®</div>
          <div class="flex items-center justify-between">
            <div class="">
              <div id="planTitle" class="text-sm font-geist font-medium tracking-tight text-neutral-700" style="">Subscription</div>
              <div class="mt-3 flex items-baseline gap-2">
                <span class="text-3xl sm:text-4xl font-geist font-medium tracking-tight" style="">$<span id="price" style="">2500</span></span>
                <span class="text-neutral-500 font-geist text-base" style="">/<span id="priceUnit" style="">month</span></span>
              </div>
            </div>
          </div>
          <p id="planDesc" class="mt-4 text-sm leading-6 font-geist text-neutral-600" style="">Ongoing support and flexible design when you need it. Ideal for startups, growing brands, and marketing teams needing consistent creative momentum.</p>

          <div class="mt-8 flex items-center justify-between">
            <div class="inline-flex items-center gap-2 text-[11px] font-geist text-neutral-500">
              <span class="h-2 w-2 rounded-full bg-neutral-400/50"></span>
              <span id="addonNote" style="">Optional SEO add‑on ($800/m)</span>
            </div>
            <!-- Decorative toggle knob (non-functional) -->
            <div class="h-5 w-9 rounded-full bg-neutral-200 relative">
              <div class="absolute top-[2px] left-[2px] h-4 w-4 rounded-full bg-neutral-500"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Right: Features + CTA -->
      <div class="lg:p-8 flex flex-col bg-gradient-to-br from-black/30 to-black/10 pt-6 pr-6 pb-6 pl-6 justify-between">
        <div class="">
          <div class="text-sm font-geist text-neutral-400 mb-4" style="">What's included:</div>
          <ul class="space-y-3">
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-blue-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span class="text-neutral-100" style="">Unlimited design requests</span>
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-fuchsia-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              <span id="featureScope" class="text-neutral-100" style="">One active task at a time</span>
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-violet-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              Weekly progress calls
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-blue-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              Fast turnaround times
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-fuchsia-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              Brand consistency across deliverables
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-violet-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              Priority support
            </li>
            <li class="flex items-center gap-3 text-sm font-geist text-neutral-200" style="">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check-circle-2" class="lucide lucide-check-circle-2 text-blue-500"><circle cx="12" cy="12" r="10" class=""></circle><path d="m9 12 2 2 4-4" class=""></path></svg>
              Pause or cancel anytime
            </li>
          </ul>
        </div>

        <div class="mt-8 flex items-center justify-between gap-6">
          <div class="">
            <div class="text-sm font-geist text-neutral-400" style="">Estimated kickoff</div>
            <div id="etaValue" class="text-neutral-100 font-geist" style="">48 hours</div>
          </div>
          <button class="flex gap-2 ring-1 ring-white/20 hover:bg-white/15 transition-colors text-sm text-neutral-100 font-geist bg-white/10 rounded-full pt-3 pr-6 pb-3 pl-6 items-center justify-center" style="">
            Get started
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="arrow-right" class="lucide lucide-arrow-right"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Micro-copy -->
  <div class="mt-6 text-[11px] font-geist text-neutral-500 flex items-center gap-2" style="">
    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="info" class="lucide lucide-info text-neutral-400"><circle cx="12" cy="12" r="10" class=""></circle><path d="M12 16v-4" class=""></path><path d="M12 8h.01" class=""></path></svg>
    No hidden fees. Transparent, collaborative process from day one.
  </div>

  <script>
    (function () {
      const el = document.getElementById('aura-emf5jfuh5');
      const toggle = el.querySelector('#billingToggle');
      const price = el.querySelector('#price');
      const unit = el.querySelector('#priceUnit');
      const desc = el.querySelector('#planDesc');
      const title = el.querySelector('#planTitle');
      const addon = el.querySelector('#addonNote');
      const scope = el.querySelector('#featureScope');
      const eta = el.querySelector('#etaValue');

      const states = {
        monthly: {
          price: '2500',
          unit: 'month',
          title: 'Subscription',
          desc: 'Ongoing support and flexible design when you need it. Ideal for startups, growing brands, and marketing teams needing consistent creative momentum.',
          addon: 'Optional SEO add‑on ($800/m)',
          scope: 'One active task at a time',
          eta: '48 hours'
        },
        project: {
          price: '4800',
          unit: 'project',
          title: 'Project Sprint',
          desc: 'Focused, milestone‑driven engagement for a defined scope. Perfect for launches, rebrands, or site upgrades.',
          addon: 'Add‑ons available by scope',
          scope: 'Scoped deliverables & milestones',
          eta: '1–2 weeks'
        }
      };

      function setBilling(mode) {
        const s = states[mode];
        if (!s) return;
        price.textContent = s.price;
        unit.textContent = s.unit;
        title.textContent = mode === 'monthly' ? 'Subscription' : 'Project Sprint';
        desc.textContent = s.desc;
        addon.textContent = s.addon;
        scope.textContent = s.scope;
        eta.textContent = s.eta;

        // Toggle button styles and aria
        toggle.querySelectorAll('[data-billing]').forEach(btn => {
          const active = btn.getAttribute('data-billing') === mode;
          btn.setAttribute('aria-pressed', String(active));
          btn.classList.toggle('bg-neutral-100', active);
          btn.classList.toggle('text-black', active);
          btn.classList.toggle('text-neutral-300', !active);
        });

        if (window.lucide) lucide.createIcons();
      }

      toggle.addEventListener('click', (e) => {
        const btn = e.target.closest('[data-billing]');
        if (!btn) return;
        setBilling(btn.getAttribute('data-billing'));
      });

      if (window.lucide) lucide.createIcons();
    })();
  </script>
</div>