// ============================================================
// Evidia · Mockups v2 · Seção 02 — opções p/ a área reservada (vídeo)
// Enquanto não há vídeo: 2 sugestões de conteúdo provisório.
//   Opção 1 · Foto institucional (slot — arraste a foto)
//   Opção 2 · Mosaico da comunidade (grade de fotos)
// ============================================================

const ManifestoShell = ({ children }) =>
<div className="ab-manifesto" style={{ width: 1440, height: 760, background: "#fff", position: "relative", overflow: "hidden", padding: "92px 96px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
    <div style={{ position: "absolute", left: -140, top: -120, width: 520, height: 520, borderRadius: "50%", background: "radial-gradient(circle, #6b3f9c 0%, #444ca2 26%, transparent 70%)", filter: "blur(90px)", opacity: 0.18, pointerEvents: "none" }}></div>

    <div className="ev-eyebrow" style={{ marginBottom: 40, position: "relative" }}>
      <span className="num">Quem é a Evidia</span>
      <span className="rule" style={{ flex: 1, maxWidth: 120 }}></span>
    </div>

    <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 80, alignItems: "stretch", position: "relative" }}>
      <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
        <p style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 1.24, fontWeight: 500, color: "var(--blue-900)", letterSpacing: "-0.018em", textWrap: "balance" }}>
          A Evidia reúne os <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>melhores médicos</strong> sob um único credenciamento, dá a eles <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>voz de comunidade</strong> e cuida de toda a parte chata: faturamento, glosa e tecnologia, para o médico <strong style={{ fontWeight: 700, color: "var(--blue-700)" }}>focar na medicina</strong>.
        </p>
        <div className="ev-arc-rule" style={{ width: 96, marginTop: 40 }}></div>
      </div>

      <div style={{ alignSelf: "stretch", display: "flex", minHeight: 340 }}>
        {children}
      </div>
    </div>
  </div>;


// Opção 1 · Foto institucional (o usuário arrasta a foto)
const ManifestoPhoto = () =>
<ManifestoShell>
    <div style={{ position: "relative", flex: 1, borderRadius: 20, overflow: "hidden", background: "var(--ink-100)" }}>
      <image-slot
      id="manifesto-foto"
      shape="rect"
      placeholder="Arraste uma foto institucional"
      style={{ width: "100%", height: "100%", display: "block" }}>
    </image-slot>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 58%, rgba(10,37,64,0.46) 100%)", pointerEvents: "none" }}></div>
      <div style={{ position: "absolute", left: 0, top: 0, bottom: 0, width: 4, background: "var(--grad-arc)", pointerEvents: "none" }}></div>
      <div style={{ position: "absolute", left: 24, bottom: 22, color: "#fff", fontFamily: "var(--font-eyebrow)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600, display: "flex", alignItems: "center", gap: 10, pointerEvents: "none" }}>
        <span style={{ width: 18, height: 1, background: "var(--cyan-400)" }}></span>
        A comunidade Evidia
      </div>
    </div>
  </ManifestoShell>;


const ManifestoMosaic = () =>
<ManifestoShell>
    <div style={{ flex: 1, display: "grid", gridTemplateColumns: "1.25fr 1fr", gridTemplateRows: "1fr 1fr", gap: 12 }}>
      <div style={{ position: "relative", borderRadius: 16, overflow: "hidden", background: "var(--ink-100)", gridRow: "span 2" }}>
        <image-slot id="mos-1" src="assets/photo_dr_mosaic.jpg" shape="rect" fit="cover" placeholder="Arraste uma foto" style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
      <div style={{ position: "relative", borderRadius: 14, overflow: "hidden", background: "var(--ink-100)" }}>
        <image-slot id="mos-2" shape="rect" fit="cover" placeholder="Arraste uma foto" style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
      <div style={{ position: "relative", borderRadius: 14, overflow: "hidden", background: "var(--ink-100)" }}>
        <image-slot id="mos-3" src="assets/photo_equipe.jpg" shape="rect" fit="cover" placeholder="Arraste uma foto" style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
    </div>
  </ManifestoShell>;


Object.assign(window, { ManifestoPhoto, ManifestoMosaic });