// Trainer Connect — Landing Page (parte 2: PainPoints, HowItWorks, Features)

// ====================================================================
// 3 · PAIN POINTS
// ====================================================================

function LandingPainPoints() {
  const isMobile = window.useMedia('(max-width: 768px)');
  const cards = [
    {
      icon: 'clock',
      title: 'Gasta horas montando treinos',
      body: 'Cada aluno = uma planilha que você reescreve do zero todo mês.',
    },
    {
      icon: 'send',
      title: 'Persegue pagamento no WhatsApp',
      body: '"Oi, lembrando da mensalidade" pela terceira vez nesse mês.',
    },
    {
      icon: 'trend',
      title: 'Não vê a evolução do aluno',
      body: 'Planilha não mostra progresso. O aluno não sente diferença.',
      iconTransform: 'rotate(180deg)', // trend down
    },
  ];

  return (
    <section style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionEyebrow num="01" label="O problema" />
        <h2 style={{
          margin: '12px 0 0',
          fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
          fontSize: isMobile ? 'clamp(28px, 7vw, 36px)' : 'clamp(32px, 3.5vw, 44px)',
          maxWidth: 760, lineHeight: 1.1,
        }}>
          Hoje você gasta mais tempo<br/>
          <span style={{ color: 'var(--tc-fg-3)' }}>administrando que treinando.</span>
        </h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: 12,
          marginTop: 40,
        }}>
          {cards.map((c, i) => (
            <div key={i} style={{
              background: 'var(--tc-bg-2)',
              border: '1px solid var(--tc-line-1)',
              borderRadius: 16,
              padding: isMobile ? 20 : 24,
              display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: isMobile ? 'auto' : 180,
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--tc-fg-0)',
                transform: c.iconTransform,
              }}>
                <Icon name={c.icon} size={18}/>
              </div>
              <div>
                <h3 style={{
                  margin: 0, fontFamily: 'Inter Tight', fontSize: 19, fontWeight: 600,
                  letterSpacing: '-0.02em', lineHeight: 1.25,
                }}>{c.title}</h3>
                <p style={{
                  margin: '8px 0 0', fontSize: 14, color: 'var(--tc-fg-2)', lineHeight: 1.55,
                }}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================================================================
// 4 · COMO FUNCIONA (3 passos)
// ====================================================================

function LandingHowItWorks() {
  const isMobile = window.useMedia('(max-width: 900px)');
  const steps = [
    {
      n: '01',
      title: 'Cadastre seus alunos',
      body: 'Convite por link. Aluno baixa o app, faz anamnese, está pronto.',
      mock: <StepMockConvite/>,
    },
    {
      n: '02',
      title: 'Monte rotinas reutilizáveis',
      body: 'Biblioteca de exercícios e treinos prontos. Atribua com um toque.',
      mock: <StepMockRotina/>,
    },
    {
      n: '03',
      title: 'Receba pagamento direto',
      body: 'Pix recorrente. Aluno em atraso é bloqueado automaticamente.',
      mock: <StepMockPagamento/>,
    },
  ];

  return (
    <section id="como-funciona" style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
      background: 'var(--tc-bg-1)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionEyebrow num="02" label="Como funciona" />
        <h2 style={{
          margin: '12px 0 0',
          fontFamily: 'Inter Tight', fontWeight: 600, letterSpacing: '-0.025em',
          fontSize: isMobile ? 'clamp(28px, 7vw, 36px)' : 'clamp(32px, 3.5vw, 44px)',
          maxWidth: 760, lineHeight: 1.1,
        }}>
          Do convite ao pagamento,<br/>
          <span style={{ color: 'var(--tc-fg-3)' }}>tudo em um lugar.</span>
        </h2>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
          gap: isMobile ? 24 : 16,
          marginTop: 48,
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: 'var(--tc-bg-2)',
              border: '1px solid var(--tc-line-1)',
              borderRadius: 20,
              padding: isMobile ? 20 : 24,
              display: 'flex', flexDirection: 'column', gap: 20,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <div style={{
                  fontFamily: 'JetBrains Mono', fontSize: 36, fontWeight: 600,
                  letterSpacing: '-0.04em', color: 'var(--tc-fg-3)',
                }}>{s.n}</div>
                <div style={{
                  width: 28, height: 28, borderRadius: 8,
                  background: 'var(--tc-bg-3)', border: '1px solid var(--tc-line-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--tc-fg-2)',
                }}>
                  <Icon name={i === 2 ? 'check' : 'arrowRight'} size={14}/>
                </div>
              </div>
              <div>
                <h3 style={{
                  margin: 0, fontFamily: 'Inter Tight', fontSize: 20, fontWeight: 600,
                  letterSpacing: '-0.02em', lineHeight: 1.2,
                }}>{s.title}</h3>
                <p style={{
                  margin: '8px 0 0', fontSize: 14, color: 'var(--tc-fg-2)', lineHeight: 1.55,
                }}>{s.body}</p>
              </div>
              <div style={{
                marginTop: 'auto',
                background: 'var(--tc-bg-1)',
                border: '1px solid var(--tc-line-1)',
                borderRadius: 14,
                padding: 14,
                minHeight: 180,
              }}>
                {s.mock}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepMockConvite() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, fontFamily: 'JetBrains Mono' }}>Convidar aluno</div>
      <div style={{
        padding: '12px 14px', background: 'var(--tc-bg-2)',
        border: '1px solid var(--tc-line-2)', borderRadius: 10,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <Icon name="link" size={14} style={{ color: 'var(--tc-fg-2)' }}/>
        <span style={{ flex: 1, fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--tc-fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          trainerconnect.fit/c/k8w2x
        </span>
        <div style={{
          padding: '4px 8px', borderRadius: 6, background: 'var(--tc-accent)', color: 'var(--tc-accent-fg)',
          fontSize: 10, fontWeight: 600,
        }}>Copiar</div>
      </div>
      <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', marginTop: 4 }}>Pendentes</div>
      {[
        { in: 'MR', name: 'Marcelo Rocha', stat: 'Aceitou · 2h' },
        { in: 'AS', name: 'Ana Salgado', stat: 'Aguardando', pend: true },
      ].map((a, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '8px 10px', borderRadius: 10,
          background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)',
        }}>
          <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--tc-bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 600 }}>{a.in}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 600 }}>{a.name}</div>
            <div style={{ fontSize: 10, color: a.pend ? 'var(--tc-warn)' : 'var(--tc-success)', fontFamily: 'JetBrains Mono' }}>{a.stat}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function StepMockRotina() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, fontFamily: 'JetBrains Mono' }}>Rotina · Hipertrofia ABC</div>
      {[
        { letter: 'A', title: 'Peito + Tríceps', exs: '8 ex.', active: true },
        { letter: 'B', title: 'Costas + Bíceps', exs: '7 ex.' },
        { letter: 'C', title: 'Pernas + Core', exs: '9 ex.' },
      ].map((d, i) => (
        <div key={i} style={{
          display: 'flex', alignItems: 'center', gap: 10,
          padding: '10px 12px', borderRadius: 10,
          background: d.active ? 'var(--tc-accent-soft)' : 'var(--tc-bg-2)',
          border: `1px solid ${d.active ? 'var(--tc-accent-line)' : 'var(--tc-line-1)'}`,
        }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: d.active ? 'var(--tc-accent)' : 'var(--tc-bg-3)',
            color: d.active ? 'var(--tc-accent-fg)' : 'var(--tc-fg-1)',
            fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 600,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{d.letter}</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 11, fontWeight: 600 }}>{d.title}</div>
            <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', fontFamily: 'JetBrains Mono' }}>{d.exs}</div>
          </div>
          <Icon name="chevronRight" size={12} style={{ color: 'var(--tc-fg-3)' }}/>
        </div>
      ))}
    </div>
  );
}

