/* Makers — Papelaria · Opção 2 */

/* ── Cartão de visita ── */
function BusinessCardO2() {
  const CardFront = ({ product, productColor, productSlug, productMarkColor }) => (
    <div style={{
      width: 320, height: 180, background: 'var(--o2-petrol)', borderRadius: 14,
      padding: '24px 24px 20px', 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 320 180" preserveAspectRatio="xMidYMid slice">
        <path d="M200 -20 Q240 60 280 80 T340 120" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
        <circle cx="280" cy="80" r="4" fill="var(--o2-cyan)"/>
        <circle cx="240" cy="45" r="2.5" fill="var(--o2-cyan)"/>
      </svg>
      <div style={{ position: 'relative' }}>
        {product
          ? <MakersLogoO2 size={32} color="#fff" markBg={productColor} markColor={productMarkColor || '#fff'} accent={productColor} product={productSlug}/>
          : <MakersLogoO2 size={32} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
        }
      </div>
      <div style={{ position: 'relative' }}>
        <div style={{ fontSize: 16, fontWeight: 700, color: '#fff', marginBottom: 2 }}>Filipe Almeida</div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 11, color: productColor || 'var(--o2-cyan)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
          Founder · CEO
        </div>
      </div>
    </div>
  );

  const CardBack = ({ product, productColor }) => (
    <div style={{
      width: 320, height: 180, background: product ? productColor : 'var(--o2-cyan)',
      borderRadius: 14, padding: '24px 24px 20px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between', flexShrink: 0,
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontSize: 12, color: product ? '#fff' : 'var(--o2-petrol)', opacity: 0.7, marginBottom: 4 }}>filipe@makers.pt</div>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 12, color: product ? '#fff' : 'var(--o2-petrol)', opacity: 0.7 }}>+351 967 822 668</div>
        </div>
        <MakersMarkO2 size={40} bg={product ? 'rgba(0,0,0,0.15)' : 'var(--o2-petrol)'} accent={product ? 'rgba(255,255,255,0.4)' : 'var(--o2-cyan)'} radius={8}/>
      </div>
      <div>
        <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 12, color: product ? '#fff' : 'var(--o2-petrol)', fontWeight: 600 }}>makers.pt</div>
        <div style={{ fontSize: 11, color: product ? 'rgba(255,255,255,0.6)' : 'rgba(15,47,58,0.55)', marginTop: 2 }}>Oeiras, Portugal</div>
      </div>
    </div>
  );

  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>09 · Papelaria · Cartão de visita</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 40px', color: 'var(--o2-ink)' }}>
        Cartões de visita · frente + verso + variantes
      </h2>

      {/* Row 1: Makers + verso */}
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', marginBottom: 28 }}>
        <div>
          <O2Label children="Makers · frente"/>
          <div style={{ marginTop: 10 }}><CardFront/></div>
        </div>
        <div>
          <O2Label children="Makers · verso"/>
          <div style={{ marginTop: 10 }}><CardBack/></div>
        </div>
        <div>
          <O2Label children="Explorador · frente"/>
          <div style={{ marginTop: 10 }}><CardFront product="explorador" productColor="#22C55E" productSlug="explorador" productMarkColor="#fff"/></div>
        </div>
        <div>
          <O2Label children="Explorador · verso"/>
          <div style={{ marginTop: 10 }}><CardBack product="explorador" productColor="#22C55E"/></div>
        </div>
      </div>

      {/* Row 2: AOS + WhatsApp */}
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>
        <div>
          <O2Label children="AOS · frente"/>
          <div style={{ marginTop: 10 }}><CardFront product="aos" productColor="#F59E0B" productSlug="aos" productMarkColor="#fff"/></div>
        </div>
        <div>
          <O2Label children="AOS · verso"/>
          <div style={{ marginTop: 10 }}><CardBack product="aos" productColor="#F59E0B"/></div>
        </div>
        <div>
          <O2Label children="WhatsApp · frente"/>
          <div style={{ marginTop: 10 }}><CardFront product="whatsapp" productColor="#16A34A" productSlug="whatsapp" productMarkColor="#fff"/></div>
        </div>
        <div>
          <O2Label children="WhatsApp · verso"/>
          <div style={{ marginTop: 10 }}><CardBack product="whatsapp" productColor="#16A34A"/></div>
        </div>
      </div>
    </div>
  );
}

