import { motion } from 'motion/react';
import { ArrowRight, BarChart3, Binary, Layout, Cpu, ScanLine, Shield } from 'lucide-react';
import { Link } from 'react-router-dom';
import SEO from '@/components/SEO';

const services = [
  {
    id: "growth",
    icon: <BarChart3 className="w-6 h-6" />,
    title: "Tráfego Pago & Growth",
    description: "Transformamos o seu orçamento de mídia em um motor previsível de lucro. Executamos modelagem e estruturação brutal no Google e Meta Ads priorizando LTV e menor CAC.",
    features: ["Machine Learning Bidding", "Server-Side Tracking API", "Teste A/B Contínuo", "Estratégia Cross-Channel"]
  },
  {
    id: "seo",
    icon: <Binary className="w-6 h-6" />,
    title: "SEO Técnico & Conteúdo",
    description: "Dominância nas buscas orgânicas não vem de sorte. Aplicamos auditorias profundas para resolver gargalos de indexação e projetamos conteúdo centrado na jornada.",
    features: ["Auditoria Técnica (Crawl/Index)", "Arquitetura de Silos", "Otimização de Web Vitals", "Link Building Autoridade"]
  },
  {
    id: "cro",
    icon: <Layout className="w-6 h-6" />,
    title: "CRO & UI de Alta Conversão",
    description: "Design voltado unicamente para extrair resultados. Desenhamos funis imersivos com estética alinhada a gatilhos neurológicos para conversão instantânea.",
    features: ["Mapas de Calor e Gravações", "Wireframing Preditivo", "Design Systems Minimalistas", "Otimização de Checkout"]
  },
  {
    id: "ai-systems",
    icon: <Cpu className="w-6 h-6" />,
    title: "Automações e IA (Ops)",
    description: "Integrações avançadas usando LLMs para automatizar desde qualificação de leads B2B até disparo inteligente de mensagens e recuperação de vendas.",
    features: ["Qualificadores de Lead (IA)", "Zapier & Make Integations", "Disparos Baseados em Gatilhos", "Infraestrutura de Dados"]
  }
];

export default function Services() {
  return (
    <div className="flex flex-col w-full text-white bg-black">
      <SEO 
        title="Soluções | Agência Onyx"
        description="Nossos serviços de Tráfego Pago, SEO e CRO estruturados para alta rentabilidade."
        url="https://agencia-onyx.com/services"
      />

      <div className="fixed inset-0 pointer-events-none z-0">
        <div className="absolute inset-0 bg-grid-pattern opacity-30" />
      </div>
      
      {/* HERO */}
      <section className="pt-40 pb-20 px-6 border-b border-white/10 relative z-10 bg-black">
        <div className="container mx-auto max-w-7xl">
           <div className="max-w-4xl">
              <span className="text-[10px] uppercase font-bold tracking-[0.2em] text-gray-500 mb-6 block font-mono">
                [01] O ECOSSISTEMA ONYX
              </span>
              <motion.h1 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                className="text-5xl sm:text-7xl md:text-8xl font-display font-medium tracking-tighter mb-8 leading-[0.95]"
              >
                SOLUÇÕES DE <br className="hidden md:block"/>
                <span className="text-gray-500">CRESCIMENTO.</span>
              </motion.h1>
              <motion.p 
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.1 }}
                className="text-xl md:text-2xl text-gray-400 max-w-2xl leading-relaxed"
              >
                Estratégias não funcionam isoladas. Desenhamos a infraestrutura conectada faturando milhões, reduzindo sua operação ao clique.
              </motion.p>
           </div>
        </div>
      </section>

      {/* SERVICES LIST */}
      <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 gap-[1px] bg-white/10 border border-white/10">
             {services.map((service, index) => (
                <div key={service.id} id={service.id} className="bg-black p-8 md:p-16 grid grid-cols-1 md:grid-cols-12 gap-12 items-start group">
                   
                   {/* Left: Icon & Description */}
                   <div className="md:col-span-6 lg:col-span-7 flex flex-col items-start">
                      <div className="w-12 h-12 flex items-center justify-center text-white mb-8 border border-white/20 bg-white/5">
                         {service.icon}
                      </div>
                      <h2 className="text-3xl md:text-4xl font-display font-medium mb-4 text-white tracking-tight">{service.title}</h2>
                      <p className="text-gray-400 text-lg leading-relaxed mb-8">
                         {service.description}
                      </p>
                      
                      <Link
                        to="/contact"
                        className="inline-flex items-center gap-2 text-[10px] font-bold uppercase tracking-widest text-white hover:text-gray-300 transition-colors border border-white/20 hover:bg-white/10 px-4 py-2 font-mono"
                      >
                        Iniciar Escopo
                        <ArrowRight className="w-4 h-4 ml-1" />
                      </Link>
                   </div>

                   {/* Right: Features Array */}
                   <div className="md:col-span-6 lg:col-span-5 bg-white/5 border border-white/10 p-8 h-full flex flex-col">
                      <div className="flex items-center gap-3 mb-6 border-b border-white/10 pb-4">
                        <ScanLine className="w-4 h-4 text-gray-500" />
                        <h4 className="text-[10px] uppercase font-bold tracking-widest text-gray-400 font-mono">Pilares da Solução</h4>
                      </div>
                      <ul className="space-y-6 flex-1">
                        {service.features.map((f, i) => (
                          <li key={i} className="flex items-start gap-4 text-gray-300 font-mono text-xs uppercase tracking-widest leading-snug">
                            <span className="text-gray-500 mt-0.5">0{i+1}_</span>
                            <span>{f}</span>
                          </li>
                        ))}
                      </ul>
                   </div>
                </div>
             ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-32 bg-white text-black text-center z-10 relative">
        <div className="container mx-auto px-6 max-w-4xl">
          <Shield className="w-12 h-12 mx-auto mb-8 text-black" />
          <h2 className="text-4xl md:text-5xl font-display font-medium mb-6 tracking-tighter">PRONTO?</h2>
          <p className="text-lg text-gray-600 mb-10 max-w-2xl mx-auto font-sans">Capacidade de onboarding limitada a fim de preservar o SLA técnico e faturamento da base atual.</p>
          <Link
            to="/contact"
            className="inline-flex items-center justify-center bg-black text-white px-10 py-5 font-mono text-sm uppercase tracking-widest font-bold hover:bg-gray-800 transition-colors"
          >
            Solicitar Auditoria
          </Link>
        </div>
      </section>
    </div>
  );
}
