/* Visimed — section components */

const Header = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState("");
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 8);
      const sections = ["problema", "solucoes", "validacao", "governanca", "roadmap"];
      let current = "";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el) {
          const r = el.getBoundingClientRect();
          if (r.top <= 120 && r.bottom > 120) current = id;
        }
      }
      setActive(current);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    ["O Problema", "problema"],
    ["Soluções", "solucoes"],
    ["Validação Clínica", "validacao"],
    ["Governança", "governanca"],
    ["Roadmap", "roadmap"],
  ];
  return (
    <header className={`header${scrolled ? " scrolled" : ""}`}>
      <div className="container">
        <nav className="nav">
          <a href="#top" aria-label="Visimed">
            <Logo />
          </a>
          <div className="links">
            {links.map(([label, id]) => (
              <a key={id} href={`#${id}`} className={active === id ? "active" : ""}>{label}</a>
            ))}
          </div>
          <a href="#contato" className="btn btn-primary" style={{ padding: "10px 16px", fontSize: 14 }}>
            Seja um Parceiro
          </a>
        </nav>
      </div>
    </header>
  );
};

const Hero = () => (
  <section className="hero" id="top">
    <div className="container">
      <div className="hero-grid">
        <div>
          <Reveal>
            <span className="eyebrow"><span className="dot" /> AI-Driven Diagnostics</span>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ marginTop: 22 }}>
              IA que apoia a
              <span className="accent">Decisão Médica</span>
            </h1>
          </Reveal>
          <Reveal delay={140}>
            <p className="lead" style={{ marginTop: 22 }}>
              Acelerando o diagnóstico clínico com precisão laboratorial.
              Unimos Visão Computacional e Processamento de Linguagem Natural
              para transformar dados em ação.
            </p>
          </Reveal>
          <Reveal delay={200}>
            <div className="ctas">
              <a href="#solucoes" className="btn btn-primary">
                Conhecer Soluções <Icon.ArrowRight />
              </a>
              <a href="#validacao" className="btn btn-ghost">
                <Icon.Play /> Ver evidências
              </a>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <div className="hero-visual">
            <div className="placeholder" />
            <span className="ph-label">[ neural-imaging.placeholder ]</span>
            <div className="hero-card">
              <div className="pulse"><Icon.Bolt /></div>
              <div>
                <div className="meta">Real-time Insight</div>
                <div className="body">Nódulo pulmonar detectado com <b>98.4%</b> de confiança via Visi-Ray.</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

