// MobileSectionTitle.jsx — compact section header for 360 width.

const MobileSectionTitle = ({ title, subtitle, ctaLabel, onCta = () => {} }) => (
  <div style={mstStyles.wrap}>
    <h2 style={mstStyles.h2}>{title}</h2>
    {ctaLabel && (
      <a href="#" onClick={(e) => { e.preventDefault(); onCta(); }} style={mstStyles.cta}>
        {ctaLabel} <Icon name="arrow" size={16} color="#EE077D" />
      </a>
    )}
    {subtitle && <p style={mstStyles.sub}>{subtitle}</p>}
  </div>
);

const mstStyles = {
  wrap: { display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", columnGap: 12, rowGap: 4, padding: "24px 16px 10px" },
  h2: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 18, lineHeight: 1.2, letterSpacing: "-0.04em", color: "#171717" },
  cta: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 13, color: "#EE077D", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" },
  sub: { gridColumn: "1 / -1", margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontSize: 13, color: "#171717", lineHeight: 1.45 },
};

window.MobileSectionTitle = MobileSectionTitle;