import React, { useRef } from "react";
import { motion, useScroll, useTransform } from "motion/react";
import { ArrowRight, Clock, User, Tag } from "lucide-react";
import { Link, useNavigate } from "react-router-dom";
import SEO from "../components/SEO";

export const posts = [
  {
    category: "Treinamento",
    title: "O Fim do Platô: Técnicas Avançadas de Intensidade",
    desc: "Descubra como utilizar Rest-Pause, Drop-Sets e Cluster Sets para forçar seu corpo a construir novos tecidos e quebrar estagnação.",
    img: "https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?q=80&w=800&auto=format&fit=crop",
    readTime: "8 min"
  },
  {
    category: "Nutrição",
    title: "Ciclo de Carboidratos para Secar Rápido",
    desc: "A estratégia nutricional dos fisiculturistas adaptada para quem quer baixar o BF para menos de 10% sem perder volume muscular.",
    img: "https://images.unsplash.com/photo-1490645935967-10de6ba17061?q=80&w=800&auto=format&fit=crop",
    readTime: "12 min"
  },
  {
    category: "Mindset",
    title: "A Psicologia da Disciplina Inabalável",
    desc: "Por que você desiste após 3 semanas? O modelo mental necessário para encarar a dieta restrita como uma vitória diária.",
    img: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=800&auto=format&fit=crop",
    readTime: "5 min"
  },
  {
    category: "Suplementação",
    title: "Guia Definitivo da Creatina",
    desc: "O único suplemento que você realmente precisa. Mitos, verdades e como saturar de forma correta para aumento de força bruta.",
    img: "https://images.unsplash.com/photo-1593095948071-474c5cc2989d?q=80&w=800&auto=format&fit=crop",
    readTime: "6 min"
  },
  {
    category: "Treinamento",
    title: "Cardio vs. Musculação: A Ordem Importa?",
    desc: "Entenda a sinalização molecular e por que fazer cardio antes do treino pesado pode estar aniquilando seus ganhos de hipertrofia.",
    img: "https://images.unsplash.com/photo-1538805060514-97d9cc17730c?q=80&w=800&auto=format&fit=crop",
    readTime: "7 min"
  },
  {
    category: "Recuperação",
    title: "Dormir é Anabólico: A Importância do Sono REM",
    desc: "Você não cresce na academia, cresce na cama. Estratégias de higiene do sono para maximizar a liberação de GH natural.",
    img: "https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?q=80&w=800&auto=format&fit=crop",
    readTime: "9 min"
  },
  {
    category: "Treinamento",
    title: "Falha Muscular: O Quanto é Suficiente?",
    desc: "Não confunda cansaço com falha. Aprenda a atingir a falha concêntrica verdadeira sem destruir seu sistema nervoso central.",
    img: "https://images.unsplash.com/photo-1571019614242-c5c5dee9f50b?q=80&w=800&auto=format&fit=crop",
    readTime: "10 min"
  },
  {
    category: "Nutrição",
    title: "Proteína: Mais Não é Necessariamente Melhor",
    desc: "A ciência real sobre absorção proteica. Você realmente precisa de 3g por kg corporal para construir miócitos em abundância?",
    img: "https://images.unsplash.com/photo-1507398941214-572c25f4b1dc?q=80&w=800&auto=format&fit=crop",
    readTime: "8 min"
  },
  {
    category: "Mindset",
    title: "Sofra o Processo, Aproveite o Resultado",
    desc: "O estoicismo aplicado ao bodybuilding. Como transformar a dor do treino e a restrição da dieta em combustível mental.",
    img: "https://images.unsplash.com/photo-1526506159807-1c00ba4ce19b?q=80&w=800&auto=format&fit=crop",
    readTime: "6 min"
  },
  {
    category: "Treinamento",
    title: "Biomecânica Básica para Supino Inversamente Proporcional",
    desc: "Dores no ombro? Seu supino provavelmente está errado. Ajustes milimétricos na pegada e na ponte que mudam o recrutamento peitoral.",
    img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=800&auto=format&fit=crop",
    readTime: "11 min"
  },
  {
    category: "Nutrição",
    title: "Jejum Intermitente Funciona para Hipertrofia?",
    desc: "As vias AMPK e mTOR estão em guerra no seu corpo. Como usar o jejum para otimizar a sensibilidade à insulina e evitar perda muscular.",
    img: "https://images.unsplash.com/photo-1505253758473-96b7015fcd40?q=80&w=800&auto=format&fit=crop",
    readTime: "14 min"
  },
  {
    category: "Suplementação",
    title: "Beta-Alanina: O Fim da Fadiga Muscular",
    desc: "A biologia do ácido lático e como a carnosina gerada pela beta-alanina pode adicionar 2 reps extras na sua série mais pesada.",
    img: "https://images.unsplash.com/photo-1554284126-aa88f22d8b74?q=80&w=800&auto=format&fit=crop",
    readTime: "7 min"
  },
  {
    category: "Treinamento",
    title: "Treinando Costas em V: Largura vs Espessura",
    desc: "Puxadas vs Remadas. A combinação exata de vetores de força que você precisa para desenvolver o shape em V perfeito.",
    img: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?q=80&w=800&auto=format&fit=crop",
    readTime: "9 min"
  },
  {
    category: "Recuperação",
    title: "Alongamento: Antes ou Depois do Treino?",
    desc: "A ciência comprova que alongar estático antes do treino reduz sua força em até 8%. O protocolo correto de mobilidade.",
    img: "https://images.unsplash.com/photo-1601422407692-ec4eeec1d9b3?q=80&w=800&auto=format&fit=crop",
    readTime: "5 min"
  },
  {
    category: "Mindset",
    title: "Como Lidar com Lesões Sem Perder a Razão",
    desc: "Uma lesão não é o fim do seu planejamento. Estratégias táticas para manter a dieta e treinar no entorno do problema articular.",
    img: "https://images.unsplash.com/photo-1518611012118-696072aa579a?q=80&w=800&auto=format&fit=crop",
    readTime: "8 min"
  },
  {
    category: "Treinamento",
    title: "Agachamento Livre: O Rei Incontestável",
    desc: "Um raio X do movimento base da musculação. Como agachar pesado sem destruir a lombar e maximizando o quadríceps.",
    img: "https://images.unsplash.com/photo-1434596922112-19c563067271?q=80&w=800&auto=format&fit=crop",
    readTime: "12 min"
  },
  {
    category: "Nutrição",
    title: "Refeição Lixo: A Ciência do Cheat Meal",
    desc: "Refeed programado não é 'festa no Mcdonalds'. Entenda como restaurar os níveis de leptina do jeito certo para continuar queimando gordura.",
    img: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=800&auto=format&fit=crop",
    readTime: "10 min"
  },
  {
    category: "Suplementação",
    title: "Whey Protein: Concentrado, Isolado ou Hidrolisado?",
    desc: "O marketing tenta te vender o mais caro. Descubra qual é a real necessidade de cada tipo de Whey de acordo com seu objetivo.",
    img: "https://images.unsplash.com/photo-1579722820308-d74e571900a9?q=80&w=800&auto=format&fit=crop",
    readTime: "4 min"
  },
  {
    category: "Treinamento",
    title: "Panturrilhas: Genética Maldita ou Falta de Treino?",
    desc: "As panturrilhas são músculos de resistência extrema. O método de choque e altas repetições focado na fase excêntrica.",
    img: "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?q=80&w=800&auto=format&fit=crop",
    readTime: "6 min"
  },
  {
    category: "Recuperação",
    title: "A Verdade Sobre Banho de Gelo e Hipertrofia",
    desc: "Imersão em gelo pós-treino acelera a recuperação, mas bloqueia o estresse oxidativo necessário para hipertrofia. Cuidado.",
    img: "https://images.unsplash.com/photo-1515444744559-7be63e160e1d?q=80&w=800&auto=format&fit=crop",
    readTime: "7 min"
  },
  {
    category: "Mindset",
    title: "A Força da Rotina Matinal Perfeita",
    desc: "Como as primeiras 2 horas do seu dia definem seu sucesso. Água, sol, cardio em jejum e blindagem mental para evitar falhas.",
    img: "https://images.unsplash.com/photo-1506126613408-eca07ce68773?q=80&w=800&auto=format&fit=crop",
    readTime: "10 min"
  }
];

