// global-home.jsx — Homepage for Teknav Global (English, LTR)
import { useState, useEffect, useRef } from 'react';
import { articles as allArticlesData, authors, categories, siteConfig } from '../global-data.js';
import { useNav, useAuth, AuthorAvatar, CategoryBadge, TypeBadge, NewsletterForm, pillBtn } from './global-ui.jsx';

// ── Hero Neural Background ──────────────────────────────────────────────────
function HeroBackground() {
  const canvasRef = useRef();
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf, t = 0;
    const palette = [
      'rgba(15,107,115,',
      'rgba(196,106,77,',
      'rgba(47,143,107,',
    ];
    const nodes = Array.from({ length: 32 }, (_, i) => ({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 0.35,
      vy: (Math.random() - 0.5) * 0.35,
      r: Math.random() * 3 + 1.5,
      color: palette[i % palette.length],
      phase: Math.random() * Math.PI * 2,
    }));
    const resize = () => { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; };
    resize();
    window.addEventListener('resize', resize);
    const draw = () => {
      t += 0.012;
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      nodes.forEach(n => {
        n.x += n.vx; n.y += n.vy;
        if (n.x < 0 || n.x > canvas.width) n.vx *= -1;
        if (n.y < 0 || n.y > canvas.height) n.vy *= -1;
        nodes.forEach(m => {
          const d = Math.hypot(n.x - m.x, n.y - m.y);
          if (d < 130) {
            ctx.beginPath();
            ctx.moveTo(n.x, n.y); ctx.lineTo(m.x, m.y);
            ctx.strokeStyle = `rgba(15,107,115,${0.18 * (1 - d / 130)})`;
            ctx.lineWidth = 0.8; ctx.stroke();
          }
        });
        const pulse = 0.45 + 0.18 * Math.sin(t + n.phase);
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
        ctx.fillStyle = n.color + pulse + ')';
        ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    };
    draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }} />;
}

// ── Article Card (grid) ─────────────────────────────────────────────────────
function ArticleCard({ article, delay = 0 }) {
  const { navigate } = useNav();
  const [vis, setVis] = useState(false);
  const ref = useRef();

  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const author = authors.find(a => a.id === article.author);
  const cat = categories.find(c => c.id === article.category);

  return (
    <div ref={ref} onClick={() => navigate('/article/' + article.slug)} style={{
      background: '#fff', borderRadius: 12, border: '1px solid #E4DDD2',
      padding: 24, cursor: 'pointer',
      opacity: vis ? 1 : 0, transform: vis ? 'translateY(0)' : 'translateY(24px)',
      transition: `opacity 0.5s ${delay}ms, transform 0.5s ${delay}ms, box-shadow 0.2s`,
      boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
    }} onMouseEnter={e => e.currentTarget.style.boxShadow = '0 8px 32px rgba(0,0,0,0.1)'}
       onMouseLeave={e => e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.04)'}>
      <div style={{ height: 120, borderRadius: 8, background: '#F4EFE6', marginBottom: 16, overflow: 'hidden', position: 'relative' }}>
        {article.photo ? (
          <img src={article.photo} alt={article.title} loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            onError={e => { e.target.style.display = 'none'; }} />
        ) : (
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 40, height: 40, borderRadius: '50%', background: cat?.color || '#0F6B73', opacity: 0.3 }} />
          </div>
        )}
      </div>
      <div style={{ display: 'flex', gap: 6, marginBottom: 10, flexWrap: 'wrap' }}>
        {article.type && <TypeBadge type={article.type} small />}
        <CategoryBadge name={cat?.name || article.category} color={cat?.color} small />
      </div>
      <h3 style={{ fontSize: 15, fontWeight: 700, color: '#263238', margin: '0 0 8px', lineHeight: 1.5, fontFamily: 'Inter,sans-serif' }}>{article.title}</h3>
      <p style={{ fontSize: 12, color: '#5F6B6D', lineHeight: 1.7, margin: '0 0 16px' }}>{(article.subtitle || article.summary || '').slice(0, 100)}...</p>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11, color: '#5F6B6D' }}>
        <span>{article.date}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {author && <AuthorAvatar author={author} size={22} />}
          <span>{article.readTime} min</span>
        </div>
      </div>
    </div>
  );
}

