// Contact section + footer.

function Contato() {
  const [sent, setSent] = React.useState(false);
  return (
    <section
      id="contato"
      data-screen-label="Contato"
      className="bg-cream">
      <div className="container">
        <div className="section-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1.2fr",
          gap: 80,
          alignItems: "start",
        }}>
          <div>
            <div className="eyebrow">Fale com a Biolife</div>
            <h2 className="section-title">
              Estamos prontos para <span className="italic-accent">atender você.</span>
            </h2>
            <p className="section-lead" style={{ marginBottom: 40 }}>
              Solicite uma proposta comercial, peça informações técnicas ou
              entre em contato com nossas sedes. Nosso time responde em até
              24h úteis.
            </p>

            <div className="contact-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }}>
              <ContactCard label="E-mail comercial" value="comercial.pa@biolife.med.br"/>
              <ContactCard label="Telefone" value="(91) 3223-3998"/>
              <ContactCard label="Atendimento" value="Seg–Sex, 8h às 18h"/>
              <ContactCard label="Instagram" value="@biolifeprodutosmedicosbr" href="https://www.instagram.com/biolifeprodutosmedicosbr"/>
            </div>

            <div className="addr-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: 22 }}>
              <AddressCard
                city="Belém — PA"
                lines={["Travessa Dom Romualdo de Seixas, 1560", "Loja 07 · Bairro Umarizal", "Belém — Pará"]}
              />
              <AddressCard
                city="Maceió — AL"
                lines={["Avenida da Paz, 1388", "Condomínio Avenue Center · Centro", "Maceió — Alagoas"]}
              />
            </div>
          </div>

          <form
            onSubmit={e => { e.preventDefault(); setSent(true); }}
            className="contact-form"
            style={{
              background: "#fff",
              padding: 36,
              borderRadius: "var(--radius-lg)",
              border: "1px solid var(--c-line)",
            }}>
            {sent ? (
              <div style={{ display: "grid", placeItems: "center", minHeight: 440, textAlign: "center" }}>
                <div>
                  <div style={{
                    width: 64, height: 64,
                    borderRadius: "50%",
                    background: "var(--c-blue-soft)",
                    color: "var(--c-blue-deep)",
                    display: "grid", placeItems: "center",
                    margin: "0 auto 22px",
                    fontSize: 32,
                    fontFamily: "var(--font-serif)",
                  }}>✓</div>
                  <h3 style={{ fontSize: 26, marginBottom: 10 }}>Mensagem enviada</h3>
                  <p style={{ color: "var(--c-ink-2)", maxWidth: 320 }}>
                    Recebemos suas informações. Nossa equipe entrará em contato
                    em breve.
                  </p>
                </div>
              </div>
            ) : (
              <>
                <h3 style={{ fontSize: 24, marginBottom: 24, fontFamily: "var(--font-serif)", fontWeight: 500 }}>
                  Envie uma mensagem
                </h3>
                <div style={{ display: "grid", gap: 18 }}>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                    <Field label="Nome" required/>
                    <Field label="Instituição"/>
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 }}>
                    <Field label="E-mail" type="email" required/>
                    <Field label="Telefone" type="tel"/>
                  </div>
                  <Field label="Estado" type="select" options={[
                    "Selecione...",
                    "Rondônia", "Roraima", "Acre", "Amazonas", "Pará", "Amapá",
                    "Piauí", "Pernambuco", "Alagoas", "Sergipe",
                    "Outro",
                  ]}/>
                  <Field label="Mensagem" type="textarea" placeholder="Conte um pouco sobre sua necessidade — produto, quantidade, prazo..."/>
                </div>
                <button type="submit" className="btn btn-primary" style={{
                  width: "100%", marginTop: 26, justifyContent: "center", padding: "16px",
                }}>
                  Enviar mensagem <span className="arrow">→</span>
                </button>
                <p style={{ fontSize: 12, color: "var(--c-mute)", textAlign: "center", marginTop: 14 }}>
                  Seus dados estão protegidos conforme a LGPD.
                </p>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function ContactCard({ label, value, href }) {
  const inner = (
    <>
      <div style={{
        fontSize: 12, fontWeight: 600,
        color: "var(--c-mute)",
        letterSpacing: "0.06em",
        textTransform: "uppercase",
        marginBottom: 6,
      }}>{label}</div>
      <div style={{
        fontFamily: "var(--font-serif)",
        fontSize: 17,
        color: "var(--c-navy)",
      }}>{value}</div>
    </>
  );
  const baseStyle = {
    display: "block",
    padding: "18px 20px",
    background: "#fff",
    borderRadius: "var(--radius)",
    border: "1px solid var(--c-line)",
  };
  if (href) {
    return (
      <a href={href} target="_blank" rel="noopener noreferrer" style={baseStyle}>
        {inner}
      </a>
    );
  }
  return <div style={baseStyle}>{inner}</div>;
}

