// SectionTitle.jsx — H2 + descriptor + inline magenta "Link →" CTA.

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

const stStyles = {
  wrap: { display: "flex", justifyContent: "space-between", alignItems: "flex-end", margin: "48px 0 18px" },
  h2: { margin: 0, fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 26, lineHeight: 1.2, letterSpacing: "-0.04em", color: "#171717" },
  sub: { margin: "6px 0 0", fontFamily: "'Nunito Sans', sans-serif", fontSize: 14, color: "#171717", fontWeight: 500 },
  cta: { fontFamily: "'Nunito Sans', sans-serif", fontWeight: 700, fontSize: 16, color: "#EE077D", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 12 },
};

window.SectionTitle = SectionTitle;