import { motion } from 'framer-motion';
import InlineCTA from './InlineCTA';
import { useT } from '../i18n';

export default function HowItWorks() {
  const t = useT();
  const images = [
    "https://festamagicaia.com.br/images/before-after.png",
    "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/convite-digital.webp",
    "https://s3.seureview.com.br/festamagica/6a591904-cf2a-4a51-8581-1891373eea29/805441e0-925e-4674-b7b3-ba640431eeb1/adesivos-redondos.webp",
  ];
  const steps = t.howItWorks.steps.map((s, i) => ({
    number: `0${i + 1}`,
    title: s.title,
    description: s.description,
    image: images[i],
  }));

  return (
    <section className="py-24 bg-indigo-950 border-y border-white/10" id="como-funciona">
      <div className="container mx-auto px-6 max-w-7xl">
        <div className="text-center mb-20">
          <h2 className="text-3xl md:text-5xl font-display font-bold mb-6 tracking-tight text-white">
            {t.howItWorks.title1} <span className="text-pink-500">{t.howItWorks.titleHighlight}</span> {t.howItWorks.title2}
          </h2>
          <p className="text-lg text-indigo-200 max-w-2xl mx-auto font-medium">
            {t.howItWorks.subtitle}
          </p>
        </div>

        <div className="relative">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-12 md:gap-8 relative z-10">
            {steps.map((step, i) => (
              <motion.div 
                key={i}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: i * 0.2 }}
                className="flex flex-col items-center text-center group"
              >
                <div className="w-full h-64 md:h-72 rounded-3xl overflow-hidden mb-6 border-4 border-indigo-900 shadow-2xl relative group-hover:scale-105 transition-transform duration-500">
                   <img src={step.image} alt={step.title} className="w-full h-full object-cover" />
                   <div className="absolute top-4 left-4 w-12 h-12 rounded-full bg-pink-500 flex items-center justify-center text-white font-display font-bold text-xl shadow-lg">
                      {step.number}
                   </div>
                </div>
                <h3 className="text-2xl font-bold mb-3 text-white">{step.title}</h3>
                <p className="text-indigo-200 font-medium text-base leading-relaxed">{step.description}</p>
              </motion.div>
            ))}
          </div>
        </div>

        <InlineCTA
          text={t.howItWorks.ctaText}
          subtext={t.howItWorks.ctaSub}
        />
      </div>
    </section>
  );
}