function AddressCard({ city, lines }) {
  return (
    <div style={{
      padding: "22px 22px",
      background: "#fff",
      borderRadius: "var(--radius)",
      border: "1px solid var(--c-line)",
    }}>
      <div style={{
        fontSize: 12, fontWeight: 600,
        color: "var(--c-blue-deep)",
        letterSpacing: "0.08em",
        textTransform: "uppercase",
        marginBottom: 10,
      }}>{city}</div>
      <div style={{
        fontFamily: "var(--font-serif)",
        fontSize: 15,
        lineHeight: 1.5,
        color: "var(--c-navy)",
      }}>
        {lines.map((l, i) => <div key={i}>{l}</div>)}
      </div>
    </div>
  );
}

function Field({ label, type = "text", required, placeholder, options }) {
  const style = {
    width: "100%",
    padding: "12px 14px",
    fontSize: 14,
    fontFamily: "var(--font-sans)",
    border: "1px solid var(--c-line)",
    borderRadius: "var(--radius)",
    background: "#fafbfc",
    color: "var(--c-ink)",
    outline: "none",
    transition: "border-color .15s, background .15s",
  };
  const labelEl = (
    <span style={{ display: "block", fontSize: 12, fontWeight: 600, color: "var(--c-ink-2)", marginBottom: 6 }}>
      {label} {required && <span style={{ color: "var(--c-blue-deep)" }}>*</span>}
    </span>
  );
  const onFocus = e => { e.target.style.borderColor = "var(--c-blue-deep)"; e.target.style.background = "#fff"; };
  const onBlur  = e => { e.target.style.borderColor = "var(--c-line)"; e.target.style.background = "#fafbfc"; };
  return (
    <label style={{ display: "block" }}>
      {labelEl}
      {type === "textarea" ? (
        <textarea rows={4} placeholder={placeholder} style={{ ...style, resize: "vertical", minHeight: 110 }}
          onFocus={onFocus} onBlur={onBlur}/>
      ) : type === "select" ? (
        <select style={style} onFocus={onFocus} onBlur={onBlur}>
          {options.map(o => <option key={o}>{o}</option>)}
        </select>
      ) : (
        <input type={type} required={required} placeholder={placeholder} style={style}
          onFocus={onFocus} onBlur={onBlur}/>
      )}
    </label>
  );
}

function Footer() {
  return (
    <footer style={{
      background: "var(--c-navy)",
      color: "rgba(255,255,255,0.75)",
      padding: "70px 0 30px",
    }}>
      <div className="container">
        <div className="footer-grid" style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 60,
          marginBottom: 56,
        }}>
          <div>
            <img src="assets/logo-biolife.png" alt="Biolife"
              style={{ height: 90, marginBottom: 18, filter: "brightness(0) invert(1)" }}/>
            <p style={{ fontSize: 13, lineHeight: 1.6, maxWidth: 320, color: "rgba(255,255,255,0.55)" }}>
              Biolife Produtos Médicos LTDA. Distribuidora de produtos médicos
              para o Norte e Nordeste do Brasil.
            </p>
          </div>
          <FooterCol title="Empresa" links={[
            { label: "A empresa", href: "#empresa" },
            { label: "Especialidades", href: "#especialidades" },
            { label: "Atuação", href: "#atuacao" },
            { label: "Estrutura", href: "#estrutura" },
          ]}/>
          <FooterCol title="Sedes" links={[
            { label: "Belém — PA", href: "#contato" },
            { label: "Maceió — AL", href: "#contato" },
          ]}/>
          <FooterCol title="Contato" links={[
            { label: "comercial.pa@biolife.med.br", href: "mailto:comercial.pa@biolife.med.br" },
            { label: "(91) 3223-3998", href: "tel:+559132233998" },
            { label: "Instagram", href: "https://www.instagram.com/biolifeprodutosmedicosbr" },
            { label: "Seg–Sex, 8h–18h" },
          ]}/>
        </div>

        <div className="footer-bottom" style={{
          paddingTop: 28,
          borderTop: "1px solid rgba(255,255,255,0.12)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontSize: 12, color: "rgba(255,255,255,0.45)",
          flexWrap: "wrap", gap: 16,
        }}>
          <div>&copy; Biolife Produtos Médicos LTDA. — Todos os direitos reservados.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" style={{ color: "inherit" }}>Política de privacidade</a>
            <a href="#" style={{ color: "inherit" }}>LGPD</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontSize: 12, fontWeight: 700,
        color: "#fff",
        letterSpacing: "0.1em",
        textTransform: "uppercase",
        marginBottom: 18,
      }}>{title}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        {links.map(l => {
          const isString = typeof l === "string";
          const label = isString ? l : l.label;
          const href = isString ? "#" : (l.href || "#");
          const external = href && (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("tel:"));
          return (
            <a key={label} href={href}
              target={external && href.startsWith("http") ? "_blank" : undefined}
              rel={external && href.startsWith("http") ? "noopener noreferrer" : undefined}
              style={{ fontSize: 13, color: "rgba(255,255,255,0.7)" }}>{label}</a>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { Contato, Footer });