---
const webPackages = [
  {
    name: "Starter Landing Package",
    price: 200,
    deposit: 100,
    tag: "Quick Turnaround",
    description: "High-converting single page website optimized for leads & speed.",
    features: [
      "Responsive 1-page design",
      "Typeform / Contact integration",
      "Basic SEO & meta tags",
      "Fast 3-day turnaround",
      "Optional $100/mo retainer"
    ],
    popular: false
  },
  {
    name: "Growth Business Package",
    price: 1500,
    deposit: 750,
    tag: "n8n Auto Funnel",
    description: "Complete custom website with content management & booking funnel.",
    features: [
      "Multi-page custom website",
      "Calendly & Pipedrive CRM sync",
      "Stripe payment deposit flow",
      "3 months maintenance included",
      "SEO & analytics dashboard"
    ],
    popular: true
  },
  {
    name: "Enterprise System Package",
    price: 5000,
    deposit: 2500,
    tag: "Full AI Engine",
    description: "Bespoke web platform + custom n8n workflow engine.",
    features: [
      "Custom React / Astro web app",
      "Full n8n workflow engine",
      "Custom API integrations",
      "Dedicated retainer SLA",
      "Priority 24/7 dev support"
    ],
    popular: false
  }
];

const erpPackages = [
  {
    name: "Starter ERP Gateway",
    price: 1000,
    deposit: 500,
    tag: "SMB Operational",
    features: ["Core operational modules", "Role-based user permissions", "Basic PDF reporting", "Staff onboarding guide"]
  },
  {
    name: "Standard Industry ERP",
    price: 2500,
    deposit: 1250,
    tag: "Recommended",
    features: ["School SIS / Hospital / POS", "Automated invoicing & billing", "Pipedrive / Stripe sync", "Database backup suite"]
  },
  {
    name: "Custom Enterprise ERP",
    price: 5000,
    deposit: 2500,
    tag: "Full Stack",
    features: ["Multi-branch architecture", "Custom workflow triggers", "Dedicated cloud deployment", "Ongoing maintenance retainer"]
  }
];
---

