/* Sobre / About Page — Marcianus Experience v3 */
const { useState: useStateAB } = React;

const TEAM = [
  { ini: 'IN', name: 'Israel Nzambi', role: 'Founder & CEO', company: 'Marcianus Experience', tier: 'founder', score: 99, isFounder: true, linkedin: 'https://www.linkedin.com/in/israelnzambi', whatsapp: 'https://wa.me/244930179037', email: 'marcianusfounder.israelnzambi@gmail.com', bio: 'Criou a Marcianus com uma missão: acabar com eventos que não geram resultado. Especialista em behavioral design, product architecture e B2B intelligence.' },
  { ini: 'CS', name: 'Carolina Sá', role: 'Managing Partner', company: 'Veridian VC', tier: 'diamond', score: 94, linkedin: 'https://linkedin.com/company/marcianus', bio: 'Managing Partner na Veridian VC. Foco em early-stage B2B SaaS e EventTech. Advisory Board Marcianus desde 2024.' },
  { ini: 'MT', name: 'Miguel Tavares', role: 'Partner', company: 'Veridian VC', tier: 'diamond', score: 98, linkedin: 'https://linkedin.com/company/marcianus', bio: 'Partner na Veridian VC com portfolio em deep tech e plataformas de dados. Lidera due diligence técnica.' },
  { ini: 'MM', name: 'Margarida Costa Vaz', role: 'AI Research Lead', company: 'IST Lisboa', tier: 'diamond', score: 92, linkedin: 'https://linkedin.com/company/marcianus', bio: 'Investigadora em IA e NLP no IST Lisboa. Contribui para o desenvolvimento do Hexis RAG PVA-7 e sistemas de matching comportamental.' },
  { ini: 'AF', name: 'António Figueiredo', role: 'Head of Data Science', company: 'Nova IMS', tier: 'diamond', score: 90, linkedin: 'https://linkedin.com/company/marcianus', bio: 'Data Scientist e Professor na Nova IMS. Responsável pela arquitectura de dados, pipelines ETL e KPIs de evento.' },
  { ini: 'HD', name: 'Helena Duarte', role: 'Advisory Board', company: 'BioSci Portugal', tier: 'diamond', score: 92, linkedin: 'https://linkedin.com/company/marcianus', bio: 'Advisory Board com foco em expansão sectorial. Experiência em life sciences, eventos corporativos e parcerias internacionais.' },
];

const STATS = [
  { v: '€54M+', l: 'Pipeline gerado 2025' },
  { v: '12', l: 'Países de operação' },
  { v: '94%', l: 'Match Score médio' },
  { v: '3.4×', l: 'ROI vs. networking tradicional' },
  { v: '186', l: 'Meetings/evento' },
  { v: '7', l: 'Sectores cobertos' },
];

const TIMELINE = [
  { year: '2024', q: 'Q3', event: 'Genesis Event — Fábrica Braço de Prata. 79 participantes. Match avg 97.1%.', badge: 'Fundação' },
  { year: '2024', q: 'Q4', event: 'Primeiro kiosk NFC em produção. Hexis AI v1.0 deployed.', badge: 'Hardware' },
  { year: '2025', q: 'Q1', event: 'Invicta Capital Forum — €4.2M pipeline. 240 CFOs. Record score 96.8%.', badge: 'Milestone' },
  { year: '2025', q: 'Q2', event: 'Expansão para 12 países. Cygnus AI Forum. 6 sectores ativos.', badge: 'Expansão' },
  { year: '2025', q: 'Q3', event: 'Hexis AI v3 — pgvector + RAG PVA-7. Zero downtime deploy.', badge: 'Tecnologia' },
  { year: '2026', q: 'Agora', event: 'Marcianus Experience v3 — full-stack, open architecture, EU sovereign.', badge: 'v3 Live' },
];

