import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { ArrowRight } from 'lucide-react';
import { SubscriptionPricingCards } from './SubscriptionPricingCards';

export const PricingSection: React.FC = () => {
  const { t } = useTranslation();

  return (
    <section id="pricing" className="py-24 bg-[var(--bg-primary)]">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-8">
          <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
            {t('landing:pricing.title', 'Planes que se Adaptan a tu Negocio')}
          </h2>
          <p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
            {t('landing:pricing.subtitle', 'Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.')}
          </p>
        </div>

        {/* Pricing Cards */}
        <SubscriptionPricingCards mode="landing" />

        {/* Feature Comparison Link */}
        <div className="text-center mt-12">
          <Link
            to="/plans/compare"
            className="text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] font-semibold inline-flex items-center gap-2"
          >
            {t('landing:pricing.compare_link', 'Ver comparación completa de características')}
            <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </section>
  );
};
