/* screen_marketing_openhouses.jsx
   Marketing · Open Houses — em desenvolvimento.
   Expõe window.MktOpenHousesScreen.
*/

const MktOpenHousesScreen = ({ userName }) => {
  const hour = new Date().getHours();
  const saudacao = hour < 12 ? 'Bom dia' : hour < 19 ? 'Boa tarde' : 'Boa noite';
  const rawName = userName || (window.currentUser && (window.currentUser.nome_apresentar || window.currentUser.nome)) || '';
  const firstName = rawName.split(' ')[0] || 'Fábio';

  const cardStyle = {
    padding: '14px 16px', borderRadius: 10,
    background: 'var(--bg-sunken)', border: '1px solid var(--border)',
    display: 'flex', flexDirection: 'column', gap: 4,
  };
  const titleStyle = { fontSize: 13, fontWeight: 600, color: 'var(--text)', marginBottom: 2 };
  const descStyle  = { fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.6 };
  const sectionLabel = { fontSize: 10, fontFamily: 'var(--font-mono)', letterSpacing: '0.08em', color: 'var(--text-dim)', marginBottom: 10 };
  const subLabel = {
    fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em',
    color: 'var(--ai-500, #3859D0)', fontFamily: 'var(--font-mono)', marginBottom: 8, marginTop: 4,
    display: 'flex', alignItems: 'center', gap: 6,
  };
  const dot = (color) => ({ width: 7, height: 7, borderRadius: '50%', background: color, flexShrink: 0, display: 'inline-block' });

  const tableHeader = { fontSize: 10, fontWeight: 700, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', padding: '6px 10px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border)' };
  const tableCell   = { fontSize: 12, color: 'var(--text)', padding: '8px 10px', borderBottom: '1px solid var(--border)', lineHeight: 1.5 };
  const tableCellMuted = { ...tableCell, color: 'var(--text-muted)' };

  return (
    <div className="scrollbar" style={{ height: '100%', overflowY: 'auto' }}>

      {/* Page header */}
      <div style={{ padding: '28px 32px 0', flexShrink: 0 }}>
        <div style={{ fontSize: 10, color: 'var(--text-dim)', fontFamily: 'var(--font-mono)', letterSpacing: '0.08em' }}>
          MARKETING · OPEN HOUSES
        </div>
        <h1 className="font-display" style={{ margin: '6px 0 4px', fontSize: 26, fontWeight: 600, letterSpacing: '-0.015em' }}>
          Open Houses
        </h1>
        <div style={{ fontSize: 12, color: 'var(--text-muted)', display: 'flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
          Gestão de eventos físicos · Cross-sell Mimaki · Decal · Biond · Alldecor
          <span style={{
            fontSize: 9, fontFamily: 'var(--font-mono)', letterSpacing: '0.09em', fontWeight: 600,
            padding: '2px 7px', borderRadius: 4,
            background: 'color-mix(in oklch, var(--warning) 12%, transparent)',
            color: 'var(--warning)',
            border: '1px solid color-mix(in oklch, var(--warning) 28%, transparent)',
          }}>EM DESENVOLVIMENTO</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--text)', fontFamily: 'var(--font-display)', marginBottom: 6, letterSpacing: '-0.02em' }}>
          {saudacao}, {firstName}.
        </div>
        <div style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.65, maxWidth: 700, marginBottom: 28 }}>
          Módulo dedicado à gestão completa das Open Houses Digidelta — do planeamento ao follow-up comercial.
          Cross-selling estruturado entre Mimaki, Decal, Biond e Alldecor em todos os showrooms,
          com fluxo de comunicação segmentado pela base de dados do Gestor e QR Code de check-in no evento.
        </div>
      </div>

      {/* Two-column layout */}
      <div style={{ padding: '0 32px 40px', display: 'grid', gridTemplateColumns: '1fr 380px', gap: 24, alignItems: 'start' }}>

        {/* ── Coluna esquerda ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>

          {/* Gestão do evento */}
          <div>
            <div style={sectionLabel}>O QUE ESTARÁ AQUI</div>
            <div style={{ ...subLabel }}><span style={dot('#3859D0')} />Gestão do Evento</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Agendamento de datas e locais', d: 'Criação e gestão de Open Houses por showroom Digidelta — Porto, Lisboa, Madrid e outros. Capacidade máxima, lista de espera e calendário de equipamentos em demonstração.' },
                { t: 'Cross-selling Mimaki · Decal · Biond · Alldecor', d: 'Cada evento tem um briefing de cross-sell estruturado por marca — o que demonstrar, a quem e com que ângulo de mensagem.' },
                { t: 'Ligação ao módulo de Briefings', d: 'Cada Open House tem uma campanha específica gerada a partir dos Briefings — com conceito criativo, copy e comunicação alinhados.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Comunicação segmentada */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#0ea5e9')} />Comunicação Segmentada</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { t: 'Base de dados do Gestor (CRM)', d: 'Importação e sincronização dos contactos do Gestor — filtrados por zona geográfica, tipo de cliente e histórico de interacção.' },
                { t: 'Segmentação por zona geográfica / comercial', d: 'Cada comunicação é enviada pelo comercial responsável pela zona — personalização e rastreabilidade garantidas.' },
                { t: 'Segmentação por tipo de cliente', d: 'End users e partners recebem conteúdos diferentes — proposta de valor, ângulo de mensagem e CTA adaptados.' },
              ].map((f, i) => (
                <div key={i} style={cardStyle}>
                  <div style={titleStyle}>{f.t}</div>
                  <div style={descStyle}>{f.d}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Fluxo de conteúdo */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#059669')} />Fluxo de Conteúdo — 6 Steps</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { n: '1', t: 'Email de prospecção → registo', d: 'Email segmentado por zona e tipo de cliente a convidar para a Open House, com link para a landing page de registo.' },
                { n: '2', t: 'Landing page de registo', d: 'Página pública com formulário de inscrição — nome, empresa, cargo, marca de interesse. Gerada automaticamente com os dados do evento.' },
                { n: '3', t: 'Email follow-up com convite + QR Code', d: 'Após confirmação de inscrição, email de confirmação com QR Code único por inscrito para check-in no evento.' },
                { n: '4', t: 'QR Code check-in no evento', d: 'Interface mobile (câmara do browser) para picar o QR Code na entrada — sem app, funciona em HTTPS. Regista a presença em tempo real.' },
                { n: '5', t: 'Registo de presença', d: 'Dashboard em tempo real: confirmados vs presentes vs no-shows. Registo de interesse por produto/marca durante o evento.' },
                { n: '6', t: 'Trigger de follow-up aos comerciais', d: 'Após o evento, tarefas de follow-up criadas automaticamente no Gestor por comercial, segmentadas por produto demonstrado e interesse registado.' },
              ].map((f, i) => (
                <div key={i} style={{ ...cardStyle, flexDirection: 'row', alignItems: 'flex-start', gap: 12 }}>
                  <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'color-mix(in oklch, var(--ai-500) 15%, transparent)', color: 'var(--ai-500)', fontSize: 11, fontWeight: 700, fontFamily: 'var(--font-mono)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>{f.n}</div>
                  <div>
                    <div style={titleStyle}>{f.t}</div>
                    <div style={descStyle}>{f.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Funcionalidades adicionais */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#8b5cf6')} />Funcionalidades Adicionais</div>

            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text)', marginBottom: 6, marginTop: 4 }}>Antes do evento</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              {[
                'Gestão de capacidade — máx. de inscritos + lista de espera automática',
                'Multi-localização — Porto, Lisboa, Madrid e outros showrooms',
                'Calendário de equipamentos em demonstração por Open House',
                'Briefing interno para comerciais — o que apresentar, a quem, com que ângulo de cross-sell',
                'Lembretes automáticos aos inscritos: D-7, D-3, D-1',
              ].map((item, i) => (
                <div key={i} style={{ ...cardStyle, padding: '10px 14px' }}>
                  <div style={descStyle}>{item}</div>
                </div>
              ))}
            </div>

            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text)', marginBottom: 6 }}>Durante o evento</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
              {[
                'Check-in mobile (câmara do browser, sem app) — QR Code picado pelo responsável',
                'Vista de presença em tempo real — quem confirmou vs quem chegou',
                'Registo de interesse por produto/marca durante o evento para follow-up direccionado',
              ].map((item, i) => (
                <div key={i} style={{ ...cardStyle, padding: '10px 14px' }}>
                  <div style={descStyle}>{item}</div>
                </div>
              ))}
            </div>

            <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text)', marginBottom: 6 }}>Após o evento</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              {[
                'Dashboard de presença: confirmados vs presentes vs no-shows',
                'Geração automática de tarefas de follow-up por comercial, segmentadas por produto demonstrado',
                'Tracking de conversão: leads do evento → oportunidades no Gestor',
                'Relatório de ROI: custo do evento vs pipeline gerado',
              ].map((item, i) => (
                <div key={i} style={{ ...cardStyle, padding: '10px 14px' }}>
                  <div style={descStyle}>{item}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Ligações ao sistema */}
          <div>
            <div style={{ ...subLabel }}><span style={dot('#f59e0b')} />Ligações ao Sistema Existente</div>
            <div style={{ ...cardStyle, fontFamily: 'var(--font-mono)', fontSize: 12, lineHeight: 2, color: 'var(--text)' }}>
              <div>Briefings → <span style={{ color: 'var(--ai-500)' }}>Open House Campaign Brief</span></div>
              <div style={{ paddingLeft: 16 }}>↓</div>
              <div>Open Houses Module</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Segmentação Gestor CRM → emails segmentados</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Landing page → inscrições</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── QR Codes → check-in</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>├── Presença → follow-up comerciais (Gestor tasks)</div>
              <div style={{ paddingLeft: 16, color: 'var(--text-muted)' }}>└── ROI → dashboard Marketing</div>
            </div>
          </div>

          {/* Nota técnica */}
          <div style={{
            padding: '14px 16px', borderRadius: 8,
            background: 'color-mix(in oklch, var(--warning) 6%, transparent)',
            border: '1px solid color-mix(in oklch, var(--warning) 25%, transparent)',
          }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--warning)', fontFamily: 'var(--font-mono)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.06em' }}>Consideração técnica</div>
            <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.65 }}>
              O check-in QR Code requer acesso à câmara do browser — funciona em mobile sem app se o portal estiver em HTTPS. No servidor local a câmara pode não funcionar por questões de segurança. Este módulo precisa de estar no staging/produção para o check-in funcionar em condições reais.
              <br /><br />
              A landing page de registo pode ser gerada como página pública (fora do portal autenticado) ou como iframe. Arquitectura a definir antes de implementar.
            </div>
          </div>
        </div>

        {/* ── Coluna direita ── */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'sticky', top: 0 }}>

          {/* Skills e Tools */}
          <div>
            <div style={sectionLabel}>SKILLS E TOOLS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                <div style={tableHeader}>Skill / Tool</div>
                <div style={tableHeader}>O que faz</div>
              </div>
              {[
                ['event-scheduling',       'Criar/gerir datas, locais, capacidade'],
                ['audience-segmentation',  'Segmenta contactos do Gestor por zona, tipo, histórico'],
                ['email-generator',        'Gera email prospecção, convite, follow-up por audiência'],
                ['landing-page-generator', 'Gera formulário de registo com validação'],
                ['qr-code-generator',      'Gera QR Code único por inscrito com dados do evento'],
                ['checkin-scanner',        'Interface mobile para picar QR Code no check-in'],
                ['attendance-tracker',     'Regista presença em tempo real, identifica no-shows'],
                ['followup-dispatcher',    'Cria tarefas de follow-up por comercial após evento'],
                ['roi-calculator',         'Cruza custo do evento com pipeline gerado'],
              ].map(([skill, desc], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr' }}>
                  <div style={{ ...tableCell, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ai-500)' }}>{skill}</div>
                  <div style={tableCellMuted}>{desc}</div>
                </div>
              ))}
            </div>
          </div>

          {/* O que ganhamos */}
          <div>
            <div style={sectionLabel}>O QUE GANHAMOS</div>
            <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden' }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                <div style={{ ...tableHeader, color: 'var(--danger)' }}>Antes</div>
                <div style={{ ...tableHeader, color: 'var(--success)' }}>Depois</div>
              </div>
              {[
                ['Folha Excel de inscrições',       'Módulo com segmentação automática do CRM'],
                ['Email manual por comercial',       'Fluxo automatizado por zona geográfica'],
                ['Presença registada em papel',      'QR Code + dashboard em tempo real'],
                ['Follow-up ad-hoc ou esquecido',   'Tarefas criadas automaticamente por comercial'],
                ['ROI desconhecido',                 'Tracking de conversão evento → pipeline'],
                ['Cross-sell informal',              'Briefing estruturado por marca para cada evento'],
              ].map(([before, after], i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
                  <div style={{ ...tableCellMuted, fontSize: 11 }}>{before}</div>
                  <div style={{ ...tableCell, fontSize: 11 }}>{after}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.MktOpenHousesScreen = MktOpenHousesScreen;