// ── Featured Article ────────────────────────────────────────────────────────
function FeaturedArticle({ article }) {
  const { navigate } = useNav();
  const author = authors.find(a => a.id === article.author);
  const cat = categories.find(c => c.id === article.category);
  return (
    <div onClick={() => navigate('/article/' + article.slug)} style={{
      background: '#fff', borderRadius: 16, border: '1px solid #E4DDD2', padding: 0,
      cursor: 'pointer', overflow: 'hidden',
      boxShadow: '0 4px 24px rgba(0,0,0,0.06)',
      display: 'grid', gridTemplateColumns: '1fr 1fr', minHeight: 280,
      transition: 'box-shadow 0.2s',
    }} className="featured-card"
       onMouseEnter={e => e.currentTarget.style.boxShadow = '0 12px 48px rgba(0,0,0,0.12)'}
       onMouseLeave={e => e.currentTarget.style.boxShadow = '0 4px 24px rgba(0,0,0,0.06)'}>
      <div style={{ padding: '32px 24px 32px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
            {article.type && <TypeBadge type={article.type} />}
            <CategoryBadge name={cat?.name || article.category} color={cat?.color} />
          </div>
          <h2 style={{ fontSize: 22, fontWeight: 800, color: '#263238', margin: '0 0 12px', lineHeight: 1.5, fontFamily: 'Inter,sans-serif' }}>{article.title}</h2>
          <p style={{ fontSize: 14, color: '#5F6B6D', lineHeight: 1.8, margin: 0 }}>{article.subtitle || article.summary}</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 20, paddingTop: 16, borderTop: '1px solid #E4DDD2' }}>
          {author && <AuthorAvatar author={author} size={36} />}
          <div>
            <div style={{ fontSize: 13, fontWeight: 600, color: '#263238' }}>{author?.name}</div>
            <div style={{ fontSize: 11, color: '#5F6B6D' }}>{article.date} · {article.readTime} min read</div>
          </div>
        </div>
      </div>
      <div style={{ background: '#F4EFE6', overflow: 'hidden' }}>
        {article.photo ? (
          <img src={article.photo} alt={article.title} loading="eager"
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            onError={e => { e.target.style.display = 'none'; }} />
        ) : (
          <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ width: 80, height: 80, borderRadius: '50%', background: cat?.color || '#0F6B73', opacity: 0.15 }} />
          </div>
        )}
      </div>
    </div>
  );
}

