// Landing page sections — Sou Coluna brand
const { useState, useEffect, useRef } = React;

function BrandMark() {
  return (
    <div className="brand">
      <div className="brand-mark"><I.Logo /></div>
      <div className="brand-name">Sou<span>Analysis</span></div>
    </div>
  );
}
window.BrandMark = BrandMark;

function Nav({ onLogin, onSignup, onAccess }) {
  return (
    <nav className="nav">
      <div className="container nav-row">
        <div onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
          <BrandMark/>
        </div>
        <div className="nav-links">
          <a href="#funciona">Como funciona</a>
          <a href="#vantagens">Vantagens</a>
          <a href="#sobre">Quem somos</a>
        </div>
        <div className="nav-cta">
          <button className="btn btn-ghost" onClick={onSignup}>Cadastro</button>
          <button className="btn btn-primary" onClick={onLogin}>Login</button>
        </div>
      </div>
    </nav>
  );
}

function Hero({ onAccess }) {
  return (
    <section className="hero">
      <div className="container hero-grid">
        <div>
          <div className="pill">
            <span className="pill-dot"/> Auditoria clínico-comercial automatizada
          </div>
          <h1 className="hero-title">
            Cada consulta vira <em>inteligência clínica</em> em minutos.
          </h1>
          <p className="hero-sub">
            Grave a consulta, envie o áudio e receba um relatório completo no WhatsApp — com notas, pontos de melhoria e plano de ação baseados nos Mandamentos SouAnalysis.
          </p>
          <div className="hero-actions">
            <button className="btn btn-primary btn-lg" onClick={onAccess}>
              Acessar o Sistema <I.ArrowRight/>
            </button>
            <a className="btn btn-ghost btn-lg" href="#funciona">
              Ver como funciona
            </a>
          </div>
          <div className="hero-stats">
            <div className="hero-stat">
              <span className="num">15</span>
              <span className="lbl">Mandamentos</span>
            </div>
            <div className="hero-stat">
              <span className="num">8</span>
              <span className="lbl">Etapas analisadas</span>
            </div>
            <div className="hero-stat">
              <span className="num">80+</span>
              <span className="lbl">Critérios clínicos</span>
            </div>
          </div>
        </div>
        <div className="hero-visual">
          <div className="orb-rings">
            <div className="ring ring-3"><div className="ring-tick"/></div>
            <div className="ring ring-1"><div className="ring-tick" style={{background:'var(--cyan-bright)', boxShadow:'0 0 12px var(--cyan-bright)'}}/></div>
            <div className="ring ring-2"><div className="ring-tick" style={{background:'var(--lime)', boxShadow:'0 0 12px var(--lime)', left:'auto', right:0}}/></div>
          </div>
          <div className="orb-wrap"><ParticleOrb/></div>
          <div className="hero-card card-tl">
            <div className="mini-meter">
              <div className="ring-mini"><span>8.5</span></div>
              <div className="lbl-grp">
                <div className="t1">Score da consulta</div>
                <div className="t2">Excelente · padrão SouAnalysis</div>
              </div>
            </div>
          </div>
          <div className="hero-card card-br">
            <div style={{display:'flex', alignItems:'center', gap:12}}>
              <div style={{width:32, height:32, borderRadius:8, background:'rgba(34,211,238,0.15)', border:'1px solid rgba(34,211,238,0.3)', display:'grid', placeItems:'center', color:'var(--cyan-bright)'}}>
                <I.Wave s={16}/>
              </div>
              <div>
                <div style={{fontSize:11, color:'var(--ink-dim)', textTransform:'uppercase', letterSpacing:'0.06em'}}>Transcrevendo</div>
                <div style={{fontFamily:'JetBrains Mono', fontSize:12, color:'var(--mint)'}}>00:42:18 / 47min</div>
              </div>
              <WaveBars count={10}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { ico: <I.Mic/>, n: '01', title: 'Grave a consulta', body: 'O profissional realiza o atendimento normalmente e grava o áudio — pelo celular, gravador ou qualquer dispositivo.', tags: ['MP3','WAV','M4A','até 60min'] },
    { ico: <I.Upload/>, n: '02', title: 'Envie no sistema', body: 'Acesse a plataforma, preencha os dados do doutor e paciente, e arraste o áudio. Suportamos arquivos de até 100MB.', tags: ['Drag & drop','100MB','Seguro'] },
    { ico: <I.Cpu/>, n: '03', title: 'IA analisa cada etapa', body: 'O sistema transcreve, identifica cada uma das 8 etapas da consulta e avalia os Mandamentos SouAnalysis em 80+ critérios.', tags: ['8 etapas','15 mandamentos','80+ critérios'] },
    { ico: <I.Doc/>, n: '04', title: 'Relatório no WhatsApp', body: 'Um PDF profissional é gerado e enviado direto no WhatsApp com nota final, pontos fortes e plano de ação.', tags: ['PDF','WhatsApp','Plano de ação'] },
  ];
  return (
    <section id="funciona">
      <div className="container">
        <div className="reveal">
          <div className="section-label">Como funciona</div>
          <h2 className="section-title">Do áudio ao relatório completo em <em style={{fontStyle:'normal', background:'linear-gradient(135deg, var(--mint), var(--cyan-bright))', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent'}}>4 etapas</em></h2>
          <p className="section-sub">Um pipeline clínico automatizado que transforma cada gravação em conhecimento estruturado, padronizado e acionável.</p>
        </div>
        <div className="flow">
          {steps.map((s, i) => (
            <div className="flow-step reveal" key={i} style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="step-num">
                <span>ETAPA</span>
                <span>{s.n}</span>
              </div>
              <div className="step-icon">{s.ico}</div>
              <h3 className="step-h">{s.title}</h3>
              <p className="step-p">{s.body}</p>
              <div className="step-tags">
                {s.tags.map(t => <span className="step-tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Vantagens() {
  const feats = [
    { ico: <I.Clock/>, h: 'Economia de tempo', p: 'O que levaria horas de análise manual roda em minutos. Foque no atendimento — o sistema cuida da avaliação.', meta: 'Análise em ~3min' },
    { ico: <I.Bars/>, h: 'Padrão consistente', p: 'Todas as avaliações seguem o mesmo checklist e os mesmos critérios. Sem variação humana, sem subjetividade.', meta: '100% reproduzível', cls: 'cyan' },
    { ico: <I.Pulse/>, h: 'Evolução contínua', p: 'Acompanhe a progressão consulta a consulta. Identifique padrões e áreas que precisam de desenvolvimento.', meta: 'Dashboards históricos', cls: 'lime' },
    { ico: <I.Users/>, h: 'Gestão da equipe', p: 'Visibilidade completa do desempenho de cada profissional. Decisões baseadas em dados reais.', meta: 'Multi-clínica' },
    { ico: <I.Shield/>, h: 'Análise imparcial', p: 'Critérios validados por especialistas em coluna, dados criptografados em trânsito e em repouso. LGPD-ready.', meta: 'Auditoria completa', cls: 'cyan' },
    { ico: <I.Spark/>, h: 'Plano de ação real', p: 'Não é só nota: cada relatório vem com scripts modelo e prioridades ordenadas por impacto clínico.', meta: 'Acionável', cls: 'lime' },
  ];
  return (
    <section id="vantagens">
      <div className="container">
        <div className="reveal">
          <div className="section-label">Vantagens</div>
          <h2 className="section-title">Por que clínicas escolhem o SouAnalysis</h2>
          <p className="section-sub">Padronize, identifique gaps e evolua o atendimento da sua clínica com inteligência clínica em tempo real.</p>
        </div>
        <div className="features reveal">
          {feats.map((f, i) => (
            <div className={`feature ${f.cls || ''}`} key={i}>
              <div className="feature-icon">{f.ico}</div>
              <h3>{f.h}</h3>
              <p>{f.p}</p>
              <div className="feature-meta">{f.meta}</div>
            </div>
          ))}
        </div>

        <div className="showcase reveal">
          <div className="showcase-grid">
            <div>
              <div className="section-label" style={{marginBottom:16}}>Relatório inteligente</div>
              <h3 style={{fontFamily:'Space Grotesk', fontSize:32, fontWeight:600, margin:'0 0 16px', letterSpacing:'-0.02em'}}>
                Cada detalhe da consulta, traduzido em ação clínica.
              </h3>
              <p style={{color:'var(--ink-mid)', lineHeight:1.6, fontSize:16, margin:'0 0 28px'}}>
                Score por etapa, aderência aos Mandamentos SouAnalysis, oportunidades com scripts modelo e prioridades ordenadas por impacto. Tudo em um PDF que chega direto no WhatsApp.
              </p>
              <div style={{display:'grid', gap:14}}>
                {[
                  ['Síntese executiva da consulta', 'mint'],
                  ['Pontos fortes identificados', 'cyan'],
                  ['Oportunidades com scripts modelo', 'lime'],
                  ['Aderência aos mandamentos', 'mint'],
                ].map(([t, c]) => (
                  <div key={t} style={{display:'flex', alignItems:'center', gap:12, fontSize:14, color:'var(--ink-mid)'}}>
                    <div style={{
                      width:20, height:20, borderRadius:6,
                      background: c === 'mint' ? 'rgba(16,185,129,0.15)' : c === 'cyan' ? 'rgba(6,182,212,0.15)' : 'rgba(163,230,53,0.15)',
                      border: `1px solid ${c === 'mint' ? 'rgba(16,185,129,0.4)' : c === 'cyan' ? 'rgba(6,182,212,0.4)' : 'rgba(163,230,53,0.4)'}`,
                      display:'grid', placeItems:'center',
                      color: c === 'mint' ? 'var(--mint)' : c === 'cyan' ? 'var(--cyan-bright)' : 'var(--lime)'
                    }}><I.Check/></div>
                    {t}
                  </div>
                ))}
              </div>
            </div>
            <div className="report-mock">
              <div className="report-head">
                <div className="dots"><span/><span/><span/></div>
                <div className="name">relatorio_souanalysis.pdf</div>
                <div style={{fontFamily:'JetBrains Mono', fontSize:10, color:'var(--mint)'}}>● ENVIADO</div>
              </div>
              <div className="report-body">
                <div className="report-row">
                  <div className="report-meta">
                    <div className="label">Profissional</div>
                    <div className="v">Dra. Aline Rocha</div>
                    <div style={{height:14}}/>
                    <div className="label">Paciente · Fase</div>
                    <div className="v">M.O. · Avaliação inicial</div>
                  </div>
                  <div className="report-score">
                    <div className="big">8.5</div>
                    <div className="lbl">Score · 10</div>
                  </div>
                </div>
                <div className="report-bars">
                  <div className="report-bar">
                    <div className="lab"><strong>Recepção</strong> · acolhimento + rapport</div>
                    <div className="pct">95%</div>
                    <div className="track"><div className="fill" style={{width:'95%'}}/></div>
                  </div>
                  <div className="report-bar">
                    <div className="lab"><strong>Sondagem</strong> · queixa + histórico</div>
                    <div className="pct">88%</div>
                    <div className="track"><div className="fill" style={{width:'88%'}}/></div>
                  </div>
                  <div className="report-bar warn">
                    <div className="lab"><strong>Argumentação</strong> · valor + Efeito Vida</div>
                    <div className="pct">62%</div>
                    <div className="track"><div className="fill" style={{width:'62%'}}/></div>
                  </div>
                  <div className="report-bar">
                    <div className="lab"><strong>Metodologia</strong> · clareza técnica</div>
                    <div className="pct">90%</div>
                    <div className="track"><div className="fill" style={{width:'90%'}}/></div>
                  </div>
                  <div className="report-bar bad">
                    <div className="lab"><strong>Fechamento</strong> · CTA + 4 Sim's</div>
                    <div className="pct">48%</div>
                    <div className="track"><div className="fill" style={{width:'48%'}}/></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Sobre() {
  return (
    <section id="sobre">
      <div className="container">
        <div className="reveal">
          <div className="section-label">Quem somos</div>
        </div>
        <div className="about reveal">
          <div>
            <h2 className="section-title">A tecnologia por trás da excelência clínica</h2>
            <p className="section-sub">
              A <strong style={{color:'var(--ink)'}}>SouAnalysis</strong> nasceu da necessidade de padronizar e elevar a qualidade das avaliações em clínicas especializadas em coluna vertebral. Combinamos transcrição de áudio de última geração com critérios clínico-comerciais rigorosos para que <em style={{fontStyle:'normal', color:'var(--mint)'}}>nenhum ponto de melhoria passe despercebido</em>.
            </p>
            <div className="about-points">
              <div className="about-pt">
                <div className="about-pt-ico"><I.Shield/></div>
                <div>
                  <h4>Confiança</h4>
                  <p>Dados criptografados, análises imparciais e critérios validados por especialistas seniores.</p>
                </div>
              </div>
              <div className="about-pt">
                <div className="about-pt-ico"><I.Smile/></div>
                <div>
                  <h4>Excelência</h4>
                  <p>Comprometidos em elevar o padrão de atendimento de cada clínica que confia no nosso sistema.</p>
                </div>
              </div>
              <div className="about-pt">
                <div className="about-pt-ico"><I.Spark/></div>
                <div>
                  <h4>Inovação</h4>
                  <p>Tecnologia de transcrição e análise automatizada de última geração, em constante evolução.</p>
                </div>
              </div>
            </div>
          </div>
          <div className="about-stats">
            <div className="about-stat"><div className="v">15</div><div className="l">Mandamentos avaliados</div></div>
            <div className="about-stat"><div className="v">80+</div><div className="l">Critérios de análise</div></div>
            <div className="about-stat"><div className="v">8</div><div className="l">Etapas da consulta</div></div>
            <div className="about-stat"><div className="v">100%</div><div className="l">Automatizado</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA({ onAccess }) {
  return (
    <section style={{padding:0}}>
      <div className="container">
        <div className="cta-wrap reveal">
          <h2>Pronto para padronizar suas avaliações?</h2>
          <p>Comece agora a transformar áudios de consultas em relatórios profissionais — direto no WhatsApp da sua clínica.</p>
          <div className="cta-row">
            <button className="btn btn-primary btn-lg" onClick={onAccess}>
              Acessar o Sistema <I.ArrowRight/>
            </button>
            <a className="btn btn-ghost btn-lg" href="#funciona">Ver demonstração</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container row">
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <div className="brand-mark" style={{width:28, height:28, borderRadius:8}}><I.Logo size={16}/></div>
          <span>© 2026 SouAnalysis · Sistema inteligente de avaliação de consultas</span>
        </div>
        <div className="links">
          <a href="#">Privacidade</a>
          <a href="#">Termos</a>
          <a href="#">Contato</a>
        </div>
      </div>
    </footer>
  );
}

window.Nav = Nav; window.Hero = Hero; window.HowItWorks = HowItWorks;
window.Vantagens = Vantagens; window.Sobre = Sobre; window.CTA = CTA; window.Footer = Footer;