import { motion } from 'motion/react';
import { ArrowUpRight } from 'lucide-react';
import { Link } from 'react-router-dom';
import SEO from '@/components/SEO';

const cases = [
  {
    id: "fintech-scale",
    title: "Escala Brutal de CAC",
    client: "Fintech B2B",
    metrics: ["+140% Conversão", "CAC -32%", "Google Ads"],
    category: "Ads / Landing Pages",
    image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&q=80"
  },
  {
    id: "ecom-growth",
    title: "Máquina Geradora de LTV",
    client: "E-Commerce Global",
    metrics: ["R$ 15M Recuperados", "SEO Técnico", "CRO Checkout"],
    category: "SEO / CRO",
    image: "https://images.unsplash.com/photo-1541462608143-67571c6738dd?auto=format&fit=crop&q=80"
  },
  {
    id: "saas-leads",
    title: "Motor de Geração B2B",
    client: "SaaS Logístico",
    metrics: ["15k+ Leads Qualificados", "LinkedIn Ads", "Hubspot CRM"],
    category: "Growth B2B",
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&q=80"
  },
  {
    id: "ai-support",
    title: "Automação de Retenção",
    client: "EduTech App",
    metrics: ["-40% Churn", "LLM Support", "Automação Make"],
    category: "Ops / IA",
    image: "https://images.unsplash.com/photo-1432821596592-e2c18b78144f?auto=format&fit=crop&q=80"
  }
];

export default function Cases() {
  return (
    <div className="flex flex-col w-full bg-black min-h-screen">
      <SEO title="Cases | Agência Onyx" description="Operações de marketing implantadas com ROI documentado e trackeado." url="https://agencia-onyx.com/cases" />
      
      {/* GRID BACKGROUND (Fixed to viewport) */}
      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      </div>

      <section className="pt-40 pb-20 border-b border-white/10 relative z-10 bg-black">
        <div className="container mx-auto px-6 max-w-7xl">
          <div className="max-w-2xl">
              <span className="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 mb-6 block font-mono">
                [02] HISTÓRICO VISUAL
              </span>
              <h1 className="text-5xl md:text-7xl font-display font-medium text-white tracking-tighter leading-tight mb-8">
                Operações Reais.
              </h1>
              <p className="text-lg text-gray-400 font-sans">
                 Não vendemos likes. Estas são infraestruturas de aquisição de clientes auditadas através do Google Analytics, Meta e ferramentas de BI rigorosas.
              </p>
          </div>
        </div>
      </section>

      <section className="py-24 relative z-10 bg-black">
         <div className="container mx-auto px-6 max-w-7xl">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-[1px] bg-white/10 border border-white/10">
               {cases.map((c, i) => (
                 <motion.div 
                   key={c.id}
                   initial={{ opacity: 0, y: 20 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.5, delay: i * 0.1 }}
                   className="bg-black p-8 hover:bg-white/5 transition-colors group flex flex-col"
                 >
                   <Link to={`/contact`} className="block w-full aspect-[4/3] bg-white/5 mb-8 border border-white/10 overflow-hidden relative grayscale group-hover:grayscale-0 transition-all duration-700">
                      <img 
                        src={c.image} 
                        alt={c.title} 
                        className="absolute inset-0 w-full h-full object-cover opacity-40 group-hover:opacity-100 group-hover:scale-105 transition-all duration-700 mix-blend-luminosity" 
                      />
                   </Link>
                   
                   <div className="flex items-center justify-between mb-4">
                     <span className="font-mono text-[10px] text-gray-500 uppercase tracking-widest">{c.category}</span>
                     <ArrowUpRight className="w-5 h-5 text-gray-600 group-hover:text-white transition-colors" />
                   </div>
                   
                   <h2 className="text-3xl font-display text-white mb-2">{c.title}</h2>
                   <p className="text-sm text-gray-500 font-sans mb-8">{c.client}</p>
                   
                   <div className="flex flex-wrap gap-2 mt-auto">
                     {c.metrics.map(m => (
                       <span key={m} className="px-2 py-1 border border-white/20 text-[10px] font-mono text-gray-400 uppercase tracking-widest">
                         {m}
                       </span>
                     ))}
                   </div>
                 </motion.div>
               ))}
            </div>
         </div>
      </section>

      {/* CTA */}
      <section className="py-32 border-t border-white/10 relative z-10 bg-black text-center border-b">
        <div className="container mx-auto px-6 max-w-3xl">
          <h2 className="text-4xl md:text-5xl font-display font-medium text-white mb-6 tracking-tighter">PRECISA DE ROI?</h2>
          <p className="text-gray-400 mb-10 max-w-xl mx-auto">Feche com os generalistas se você quiser likes. Fale conosco se quiser vendas rastreáveis.</p>
          <Link
            to="/contact"
            className="inline-flex items-center justify-center bg-white text-black px-10 py-5 font-mono text-sm uppercase tracking-widest font-bold hover:bg-gray-200 transition-colors"
          >
            Solicitar Proposta
          </Link>
        </div>
      </section>
    </div>
  );
}