import React, { useState, useEffect } from "react";
import {
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
  CheckIcon,
  XMarkIcon,
  CreditCardIcon,
  ShieldCheckIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";
import { getPublicPlans } from "../../services/billing.api";
import { PricingTable, PricingPlan } from "../../components/ui/pricing-table";
import PricingTable1 from "../../components/ui/pricing-table/pricing-table-1";
import { Link } from "react-router-dom";
import { Plan, convertToPricingPlan } from "../../utils/pricingHelpers";
import Button from "../../components/ui/button/Button";

const Pricing: React.FC = () => {
  const [plans, setPlans] = useState<Plan[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [managedTier, setManagedTier] = useState<'lite' | 'pro'>('lite');

  useEffect(() => {
    const fetchPlans = async () => {
      try {
        const data = await getPublicPlans();
        setPlans(data);
        setLoading(false);
      } catch (err) {
        console.error('Error fetching public plans:', err);
        setError('Failed to load pricing plans');
        setLoading(false);
      }
    };
    fetchPlans();
  }, []);

  const featureMatrix = [
    { feature: "ACCOUNT & ACCESS", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Sites", starter: "2", growth: "5", scale: "Unlimited" },
    { feature: "Team Users", starter: "1", growth: "3", scale: "5" },
    { feature: "User Roles & Permissions", starter: true, growth: true, scale: true },
    { feature: "Multi-Site Management", starter: true, growth: true, scale: true },
    
    { feature: "CREDITS & USAGE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Monthly Credits", starter: "1,000", growth: "3,000", scale: "5,000" },
    { feature: "Usage Analytics Dashboard", starter: true, growth: true, scale: true },
    { feature: "Additional Credit Packages", starter: "Available", growth: "Available", scale: "Available" },
    
    { feature: "PLANNER MODULE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Bulk Keyword Import (CSV)", starter: "Unlimited rows", growth: "Unlimited rows", scale: "Unlimited rows" },
    { feature: "AI-Powered Clustering", starter: "100 clusters", growth: "300 clusters", scale: "500 clusters" },
    { feature: "Global Seed Keyword Database", starter: "100+ industry sectors", growth: "100+ industry sectors", scale: "100+ industry sectors" },
    { feature: "Search Intent Classification", starter: true, growth: true, scale: true },
    { feature: "High-Opportunity Keywords", starter: true, growth: true, scale: true },
    { feature: "Industry & Sector Organization", starter: true, growth: true, scale: true },
    { feature: "Advanced Filtering & Search", starter: true, growth: true, scale: true },
    
    { feature: "CONTENT IDEATION", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "AI Content Idea Generation", starter: "300 ideas", growth: "900 ideas", scale: "1,500 ideas" },
    { feature: "Structured Content Briefs", starter: true, growth: true, scale: true },
    { feature: "Word Count Estimation", starter: true, growth: true, scale: true },
    { feature: "Priority Scoring", starter: true, growth: true, scale: true },
    { feature: "Editorial Calendar Integration", starter: true, growth: true, scale: true },
    
    { feature: "WRITER MODULE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Premium AI Content Generation", starter: "100K words", growth: "300K words", scale: "500K words" },
    { feature: "Smart Content Structuring", starter: true, growth: true, scale: true },
    { feature: "SEO Optimization (Built-in)", starter: true, growth: true, scale: true },
    { feature: "Customizable Word Counts", starter: "500-5,000+", growth: "500-5,000+", scale: "500-5,000+" },
    { feature: "Brand Voice Consistency", starter: true, growth: true, scale: true },
    { feature: "HTML Content Editor", starter: true, growth: true, scale: true },
    { feature: "SEO Metadata Management", starter: true, growth: true, scale: true },
    { feature: "Taxonomy Manager", starter: true, growth: true, scale: true },
    
    { feature: "IMAGE GENERATION", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "AI Image Generation", starter: "300 basic / 60 premium", growth: "900 basic / 180 premium", scale: "1,500 basic / 300 premium" },
    { feature: "Featured Images", starter: true, growth: true, scale: true },
    { feature: "In-Article Images", starter: true, growth: true, scale: true },
    { feature: "AI Providers", starter: "DALL-E 3, Runware, Bria", growth: "DALL-E 3, Runware, Bria", scale: "DALL-E 3, Runware, Bria" },
    { feature: "Credits: Basic Images", starter: "5 per image", growth: "5 per image", scale: "5 per image" },
    { feature: "Credits: Premium Images", starter: "25 per image", growth: "25 per image", scale: "25 per image" },
    { feature: "Multiple Image Sizes", starter: true, growth: true, scale: true },
    { feature: "Automatic Alt Text", starter: true, growth: true, scale: true },
    { feature: "Style Presets", starter: true, growth: true, scale: true },
    
    { feature: "AUTOMATION PIPELINE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "7-Stage Automation Pipeline", starter: true, growth: true, scale: true },
    { feature: "Scheduled Automation Runs", starter: "Daily/Weekly/Monthly", growth: "Daily/Weekly/Monthly", scale: "Daily/Weekly/Monthly" },
    { feature: "Configurable Batch Sizes", starter: true, growth: true, scale: true },
    { feature: "Pause & Resume", starter: true, growth: true, scale: true },
    { feature: "Credit Estimation", starter: true, growth: true, scale: true },
    { feature: "Detailed Activity Logs", starter: true, growth: true, scale: true },
    { feature: "Manual Override Triggers", starter: true, growth: true, scale: true },
    
    { feature: "INTEGRATIONS", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Shopify, WordPress, and Custom Integrations", starter: true, growth: true, scale: true },
    { feature: "IGNY8 WP Bridge Plugin", starter: true, growth: true, scale: true },
    { feature: "1-Click API-Based Integration", starter: true, growth: true, scale: true },
    { feature: "Custom Integration Support", starter: true, growth: true, scale: true },
    { feature: "Shopify Integration", starter: "🔜 Coming Soon", growth: "🔜 Coming Soon", scale: "🔜 Coming Soon" },
    
    { feature: "MULTI-PLATFORM PUBLISHING", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "One-Click Publishing", starter: true, growth: true, scale: true },
    { feature: "Automatic Content & Media Upload", starter: true, growth: true, scale: true },
    { feature: "Bidirectional Status Sync", starter: true, growth: true, scale: true },
    { feature: "Taxonomy Synchronization", starter: true, growth: true, scale: true },
    { feature: "SEO Metadata Sync", starter: true, growth: true, scale: true },
    { feature: "Custom Fields Support", starter: true, growth: true, scale: true },
    { feature: "Multiple sites (Shopify, WordPress, custom)", starter: "Up to 2", growth: "Up to 5", scale: "Unlimited" },
    { feature: "API Key Authentication", starter: true, growth: true, scale: true },
    { feature: "Error Handling & Retry", starter: true, growth: true, scale: true },
    
    { feature: "CUSTOMIZATION", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Custom AI Prompts", starter: true, growth: true, scale: true },
    { feature: "Brand Voice Configuration", starter: true, growth: true, scale: true },
    { feature: "Content Type Templates", starter: true, growth: true, scale: true },
    { feature: "Advanced AI Parameter Tuning", starter: true, growth: true, scale: true },
    
    { feature: "BILLING & INVOICING", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Usage Dashboard", starter: true, growth: true, scale: true },
    { feature: "Usage Analytics", starter: true, growth: true, scale: true },
    { feature: "Invoice Management", starter: true, growth: true, scale: true },
    { feature: "Multiple Payment Methods", starter: true, growth: true, scale: true },
    { feature: "PDF Invoice Download", starter: true, growth: true, scale: true },
    
    { feature: "SUPPORT & DOCUMENTATION", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Email Support", starter: true, growth: true, scale: true },
    { feature: "Documentation Access", starter: true, growth: true, scale: true },
    { feature: "Video Tutorials", starter: true, growth: true, scale: true },
    { feature: "API Documentation", starter: true, growth: true, scale: true },
    
    { feature: "SECURITY & COMPLIANCE", starter: null, growth: null, scale: null, isCategory: true },
    { feature: "Enterprise Authentication", starter: true, growth: true, scale: true },
    { feature: "Data Encryption", starter: true, growth: true, scale: true },
  ];

  return (
    <>
      <SEO meta={getMetaTags("pricing")} />
      <style>{`
        /* Pricing Table Component Styles - Embedded for Marketing Site */
        .pricing-table-wrapper {
          max-width: 1660px;
          margin: 0 auto;
        }
        
        /* Ensure Tailwind classes work properly */
        .pricing-table-wrapper * {
          box-sizing: border-box;
        }
        
        /* Badge component styles */
        .badge-success {
          background-color: var(--color-success, #2CA18E);
          color: white;
          padding: 0.25rem 0.75rem;
          border-radius: 0.375rem;
          font-size: 0.75rem;
          font-weight: 600;
          display: inline-block;
        }
        
        .badge-primary {
          background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
          color: white;
          padding: 0.375rem 0.75rem;
          border-radius: 0.5rem;
          font-size: 0.75rem;
          font-weight: 600;
          display: inline-block;
          box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 30%, transparent);
        }
        
        /* Primary button styles */
        .btn-primary {
          background: linear-gradient(135deg, var(--color-primary, #2C7AA1) 0%, var(--color-brand-700, #236185) 100%);
          color: white;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 600;
          font-size: 0.9375rem;
          transition: all 0.2s ease;
          border: none;
          cursor: pointer;
          width: 100%;
          box-shadow: 0 4px 12px color-mix(in oklch, var(--color-primary) 30%, transparent);
        }
        
        .btn-primary:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px color-mix(in oklch, var(--color-primary) 40%, transparent);
        }
        
        .btn-primary:active:not(:disabled) {
          transform: translateY(0);
        }
        
        .btn-primary:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }
        
        /* Outline button styles */
        .btn-outline {
          background-color: var(--color-gray-800, #1e293b);
          color: white;
          padding: 0.75rem 1.5rem;
          border-radius: 0.5rem;
          font-weight: 600;
          font-size: 0.9375rem;
          transition: all 0.2s ease;
          border: 2px solid var(--color-gray-700, #334155);
          cursor: pointer;
          width: 100%;
        }
        
        .btn-outline:hover:not(:disabled) {
          background-color: var(--color-gray-700, #334155);
          border-color: var(--color-gray-600, #475569);
          transform: translateY(-2px);
        }
        
        .btn-outline:active:not(:disabled) {
          transform: translateY(0);
        }
        
        .btn-outline:disabled {
          opacity: 0.6;
          cursor: not-allowed;
          transform: none;
        }
        
        /* Featured plan highlight */
        .pricing-card-featured {
          background: linear-gradient(135deg, var(--color-gray-800, #1e293b) 0%, var(--color-gray-700, #334155) 100%) !important;
          color: white;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }
        
        .pricing-card-featured h3,
        .pricing-card-featured .price-text {
          color: white !important;
        }
        
        .pricing-card-featured p,
        .pricing-card-featured span:not(.badge-primary):not(.btn-primary) {
          color: var(--color-gray-200, #e2e8f0) !important;
        }
        
        .pricing-card-featured li span {
          color: var(--color-gray-200, #e2e8f0) !important;
        }
        
        .pricing-card-featured .line-through {
          color: var(--color-gray-400, #94a3b8) !important;
        }
        
        /* Check icon colors */
        .pricing-card-featured svg {
          color: var(--color-success, #2CA18E) !important;
        }
        
        /* Strikethrough price */
        .line-through {
          text-decoration: line-through;
          opacity: 0.6;
        }
      `}</style>
      <div className="bg-white">
      {/* PRICING HERO SECTION */}
      <section className="relative overflow-hidden bg-gradient-to-b from-white via-gray-50/30 to-white">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),transparent_60%)]" />
        
        <div className="relative max-w-4xl mx-auto px-6 pt-12 md:pt-16 pb-6 text-center z-10">
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-gray-500 bg-gray-100 px-4 py-2 rounded-full mb-6">
            Pricing
          </span>
          <h1 className="text-4xl md:text-5xl font-bold leading-tight text-gray-900 mb-0">
            Simple plans that scale with your automation goals.
          </h1>
        </div>

        {/* SPECIAL PROMO BANNER */}
        <div className="relative max-w-5xl mx-auto px-6 z-10">
          <div className="relative overflow-hidden rounded-2xl bg-gradient-to-r from-warning-500 via-warning-500 to-error-500 p-[2px] shadow-xl">
            <div className="relative bg-gradient-to-r from-warning-50 via-warning-50 to-error-50 rounded-2xl px-6 py-4 flex items-center justify-center gap-3">
              {/* Fire Icon */}
              <svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
              </svg>
              
              {/* Message Text */}
              <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3">
                <span className="inline-flex items-center gap-2 bg-gradient-to-r from-warning-600 to-warning-600 text-white px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider shadow-lg">
                  <svg className="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                  </svg>
                  Limited Time
                </span>
                <p className="text-base sm:text-lg font-bold text-transparent bg-clip-text bg-gradient-to-r from-warning-700 via-warning-700 to-error-700">
                  Upto 33% Lifetime Discount on all Plans for First 25 Users!
                </p>
              </div>
              
              {/* Fire Icon */}
              <svg className="w-6 h-6 text-warning-600 animate-pulse" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path fillRule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clipRule="evenodd"></path>
              </svg>
            </div>
          </div>
        </div>
      </section>

      {/* LOADING/ERROR STATES */}
      {loading && (
        <section className="max-w-7xl mx-auto px-6 pb-24">
          <div className="text-center py-12">
            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-[var(--color-primary)]"></div>
            <p className="mt-4 text-gray-600">Loading pricing plans...</p>
          </div>
        </section>
      )}

      {error && (
        <section className="max-w-7xl mx-auto px-6 pb-24">
          <div className="text-center py-12">
            <p className="text-error-600">{error}</p>
            <Button
              variant="primary"
              tone="brand"
              size="md"
              onClick={() => window.location.reload()}
              className="mt-4 px-6 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)]"
            >
              Retry
            </Button>
          </div>
        </section>
      )}

      {/* PRICING TABLES SECTION - Dynamic Backend Plans */}
      {!loading && !error && plans.length > 0 && (
        <section className="px-6 py-8">
          <div className="pricing-table-wrapper">
            <PricingTable1
              plans={plans.map(convertToPricingPlan)}
              showToggle={true}
              onPlanSelect={(plan) => {
                window.location.href = `https://app.igny8.com/signup?plan=${plan.slug || plan.id}`;
              }}
            />
          </div>

          <div className="max-w-5xl mx-auto mt-10">
            <div className="flex justify-center">
              <div className="flex items-center justify-center w-20 h-20 rounded-full bg-white shadow-md border border-gray-200 text-[var(--color-primary)] text-5xl">
                +
              </div>
            </div>

            <div className="mt-6 rounded-2xl border border-brand-200 bg-brand-50 px-6 py-6 shadow-sm">
              <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                <div className="space-y-2">
                  <div className="flex items-center gap-3">
                    <h3 className="text-lg font-semibold text-gray-900">
                      Managed Add-on (Per Site)
                    </h3>
                    <span className="inline-flex items-center rounded-full bg-warning-700 px-2.5 py-1 text-xs font-semibold text-white">
                      COMING SOON
                    </span>
                  </div>
                  <p className="text-sm text-gray-600">
                    Setup, monthly planning, QA, publishing ops, reporting, and tuning.
                  </p>
                </div>

                <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
                  <div className="inline-flex rounded-full bg-white/80 p-1 border border-gray-200">
                    <button
                      type="button"
                      onClick={() => setManagedTier('lite')}
                      className={`px-4 py-2 text-sm font-medium rounded-full transition ${
                        managedTier === 'lite'
                          ? 'bg-[var(--color-success)] text-white shadow'
                          : 'text-gray-600 hover:text-gray-900'
                      }`}
                    >
                      Managed Lite
                    </button>
                    <button
                      type="button"
                      onClick={() => setManagedTier('pro')}
                      className={`px-4 py-2 text-sm font-medium rounded-full transition ${
                        managedTier === 'pro'
                          ? 'bg-[var(--color-success)] text-white shadow'
                          : 'text-gray-600 hover:text-gray-900'
                      }`}
                    >
                      Managed Pro
                    </button>
                  </div>

                  <div className="text-right">
                    <div className="text-xl font-bold text-gray-900">
                      {managedTier === 'lite' ? '$100' : '$300'}
                      <span className="text-sm font-medium text-gray-500"> /site/month</span>
                    </div>
                    <div className="text-xs text-gray-500">Optional add-on</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      )}

      {/* COMPARISON TABLE SECTION REMOVED */}
      {!loading && !error && false && (
      <section className="max-w-7xl mx-auto px-6 pb-24 pt-16">
        <h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">
          Compare plan capabilities
        </h3>
        <div className="overflow-hidden rounded-3xl border-2 border-gray-200 bg-white shadow-lg">
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead className="bg-gradient-to-r from-[var(--color-primary)]/10 via-[var(--color-info)]/10 to-[var(--color-success)]/10 sticky top-0">
                <tr>
                  <th className="px-6 py-4 text-left font-semibold text-gray-900">Capability</th>
                  <th className="px-6 py-4 text-center font-semibold text-gray-900">Starter</th>
                  <th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
                    Growth
                  </th>
                  <th className="px-6 py-4 text-center font-semibold text-gray-900">Scale</th>
                </tr>
              </thead>
              <tbody>
                {featureMatrix.map((row, index) => {
                  // Category row styling
                  if (row.isCategory) {
                    return (
                      <tr key={row.feature} className="bg-gradient-to-r from-gray-100 to-gray-50">
                        <td colSpan={4} className="px-6 py-4 text-sm font-bold text-gray-900 uppercase tracking-wider">
                          {row.feature}
                        </td>
                      </tr>
                    );
                  }
                  
                  return (
                    <tr
                      key={row.feature}
                      className={index % 2 === 0 ? "bg-white" : "bg-gray-50/50"}
                    >
                      <td className="px-6 py-5 text-gray-900 font-medium">{row.feature}</td>
                      <td className="px-6 py-5 text-center text-gray-700">
                        {row.starter === true ? (
                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                        ) : row.starter === false ? (
                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                        ) : row.starter === null ? (
                          <span className="text-gray-400">—</span>
                        ) : (
                          <span className="inline-flex items-center gap-1">
                            <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
                            {row.starter}
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/5 to-transparent">
                        {row.growth === true ? (
                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                        ) : row.growth === false ? (
                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                        ) : row.growth === null ? (
                          <span className="text-gray-400">—</span>
                        ) : (
                          <span className="inline-flex items-center gap-1">
                            <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
                            {row.growth}
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-5 text-center text-gray-700">
                        {row.scale === true ? (
                          <CheckIcon className="h-5 w-5 text-[var(--color-success)] mx-auto" />
                        ) : row.scale === false ? (
                          <XMarkIcon className="h-5 w-5 text-gray-300 mx-auto" />
                        ) : row.scale === null ? (
                          <span className="text-gray-400">—</span>
                        ) : (
                          <span className="inline-flex items-center gap-1">
                            <span className="size-1.5 rounded-full bg-[var(--color-info)]"></span>
                            {row.scale}
                          </span>
                        )}
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>
      </section>
      )}

      {/* AGENCY CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-success)] via-[var(--color-primary-dark)] to-[var(--color-primary)] mt-[30px]">
        {/* Radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
        
        <div className="relative max-w-4xl mx-auto px-6 py-14 md:py-18 text-center z-10">
          <h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight max-w-none md:whitespace-nowrap">
            Agency & enterprise plans built for scale.
          </h2>
          <p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto font-medium">
            Need more credits, more sites, and lower effective costs? We’ll tailor a plan that fits your volume and workflow.
          </p>
          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <Link
              to="/contact"
              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
            >
              <ChatBubbleLeftRightIcon className="h-5 w-5" />
              Talk to sales
            </Link>
          </div>
        </div>
      </section>

      {/* INFO BLOCKS SECTION */}
      <section className="bg-gradient-to-b from-white via-gray-50/30 to-white">
        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-success)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
            <div className="flex items-center gap-3 mb-4">
              <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                <CreditCardIcon className="h-6 w-6" />
              </div>
              <h4 className="text-lg font-semibold text-gray-900">
                Usage-based credits explained
              </h4>
            </div>
            <p className="text-sm text-gray-600 leading-relaxed">
              Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
            </p>
            <p className="text-sm text-gray-600 leading-relaxed">
              Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
            </p>
          </div>
          <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/5 via-white to-[var(--color-info)]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
            <div className="flex items-center gap-3 mb-4">
              <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                <ShieldCheckIcon className="h-6 w-6" />
              </div>
              <h4 className="text-lg font-semibold text-gray-900">
                Security & compliance
              </h4>
            </div>
            <p className="text-sm text-gray-600 leading-relaxed">
              Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
            </p>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Pricing;