/* CTA section.
   Two big contact tiles — WhatsApp (teal accent) and Email (blue accent). */
function CTA() {
  const { t } = useT();
  const mobile = useMobile();

  const wa = String(t("cta.whatsappValue") || "");
  const waHref = "https://wa.me/51989399834";
  const emailValue = String(t("cta.emailValue") || "");
  const emailHref = "mailto:barney@timebackai.co";

  const titleStyle = mobile
    ? { ...window.sectionTitle, font: "700 32px/1.1 'Inter'" }
    : window.sectionTitle;

  return (
    <section id="cta" data-bg="cta" style={{ padding: mobile ? "72px 20px 56px" : "112px 32px 96px", maxWidth: 1200, margin: "0 auto" }}>
      <div style={{ ...window.eyebrowBlue, color: "#2DD4BF" }}>{t("cta.eyebrow")}</div>
      <h2 style={titleStyle}>
        {t("cta.title_pre")} <span style={{ color: "#94A3B8" }}>{t("cta.title_post")}</span>
      </h2>
      <p style={window.sectionLede}>{t("cta.body")}</p>

      <div style={{
        marginTop: mobile ? 40 : 48,
        display: "grid",
        gridTemplateColumns: mobile ? "1fr" : "1fr 1fr",
        gap: mobile ? 12 : 16
      }}>
        {/* WhatsApp tile */}
        <a href={waHref} target="_blank" rel="noreferrer" style={{
          textDecoration: "none",
          background: "var(--tb-surface)",
          border: "1px solid rgba(45,212,191,0.30)",
          borderRadius: 18,
          padding: mobile ? 20 : 32,
          display: "flex",
          flexDirection: "column",
          gap: 14,
          boxShadow: "0 0 0 1px rgba(45,212,191,0.10), 0 16px 40px rgba(0,0,0,0.5)",
          transition: "transform 200ms var(--tb-ease), background 200ms var(--tb-ease)"
        }}>
          <div style={contactLabel("teal")}>{t("cta.whatsappLabel")}</div>
          <div style={{
            font: mobile ? "700 22px/1.2 'Inter'" : "700 38px/1.05 'Inter'",
            letterSpacing: "-0.02em",
            color: "#fff"
          }}>{wa}</div>
          <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{
              font: "600 14px/1 'Inter'",
              color: "#fff",
              background: "#2DD4BF",
              padding: "12px 18px",
              borderRadius: 10
            }}>{t("cta.primary")} →</span>
          </div>
        </a>

        {/* Email tile */}
        <a href={emailHref} style={{
          textDecoration: "none",
          background: "var(--tb-surface)",
          border: "1px solid rgba(59,130,246,0.30)",
          borderRadius: 18,
          padding: mobile ? 20 : 32,
          display: "flex",
          flexDirection: "column",
          gap: 14,
          boxShadow: "0 0 0 1px rgba(59,130,246,0.10), 0 16px 40px rgba(0,0,0,0.5)"
        }}>
          <div style={contactLabel("blue")}>{t("cta.emailLabel")}</div>
          <div style={{
            font: mobile ? "700 18px/1.3 'Inter'" : "700 38px/1.05 'Inter'",
            letterSpacing: "-0.02em",
            color: "#fff",
            wordBreak: "break-word"
          }}>{emailValue}</div>
          <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 8 }}>
            <span style={{
              font: "600 14px/1 'Inter'",
              color: "#fff",
              background: "#3B82F6",
              padding: "12px 18px",
              borderRadius: 10
            }}>{t("cta.secondary")} →</span>
          </div>
        </a>
      </div>

      <div style={{
        marginTop: 28,
        font: "500 14px/1 'Inter'",
        color: "#64748B",
        display: "flex",
        alignItems: "center",
        gap: 8
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: 999, background: "#F59E0B"
        }} />
        {t("cta.foot")}
      </div>
    </section>
  );
}

function contactLabel(tone) {
  const colors = { teal: "#2DD4BF", blue: "#60A5FA" };
  return {
    font: "600 11px/1 'Inter'",
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    color: colors[tone] || "#94A3B8"
  };
}

window.CTA = CTA;