'use client';
import React, { useEffect, useRef, useState } from 'react';
import { Check, X, Info, ChevronDown, ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { useLanguage } from '@client/contexts/LanguageContext';

function useInView(threshold = 0.15) {
  const ref = useRef<HTMLDivElement>(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref?.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setInView(true); obs.disconnect(); } }, { threshold });
    obs?.observe(el);
    return () => obs?.disconnect();
  }, [threshold]);
  return { ref, inView };
}

function useStaggeredInView(count: number, threshold = 0.1) {
  const ref = useRef<HTMLDivElement>(null);
  const [visibleCount, setVisibleCount] = useState(0);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        obs.disconnect();
        for (let i = 0; i < count; i++) {
          setTimeout(() => setVisibleCount(v => v + 1), i * 130);
        }
      }
    }, { threshold });
    obs.observe(el);
    return () => obs.disconnect();
  }, [count, threshold]);
  return { ref, visibleCount };
}

interface DbPlan {
  id: string;
  name: string;
  price_monthly: number;
  price_annual: number;
  features: string[];
  limits: Record<string, unknown>;
  is_active: boolean;
}

const planStyleBase: Record<string, {
  colSpan: string;
  gradient: string;
  headerBg: string;
  border: string;
  badgeStyle: string;
  isPopular: boolean;
  isDark: boolean;
  ctaStyle: string;
  glowStyle: string;
  accentColor: string;
  priceColor: string;
  missingKeys: string[];
  highlightKey: string | null;
  badgeKey: string | null;
}> = {
  Starter: {
    colSpan: 'lg:col-span-4',
    gradient: 'from-slate-50 to-gray-50 dark:from-gray-900/80 dark:to-slate-900/80',
    headerBg: 'bg-gradient-to-br from-slate-50 to-gray-100 dark:from-gray-900 dark:to-slate-900',
    border: 'border-gray-200 dark:border-gray-700',
    badgeKey: null,
    badgeStyle: '',
    isPopular: false,
    isDark: false,
    ctaStyle: 'bg-slate-900 dark:bg-white hover:bg-slate-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 hover:shadow-md',
    glowStyle: 'hover:shadow-slate-200/60 dark:hover:shadow-black/30',
    accentColor: 'text-slate-700 dark:text-slate-300',
    priceColor: 'text-slate-900 dark:text-white',
    missingKeys: ['landing.pricing.plan.missing.multiBranch', 'landing.pricing.plan.missing.customAI', 'landing.pricing.plan.missing.prioritySupport', 'landing.pricing.plan.missing.apiAccess', 'landing.pricing.plan.missing.whiteLabel'],
    highlightKey: null,
  },
  Growth: {
    colSpan: 'lg:col-span-5',
    gradient: 'from-orange-500 to-orange-600',
    headerBg: 'bg-gradient-to-br from-orange-500 to-orange-600',
    border: 'border-orange-400',
    badgeKey: 'landing.pricing.plan.badge.mostPopular',
    badgeStyle: 'bg-white text-orange-600',
    isPopular: true,
    isDark: false,
    ctaStyle: 'bg-white hover:bg-orange-50 text-orange-600 font-bold shadow-lg hover:shadow-xl',
    glowStyle: 'hover:shadow-orange-300/50 dark:hover:shadow-orange-500/30 shadow-xl shadow-orange-500/20',
    accentColor: 'text-white',
    priceColor: 'text-white',
    missingKeys: ['landing.pricing.plan.missing.multiBranch3', 'landing.pricing.plan.missing.apiAccess', 'landing.pricing.plan.missing.whiteLabel'],
    highlightKey: 'landing.pricing.plan.highlight.growth',
  },
  Enterprise: {
    colSpan: 'lg:col-span-3',
    gradient: 'from-gray-900 to-slate-900',
    headerBg: 'bg-gradient-to-br from-gray-900 to-slate-950',
    border: 'border-gray-700',
    badgeKey: 'landing.pricing.plan.badge.bestValue',
    badgeStyle: 'bg-teal-500 text-white',
    isPopular: false,
    isDark: true,
    ctaStyle: 'bg-white hover:bg-gray-100 text-gray-900 hover:shadow-md',
    glowStyle: 'hover:shadow-slate-400/20 dark:hover:shadow-black/40',
    accentColor: 'text-gray-300',
    priceColor: 'text-white',
    missingKeys: [],
    highlightKey: null,
  },
};

