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";

interface Plan {
  id: number;
  name: string;
  slug?: string;
  price: number | string;
  original_price?: number | string;
  annual_discount_percent?: number;
  is_featured?: boolean;
  max_sites?: number;
  max_users?: number;
  max_keywords?: number;
  max_clusters?: number;
  max_content_ideas?: number;
  max_content_words?: number;
  max_images_basic?: number;
  max_images_premium?: number;
  max_image_prompts?: number;
  included_credits?: number;
}

const formatNumber = (num: number | undefined | null): string => {
  if (!num || num === 0) return '0';
  if (num >= 1000000) return `${(num / 1000).toFixed(0)}M`;
  if (num >= 1000) return `${(num / 1000).toFixed(0)}K`;
  return num.toString();
};

const convertToPricingPlan = (plan: Plan): PricingPlan => {
  const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
  const features: string[] = [];
  
  if (plan.max_sites) features.push(`${plan.max_sites === 999999 ? 'Unlimited' : plan.max_sites} Site${plan.max_sites > 1 ? 's' : ''}`);
  if (plan.max_users) features.push(`${plan.max_users} Team User${plan.max_users > 1 ? 's' : ''}`);
  if (plan.included_credits) features.push(`${formatNumber(plan.included_credits)} Monthly Credits`);
  if (plan.max_content_words) features.push(`${formatNumber(plan.max_content_words)} Words/Month`);
  if (plan.max_clusters) features.push(`${plan.max_clusters === 999 ? '500' : plan.max_clusters} AI Keyword Clusters`);
  if (plan.max_content_ideas) features.push(`${formatNumber(plan.max_content_ideas)} Content Ideas`);
  if (plan.max_images_basic && plan.max_images_premium) {
    features.push(`${formatNumber(plan.max_images_basic)} Basic / ${formatNumber(plan.max_images_premium)} Premium Images`);
  }
  if (plan.max_image_prompts) features.push(`${formatNumber(plan.max_image_prompts)} Image Prompts`);
  
  // Custom descriptions based on plan name
  let description = `Perfect for ${plan.name.toLowerCase()} needs`;
  if (plan.name.toLowerCase().includes('free')) {
    description = 'Explore core features risk free';
  } else if (plan.name.toLowerCase().includes('starter')) {
    description = 'Launch SEO workflows for small teams';
  } else if (plan.name.toLowerCase().includes('growth')) {
    description = 'Scale content production with confidence';
  } else if (plan.name.toLowerCase().includes('scale')) {
    description = 'Enterprise power for high volume growth';
  }
  
  return {
    id: plan.id,
    slug: plan.slug,
    name: plan.name,
    monthlyPrice: monthlyPrice,
    price: monthlyPrice,
    originalPrice: plan.original_price ? (typeof plan.original_price === 'number' ? plan.original_price : parseFloat(String(plan.original_price))) : undefined,
    annualDiscountPercent: plan.annual_discount_percent || 15,
    period: '/month',
    description: description,
    features,
    buttonText: monthlyPrice === 0 ? 'Free Trial' : 'Choose Plan',
    highlighted: plan.is_featured || false,
  };
};

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

  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: "Dual AI Providers", starter: "Basic + Premium", growth: "Basic + Premium", scale: "Basic + Premium" },
    { feature: "Multiple Image Sizes", starter: true, growth: true, scale: true },
    { feature: "Automatic Alt Text", starter: true, growth: true, scale: true },
    { feature: "Smart Image Prompts", starter: "300", growth: "900", scale: "1,500" },
    { feature: "Advanced Image Controls", 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: "WordPress Integration", 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: "WORDPRESS 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 WordPress Sites", 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: "Credit Balance 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: #10b981;
          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, #0693e3 0%, #0578c2 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 rgba(6, 147, 227, 0.3);
        }
        
        /* Primary button styles */
        .btn-primary {
          background: linear-gradient(135deg, #0693e3 0%, #0578c2 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 rgba(6, 147, 227, 0.3);
        }
        
        .btn-primary:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 6px 16px rgba(6, 147, 227, 0.4);
        }
        
        .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: #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 #334155;
          cursor: pointer;
          width: 100%;
        }
        
        .btn-outline:hover:not(:disabled) {
          background-color: #334155;
          border-color: #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, #1e293b 0%, #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: #e2e8f0 !important;
        }
        
        .pricing-card-featured li span {
          color: #e2e8f0 !important;
        }
        
        .pricing-card-featured .line-through {
          color: #94a3b8 !important;
        }
        
        /* Check icon colors */
        .pricing-card-featured svg {
          color: #10b981 !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-slate-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 py-16 md:py-20 text-center z-10">
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
            Pricing
          </span>
          <h1 className="text-4xl md:text-5xl font-bold leading-tight text-slate-900 mb-4">
            Simple plans that scale with your automation goals.
          </h1>
        </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-slate-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-red-600">{error}</p>
            <button
              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-16">
          <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>
        </section>
      )}

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

      {/* INFO BLOCKS SECTION */}
      <section className="bg-gradient-to-b from-white via-slate-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-[#0693e3]/5 via-white to-[#0bbf87]/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-slate-900">
                Usage-based credits explained
              </h4>
            </div>
            <p className="text-sm text-slate-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-slate-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-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/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-slate-900">
                Security & compliance
              </h4>
            </div>
            <p className="text-sm text-slate-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>

      {/* FINAL CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
        {/* 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-24 md:py-32 text-center z-10">
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
            Let's build a plan tailored to your growth.
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Get guidance for automation mapping, migration, and onboarding.
          </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>
            <a
              href="https://app.igny8.com/signup"
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
            >
              <RocketLaunchIcon className="h-5 w-5" />
              Start free trial
            </a>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Pricing;