// ── Authors Section ─────────────────────────────────────────────────────────
function AuthorsSection() {
  const { navigate } = useNav();
  return (
    <section style={{ padding: '60px 0' }}>
      <h2 style={sectionTitle}>Teknav Authors</h2>
      <p style={sectionSubtitle}>The specialists who write Teknav's deep technology analysis</p>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 16 }} className="authors-grid">
        {authors.map(author => (
          <div key={author.id} style={{
            background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 20,
            cursor: 'pointer', textAlign: 'center', transition: 'all 0.2s',
          }} onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.08)'; }}
             onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 12 }}>
              <AuthorAvatar author={author} size={56} />
            </div>
            <div style={{ fontSize: 14, fontWeight: 700, color: '#263238', marginBottom: 4 }}>{author.name}</div>
            <div style={{ fontSize: 11, color: '#5F6B6D', marginBottom: 8 }}>{author.specialty}</div>
            <div style={{ fontSize: 11, color: '#0F6B73', fontWeight: 600 }}>{author.articleCount} articles</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ── Hero Section ─────────────────────────────────────────────────────────────
function HeroSection({ featured, navigate }) {
  const wrapRef = useRef();
  const cardRef = useRef();

  useEffect(() => {
    const wrap = wrapRef.current;
    const card = cardRef.current;
    if (!wrap || !card) return;
    const onMove = e => {
      const r = wrap.getBoundingClientRect();
      const dx = (e.clientX - r.left) / r.width - 0.5;
      const dy = (e.clientY - r.top) / r.height - 0.5;
      card.style.transform = `perspective(900px) rotateX(${(-dy * 4).toFixed(2)}deg) rotateY(${(dx * 6).toFixed(2)}deg)`;
    };
    const onLeave = () => { card.style.transform = 'perspective(900px) rotateX(0) rotateY(0)'; };
    wrap.addEventListener('mousemove', onMove);
    wrap.addEventListener('mouseleave', onLeave);
    return () => { wrap.removeEventListener('mousemove', onMove); wrap.removeEventListener('mouseleave', onLeave); };
  }, []);

  return (
    <div ref={wrapRef} style={{ position: 'relative', background: '#F4F1EC', overflow: 'hidden', minHeight: 560 }}>
      <div style={{ position: 'absolute', top: '20%', left: '10%', width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(15,107,115,0.10) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '0%', right: '15%', width: 380, height: 380, borderRadius: '50%', background: 'radial-gradient(circle, rgba(196,106,77,0.10) 0%, transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(15,42,46,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,42,46,0.04) 1px, transparent 1px)', backgroundSize: '48px 48px', maskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 75%)', WebkitMaskImage: 'radial-gradient(circle at 50% 40%, #000 30%, transparent 75%)', pointerEvents: 'none' }} />
      <HeroBackground />

      <div className="home-hero-inner" style={{ position: 'relative', zIndex: 2, maxWidth: 1280, margin: '0 auto', padding: '76px 24px 70px' }}>
        <div style={{ maxWidth: 600, marginBottom: 44 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'rgba(15,107,115,0.08)', border: '1px solid rgba(15,107,115,0.25)', color: '#0F6B73', padding: '6px 16px', borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 26, letterSpacing: '0.08em', animation: 'heroReveal 0.6s 0.1s both' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#0F6B73', display: 'inline-block', animation: 'pulseRing 2.2s infinite' }} />
            Deep Technology Analysis
          </div>
          <h1 style={{ fontSize: 'clamp(34px,5.4vw,58px)', fontWeight: 800, color: '#0F2A2E', margin: '0 0 4px', lineHeight: 1.25, fontFamily: 'Inter,sans-serif', animation: 'heroReveal 0.7s 0.35s both', letterSpacing: '-0.02em' }}>
            Understand more.
          </h1>
          <h1 className="gold-shimmer" style={{ fontSize: 'clamp(34px,5.4vw,58px)', fontWeight: 800, margin: '0 0 22px', lineHeight: 1.25, fontFamily: 'Inter,sans-serif', animation: 'heroReveal 0.7s 0.6s both', letterSpacing: '-0.02em' }}>
            Build better.
          </h1>
          <p style={{ fontSize: 16, color: '#4A5A5C', lineHeight: 2, margin: '0 0 32px', animation: 'heroReveal 0.7s 0.85s both', maxWidth: 540 }}>
            Scientific, independent analysis of AI engineering, data infrastructure, cybersecurity, and the future of software.
          </p>
          <div className="home-hero-actions" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', animation: 'heroReveal 0.7s 1.1s both' }}>
            <button onClick={() => navigate('/articles')} style={{ background: '#0F6B73', color: '#fff', border: 'none', padding: '14px 32px', borderRadius: 10, fontSize: 14, fontWeight: 700, cursor: 'pointer', fontFamily: 'Inter,sans-serif', boxShadow: '0 6px 22px rgba(15,107,115,0.28)', transition: 'transform 0.2s ease, box-shadow 0.2s ease' }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 10px 28px rgba(15,107,115,0.35)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = '0 6px 22px rgba(15,107,115,0.28)'; }}>
              All Articles →
            </button>
            <button onClick={() => navigate('/category/ai')} style={{ background: 'rgba(196,106,77,0.08)', color: '#A8512E', border: '1px solid rgba(196,106,77,0.45)', padding: '14px 30px', borderRadius: 10, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter,sans-serif', transition: 'all 0.2s' }}
              onMouseEnter={e => e.currentTarget.style.background = 'rgba(196,106,77,0.16)'}
              onMouseLeave={e => e.currentTarget.style.background = 'rgba(196,106,77,0.08)'}>
              AI Engineering
            </button>
          </div>
        </div>

        {featured && (
          <div ref={cardRef} className="hero-tilt" style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 16, padding: '20px 24px', maxWidth: 580, animation: 'heroReveal 0.7s 1.35s both', boxShadow: '0 14px 40px rgba(15,42,46,0.08), 0 2px 8px rgba(15,42,46,0.04)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: 0, left: 0, bottom: 0, width: 4, background: 'linear-gradient(180deg, #D49A2A, #C46A4D)' }} />
            <div style={{ fontSize: 10, color: '#C46A4D', fontWeight: 700, marginBottom: 10, letterSpacing: '0.1em', display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ display: 'inline-block', animation: 'float-y 3s ease-in-out infinite' }}>✦</span>
              Featured
            </div>
            <div onClick={() => navigate('/article/' + featured.slug)} style={{ fontSize: 18, fontWeight: 700, color: '#0F2A2E', cursor: 'pointer', lineHeight: 1.65, transition: 'color 0.15s', fontFamily: 'Inter,sans-serif' }}
              onMouseEnter={e => e.currentTarget.style.color = '#0F6B73'}
              onMouseLeave={e => e.currentTarget.style.color = '#0F2A2E'}>
              {featured.title}
            </div>
            <div style={{ fontSize: 12, color: '#5F6B6D', marginTop: 12, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
              <span style={{ fontWeight: 600, color: '#0F6B73' }}>{authors.find(a => a.id === featured.author)?.name}</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span>{featured.type}</span>
              <span style={{ opacity: 0.4 }}>·</span>
              <span>{featured.readTime} min read</span>
            </div>
          </div>
        )}
      </div>

      <svg viewBox="0 0 1440 60" preserveAspectRatio="none" style={{ position: 'absolute', bottom: -1, left: 0, width: '100%', height: 50, display: 'block', pointerEvents: 'none' }}>
        <path d="M0,40 C240,60 480,10 720,30 C960,50 1200,15 1440,35 L1440,60 L0,60 Z" fill="#ebe3d2" />
      </svg>
    </div>
  );
}

// ── Stats Bar ───────────────────────────────────────────────────────────────
function CountUp({ to, suffix = '', duration = 1400 }) {
  const [n, setN] = useState(0);
  const ref = useRef();
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting && !started.current) {
        started.current = true;
        const start = performance.now();
        const tick = (now) => {
          const p = Math.min((now - start) / duration, 1);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(to * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{n.toLocaleString('en-US')}{suffix}</span>;
}

function StatsBar() {
  const stats = [
    { label: 'Articles published', to: 75, suffix: '+', icon: '◉' },
    { label: 'Active authors',     to: 2,  suffix: '',  icon: '✎' },
    { label: 'Monthly readers',    to: 65000, suffix: '+', icon: '◐' },
    { label: 'Avg. read time',     to: 10, suffix: ' min', icon: '◷' },
  ];
  return (
    <div style={{ background: '#ebe3d2', padding: '40px 24px', borderTop: '1px solid rgba(15,42,46,0.06)', borderBottom: '1px solid rgba(15,42,46,0.06)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 16 }} className="stats-bar-inner">
        {stats.map((s, i) => (
          <div key={s.label} className="lift-on-hover" style={{ textAlign: 'center', padding: '12px 8px', borderRadius: 12, position: 'relative' }}>
            <div style={{ fontSize: 14, color: '#0F6B73', marginBottom: 6, opacity: 0.7 }}>{s.icon}</div>
            <div style={{ fontSize: 30, fontWeight: 900, color: '#A8761B', marginBottom: 6, fontFamily: 'Inter,sans-serif', letterSpacing: '-0.02em' }}>
              <CountUp to={s.to} suffix={s.suffix} />
            </div>
            <div style={{ fontSize: 13, color: '#4A5A5C', fontWeight: 500 }}>{s.label}</div>
            {i < stats.length - 1 && (
              <div style={{ position: 'absolute', right: 0, top: '20%', height: '60%', width: 1, background: 'rgba(15,42,46,0.08)' }} />
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Shared section styles ───────────────────────────────────────────────────
const sectionTitle = { fontSize: 22, fontWeight: 800, color: '#263238', margin: '0 0 8px', fontFamily: 'Inter,sans-serif' };
const sectionSubtitle = { fontSize: 14, color: '#5F6B6D', margin: '0 0 32px', lineHeight: 1.7 };

// ── Article Row Compact ─────────────────────────────────────────────────────
function ArticleRowCompact({ article }) {
  const { navigate } = useNav();
  const cat = categories.find(c => c.id === article.category);
  return (
    <div onClick={() => navigate('/article/' + article.slug)} style={{
      display: 'flex', gap: 20, padding: '20px 0', borderBottom: '1px solid #E4DDD2',
      cursor: 'pointer', alignItems: 'flex-start', transition: 'background 0.15s',
    }} onMouseEnter={e => e.currentTarget.style.background = '#F4EFE620'}
       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
      <div style={{ flex: 1 }}>
        <div style={{ display: 'flex', gap: 6, marginBottom: 8 }}>
          {article.type && <TypeBadge type={article.type} small />}
          <CategoryBadge name={cat?.name || article.category} color={cat?.color} small />
        </div>
        <h3 style={{ fontSize: 16, fontWeight: 700, color: '#263238', margin: '0 0 6px', lineHeight: 1.5 }}>{article.title}</h3>
        <p style={{ fontSize: 13, color: '#5F6B6D', margin: '0 0 10px', lineHeight: 1.7 }}>{(article.subtitle || '').slice(0, 140)}…</p>
        <div style={{ fontSize: 11, color: '#5F6B6D' }}>
          {authors.find(a => a.id === article.author)?.name} · {article.date} · {article.readTime} min
        </div>
      </div>
      <div style={{ width: 80, height: 80, background: '#F4EFE6', borderRadius: 8, overflow: 'hidden', flexShrink: 0 }}>
        {article.photo && (
          <img src={article.photo} alt={article.title} loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
            onError={e => { e.target.style.display = 'none'; }} />
        )}
      </div>
    </div>
  );
}

// ── Homepage ────────────────────────────────────────────────────────────────
export default function HomePage() {
  const { navigate } = useNav();
  const articles = allArticlesData;

  const featured = articles.find(a => a.featured) || articles[0];
  const latest = articles.filter(a => a.id !== featured?.id).slice(0, 6);
  const popular = [...articles].sort((a, b) => (b.views || 0) - (a.views || 0)).slice(0, 4);
  const aiArticles = articles.filter(a => a.category === 'ai').slice(0, 5);
  const securityArticles = articles.filter(a => a.category === 'security').slice(0, 5);

  return (
    <main style={{ paddingTop: 64, background: '#FAF7F0', minHeight: '100vh', fontFamily: 'Inter,sans-serif' }}>
      <HeroSection featured={featured} navigate={navigate} />
      <StatsBar />

      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 24px' }}>
        {featured && (
          <section className="home-section" style={{ padding: '60px 0 40px' }} aria-labelledby="featured-title">
            <h2 id="featured-title" style={sectionTitle}>Featured</h2>
            <p style={sectionSubtitle}>The deepest analysis this week</p>
            <FeaturedArticle article={featured} />
          </section>
        )}

        <section className="home-section" style={{ padding: '40px 0' }} aria-labelledby="latest-title">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
            <h2 id="latest-title" style={{ ...sectionTitle, margin: 0 }}>Latest</h2>
            <button onClick={() => navigate('/articles')} style={{ background: 'none', border: 'none', color: '#0F6B73', fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter,sans-serif' }}>View all →</button>
          </div>
          <p style={sectionSubtitle}>The latest analysis from Teknav</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 20 }} className="article-grid">
            {latest.map((a, i) => <ArticleCard key={a.id} article={a} delay={i * 80} />)}
          </div>
        </section>

        {aiArticles.length > 0 && (
          <section className="home-section" style={{ padding: '40px 0', borderTop: '2px solid #0F6B7318' }} aria-labelledby="ai-title">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#0F6B73', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ color: '#fff', fontSize: 16 }}>⚙</span>
              </div>
              <div>
                <h2 id="ai-title" style={{ ...sectionTitle, margin: 0 }}>AI Engineering</h2>
                <p style={{ ...sectionSubtitle, margin: 0 }}>Production AI systems, agents, and model infrastructure</p>
              </div>
              <button onClick={() => navigate('/category/ai')} style={{ marginLeft: 'auto', background: 'none', border: '1px solid #0F6B7340', color: '#0F6B73', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter,sans-serif', padding: '6px 14px', borderRadius: 999 }}>View section →</button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 20 }}>
              {aiArticles.map(a => <ArticleRowCompact key={a.id} article={a} />)}
            </div>
          </section>
        )}

        {securityArticles.length > 0 && (
          <section className="home-section" style={{ padding: '40px 0', borderTop: '2px solid #C76D4A18' }} aria-labelledby="security-title">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 8 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: '#C76D4A', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ color: '#fff', fontSize: 16 }}>⚖</span>
              </div>
              <div>
                <h2 id="security-title" style={{ ...sectionTitle, margin: 0 }}>Security & Legal</h2>
                <p style={{ ...sectionSubtitle, margin: 0 }}>AI security, legal liability, and governance</p>
              </div>
              <button onClick={() => navigate('/category/security')} style={{ marginLeft: 'auto', background: 'none', border: '1px solid #C76D4A40', color: '#C76D4A', fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter,sans-serif', padding: '6px 14px', borderRadius: 999 }}>View section →</button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, marginTop: 20 }}>
              {securityArticles.map(a => <ArticleRowCompact key={a.id} article={a} />)}
            </div>
          </section>
        )}

        <section className="home-section" style={{ padding: '40px 0' }} aria-labelledby="popular-title">
          <h2 id="popular-title" style={sectionTitle}>Most Read</h2>
          <p style={sectionSubtitle}>Teknav's most-read articles</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(280px,1fr))', gap: 20 }} className="article-grid">
            {popular.map((a, i) => <ArticleCard key={a.id} article={a} delay={i * 100} />)}
          </div>
        </section>

        <section className="home-section" style={{ padding: '40px 0' }} aria-labelledby="categories-title">
          <h2 id="categories-title" style={sectionTitle}>Topics</h2>
          <p style={sectionSubtitle}>Explore by area of expertise</p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(200px,1fr))', gap: 12 }} className="categories-grid">
            {categories.map(cat => (
              <div key={cat.id} onClick={() => navigate('/category/' + cat.id)} style={{
                background: '#fff', border: `1px solid ${cat.color}30`, borderRadius: 10, padding: '20px 16px',
                cursor: 'pointer', transition: 'all 0.2s', borderLeft: `3px solid ${cat.color}`,
              }} onMouseEnter={e => e.currentTarget.style.background = cat.color + '08'}
                 onMouseLeave={e => e.currentTarget.style.background = '#fff'}>
                <div style={{ fontSize: 14, fontWeight: 700, color: '#263238', marginBottom: 4 }}>{cat.name}</div>
                <div style={{ fontSize: 11, color: '#5F6B6D', marginBottom: 10 }}>{cat.description}</div>
                <div style={{ fontSize: 11, color: cat.color, fontWeight: 600 }}>{allArticlesData.filter(a => a.category === cat.id).length} articles</div>
              </div>
            ))}
          </div>
        </section>

        <AuthorsSection />

        <section style={{ padding: '40px 0 60px' }} aria-labelledby="newsletter-title">
          <div className="newsletter-box" style={{ background: '#ebe3d2', borderRadius: 20, padding: '52px 32px', textAlign: 'center', position: 'relative', overflow: 'hidden', border: '1px solid rgba(15,42,46,0.06)' }}>
            <div style={{ position: 'absolute', top: -80, left: -80, width: 280, height: 280, borderRadius: '50%', background: 'radial-gradient(circle, rgba(15,107,115,0.10) 0%, transparent 70%)', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', bottom: -60, right: -60, width: 220, height: 220, borderRadius: '50%', background: 'radial-gradient(circle, rgba(196,106,77,0.10) 0%, transparent 70%)', pointerEvents: 'none' }} />
            <div style={{ position: 'relative', zIndex: 1 }}>
              <div style={{ fontSize: 22, marginBottom: 6, color: '#0F6B73' }}>✉</div>
              <h2 id="newsletter-title" style={{ fontSize: 26, fontWeight: 800, color: '#0F2A2E', margin: '0 0 10px', fontFamily: 'Inter,sans-serif', letterSpacing: '-0.02em' }}>Subscribe to Teknav</h2>
              <p style={{ fontSize: 14, color: '#4A5A5C', margin: '0 0 28px', lineHeight: 1.9, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>Every week, Teknav's best analysis delivered straight to your inbox</p>
              <NewsletterForm />
            </div>
          </div>
        </section>
      </div>

      <style>{`
        @media (max-width: 640px) {
          .featured-card { grid-template-columns: 1fr !important; }
          .stats-bar-inner { grid-template-columns: repeat(2, 1fr) !important; }
          .article-grid { grid-template-columns: 1fr !important; }
          .authors-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .categories-grid { grid-template-columns: repeat(2, 1fr) !important; }
          .newsletter-box { padding: 36px 20px !important; }
        }
      `}</style>
    </main>
  );
}

export { ArticleCard, ArticleRowCompact, sectionTitle, sectionSubtitle };