const { useState, useEffect } = React;

// ── Helpers ───────────────────────────────────────────────────────────────────

function fmtDate(iso) {
  if (!iso) return '';
  try { return new Date(iso).toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' }); } catch { return ''; }
}

// DS taxonomy
const TIPO_PROJECT_MAP = (() => {
  const m = {};
  const defs = {
    papo:        ['Episódios Papo com Pijama','Papo com Pijama Hot','Apresentadoras Papo com Pijama','Papo na Banheira','Papo com Requesty.me','Papo com Skokka'],
    pimentinhas: ['Pimentinhas 2026 HOT','Pimentinhas Junho 2026 HOT','Pimentinhas Junho 2026','Pimentinhas Maio 2026 HOT','Pimentinhas Maio 2026','Pimentinhas 10'],
    casapim:     ['Casa das Pimentinhas','Episódios Casa das Pimentinhas 10','Capa Casa das Pimentinhas 10','Madrinha Casa das Pimentinhas 10','Apresentadora Casa das Pimentinhas 10'],
    revista:     ['Revista Sexy','Sexy Girls','Sexy Blitz','Programas Sexy Blitz','Sexy Unboxing','Sexy Geek','Caminhos do Prazer','De Frente com a Prazeróloga','Ketlen em Cena','Mentora do Homem Consciente','Matérias'],
    sxclube:     ['Episódios California TV','California TV'],
  };
  Object.entries(defs).forEach(([proj, arr]) => arr.forEach(t => { m[t] = proj; }));
  return m;
})();

const PROJECT_CFGS = {
  revista:     { label: 'REVISTA SEXY',         color: '#C8A96E', bg: 'rgba(200,169,110,0.15)', border: 'rgba(200,169,110,0.3)' },
  sxclube:     { label: 'SXCLUBE',              color: '#9A65F5', bg: 'rgba(123,63,242,0.15)',  border: 'rgba(123,63,242,0.35)' },
  casapim:     { label: 'CASA DAS PIMENTINHAS', color: '#FF4D97', bg: 'rgba(255,22,117,0.15)',  border: 'rgba(255,22,117,0.3)' },
  pimentinhas: { label: 'PIMENTINHAS',          color: '#FF4D97', bg: 'rgba(255,22,117,0.12)',  border: 'rgba(255,22,117,0.25)' },
  papo:        { label: 'PAPO COM PIJAMA',      color: '#33CFFF', bg: 'rgba(0,194,255,0.12)',   border: 'rgba(0,194,255,0.3)' },
};

const TYPE_CORNER_CFGS = {
  video:     { bg: 'rgba(255,22,117,0.85)', color: '#fff',                   label: 'VÍDEO' },
  galeria:   { bg: 'rgba(123,63,242,0.85)', color: '#fff',                   label: 'GALERIA' },
  editorial: { bg: 'rgba(10,10,15,0.6)',    color: 'rgba(255,255,255,0.5)', label: 'EDITORIAL' },
};

function getCategory(tipo) {
  if (!tipo) return 'editorial';
  const t = tipo.toLowerCase();
  if (t.includes('episód') || t.includes('vídeo') || t.includes('programa')) return 'video';
  if (t.includes('galeria') || t.includes('fotos') || t.includes('capa')) return 'galeria';
  return 'editorial';
}

function getProject(tipo) { return TIPO_PROJECT_MAP[tipo] || null; }

function ProjectTag({ tipo }) {
  const pc = PROJECT_CFGS[getProject(tipo)];
  if (!pc) return null;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', whiteSpace: 'nowrap', fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 9px', borderRadius: 9999, background: pc.bg, color: pc.color, border: `1px solid ${pc.border}`, fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>
      {pc.label}
    </span>
  );
}

