import { motion } from 'motion/react';
import { ArrowRight, BarChart, Code2, Globe, Megaphone, Palette, Search, Sparkles } from 'lucide-react';
import { Link } from 'react-router-dom';
import SEO from '@/components/SEO';

const services = [
  {
    id: "seo",
    title: "SEO de Elite",
    description: "Revertemos o algoritmo de busca para dominar palavras-chave de alta intenção de compra. Nós implementamos otimização de cluster, links de altíssima autoridade e arquitetura técnica impecável.",
    icon: <Search className="w-8 h-8 text-blue-400" />,
    stats: ["+250% Tráfego Médio", "Risco Zero de Punição"]
  },
  {
    id: "ads",
    title: "Tráfego Algotímico",
    description: "Criativos, copy e modelagem de dados atuando em conjunto no Google e Meta Ads. Não compramos cliques; maximizamos aquisição focados inteiramente em CAC e ROAS.",
    icon: <BarChart className="w-8 h-8 text-red-400" />,
    stats: ["CPA Reduzido", "ROAS Acima de 3.5x"]
  },
  {
    id: "branding",
    title: "Branding Premium",
    description: "Identidades visuais premium que elevam o seu valor percebido, permitindo cobrar tickets cada vez mais altos. Foco extremo na tipografia e mood boards de conversão.",
    icon: <Palette className="w-8 h-8 text-purple-400" />,
    stats: ["Design Internacional", "Guias de Marca"]
  },
  {
    id: "web",
    title: "Desenvolvimento Web",
    description: "Websites desenvolvidos sob demanda (React, Next, Framer) superando o limite do Design System para criar interfaces performáticas, lisas e voltadas a captação.",
    icon: <Code2 className="w-8 h-8 text-emerald-400" />,
    stats: ["99+ Google Lighthouse", "Aberturas Instantâneas"]
  },
  {
    id: "automation",
    title: "Automação e IA",
    description: "Agentes de inteligência artificial que atuam para fechar negociações. Criamos desde o setup das ferramentas base como CRMs, até sistemas neurais avançados.",
    icon: <Sparkles className="w-8 h-8 text-yellow-400" />,
    stats: ["Automação 24/7", "Fluxos de Venda Ativos"]
  },
  {
    id: "growth",
    title: "Growth Full-Stack",
    description: "Nós atuamos como o seu braço de crescimento - C-level fracionado e equipe sênior gerindo de forma holística toda a estruturação de Growth das frentes.",
    icon: <Globe className="w-8 h-8 text-indigo-400" />,
    stats: ["Estratégia Completa", "Plano Personalizado"]
  }
];

export default function Services() {
  return (
    <div className="flex flex-col w-full pb-32">
      <SEO 
        title="Serviços | Onyx Growth"
        description="Conheça nossas frentes de atuação: SEO de Elite, Tráfego Pago, Design Conversivo, Engenharia Front-end e Growth Full-Stack."
        url="https://onyx.com.br/services"
        schema={{
          "@context": "https://schema.org",
          "@type": "ItemList",
          "itemListElement": services.map((service, index) => ({
            "@type": "ListItem",
            "position": index + 1,
            "item": {
              "@type": "Service",
              "name": service.title,
              "description": service.description,
              "provider": {
                "@type": "Organization",
                "name": "Onyx Growth"
              }
            }
          }))
        }}
      />
      {/* Header */}
      <section className="pt-32 pb-20 px-6 border-b border-white/5 relative overflow-hidden">
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px] pointer-events-none" />
        <div className="container mx-auto max-w-5xl text-center relative z-10">
          <motion.h1 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-4xl md:text-6xl lg:text-7xl font-display font-semibold tracking-tighter mb-8"
          >
            Táticas que <br/> <span className="text-gradient">geram faturamento.</span>
          </motion.h1>
          <motion.p 
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
            className="text-xl text-gray-400 max-w-2xl mx-auto font-light leading-relaxed"
          >
            Implementamos uma abordagem mecânica no crescimento. Sem métricas de vaidade, apenas aumentos expressivos para o final do mês.
          </motion.p>
        </div>
      </section>

      {/* Services List */}
      <section className="py-24 px-6 relative z-10">
        <div className="container mx-auto max-w-6xl">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service, index) => (
              <motion.div
                key={service.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: index * 0.1 }}
                id={service.id}
                className="glass-panel p-10 rounded-[32px] hover-lift flex flex-col h-full"
              >
                <div className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-8">
                  {service.icon}
                </div>
                <h2 className="text-2xl font-display font-semibold mb-4">{service.title}</h2>
                <p className="text-gray-400 leading-relaxed font-light mb-8 flex-1">
                  {service.description}
                </p>
                <div className="flex gap-4 pt-6 border-t border-white/10">
                   {service.stats.map(stat => (
                     <div key={stat} className="text-sm font-medium text-white px-4 py-2 bg-white/5 rounded-full border border-white/10">
                       {stat}
                     </div>
                   ))}
                </div>
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="container mx-auto max-w-4xl px-6 text-center mt-12">
         <div className="glass-panel p-10 md:p-14 rounded-[32px] relative overflow-hidden">
            <div className="absolute inset-0 bg-gradient-to-b from-blue-600/10 to-transparent pointer-events-none" />
            <h2 className="text-3xl md:text-4xl font-display font-semibold mb-6">Em dúvida de qual escolher?</h2>
            <p className="text-gray-400 text-lg mb-10 max-w-xl mx-auto">Deixe nossa equipe criar uma rota detalhada para mapear toda falha atual na sua aquisição digital.</p>
            <Link to="/contact" className="inline-flex items-center gap-2 bg-white text-black px-8 py-4 rounded-full text-lg font-medium hover:bg-gray-200 transition-colors">
              Solicitar Auditoria <ArrowRight className="w-5 h-5" />
            </Link>
         </div>
      </section>
    </div>
  );
}
