function InstagramStrip() {
  // Placeholder Instagram tiles — 6 across on desktop, 3 on mobile
  // In production these would be live IG embed grid
  const tiles = [
    { tone: 'var(--rv-warm-wash-2)' },
    { tone: 'var(--rv-purple-050)' },
    { tone: 'var(--rv-warm-wash)' },
    { tone: 'var(--rv-purple-100)' },
    { tone: 'var(--rv-warm-wash-2)' },
    { tone: 'var(--rv-purple-050)' },
  ];

  return (
    <section className="rv-section rv-section--white" style={{ paddingTop: 96, paddingBottom: 0 }}>
      <div className="rv-container">
        {/* Header row */}
        <div className="rv-ig-head" style={{
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 40,
          alignItems: 'end', marginBottom: 56,
        }}>
          <div>
            <div className="rv-eyebrow" style={{ marginBottom: 20, color: 'var(--rv-purple-700)' }}>
              <span style={{ display: 'inline-flex', verticalAlign: 'middle', marginRight: 12 }}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none"/>
                </svg>
              </span>
              Follow along
            </div>
            <h2 className="rv-display" style={{ fontSize: 'clamp(36px, 5.5vw, 64px)', margin: 0, fontWeight: 300, letterSpacing: '-0.015em' }}>
              <span style={{ fontStyle: 'italic', color: 'var(--rv-purple-700)' }}>@revivmedspasfbayarea</span>
            </h2>
          </div>
          <a href="https://instagram.com/revivmedspasfbayarea" target="_blank" rel="noopener noreferrer"
             className="rv-link-uc rv-ig-cta">
            Follow on Instagram →
          </a>
        </div>

        {/* Tile grid — 6 placeholders */}
        <div className="rv-ig-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 12,
        }}>
          {tiles.map((t, i) => (
            <a key={i} href="https://instagram.com/revivmedspasfbayarea" target="_blank" rel="noopener noreferrer"
               className="rv-ig-tile"
               style={{
                 aspectRatio: '1 / 1', background: t.tone,
                 position: 'relative', overflow: 'hidden',
                 display: 'block', textDecoration: 'none',
               }}>
              {/* Placeholder corner mark */}
              <div style={{
                position: 'absolute', top: 12, left: 12,
                fontSize: 9, letterSpacing: '0.22em', textTransform: 'uppercase',
                color: 'rgba(0,0,0,0.32)', fontWeight: 500,
              }}>0{i + 1}</div>
              {/* Hover overlay with IG glyph */}
              <div className="rv-ig-tile__hover" style={{
                position: 'absolute', inset: 0,
                background: 'rgba(20, 16, 28, 0.72)',
                color: 'white',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: 0, transition: 'opacity 240ms var(--rv-ease)',
              }}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="3" width="18" height="18" rx="5"/>
                  <circle cx="12" cy="12" r="4"/>
                  <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor" stroke="none"/>
                </svg>
              </div>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        .rv-ig-tile:hover .rv-ig-tile__hover { opacity: 1; }
        @media (max-width: 900px) {
          .rv-ig-head { grid-template-columns: 1fr !important; gap: 24px !important; align-items: start !important; }
          .rv-ig-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
        @media (max-width: 480px) {
          .rv-ig-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
          .rv-ig-cta { font-size: 11px !important; }
        }
      `}</style>
    </section>
  );
}