function TypeCorner({ tipo }) {
  const c = TYPE_CORNER_CFGS[getCategory(tipo)];
  if (!c) return null;
  return (
    <div style={{ position: 'absolute', top: 10, right: 10, zIndex: 3, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '4px 8px', borderRadius: 9999, background: c.bg, color: c.color, backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', fontFamily: "'Inter', sans-serif", lineHeight: 1 }}>
      {c.label}
    </div>
  );
}

const PROJECTS = [
  { id: 'revista',     nome: 'Revista Sexy',         label: 'DESDE 1993',     accent: '#C8A96E', glow: 'rgba(200,169,110,0.18)', bg: 'linear-gradient(135deg,#1a1208,#2e2010,#0A0A0F)', border: 'rgba(200,169,110,0.25)', logo: '/assets/Logo-Sexy.svg', logoH: 26 },
  { id: 'sxclube',     nome: 'SX Clube',             label: 'ASSINATURA',     accent: '#9A65F5', glow: 'rgba(123,63,242,0.18)',  bg: 'linear-gradient(135deg,#14082e,#260a50,#0A0A0F)', border: 'rgba(123,63,242,0.35)',   logo: '/assets/logo-sexy-clube.svg', logoH: 32, badge: 'PREMIUM' },
  { id: 'casapim',     nome: 'Casa das Pimentinhas', label: 'REALITY',        accent: '#FF4D97', glow: 'rgba(255,22,117,0.15)',  bg: 'linear-gradient(135deg,#200010,#450020,#0A0A0F)', border: 'rgba(255,22,117,0.3)',    logo: '/assets/logo-casa-pimentinhas.svg', logoH: 36 },
  { id: 'pimentinhas', nome: 'Pimentinhas',          label: 'SÉRIE',          accent: '#FF8A80', glow: 'rgba(255,138,128,0.12)', bg: 'linear-gradient(135deg,#2a0008,#5c0020,#0A0A0F)', border: 'rgba(255,138,128,0.25)', logo: '/assets/logo-pimentinhas.png', logoH: 30 },
  { id: 'papo',        nome: 'Papo com Pijama',      label: 'PODCAST · VÍDEO', accent: '#33CFFF', glow: 'rgba(0,194,255,0.12)',   bg: 'linear-gradient(135deg,#001520,#002a40,#0A0A0F)', border: 'rgba(0,194,255,0.25)',   logo: '/assets/logo-papo-pijama.svg', logoH: 34 },
];

// ── NavBar ────────────────────────────────────────────────────────────────────

function NavBar() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200, height: 64, background: 'rgba(10,10,15,0.92)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)', borderBottom: '1px solid rgba(255,255,255,0.06)', display: 'flex', alignItems: 'center', padding: '0 24px', gap: 24 }}>
      <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
        <img src="/assets/sx_fill.svg" style={{ height: 28, width: 'auto', filter: 'brightness(0) invert(1)' }} alt="SX" />
        <img src="/assets/Logo-Sexy.svg" style={{ height: 18, width: 'auto', filter: 'brightness(0) invert(1)', opacity: 0.85 }} alt="SEXY" />
      </a>
      <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1 }}>
        {[['Conteúdo','/conteudo'],['Modelos','/modelos'],['Projetos','/projeto/revista'],['Busca','/busca']].map(([label, href]) => (
          <a key={href} href={href} style={{ fontSize: 13, fontWeight: 500, color: '#9999B2', padding: '6px 12px', borderRadius: 8, transition: 'color 0.15s' }}
             onMouseEnter={e => e.target.style.color='#EFEFEF'} onMouseLeave={e => e.target.style.color='#9999B2'}>{label}</a>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginLeft: 'auto' }}>
        <a href="/entrar" style={{ fontSize: 13, fontWeight: 500, color: '#9999B2' }}
           onMouseEnter={e => e.target.style.color='#EFEFEF'} onMouseLeave={e => e.target.style.color='#9999B2'}>Entrar</a>
        <a href="/assinar" style={{ display: 'inline-flex', alignItems: 'center', background: 'linear-gradient(135deg,#7B3FF2,#FF1675)', borderRadius: 9999, color: '#fff', fontSize: 13, fontWeight: 600, padding: '8px 18px', flexShrink: 0 }}>Assinar</a>
      </div>
    </nav>
  );
}

// ── TypeBadge (inline use in hero/feed) ──────────────────────────────────────

function TypeBadge({ tipo }) {
  const c = TYPE_CORNER_CFGS[getCategory(tipo)];
  if (!c) return null;
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 9999, background: c.bg, color: c.color, backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', fontFamily: "'Inter',sans-serif", lineHeight: 1 }}>{c.label}</span>
  );
}

// ── SectionHeader ─────────────────────────────────────────────────────────────

