// Componentes compartilhados entre as 3 variações.
// Placeholders gráficos (sem AI slop): blocos com glyphs, padrões, monogramas.

const PlaceholderImg = ({ kind = "claude5", url = null, className = "", style = {} }) => {
  // Se houver URL real, renderiza a imagem; senão, gera o placeholder gráfico.
  if (url) {
    return (
      <div className={`ph-img ${className}`} style={{
        backgroundImage: `url(${url})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center',
        ...style
      }}>
        <div className="ph-corner" style={{ background: 'rgba(0,0,0,0.5)', padding: '2px 6px', borderRadius: 2 }}>▲ {kind.toUpperCase()}</div>
      </div>
    );
  }
  const palettes = {
    claude5:    { a: "#ff9a3c", b: "#3d1d10", glyph: "C5" },
    n8n:        { a: "#ff5c8a", b: "#1a0a14", glyph: "n8" },
    microsoft:  { a: "#5fb1ff", b: "#0a1828", glyph: "MS" },
    mit:        { a: "#a3a3ff", b: "#0e0a28", glyph: "θ" },
    alexa:      { a: "#1ce8c8", b: "#001a18", glyph: "A+" },
    generic:    { a: "#7c5cff", b: "#0a0a14", glyph: "AI" },
    cursor:     { a: "#e8e8e8", b: "#0a0a0a", glyph: ">_" },
    granola:    { a: "#a8d96a", b: "#101a08", glyph: "G" },
    v0:         { a: "#ffffff", b: "#000000", glyph: "v0" },
  };
  const p = palettes[kind] || palettes.generic;
  return (
    <div className={`ph-img ${className}`} style={{
      background: `radial-gradient(120% 120% at 80% 20%, ${p.a}33, transparent 55%), linear-gradient(135deg, ${p.b}, #000)`,
      color: p.a,
      ...style
    }}>
      <div className="ph-grid" />
      <div className="ph-glyph" style={{ color: p.a }}>{p.glyph}</div>
      <div className="ph-corner">▲ {kind.toUpperCase()}</div>
    </div>
  );
};

const formatDate = (iso) => {
  const d = new Date(iso + "T12:00:00");
  const dias = ["dom", "seg", "ter", "qua", "qui", "sex", "sáb"];
  const meses = ["jan", "fev", "mar", "abr", "mai", "jun", "jul", "ago", "set", "out", "nov", "dez"];
  return `${dias[d.getDay()]}, ${d.getDate()} ${meses[d.getMonth()]}`;
};

const formatDateLong = (iso) => {
  const d = new Date(iso + "T12:00:00");
  const meses = ["janeiro", "fevereiro", "março", "abril", "maio", "junho", "julho", "agosto", "setembro", "outubro", "novembro", "dezembro"];
  return `${d.getDate()} de ${meses[d.getMonth()]} de ${d.getFullYear()}`;
};

// SVG Logo monogram — usado nos 3 estilos com cores ajustadas
const Logo = ({ accent = "#1ce8c8", text = "#fff" }) => (
  <div className="logo-wrap">
    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
      <rect x="1" y="1" width="30" height="30" rx="6" stroke={accent} strokeWidth="1.5"/>
      <path d="M9 22 L13 10 L19 22 M11 18 H17" stroke={text} strokeWidth="2" fill="none" strokeLinecap="square"/>
      <circle cx="24" cy="9" r="2" fill={accent}/>
    </svg>
    <div className="logo-text">
      <span style={{ color: text }}>Alfred.Lima</span><span style={{ color: accent }}>.IA</span>
    </div>
  </div>
);

// Faixa de Instagram que vai no topo (sticky banner)
const InstaTopBanner = ({ accent }) => (
  <div className="insta-top" style={{ borderColor: `${accent}33` }}>
    <span className="insta-pulse" style={{ background: accent }} />
    Siga <strong>@Alfred.Lima.IA</strong> no Instagram — bastidores e drops diários
    <span className="insta-arrow">→</span>
  </div>
);

// Card lateral de Instagram
const InstaCard = ({ posts, accent }) => (
  <aside className="insta-card">
    <div className="insta-card-head">
      <div>
        <div className="insta-handle">@Alfred.Lima.IA</div>
        <div className="insta-sub">Últimos posts</div>
      </div>
      <a className="insta-follow" style={{ borderColor: accent, color: accent }}>Seguir</a>
    </div>
    <div className="insta-grid">
      {posts.map((p, i) => (
        <div key={i} className="insta-post" style={{ background: `linear-gradient(${135 + i * 20}deg, ${accent}22, #00000088)` }}>
          <div className="insta-type">{p.type}</div>
          <div className="insta-cap">{p.caption}</div>
          <div className="insta-likes">♥ {p.likes}</div>
        </div>
      ))}
    </div>
  </aside>
);

// Bloco "Edições anteriores" — timeline
const ArchiveTimeline = ({ items, accent }) => (
  <aside className="archive">
    <div className="archive-head">
      <div className="archive-title">Edições anteriores</div>
      <a className="archive-all" style={{ color: accent }}>Ver arquivo →</a>
    </div>
    <ul className="archive-list">
      {items.slice(1, 5).map((n, i) => (
        <li key={i} className="archive-item">
          <div className="archive-date" style={{ color: accent }}>{formatDate(n.date)}</div>
          <div className="archive-label">{n.label}</div>
          <div className="archive-headline">{n.headline.title}</div>
        </li>
      ))}
    </ul>
  </aside>
);

// CTA Assinar (header)
const SubscribeBtn = ({ accent, label = "Assinar newsletter", onClick }) => (
  <button className="subscribe-btn" style={{ background: accent, color: "#000" }} onClick={onClick}>
    {label} <span>→</span>
  </button>
);

// Modal de inscrição
const SubscribeModal = ({ open, onClose, accent }) => {
  const [email, setEmail] = React.useState("");
  const [name, setName] = React.useState("");
  const [sent, setSent] = React.useState(false);
  if (!open) return null;
  return (
    <div className="modal-bg" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()} style={{ borderColor: `${accent}55` }}>
        <button className="modal-close" onClick={onClose}>✕</button>
        {!sent ? (
          <>
            <div className="modal-kicker" style={{ color: accent }}>Newsletter diária</div>
            <h2 className="modal-title">A IA da semana, todo dia, no seu e-mail.</h2>
            <p className="modal-dek">Curadoria do Alfred Lima. Sem spam, sem firula. Cancela quando quiser.</p>
            <input className="modal-input" placeholder="Seu nome" value={name} onChange={(e) => setName(e.target.value)} />
            <input className="modal-input" placeholder="seu@email.com" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
            <button className="modal-cta" style={{ background: accent }} onClick={() => setSent(true)}>
              Quero receber →
            </button>
            <div className="modal-fine">Ao assinar, você concorda em receber e-mails do Alfred.Lima.IA.</div>
          </>
        ) : (
          <>
            <div className="modal-kicker" style={{ color: accent }}>Tudo certo ✓</div>
            <h2 className="modal-title">Bem-vindo a bordo, {name || "leitor"}.</h2>
            <p className="modal-dek">Confirme no seu e-mail e a próxima edição cai aí amanhã.</p>
            <button className="modal-cta" style={{ background: accent }} onClick={onClose}>Fechar</button>
          </>
        )}
      </div>
    </div>
  );
};

Object.assign(window, {
  PlaceholderImg, formatDate, formatDateLong, Logo,
  InstaTopBanner, InstaCard, ArchiveTimeline, SubscribeBtn, SubscribeModal,
});