import React from 'react';
import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';

const PricingSection = () => {
  const { t } = useTranslation();
  return (
    <section id="pricing" className="w-full py-32 px-margin_edge max-w-screen-2xl mx-auto flex flex-col items-center gap-16 border-t-2 border-primary/10">
      <div className="text-center">
        <h2 className="text-7xl font-display-lg text-primary">{t('pricing.title', 'Simple Pricing')}</h2>
        <p className="font-accent-note text-4xl text-on-surface-variant mt-4 transform -rotate-2">
          {t('pricing.subtitle', 'No hidden fees, just plain ink.')}
        </p>
      </div>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-12 w-full max-w-6xl items-start">
        {/* Free Tier */}
        <motion.div
          initial={{ opacity: 0, x: -20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          className="bg-surface-container-lowest p-10 rough-border rough-shadow flex flex-col gap-8 transform -rotate-1"
        >
          <div>
            <h3 className="text-4xl font-display-lg text-primary">{t('pricing.free', 'Free')}</h3>
            <div className="font-accent-note text-3xl mt-2 text-secondary">$0 / {t('pricing.month', 'month')}</div>
          </div>
          <ul className="flex flex-col gap-4 text-lg text-on-surface-variant flex-grow">
            {[
              t('pricing.free_feat1', '3 Infinite Canvases'), 
              t('pricing.free_feat2', 'Basic shapes & logic'), 
              t('pricing.free_feat3', 'Community templates')
            ].map(item => (
              <li key={item} className="flex items-center gap-3">
                <span className="material-symbols-outlined text-secondary font-bold text-2xl">done</span> {item}
              </li>
            ))}
          </ul>
          <button className="w-full py-3 rough-border text-primary font-bold text-lg hover:bg-surface-variant transition-colors">
            {t('pricing.start_free', 'Start Free')}
          </button>
        </motion.div>

        {/* Pro Tier */}
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          whileInView={{ opacity: 1, scale: 1.05 }}
          viewport={{ once: true }}
          className="bg-surface-container-lowest p-10 rough-border rough-shadow flex flex-col gap-8 transform rotate-1 border-primary border-[4px] z-10 shadow-[10px_10px_0px_0px_var(--color-primary)] dark:shadow-[10px_10px_0px_0px_rgba(255,255,255,0.07)]"
        >
          <div>
            <h3 className="text-5xl font-display-lg text-primary">
              <span className="highlighter-bg px-2">{t('pricing.pro', 'Pro')}</span>
            </h3>
            <div className="font-accent-note text-4xl mt-3 text-secondary">$10 / {t('pricing.month', 'month')}</div>
          </div>
          <ul className="flex flex-col gap-5 text-xl text-on-surface-variant flex-grow font-medium">
            {[
              t('pricing.pro_feat1', 'Unlimited Canvases'), 
              t('pricing.pro_feat2', 'AI Path Generation'), 
              t('pricing.pro_feat3', 'Advanced Habit Tracking'), 
              t('pricing.pro_feat4', 'Priority Support')
            ].map(item => (
              <li key={item} className="flex items-center gap-3">
                <span className="material-symbols-outlined text-secondary font-bold text-3xl">done</span> {item}
              </li>
            ))}
          </ul>
          <button className="w-full py-4 bg-primary text-on-primary rough-border font-bold text-xl rough-shadow-hover hover:bg-secondary-container hover:text-primary transition-all">
            {t('pricing.go_pro', 'Go Pro')}
          </button>
        </motion.div>

        {/* Team Tier */}
        <motion.div
          initial={{ opacity: 0, x: 20 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true }}
          className="bg-surface-container-lowest p-10 rough-border rough-shadow flex flex-col gap-8 transform -rotate-1"
        >
          <div>
            <h3 className="text-4xl font-display-lg text-primary">{t('pricing.team', 'Team')}</h3>
            <div className="font-accent-note text-3xl mt-2 text-secondary">$25 / {t('pricing.user', 'user')}</div>
          </div>
          <ul className="flex flex-col gap-4 text-lg text-on-surface-variant flex-grow">
            {[
              t('pricing.team_feat1', 'Everything in Pro'), 
              t('pricing.team_feat2', 'Real-time Collaboration'), 
              t('pricing.team_feat3', 'Team Workspaces'), 
              t('pricing.team_feat4', 'Admin Tools')
            ].map(item => (
              <li key={item} className="flex items-center gap-3">
                <span className="material-symbols-outlined text-secondary font-bold text-2xl">done</span> {item}
              </li>
            ))}
          </ul>
          <button className="w-full py-3 rough-border text-primary font-bold text-lg hover:bg-surface-variant transition-colors">
            {t('pricing.contact_us', 'Contact Us')}
          </button>
        </motion.div>
      </div>
    </section>
  );
};

export default PricingSection;