// OfferCard.jsx — engagement tier card
function OfferCard({ name, summary, items = [], cadence, onClick }) {
  return (
    <article style={offerStyles.card} onClick={onClick}>
      <div style={offerStyles.flanked}>
        <span style={offerStyles.rule} />
        <span style={offerStyles.flankedLabel}>{name}</span>
        <span style={offerStyles.rule} />
      </div>
      <h3 style={offerStyles.summary}>{summary}</h3>
      <ul style={offerStyles.list}>
        {items.map((it, i) => (
          <li key={i} style={offerStyles.item}>
            <span style={offerStyles.bullet}>—</span>
            <span>{it}</span>
          </li>
        ))}
      </ul>
      <div style={offerStyles.foot}>
        <span style={offerStyles.cadence}>{cadence}</span>
        <span style={offerStyles.cta}>Inquire →</span>
      </div>
    </article>
  );
}

const offerStyles = {
  card: {
    background: 'var(--bg-elev)', border: '1px solid var(--rule)',
    padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 20,
    transition: 'background 320ms var(--ease-out), border-color 320ms var(--ease-out)',
    cursor: 'pointer',
  },
  flanked: { display: 'inline-flex', alignItems: 'center', gap: 12, color: 'var(--accent)' },
  rule: { width: 24, height: 1, background: 'currentColor', opacity: 0.7, display: 'inline-block' },
  flankedLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase' },
  summary: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 26, lineHeight: 1.25, color: 'var(--ink)', margin: 0, textWrap: 'balance' },
  list: { listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 },
  item: { display: 'flex', gap: 12, fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 15, lineHeight: 1.5, color: 'var(--ink-brown)' },
  bullet: { color: 'var(--accent)', flex: '0 0 auto' },
  foot: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 14, borderTop: '1px solid var(--rule)', marginTop: 8 },
  cadence: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--ink-soft)' },
  cta: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)' },
};

window.OfferCard = OfferCard;