// V1 — Editorial Dark: layout InfoMoney portado para escuro.
// Manchete dominante à esquerda, grid central, coluna lateral. Serifa nos títulos.

const V1Editorial = ({ density = "spacious", showInsta = true, theme = "dark" }) => {
  const [modal, setModal] = React.useState(false);
  const [activeCat, setActiveCat] = React.useState("Início");
  const accent = "#1ce8c8";
  const today = window.NEWSLETTERS[0];

  return (
    <div className={`v1 v1-${theme} v1-${density}`}>
      <InstaTopBanner accent={accent} />

      <header className="v1-header">
        <div className="v1-header-inner">
          <button className="v1-menu">≡</button>
          <div className="v1-search">
            <span>⌕</span>
            <input placeholder="Buscar notícias, ferramentas, modelos..." />
          </div>
          <div className="v1-logo-center"><Logo accent={accent} text={theme === "dark" ? "#fff" : "#0a0a0a"} /></div>
          <div className="v1-header-right">
            <SubscribeBtn accent={accent} onClick={() => setModal(true)} />
          </div>
        </div>
        <nav className="v1-nav">
          {window.CATEGORIES.map((c) => (
            <a key={c} className={`v1-nav-item ${c === activeCat ? "active" : ""}`}
               onClick={() => setActiveCat(c)}
               style={c === activeCat ? { borderBottomColor: accent } : {}}>
              {c}
            </a>
          ))}
          <div className="v1-nav-spacer" />
          <div className="v1-edition-badge" style={{ borderColor: `${accent}55`, color: accent }}>
            <span className="v1-pulse" style={{ background: accent }} />
            AO VIVO · {formatDate(today.date)}
          </div>
        </nav>
      </header>

      <main className="v1-main">
        {/* Faixa do Alfred + Curiosidade do dia */}
        <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 20, alignItems: "stretch", margin: "0 0 28px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, background: "linear-gradient(135deg, #0a1628 0%, #0d0d12 100%)", border: `1px solid ${accent}33`, borderRadius: 6, padding: "14px 18px 14px 14px" }}>
            <img src="images/alfred-avatar.png" alt="Alfred Lima" style={{ width: 64, height: 80, objectFit: "cover", borderRadius: 4, display: "block" }} />
            <div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", color: accent, textTransform: "uppercase", fontWeight: 600, marginBottom: 4 }}>EDITOR</div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, color: "#fff", fontWeight: 600, lineHeight: 1.05 }}>Alfred Lima</div>
              <div style={{ fontSize: 11, color: "#8a8a96", marginTop: 2 }}>Curadoria diária · 7h</div>
            </div>
          </div>
          {today.curiosity && (
            <div style={{ background: "rgba(28,232,200,0.06)", border: `1px solid ${accent}44`, borderLeft: `3px solid ${accent}`, padding: "16px 20px", borderRadius: 4, fontSize: 14, lineHeight: 1.55, color: "#c8c8d0" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.15em", color: accent, textTransform: "uppercase", marginBottom: 6, fontWeight: 600 }}>🧠 Curiosidade do dia</div>
              {today.curiosity}
            </div>
          )}
        </div>
        {/* Bloco principal — manchete + grid + coluna lateral */}
        <div className="v1-hero-row">
          {/* Coluna esquerda — manchete dominante */}
          <article className="v1-headline">
            <div className="v1-pull-quote">"</div>
            <div className="v1-kicker" style={{ color: accent }}>{today.headline.kicker}{today.headline.source ? ` · ${today.headline.source}` : ""}</div>
            <h1 className="v1-h1">{today.headline.title}</h1>
            <p className="v1-dek">{today.headline.dek}</p>
            <PlaceholderImg kind={today.headline.img} url={today.headline.image} className="v1-hero-img" />
          </article>

          {/* Coluna central — manchetes secundárias */}
          <div className="v1-mid">
            {today.secondary.map((s, i) => (
              <article key={i} className="v1-mid-item">
                <PlaceholderImg kind={s.img || ["deepseek", "google", "generic"][i % 3]} url={s.image} className="v1-mid-img" />
                <div className="v1-kicker-sm" style={{ color: accent }}>{s.kicker}{s.source ? ` · ${s.source}` : ""}</div>
                <h3 className="v1-h3">{s.title}</h3>
                <p className="v1-dek-sm" style={{ borderLeftColor: accent }}>{s.dek}</p>
              </article>
            ))}
          </div>

          {/* Coluna direita — Radar rápido */}
          <div className="v1-right">
            <div className="v1-side-card">
              <div className="v1-side-head">⚡ Radar rápido</div>
              {(today.radar || []).slice(0, 6).map((s, i) => (
                <a key={i} className="v1-side-item">
                  <span className="v1-side-num" style={{ color: accent }}>0{i + 1}</span>
                  <div>
                    <div className="v1-side-kicker">{s.source}</div>
                    <div className="v1-side-title">{s.title}</div>
                  </div>
                </a>
              ))}
              <button className="v1-side-more">Ver mais →</button>
            </div>
          </div>
        </div>

        {/* Faixa "Newsletter de hoje" */}
        <section className="v1-today-strip">
          <div className="v1-today-tag" style={{ background: accent, color: "#000" }}>
            ▲ NEWSLETTER DE HOJE
          </div>
          <div className="v1-today-meta">
            <span>{today.label}</span>
            <span className="v1-dot">·</span>
            <span>{formatDateLong(today.date)}</span>
            <span className="v1-dot">·</span>
            <span>{today.secondary.length + (today.radar?.length || 0) + 1} matérias</span>
          </div>
          <button className="v1-today-cta" style={{ borderColor: accent, color: accent }}>
            Ler edição completa
          </button>
        </section>

        {/* Grid de Ferramentas + Arquivo + Instagram */}
        <div className="v1-bottom-row" style={{ gridTemplateColumns: showInsta ? "2fr 1fr 1fr" : "2fr 1fr" }}>
          <section className="v1-tools">
            <div className="v1-section-head">
              <h2>Ferramentas em destaque</h2>
              <div className="v1-section-sub">Reviews rápidos do que está bombando</div>
            </div>
            <div className="v1-tools-grid">
              {today.tools.map((t, i) => (
                <div key={i} className="v1-tool">
                  <div className="v1-tool-top">
                    <PlaceholderImg kind={["comfyui", "deepseek", "gemini"][i]} className="v1-tool-img" />
                    <div className="v1-tool-score" style={{ color: accent, borderColor: `${accent}55` }}>
                      ▲
                    </div>
                  </div>
                  <div className="v1-tool-tag">{t.tag}</div>
                  <div className="v1-tool-name">{t.name}</div>
                  <div className="v1-tool-note">{t.note}</div>
                </div>
              ))}
            </div>
          </section>

          <ArchiveTimeline items={window.NEWSLETTERS} accent={accent} />

          {showInsta && <InstaCard posts={window.INSTAGRAM_POSTS} accent={accent} />}
        </div>

        {/* CTA grande de inscrição */}
        <section className="v1-newsletter-cta">
          <div className="v1-cta-text">
            <div className="v1-kicker" style={{ color: accent }}>↓ Newsletter diária</div>
            <h2>A IA que importa, todo dia, no seu e-mail.</h2>
            <p>Curadoria do Alfred Lima. Sem ruído, sem hype. Modelos, ferramentas e mercado.</p>
          </div>
          <div className="v1-cta-form">
            <input placeholder="seu@email.com" />
            <button style={{ background: accent }} onClick={() => setModal(true)}>Assinar →</button>
          </div>
        </section>
      </main>

      <footer className="v1-footer">
        <div className="v1-footer-grid">
          <div>
            <Logo accent={accent} text="#fff" />
            <p className="v1-footer-bio">Portal diário de IA, escrito por Alfred Lima. Newsletter, arquivo e ferramentas.</p>
          </div>
          <div>
            <div className="v1-footer-head">Editorias</div>
            {window.CATEGORIES.slice(1, 7).map((c) => <a key={c}>{c}</a>)}
          </div>
          <div>
            <div className="v1-footer-head">Newsletter</div>
            <a>Edição de hoje</a>
            <a>Arquivo</a>
            <a>Sobre</a>
          </div>
          <div>
            <div className="v1-footer-head">Siga</div>
            <a>Instagram @Alfred.Lima.IA</a>
            <a>YouTube</a>
            <a>LinkedIn</a>
          </div>
        </div>
        <div className="v1-footer-bottom">© 2026 Alfred.Lima.IA · Feito com café e prompts</div>
      </footer>

      <SubscribeModal open={modal} onClose={() => setModal(false)} accent={accent} />
    </div>
  );
};

window.V1Editorial = V1Editorial;