<section class="py-24 relative overflow-hidden bg-[#090A0F]" id="pricing">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
    
    <!-- Section Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-n8n-500/10 border border-n8n-500/30 text-n8n-400 text-xs font-mono mb-4">
        <span>● TRANSPARENT INVESTMENT TIERS</span>
      </div>
      <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-white tracking-tight">
        Predictable Pricing, <span class="gradient-text-n8n">Guaranteed ROI</span>
      </h2>
      <p class="mt-4 text-lg text-slate-300">
        All projects feature a standard 50% deposit milestone structure. No hidden fees, clear deliverables.
      </p>
    </div>

    <!-- Highlight Box: $100/mo Dedicated Maintenance & SLA -->
    <div class="glass-panel rounded-3xl p-8 mb-16 border-emerald-500/30 bg-gradient-to-r from-[#0E1017] via-[#141824] to-emerald-950/30">
      <div class="grid md:grid-cols-12 gap-6 items-center">
        <div class="md:col-span-8 space-y-2">
          <div class="inline-flex items-center space-x-2 text-xs font-mono text-emerald-400">
            <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
            <span>HIGH-AVAILABILITY SYSTEM SLA</span>
          </div>
          <h3 class="text-2xl font-bold text-white">
            Dedicated System Maintenance & SLA: $100 / month
          </h3>
          <p class="text-sm text-slate-300">
            Continuous uptime monitoring, security patch updates, automated database backups, and rapid incident response SLA for your custom website or workflow engine.
          </p>
        </div>
        
        <div class="md:col-span-4 flex flex-col items-center md:items-end justify-center">
          <div class="text-3xl font-extrabold text-emerald-400 font-mono">$100 / mo</div>
          <div class="text-xs text-slate-400 font-mono">Dedicated SLA Protection</div>
          <a href="#qualification" class="mt-3 px-5 py-2.5 rounded-xl text-xs font-bold text-slate-950 bg-emerald-400 hover:bg-emerald-300 transition-colors shadow-glow-emerald">
            Reserve SLA Retainer →
          </a>
        </div>
      </div>
    </div>

    <!-- Web Development Packages Grid -->
    <div class="mb-20">
      <div class="flex items-center justify-between mb-8">
        <div>
          <h3 class="text-2xl font-bold text-white">Web Development Packages</h3>
          <p class="text-sm text-slate-400">Landing pages, custom websites & full-stack web solutions</p>
        </div>
        <span class="text-xs font-mono text-n8n-400 bg-n8n-500/10 px-3 py-1 rounded-full border border-n8n-500/30 hidden sm:inline-block">
          50% Deposit + Milestone Delivery
        </span>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        {webPackages.map((pkg) => (
          <div class={`glass-card rounded-2xl p-8 flex flex-col justify-between relative transition-all duration-300 ${pkg.popular ? 'border-n8n-500 shadow-glow-n8n bg-[#141824]' : 'hover:border-[#1E2330]'}`}>
            
            {pkg.popular && (
              <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 bg-gradient-to-r from-n8n-500 to-n8n-600 text-white text-[10px] font-mono font-bold px-3 py-1 rounded-full shadow-lg">
                MOST POPULAR
              </div>
            )}

            <div>
              <div class="flex justify-between items-center mb-4">
                <span class="text-xs font-mono px-2.5 py-1 rounded-md bg-[#090A0F] text-slate-300 border border-[#1E2330]">
                  {pkg.tag}
                </span>
                <span class="text-xs font-mono text-slate-400">Deposit: ${pkg.deposit}</span>
              </div>

              <h4 class="text-xl font-bold text-white mb-2">{pkg.name}</h4>
              <p class="text-xs text-slate-300 mb-6">{pkg.description}</p>
              
              <div class="flex items-baseline space-x-2 mb-6">
                <span class="text-4xl font-extrabold text-white font-mono">${pkg.price}</span>
                <span class="text-xs text-slate-400">USD one-time</span>
              </div>

              <div class="border-t border-[#1E2330] pt-6 mb-6">
                <ul class="space-y-3">
                  {pkg.features.map((feat) => (
                    <li class="flex items-center text-xs text-slate-200">
                      <svg class="w-4 h-4 text-emerald-400 mr-2.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      {feat}
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <a 
              href="#qualification"
              class={`w-full text-center py-3 rounded-xl font-bold text-xs transition-all ${pkg.popular ? 'bg-gradient-to-r from-n8n-500 to-n8n-600 text-white shadow-glow-n8n hover:from-n8n-400 hover:to-n8n-500' : 'bg-[#090A0F] hover:bg-[#141824] text-white border border-[#1E2330]'}`}
            >
              Select {pkg.name} →
            </a>

          </div>
        ))}
      </div>
    </div>

    <!-- ERP & Custom Automation Systems Grid -->
    <div>
      <div class="mb-8">
        <h3 class="text-2xl font-bold text-white">ERP Solutions & Automation Systems</h3>
        <p class="text-sm text-slate-400">School SIS, Hospital OS, POS & n8n workflow integration</p>
      </div>

      <div class="grid md:grid-cols-3 gap-8">
        {erpPackages.map((pkg) => (
          <div class="glass-card rounded-2xl p-6 flex flex-col justify-between hover:border-clawhub-400/40 transition-all">
            <div>
              <div class="flex justify-between items-center mb-3">
                <span class="text-xs font-mono px-2 py-0.5 rounded bg-[#090A0F] text-slate-300">{pkg.tag}</span>
                <span class="text-xs font-mono text-slate-400">50% Dep: ${pkg.deposit}</span>
              </div>
              <h4 class="text-lg font-bold text-white mb-2">{pkg.name}</h4>
              <div class="text-3xl font-extrabold text-clawhub-400 font-mono mb-4">${pkg.price}</div>
              <ul class="space-y-2 mb-6">
                {pkg.features.map((feat) => (
                  <li class="flex items-center text-xs text-slate-300">
                    <span class="text-emerald-400 mr-2">✓</span> {feat}
                  </li>
                ))}
              </ul>
            </div>
            <a href="#qualification" class="w-full text-center py-2.5 rounded-xl font-semibold text-xs bg-[#090A0F] hover:bg-[#141824] text-white border border-[#1E2330] transition-colors">
              Get ERP Proposal →
            </a>
          </div>
        ))}
      </div>
    </div>

  </div>
</section>