function SectionHeader({ title, cta, href }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
      <h2 style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 'clamp(20px, 2.2vw, 26px)', color: '#EFEFEF', textTransform: 'uppercase', letterSpacing: '0.02em' }}>{title}</h2>
      {cta && href && (
        <a href={href} style={{ fontSize: 12, fontWeight: 600, color: '#9999B2', display: 'flex', alignItems: 'center', gap: 4, letterSpacing: '0.04em', textTransform: 'uppercase' }}
           onMouseEnter={e => e.currentTarget.style.color='#FF4D97'} onMouseLeave={e => e.currentTarget.style.color='#9999B2'}>
          {cta} <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      )}
    </div>
  );
}

// ── ContentCard ───────────────────────────────────────────────────────────────

function ContentCard({ post, aspect = '16/9' }) {
  const [hov, setHov] = useState(false);
  const href = `/conteudo/${post.slug}`;
  const isVideo = getCategory(post.tipo) === 'video';
  const cover = post.capa || (!isVideo ? post.modelos?.[0]?.capa : null) || null;
  const isPortrait = aspect === '3/4' || aspect === '4/5';

  if (isPortrait) {
    return (
      <div className="content-card" onClick={() => window.location.href = href}
        onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
        style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', aspectRatio: '3/4', cursor: 'pointer',
          border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`,
          boxShadow: hov ? '0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(123,63,242,0.2)' : '0 4px 20px rgba(0,0,0,0.45)',
          transform: hov ? 'translateY(-3px)' : 'none',
          transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s',
          background: '#14141C' }}>
        <div style={{ position: 'absolute', inset: 0, background: post.gradient || 'linear-gradient(135deg,#14082e,#0A0A0F)' }} />
        {cover && <img src={cover} alt={post.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} onError={e => e.target.style.display='none'} />}
        <TypeCorner tipo={post.tipo} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.1) 55%, transparent 100%)' }} />
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 16px 18px' }}>
          <div style={{ marginBottom: 8 }}><ProjectTag tipo={post.tipo} /></div>
          <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 14, color: '#EFEFEF', lineHeight: 1.25, textTransform: 'uppercase', letterSpacing: '0.02em' }}>{post.title}</div>
          <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 6, fontFamily: "'Inter',sans-serif" }}>{fmtDate(post.date)}</div>
        </div>
      </div>
    );
  }

  return (
    <div className="content-card" onClick={() => window.location.href = href}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ borderRadius: 16, overflow: 'hidden', background: post.gradient || '#14141C',
        border: `1px solid ${hov ? 'rgba(255,255,255,0.14)' : 'rgba(255,255,255,0.06)'}`,
        position: 'relative', cursor: 'pointer',
        boxShadow: hov ? '0 4px 24px rgba(0,0,0,0.5), 0 0 20px rgba(123,63,242,0.3)' : '0 4px 24px rgba(0,0,0,0.4)',
        transform: hov ? 'scale(1.02)' : 'scale(1)',
        transition: 'transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s, border-color 0.2s' }}>
      <div style={{ aspectRatio: aspect, position: 'relative', overflow: 'hidden', background: '#0A0A0F' }}>
        <div style={{ position: 'absolute', inset: 0, background: post.gradient || 'linear-gradient(135deg,#14082e,#0A0A0F)' }} />
        {cover && <img src={cover} alt={post.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }} onError={e => e.target.style.display='none'} />}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 80, background: 'linear-gradient(to top, #14141C, transparent)' }} />
        <TypeCorner tipo={post.tipo} />
      </div>
      <div style={{ padding: '12px 14px 14px' }}>
        <div style={{ marginBottom: 8 }}><ProjectTag tipo={post.tipo} /></div>
        <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 13, color: '#EFEFEF', lineHeight: 1.3, textTransform: 'uppercase', letterSpacing: '0.02em', overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', marginBottom: 5 }}>{post.title}</div>
        <div style={{ fontSize: 10, color: '#55556A', fontFamily: "'Inter',sans-serif" }}>{fmtDate(post.date)}</div>
      </div>
    </div>
  );
}

// ── HeroCard ──────────────────────────────────────────────────────────────────

function HeroCard({ post }) {
  if (!post) return null;
  const isVideo = getCategory(post.tipo) === 'video';
  const cover = post.capa || (!isVideo ? post.modelos?.[0]?.capa : null) || null;
  return (
    <div className="content-card" onClick={() => window.location.href = `/conteudo/${post.slug}`}
      style={{ borderRadius: 16, overflow: 'hidden', position: 'relative', aspectRatio: '21/9', background: post.gradient || '#14141C', cursor: 'pointer' }}>
      {cover && (
        <img src={cover} alt={post.title} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} onError={e => e.target.style.display='none'} />
      )}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.95) 0%, rgba(10,10,15,0.4) 50%, transparent 100%)' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '28px 32px' }}>
        <div style={{ marginBottom: 10 }}><TypeBadge tipo={post.tipo} /></div>
        <h1 className="hero-text" style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 36, color: '#EFEFEF', lineHeight: 1.1, textTransform: 'uppercase', letterSpacing: '0.01em', maxWidth: 600, marginBottom: 10 }}>{post.title}</h1>
        {post.desc && <p style={{ fontSize: 13, color: '#9999B2', lineHeight: 1.6, maxWidth: 480, marginBottom: 16 }}>{post.desc.slice(0, 140)}{post.desc.length > 140 ? '…' : ''}</p>}
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 9999, color: '#EFEFEF', fontSize: 12, fontWeight: 600, padding: '8px 16px' }}>
          Ver conteúdo <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </span>
      </div>
    </div>
  );
}

// ── ProjectTiles ──────────────────────────────────────────────────────────────

function ProjectTiles() {
  return (
    <div>
      <SectionHeader title="Projetos" cta="Ver conteúdo" href="/conteudo" />
      <div className="projects-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 10 }}>
        {PROJECTS.map(p => (
          <div key={p.id} className="project-tile" onClick={() => window.location.href = `/projeto/${p.id}`}
            style={{ '--tile-accent': p.border, '--tile-glow': p.glow, borderRadius: 16, background: p.bg, border: `1px solid rgba(255,255,255,0.07)`, minHeight: 100, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
            {p.badge && (
              <span style={{ position: 'absolute', top: 10, right: 10, fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '2px 7px', borderRadius: 9999, background: 'linear-gradient(135deg,#7B3FF2,#FF1675)', color: '#fff', fontFamily: "'Inter',sans-serif", zIndex: 2 }}>{p.badge}</span>
            )}
            <div style={{ padding: '20px 18px 0', zIndex: 1 }}>
              <img src={p.logo} alt={p.nome} style={{ height: p.logoH, width: 'auto', maxWidth: '85%', filter: 'brightness(0) invert(1)', opacity: 0.85 }} onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block'; }} />
              <span style={{ display: 'none', fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 14, color: '#EFEFEF' }}>{p.nome}</span>
            </div>
            <div style={{ padding: '8px 18px 14px', fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: p.accent, fontFamily: "'Inter',sans-serif", opacity: 0.7 }}>{p.label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── ComboPremiumBanner ────────────────────────────────────────────────────────

function ComboPremiumBanner({ stats }) {
  return (
    <div>
      {stats && (
        <div style={{ fontSize: 12, color: '#9999B2', fontFamily: "'Inter',sans-serif", marginBottom: 16 }}>
          {stats.models} modelos · {stats.posts}+ conteúdos · {stats.fotos?.toLocaleString('pt-BR')}+ fotos
        </div>
      )}
      <DualPlanCard individualSlug="sxclube" title={null} />
    </div>
  );
}

// ── ModelCard ─────────────────────────────────────────────────────────────────

function ModelCard({ model, rank }) {
  const [hov, setHov] = useState(false);
  const isFirst = rank === 0;
  return (
    <div className="model-card" onClick={() => window.location.href = `/modelos/${model.slug}`}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ borderRadius: 16, overflow: 'hidden', position: 'relative', aspectRatio: '3/4', cursor: 'pointer',
        border: isFirst ? `1px solid ${hov ? 'rgba(255,22,117,0.7)' : 'rgba(255,22,117,0.35)'}` : `1px solid ${hov ? 'rgba(255,255,255,0.15)' : 'rgba(255,255,255,0.05)'}`,
        background: model.gradient || '#14141C',
        boxShadow: hov ? (isFirst ? '0 0 28px rgba(255,22,117,0.35), 0 8px 32px rgba(0,0,0,0.5)' : '0 0 20px rgba(123,63,242,0.25), 0 8px 32px rgba(0,0,0,0.5)') : '0 4px 20px rgba(0,0,0,0.5)',
        transform: hov ? 'translateY(-4px) scale(1.01)' : 'translateY(0) scale(1)',
        transition: 'transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s' }}>
      {model.capa && <img src={model.capa} alt={model.nome} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} onError={e => e.target.style.display='none'} />}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.3) 50%, transparent 100%)' }} />
      {typeof rank === 'number' && (
        <div style={{ position: 'absolute', top: 8, left: 12, fontFamily: "'Space Grotesk',sans-serif", fontWeight: 900, fontSize: 64, lineHeight: 1, color: isFirst ? 'rgba(255,22,117,0.18)' : 'rgba(255,255,255,0.07)', userSelect: 'none', pointerEvents: 'none', letterSpacing: '-0.04em' }}>{rank + 1}</div>
      )}
      {isFirst && (
        <div style={{ position: 'absolute', top: 8, right: 10, display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 8, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', padding: '3px 8px', borderRadius: 9999, background: 'rgba(255,22,117,0.25)', color: '#FF4D97', border: '1px solid rgba(255,22,117,0.4)', fontFamily: "'Inter',sans-serif", lineHeight: 1 }}>
          <svg width="7" height="7" viewBox="0 0 24 24" fill="#FF4D97"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg> MAIS POPULAR
        </div>
      )}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 14px 16px' }}>
        <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 700, fontSize: 15, color: '#EFEFEF', lineHeight: 1.2 }}>{model.nome}</div>
        <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.45)', marginTop: 3, fontFamily: "'Inter',sans-serif" }}>{model.n_fotos || 0} fotos · {model.n_edicoes || 0} projetos</div>
      </div>
    </div>
  );
}

// ── FeedItem ──────────────────────────────────────────────────────────────────

function FeedItem({ post }) {
  const isVideo = getCategory(post.tipo) === 'video';
  const cover = post.capa || (!isVideo ? post.modelos?.[0]?.capa : null) || null;
  return (
    <div className="content-card" onClick={() => window.location.href = `/conteudo/${post.slug}`}
      style={{ display: 'flex', gap: 14, alignItems: 'center', padding: '12px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
      <div style={{ width: 72, height: 52, borderRadius: 8, overflow: 'hidden', flexShrink: 0, background: post.gradient || '#14141C' }}>
        {cover && <img src={cover} alt={post.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} onError={e => e.target.style.display='none'} />}
      </div>
      <div style={{ flex: 1, minWidth: 0 }}>
        <TypeBadge tipo={post.tipo} />
        <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 600, fontSize: 12, color: '#EFEFEF', lineHeight: 1.3, textTransform: 'uppercase', letterSpacing: '0.02em', marginTop: 5, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>{post.title}</div>
        <div style={{ fontSize: 10, color: '#55556A', marginTop: 4, fontFamily: "'Inter',sans-serif" }}>{fmtDate(post.date)}</div>
      </div>
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#55556A" strokeWidth="2" strokeLinecap="round" style={{ flexShrink: 0 }}><path d="M9 18l6-6-6-6"/></svg>
    </div>
  );
}

// ── Home ──────────────────────────────────────────────────────────────────────

function Home() {
  const [content, setContent]   = useState([]);
  const [models, setModels]     = useState([]);
  const [stats, setStats]       = useState(null);
  const [loading, setLoading]   = useState(true);

  useEffect(() => {
    Promise.all([
      fetch('/api/content?limit=12').then(r => r.json()),
      fetch('/api/models?limit=12').then(r => r.json()),
      fetch('/api/stats').then(r => r.json()),
    ]).then(([contentData, modelsData, statsData]) => {
      setContent(Array.isArray(contentData?.items) ? contentData.items : []);
      setModels(Array.isArray(modelsData) ? modelsData : []);
      setStats(statsData);
    }).catch(console.error).finally(() => setLoading(false));
  }, []);

  const hero    = content[0] || null;
  const grid    = content.slice(1, 9);
  const feed    = content.slice(9, 12);
  const topMods = models.slice(0, 5);
  const moreMods = models.slice(5, 10);

  if (loading) return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh', color: '#55556A', fontFamily: 'Inter,sans-serif' }}>Carregando...</div>
  );

  return (
    <div style={{ background: '#0A0A0F', minHeight: '100vh' }}>
      <NavBar />

      <div style={{ paddingTop: 64 }}>

        {/* ── Hero ── */}
        <section style={{ maxWidth: 1400, margin: '0 auto', padding: '32px 40px 0' }} className="page-wrap">
          <HeroCard post={hero} />
        </section>

        {/* ── Projetos ── */}
        <section style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 40px 0' }} className="page-wrap">
          <ProjectTiles />
        </section>

        {/* ── Combo Premium ── */}
        <section style={{ maxWidth: 1400, margin: '0 auto', padding: '24px 40px 0' }} className="page-wrap">
          <ComboPremiumBanner stats={stats} />
        </section>

        {/* ── Últimas Publicações ── */}
        {grid.length > 0 && (
          <section className="section-pad" style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 40px 0' }}>
            <SectionHeader title="Últimas Publicações" cta="Ver Tudo" href="/conteudo" />
            <div className="content-grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 10 }}>
              {grid.map(post => <ContentCard key={post.id} post={post} aspect="3/4" />)}
            </div>
          </section>
        )}

        {/* ── Top Modelos ── */}
        {topMods.length > 0 && (
          <section className="section-pad" style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 40px 0' }}>
            <SectionHeader title="Modelos em Destaque" cta="Ver Todas" href="/modelos" />
            <div className="models-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12 }}>
              {topMods.map((m, i) => <ModelCard key={m.id} model={m} rank={i} />)}
            </div>
          </section>
        )}

        {/* ── Feed + Mais Modelos ── */}
        <section className="section-pad" style={{ maxWidth: 1400, margin: '0 auto', padding: '40px 40px 48px' }}>
          <div className="content-grid-2" style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 24 }}>

            {/* Feed list */}
            {feed.length > 0 && (
              <div>
                <SectionHeader title="Mais Conteúdo" cta="Ver arquivo" href="/conteudo" />
                <div>{feed.map(post => <FeedItem key={post.id} post={post} />)}</div>
                <a href="/conteudo" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 20, fontSize: 12, fontWeight: 600, color: '#7B3FF2', textTransform: 'uppercase', letterSpacing: '0.04em' }}>Ver todos os conteúdos <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg></a>
              </div>
            )}

            {/* Mais modelos */}
            {moreMods.length > 0 && (
              <div>
                <SectionHeader title="Mais Modelos" cta="Ver Todas" href="/modelos" />
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {moreMods.map(model => (
                    <div key={model.id} className="content-card" onClick={() => window.location.href = `/modelos/${model.slug}`}
                      style={{ display: 'flex', gap: 12, alignItems: 'center', padding: '10px 12px', background: '#14141C', borderRadius: 10, border: '1px solid rgba(255,255,255,0.05)' }}>
                      <div style={{ width: 44, height: 44, borderRadius: 8, overflow: 'hidden', flexShrink: 0, background: model.gradient || '#1B1B26' }}>
                        {model.capa && <img src={model.capa} alt={model.nome} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} onError={e => e.target.style.display='none'} />}
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontFamily: "'Space Grotesk',sans-serif", fontWeight: 600, fontSize: 13, color: '#EFEFEF', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{model.nome}</div>
                        <div style={{ fontSize: 10, color: '#55556A', fontFamily: "'Inter',sans-serif", marginTop: 2 }}>{model.n_fotos || 0} fotos</div>
                      </div>
                      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#55556A" strokeWidth="2" strokeLinecap="round"><path d="M9 18l6-6-6-6"/></svg>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        </section>

        {/* ── Footer ── */}
        <footer style={{ borderTop: '1px solid rgba(255,255,255,0.06)', padding: '28px 40px', maxWidth: 1400, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <img src="/assets/sx_fill.svg" style={{ height: 20, filter: 'brightness(0) invert(1)', opacity: 0.5 }} alt="SX" />
            <span style={{ fontSize: 11, color: '#55556A', fontFamily: "'Inter',sans-serif" }}>© 2026 Revista Sexy · Todos os direitos reservados</span>
          </div>
          <div style={{ display: 'flex', gap: 20 }}>
            {[['Conteúdo','/conteudo'],['Modelos','/modelos'],['Assinar','/assinar'],['Entrar','/entrar']].map(([label, href]) => (
              <a key={href} href={href} style={{ fontSize: 11, color: '#55556A', fontFamily: "'Inter',sans-serif" }}>{label}</a>
            ))}
          </div>
        </footer>

      </div>
    </div>
  );
}