// Especialidades — 4 áreas de atuação Limine, com Cardiologia Estrutural detalhada.

const ESPECIALIDADES_DATA = [
  {
    id: "endovascular",
    name: "Endovascular",
    short: "Endovascular",
    desc: "Procedimentos endovasculares para tratamento de doenças vasculares periféricas e aórticas.",
  },
  {
    id: "coronaria",
    name: "Coronária",
    short: "Coronária",
    desc: "Materiais para hemodinâmica e cardiologia intervencionista — angioplastia e tratamento da doença coronariana.",
  },
  {
    id: "neurovascular",
    name: "Neurovascular",
    short: "Neurovascular",
    desc: "Tratamento endovascular de patologias cerebrovasculares — AVC isquêmico, aneurismas e malformações.",
  },
  {
    id: "estrutural",
    name: "Cardiologia Estrutural",
    short: "Estrutural",
    desc: "Tratamento percutâneo das doenças valvares e estruturais do coração — com a tecnologia mais avançada de válvulas e implantes.",
    sub: [
      {
        name: "Válvulas Transcateteres",
        desc: "Implantes valvares por cateter (TAVI/TAVR e similares) para tratamento minimamente invasivo de estenose e insuficiência valvar.",
      },
      {
        name: "Válvulas Cardíacas",
        desc: "Próteses valvares biológicas e mecânicas para substituição cirúrgica das válvulas aórtica, mitral, pulmonar e tricúspide.",
      },
    ],
  },
];

function Especialidades() {
  const [active, setActive] = React.useState("endovascular");
  const current = ESPECIALIDADES_DATA.find(e => e.id === active);

  return (
    <section
      id="especialidades"
      data-screen-label="Especialidades"
      className="bg-cream">
      <div className="container">
        <div style={{ maxWidth: 780, marginBottom: 56 }}>
          <div className="eyebrow">Nossas linhas</div>
          <h2 className="section-title">
            Especialidades médicas <span className="italic-accent">que atendemos.</span>
          </h2>
          <p className="section-lead">
            A Limine distribui produtos médicos de alta complexidade em quatro
            grandes linhas de atuação. Cada especialidade conta com equipe
            técnica dedicada e fabricantes parceiros de referência mundial.
          </p>
        </div>

        <div className="esp-tabs" style={{
          display: "flex",
          gap: 8,
          flexWrap: "wrap",
          marginBottom: 40,
          padding: "8px",
          background: "var(--c-surface)",
          borderRadius: 999,
          border: "1px solid var(--c-line)",
          width: "fit-content",
          maxWidth: "100%",
        }}>
          {ESPECIALIDADES_DATA.map(e => {
            const isActive = e.id === active;
            return (
              <button key={e.id}
                onClick={() => setActive(e.id)}
                style={{
                  padding: "12px 22px",
                  fontSize: 14,
                  fontWeight: 500,
                  borderRadius: 999,
                  border: "0",
                  cursor: "pointer",
                  background: isActive ? "var(--c-navy)" : "transparent",
                  color: isActive ? "var(--c-paper)" : "var(--c-ink)",
                  transition: "background .15s, color .15s",
                }}
                onMouseEnter={e2 => { if (!isActive) e2.currentTarget.style.background = "var(--c-blue-soft)"; }}
                onMouseLeave={e2 => { if (!isActive) e2.currentTarget.style.background = "transparent"; }}
              >{e.short}</button>
            );
          })}
        </div>

        <div className="esp-panel" style={{
          background: "var(--c-surface)",
          border: "1px solid var(--c-line)",
          borderRadius: "var(--radius-lg)",
          padding: "48px 48px",
        }}>
          <div className="esp-detail" style={{
            display: "grid",
            gridTemplateColumns: current.sub ? "1fr 1.4fr" : "1fr",
            gap: 60,
          }}>
            <div>
              <h3 style={{
                fontFamily: "var(--font-serif)",
                fontWeight: 400,
                fontSize: 40,
                letterSpacing: "-0.005em",
                color: "var(--c-navy)",
                marginBottom: 20,
                lineHeight: 1.08,
              }}>{current.name}</h3>
              <p style={{
                fontSize: 16,
                color: "var(--c-ink-2)",
                lineHeight: 1.6,
                maxWidth: 460,
              }}>{current.desc}</p>

              <div style={{
                marginTop: 32,
                padding: "20px 22px",
                background: "var(--c-blue-soft)",
                borderRadius: "var(--radius)",
                borderLeft: "3px solid var(--c-navy)",
              }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--c-navy)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 6 }}>
                  Materiais disponíveis
                </div>
                <div style={{ fontSize: 14, color: "var(--c-ink-2)" }}>
                  Em breve — catálogo de produtos por linha. Solicite
                  informações específicas pelo nosso comercial.
                </div>
              </div>
            </div>

            {current.sub && (
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--c-mute)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 20 }}>
                  Sub-especialidades
                </div>
                <div style={{ display: "grid", gap: 14 }}>
                  {current.sub.map(s => <SubSpecialty key={s.name} sub={s}/>)}
                </div>
              </div>
            )}
          </div>
        </div>

        <div style={{
          marginTop: 32,
          padding: "26px 32px",
          background: "var(--c-paper)",
          borderRadius: "var(--radius-lg)",
          border: "1px solid var(--c-line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          gap: 24, flexWrap: "wrap",
        }}>
          <div>
            <div style={{ fontSize: 17, fontWeight: 500, color: "var(--c-navy)", marginBottom: 4 }}>
              Precisa de informação técnica sobre um produto?
            </div>
            <div style={{ fontSize: 14, color: "var(--c-ink-2)" }}>
              Nosso time comercial responde com fichas técnicas, disponibilidade e suporte.
            </div>
          </div>
          <a href="#contato" className="btn btn-primary">
            Falar com o comercial <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function SubSpecialty({ sub }) {
  return (
    <div style={{
      padding: "20px 22px",
      border: "1px solid var(--c-line)",
      borderRadius: "var(--radius)",
      background: "var(--c-cream)",
    }}>
      <div style={{
        display: "flex", alignItems: "baseline", gap: 12,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999,
          background: "var(--c-navy)",
          flexShrink: 0,
          marginTop: 8,
        }}/>
        <div style={{ flex: 1 }}>
          <h4 style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 400,
            fontSize: 19,
            color: "var(--c-navy)",
            marginBottom: 4,
          }}>{sub.name}</h4>
          <p style={{ fontSize: 14, color: "var(--c-ink-2)", lineHeight: 1.5 }}>{sub.desc}</p>
        </div>
      </div>
    </div>
  );
}