const VALUES = [
  { ic: 'chart-line', title: 'Auditabilidade Total', desc: 'Cada conexão tem um score, um timestamp e uma atribuição de pipeline. Zero fé.' },
  { ic: 'shield-check', title: 'Soberania de Dados', desc: 'Deploy EU-only. PostgreSQL + pgvector on-prem. Sem AWS Lambda. Sem vendor lock-in.' },
  { ic: 'target', title: 'Anti-Aleatoriedade', desc: 'Não fazemos networking. Fazemos encontros programados com base em matemática e comportamento.' },
  { ic: 'zap', title: 'Hardware + Software', desc: 'A plataforma física (NFC, kiosk) e a camada de inteligência operam como um sistema único.' },
  { ic: 'cube', title: 'Anti-Vibe Coding', desc: 'Cada linha de código é determinística. TDD, CQRS, Event Sourcing. Zero código de humor.' },
  { ic: 'globe', title: 'Open Architecture', desc: 'API-first. Sem walled gardens. Integra com qualquer CRM, BI ou sistema legado.' },
];

/* Founder image path relative to the web root */
const FOUNDER_IMG = 'assets/founder-israel-nzambi.png';

const TeamModal = ({ member, onClose }) => {
  if (!member) return null;
  return (
    <div className="modal-overlay" onClick={onClose} style={{ zIndex: 9000 }}>
      <div className="modal-box" onClick={e => e.stopPropagation()} style={{ maxWidth: 480 }}>
        <button className="modal-close" onClick={onClose}><Icon name="x" size={18} /></button>
        <div style={{ display: 'flex', gap: 20, alignItems: 'flex-start', marginBottom: 20 }}>
          {member.isFounder ? (
            <div className="team-av" style={{ background: 'linear-gradient(135deg, #5D3FD3, #7B61FF)', position: 'relative', overflow: 'hidden', flexShrink: 0, width: 64, height: 64, borderRadius: 16 }}>
              <img src={FOUNDER_IMG} alt={member.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 16 }} onError={e => { e.target.style.display = 'none'; }} />
              <span style={{ position: 'relative', zIndex: 1, fontSize: 18 }}>{member.ini}</span>
            </div>
          ) : (
            <div className="team-av" style={{ flexShrink: 0, width: 64, height: 64, borderRadius: 16, fontSize: 18 }}>{member.ini}</div>
          )}
          <div>
            <div style={{ fontWeight: 900, fontSize: 18, color: '#fff', marginBottom: 2 }}>{member.name}</div>
            <div style={{ fontSize: 13, color: 'var(--purple-soft)', fontWeight: 600 }}>{member.role}</div>
            <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 2 }}>{member.company}</div>
          </div>
          <span className="score-pill" style={{ marginLeft: 'auto', flexShrink: 0 }}>{member.score}%</span>
        </div>
        {member.bio && <p style={{ fontSize: 14, color: 'var(--text-2)', lineHeight: 1.7, marginBottom: 20 }}>{member.bio}</p>}
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {member.linkedin && (
            <a href={member.linkedin} target="_blank" rel="noopener noreferrer" className="founder-social-link" onClick={() => SoundFX.tap()}>
              <Icon name="linkedin" size={14} /> LinkedIn
            </a>
          )}
          {member.whatsapp && (
            <a href={member.whatsapp} target="_blank" rel="noopener noreferrer" className="founder-social-link" onClick={() => SoundFX.tap()}>
              <Icon name="message-circle" size={14} /> WhatsApp
            </a>
          )}
          {member.email && (
            <a href={`mailto:${member.email}`} className="founder-social-link" onClick={() => SoundFX.tap()}>
              <Icon name="mail" size={14} /> Email
            </a>
          )}
        </div>
      </div>
    </div>
  );
};