function getPlanStyle(name: string, index: number, t: (k: string, d: string) => string) {
  const key = name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
  const base = planStyleBase[key];
  if (base) {
    return {
      ...base,
      badge: base.badgeKey ? t(base.badgeKey, base.badgeKey === 'landing.pricing.plan.badge.mostPopular' ? 'Most Popular' : 'Best Value') : null,
      highlight: base.highlightKey ? t(base.highlightKey, 'Most chosen by growing restaurants') : null,
      missing: base.missingKeys.map(k => {
        const defaults: Record<string, string> = {
          'landing.pricing.plan.missing.multiBranch': 'Multi-branch',
          'landing.pricing.plan.missing.customAI': 'Custom AI personality',
          'landing.pricing.plan.missing.prioritySupport': 'Priority support',
          'landing.pricing.plan.missing.apiAccess': 'API access',
          'landing.pricing.plan.missing.whiteLabel': 'White-label',
          'landing.pricing.plan.missing.multiBranch3': 'Multi-branch (up to 3)',
        };
        return t(k, defaults[k] ?? k);
      }),
    };
  }
  const colSpans = ['lg:col-span-4', 'lg:col-span-4', 'lg:col-span-4'];
  return {
    colSpan: colSpans[index % 3] ?? 'lg:col-span-4',
    gradient: 'from-slate-50 to-gray-50 dark:from-gray-900/80 dark:to-slate-900/80',
    headerBg: 'bg-gradient-to-br from-slate-50 to-gray-100 dark:from-gray-900 dark:to-slate-900',
    border: 'border-gray-200 dark:border-gray-700',
    badge: null,
    badgeStyle: '',
    isPopular: false,
    isDark: false,
    ctaStyle: 'bg-slate-900 dark:bg-white hover:bg-slate-800 dark:hover:bg-gray-100 text-white dark:text-gray-900 hover:shadow-md',
    glowStyle: 'hover:shadow-slate-200/60 dark:hover:shadow-black/30',
    accentColor: 'text-slate-700 dark:text-slate-300',
    priceColor: 'text-slate-900 dark:text-white',
    missing: [] as string[],
    highlight: null,
  };
}

