// Sections 5–8: O que o Kit Faz, Dashboard showcase, Stats, Cálculo

function WhatKitDoes() {
  return (
    <section className="section" id="kit">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 760 }}>
          <div className="pill"><span className="dot" />O QUE O KIT FAZ</div>
          <h2 className="h-1">200 prompts. 10 contextos da sua semana.</h2>
          <p className="lede">Cada prompt foi testado em rotina médica brasileira.</p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 16,
          marginTop: 56,
        }} className="grid-kit">
          {CATS.map((c, i) => (
            <div key={c.n} className={`card fade-up d${(i % 4) + 1}`} style={{
              padding: '24px 26px',
              background: `linear-gradient(155deg, ${c.tint}14 0%, ${c.tint}06 60%, rgba(255,255,255,0.01) 100%)`,
              border: `1px solid ${c.tint}30`,
              position: 'relative',
              overflow: 'hidden',
            }}>
              <div style={{
                position: 'absolute', inset: 0,
                background: `radial-gradient(110% 70% at 100% 0%, ${c.tint}1A, transparent 55%)`,
                pointerEvents: 'none',
              }} />
              <div style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 9,
                  background: `${c.tint}20`,
                  border: `1px solid ${c.tint}40`,
                  display: 'grid', placeItems: 'center',
                  color: c.tint,
                  flex: 'none',
                }}>
                  <CatIcon idx={c.icon} size={20} color={c.tint} />
                </div>
                <span className="mono" style={{ fontSize: 10.5, color: 'var(--fg-mute)', letterSpacing: '0.12em' }}>{c.n} / 10</span>
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 600, margin: '18px 0 8px', letterSpacing: '-0.02em', position: 'relative' }}>{c.name}</h3>
              <p style={{ color: 'var(--fg-dim)', fontSize: 14, margin: '0 0 16px', lineHeight: 1.55, position: 'relative' }}>{c.body}</p>
              <div style={{
                position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                paddingTop: 14, borderTop: '1px solid var(--line)',
              }}>
                <span style={{ fontSize: 14, fontWeight: 600, color: '#fff' }}>20 <span style={{ fontSize: 12, color: 'var(--fg-mute)', fontWeight: 400 }}>prompts</span></span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)', letterSpacing: '0.08em' }}>{c.time.toUpperCase()} MÉDIA</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .grid-kit { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function DashboardShowcase() {
  const steps = [
    { n: '01', h: 'Acesse', b: 'Login automático com o e-mail da compra. Sem senha pra criar.' },
    { n: '02', h: 'Escolha a categoria', b: '10 áreas. Anamnese, evolução, laudo, documentos, educação, mensagens, pesquisa, decisão, redes sociais, gestão.' },
    { n: '03', h: 'Copie', b: 'Clique no prompt. Já está copiado.' },
    { n: '04', h: 'Cole onde quiser', b: 'ChatGPT, Claude, Gemini. Funciona em qualquer um.' },
  ];

  // Tiny per-step illustration block — abstract UI snippets, not stock illustrations
  const Illu = ({ idx }) => {
    const base = {
      width: '100%', height: 168, borderRadius: 12,
      background: 'linear-gradient(160deg, rgba(255,91,44,0.08), rgba(255,91,44,0.02))',
      border: '1px solid var(--line)',
      display: 'grid', placeItems: 'center',
      padding: 18,
      position: 'relative', overflow: 'hidden',
    };
    if (idx === 0) {
      return (
        <div style={base}>
          <div style={{
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid var(--line-2)',
            borderRadius: 10, padding: '12px 14px',
            width: '100%', maxWidth: 220,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div className="mono" style={{ fontSize: 9.5, letterSpacing: '0.1em', color: 'var(--fg-mute)' }}>E-MAIL DA COMPRA</div>
            <div style={{ background: 'rgba(255,255,255,0.05)', height: 28, borderRadius: 6, display: 'flex', alignItems: 'center', padding: '0 10px', fontSize: 11.5, color: 'var(--fg-dim)', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}>
              dr.voce@hospital.com.br
            </div>
            <div style={{ background: 'var(--coral)', height: 28, borderRadius: 6, display: 'grid', placeItems: 'center', color: '#fff', fontSize: 12, fontWeight: 600 }}>Entrar</div>
          </div>
        </div>
      );
    }
    if (idx === 1) {
      return (
        <div style={base}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 6, width: '100%', maxWidth: 220 }}>
            {CATS.slice(0, 6).map(c => (
              <div key={c.n} style={{
                background: `linear-gradient(155deg, ${c.tint}1F, ${c.tint}08)`,
                border: `1px solid ${c.tint}40`,
                aspectRatio: '1 / 1',
                borderRadius: 7,
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 4,
                padding: '0 4px',
              }}>
                <CatIcon idx={c.icon} size={13} color={c.tint} />
                <span className="mono" style={{ fontSize: 9, color: 'rgba(245,242,238,0.6)', letterSpacing: '0.04em' }}>{c.n}</span>
              </div>
            ))}
          </div>
        </div>
      );
    }
    if (idx === 2) {
      return (
        <div style={base}>
          <div style={{
            background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-2)',
            borderRadius: 10, padding: '11px 12px',
            width: '100%', maxWidth: 220,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.08em', color: 'var(--fg-mute)' }}>PROMPT 03 · SOAP</div>
            <div style={{
              fontSize: 10.5, color: 'var(--fg-dim)', lineHeight: 1.4,
              display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
              overflow: 'hidden',
            }}>
              Aja como médico assistente. Estruture a evolução em SOAP…
            </div>
            <div style={{
              alignSelf: 'flex-start',
              display: 'inline-flex', alignItems: 'center', gap: 5,
              padding: '4px 8px', borderRadius: 6, background: 'var(--coral)',
              fontSize: 10, fontWeight: 600, color: '#fff',
            }}>
              <Icon.Check size={10} color="#fff" /> Copiado
            </div>
          </div>
        </div>
      );
    }
    return (
      <div style={base}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 6, width: '100%', maxWidth: 220, alignItems: 'stretch' }}>
          {['ChatGPT', 'Claude', 'Gemini'].map((n) => (
            <div key={n} style={{
              padding: '8px 12px', borderRadius: 7,
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid var(--line-2)',
              fontSize: 11.5, color: 'var(--fg-dim)', fontWeight: 500,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <span>{n}</span>
              <span className="mono" style={{ fontSize: 9, color: 'var(--fg-mute)' }}>↗</span>
            </div>
          ))}
        </div>
      </div>
    );
  };

  return (
    <section className="section" id="dashboard">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 760 }}>
          <div className="pill"><span className="dot" />O DASHBOARD</div>
          <h2 className="h-1">Você não recebe um PDF. Recebe acesso a um Dashboard.</h2>
          <p className="lede">Login com seu e-mail da compra. Busca por categoria, copia com 1 clique.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 56,
        }} className="grid-steps">
          {steps.map((s, i) => (
            <div key={s.n} className={`card fade-up d${i+1}`}>
              <Illu idx={i} />
              <div style={{ marginTop: 18 }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--coral)', letterSpacing: '0.14em' }}>PASSO {s.n}</div>
                <h4 style={{ fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em', margin: '6px 0 8px' }}>{s.h}</h4>
                <p style={{ color: 'var(--fg-dim)', fontSize: 14, margin: 0, lineHeight: 1.5 }}>{s.b}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .grid-steps { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 560px) { .grid-steps { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function StatsBlock() {
  const stats = [
    { big: '200', label: 'PROMPTS PRONTOS', sub: 'Pra começar hoje' },
    { big: '10',  label: 'CATEGORIAS',      sub: 'Da rotina médica' },
    { big: '7',   label: 'DIAS',            sub: 'De garantia incondicional' },
  ];
  return (
    <section className="section">
      <div className="container">
        <h2 className="h-1 fade-up" style={{ textAlign: 'center', maxWidth: '20ch', margin: '0 auto' }}>
          Junte-se aos médicos que pararam de levar trabalho pra casa.
        </h2>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 1,
          background: 'var(--line)', borderRadius: 18, overflow: 'hidden',
          marginTop: 64,
          border: '1px solid var(--line)',
        }} className="grid-stats">
          {stats.map((s, i) => (
            <div key={i} className={`fade-up d${i+1}`} style={{
              background: 'var(--bg)',
              padding: 'clamp(36px, 5vw, 60px) clamp(20px, 3vw, 36px)',
              textAlign: 'center',
            }}>
              <div style={{
                fontSize: 'clamp(64px, 8vw, 112px)',
                fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 1,
                background: 'linear-gradient(180deg, #FF7A4D, #FF5B2C)',
                WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              }}>{s.big}</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--fg)', marginTop: 14 }}>{s.label}</div>
              <div style={{ color: 'var(--fg-dim)', fontSize: 14, marginTop: 6 }}>{s.sub}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .grid-stats { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function CalcBlock() {
  const cards = [
    { big: 'R$ 800', label: 'SUA HORA HOJE', body: 'Se sua consulta sai R$400 em 30 minutos, sua hora vale R$800.' },
    { big: '10h',    label: 'POR SEMANA EM BUROCRACIA', body: 'Pesquisa Medscape: 65% dos médicos brasileiros gastam mais de 10 horas por semana com prontuário.' },
    { big: 'R$ 96.000', label: 'QUE VOCÊ PERDEU EM 2025', body: '2 horas por dia × 5 dias × 48 semanas × R$200/hora. É o que custou ter feito tudo manual.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 760 }}>
          <div className="pill"><span className="dot" />A CONTA QUE VOCÊ EVITA FAZER</div>
          <h2 className="h-1">A medicina te paga por hora. O ChatGPT, não.</h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginTop: 56,
        }} className="grid-3">
          {cards.map((c, i) => (
            <div key={i} className={`card fade-up d${i+1}`} style={{ padding: '32px 28px' }}>
              <div style={{
                fontSize: 'clamp(36px, 4vw, 52px)',
                fontWeight: 700, letterSpacing: '-0.04em', lineHeight: 1,
                color: 'var(--coral)',
              }}>{c.big}</div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--fg)', marginTop: 16 }}>{c.label}</div>
              <p style={{ color: 'var(--fg-dim)', fontSize: 14.5, lineHeight: 1.55, marginTop: 12, marginBottom: 0 }}>{c.body}</p>
            </div>
          ))}
        </div>

        <div className="coral-block fade-up" style={{
          marginTop: 24, padding: '32px 36px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
          flexWrap: 'wrap',
        }}>
          <div style={{ maxWidth: '60ch', fontSize: 'clamp(18px, 1.7vw, 22px)', fontWeight: 500, letterSpacing: '-0.015em' }}>
            O Kit custa R$147. Você ganha o Kit de volta antes de terminar o primeiro plantão depois da compra.
          </div>
          <a href="https://pay.kiwify.com.br/iIkOFg8" target="_blank" rel="noopener noreferrer" className="btn lg" style={{ background: '#0A0908', color: '#fff' }}>
            Recuperar tempo por R$147
            <Icon.ArrowRight />
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .grid-3 { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

window.WhatKitDoes = WhatKitDoes;
window.DashboardShowcase = DashboardShowcase;
window.StatsBlock = StatsBlock;
window.CalcBlock = CalcBlock;