// Trainer Connect — Landing (parte 2.5: Plataforma / módulos do produto)
// Conecta a home comercial às telas reais: Adimplência & Cobrança,
// Controle de acesso e Loja do personal.

// ====================================================================
//  MOCKUPS — painéis flat espelhando as telas reais do produto
// ====================================================================

// 1 · Adimplência + cobrança — carteira financeira
function ModFinanceiro() {
  const alunos = [
    { i: 'LC', n: 'Lucas Castro', sub: 'Pago · 12/05', val: 'R$ 180', s: 'ok', hue: 200 },
    { i: 'RM', n: 'Rafael Moreira', sub: 'Pago · 10/05', val: 'R$ 220', s: 'ok', hue: 140 },
    { i: 'SB', n: 'Silvio Baroni', sub: 'Vence em 3 dias', val: 'R$ 150', s: 'warn', hue: 80 },
    { i: 'TG', n: 'Thais Gomes', sub: 'Atrasado há 5 dias', val: 'R$ 250', s: 'bad', hue: 340 },
  ];
  const map = {
    ok:   { c: 'var(--tc-success)' },
    warn: { c: 'var(--tc-warn)' },
    bad:  { c: 'var(--tc-danger)' },
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
        <div style={{ background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 9, color: 'var(--tc-fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Receita · maio</div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 22, fontWeight: 600, letterSpacing: '-0.03em', marginTop: 4 }}>R$ 1.970</div>
          <div style={{ fontSize: 10, color: 'var(--tc-success)', fontFamily: 'JetBrains Mono', marginTop: 2 }}>↑ +12% vs abr</div>
        </div>
        <div style={{ background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 9, color: 'var(--tc-fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Alunos em dia</div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 22, fontWeight: 600, marginTop: 4 }}>5<span style={{ color: 'var(--tc-fg-3)' }}>/6</span></div>
          <div style={{ fontSize: 10, color: 'var(--tc-danger)', fontFamily: 'JetBrains Mono', marginTop: 2 }}>● 1 atrasado</div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
        <span className="tc-chip tc-chip--active" style={{ fontSize: 11 }}>Todos · 6</span>
        <span className="tc-chip" style={{ fontSize: 11 }}>Em dia · 5</span>
        <span className="tc-chip" style={{ fontSize: 11, color: 'var(--tc-danger)', borderColor: 'var(--tc-danger-line)', background: 'var(--tc-danger-bg)' }}>Atrasados · 1</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {alunos.map((a) => (
          <div key={a.i} style={{
            background: 'var(--tc-bg-1)', borderRadius: 10, padding: '10px 12px',
            display: 'flex', alignItems: 'center', gap: 10,
            border: a.s === 'bad' ? '1px solid var(--tc-danger-line)' : '1px solid var(--tc-line-1)',
          }}>
            <div style={{ width: 28, height: 28, borderRadius: '50%', background: `oklch(0.28 0.04 ${a.hue})`, color: `oklch(0.88 0.05 ${a.hue})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600 }}>{a.i}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 600 }}>{a.n}</div>
              <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', marginTop: 1, display: 'flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: map[a.s].c }}/>{a.sub}
              </div>
            </div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 600, color: a.s === 'bad' ? 'var(--tc-danger)' : 'var(--tc-fg-0)' }}>{a.val}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// 2 · Controle de acesso — bloqueio automático do inadimplente
function ModAcesso() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      {/* Timeline de bloqueio */}
      <div style={{ background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 12, padding: 14 }}>
        <div style={{ fontSize: 9, color: 'var(--tc-fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600, marginBottom: 12 }}>Régua de cobrança · automática</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
          {[
            { t: 'Vencimento', d: '10/05', c: 'var(--tc-fg-2)', tag: 'Pix enviado' },
            { t: 'Carência', d: 'D+7', c: 'var(--tc-warn)', tag: 'lembrete' },
            { t: 'Bloqueio', d: '17/05', c: 'var(--tc-danger)', tag: 'auto' },
          ].map((s, i) => (
            <div key={i} style={{ position: 'relative' }}>
              <div style={{ height: 3, borderRadius: 2, background: s.c, opacity: 0.5, marginBottom: 8 }}/>
              <div style={{ fontSize: 9, color: 'var(--tc-fg-3)', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 600 }}>{s.t}</div>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 14, fontWeight: 600, marginTop: 2 }}>{s.d}</div>
              <div style={{ fontSize: 9, color: s.c, marginTop: 1, fontFamily: 'JetBrains Mono' }}>{s.tag}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Visão do aluno bloqueado */}
      <div style={{ background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 14, padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 8 }}>
          <div style={{ fontSize: 11, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono' }}>App do aluno · Thais</div>
          <span style={{ fontSize: 9, fontFamily: 'JetBrains Mono', color: 'var(--tc-danger)', padding: '2px 7px', borderRadius: 999, background: 'var(--tc-danger-bg)', border: '1px solid var(--tc-danger-line)', fontWeight: 600 }}>RESTRITO</span>
        </div>
        <div style={{ background: 'var(--tc-danger-bg)', border: '1px solid var(--tc-danger-line)', borderRadius: 12, padding: 12, marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <Icon name="alertCircle" size={15} style={{ color: 'var(--tc-danger)' }}/>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--tc-danger)' }}>Acesso com restrição</div>
          </div>
          <div style={{ fontSize: 11, color: 'var(--tc-fg-1)', lineHeight: 1.5 }}>
            Há uma pendência financeira com seu personal. Regularize para retomar os treinos.
          </div>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          height: 40, borderRadius: 10, background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)',
          color: 'var(--tc-fg-3)', fontSize: 12, fontWeight: 600,
        }}>
          <Icon name="lock" size={14}/> Treino bloqueado
        </div>
        <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', marginTop: 8, textAlign: 'center' }}>
          Histórico continua liberado em modo leitura.
        </div>
      </div>
    </div>
  );
}

// 3 · Loja do personal — produtos + split
function ModLoja() {
  const produtos = [
    { name: 'Hipertrofia 12 semanas', tag: 'Programa', price: 'R$ 480', sales: 24, icon: 'package', hue: 60, featured: true },
    { name: 'Treino A · Iniciante', tag: 'Treino', price: 'R$ 80', sales: 17, icon: 'dumbbell', hue: 200 },
    { name: 'Desafio 30 dias', tag: 'Desafio', price: 'R$ 120', sales: 8, icon: 'trophy', hue: 340 },
  ];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ display: 'flex', gap: 8 }}>
        <div style={{ flex: 1, background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 9, color: 'var(--tc-fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Receita loja · mai</div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 22, fontWeight: 600, marginTop: 4 }}>R$ 2.880</div>
          <div style={{ fontSize: 10, color: 'var(--tc-success)', fontFamily: 'JetBrains Mono', marginTop: 2 }}>↑ 3 vendas hoje</div>
        </div>
        <div style={{ flex: 1, background: 'var(--tc-bg-1)', border: '1px solid var(--tc-line-1)', borderRadius: 12, padding: 12 }}>
          <div style={{ fontSize: 9, color: 'var(--tc-fg-2)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Você recebe</div>
          <div style={{ fontFamily: 'JetBrains Mono', fontSize: 22, fontWeight: 600, marginTop: 4 }}>90<span style={{ fontSize: 13, color: 'var(--tc-fg-3)' }}>%</span></div>
          <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono', marginTop: 2 }}>taxa 10% · mín R$ 2,99</div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        {produtos.map((p, i) => (
          <div key={i} style={{ background: 'var(--tc-bg-1)', border: `1px solid ${p.featured ? 'var(--tc-line-2)' : 'var(--tc-line-1)'}`, borderRadius: 10, padding: 12, display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 38, height: 38, borderRadius: 9, background: `oklch(0.30 0.05 ${p.hue})`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
              <Icon name={p.icon} size={16} style={{ color: '#fff' }}/>
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--tc-fg-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{p.tag}</span>
                {p.featured && <span style={{ fontSize: 9, fontWeight: 600, color: 'var(--tc-accent-fg)', background: 'var(--tc-accent)', padding: '1px 6px', borderRadius: 999 }}>★ Top</span>}
              </div>
              <div style={{ fontSize: 12, fontWeight: 600, marginTop: 2 }}>{p.name}</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              <div style={{ fontFamily: 'JetBrains Mono', fontSize: 13, fontWeight: 600 }}>{p.price}</div>
              <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono', marginTop: 1 }}>{p.sales} vendas</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====================================================================
//  SEÇÃO — Plataforma completa (3 módulos alternados)
// ====================================================================

function LandingModulos() {
  const isMobile = window.useMedia('(max-width: 900px)');

  const mods = [
    {
      tag: 'Adimplência & cobrança',
      kicker: 'Receba sem perseguir ninguém no WhatsApp',
      body: 'Cobrança recorrente em Pix com vencimento e carência que você define. A carteira mostra quem está em dia, quem vence hoje e quem atrasou — antes de virar prejuízo.',
      points: ['Pix recorrente automático na sua chave', 'Carteira com status por aluno', 'Receita do mês e saldo a sacar'],
      mock: <ModFinanceiro/>,
      icon: 'creditCard',
    },
    {
      tag: 'Controle de acesso',
      kicker: 'Aluno em atraso é bloqueado sozinho',
      body: 'A régua de cobrança roda no automático: vencimento, lembrete na carência e bloqueio do treino no dia que você definiu. Sem cobrança constrangedora — o sistema faz por você.',
      points: ['Bloqueio automático após a carência', 'Aluno vê aviso, não o valor exposto', 'Histórico segue liberado em leitura'],
      mock: <ModAcesso/>,
      icon: 'lock',
    },
    {
      tag: 'Loja do personal',
      kicker: 'Venda programas e treinos avulsos',
      body: 'Monte uma vitrine com programas, treinos e desafios. O aluno compra direto pelo app, o pagamento cai na sua conta e a rotina é liberada na hora. Você fica com 90% de cada venda.',
      points: ['Programas, treinos e desafios avulsos', 'Split automático: você recebe 90%', 'Rotina liberada na hora da compra'],
      mock: <ModLoja/>,
      icon: 'store',
    },
  ];

  return (
    <section id="plataforma" style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionEyebrow num="04" label="Plataforma" />
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          gap: 24, flexWrap: 'wrap', marginTop: 12,
        }}>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
            fontSize: isMobile ? 'clamp(28px, 7vw, 36px)' : 'clamp(32px, 3.5vw, 44px)',
            maxWidth: 720, lineHeight: 1.1,
          }}>
            Não é só treino.<br/>
            <span style={{ color: 'var(--tc-fg-3)' }}>É o financeiro do seu negócio.</span>
          </h2>
          <p style={{ margin: 0, fontSize: 14, color: 'var(--tc-fg-2)', lineHeight: 1.55, maxWidth: 360 }}>
            Cobrança, controle de acesso e loja trabalham juntos para você
            receber em dia e faturar mais com a mesma carteira de alunos.
          </p>
        </div>

        <div style={{ marginTop: isMobile ? 40 : 64, display: 'flex', flexDirection: 'column', gap: isMobile ? 40 : 72 }}>
          {mods.map((m, i) => {
            const flip = i % 2 === 1 && !isMobile;
            const text = (
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '5px 12px 5px 8px', borderRadius: 999,
                  background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)', marginBottom: 18,
                }}>
                  <span style={{ width: 24, height: 24, borderRadius: 7, background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <Icon name={m.icon} size={13} style={{ color: 'var(--tc-fg-0)' }}/>
                  </span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--tc-fg-1)' }}>{m.tag}</span>
                </div>
                <h3 style={{
                  margin: 0, fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
                  fontSize: isMobile ? 'clamp(24px, 6vw, 30px)' : 'clamp(26px, 2.6vw, 34px)', lineHeight: 1.12,
                }}>{m.kicker}</h3>
                <p style={{ margin: '16px 0 0', fontSize: 15, color: 'var(--tc-fg-2)', lineHeight: 1.6, maxWidth: 460 }}>{m.body}</p>
                <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {m.points.map((p, j) => (
                    <div key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'var(--tc-fg-1)' }}>
                      <span style={{ width: 18, height: 18, borderRadius: '50%', background: 'var(--tc-accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 1 }}>
                        <Icon name="check" size={11} style={{ color: 'var(--tc-accent-fg)' }}/>
                      </span>
                      <span style={{ lineHeight: 1.45 }}>{p}</span>
                    </div>
                  ))}
                </div>
              </div>
            );
            const visual = (
              <div style={{ flex: 1, minWidth: 0, width: '100%' }}>
                <div style={{
                  background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)',
                  borderRadius: 20, padding: isMobile ? 16 : 22,
                  boxShadow: '0 24px 60px rgba(0,0,0,0.35)',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 16 }}>
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--tc-bg-4)' }}/>
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--tc-bg-4)' }}/>
                    <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--tc-bg-4)' }}/>
                    <span style={{ marginLeft: 8, fontSize: 10, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono' }}>trainerconnect · {m.tag.toLowerCase()}</span>
                  </div>
                  {m.mock}
                </div>
              </div>
            );
            return (
              <div key={i} style={{
                display: 'flex', flexDirection: isMobile ? 'column' : 'row',
                gap: isMobile ? 28 : 56, alignItems: 'center',
              }}>
                {flip ? <>{visual}{text}</> : <>{text}{visual}</>}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.LandingModulos = LandingModulos;
window.ModFinanceiro = ModFinanceiro;
window.ModAcesso = ModAcesso;
window.ModLoja = ModLoja;