import { motion } from 'motion/react';
import { Link } from 'react-router-dom';
import SEO from '../components/SEO';
import { BarChart3, Database, Search, FileCheck } from 'lucide-react';

export default function Methodology() {
  const steps = [
    {
      icon: Database,
      title: "Coleta de Dados",
      desc: "Analisamos mais de 1 milhão de SERPs mensais para identificar padrões de mudança nos algoritmos do Google Anthropic e OpenAI."
    },
    {
      icon: Search,
      title: "Análise Semântica",
      desc: "Nossos modelos identificam quais entidades e contextos estão gerando os maiores ganhos de visibilidade orgânica."
    },
    {
      icon: BarChart3,
      title: "Teste de Campo",
      desc: "Implementamos teorias em sites controlados antes de documentá-las como estratégias recomendadas."
    },
    {
      icon: FileCheck,
      title: "Validação Editorial",
      desc: "Todo insight é revisado por estrategistas com mais de 10 anos de experiência no mercado de busca."
    }
  ];

  return (
    <>
      <SEO 
        title="Metodologia de Análise | Como avaliamos o Google"
        description="Saiba como o SEO Authority produz seus reports e análises técnicas. Dados reais, testes de campo e transparência."
      />

      <section className="pt-24 pb-32 bg-[#FCFCFC]">
        <div className="mx-auto max-w-7xl px-4 lg:px-8">
          <div className="max-w-4xl mb-24">
            <span className="text-brand font-black uppercase tracking-[0.3em] text-[10px] mb-6 block">Padrão de Qualidade</span>
            <h1 className="text-6xl sm:text-8xl font-display font-black text-slate-950 mb-8 leading-[0.9] tracking-[-0.04em]">
              Nossa<br />Metodologia.
            </h1>
            <p className="text-xl text-slate-500 leading-relaxed font-medium border-l-2 border-slate-100 pl-6">
              O SEO deixou de ser uma ciência exata para se tornar uma ciência de dados e comportamento humano. Veja como deciframos o código.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-slate-100 border border-slate-100 rounded-[3rem] overflow-hidden">
            {steps.map((step, i) => (
              <div key={i} className="bg-white p-12 sm:p-16 flex flex-col gap-8 hover:bg-slate-50/50 transition-colors">
                <div className="h-14 w-14 rounded-2xl bg-slate-950 text-white flex items-center justify-center shadow-lg shadow-slate-950/10">
                  <step.icon size={28} />
                </div>
                <div>
                  <span className="text-slate-100 font-display font-black text-6xl block mb-6 tracking-tighter">0{i+1}</span>
                  <h3 className="text-2xl font-display font-black text-slate-950 mb-4 tracking-tight uppercase tracking-widest text-sm">{step.title}</h3>
                  <p className="text-slate-500 font-medium leading-relaxed">{step.desc}</p>
                </div>
              </div>
            ))}
          </div>

          <div className="mt-24 p-12 bg-slate-50 rounded-[3rem] border border-slate-100 text-center max-w-3xl mx-auto">
            <h4 className="text-2xl font-display font-black text-slate-950 mb-6">Acesso aos Dados Brutos</h4>
            <p className="text-slate-500 font-medium mb-10">
              Parceiros e assinantes da modalidade <span className="text-slate-950 font-black uppercase tracking-widest text-[10px]">Authority+</span> têm acesso aos nossos datasets proprietários de flutuação de SERP.
            </p>
            <Link 
              to="/contato"
              className="btn-primary"
            >
              Conhecer Assinatura Premium
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}