const { NavBar, SectionHeader, ContentCard, SuperBanner, ComboBanner, DriftWall, HeroLogoGlitch } = window.SexyGeekDS;
const { useState, useEffect } = React;

const NAV_ITEMS = [
  { id: 'home', label: 'Início' },
  { id: 'conteudo', label: 'Conteúdo' },
  { id: 'models', label: 'Modelos' },
];

function goNav(id) {
  if (id === 'home') return SG.navTo('/');
  if (id === 'conteudo') return SG.navTo('/conteudo');
  if (id === 'models') return SG.navTo('/modelos');
}

function StaticHero() {
  return (
    <div className="gx-scanlines gx-noise gx-pixel-corners" style={{
      overflow: 'hidden', position: 'relative', minHeight: 420,
      background: 'radial-gradient(ellipse at 30% 20%, rgba(8,118,201,0.3), transparent 60%), radial-gradient(ellipse at 80% 80%, rgba(98,216,255,0.2), transparent 55%), #0A0A0F',
      border: '1px solid var(--border-subtle)', display: 'flex', alignItems: 'center', padding: '0 56px',
    }}>
      <div style={{ maxWidth: 560 }}>
        <div className="gx-glitch" data-text="BEM-VINDO AO SEXY GEEK" style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--blue-light)', marginBottom: 14 }}>
          BEM-VINDO AO SEXY GEEK
        </div>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(32px,4.5vw,56px)', lineHeight: 1.05, textTransform: 'uppercase', marginBottom: 18 }}>
          Conteúdo exclusivo,<br />direto pra você.
        </h1>
        <p style={{ color: 'var(--text-secondary)', fontSize: 16, lineHeight: 1.6, marginBottom: 26, maxWidth: 460 }}>
          Ensaios completos, prévia sempre grátis. Assine e desbloqueie tudo.
        </p>
        <button onClick={() => SG.navTo('/assinar')} style={{
          background: 'var(--gradient-sx)', border: 'none', borderRadius: 9999, color: '#fff',
          fontFamily: 'var(--font-ui)', fontWeight: 700, fontSize: 14, padding: '14px 30px', cursor: 'pointer',
          boxShadow: 'var(--glow-purple)',
        }}>Assinar agora</button>
      </div>
      <HeroLogoGlitch />
    </div>
  );
}

function Footer() {
  return (
    <footer className="gx-dot-grid-bg" style={{ borderTop: '1px solid var(--border-subtle)', padding: '32px 24px', marginTop: 40 }}>
      <div className="page-wrap" style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12 }}>
        <img className="sg-brand-logo" src="/assets/sexy-geek-logo.png" alt="SEXY GEEK" style={{ width: 112, height: 'auto' }} />
        <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>© {new Date().getFullYear()} Sexy Geek. Conteúdo para maiores de 18 anos.</span>
      </div>
    </footer>
  );
}

function Home() {
  const [featured, setFeatured] = useState(null);
  const [content, setContent] = useState(null);
  const [stats, setStats] = useState(null);

  useEffect(() => {
    // Limite maior que o das outras seções — aqui as fotos são o próprio conteúdo do mural
    // (Drift Wall), não uma lista pra ler nome por nome, então quanto mais variedade, melhor.
    SG.api('/api/models/featured?limit=24').then(setFeatured).catch(() => setFeatured([]));
    SG.api('/api/content?limit=8&sort=recentes').then(r => setContent(r.items)).catch(() => setContent([]));
    SG.api('/api/stats').then(setStats).catch(() => setStats(null));
  }, []);

  // Números reais do catálogo (nunca inventados) pro banner de assinatura.
  const comboStats = stats && [
    { num: stats.posts, label: 'ensaios', sub: 'no catálogo' },
    { num: stats.models, label: 'modelos', sub: 'cadastradas' },
    { num: stats.fotos, label: 'fotos', sub: 'no total' },
  ];

  const slides = (content || []).slice(0, 3).filter(c => c.capa).map(c => ({
    id: c.id, project: 'geek', category: c.tipo || 'editorial',
    kicker: 'CONTEÚDO SEXY GEEK', title: c.title, excerpt: c.desc || '',
    meta: `+${c.members_count || 0} fotos exclusivas`, imgSrc: c.capa,
  }));

  return (
    <React.Fragment>
      <NavBar items={NAV_ITEMS} active="home" onNavigate={goNav} onSubscribe={() => SG.navTo('/assinar')} onLogin={() => SG.navTo('/entrar')} user={SG.getUser()} onAccount={() => SG.navTo('/minha-conta')} />
      <div className="page-wrap" style={{ paddingTop: 28 }}>
        {slides.length > 0 ? <SuperBanner slides={slides} onOpen={s => SG.navTo(`/conteudo/${(content.find(c => c.id === s.id) || {}).slug}`)} /> : <StaticHero />}
      </div>

      {/* Assinatura + "modelos em destaque" fundidos numa peça só — o mural de fotos (Drift Wall)
          vira o pano de fundo do próprio banner de assinar, em vez de duas seções separadas
          competindo por atenção. Ajuda a vender: quem tá olhando o preço também tá olhando o
          catálogo de verdade, e cada foto do mural continua clicável (leva pro perfil da
          modelo). Logo abaixo do hero — é a decisão de conversão mais importante da página. */}
      <div className="page-wrap" style={{ paddingTop: 28 }}>
        <ComboBanner
          {...(comboStats ? { stats: comboStats } : {})}
          secondaryCtaLabel="Ver todas as modelos"
          onSecondaryCta={() => SG.navTo('/modelos')}
          onSubscribe={() => SG.navTo('/assinar')}
          {...(featured && featured.filter(m => m.capa).length > 0 ? {
            backdrop: (
              <DriftWall
                items={featured.filter(m => m.capa).map(m => ({ id: m.id, name: m.nome, imgSrc: m.capa, slug: m.slug }))}
                height={480}
                onOpen={item => SG.navTo(`/modelos/${item.slug}`)}
              />
            ),
          } : {})}
        />
      </div>

      <div className="page-wrap section-pad" style={{ paddingTop: 0 }}>
        <SectionHeader title="Últimos conteúdos" cta="Ver tudo" onCta={() => SG.navTo('/conteudo')} />
        {content === null ? (
          <div className="grid-4">{[0,1,2,3].map(i => <div key={i} className="skeleton" style={{ aspectRatio: '4/3' }} />)}</div>
        ) : content.length === 0 ? (
          <div style={{ color: 'var(--text-muted)', fontSize: 14 }}>Nenhum conteúdo publicado ainda.</div>
        ) : (
          <div className="grid-4">
            {content.map(c => (
              <ContentCard key={c.id} title={c.title} meta={SG.fmtDate(c.date)} project="geek" category={c.tipo}
                imgSrc={c.capa} gradient={c.gradient} onClick={() => SG.navTo(`/conteudo/${c.slug}`)} />
            ))}
          </div>
        )}
      </div>

      <div style={{ paddingBottom: 40 }} />

      <Footer />
    </React.Fragment>
  );
}