/* Maitha Tech — "Fale conosco" + RD Station embed, and the site footer. */

const RD_FORM_ID = "form-contato-fd023f7afdfeff704fb7";
const RD_TOKEN = "UA-148000340-1";
const RD_SRC = "https://d335luupugsy2.cloudfront.net/js/rdstation-forms/stable/rdstation-forms.min.js";

/* Where to send the visitor after a successful "Fale conosco" submission.
   In production this resolves to the route /agradecimento-formulario. */
const CONTACT_REDIRECT = "/agradecimento-formulario";

/* Theme the RD-injected markup to match the Maitha Tech design system.
   Targets the [data-rd-form] wrapper so it themes ANY RD form id. */
const RD_STYLE = `
[data-rd-form] { color-scheme: dark; font-family: var(--font-sans); color: var(--text-body); background: transparent !important; }
[data-rd-form] form,
[data-rd-form] > div,
[data-rd-form] .rd-form,
[data-rd-form] .bricks-form,
[data-rd-form] .bricks-container,
[data-rd-form] .bricks-form__fieldset,
[data-rd-form] .bricks-form__field,
[data-rd-form] .bricks-form__confirmation,
[data-rd-form] .bricks--section,
[data-rd-form] .rd-section,
[data-rd-form] [class*="bricks--section"],
[data-rd-form] .bricks-form__submit { background: transparent !important; box-shadow: none !important; border: 0 !important; }
[data-rd-form] .select2-choice,
[data-rd-form] .select2-container .select2-choice,
[data-rd-form] .select2-drop,
[data-rd-form] .select2-dropdown { background: var(--mt-near-black) !important; color: var(--text-strong) !important; border-color: var(--border-strong) !important; }
[data-rd-form] .bricks-form__fieldset, [data-rd-form] .bricks-form__field { margin-bottom: 16px !important; }
[data-rd-form] label { font-family: var(--font-sans) !important; font-size: var(--fs-sub) !important; font-weight: 500 !important; color: var(--text-muted) !important; letter-spacing: 0.01em !important; text-transform: none !important; margin-bottom: 7px !important; display: block !important; }
[data-rd-form] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
[data-rd-form] select,
[data-rd-form] textarea {
  width: 100% !important; box-sizing: border-box !important;
  background: var(--mt-near-black) !important; color: var(--text-strong) !important;
  border: 1px solid var(--border-strong) !important; border-radius: var(--radius-md) !important;
  padding: 0.8rem 1rem !important; font-family: var(--font-sans) !important; font-size: var(--fs-body) !important;
  line-height: 1.5 !important; height: auto !important; min-height: 3rem !important;
  box-shadow: none !important; outline: none !important; transition: border-color var(--dur-base), box-shadow var(--dur-base) !important;
}
[data-rd-form] select { line-height: 1.5 !important; height: auto !important; min-height: 3rem !important; }
[data-rd-form] input:focus, [data-rd-form] select:focus, [data-rd-form] textarea:focus {
  border-color: var(--mt-white) !important; box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
[data-rd-form] input::placeholder, [data-rd-form] textarea::placeholder { color: var(--text-faint) !important; opacity: 1 !important; }
[data-rd-form] input[type="checkbox"], [data-rd-form] input[type="radio"] { accent-color: var(--accent) !important; width: auto !important; }
[data-rd-form] a { color: var(--accent) !important; text-decoration: underline !important; }
[data-rd-form] [class*="error"], [data-rd-form] [class*="validation"] { color: var(--mt-orange) !important; }
[data-rd-form] button, [data-rd-form] input[type="submit"], [data-rd-form] .bricks-form__submit button {
  background: var(--mt-white) !important; color: var(--mt-black) !important; border: 0 !important;
  border-radius: var(--radius-pill) !important; padding: 0.9rem 1.7rem !important;
  font-family: var(--font-sans) !important; font-size: var(--fs-h6) !important; font-weight: 600 !important;
  letter-spacing: 0.01em !important; cursor: pointer !important; width: auto !important; min-width: 0 !important;
  transition: transform .15s var(--ease-out), opacity .15s var(--ease-out) !important;
}
[data-rd-form] button:hover, [data-rd-form] .bricks-form__submit button:hover { opacity: 0.9 !important; }
[data-rd-form] button:active, [data-rd-form] .bricks-form__submit button:active { transform: scale(0.97) !important; }
`;

function injectRdStyle() {
  if (document.getElementById("mt-rd-style")) return;
  const el = document.createElement("style");
  el.id = "mt-rd-style";
  el.textContent = RD_STYLE;
  document.head.appendChild(el);
}