const Problem = () => {
  const items = [
    { icon: <Icon.Users />, title: "Sobrecarga no Fluxo", body: "Volume massivo de exames de rotina compromete a atenção dos profissionais e reduz a qualidade da análise clínica em casos complexos." },
    { icon: <Icon.Clock />, title: "Atraso em Laudos", body: "Tempo de resposta crítico comprometido pela limitação de recursos humanos especializados, impactando diretamente a jornada do paciente." },
    { icon: <Icon.Network />, title: "Complexidade", body: "Dificuldade em centralizar dados clínicos relevantes e correlacionar informações dispersas em diferentes sistemas hospitalares." },
  ];
  return (
    <section className="section-soft" id="problema">
      <div className="container">
        <Reveal className="section-head">
          <h2>O Gargalo da Saúde Moderna</h2>
        </Reveal>
        <div className="grid grid-3">
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 80}>
              <div className="card">
                <div className="icon-tile">{it.icon}</div>
                <h3>{it.title}</h3>
                <p className="muted" style={{ marginTop: 12, marginBottom: 0, fontSize: 14.5 }}>{it.body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

const VisiRay = () => (
  <section id="solucoes">
    <div className="container">
      <div className="showcase-grid">
        <Reveal className="copy">
          <span className="tag">Deep Tech Solution</span>
          <h2>Visi-Ray</h2>
          <p className="lead">
            Nossa engine de Visão Computacional baseada em Redes Neurais
            Convolucionais (CNN). Identifica padrões patológicos em segundos.
          </p>
          <ul className="feature-list">
            <li><Icon.Check /> Triagem Automática de Prioridade</li>
            <li><Icon.Check /> Segmentação de Lesões em 3D</li>
            <li><Icon.Check /> Integração PACS/DICOM nativa</li>
          </ul>
        </Reveal>
        <Reveal className="visual" delay={120}>
          <div className="viz-ray" />
          <span className="ph-label" style={{ position: "absolute", left: 16, top: 14, fontFamily: "ui-monospace, monospace", fontSize: 11, color: "rgba(180, 220, 255, 0.6)", letterSpacing: "0.06em" }}>[ ct-scan.placeholder ]</span>
        </Reveal>
      </div>
    </div>
  </section>
);

const VisiCDS = () => (
  <section className="tight">
    <div className="container">
      <div className="showcase-grid reverse">
        <Reveal className="copy">
          <span className="tag">NLP & Decision Support</span>
          <h2>Visi-CDS</h2>
          <p className="lead">
            Clinical Decision Support. Processamos milhares de prontuários via
            Processamento de Linguagem Natural (NLP) para sugerir condutas
            baseadas em evidência.
          </p>
          <div className="callout">
            <div className="label">Validação Clínica</div>
            <p>Algoritmos treinados com mais de 5 milhões de registros médicos anônimos, validados por comitês de ética hospitalar.</p>
          </div>
        </Reveal>
        <Reveal className="visual" delay={120}>
          <div className="viz-cds" />
          <span className="ph-label" style={{ position: "absolute", left: 16, top: 14, fontFamily: "ui-monospace, monospace", fontSize: 11, color: "rgba(180, 220, 255, 0.6)", letterSpacing: "0.06em" }}>[ cds-engine.placeholder ]</span>
        </Reveal>
      </div>
    </div>
  </section>
);

const Architecture = () => (
  <section className="section-soft" id="governanca">
    <div className="container">
      <Reveal className="section-head">
        <h2>Arquitetura de Fluxo Inteligente</h2>
        <p className="lead">Transparência total do dado ao diagnóstico.</p>
      </Reveal>
      <Reveal>
        <div className="arch">
          <div className="step">
            <div className="step-icon"><Icon.Database /></div>
            <h3>DICOM / HL7</h3>
            <p>Captura segura de dados direto dos equipamentos.</p>
          </div>
          <div className="connector" />
          <div className="step featured">
            <div className="step-icon"><Icon.Hub /></div>
            <h3>Processamento IA</h3>
            <p>Engines Visi-Ray e Visi-CDS em ambiente Cloud Seguro.</p>
          </div>
          <div className="connector" />
          <div className="step">
            <div className="step-icon"><Icon.Doc /></div>
            <h3>Laudo & Alerta</h3>
            <p>Entrega de insights estruturados no dashboard médico.</p>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

const Evidence = () => (
  <section id="validacao">
    <div className="container">
      <div className="stats-grid">
        <Reveal>
          <h2>Ciência comprovada<br /><span className="text-primary">em cenário real.</span></h2>
          <div className="stats-row">
            <div className="stat">
              <span className="num"><Counter to={95} suffix="%+" /></span>
              <div className="lbl">Acurácia Geral</div>
            </div>
            <div className="stat">
              <span className="num"><Counter to={40} suffix="%" /></span>
              <div className="lbl">Redução de TAT</div>
            </div>
          </div>
          <p className="lead">
            No Hospital Municipal de Carapicuíba, a Visimed implementou a
            triagem inteligente de urgências, reduzindo o tempo de espera para
            casos críticos em quase metade do tempo histórico.
          </p>
          <div style={{ marginTop: 24 }}>
            <a href="#" className="btn btn-primary">Ver mais <Icon.ArrowRight /></a>
          </div>
        </Reveal>

        <Reveal delay={140}>
          <figure className="testimonial">
            <blockquote>“A tecnologia da Visimed não substitui o médico, ela nos dá ‘superpoderes’ de triagem, permitindo focar onde a complexidade é maior.”</blockquote>
            <div className="by">
              <div className="avatar">RM</div>
              <div>
                <div className="name">Dr. Ricardo Menezes</div>
                <div className="role">Diretor Clínico, Hospital Carapicuíba</div>
              </div>
            </div>
          </figure>
        </Reveal>
      </div>
    </div>
  </section>
);

const Roadmap = () => {
  const items = [
    { q: "2024 Q1–Q2", title: "Visi-Ray Neuro", body: "Lançamento da suíte focada em AVC e Traumas Cranianos com integração mobile." },
    { q: "2024 Q3–Q4", title: "Expansão Regional", body: "Implementação em 15 novos centros hospitalares no sudeste brasileiro." },
    { q: "2025 Q1", title: "Gen-AI Integration", body: "Uso de LLMs para sumarização automática de prontuários complexos multimodais." },
    { q: "2025 Q2+", title: "Global Scale", body: "Certificação FDA e expansão para mercados na América do Norte e Europa." },
  ];
  const [active, setActive] = React.useState(2);
  return (
    <section id="roadmap">
      <div className="container">
        <Reveal>
          <div className="roadmap-head">
            <div>
              <h2>Roadmap de Inovação</h2>
              <p className="lead" style={{ marginTop: 10 }}>Nossa jornada rumo à medicina 5.0.</p>
            </div>
            <span className="tag">Estado: em expansão</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <div className="roadmap-cards">
            {items.map((it, i) => (
              <div
                key={i}
                className={`rc${active === i ? " active" : ""}`}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}
              >
                <span className="quarter">{it.q}</span>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const Contact = () => {
  const [form, setForm] = React.useState({ nome: "", email: "", inst: "", msg: "" });
  const [errors, setErrors] = React.useState({});
  const [submitting, setSubmitting] = React.useState(false);
  const [done, setDone] = React.useState(false);

  const validate = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = "Informe seu nome.";
    if (!form.email.trim()) e.email = "Informe seu e-mail.";
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = "E-mail inválido.";
    if (!form.inst.trim()) e.inst = "Informe sua instituição.";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setTimeout(() => { setSubmitting(false); setDone(true); }, 900);
  };

  return (
    <section id="contato" className="tight">
      <div className="container">
        <Reveal>
          <div className="contact-card">
            <div className="contact-form">
              {!done ? (
                <form onSubmit={submit} noValidate>
                  <div className="form-row">
                    <div className={`field${errors.nome ? " error" : ""}`}>
                      <label>Nome Completo</label>
                      <input value={form.nome} placeholder="Dr. Nome Sobrenome"
                        onChange={(e) => setForm({ ...form, nome: e.target.value })} />
                      <div className="err">{errors.nome}</div>
                    </div>
                    <div className={`field${errors.email ? " error" : ""}`}>
                      <label>E-mail Corporativo</label>
                      <input type="email" value={form.email} placeholder="email@instituicao.com.br"
                        onChange={(e) => setForm({ ...form, email: e.target.value })} />
                      <div className="err">{errors.email}</div>
                    </div>
                  </div>
                  <div className={`field${errors.inst ? " error" : ""}`}>
                    <label>Instituição / Hospital</label>
                    <input value={form.inst} placeholder="Nome da sua organização"
                      onChange={(e) => setForm({ ...form, inst: e.target.value })} />
                    <div className="err">{errors.inst}</div>
                  </div>
                  <div className="field">
                    <label>Mensagem</label>
                    <textarea value={form.msg} placeholder="Como podemos ajudar sua operação?"
                      onChange={(e) => setForm({ ...form, msg: e.target.value })} />
                  </div>
                  <button type="submit" className="btn-submit" disabled={submitting}>
                    {submitting ? "Enviando..." : "Enviar Solicitação"}
                  </button>
                </form>
              ) : (
                <div className="success-state">
                  <div className="check"><Icon.CheckBold /></div>
                  <h3>Solicitação enviada</h3>
                  <p>Nossa equipe entrará em contato em até 24h.</p>
                </div>
              )}
            </div>
            <aside className="contact-cta">
              <div>
                <h2>Pronto para transformar sua clínica?</h2>
                <p>Agende uma demonstração técnica com nossos especialistas e veja como a IA Visimed se integra ao seu workflow atual.</p>
              </div>
              <div className="meta">
                <div><Icon.Mail /> contato@visimed.health</div>
                <div><Icon.Pin /> Hub de Inovação, São Paulo – SP</div>
              </div>
            </aside>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div>
          <Logo />
          <p>Inteligência Artificial aplicada ao diagnóstico por imagem com rigor científico e responsabilidade.</p>
        </div>
        <div>
          <h4>Empresa</h4>
          <ul>
            <li><a href="#">Sobre Nós</a></li>
            <li><a href="#">Carreiras</a></li>
            <li><a href="#contato">Contatos</a></li>
          </ul>
        </div>
        <div>
          <h4>Produto</h4>
          <ul>
            <li><a href="#solucoes">Soluções</a></li>
            <li><a href="#validacao">Ciência</a></li>
            <li><a href="#">FAQ</a></li>
          </ul>
        </div>
        <div>
          <h4>Jurídico</h4>
          <ul>
            <li><a href="#">Política de Privacidade</a></li>
            <li><a href="#">Termos de Uso</a></li>
            <li><a href="#">LGPD – Proteção de Dados</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© {new Date().getFullYear()} Visimed Tecnologia em Saúde. Todos os direitos reservados.</span>
        <div className="socials">
          <a href="#">LinkedIn</a>
          <a href="#">Twitter</a>
          <span className="footer-credit">
            Criado com <span className="footer-credit__heart" aria-hidden="true">♥</span> por <strong>ProsperSites</strong>
          </span>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Header, Hero, Problem, VisiRay, VisiCDS, Architecture, Evidence, Roadmap, Contact, Footer });