// "Estrutura" — operations and patient care
function Estrutura() {
  return (
    <section
      id="estrutura"
      data-screen-label="Estrutura"
      style={{ background: "var(--c-paper)" }}>
      <div className="container">
        <div className="section-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.1fr 1fr",
          gap: 80,
          alignItems: "center",
        }}>
          <div>
            <div className="eyebrow">Como atendemos</div>
            <h2 className="section-title">
              Da nossa sede <span className="italic-accent">até a sala de cirurgia.</span>
            </h2>
            <p className="section-lead" style={{ marginBottom: 36 }}>
              Nossa operação foi desenhada para o que importa: o paciente
              receber o material certo, no momento certo, com a equipe certa
              ao lado. Por isso, mantemos estrutura própria de armazenagem em
              Manaus, logística adaptada à região amazônica e suporte técnico
              local.
            </p>

            <ul style={{
              listStyle: "none", padding: 0, margin: 0,
              display: "grid", gap: 14,
            }}>
              {[
                "Armazém climatizado próprio em Manaus, base logística do Norte",
                "Rastreabilidade de cada material por lote e validade",
                "Equipe de instrumentação treinada pelas fabricantes",
                "Plantão técnico para urgências e emergências",
                "Atendimento próximo a cada hospital cliente",
              ].map(item => (
                <li key={item} style={{
                  display: "grid", gridTemplateColumns: "24px 1fr", gap: 14,
                  alignItems: "baseline",
                  fontSize: 15,
                  color: "var(--c-ink)",
                }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 999,
                    background: "var(--c-sky)",
                    display: "inline-block",
                    marginTop: 8,
                  }}/>
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="estrutura-cards" style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 16,
          }}>
            {[
              { title: "Armazém climatizado",  text: "Estrutura própria em Manaus, base logística do Norte." },
              { title: "Rastreabilidade total", text: "Cada material controlado por lote e validade." },
              { title: "Equipe técnica",        text: "Instrumentação treinada pelos próprios fabricantes." },
              { title: "Plantão de emergência", text: "Equipe disponível para urgências e casos críticos." },
            ].map(c => (
              <div key={c.title} style={{
                padding: "26px 24px",
                background: "var(--c-cream)",
                borderRadius: "var(--radius-lg)",
                border: "1px solid var(--c-line)",
              }}>
                <div style={{
                  width: 30, height: 30,
                  borderRadius: 8,
                  background: "var(--c-navy)",
                  marginBottom: 18,
                  display: "grid", placeItems: "center",
                }}>
                  <span style={{ color: "var(--c-paper)", fontSize: 14, fontWeight: 600 }}>✓</span>
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 400, marginBottom: 6 }}>{c.title}</h3>
                <p style={{ fontSize: 14, color: "var(--c-ink-2)", lineHeight: 1.55 }}>{c.text}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Especialidades, Estrutura, ESPECIALIDADES_DATA });