// PSM Expert — Página de Contato (somente canais diretos)
function Channel({ href, target, iconBg, iconColor, icon, title, value, hint, primary }) {
  const inner = (
    <React.Fragment>
      <span style={{ ...ct.chIcon, background: iconBg }}>
        <Icon name={icon} size={24} color={iconColor} />
      </span>
      <span style={ct.chBody}>
        <b style={ct.chT}>{title}</b>
        <span style={ct.chD}>{value}</span>
        {hint ? <span style={ct.chHint}>{hint}</span> : null}
      </span>
      {href ? <Icon name="arrow-up-right" size={18} color="#9AA6B2" /> : null}
    </React.Fragment>
  );
  const style = { ...ct.card, ...(primary ? ct.cardPrimary : {}) };
  const hoverIn = (e) => { e.currentTarget.style.transform = "translateY(-3px)"; e.currentTarget.style.boxShadow = "0 18px 40px rgba(7,28,54,.12)"; e.currentTarget.style.borderColor = "#F5A623"; };
  const hoverOut = (e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.boxShadow = "0 1px 0 rgba(7,28,54,.04)"; e.currentTarget.style.borderColor = primary ? "#CFE9D8" : "#E8ECF1"; };
  if (!href) return <div style={style}>{inner}</div>;
  return (
    <a style={style} href={href} target={target} rel={target ? "noopener" : undefined}
       onMouseEnter={hoverIn} onMouseLeave={hoverOut}>{inner}</a>
  );
}

function ContatoPage() {
  return (
    <React.Fragment>
      <Header current="contato" />
      <PageHero
        kicker="Contato · Atendimento imediato"
        title="Fale com um Especialista"
        subtitle="Conte seu desafio técnico ou regulatório pelo canal de sua preferência. Respondemos rápido — proposta técnica detalhada em até 48 horas, sem compromisso." />

      <section style={ct.wrap}>
        <div style={ct.inner}>
          <div style={ct.head}>
            <h2 style={ct.h2}>Canais diretos</h2>
            <div style={ct.rule} />
            <p style={ct.lead}>
              Escolha como prefere falar com a nossa equipe técnica. Atendemos
              empresas de todo o Brasil, presencial ou remotamente.
            </p>
          </div>

          <div style={ct.grid} className="psm-contact-grid">
            <Channel
              href="https://wa.me/5511934083465"
              iconBg="#E7F8EE" iconColor="#1FB85A" icon="message-circle"
              title="WhatsApp" value="(11) 93408-3465"
              hint="Resposta imediata em horário comercial" primary />
            <Channel
              href="mailto:contato@psmexpert.net"
              iconBg="#FEF4E2" iconColor="#F08C00" icon="mail"
              title="E-mail" value="contato@psmexpert.net"
              hint="Ideal para escopos e documentação técnica" />
            <Channel
              href="https://www.linkedin.com/company/psmex/" target="_blank"
              iconBg="#EEF2F7" iconColor="#17304D" icon="linkedin"
              title="LinkedIn" value="linkedin.com/company/psmex"
              hint="Acompanhe nossos conteúdos técnicos" />
            <Channel
              iconBg="#EEF2F7" iconColor="#17304D" icon="map-pin"
              title="Atendimento" value="Todo o Brasil"
              hint="Presencial e remoto · proposta em até 48h" />
          </div>

          <div style={ct.assure}>
            <Icon name="shield-check" size={20} color="#1A7A4A" />
            <span><b>Atendimento rápido e personalizado.</b> Sem compromisso · proposta técnica detalhada · resposta em até 48 horas.</span>
          </div>
        </div>
      </section>
      <Footer />
    </React.Fragment>
  );
}

const ct = {
  wrap: { background: "#F4F6F8" },
  inner: { maxWidth: 920, margin: "0 auto", padding: "64px 32px 84px" },
  head: { textAlign: "center", maxWidth: 620, margin: "0 auto 40px" },
  h2: { fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 36, color: "#071C36", margin: "0 0 14px", textTransform: "uppercase", letterSpacing: ".01em" },
  rule: { width: 56, height: 3, background: "#F5A623", borderRadius: 2, margin: "0 auto 20px" },
  lead: { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 16, lineHeight: 1.65, color: "#6B7785", margin: 0 },

  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 },
  card: { display: "flex", alignItems: "center", gap: 16, padding: "22px 22px", background: "#fff", border: "1px solid #E8ECF1", borderRadius: 14, boxShadow: "0 1px 0 rgba(7,28,54,.04)", textDecoration: "none", transition: "transform .16s, box-shadow .16s, border-color .16s" },
  cardPrimary: { borderColor: "#CFE9D8", background: "linear-gradient(180deg,#FaFefb 0%,#fff 60%)" },
  chIcon: { flex: "none", width: 52, height: 52, borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center" },
  chBody: { flex: 1, minWidth: 0 },
  chT: { display: "block", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 21, color: "#071C36", textTransform: "uppercase", letterSpacing: ".01em", lineHeight: 1.1 },
  chD: { display: "block", fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, color: "#17304D", marginTop: 3 },
  chHint: { display: "block", fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 12.5, color: "#6B7785", marginTop: 6, lineHeight: 1.4 },

  assure: { display: "flex", alignItems: "center", justifyContent: "center", gap: 11, marginTop: 28, padding: "16px 22px", background: "#E6F2EC", borderRadius: 12, fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, color: "#1A7A4A", textAlign: "center", lineHeight: 1.5 },
};

ReactDOM.createRoot(document.getElementById("root")).render(<ContatoPage />);