const AboutPage = ({ onNav }) => {
  const [selectedMember, setSelectedMember] = useStateAB(null);
  return (
  <div className="page active">
    {/* Hero */}
    <section className="page-section" style={{ paddingTop: 56 }}>
      <div className="container">
        <div style={{ maxWidth: 800 }}>
          <span className="eyebrow">A empresa</span>
          <h2>Construímos o <span className="hl-grad">sistema operativo</span><br />do evento privado.</h2>
          <p className="section-lead">
            A Marcianus não organiza eventos. Programa encontros de alto valor com inteligência comportamental,
            hardware integrado e pipeline auditável — do handshake ao fecho.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
            {/* Demo CTA 1 of 2 — About hero */}
            <button className="btn btn-demo" onClick={() => { SoundFX.success(); onNav('criar-experiencia'); }}>
              <Icon name="play" size={16} /> Ver Demo · Criar Experiência
            </button>
            <button className="btn btn-ghost" onClick={() => { SoundFX.tap(); window.open('https://wa.me/244930179037', '_blank'); }}>
              Contactar <Icon name="message-circle" size={16} />
            </button>
          </div>
        </div>
      </div>
    </section>

    {/* Stats strip */}
    <section style={{ borderTop: '1px solid var(--border-1)', borderBottom: '1px solid var(--border-1)', background: 'var(--surface-1)' }}>
      <div className="container">
        <div className="about-stats-grid">
          {STATS.map((s, i) => (
            <div key={i} className="about-stat">
              <div className="about-stat-v">{s.v}</div>
              <div className="about-stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ── FOUNDER SECTION ── */}
    <section className="page-section" style={{ background: 'linear-gradient(135deg, rgba(123,97,255,0.06), transparent)' }}>
      <div className="container">
        <div className="founder-section">
          <div className="founder-img-wrap">
            <img
              src={FOUNDER_IMG}
              alt="Israel Nzambi — Founder &amp; CEO, Marcianus Experience"
              onError={e => {
                /* Fallback: gradient avatar when image is unavailable */
                e.target.style.display = 'none';
                const fallback = e.target.nextElementSibling;
                if (fallback) fallback.style.display = 'flex';
              }}
            />
            {/* Fallback avatar */}
            <div style={{
              display: 'none',
              width: '100%',
              aspectRatio: '3/4',
              borderRadius: 20,
              background: 'linear-gradient(135deg, #1a1440, #5D3FD3)',
              border: '1px solid var(--border-purple)',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 72,
              color: 'rgba(255,255,255,0.20)',
              fontFamily: 'var(--font-mono)',
              fontWeight: 900,
            }}>IN</div>
            <div className="founder-img-badge">Founder &amp; CEO · Marcianus Experience</div>
          </div>

          <div>
            <span className="eyebrow">Fundador</span>
            <h2 style={{ fontSize: 'clamp(2rem, 4vw, 3rem)', marginBottom: 8 }}>
              Israel <span className="hl-grad">Nzambi</span>.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--text-2)', lineHeight: 1.65, maxWidth: 520, marginBottom: 16 }}>
              Criou a Marcianus com uma missão simples: acabar com eventos que não geram resultado. Cada linha de código, cada kiosk e cada algoritmo de matching existe para transformar encontros em pipeline real e auditável.
            </p>

            <blockquote className="founder-quote">
              "No mundo dos negócios de hoje, os dados são ouro, o feedback são dados e uma experiência de utilizador bem servida é uma mina de ouro."
            </blockquote>

            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-3)', letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 24 }}>
              — Israel Nzambi · Founder &amp; CEO | Marcianus Experience
            </div>

            <div className="founder-socials">
              <a
                href="https://www.linkedin.com/in/israelnzambi"
                target="_blank"
                rel="noopener noreferrer"
                className="founder-social-link"
                aria-label="LinkedIn de Israel Nzambi"
              >
                <Icon name="linkedin" size={16} /> LinkedIn
              </a>
              <a
                href="mailto:marcianusfounder.israelnzambi@gmail.com"
                className="founder-social-link"
                aria-label="Email de Israel Nzambi"
              >
                <Icon name="mail" size={16} /> Email
              </a>
              <a
                href="https://www.instagram.com/israelnzambi"
                target="_blank"
                rel="noopener noreferrer"
                className="founder-social-link"
                aria-label="Instagram de Israel Nzambi"
              >
                <Icon name="instagram" size={16} /> Instagram
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    {/* Values */}
    <section className="page-section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Princípios</span>
            <h2>O que nos torna <span className="hl">diferentes</span>.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {VALUES.map((v, i) => (
            <div key={i} className="card card-purple">
              <div style={{ width: 40, height: 40, borderRadius: 10, background: 'rgba(123,97,255,0.14)', border: '1px solid var(--border-purple)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--purple-soft)', marginBottom: 16 }}>
                <Icon name={v.ic} size={20} />
              </div>
              <h4 style={{ marginBottom: 8 }}>{v.title}</h4>
              <p style={{ fontSize: 14, color: 'var(--text-2)' }}>{v.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Timeline */}
    <section className="page-section" style={{ background: 'var(--surface-1)' }}>
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">História</span>
            <h2>Da fundação ao <span className="hl-grad">v3 Live</span>.</h2>
          </div>
        </div>
        <div className="about-timeline">
          {TIMELINE.map((t, i) => (
            <div key={i} className="timeline-step">
              <div className="ts-dot" />
              <div className="ts-body">
                <div className="ts-meta">
                  <span className="ts-year">{t.year} {t.q}</span>
                  <span className={`chip chip-${t.badge === 'v3 Live' ? 'success' : t.badge === 'Milestone' ? 'gold' : 'purple'}`}>{t.badge}</span>
                </div>
                <p className="ts-event">{t.event}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Team */}
    <section className="page-section">
      <div className="container">
        <div className="section-head">
          <div className="left">
            <span className="eyebrow">Equipa</span>
            <h2>Os <span className="hl">decisores</span> por trás da plataforma.</h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {TEAM.map((m, i) => (
            <div key={i} className="card" style={{ display: 'flex', alignItems: 'center', gap: 16, cursor: 'pointer' }}
              onClick={() => { SoundFX.tap(); setSelectedMember(m); }}>
              {m.isFounder ? (
                <div className="team-av" style={{ background: 'linear-gradient(135deg, #5D3FD3, #7B61FF)', position: 'relative', overflow: 'hidden' }}>
                  <img
                    src={FOUNDER_IMG}
                    alt={m.name}
                    style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', borderRadius: 12 }}
                    onError={e => { e.target.style.display = 'none'; }}
                  />
                  <span style={{ position: 'relative', zIndex: 1 }}>{m.ini}</span>
                </div>
              ) : (
                <div className="team-av">{m.ini}</div>
              )}
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 800, fontSize: 15, color: '#fff' }}>{m.name}</div>
                <div style={{ fontSize: 12, color: 'var(--text-2)', marginTop: 2 }}>{m.role}</div>
                <div style={{ fontSize: 11, color: 'var(--text-3)', marginTop: 1 }}>{m.company}</div>
              </div>
              <span className="score-pill">{m.score}%</span>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Game Widget */}
    <section className="page-section" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="container">
        {window.InfiniteGameWidget && React.createElement(window.InfiniteGameWidget, { title: 'Marcianus Trivia™', accentColor: '#00D1FF', compact: true })}
      </div>
    </section>

    {/* Final CTA — Demo CTA 2 of 2 */}
    <section style={{ padding: '80px 0', background: 'linear-gradient(135deg, rgba(123,97,255,0.08), rgba(0,209,255,0.04))', borderTop: '1px solid var(--border-1)' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <span className="eyebrow" style={{ justifyContent: 'center' }}>Pronto para começar?</span>
        <h2 style={{ maxWidth: 640, margin: '0 auto 24px' }}>
          O próximo evento começa com um <span className="hl-grad">briefing</span>.
        </h2>
        <p style={{ color: 'var(--text-2)', fontSize: 17, maxWidth: 480, margin: '0 auto 32px' }}>
          14 dias de setup. Hardware entregue. Pipeline no CRM em 24h pós-evento.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button
            className="btn btn-demo btn-lg"
            onClick={() => { SoundFX.success(); fireConfetti({ x: window.innerWidth / 2, y: 400 }); onNav('criar-experiencia'); }}
          >
            <Icon name="play" size={18} /> Ver Demo · Criar Experiência
          </button>
          <button className="btn btn-ghost btn-lg" onClick={() => onNav('pricing')}>
            <Icon name="chart-line" size={16} /> Ver Planos
          </button>
        </div>
      </div>
    </section>

    <TeamModal member={selectedMember} onClose={() => setSelectedMember(null)} />
  </div>
  );
};

window.AboutPage = AboutPage;