/* Makers — Collateral + OG Images + Favicon · Opção 2 */

/* ── Favicon & App Icons ── */
function FaviconAppIconArtboardO2() {
  const OGCard = ({ title, product, productColor, sub }) => (
    <div style={{
      width: 340, height: 178,
      background: 'var(--o2-petrol)',
      borderRadius: 12, padding: '20px 24px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      position: 'relative', overflow: 'hidden', flexShrink: 0,
    }}>
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.08, pointerEvents: 'none' }} viewBox="0 0 340 178" preserveAspectRatio="xMidYMid slice">
        <path d="M0 130 Q85 50 170 90 T340 50" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
        <circle cx="170" cy="90" r="4" fill="var(--o2-cyan)"/>
      </svg>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' }}>
        {product
          ? <MakersLogoO2 size={28} color="#fff" markBg={productColor} markColor="#fff" accent={productColor} product={product}/>
          : <MakersLogoO2 size={28} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
        }
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.1em', textTransform: 'uppercase', textAlign: 'right' }}>makers.pt</div>
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.15, marginBottom: 6 }}>{title}</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: productColor || 'var(--o2-cyan)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{sub}</div>
      </div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>13 · Favicon · App icon · OG Images</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 36px', color: 'var(--o2-ink)' }}>
        Ícones e imagens de partilha
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        {/* Icons */}
        <div style={{ background: 'var(--o2-white)', borderRadius: 14, padding: 28, border: '1px solid var(--o2-line)' }}>
          <O2Label children="Favicons e app icons"/>
          <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div>
              <O2Label color="var(--o2-muted)" children="Favicon · 16 / 32px"/>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 10 }}>
                <div style={{ background: 'var(--o2-paper)', padding: 8, borderRadius: 6, border: '1px solid var(--o2-line)' }}>
                  <MakersMarkO2 size={16} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={2}/>
                </div>
                <div style={{ background: 'var(--o2-paper)', padding: 8, borderRadius: 6, border: '1px solid var(--o2-line)' }}>
                  <MakersMarkO2 size={32} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={4}/>
                </div>
                <div style={{ background: 'var(--o2-petrol)', padding: 8, borderRadius: 6 }}>
                  <MakersMarkO2 size={32} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={4}/>
                </div>
              </div>
            </div>
            <div>
              <O2Label color="var(--o2-muted)" children="App icon iOS · 60 / 76 / 83.5px equiv."/>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 10 }}>
                <MakersMarkO2 size={60} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={13}/>
                <MakersMarkO2 size={76} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={17}/>
                <MakersMarkO2 size={60} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={13}/>
              </div>
            </div>
            <div>
              <O2Label color="var(--o2-muted)" children="Android adaptive icon + Avatar social"/>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 10 }}>
                <MakersMarkO2 size={56} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={28}/>
                <MakersMarkO2 size={56} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={9999}/>
                <MakersMarkO2 size={56} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={9999}/>
              </div>
            </div>
          </div>
        </div>

        {/* OG Images */}
        <div>
          <O2Label children="OG Images · 1200×630 (aqui 340×178)"/>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <OGCard title="Automação inteligente para empresas em movimento." sub="makers.pt · Portugal"/>
            <OGCard title="Encontre empresas com perfil para comprar." product="explorador" productColor="#22C55E" sub="Explorador Comercial · makers.pt"/>
          </div>
        </div>
      </div>

      {/* More OG cards */}
      <div style={{ marginTop: 20 }}>
        <O2Label children="OG por produto"/>
        <div style={{ display: 'flex', gap: 14, marginTop: 12, flexWrap: 'wrap' }}>
          <OGCard title="Responda, qualifique e encaminhe conversas." product="whatsapp" productColor="#16A34A" sub="Bot WhatsApp · makers.pt"/>
          <OGCard title="Organize tarefas, tickets e follow-ups com IA." product="aos" productColor="#F59E0B" sub="AOS · makers.pt"/>
        </div>
      </div>
    </div>
  );
}

