// TextMessagesSection.jsx — Quiet phones in a row, editorial header

const TextMessagesSection = () => {
  const slots = [
    { id: 'text-msg-1', placeholder: 'Drop screenshot #1' },
    { id: 'text-msg-2', placeholder: 'Drop screenshot #2' },
    { id: 'text-msg-3', placeholder: 'Drop screenshot #3' },
  ];

  return (
    <section style={{ background: '#fafaf7', padding: '72px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr',
          gap: 80, alignItems: 'end', marginBottom: 80,
        }} className="two-col">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="eyebrow">Real-time wins</div>
            <h2 style={{
              fontSize: 'clamp(40px, 5.4vw, 72px)',
              margin: 0,
              maxWidth: 520,
            }}>The messages that <em>hit our inbox</em>.</h2>
          </div>
          <p style={{
            fontFamily: "'Geist', sans-serif",
            fontSize: 17, color: '#3a3a36', lineHeight: 1.7,
            fontWeight: 300, maxWidth: 480, paddingBottom: 6,
          }}>Unfiltered, in-the-moment celebrations from clients hitting milestones.</p>
        </div>

        <div className="textmsg-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          maxWidth: 900, margin: '0 auto',
        }}>
          {slots.map((s) => (
            <div key={s.id} style={{ width: '100%', aspectRatio: '9/16' }}>
              <image-slot
                id={s.id}
                shape="rounded"
                radius="4"
                placeholder={s.placeholder}
                style={{
                  display: 'block',
                  width: '100%',
                  height: '100%',
                  background: '#f0eee8',
                }}
              />
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .textmsg-grid { grid-template-columns: 1fr !important; max-width: 320px !important; }
        }
      `}</style>
    </section>
  );
};

Object.assign(window, { TextMessagesSection });