function StepMockPagamento() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
      <div style={{ fontSize: 10, color: 'var(--tc-fg-3)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, fontFamily: 'JetBrains Mono' }}>Receita do mês</div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
        <div style={{ fontFamily: 'JetBrains Mono', fontSize: 24, fontWeight: 600, letterSpacing: '-0.03em' }}>R$ 2.847</div>
        <div style={{ fontSize: 10, color: 'var(--tc-success)', fontFamily: 'JetBrains Mono', fontWeight: 600 }}>+12%</div>
      </div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 3, height: 36, marginTop: 2 }}>
        {[14, 20, 16, 24, 22, 28, 30, 26, 32, 30, 32, 34].map((h, i) => (
          <div key={i} style={{
            flex: 1, height: h,
            background: i >= 9 ? 'var(--tc-accent)' : 'var(--tc-bg-3)',
            borderRadius: '2px 2px 0 0',
          }}/>
        ))}
      </div>
      <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { in: 'LC', name: 'Lucas Castro', val: 'R$ 180', stat: 'Pago · 12/04', ok: true },
          { in: 'TV', name: 'Thais Valença', val: 'R$ 240', stat: 'Bloqueado · D+3', ok: false },
        ].map((p, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: 10,
            padding: '8px 10px', borderRadius: 10,
            background: 'var(--tc-bg-2)', border: '1px solid var(--tc-line-1)',
          }}>
            <div style={{ width: 26, height: 26, borderRadius: '50%', background: 'var(--tc-bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 9, fontWeight: 600 }}>{p.in}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 600 }}>{p.name}</div>
              <div style={{ fontSize: 10, color: p.ok ? 'var(--tc-success)' : 'var(--tc-danger)' }}>{p.stat}</div>
            </div>
            <div style={{ fontFamily: 'JetBrains Mono', fontSize: 11, fontWeight: 600 }}>{p.val}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====================================================================
// 5 · FEATURES (grid 4×2)
// ====================================================================

function LandingFeatures() {
  const isMobile = window.useMedia('(max-width: 700px)');
  const features = [
    { icon: 'clipboard',   title: 'Anamnese guiada',         body: 'Aluno preenche em 4 passos antes do primeiro treino.' },
    { icon: 'dumbbell',    title: 'Biblioteca de exercícios', body: 'Cadastre os seus ou use os públicos da plataforma.' },
    { icon: 'package',     title: 'Rotinas com periodização', body: 'Treino A–F com bi-set e tri-set. Reutilizável.' },
    { icon: 'trend',       title: 'Evolução do aluno',        body: 'KPIs, gráficos de carga e frequência por exercício.' },
    { icon: 'creditCard',  title: 'Cobrança recorrente Pix',  body: 'Configure uma vez, recebe todo mês na sua chave.' },
    { icon: 'store',       title: 'Loja de programas',        body: 'Venda treinos avulsos e desafios para alunos novos.' },
    { icon: 'user',        title: 'Modo aluno',               body: 'Veja exatamente o que o aluno vê no celular dele.' },
    { icon: 'shield',      title: 'Multi-tenant seguro',      body: 'Cada personal vê só seus alunos. LGPD.' },
  ];
  return (
    <section id="recursos" style={{
      padding: isMobile ? '40px 20px' : '96px 32px',
      borderTop: '1px solid var(--tc-line-1)',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SectionEyebrow num="03" label="Recursos" />
        <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: 660, lineHeight: 1.1,
          }}>
            Tudo que você precisa.<br/>
            <span style={{ color: 'var(--tc-fg-3)' }}>Nada que você não use.</span>
          </h2>
          <p style={{
            margin: 0, fontSize: 14, color: 'var(--tc-fg-2)', lineHeight: 1.55, maxWidth: 360,
          }}>
            8 ferramentas para cobrir o ciclo completo do personal autônomo:
            cadastro, treino, evolução e cobrança.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)',
          gap: 1, marginTop: 40,
          background: 'var(--tc-line-1)',
          border: '1px solid var(--tc-line-1)',
          borderRadius: 18, overflow: 'hidden',
        }}>
          {features.map((f, i) => (
            <div key={i} style={{
              background: 'var(--tc-bg-1)',
              padding: isMobile ? 20 : 24,
              display: 'flex', flexDirection: 'column', gap: 14,
              minHeight: isMobile ? 'auto' : 160,
              transition: 'background 160ms var(--tc-ease)',
            }} onMouseEnter={(e) => e.currentTarget.style.background = 'var(--tc-bg-2)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'var(--tc-bg-1)'}>
              <Icon name={f.icon} size={20} style={{ color: 'var(--tc-fg-0)' }}/>
              <div>
                <h3 style={{
                  margin: 0, fontFamily: 'Inter Tight', fontSize: 15, fontWeight: 600,
                  letterSpacing: '-0.015em',
                }}>{f.title}</h3>
                <p style={{
                  margin: '6px 0 0', fontSize: 13, color: 'var(--tc-fg-2)', lineHeight: 1.5,
                }}>{f.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ====================================================================
// HELPERS — section eyebrow
// ====================================================================

function SectionEyebrow({ num, label }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11, color: 'var(--tc-fg-3)', fontWeight: 600, letterSpacing: '0.04em' }}>{num}</span>
      <span style={{ width: 28, height: 1, background: 'var(--tc-line-2)' }}/>
      <span style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.12em', color: 'var(--tc-fg-2)', fontWeight: 500 }}>{label}</span>
    </div>
  );
}

window.LandingPainPoints = LandingPainPoints;
window.LandingHowItWorks = LandingHowItWorks;
window.LandingFeatures = LandingFeatures;
window.SectionEyebrow = SectionEyebrow;