import { motion } from 'motion/react';
import SEO from '../components/SEO';
import { Target, Zap, ShieldCheck } from 'lucide-react';

export default function About() {
  return (
    <>
      <SEO 
        title="Nosso Manifesto | A Ciência da Autoridade Digital"
        description="Entenda a filosofia por trás do SEO Authority e por que acreditamos que a busca orgânica é o pilar de qualquer negócio perene."
      />

      <section className="pt-24 pb-20 bg-white">
        <div className="mx-auto max-w-4xl px-4">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            className="text-center mb-20"
          >
            <span className="text-blue-600 font-bold uppercase tracking-[0.3em] text-[10px] mb-6 block">Nosso Manifesto</span>
            <h1 className="text-6xl sm:text-7xl font-serif font-bold text-slate-950 mb-8 tracking-tighter">
              Verdade sobre <span className="italic font-normal">Algoritmos.</span>
            </h1>
            <p className="text-xl text-slate-500 leading-relaxed max-w-2xl mx-auto">
              No SEO Authority, não acreditamos em "hacks". Acreditamos em autoridade semântica, relevância técnica e o fim do conteúdo genérico.
            </p>
          </motion.div>

          <div className="markdown-body">
            <h2>Por que existimos?</h2>
            <p>
              O mercado de marketing digital foi inundado por conteúdo superficial e táticas de curto prazo que morrem a cada atualização do Google. Nós surgimos para ser o contraponto: uma publicação técnica dedicada à profundidade.
            </p>
            
            <div className="my-16 grid grid-cols-1 md:grid-cols-2 gap-12">
              <div className="p-8 bg-slate-50 rounded-[32px] border border-slate-100">
                <Target className="text-blue-600 mb-6" size={32} />
                <h4 className="text-xl font-bold mb-4">Intenção de Busca</h4>
                <p className="text-slate-600 text-sm leading-relaxed">
                  Não focamos em volume de palavras-chave, mas na resolução real do problema do usuário. Se o usuário está satisfeito, o Google também está.
                </p>
              </div>
              <div className="p-8 bg-slate-50 rounded-[32px] border border-slate-100">
                <Zap className="text-blue-600 mb-6" size={32} />
                <h4 className="text-xl font-bold mb-4">Velocidade Técnica</h4>
                <p className="text-slate-600 text-sm leading-relaxed">
                  A infraestrutura é o alicerce. Sem um site rápido e acessível, a melhor estratégia de conteúdo do mundo é invisível.
                </p>
              </div>
            </div>

            <blockquote>
              "O SEO moderno não é sobre enganar o robô, é sobre ser a melhor resposta possível em um mar de ruído."
            </blockquote>

            <h2>Nossa Visão 2026</h2>
            <p>
              Com a ascensão da IA regenerativa e das buscas conversacionais, a autoridade de marca tornou-se o único escudo contra a desintermediação. Nossa missão é documentar essa transição.
            </p>
            
            <div className="mt-12 p-10 bg-slate-950 rounded-[40px] text-white flex flex-col md:flex-row items-center gap-10">
              <div className="shrink-0">
                <ShieldCheck size={64} className="text-blue-500" />
              </div>
              <div>
                <h3 className="text-white mt-0 mb-4 font-serif">Compromisso com a Precisão</h3>
                <p className="text-slate-400 text-sm mb-0">
                  Cada reportagem ou guia técnico publicado passa por um processo de verificação de dados e testes em propriedades reais antes de chegar até você.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}