function FeaturedPost() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  const y = useTransform(scrollYProgress, [0, 1], ["-10%", "10%"]);

  return (
    <div ref={ref} className="relative group overflow-hidden border border-white/10 bg-white/5 flex flex-col md:flex-row h-auto md:h-[500px]">
       <div className="w-full md:w-1/2 h-64 md:h-full relative overflow-hidden">
          <motion.div style={{ y }} className="absolute top-[-10%] left-0 w-full h-[120%]">
             <img src="https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop" className="w-full h-full object-cover grayscale opacity-60 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-700 origin-center" alt="Featured" />
          </motion.div>
       </div>
       <div className="w-full md:w-1/2 p-8 md:p-16 flex flex-col justify-center">
          <div className="flex items-center gap-4 mb-6">
             <span className="bg-black border border-white/10 text-[#FF3E00] text-[10px] font-bold uppercase tracking-widest px-3 py-1 relative z-10">Biomecânica</span>
             <div className="flex items-center gap-1 text-[10px] text-white/40 uppercase tracking-widest font-bold relative z-10">
                <Clock className="w-3 h-3" /> 15 Min Leitura
             </div>
          </div>
          <Link to="/blog/1" state={{ post: { category: "Biomecânica", title: "A Mentira Sobre o Treino Fofo e o Volume Lixo", desc: "A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.", img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop", readTime: "15 min" } }} className="text-[30px] md:text-[50px] font-black italic uppercase tracking-tighter mb-6 hover:text-[#FF3E00] transition-colors cursor-pointer leading-[0.9] block relative z-10">A Mentira Sobre o Treino Fofo e o Volume Lixo</Link>
          <p className="text-white/60 font-light mb-8 line-clamp-3 text-sm relative z-10">
             A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.
          </p>
          <div className="mt-auto relative z-10">
             <Link to="/blog/1" state={{ post: { category: "Biomecânica", title: "A Mentira Sobre o Treino Fofo e o Volume Lixo", desc: "A indústria fitness quer que você passe duas horas na academia fazendo exercícios ineficientes. Aprenda a focar na progressão de carga e na falha real para estimular o crescimento verdadeiro.", img: "https://images.unsplash.com/photo-1581009146145-b5ef050c2e1e?q=80&w=1200&auto=format&fit=crop", readTime: "15 min" } }} className="inline-flex items-center gap-2 text-white font-black uppercase tracking-widest text-[11px] hover:text-[#FF3E00] transition-colors border-b border-white hover:border-[#FF3E00] pb-1 cursor-pointer">
                Ler Artigo Completo <ArrowRight className="w-4 h-4 ml-1" />
             </Link>
          </div>
       </div>
    </div>
  );
}

const PostCard: React.FC<{ post: any, index: number }> = ({ post, index }) => {
  const ref = useRef<HTMLAnchorElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"]
  });
  const y = useTransform(scrollYProgress, [0, 1], ["-15%", "15%"]);

  return (
    <Link to={`/blog/${index+2}`} state={{ post }} ref={ref} className="h-full block">
       <motion.article 
         initial={{ opacity: 0, y: 20 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true }}
         transition={{ delay: (index % 3) * 0.1 }}
         className="bg-transparent border border-white/10 hover:border-[#FF3E00]/50 transition-all flex flex-col group cursor-pointer overflow-hidden p-6 hover:bg-white/5 h-full"
       >
          <div className="relative h-56 overflow-hidden w-[calc(100%+3rem)] -mx-6 -mt-6 mb-6">
             <motion.div style={{ y }} className="absolute top-[-15%] left-0 w-full h-[130%]">
                <img src={post.img} className="w-full h-full object-cover grayscale opacity-70 group-hover:grayscale-0 group-hover:scale-105 transition-all duration-500 origin-center" alt={post.title} />
             </motion.div>
             <div className="absolute bottom-0 right-0 bg-black text-[#FF3E00] px-3 py-1 text-[10px] font-black uppercase tracking-widest z-10">
               {post.category}
             </div>
          </div>
          <div className="flex flex-col flex-grow">
             <h3 className="text-[22px] font-black italic uppercase tracking-tighter mb-4 group-hover:text-[#FF3E00] transition-colors line-clamp-2">{post.title}</h3>
             <p className="text-xs text-white/50 font-light mb-6 flex-grow line-clamp-3">{post.desc}</p>
             <div className="flex items-center justify-between mt-auto pt-4 border-t border-white/10">
                <div className="flex items-center gap-2 text-[10px] uppercase tracking-widest font-bold text-white/40">
                   <Clock className="w-3 h-3" /> {post.readTime}
                </div>
                <ArrowRight className="w-4 h-4 text-white/40 group-hover:text-[#FF3E00] transition-colors" />
             </div>
          </div>
       </motion.article>
    </Link>
  );
}

export default function Blog() {
  const navigate = useNavigate();
  return (
    <div className="w-full flex flex-col pt-10">
      <SEO 
        title="Intel Briefing: Blog | MacroLojaUK" 
        description="Conteúdo tático sobre treinamento, nutrição e mindset. Artigos diretos, sem enrolação e baseados em ciência aplicável."
      />
      <section className="py-32 lg:py-48 bg-[#050505] relative z-10 border-t border-white/5">
        <div className="container mx-auto px-6 lg:px-12 max-w-7xl text-center">
           <span className="text-[#FF3E00] font-bold tracking-[0.2em] text-xs uppercase block mb-6">Intel Briefing</span>
           <h1 className="text-6xl sm:text-[70px] md:text-[130px] leading-[0.85] font-black tracking-tighter uppercase italic mb-8">
             CONTEÚDO <br/><span className="text-white/40">TÁTICO.</span>
           </h1>
           <p className="text-white/60 text-xl max-w-2xl mx-auto font-light leading-relaxed">
             Artigos diretos, sem enrolação e baseados em ciência aplicável. A teoria por trás dos resultados extremos.
           </p>
        </div>
      </section>

      <section className="py-20 bg-[#050505] relative z-10">
         <div className="container mx-auto px-6 lg:px-12 max-w-7xl">
            {/* Featured Post (First one) */}
            <div className="mb-20">
               <FeaturedPost />
            </div>

            {/* Grid Posts */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
               {posts.map((post, i) => (
                 <PostCard post={post} index={i} key={`post-${i}`} />
               ))}
            </div>
         </div>
      </section>
      
      {/* Newsletter */}
      <section className="py-24 bg-[#050505] border-t-2 border-[#FF3E00] relative z-10">
         <div className="container mx-auto px-6 lg:px-12 max-w-3xl text-center">
            <h2 className="text-[40px] md:text-[60px] font-black italic tracking-tighter uppercase mb-4">DOSES DIÁRIAS DE <span className="text-white/40">DISCIPLINA</span></h2>
            <p className="text-white/60 mb-8 font-light text-sm max-w-lg mx-auto">Junte-se a mais de 15.000 pessoas que recebem sacadas de treino, nutrição e mentalidade toda segunda-feira de manhã.</p>
            <form className="flex flex-col sm:flex-row gap-2 max-w-lg mx-auto">
               <input type="email" placeholder="SEU MELHOR E-MAIL" className="flex-grow bg-[#050505] border border-white/20 px-4 py-3 text-white placeholder-white/40 focus:outline-none focus:border-[#FF3E00] transition-colors uppercase text-[10px] tracking-widest font-semibold" />
               <button type="button" className="bg-white text-black font-black uppercase tracking-widest hover:bg-[#FF3E00] hover:text-white transition-colors px-10 py-5 text-[11px]">
                  Assinar
               </button>
            </form>
         </div>
      </section>
    </div>
  );
}