// Especialidades — 5 áreas de atuação Biolife, com Cirurgia de Coluna detalhada.

const ESPECIALIDADES_DATA = [
  {
    id: "coluna",
    name: "Cirurgia de Coluna",
    short: "Coluna",
    desc: "Soluções completas para a coluna vertebral — da endoscopia minimamente invasiva à cirurgia convencional, em todos os segmentos.",
    sub: [
      {
        name: "Endoscopia de Coluna",
        desc: "Técnica minimamente invasiva com acesso por pequenas incisões.",
        items: [
          { name: "Monoportal", desc: "Acesso por uma única porta de trabalho." },
          { name: "Biportal",   desc: "Acesso por duas portas independentes, ampliando a visualização." },
        ],
      },
      {
        name: "Cirurgia da Coluna Cervical",
        desc: "Procedimentos para o segmento cervical, anteriores e posteriores.",
      },
      {
        name: "Cirurgia da Coluna Torácica e Lombar",
        desc: "Procedimentos para os segmentos torácico e lombar.",
        items: [
          { name: "Minimamente Invasiva", desc: "Técnicas MIS — menor trauma, recuperação mais rápida." },
          { name: "Convencional",          desc: "Abordagem aberta para casos complexos e correções extensas." },
        ],
      },
    ],
  },
  {
    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: "eletrofisiologia",
    name: "Eletrofisiologia",
    short: "Eletrofisiologia",
    desc: "Diagnóstico e tratamento de arritmias cardíacas — ablação, mapeamento e dispositivos.",
  },
];

function Especialidades() {
  const [active, setActive] = React.useState("coluna");
  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 Biolife distribui produtos médicos de alta complexidade em cinco
            grandes linhas de atuação. Cada especialidade conta com equipe
            técnica dedicada e fabricantes parceiros de referência mundial.
          </p>
        </div>

        {/* Tab bar with the 5 specialties */}
        <div className="esp-tabs" style={{
          display: "flex",
          gap: 8,
          flexWrap: "wrap",
          marginBottom: 40,
          padding: "8px",
          background: "#fff",
          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-blue-deep)" : "transparent",
                  color: isActive ? "#fff" : "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>

        {/* Detail panel */}
        <div className="esp-panel" style={{
          background: "#fff",
          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.015em",
                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-blue-deep)",
              }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: "var(--c-blue-deep)", letterSpacing: "0.06em", 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,
        marginBottom: sub.items ? 10 : 0,
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999,
          background: "var(--c-blue-deep)",
          flexShrink: 0,
          marginTop: 8,
        }}/>
        <div style={{ flex: 1 }}>
          <h4 style={{
            fontFamily: "var(--font-serif)",
            fontWeight: 500,
            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>

      {sub.items && (
        <div style={{
          marginTop: 14,
          marginLeft: 18,
          paddingLeft: 16,
          borderLeft: "1px solid var(--c-line)",
          display: "grid", gap: 10,
        }}>
          {sub.items.map(it => (
            <div key={it.name}>
              <div style={{
                fontSize: 14,
                fontWeight: 600,
                color: "var(--c-navy)",
                marginBottom: 2,
              }}>{it.name}</div>
              <div style={{
                fontSize: 13,
                color: "var(--c-ink-2)",
                lineHeight: 1.5,
              }}>{it.desc}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// "Estrutura" — how we serve, focused on patient care priority
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. Para isso, mantemos estrutura própria de armazenagem,
              logística e suporte técnico.
            </p>

            <ul style={{
              listStyle: "none", padding: 0, margin: 0,
              display: "grid", gap: 14,
            }}>
              {[
                "Armazéns climatizados nas três sedes próprias",
                "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-blue)",
                    display: "inline-block",
                    marginTop: 8,
                  }}/>
                  {item}
                </li>
              ))}
            </ul>
          </div>

          <div className="estrutura-cards" style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 16,
          }}>
            {[
              { title: "Armazéns climatizados",  text: "Estrutura própria de armazenagem em três sedes." },
              { 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-blue-deep)",
                  marginBottom: 18,
                  display: "grid", placeItems: "center",
                }}>
                  <span style={{ color: "#fff", fontSize: 14, fontWeight: 600 }}>✓</span>
                </div>
                <h3 style={{ fontSize: 18, fontWeight: 500, 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 });