/* ── Collateral Comercial ── */
function CollateralArtboardO2() {
  const Slide = ({ bg = 'var(--o2-white)', border = '1px solid var(--o2-line)', children, label, width = 320, height = 180 }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
      <O2Label children={label}/>
      <div style={{ width, height, background: bg, borderRadius: 12, border, overflow: 'hidden', padding: 24, boxSizing: 'border-box', position: 'relative', flexShrink: 0 }}>{children}</div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>14 · Collateral comercial · apresentação e proposta</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 36px', color: 'var(--o2-ink)' }}>
        Deck e materiais de apresentação
      </h2>

      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginBottom: 24 }}>
        {/* Slide 1: Cover */}
        <Slide label="Capa de apresentação" bg="var(--o2-petrol)">
          <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.07 }} viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice">
            <path d="M0 140 Q80 60 160 100 T320 50" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
          </svg>
          <div style={{ position: 'relative', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <MakersLogoO2 size={28} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
            <div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>Proposta comercial · 2026</div>
              <div style={{ fontSize: 20, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.1 }}>
                Automação inteligente<br/>para a sua empresa
              </div>
            </div>
          </div>
        </Slide>

        {/* Slide 2: Diagnóstico */}
        <Slide label="Slide de diagnóstico">
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Diagnóstico</div>
            <div>
              <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--o2-ink)', marginBottom: 12, letterSpacing: '-0.02em' }}>Onde estão as perdas?</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
                {[
                  { label: 'Tempo de resposta', val: '4h+', color: '#ef4444' },
                  { label: 'Follow-ups perdidos', val: '40%', color: '#F59E0B' },
                  { label: 'Leads qualificados', val: '28%', color: 'var(--o2-muted)' },
                ].map((r, i) => (
                  <div key={i} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11 }}>
                    <span style={{ color: 'var(--o2-muted)' }}>{r.label}</span>
                    <span style={{ fontFamily: 'var(--o2-mono)', fontWeight: 700, color: r.color }}>{r.val}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Slide>

        {/* Slide 3: Fluxo */}
        <Slide label="Slide de fluxo">
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Solução</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--o2-ink)', marginBottom: 12, letterSpacing: '-0.02em' }}>Fluxo automatizado</div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                {[
                  { l: 'Lead', c: '#22C55E' },
                  { l: '→', c: 'var(--o2-muted)' },
                  { l: 'Chat', c: '#16A34A' },
                  { l: '→', c: 'var(--o2-muted)' },
                  { l: 'Proposta', c: 'var(--o2-cyan)' },
                  { l: '→', c: 'var(--o2-muted)' },
                  { l: 'AOS', c: '#F59E0B' },
                ].map((s, i) => (
                  <span key={i} style={{ fontSize: s.l === '→' ? 10 : 11, fontWeight: s.l === '→' ? 400 : 700, color: s.c, whiteSpace: 'nowrap' }}>{s.l}</span>
                ))}
              </div>
            </div>
          </div>
        </Slide>
      </div>

      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        {/* Slide 4: Produtos */}
        <Slide label="Slide de produtos" bg="var(--o2-paper)">
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Produtos</div>
            <div style={{ display: 'flex', gap: 8 }}>
              {[
                { slug: 'explorador', color: '#22C55E' },
                { slug: 'whatsapp', color: '#16A34A' },
                { slug: 'aos', color: '#F59E0B' },
              ].map((p, i) => (
                <div key={i} style={{ flex: 1, background: 'var(--o2-white)', borderRadius: 8, padding: '10px 8px', border: `1px solid ${p.color}33`, display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <MakersMarkO2 size={20} bg={p.color} accent="rgba(255,255,255,0.2)" radius={4}/>
                  <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 8, color: p.color, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 700 }}>{p.slug}</div>
                </div>
              ))}
            </div>
          </div>
        </Slide>

        {/* Slide 5: Proposta */}
        <Slide label="Slide de proposta">
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan-2)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Investimento</div>
            <div>
              <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 8 }}>Plano recomendado</div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 28, fontWeight: 700, color: 'var(--o2-petrol)', lineHeight: 1 }}>€[X]</div>
              <div style={{ fontSize: 11, color: 'var(--o2-muted)', marginTop: 4 }}>por mês · tudo incluído</div>
            </div>
          </div>
        </Slide>

        {/* Slide 6: Next steps */}
        <Slide label="Próximos passos" bg="var(--o2-petrol)">
          <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>Próximos passos</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {['Confirmar proposta', 'Onboarding · 1 semana', 'Go live · semana 3'].map((s, i) => (
                <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--o2-cyan)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <span style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-petrol)', fontWeight: 700 }}>{i + 1}</span>
                  </div>
                  <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.8)' }}>{s}</span>
                </div>
              ))}
            </div>
          </div>
        </Slide>
      </div>
    </div>
  );
}

Object.assign(window, { FaviconAppIconArtboardO2, CollateralArtboardO2 });