// CTA: dark conversion band with quick action buttons (form lives in the hero).
const NS_CTA = window.AnsysDigitalDesignSystem_4543d7;

function CTA({ formRef }) {
  const { Button, Eyebrow } = NS_CTA;
  const REG = window.ANSYS_REGION || {};
  const isIndia = REG.code === "in";
  const mailto = "mailto:support@ansysdigital.com?subject=" + encodeURIComponent("Shopify project enquiry") + "&body=" + encodeURIComponent("Hi Ansys Digital,\n\nBrand / store URL:\nWhat I need:\nTimeline:\nBudget range:\n\nThanks,\n");
  const toForm = () => { const el = document.getElementById("top"); if (el) window.scrollTo({ top: 0, behavior: "smooth" }); };
  return (
    <section id="contact" ref={formRef} style={{ background: "var(--grad-brand)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, backgroundImage: "var(--grad-halo)", opacity: .6, pointerEvents: "none" }} />
      <div style={{ position: "relative", maxWidth: "var(--container-max)", margin: "0 auto", padding: "var(--section-y) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(2rem,5vw,4.5rem)", alignItems: "center" }} className="cta-grid">
        <div className="reveal">
          <Eyebrow color="gold">Let's talk</Eyebrow>
          <h2 style={{ margin: "16px 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "var(--display-md)", lineHeight: "var(--leading-tight)", letterSpacing: "var(--tracking-tight)", color: "var(--ink-text)", textWrap: "balance" }}>Book your discovery call</h2>
          <p style={{ margin: "18px 0 0", fontSize: 18, lineHeight: "var(--leading-snug)", color: "var(--ink-text-muted)", maxWidth: 460, textWrap: "pretty" }}>Tell us about your brand and goals. We'll come back within one business day with a tailored plan — no obligation.</p>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, marginTop: 32 }}>
            {[["clock", "45-minute strategy session"], ["globe", "Working across US, UK, EU & the Middle East"], ["shield-check", "NDA on request, always"]].map(([ic, t]) => (
              <div key={t} style={{ display: "flex", alignItems: "center", gap: 12, color: "rgba(255,255,255,.82)", fontSize: 15 }}>
                <span style={{ color: "var(--accent)", display: "inline-flex" }}><Ic name={ic} size={19} /></span>{t}
              </div>
            ))}
          </div>
        </div>
        <div className="reveal" style={{ transitionDelay: ".1s" }}>
          <div style={{ background: "var(--surface-card)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-xl)", padding: "clamp(1.75rem,3vw,2.5rem)", textAlign: "center" }}>
            <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 700, letterSpacing: "var(--tracking-tight)", color: "var(--text-primary)" }}>Ready to start?</h3>
            <p style={{ margin: "10px auto 0", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", maxWidth: 340 }}>{isIndia ? "Message us directly on WhatsApp for the fastest reply, or fill the quick project form at the top of the page." : "Email us your brief for the fastest reply, or fill the quick project form at the top of the page."}</p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 26 }}>
              {isIndia ? (
              <a href="https://wa.me/919278024499" target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, height: 54, borderRadius: "var(--radius-pill)", background: "#25D366", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, textDecoration: "none", boxShadow: "0 12px 30px -8px rgba(37,211,102,.55)" }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M17.5 14.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.44-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.6-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.48 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35zM12.05 21.5h-.01a9.4 9.4 0 0 1-4.8-1.32l-.34-.2-3.57.94.95-3.48-.22-.36a9.42 9.42 0 0 1 14.64-11.6 9.36 9.36 0 0 1 2.76 6.67c0 5.2-4.24 9.35-9.41 9.35zM20.52 3.48A11.8 11.8 0 0 0 12.05.02C5.5.02.16 5.36.16 11.92c0 2.1.55 4.14 1.6 5.95L.06 24l6.3-1.65a11.86 11.86 0 0 0 5.69 1.45h.01c6.55 0 11.89-5.34 11.89-11.9 0-3.18-1.24-6.17-3.43-8.42z"/></svg>
                Message us on WhatsApp
              </a>
              ) : (
              <a href={mailto} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, height: 54, borderRadius: "var(--radius-pill)", background: "var(--grad-brand)", color: "#fff", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 16, textDecoration: "none", boxShadow: "0 12px 30px -8px rgba(37,99,235,.55)" }}>
                <Ic name="mail" size={20} />Email us your brief
              </a>
              )}
              <Button variant="secondary" size="lg" onClick={toForm} iconRight={<Ic name="arrow-up" size={18} />}>Book a discovery call</Button>
            </div>
            <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "8px 20px", marginTop: 22, paddingTop: 20, borderTop: "1px solid var(--border-subtle)", fontSize: 13.5 }}>
              {isIndia ? <a href="tel:+919278024499" style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-secondary)", textDecoration: "none" }}><span style={{ color: "var(--brand)", display: "inline-flex" }}><Ic name="phone" size={15} /></span>+91 92780 24499</a> : <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-secondary)" }}><span style={{ color: "var(--brand)", display: "inline-flex" }}><Ic name="clock" size={15} /></span>We work US &amp; EU hours</span>}
              <a href="mailto:support@ansysdigital.com" style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-secondary)", textDecoration: "none" }}><span style={{ color: "var(--brand)", display: "inline-flex" }}><Ic name="mail" size={15} /></span>support@ansysdigital.com</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { CTA });