// ============================================================
// autoclient.io — CONTACT
// ============================================================
const { useEffect: useCtE } = React;

function ContactInfoItem({ icon, label, value, href }) {
  const inner = (
    <div style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
      <span style={{ width: 46, height: 46, borderRadius: 12, flexShrink: 0, background: "rgba(135,132,253,0.14)", color: "var(--auto-violet)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={icon} size={20} /></span>
      <div>
        <div className="overline" style={{ marginBottom: 6 }}>{label}</div>
        <div style={{ fontSize: 16.5, color: "var(--fg-on-dark-1)", fontWeight: 500 }}>{value}</div>
      </div>
    </div>
  );
  return href ? <a href={href} style={{ display: "block" }}>{inner}</a> : <div>{inner}</div>;
}

/* ---------- GHL embedded form (Autoclient Main Form) ---------- */
const GHL_EMBED_SRC = "https://link.clientlink.io/js/form_embed.js";

function ContactForm() {
  useCtE(() => {
    // the embed script manages iframe sizing; load it once per session
    if (!document.querySelector(`script[src="${GHL_EMBED_SRC}"]`)) {
      const s = document.createElement("script");
      s.src = GHL_EMBED_SRC;
      s.async = true;
      document.body.appendChild(s);
    }
  }, []);
  return (
    <div className="card" style={{ padding: 12, overflow: "hidden" }}>
      <iframe
        src="https://link.clientlink.io/widget/form/dcqbMMHXLEIrFbsLJlN1"
        style={{ width: "100%", height: 724, border: "none", borderRadius: 8, display: "block" }}
        id="inline-dcqbMMHXLEIrFbsLJlN1"
        data-layout="{'id':'INLINE'}"
        data-trigger-type="alwaysShow"
        data-trigger-value=""
        data-activation-type="alwaysActivated"
        data-activation-value=""
        data-deactivation-type="neverDeactivate"
        data-deactivation-value=""
        data-form-name="Autoclient Main Form"
        data-height="724"
        data-layout-iframe-id="inline-dcqbMMHXLEIrFbsLJlN1"
        data-form-id="dcqbMMHXLEIrFbsLJlN1"
        title="Autoclient Main Form"
      />
    </div>
  );
}

function ContactPage() {
  useReveal();
  return (
    <main>
      <section style={{ position: "relative", overflow: "hidden", padding: "172px 0 64px" }}>
        <Aura color="#8784FD" size={520} top={-200} left={"34%"} opacity={0.38} drift={1} />
        <Aura color="#FF6666" size={400} top={-20} right={-150} opacity={0.26} drift={2} />
        <div className="wrap" style={{ position: "relative", zIndex: 1, maxWidth: 880 }}>
          <span className="overline-grad fade-up">Contact</span>
          <h1 className="fade-up" style={{ fontWeight: 300, fontSize: "clamp(2.6rem,5.2vw,4.4rem)", lineHeight: 1.06, letterSpacing: "-0.03em", margin: "20px 0 0" }}>
            Get in touch with us at <span className="gt" style={{ fontWeight: 300 }}>your convenience.</span>
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="wrap-wide contact-grid" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 56, alignItems: "start" }}>
          <div className="reveal">
            <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--fg-on-dark-2)", margin: "0 0 40px", maxWidth: 340 }}>
              Tell us where you want to grow. We'll send back a channel-by-channel plan with projected CPL and ROAS, free, within 48 hours.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
              <ContactInfoItem icon="map-pin" label="Office" value="Austin, Texas" />
              <ContactInfoItem icon="mail" label="Email" value="info@autoclient.io" href="mailto:info@autoclient.io" />
              <ContactInfoItem icon="phone" label="Phone" value="(512) 817-2473" href="tel:+15128172473" />
              <div style={{ display: "flex", gap: 12, marginTop: 4 }}>
                <a href="https://www.linkedin.com/company/autoclient/" target="_blank" rel="noopener noreferrer" className="pill pill-outline" style={{ padding: "10px 18px", display: "flex", alignItems: "center", gap: 8 }}><Icon name="briefcase" size={16} /> LinkedIn</a>
              </div>
            </div>
          </div>
          <div className="reveal" data-delay={80}><ContactForm /></div>
        </div>
      </section>

      {/* office card */}
      <section style={{ paddingBottom: 96 }}>
        <div className="wrap-wide">
          <div className="reveal" style={{ position: "relative", borderRadius: "var(--radius-xl)", overflow: "hidden", height: 320, background: "linear-gradient(135deg,#8784FD,#CC99FF,#FF99CC,#FF6666)" }}>
            <div style={{ position: "absolute", inset: 0, opacity: 0.18, backgroundImage: "linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px)", backgroundSize: "48px 48px" }} />
            <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, color: "#fff" }}>
              <Icon name="map-pin" size={32} />
              <span style={{ fontWeight: 300, fontSize: 26, letterSpacing: "-0.01em" }}>Austin, Texas</span>
              <span style={{ fontSize: 13, opacity: 0.9, textTransform: "uppercase", letterSpacing: "0.2em" }}>Working with clients nationwide</span>
            </div>
          </div>
        </div>
      </section>

      <CtaBanner title="Let's build your growth engine." sub="Book a call and we'll map your growth plan together." primary="Book a Call" small />
    </main>
  );
}

Object.assign(window, { ContactPage });