// CtaPanelAlt.jsx — closing CTA panel with form fields inline

const altCtaStyles = {
  section: { background: "var(--gol-navy-950)", paddingTop: 80, paddingBottom: 80, color: "#fff" },
  panel: {
    position: "relative",
    borderRadius: 24,
    padding: "48px 56px",
    background: "linear-gradient(135deg, var(--gol-navy-800) 0%, var(--gol-navy-950) 100%)",
    border: "1px solid rgba(255,255,255,0.06)",
    overflow: "hidden",
  },
  glow: {
    position: "absolute", top: "-50%", right: "-15%", width: 700, height: 700,
    background: "radial-gradient(circle, rgba(201,166,65,0.18) 0%, transparent 60%)", pointerEvents: "none",
  },
  inner: { position: "relative", display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center" },
  innerMobile: { gridTemplateColumns: "1fr", gap: 32 },
  panelMobile: { padding: "32px 24px" },
  copy: { display: "flex", flexDirection: "column", gap: 18 },
  title: {
    fontFamily: "var(--font-display)", fontWeight: 700,
    fontSize: "clamp(30px, 4vw, 48px)", lineHeight: 1.05, letterSpacing: "-0.015em",
    color: "#fff",
  },
  lead: { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 16, lineHeight: 1.6, color: "rgba(255,255,255,0.7)" },
  contactRow: { display: "flex", flexWrap: "wrap", gap: 20, marginTop: 6 },
  contact: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--font-mono)", fontSize: 13, color: "rgba(255,255,255,0.82)" },
  contactIcon: { color: "var(--gol-gold-400)" },

  form: { display: "flex", flexDirection: "column", gap: 12 },
  fieldRow: { display: "flex", flexDirection: "column", gap: 6 },
  label: { fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 10, letterSpacing: "0.2em", textTransform: "uppercase", color: "rgba(255,255,255,0.5)" },
  consent: { display: "flex", gap: 10, alignItems: "flex-start", marginTop: 8, fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 11, lineHeight: 1.5, color: "rgba(255,255,255,0.55)" },
  consentBox: { width: 14, height: 14, borderRadius: 4, border: "1px solid rgba(255,255,255,0.3)", marginTop: 2, flexShrink: 0 },
};

function CtaPanelAlt() {
  const isMobile = window.useMobile ? window.useMobile(760) : false;
  const [lang] = window.useLang();
  return (
    <section style={altCtaStyles.section} id="consultation">
      <div className="container">
        <div style={{ ...altCtaStyles.panel, ...(isMobile ? altCtaStyles.panelMobile : {}) }}>
          <div style={altCtaStyles.glow} />
          <div style={{ ...altCtaStyles.inner, ...(isMobile ? altCtaStyles.innerMobile : {}) }}>
            <div style={altCtaStyles.copy}>
              <span className="eyebrow" style={{ color: "var(--gol-gold-400)" }}>{t("СВЯЖИТЕСЬ С НАМИ", "БІЗБЕН БАЙЛАНЫСЫҢЫЗ")}</span>
              <h2 style={altCtaStyles.title}>{t("Получить консультацию", "Кеңес алу")}</h2>
              <p style={altCtaStyles.lead}>
                {t("Оставьте заявку — наш менеджер свяжется с вами в ближайшее время и ответит на все ваши вопросы. В рабочее время — в течение часа.", "Өтінім қалдырыңыз — менеджеріміз сізбен жақын арада байланысып, барлық сұрақтарыңызға жауап береді. Жұмыс уақытында — бір сағат ішінде.")}
              </p>
            </div>

            <div style={altCtaStyles.form}>
              <div style={altCtaStyles.fieldRow}>
                <label style={altCtaStyles.label}>{t("Имя", "Аты")}</label>
                <input className="input input--dark" placeholder={t("Как к вам обращаться", "Сізге қалай хабарласайық")} />
              </div>
              <div style={altCtaStyles.fieldRow}>
                <label style={altCtaStyles.label}>{t("Телефон", "Телефон")}</label>
                <input className="input input--dark" placeholder="+7 ___ ___-__-__" />
              </div>
              <button className="btn btn--gold btn--lg" style={{ justifyContent: "center", width: "100%", marginTop: 6 }}>
                {t("Получить консультацию", "Кеңес алу")}
                <Icon name="arrow-right" size={16} />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CtaPanelAlt = CtaPanelAlt;