export default function PricingPage() {
  const { t } = useLanguage();
  const [annual, setAnnual] = useState(false);
  const [openFaq, setOpenFaq] = useState<string | null>(null);
  const [plans, setPlans] = useState<DbPlan[]>([]);
  const [loading, setLoading] = useState(true);
  const heroRef = useInView(0.1);
  const { ref: plansGridRef, visibleCount: plansVisible } = useStaggeredInView(plans.length || 3, 0.05);
  const faqRef = useInView(0.1);
  const ctaRef = useInView(0.15);

  const faqs = [
    {
      category: t('landing.pricing.faq.cat.billing', 'Billing'),
      items: [
        { q: t('landing.pricing.faq.billing.q1', 'Can I change plans at any time?'), a: t('landing.pricing.faq.billing.a1', 'Yes. You can upgrade or downgrade at any time. Upgrades take effect immediately; downgrades apply at the next billing cycle.') },
        { q: t('landing.pricing.faq.billing.q2', 'What happens after my free trial?'), a: t('landing.pricing.faq.billing.a2', "After 14 days, you'll be asked to choose a plan. We'll remind you 3 days before the trial ends. No charges without your explicit consent.") },
        { q: t('landing.pricing.faq.billing.q3', 'Do you offer refunds?'), a: t('landing.pricing.faq.billing.a3', 'We offer a 30-day money-back guarantee on all paid plans. No questions asked.') },
      ],
    },
    {
      category: t('landing.pricing.faq.cat.technical', 'Technical'),
      items: [
        { q: t('landing.pricing.faq.technical.q1', 'How long does setup take?'), a: t('landing.pricing.faq.technical.a1', 'Most restaurants are live within 2 hours. We handle the technical setup; you just need to forward your phone number and upload your menu.') },
        { q: t('landing.pricing.faq.technical.q2', 'Does it work with my existing POS?'), a: t('landing.pricing.faq.technical.a2', "We integrate with 50+ POS systems including Square, Toast, Clover, Lightspeed, and more. If yours isn't listed, contact us — we can usually build it.") },
        { q: t('landing.pricing.faq.technical.q3', 'What languages does the AI support?'), a: t('landing.pricing.faq.technical.a3', "Growth plan supports 15 languages. Enterprise supports 30+. The AI automatically detects the customer's language and responds accordingly.") },
      ],
    },
    {
      category: t('landing.pricing.faq.cat.aiAccuracy', 'AI & Accuracy'),
      items: [
        { q: t('landing.pricing.faq.ai.q1', 'How accurate is the AI at taking orders?'), a: t('landing.pricing.faq.ai.a1', 'Our average order accuracy is 98.7% across all restaurants. The AI asks clarifying questions when unsure rather than guessing.') },
        { q: t('landing.pricing.faq.ai.q2', "What happens when the AI can't handle something?"), a: t('landing.pricing.faq.ai.a2', 'The AI escalates to a human staff member via real-time alert. You set the escalation rules — we never leave a customer hanging.') },
        { q: t('landing.pricing.faq.ai.q3', 'Can I customize what the AI says?'), a: t('landing.pricing.faq.ai.a3', "Yes. On Growth and Enterprise plans, you can set the AI's name, personality, tone, and specific responses for common scenarios.") },
      ],
    },
  ];

  useEffect(() => {
    fetch('/api/public/plans')
      .then(r => r.json())
      .then((data: { plans: DbPlan[] }) => {
        if (data.plans && data.plans.length > 0) {
          setPlans(data.plans);
        }
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []);

  return (
    <>
      {/* Hero */}
      <section className="py-20 sm:py-24 text-center relative overflow-hidden">
        <div className="absolute inset-0 -z-10">
          <div className="absolute top-0 left-1/3 w-64 sm:w-80 h-64 sm:h-80 bg-orange-400/15 dark:bg-orange-500/8 rounded-full blur-3xl" />
          <div className="absolute bottom-0 right-1/3 w-64 sm:w-80 h-64 sm:h-80 bg-teal-400/10 dark:bg-teal-500/6 rounded-full blur-3xl" />
        </div>
        <div ref={heroRef.ref}
          className={`max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 transition-all duration-700 ease-out ${heroRef.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`}>
          <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-4">{t('landing.pricing.hero.badge', 'Simple pricing')}</p>
          <h1 className="text-4xl sm:text-5xl font-bold text-gray-900 dark:text-white mb-6">
            {t('landing.pricing.hero.title_p1', 'Pay for what you use.')}<br />
            {t('landing.pricing.hero.title_p2', 'Nothing more.')}
          </h1>
          <p className="text-lg sm:text-xl text-gray-500 dark:text-gray-400 mb-10">{t('landing.pricing.hero.subtitle', 'All plans include a 14-day free trial. No credit card required.')}</p>

          {/* Toggle */}
          <div className="inline-flex items-center gap-3 p-1 rounded-xl bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
            <button onClick={() => setAnnual(false)}
              className={`px-4 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 ${!annual ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}>
              {t('landing.pricing.toggle.monthly', 'Monthly')}
            </button>
            <button onClick={() => setAnnual(true)}
              className={`px-4 sm:px-5 py-2 rounded-lg text-sm font-semibold transition-all duration-200 flex items-center gap-2 ${annual ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}`}>
              {t('landing.pricing.toggle.annual', 'Annual')}
              <span className="px-1.5 py-0.5 rounded-full bg-teal-100 dark:bg-teal-900/40 text-teal-600 dark:text-teal-400 text-xs font-bold">{t('landing.pricing.toggle.save', 'Save 20%')}</span>
            </button>
          </div>
        </div>
      </section>

      {/* Plans */}
      <section className="pb-20 sm:pb-24 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {loading && (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-5 sm:gap-6 animate-pulse">
            {[1, 2, 3].map(i => (
              <div key={i} className="rounded-2xl border-2 border-gray-100 dark:border-gray-800 overflow-hidden">
                <div className="p-6 bg-gray-50 dark:bg-gray-900">
                  <div className="h-5 w-24 bg-gray-200 dark:bg-gray-700 rounded mb-3" />
                  <div className="h-10 w-20 bg-gray-200 dark:bg-gray-700 rounded mb-2" />
                  <div className="h-3 w-32 bg-gray-100 dark:bg-gray-800 rounded" />
                </div>
                <div className="p-6 bg-white dark:bg-gray-900 space-y-3">
                  {[1, 2, 3, 4, 5].map(j => (
                    <div key={j} className="flex items-center gap-2">
                      <div className="w-3 h-3 rounded-full bg-gray-100 dark:bg-gray-800 flex-shrink-0" />
                      <div className="h-3 rounded bg-gray-100 dark:bg-gray-800 flex-1" style={{ width: `${60 + j * 8}%` }} />
                    </div>
                  ))}
                </div>
                <div className="p-6 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
                  <div className="h-10 w-full rounded-xl bg-gray-100 dark:bg-gray-800" />
                </div>
              </div>
            ))}
          </div>
        )}
        {!loading && plans.length === 0 && (
          <div className="py-20 text-center">
            <p className="text-sm text-gray-400 dark:text-gray-500">{t('landing.pricing.empty', 'No plans are currently available. Please check back soon.')}</p>
            <Link href="/contact" className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-orange-500 hover:text-orange-600 transition-colors">
              {t('landing.pricing.contact_sales', 'Contact us for pricing →')}
            </Link>
          </div>
        )}
        <div ref={plansGridRef} className={`grid grid-cols-1 lg:grid-cols-12 gap-5 sm:gap-6 items-start ${loading || plans.length === 0 ? 'hidden' : ''}`}>
          {plans.map((plan, i) => {
            const style = getPlanStyle(plan.name, i, t);
            const price = annual ? Number(plan.price_annual) : Number(plan.price_monthly);
            const features = Array.isArray(plan.features) ? plan.features : [];
            return (
              <div key={plan.id}
                className={`${style.colSpan} relative rounded-2xl border-2 ${style.border} overflow-hidden flex flex-col transition-all duration-300 ease-out hover:-translate-y-2 hover:shadow-2xl ${style.glowStyle} ${i < plansVisible ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-10 scale-[0.96]'}`}
                style={{ transitionDelay: `${i < plansVisible ? 0 : i * 130}ms` }}>

                {style.badge && (
                  <div className={`absolute top-4 right-4 z-10 px-2.5 py-1 rounded-full text-xs font-bold ${style.badgeStyle}`}>
                    {style.badge}
                  </div>
                )}

                {style.isPopular && (
                  <div className="absolute inset-0 rounded-2xl ring-2 ring-orange-400/40 pointer-events-none" />
                )}

                {/* Header */}
                <div className={`p-5 sm:p-6 ${style.headerBg} relative overflow-hidden`}>
                  {style.isPopular && (
                    <div className="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full -translate-y-16 translate-x-16" />
                  )}
                  {style.isDark && (
                    <div className="absolute bottom-0 left-0 w-40 h-40 bg-teal-500/10 rounded-full translate-y-20 -translate-x-20" />
                  )}
                  <div className="relative">
                    <div className="mb-4">
                      <h3 className={`text-xl font-bold mb-1 ${style.isPopular || style.isDark ? 'text-white' : 'text-gray-900 dark:text-white'}`}>{plan.name}</h3>
                    </div>
                    <div className="flex items-end gap-1 mb-1">
                      <span className={`text-4xl sm:text-5xl font-bold tabular-nums ${style.priceColor}`}>${price}</span>
                      <span className={`text-sm mb-2 ${style.isPopular ? 'text-white/70' : style.isDark ? 'text-gray-400' : 'text-gray-400'}`}>{t('landing.pricing.plan.per_month', '/mo')}</span>
                    </div>
                    {annual && <p className={`text-xs ${style.isPopular ? 'text-white/60' : style.isDark ? 'text-gray-500' : 'text-gray-400'}`}>{t('landing.pricing.plan.billed_annually', 'Billed annually')} (${price * 12}/{t('landing.pricing.plan.per_year', 'yr')})</p>}
                    {style.highlight && (
                      <div className="mt-3 inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-white/15 border border-white/20 text-white text-[10px] font-semibold">
                        <Check size={9} strokeWidth={2.5} />
                        {style.highlight}
                      </div>
                    )}
                  </div>
                </div>

                {/* Features */}
                <div className="p-5 sm:p-6 flex-1 bg-white dark:bg-gray-900 space-y-2.5">
                  {features.map((f, j) => (
                    <div key={j} className="flex items-start gap-2.5">
                      <Check size={14} strokeWidth={2.5} className="text-teal-500 flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-gray-700 dark:text-gray-300">{f}</span>
                    </div>
                  ))}
                  {style.missing.map((f, j) => (
                    <div key={j} className="flex items-start gap-2.5 opacity-40">
                      <X size={14} strokeWidth={2} className="text-gray-400 flex-shrink-0 mt-0.5" />
                      <span className="text-sm text-gray-400 dark:text-gray-500">{f}</span>
                    </div>
                  ))}
                </div>

                {/* CTA */}
                <div className="p-5 sm:p-6 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800">
                  <Link href="/register"
                    className={`block w-full py-3 rounded-xl text-sm font-semibold text-center transition-all duration-200 active:scale-95 hover:-translate-y-0.5 ${style.isPopular ? 'bg-orange-500 hover:bg-orange-600 text-white shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40' : style.ctaStyle}`}>
                    {plan.name.toLowerCase() === 'enterprise' ? t('landing.pricing.plan.contact_sales', 'Contact Sales') : t('landing.pricing.plan.start_trial', 'Start Free Trial')}
                  </Link>
                  {style.isPopular && (
                    <p className="text-center text-[10px] text-gray-400 mt-2">{t('landing.pricing.plan.no_card', 'No credit card required')}</p>
                  )}
                </div>
              </div>
            );
          })}
        </div>

        {/* Info note */}
        <div className="mt-8 sm:mt-10 p-4 sm:p-5 rounded-2xl bg-slate-50 dark:bg-slate-900/50 border border-slate-100 dark:border-slate-800 flex flex-col sm:flex-row items-start sm:items-center gap-3 sm:gap-4">
          <div className="w-8 h-8 rounded-lg bg-teal-100 dark:bg-teal-900/40 flex items-center justify-center flex-shrink-0">
            <Info size={14} strokeWidth={2} className="text-teal-600 dark:text-teal-400" />
          </div>
          <div className="flex-1">
            <p className="text-sm text-slate-600 dark:text-slate-400">
              {t('landing.pricing.info.part1', 'All plans include a')} <span className="font-semibold text-slate-800 dark:text-slate-200">{t('landing.pricing.info.trial', '14-day free trial')}</span>, {t('landing.pricing.info.part2', 'onboarding support, and access to our knowledge base. Enterprise customers get a dedicated account manager and custom SLA.')}
            </p>
          </div>
          <Link href="/contact" className="text-sm font-semibold text-orange-600 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-300 flex-shrink-0 transition-colors">
            {t('landing.pricing.talk_to_sales', 'Talk to sales →')}
          </Link>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 sm:py-24 bg-gray-50 dark:bg-[#0d0f14]">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={faqRef?.ref} className={`transition-all duration-700 ${faqRef?.inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'}`}>
            <div className="text-center mb-12 sm:mb-16">
              <p className="text-xs font-semibold text-orange-500 uppercase tracking-widest mb-3">{t('landing.pricing.faq.badge', 'Got questions?')}</p>
              <h2 className="text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white">{t('landing.pricing.faq.title', 'Frequently asked')}</h2>
            </div>
            <div className="space-y-6 sm:space-y-8">
              {faqs?.map((group, gi) => (
                <div key={gi}>
                  <h3 className="text-xs font-bold text-teal-600 dark:text-teal-400 uppercase tracking-widest mb-4">{group?.category}</h3>
                  <div className="space-y-2">
                    {group?.items?.map((item, ii) => {
                      const key = `${gi}-${ii}`;
                      const open = openFaq === key;
                      return (
                        <div key={ii} className={`rounded-xl border overflow-hidden transition-all duration-200 ${open ? 'border-orange-200 dark:border-orange-800 shadow-sm shadow-orange-100/50 dark:shadow-orange-900/20' : 'border-gray-100 dark:border-gray-800'} bg-white dark:bg-gray-900`}>
                          <button onClick={() => setOpenFaq(open ? null : key)}
                            className="w-full flex items-center justify-between px-4 sm:px-5 py-4 text-left hover:bg-orange-50/50 dark:hover:bg-orange-900/10 transition-colors">
                            <span className="font-semibold text-sm text-gray-900 dark:text-white pr-4">{item?.q}</span>
                            <ChevronDown size={16} strokeWidth={2} className={`flex-shrink-0 transition-all duration-200 ${open ? 'rotate-180 text-orange-500' : 'text-gray-400'}`} />
                          </button>
                          {open && (
                            <div className="px-4 sm:px-5 pb-4 text-sm text-gray-500 dark:text-gray-400 leading-relaxed border-t border-gray-50 dark:border-gray-800 pt-3">
                              {item?.a}
                            </div>
                          )}
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-20 sm:py-24 bg-white dark:bg-[#080a0f]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div ref={ctaRef?.ref}
            className={`relative rounded-2xl sm:rounded-3xl overflow-hidden transition-all duration-700 ${ctaRef?.inView ? 'opacity-100 translate-y-0 scale-100' : 'opacity-0 translate-y-10 scale-[0.97]'}`}
            style={{ transitionDuration: '700ms' }}>
            <div className="absolute inset-0 bg-gradient-to-br from-slate-900 via-[#1a0d00] to-slate-900" />
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(249,115,22,0.3),transparent_50%)]" />
            <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_right,rgba(13,148,136,0.15),transparent_50%)]" />
            <div className="relative px-6 sm:px-10 py-14 sm:py-16 text-center">
              <p className="text-xs font-semibold text-orange-400 uppercase tracking-widest mb-4">{t('landing.pricing.cta.badge', 'Start today')}</p>
              <h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">{t('landing.pricing.cta.title', 'Ready to transform your restaurant?')}</h2>
              <p className="text-slate-400 mb-8 max-w-lg mx-auto">{t('landing.pricing.cta.subtitle', 'Start your 14-day free trial. No credit card required. Cancel anytime.')}</p>
              <div className="flex flex-col sm:flex-row justify-center gap-4">
                <Link href="/register" className="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl bg-orange-500 hover:bg-orange-400 text-white font-semibold shadow-lg shadow-orange-500/30 hover:shadow-orange-500/50 hover:-translate-y-1 transition-all duration-200 active:scale-95 animate-glow-pulse">
                  {t('landing.pricing.cta.start_trial', 'Start Free Trial')}
                  <ArrowRight size={14} strokeWidth={2.5} />
                </Link>
                <Link href="/contact" className="inline-flex items-center justify-center gap-2 px-7 py-3.5 rounded-xl border border-slate-600 hover:border-teal-500 text-slate-300 hover:text-teal-400 font-semibold transition-all duration-200 hover:-translate-y-0.5">
                  {t('landing.pricing.cta.talk_to_sales', 'Talk to Sales')}
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}