/* Embeds an RD Station form. Pass `formId` (the page-specific form id) and
   optional `token`; defaults to the shared "Fale conosco" contact form.
   Loads the RD script once, then createForm() into the container. */
function RDStationForm({ formId = RD_FORM_ID, token = RD_TOKEN, redirectTo = null } = {}) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    injectRdStyle();
    let cancelled = false;
    let observer = null;
    /* On a successful submission RD injects a confirmation block into the
       container. When redirectTo is set (contact form only), watch for it
       and send the visitor to the thank-you page. */
    const watchForSuccess = () => {
      if (!redirectTo || !ref.current) return;
      observer = new MutationObserver(() => {
        const done = ref.current && ref.current.querySelector(
          '.bricks-form__confirmation, [class*="confirmation"], [class*="conversion"]'
        );
        if (done) { observer.disconnect(); window.location.href = redirectTo; }
      });
      observer.observe(ref.current, { childList: true, subtree: true });
    };
    const init = () => {
      if (cancelled || !ref.current || ref.current.dataset.rdInit === "1") return;
      if (!window.RDStationForms) return;
      try {
        new window.RDStationForms(formId, token).createForm();
        ref.current.dataset.rdInit = "1";
        watchForSuccess();
      } catch (e) { /* will retry on next poll tick */ }
    };
    if (window.RDStationForms) { init(); return () => { cancelled = true; if (observer) observer.disconnect(); }; }
    let s = document.querySelector(`script[src="${RD_SRC}"]`);
    if (!s) { s = document.createElement("script"); s.src = RD_SRC; s.async = true; document.body.appendChild(s); }
    s.addEventListener("load", init);
    const poll = setInterval(() => { if (window.RDStationForms) { clearInterval(poll); init(); } }, 250);
    const stop = setTimeout(() => clearInterval(poll), 10000);
    return () => { cancelled = true; clearInterval(poll); clearTimeout(stop); if (observer) observer.disconnect(); if (s) s.removeEventListener("load", init); };
  }, [formId, token, redirectTo]);
  return <div role="main" id={formId} data-rd-form ref={ref}></div>;
}

