/* ExpansionTeaser, one quiet row, a whisper */

function ExpansionTeaser() {
  return (
    <section className="band-cream" style={{ padding: "72px 0" }}>
      <div className="wrap">
        <div style={{
          display: "flex", alignItems: "center", gap: 32,
          justifyContent: "space-between", flexWrap: "wrap",
          borderTop: "1px solid var(--border)",
          borderBottom: "1px solid var(--border)",
          padding: "30px 0",
        }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 20, flexWrap: "wrap" }}>
            <Eyebrow>Coming soon</Eyebrow>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 24, fontWeight: 400,
              color: "var(--fg-brand)", letterSpacing: "-0.01em", lineHeight: 1.3,
              maxWidth: 720,
            }}>
              New from South Coast Designs: small-business branding, digital products, and stationery.
            </div>
          </div>
          <span style={{ fontSize: 12, color: "var(--fg-muted)", letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 500 }}>
            2026, details on the way
          </span>
        </div>
      </div>
    </section>
  );
}

window.ExpansionTeaser = ExpansionTeaser;