/* Makers — Redes Sociais + Merch · Opção 2 */

function SocialMerchArtboardO2() {
  const Quote = ({ text, size = 'square' }) => (
    <div style={{
      width: size === 'square' ? 260 : 260,
      height: size === 'square' ? 260 : 260,
      background: 'var(--o2-petrol)',
      borderRadius: 14,
      padding: 28,
      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.07, pointerEvents: 'none' }} viewBox="0 0 260 260" preserveAspectRatio="xMidYMid slice">
        <path d="M-10 200 Q60 100 130 140 T280 80" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
        <circle cx="130" cy="140" r="4" fill="var(--o2-cyan)"/>
      </svg>
      <MakersMarkO2 size={28} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={6}/>
      <div>
        <div style={{ fontSize: 17, fontWeight: 700, color: '#fff', lineHeight: 1.3, letterSpacing: '-0.02em', marginBottom: 16 }}>"{text}"</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-cyan)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>makers.pt</div>
      </div>
    </div>
  );

  const InsightPost = ({ data, label, desc }) => (
    <div style={{
      width: 260, height: 260,
      background: 'var(--o2-cyan)',
      borderRadius: 14, padding: 24,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      flexShrink: 0,
    }}>
      <div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-petrol)', letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 16, opacity: 0.7 }}>Dado operacional</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 52, fontWeight: 700, color: 'var(--o2-petrol)', lineHeight: 1 }}>{data}</div>
        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--o2-petrol)', marginTop: 8 }}>{label}</div>
        <div style={{ fontSize: 12, color: 'rgba(15,47,58,0.6)', marginTop: 4, lineHeight: 1.5 }}>{desc}</div>
      </div>
      <MakersLogoO2 size={22} color="var(--o2-petrol)" markBg="var(--o2-petrol)" markColor="var(--o2-cyan)" accent="var(--o2-petrol)"/>
    </div>
  );

  const CarouselCover = () => (
    <div style={{
      width: 260, height: 260,
      background: 'linear-gradient(135deg, var(--o2-petrol) 0%, #1a4a5a 100%)',
      borderRadius: 14, padding: 24,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      flexShrink: 0, position: 'relative', overflow: 'hidden',
    }}>
      <svg style={{ position: 'absolute', right: -20, bottom: -20, opacity: 0.1, pointerEvents: 'none' }} viewBox="0 0 200 200" width={200} height={200}>
        {[60, 45, 30, 15].map(r => <circle key={r} cx="100" cy="100" r={r} stroke="var(--o2-cyan)" strokeWidth="1" fill="none"/>)}
      </svg>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'var(--o2-cyan)', letterSpacing: '0.1em', textTransform: 'uppercase' }}>Carrossel · 1/5</div>
      <div>
        <div style={{ fontSize: 18, fontWeight: 800, color: '#fff', letterSpacing: '-0.03em', lineHeight: 1.2, marginBottom: 12 }}>
          Do lead ao follow-up: o sistema que faltava
        </div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>Entre Explorador, WhatsApp e AOS →</div>
      </div>
    </div>
  );

  const CarouselSlide = ({ num, title, desc, color }) => (
    <div style={{
      width: 260, height: 260,
      background: 'var(--o2-white)',
      borderRadius: 14, padding: 24,
      border: `2px solid ${color}`,
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      flexShrink: 0,
    }}>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 10, color, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Slide {num}/5</div>
      <div>
        <div style={{ width: 36, height: 36, background: color, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 12 }}>
          <span style={{ color: '#fff', fontSize: 14, fontWeight: 700 }}>{num}</span>
        </div>
        <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--o2-ink)', marginBottom: 8, letterSpacing: '-0.01em' }}>{title}</div>
        <div style={{ fontSize: 12, color: 'var(--o2-muted)', lineHeight: 1.55 }}>{desc}</div>
      </div>
    </div>
  );

  const LinkedInCover = () => (
    <div style={{
      width: 520, height: 132,
      background: 'var(--o2-petrol)',
      borderRadius: 10, padding: '0 32px',
      display: 'flex', alignItems: 'center', 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 520 132" preserveAspectRatio="xMidYMid slice">
        <path d="M0 100 Q130 40 260 70 T520 30" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
        <circle cx="260" cy="70" r="3" fill="var(--o2-cyan)"/>
        <circle cx="390" cy="50" r="2" fill="var(--o2-cyan)"/>
      </svg>
      <MakersLogoO2 size={40} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
      <div style={{ textAlign: 'right' }}>
        <div style={{ fontSize: 16, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em' }}>Venda, atenda e opere melhor.</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: 'var(--o2-cyan)', marginTop: 4, letterSpacing: '0.08em' }}>AUTOMAÇÃO · VENDAS · OPERAÇÃO</div>
      </div>
    </div>
  );

  const Story = () => (
    <div style={{
      width: 130, height: 260,
      background: 'var(--o2-petrol)',
      borderRadius: 14, padding: '20px 14px',
      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.09, pointerEvents: 'none' }} viewBox="0 0 130 260" preserveAspectRatio="xMidYMid slice">
        {[50, 35, 20].map(r => <circle key={r} cx="65" cy="140" r={r} stroke="var(--o2-cyan)" strokeWidth="0.8" fill="none"/>)}
      </svg>
      <MakersMarkO2 size={28} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={6}/>
      <div>
        <div style={{ fontSize: 13, fontWeight: 800, color: '#fff', letterSpacing: '-0.02em', lineHeight: 1.25, marginBottom: 12 }}>
          Conversas que viram operação.
        </div>
        <div style={{ background: 'var(--o2-cyan)', color: 'var(--o2-petrol)', borderRadius: 6, padding: '7px 0', fontSize: 11, fontWeight: 700, textAlign: 'center' }}>Saber mais →</div>
      </div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>11 · Redes sociais · LinkedIn + Instagram</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 32px', color: 'var(--o2-ink)' }}>
        Conteúdo social · formatos e linguagem visual
      </h2>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
        {/* Row 1: Quotes */}
        <div>
          <O2Label children="Posts de quote · 1:1"/>
          <div style={{ display: 'flex', gap: 14, marginTop: 12, flexWrap: 'wrap' }}>
            <Quote text="Nem toda automação precisa parecer robô."/>
            <Quote text="Conversas comerciais não deviam morrer no WhatsApp."/>
            <InsightPost data="< 2'" label="para responder" desc="com Bot WhatsApp activo"/>
          </div>
        </div>

        {/* Row 2: Carousel */}
        <div>
          <O2Label children="Carrossel · capa + slide interno"/>
          <div style={{ display: 'flex', gap: 14, marginTop: 12, flexWrap: 'wrap' }}>
            <CarouselCover/>
            <CarouselSlide num={2} title="Explorador encontra" desc="Empresas com perfil de compra, classificadas por score de oportunidade." color="#22C55E"/>
            <CarouselSlide num={3} title="WhatsApp conversa" desc="Primeiro contacto automático, qualificação e encaminhamento." color="#16A34A"/>
            <CarouselSlide num={4} title="AOS organiza" desc="Tickets, follow-ups e pipeline geridos com contexto completo." color="#F59E0B"/>
          </div>
        </div>

        {/* Row 3: LinkedIn cover + story */}
        <div>
          <O2Label children="LinkedIn cover · 1584×396 (aqui a 520px) + Story vertical"/>
          <div style={{ display: 'flex', gap: 14, marginTop: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <LinkedInCover/>
            <Story/>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ── MERCH ── */
function MerchArtboardO2() {
  const MerchItem = ({ label, children, bg = 'var(--o2-white)' }) => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' }}>
      <O2Label children={label}/>
      <div style={{ background: bg, borderRadius: 12, padding: 20, border: '1px solid var(--o2-line)', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 120, width: '100%' }}>
        {children}
      </div>
    </div>
  );

  const TShirt = () => (
    <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
      <svg viewBox="0 0 120 100" width={120} height={100}>
        <path d="M30 15 L10 30 L20 40 L30 32 L30 85 L90 85 L90 32 L100 40 L110 30 L90 15 L75 5 C72 12 68 16 60 16 C52 16 48 12 45 5 Z" fill="var(--o2-petrol)" stroke="none"/>
      </svg>
      <div style={{ position: 'absolute', top: 36, left: '50%', transform: 'translateX(-50%)' }}>
        <MakersMarkO2 size={28} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={5}/>
      </div>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-muted)', marginTop: 4, letterSpacing: '0.08em' }}>Conversas viram operação.</div>
    </div>
  );

  const Tote = () => (
    <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
      <svg viewBox="0 0 80 100" width={80} height={100}>
        <path d="M10 30 L5 90 L75 90 L70 30 Z" fill="var(--o2-paper-2)" stroke="var(--o2-line)" strokeWidth="1.5"/>
        <path d="M25 30 C25 15 35 8 40 8 C45 8 55 15 55 30" fill="none" stroke="var(--o2-petrol)" strokeWidth="2" strokeLinecap="round"/>
      </svg>
      <div style={{ position: 'absolute', top: 46, left: '50%', transform: 'translateX(-50%)' }}>
        <MakersMarkO2 size={22} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={4}/>
      </div>
    </div>
  );

  const Mug = () => (
    <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
      <svg viewBox="0 0 90 80" width={90} height={80}>
        <rect x="10" y="15" width="55" height="55" rx="6" fill="var(--o2-cyan)"/>
        <path d="M65 28 Q82 28 82 45 Q82 62 65 62" fill="none" stroke="var(--o2-cyan)" strokeWidth="6" strokeLinecap="round"/>
        <rect x="10" y="60" width="55" height="6" rx="0" fill="var(--o2-cyan-2)"/>
      </svg>
      <div style={{ position: 'absolute', top: 20, left: 18 }}>
        <MakersMarkO2 size={30} bg="var(--o2-petrol)" accent="var(--o2-cyan)" radius={6}/>
      </div>
    </div>
  );

  const Notebook = () => (
    <div style={{ position: 'relative', display: 'inline-flex', flexDirection: 'column', alignItems: 'center' }}>
      <svg viewBox="0 0 70 90" width={70} height={90}>
        <rect x="10" y="5" width="52" height="80" rx="4" fill="var(--o2-petrol)"/>
        <rect x="8" y="5" width="6" height="80" rx="3" fill="var(--o2-petrol-2)"/>
        <line x1="20" y1="30" x2="52" y2="30" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        <line x1="20" y1="38" x2="52" y2="38" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
        <line x1="20" y1="46" x2="52" y2="46" stroke="rgba(255,255,255,0.1)" strokeWidth="1"/>
      </svg>
      <div style={{ position: 'absolute', top: 14, left: 20 }}>
        <MakersMarkO2 size={24} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={5}/>
      </div>
      <div style={{ position: 'absolute', bottom: 14, left: 0, right: 0, textAlign: 'center', fontFamily: 'var(--o2-mono)', fontSize: 7, color: 'rgba(255,255,255,0.35)', letterSpacing: '0.08em' }}>BUILT WITH METHOD</div>
    </div>
  );

  const Sticker = ({ phrase, color, bg }) => (
    <div style={{ background: bg || 'var(--o2-petrol)', border: `2px solid ${color || 'var(--o2-cyan)'}`, borderRadius: 10, padding: '8px 14px', display: 'inline-flex', flexDirection: 'column', gap: 4, alignItems: 'flex-start' }}>
      <MakersMarkO2 size={18} bg={color || 'var(--o2-cyan)'} accent="rgba(255,255,255,0.3)" radius={4}/>
      <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: color || 'var(--o2-cyan)', letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 600 }}>{phrase}</div>
    </div>
  );

  const Cap = () => (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <svg viewBox="0 0 100 60" width={100} height={60}>
        <path d="M5 38 Q50 10 95 38 L95 45 Q50 55 5 45 Z" fill="var(--o2-petrol)"/>
        <path d="M5 38 Q50 10 95 38" fill="none" stroke="var(--o2-petrol-2)" strokeWidth="1.5"/>
        <rect x="40" y="38" width="20" height="3" rx="1.5" fill="var(--o2-petrol-2)"/>
        <path d="M3 40 L0 46 Q5 48 8 46 L8 40" fill="var(--o2-petrol-2)"/>
      </svg>
      <div style={{ marginTop: -8 }}>
        <MakersMarkO2 size={18} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={3}/>
      </div>
    </div>
  );

  const LaptopSticker = () => (
    <div style={{ background: 'var(--o2-petrol)', border: '1px solid var(--o2-petrol-2)', borderRadius: 8, padding: '8px 12px', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
      <MakersMarkO2 size={22} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={4}/>
      <div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: '#fff', fontWeight: 600, letterSpacing: '0.06em' }}>MAKERS</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 8, color: 'var(--o2-cyan)', letterSpacing: '0.06em' }}>Mapa. Mensagem. Ação.</div>
      </div>
    </div>
  );

  const NFCCard = () => (
    <div style={{ width: 160, height: 96, background: 'var(--o2-petrol)', borderRadius: 10, padding: '12px 14px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative', overflow: 'hidden' }}>
      <svg style={{ position: 'absolute', right: 8, top: 8, opacity: 0.12 }} viewBox="0 0 60 60" width={60}>
        {[20, 14, 8].map(r => <circle key={r} cx="40" cy="30" r={r} stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>)}
      </svg>
      <MakersMarkO2 size={24} bg="var(--o2-cyan)" accent="var(--o2-petrol)" radius={5}/>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, color: '#fff' }}>Filipe Almeida</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>makers.pt</div>
      </div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>12 · Merch · objetos de marca</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 32px', color: 'var(--o2-ink)' }}>
        Merch premium · B2B e eventos
      </h2>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
        <MerchItem label="T-shirt · petróleo + ciano" bg="#1a1a1a"><TShirt/></MerchItem>
        <MerchItem label="Tote bag · paper + petróleo"><Tote/></MerchItem>
        <MerchItem label="Caneca · ciano" bg="var(--o2-paper)"><Mug/></MerchItem>
        <MerchItem label="Caderno A5 · petróleo" bg="var(--o2-paper-2)"><Notebook/></MerchItem>

        <div style={{ gridColumn: 'span 2' }}>
          <O2Label children="Stickers · versões"/>
          <div style={{ background: 'var(--o2-paper-2)', borderRadius: 12, padding: 20, marginTop: 8, display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'flex-start', border: '1px solid var(--o2-line)', minHeight: 120 }}>
            <Sticker phrase="makers.pt" color="var(--o2-cyan)"/>
            <Sticker phrase="Vender. Atender. Operar." color="#22C55E" bg="#0d2218"/>
            <Sticker phrase="Built with method." color="#F59E0B" bg="#1a1000"/>
            <LaptopSticker/>
          </div>
        </div>

        <MerchItem label="Boné · petróleo" bg="#f0f0f0"><Cap/></MerchItem>
        <MerchItem label="Cartão NFC · badge evento" bg="var(--o2-paper)"><NFCCard/></MerchItem>
      </div>
    </div>
  );
}

Object.assign(window, { SocialMerchArtboardO2, MerchArtboardO2 });
