// Contact section + footer for Limine.

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 Limine</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 nossa sede em Manaus. Nosso time responde
              em até 24h úteis.
            </p>

            <div className="contact-cards" style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 22 }}>
              <ContactCard label="E-mail" value="limine@limine.med.br" href="mailto:limine@limine.med.br"/>
              <ContactCard label="Telefone" value="(92) 3584-1229" href="tel:+559235841229"/>
              <ContactCard
                label="Atendimento"
                value={<>
                  <div>Seg–Qui · 8h–18h</div>
                  <div>Sex · 8h–17h</div>
                  <div style={{ fontSize: 11, color: "var(--c-mute)", marginTop: 4, letterSpacing: "0.04em" }}>Horário de Manaus</div>
                </>}/>
            </div>

            <div style={{ marginTop: 22 }}>
              <AddressCard
                city="Manaus — AM"
                lines={["Rua Rio Içá, 37", "Bairro Vieiralves", "Manaus — Amazonas"]}
              />
            </div>
          </div>

          <form
            onSubmit={e => { e.preventDefault(); setSent(true); }}
            className="contact-form"
            style={{
              background: "var(--c-surface)",
              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-navy)",
                    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: 400 }}>
                  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...",
                    "Amazonas", "Pará", "Roraima", "Amapá", "Acre", "Rondônia",
                    "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.08em",
        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: "var(--c-surface)",
    borderRadius: "var(--radius)",
    border: "1px solid var(--c-line)",
  };
  if (href) {
    return <a href={href} style={baseStyle}>{inner}</a>;
  }
  return <div style={baseStyle}>{inner}</div>;
}

function AddressCard({ city, lines }) {
  return (
    <div style={{
      padding: "22px 22px",
      background: "var(--c-surface)",
      borderRadius: "var(--radius)",
      border: "1px solid var(--c-line)",
    }}>
      <div style={{
        fontSize: 12, fontWeight: 600,
        color: "var(--c-blue)",
        letterSpacing: "0.10em",
        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: "var(--c-surface-2)",
    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)" }}>*</span>}
    </span>
  );
  const onFocus = e => { e.target.style.borderColor = "var(--c-blue)"; e.target.style.background = "var(--c-surface)"; };
  const onBlur  = e => { e.target.style.borderColor = "var(--c-line)"; e.target.style.background = "var(--c-surface-2)"; };
  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-footer)",
      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>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 18 }}>
              <img src="assets/logo-limine-mark-dark.svg" alt="" style={{ height: 60 }}/>
              <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{
                  fontFamily: "var(--font-serif)",
                  fontSize: 22,
                  color: "#fff",
                  letterSpacing: "0.18em",
                  lineHeight: 1,
                }}>LIMINE</span>
                <span style={{
                  fontSize: 9,
                  fontWeight: 600,
                  color: "rgba(255,255,255,0.7)",
                  letterSpacing: "0.22em",
                  lineHeight: 1,
                }}>PRODUTOS MÉDICOS</span>
              </div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.6, maxWidth: 320, color: "rgba(255,255,255,0.55)" }}>
              Limine Produtos Médicos LTDA. Distribuidora de produtos médicos para a região Norte 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="Sede" links={[
            { label: "Manaus — AM", href: "#contato" },
            { label: "Rua Rio Içá, 37" },
            { label: "Vieiralves" },
          ]}/>
          <FooterCol title="Contato" links={[
            { label: "limine@limine.med.br", href: "mailto:limine@limine.med.br" },
            { label: "(92) 3584-1229", href: "tel:+559235841229" },
            { label: "Seg–Qui · 8h–18h" },
            { label: "Sex · 8h–17h" },
          ]}/>
        </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; Limine Produtos Médicos LTDA. — Todos os direitos reservados.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="politica-de-privacidade.html" style={{ color: "inherit" }}>Política de privacidade</a>
            <a href="termos-lgpd.html" style={{ color: "inherit" }}>Termos & LGPD</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div style={{
        fontSize: 12, fontWeight: 700,
        color: "#fff",
        letterSpacing: "0.16em",
        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 || "#");
          return (
            <a key={label} href={href} style={{ fontSize: 13, color: "rgba(255,255,255,0.7)" }}>{label}</a>
          );
        })}
      </div>
    </div>
  );
}

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