/* ── Papel timbrado / Letterhead ── */
function LetterheadO2() {
  return (
    <div className="o2" style={{ background: 'var(--o2-paper)', padding: 48, width: '100%', height: '100%' }}>
      <O2Eyebrow>09 · Papelaria · Papel timbrado</O2Eyebrow>
      <h2 style={{ fontFamily: 'var(--o2-sans)', fontSize: 32, fontWeight: 800, letterSpacing: '-0.03em', margin: '0 0 32px', color: 'var(--o2-ink)' }}>
        Letterhead · Proposta comercial
      </h2>

      {/* A4 mockup */}
      <div style={{ width: 520, background: 'var(--o2-white)', borderRadius: 12, boxShadow: '0 8px 40px rgba(15,47,58,0.12)', overflow: 'hidden', border: '1px solid var(--o2-line)' }}>
        {/* Header bar */}
        <div style={{ background: 'var(--o2-petrol)', padding: '20px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <MakersLogoO2 size={32} color="#fff" markBg="var(--o2-cyan)" markColor="var(--o2-petrol)" accent="var(--o2-petrol)"/>
          <div style={{ textAlign: 'right', fontFamily: 'var(--o2-mono)', fontSize: 10, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.1em' }}>
            PROPOSTA COMERCIAL<br/>
            <span style={{ color: 'var(--o2-cyan)' }}>Ref. PC-2026-041 · Maio 2026</span>
          </div>
        </div>

        {/* Subtle route watermark strip */}
        <div style={{ background: 'var(--o2-cyan-pale)', padding: '6px 32px', borderBottom: '1px solid var(--o2-line)', position: 'relative', overflow: 'hidden', height: 18 }}>
          <svg style={{ position: 'absolute', top: -4, left: 0, width: '100%', height: 26, opacity: 0.25 }} viewBox="0 0 520 26" preserveAspectRatio="none">
            <path d="M0 18 Q100 4 200 12 T400 6 T520 14" stroke="var(--o2-cyan)" strokeWidth="1.5" fill="none"/>
          </svg>
        </div>

        {/* Body content */}
        <div style={{ padding: '28px 32px' }}>
          {/* To / From */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginBottom: 28, paddingBottom: 20, borderBottom: '1px solid var(--o2-line)' }}>
            <div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>Para</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--o2-ink)' }}>Turismo Algarve Lda</div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 2 }}>João Silva · Director Comercial</div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>joao@turismo-algarve.pt</div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-muted)', letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>De</div>
              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--o2-ink)' }}>Makers</div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)', marginTop: 2 }}>Filipe Almeida · Founder</div>
              <div style={{ fontSize: 12, color: 'var(--o2-muted)' }}>filipe@makers.pt</div>
            </div>
          </div>

          {/* Proposal blocks */}
          <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--o2-ink)', letterSpacing: '-0.02em', marginBottom: 12 }}>
            Diagnóstico de Automação Comercial
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--o2-muted)', marginBottom: 20 }}>
            Proposta para implementação do sistema de prospecção e qualificação automática de leads via Explorador Comercial + Bot WhatsApp + AOS.
          </div>

          {[
            { label: 'Problema identificado', val: 'Tempo médio de resposta a pedidos: 4 horas. Oportunidades perdidas por falta de follow-up sistemático.' },
            { label: 'Solução Makers', val: 'Explorador + Bot WhatsApp + AOS: prospecção automática, resposta em < 2 min e gestão completa de pipeline.' },
            { label: 'Prazo de implementação', val: '3 semanas · onboarding incluído' },
            { label: 'Investimento', val: '€[a definir] /mês · sem setup fee no primeiro mês' },
          ].map((b, i) => (
            <div key={i} style={{ marginBottom: 14 }}>
              <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-cyan-2)', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>{b.label}</div>
              <div style={{ fontSize: 13, color: 'var(--o2-ink)', lineHeight: 1.55 }}>{b.val}</div>
            </div>
          ))}

          <div style={{ marginTop: 20, background: 'var(--o2-petrol)', borderRadius: 8, padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--o2-cyan)', flexShrink: 0 }}/>
            <div style={{ fontSize: 13, color: '#fff', fontWeight: 600 }}>Próximo passo: agendar call de 30 min · filipe@makers.pt</div>
          </div>
        </div>

        {/* Footer */}
        <div style={{ background: 'var(--o2-paper)', padding: '14px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--o2-line)' }}>
          <div style={{ fontFamily: 'var(--o2-mono)', fontSize: 9, color: 'var(--o2-muted)', letterSpacing: '0.08em' }}>MAKERS · makers.pt · Oeiras, Portugal</div>
          <MakersWordmarkO2 size={11} color="var(--o2-muted)" accent="var(--o2-cyan)"/>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BusinessCardO2, LetterheadO2 });