import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { articles } from '../data/articles';
import ArticleCard from '../components/ArticleCard';
import SEO from '../components/SEO';
import { ArrowRight, TrendingUp, Zap } from 'lucide-react';
import { motion } from 'motion/react';
import { useLanguage } from '../contexts/LanguageContext';
import { translations } from '../constants';
import { Article } from '../types';

export default function Home() {
  const { lang, translate } = useLanguage();
  const t = translations[lang];

  const [displayArticles, setDisplayArticles] = useState<Article[]>(articles);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (lang === 'pt-br') {
      setDisplayArticles(articles);
      return;
    }

    const translateHeaders = async () => {
      setLoading(true);
      try {
        // Translate only titles and categories for Home page items
        const itemsToTranslate = articles.map(a => ({
          title: a.title,
          category: a.category
        }));

        const translatedItems = await translate(itemsToTranslate, 'article titles and categories', true);
        
        const newArticles = articles.map((a, i) => ({
          ...a,
          title: translatedItems[i]?.title || a.title,
          category: translatedItems[i]?.category || a.category
        }));

        setDisplayArticles(newArticles);
      } catch (error) {
        console.error("Home translation error:", error);
      } finally {
        setLoading(false);
      }
    };

    translateHeaders();
  }, [lang, translate]);

  const featuredArticle = displayArticles[0];
  const recentArticles = displayArticles.slice(1, 4);
  const secondaryArticles = displayArticles.slice(4, 10);

  return (
    <>
      <SEO 
        title={t.heroTitle}
        description={t.heroDescription}
      />

      {/* Modern Hero Section */}
      <section className="relative pt-32 pb-24 overflow-hidden">
        {/* Background elements */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full -z-10 bg-[radial-gradient(circle_at_top_right,rgba(20,184,166,0.08),transparent_50%),radial-gradient(circle_at_bottom_left,rgba(13,148,136,0.05),transparent_50%)]" />
        
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col items-center text-center max-w-4xl mx-auto">
            <motion.div
              initial={{ opacity: 0, y: -10 }}
              animate={{ opacity: 1, y: 0 }}
              className="inline-flex items-center gap-2 px-3 py-1 bg-brand/10 text-brand rounded-full text-xs font-bold uppercase tracking-wider mb-8 border border-brand/20"
            >
              <TrendingUp size={14} />
              <span>{t.heroSubtitle}</span>
            </motion.div>
            
            <motion.h1 
              initial={{ opacity: 0, scale: 0.95 }}
              animate={{ opacity: 1, scale: 1 }}
              transition={{ type: "spring", damping: 20 }}
              className="text-6xl sm:text-8xl lg:text-[10rem] font-display font-black text-slate-950 mb-10 leading-[0.9] tracking-[-0.04em]"
            >
              {lang === 'pt-br' ? (
                <>Poder<br /><span className="text-brand">Semântico.</span></>
              ) : <>Semantic<br /><span className="text-brand">Authority.</span></>}
            </motion.h1>
            
            <motion.p
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.1 }}
              className="text-lg sm:text-xl text-slate-600 max-w-2xl leading-relaxed mb-12 font-medium"
            >
              {t.heroDescription}
            </motion.p>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.2 }}
              className="flex flex-col sm:flex-row items-center gap-6"
            >
              <Link 
                to="/sobre"
                className="btn-primary flex items-center gap-2 group"
              >
                {t.readManifesto}
                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
              </Link>
              <div className="flex items-center gap-2 text-slate-400 font-medium">
                <span className="flex h-2 w-2 rounded-full bg-brand animate-pulse" />
                <span className="text-sm uppercase tracking-widest">{t.publishedIn} Maio 2026</span>
              </div>
            </motion.div>
          </div>
        </div>
      </section>

      {/* Editorial Spotlight Section */}
      <section className="py-24 bg-white">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col gap-32">
            
            {/* Spotlight Feature - Refined Magazine Layout */}
            <div className="relative">
              <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
                <motion.div 
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  className="lg:col-span-7"
                >
                  <div className="relative aspect-[4/3] sm:aspect-[16/10] overflow-hidden rounded-[2rem] shadow-2xl">
                    <img 
                      src={featuredArticle.image} 
                      alt={featuredArticle.title}
                      className="w-full h-full object-cover"
                      referrerPolicy="no-referrer"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-slate-950/20 to-transparent" />
                  </div>
                </motion.div>

                <motion.div 
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  className="lg:col-span-5"
                >
                  <div className="flex items-center gap-4 mb-8">
                    <span className="w-12 h-[1px] bg-brand" />
                    <span className="text-[10px] font-black uppercase tracking-[0.3em] text-brand">{featuredArticle.category}</span>
                  </div>
                  
                  <Link to={`/artigo/${featuredArticle.slug}`}>
                    <h2 className="text-4xl sm:text-5xl lg:text-6xl font-display font-black text-slate-950 mb-8 leading-[1.05] tracking-tight hover:text-brand transition-colors">
                      {featuredArticle.title}
                    </h2>
                  </Link>
                  
                  <p className="text-lg text-slate-500 font-medium leading-relaxed mb-10 border-l-2 border-slate-100 pl-6">
                    {featuredArticle.excerpt}
                  </p>

                  <div className="flex items-center gap-6 mb-12">
                    <div className="flex items-center gap-3">
                      <img src={featuredArticle.author.avatar} alt={featuredArticle.author.name} className="h-10 w-10 rounded-full border border-slate-100" />
                      <div className="text-left">
                        <p className="text-xs font-black text-slate-950">{featuredArticle.author.name}</p>
                        <p className="text-[9px] font-bold uppercase tracking-widest text-slate-400">{featuredArticle.author.role}</p>
                      </div>
                    </div>
                  </div>

                  <Link to={`/artigo/${featuredArticle.slug}`} className="btn-primary inline-flex items-center gap-3 group">
                    Iniciar Leitura
                    <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
                  </Link>
                </motion.div>
              </div>
            </div>

            {/* Newsletter Mid-Bar - Minimalist & Integrated */}
            <div className="bg-slate-50 rounded-[3rem] p-4 sm:p-6 border border-slate-100">
              <div className="flex flex-col lg:flex-row items-center gap-8">
                <div className="flex-grow flex items-center gap-6 pl-6">
                  <div className="h-12 w-12 bg-white rounded-2xl flex items-center justify-center text-brand shadow-sm">
                    <Zap size={22} fill="currentColor" />
                  </div>
                  <div>
                    <h3 className="text-sm font-black text-slate-950 uppercase tracking-widest">Briefing Semanal</h3>
                    <p className="text-xs text-slate-500 font-medium">Insights técnicos direto na sua inbox.</p>
                  </div>
                </div>
                <form className="flex flex-col sm:flex-row gap-2 w-full lg:w-auto lg:pr-2" onSubmit={(e) => e.preventDefault()}>
                  <input 
                    type="email" 
                    placeholder="E-mail profissional..."
                    className="bg-white border border-slate-200 rounded-2xl px-6 py-3.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand/20 w-full lg:w-72"
                  />
                  <button className="bg-slate-950 text-white font-black text-[10px] uppercase tracking-widest px-8 py-3.5 rounded-2xl hover:bg-slate-800 transition-all">
                    Inscrever
                  </button>
                </form>
              </div>
            </div>

            {/* Content Explorer Section */}
            <div>
              <div className="flex items-center justify-between mb-16 px-4">
                <h3 className="text-[10px] font-black text-slate-300 uppercase tracking-[0.3em] flex items-center gap-3">
                  <div className="h-1 w-8 bg-slate-100" />
                  Explorar Insights
                </h3>
                <Link to="/blog" className="text-[10px] font-black text-brand uppercase tracking-widest hover:underline">Ver Todos</Link>
              </div>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
                {recentArticles.map((article) => (
                  <ArticleCard key={article.id} article={article} />
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Grid Explorer */}
      <section className="py-24 bg-slate-50 border-t border-slate-100">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="mb-16 text-center max-w-2xl mx-auto">
            <h2 className="text-4xl font-display font-black text-slate-950 mb-4">{t.explore}</h2>
            <p className="text-slate-500 font-medium leading-relaxed">Mergulhe em clusters de conhecimento organizados por intenção de busca.</p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {secondaryArticles.map(article => (
              <ArticleCard key={article.id} article={article} />
            ))}
          </div>

          <div className="mt-20 text-center">
            <Link to="/arquivo" className="btn-outline inline-flex items-center gap-3">
              Explore o Arquivo Semântico
              <ArrowRight size={18} />
            </Link>
          </div>
        </div>
      </section>


      {/* Modern Newsletter Banner */}
      <section id="newsletter" className="py-24 bg-slate-50">
        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
          <div className="bg-brand rounded-[3rem] p-12 sm:p-20 text-center text-white relative overflow-hidden shadow-2xl shadow-brand/20">
            {/* Abstract Background Shapes */}
            <div className="absolute top-0 left-0 w-64 h-64 bg-white/10 blur-3xl -translate-x-1/2 -translate-y-1/2 rounded-full" />
            <div className="absolute bottom-0 right-0 w-96 h-96 bg-brand-light/20 blur-3xl translate-x-1/4 translate-y-1/4 rounded-full" />
            
            <div className="relative z-10 max-w-2xl mx-auto">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                className="inline-flex items-center gap-2 px-3 py-1 bg-white/20 text-white rounded-full text-[10px] font-bold uppercase tracking-widest mb-8"
              >
                <span>Exclusivo para Membros</span>
              </motion.div>
              <h2 className="text-4xl sm:text-5xl lg:text-6xl font-display font-extrabold mb-8 leading-tight">{t.footerNewsletterTitle}</h2>
              <p className="text-teal-50 mb-12 font-medium">
                {t.footerNewsletterSubtitle}
              </p>
              <form className="flex flex-col sm:flex-row gap-4 max-w-lg mx-auto" onSubmit={(e) => e.preventDefault()}>
                <input 
                  type="email" 
                  placeholder={t.footerNewsletterInput}
                  className="flex-grow px-6 py-4 rounded-2xl bg-white text-slate-900 focus:outline-none focus:ring-4 focus:ring-white/20 transition-all font-medium"
                />
                <button className="px-10 py-4 bg-slate-950 text-white rounded-2xl font-bold hover:bg-slate-900 transition-all active:scale-95 shadow-xl">
                  {t.subscribe}
                </button>
              </form>
              <p className="mt-8 text-[10px] text-teal-100 uppercase tracking-widest font-bold opacity-80">{t.footerNewsletterDisclaimer}</p>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}