function Contact() {
  return (
    <Section id="fale-conosco">
      <div className="mt-contact-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "start" }}>
        <Reveal>
          <Eyebrow marker="dot">Fale conosco</Eyebrow>
          <h2 style={{ fontSize: "clamp(2.2rem, 4.6vw, 3.7rem)", lineHeight: 1.05, letterSpacing: "var(--ls-display)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", margin: "22px 0 0", textWrap: "balance" }}>
            Nós queremos ajudar a construir o futuro do seu <Accent scribble="s2" tone="orange">negócio</Accent>
          </h2>
          <p style={{ marginTop: 24, color: "var(--text-body)", fontSize: "var(--fs-body-lg)", lineHeight: 1.6, maxWidth: 440 }}>
            Para nós, toda conversa é uma oportunidade de entender como podemos ajudar uma empresa a dar seu próximo passo. Deixe suas informações e nossos especialistas farão contato em seguida.
          </p>
        </Reveal>

        <Reveal delay={120} style={{ position: "relative" }}>
          <div style={{ position: "relative", zIndex: 1, background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: "var(--radius-xl)", padding: "clamp(24px, 3vw, 38px)" }}>
            <h3 style={{ margin: 0, fontSize: "var(--fs-h3)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h3)" }}>Insira suas informações</h3>
            <p style={{ margin: "8px 0 24px", color: "var(--text-faint)", fontSize: "var(--fs-sub)" }}>Prometemos não enviar e-mails indesejados ;)</p>
            <RDStationForm redirectTo={CONTACT_REDIRECT} />
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* —— Footer ————————————————————————————————————— */
const SOCIAL = {
  instagram: "M12 2.2c3.2 0 3.6 0 4.8.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.2.07 1.6.07 4.8s0 3.6-.07 4.8c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.2.06-1.6.07-4.8.07s-3.6 0-4.8-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.8c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.52.01-4.76.07-.9.04-1.39.2-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.12.32-.28.81-.32 1.71C3.4 8.48 3.4 8.85 3.4 12s0 3.52.06 4.76c.04.9.2 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.12.81.28 1.71.32 1.24.06 1.61.07 4.76.07s3.52-.01 4.76-.07c.9-.04 1.39-.2 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.12-.32.28-.81.32-1.71.06-1.24.07-1.61.07-4.76s-.01-3.52-.07-4.76c-.04-.9-.2-1.39-.32-1.71a2.85 2.85 0 0 0-.69-1.06 2.85 2.85 0 0 0-1.06-.69c-.32-.12-.81-.28-1.71-.32C15.52 4.01 15.15 4 12 4zm0 3.06A4.94 4.94 0 1 0 12 16.94 4.94 4.94 0 0 0 12 7.06zm0 8.14A3.2 3.2 0 1 1 12 8.8a3.2 3.2 0 0 1 0 6.4zm6.3-8.34a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z",
  linkedin: "M6.94 5a1.94 1.94 0 1 1-3.88 0 1.94 1.94 0 0 1 3.88 0zM3.32 8.4h3.24V21H3.32V8.4zM9.4 8.4h3.1v1.72h.05c.43-.82 1.49-1.68 3.06-1.68 3.27 0 3.88 2.15 3.88 4.95V21h-3.24v-5.96c0-1.42-.03-3.25-1.98-3.25-1.98 0-2.28 1.55-2.28 3.15V21H9.4V8.4z",
  facebook: "M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.52 1.49-3.91 3.78-3.91 1.09 0 2.24.2 2.24.2v2.47H15.2c-1.24 0-1.63.78-1.63 1.57v1.88h2.78l-.44 2.91h-2.34V22c4.78-.76 8.43-4.92 8.43-9.94z",
};

function SocialLink({ name, href }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={href} target="_blank" rel="noreferrer" aria-label={name} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ width: 42, height: 42, borderRadius: "50%", border: `1px solid ${h ? "var(--mt-white)" : "var(--border-strong)"}`, display: "inline-flex", alignItems: "center", justifyContent: "center", color: h ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-base), border-color var(--dur-base)" }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={SOCIAL[name]} /></svg>
    </a>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <h4 style={{ margin: "0 0 18px", fontSize: "var(--fs-sub)", textTransform: "uppercase", letterSpacing: "var(--ls-eyebrow)", color: "var(--text-faint)", fontWeight: "var(--fw-semibold)" }}>{title}</h4>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
        {links.map((l) => {
          const label = Array.isArray(l) ? l[0] : l;
          const href = Array.isArray(l) ? l[1] : "#";
          return <a key={label} href={href} className="mt-link" style={{ fontSize: "var(--fs-body-lg)", color: "var(--text-muted)" }}>{label}</a>;
        })}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: "1px solid var(--border-faint)" }}>
      <div className="mt-container" style={{ paddingTop: "clamp(56px, 7vw, 96px)", paddingBottom: 40 }}>
        <div className="mt-footer-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 40 }}>
          <div>
            <img src={(window.__resources && window.__resources.logoTight) || "assets/logo/maitha-logo-white-tight.svg"} alt="Maitha Tech" style={{ width: 140, maxWidth: "50vw", height: "auto", display: "block" }} />
            <p style={{ margin: "22px 0 26px", fontSize: "var(--fs-h5)", lineHeight: 1.5, color: "var(--text-body)", maxWidth: 300, textWrap: "balance" }}>
              Transformamos negócios e vidas por meio da tecnologia.
            </p>
            <div style={{ display: "flex", gap: 12 }}>
              <SocialLink name="instagram" href="https://www.instagram.com/maithatech/" />
              <SocialLink name="linkedin" href="https://br.linkedin.com/company/maitha-tech" />
              <SocialLink name="facebook" href="https://www.facebook.com/maithatech/" />
            </div>
          </div>
          <FooterCol title="Serviços" links={[["Digital Unit", "digital-unit.html"], ["AI Unit", "ai-unit.html"], ["Data Unit", "data-unit.html"], ["Cloud Unit", "cloud-unit.html"], ["Salesforce Unit", "salesforce-unit.html"]]} />
          <FooterCol title="Conteúdos" links={[["TechCircle", "techcircle.html"], ["Materiais gratuitos", "Materiais.html"], ["Artigos", "#"], ["Papo Tech: Podcast", "papo-tech.html"]]} />
          <FooterCol title="Outros links" links={[["Sobre a Maitha", "sobre-a-maitha.html"], ["Carreiras", "#"], ["Política de Privacidade", "#"]]} />
        </div>
        <div style={{ marginTop: 64, paddingTop: 26, borderTop: "1px solid var(--border-faint)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{ color: "var(--text-faint)", fontSize: "var(--fs-sub)" }}>© 2026 Maitha Tech. Todos os direitos reservados</span>
          <span style={{ color: "var(--text-faint)", fontSize: "var(--fs-sub)" }}>Consultoria de tecnologia end-to-end</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer, RDStationForm });