/* The Snowberry website — Instagram carousel (curated, scroll-snap filmstrip) */
function SocialFeed() {
  const { Eyebrow } = window.TheSnowberryDesignSystem_ed783b;
  const railRef = React.useRef(null);

  const posts = [
    { src: './assets/images/social-autumn-exterior.jpg', caption: 'Golden hour on Crawford Street. Home looks a little different every season.', tag: 'The Home' },
    { src: './assets/images/social-dining.jpg', caption: 'Table set for twelve. Dinner is the best hour of the day around here.', tag: 'Around the Table' },
    { src: './assets/images/social-garden-flowers.jpg', caption: 'This week’s cuttings from the beds out back, straight to the table.', tag: 'The Garden' },
    { src: './assets/images/social-great-room.jpg', caption: 'Afternoon light in the great room. Always a seat by the window.', tag: 'Daily Life' },
    { src: './assets/images/social-garden-pergola.jpg', caption: 'Pergola, raised beds, and a footbridge to the fountain. Spring is for being outside.', tag: 'The Backyard' },
    { src: './assets/images/social-kitchen.jpg', caption: 'From-scratch mornings. Residents are always welcome to lend a hand.', tag: 'In the Kitchen' },
    { src: './assets/images/social-backyard.jpg', caption: 'Beds are in for the season. Tomatoes and zinnias by summer.', tag: 'The Garden' },
    { src: './assets/images/social-spring-exterior.jpg', caption: 'Blue skies over Denison. Come see us. The door’s always open.', tag: 'Visit Us' },
  ];

  const scrollByCards = (dir) => {
    const rail = railRef.current;
    if (!rail) return;
    const card = rail.querySelector('[data-card]');
    const step = card ? card.offsetWidth + 18 : 360;
    rail.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  return (
    <section id="social" style={{ background: 'var(--surface-page)', padding: '112px 0 116px' }}>
      {/* Header — constrained to container, with follow CTA + arrows */}
      <div className="sb-social-head" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
        <div style={{ maxWidth: 560 }}>
          <Eyebrow tone="brand">From Our Instagram</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(30px, 4vw, 46px)', lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--green-700)', margin: '14px 0 0', textWrap: 'balance' }}>
            A look at life this week.
          </h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6, color: 'var(--ink-700)', margin: '16px 0 0' }}>
            We share the small, real moments: meals, gardens, golden afternoons. Follow along for a window into the everyday.
          </p>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 18, paddingBottom: 4 }}>
          <a href="https://www.instagram.com/thesnowberrytx" target="_blank" rel="noopener noreferrer"
             style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, letterSpacing: '0.02em', color: 'var(--cream)', background: 'var(--brand)', padding: '12px 20px', borderRadius: 999, textDecoration: 'none', transition: 'background 160ms ease' }}
             onMouseEnter={(e) => e.currentTarget.style.background = 'var(--green-700)'}
             onMouseLeave={(e) => e.currentTarget.style.background = 'var(--brand)'}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
            @thesnowberrytx
          </a>
          <div style={{ display: 'flex', gap: 8 }}>
            <button aria-label="Previous" onClick={() => scrollByCards(-1)}
              style={{ width: 44, height: 44, borderRadius: '50%', border: '1px solid var(--border-strong)', background: 'transparent', color: 'var(--green-700)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background 160ms ease, border-color 160ms ease' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--green-50)'; e.currentTarget.style.borderColor = 'var(--brand)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <button aria-label="Next" onClick={() => scrollByCards(1)}
              style={{ width: 44, height: 44, borderRadius: '50%', border: '1px solid var(--border-strong)', background: 'transparent', color: 'var(--green-700)', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', transition: 'background 160ms ease, border-color 160ms ease' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--green-50)'; e.currentTarget.style.borderColor = 'var(--brand)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'var(--border-strong)'; }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
          </div>
        </div>
      </div>

      {/* Scroll-snap rail — bleeds to the right edge, left-padded to container */}
      <div ref={railRef} className="sb-social-rail"
        style={{ display: 'flex', gap: 18, marginTop: 48, overflowX: 'auto', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', padding: '4px max(40px, calc((100vw - var(--container-max)) / 2 + 40px)) 8px' }}>
        {posts.map((p, i) => (
          <a key={i} data-card href="https://www.instagram.com/thesnowberrytx" target="_blank" rel="noopener noreferrer"
            style={{ flex: 'none', width: 340, scrollSnapAlign: 'start', textDecoration: 'none', display: 'block', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--surface-card)', border: '1px solid var(--hairline)', boxShadow: 'var(--shadow-md)' }}>
            <div style={{ position: 'relative', aspectRatio: '1 / 1', overflow: 'hidden' }}>
              <img src={p.src} alt={p.caption} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              <div style={{ position: 'absolute', top: 14, left: 14, display: 'inline-flex', alignItems: 'center', gap: 6, background: 'rgba(253,251,248,0.92)', padding: '5px 11px', borderRadius: 999 }}>
                <img src="assets/logos/sprig-green.png" alt="" style={{ height: 14 }} />
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--brand)' }}>{p.tag}</span>
              </div>
            </div>
            <div style={{ padding: '16px 18px 20px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 13, color: 'var(--ink-900)' }}>thesnowberrytx</span>
              </div>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--ink-700)', margin: 0 }}>{p.caption}</p>
            </div>
          </a>
        ))}
        {/* Follow end-cap card */}
        <a data-card href="https://www.instagram.com/thesnowberrytx" target="_blank" rel="noopener noreferrer"
          style={{ flex: 'none', width: 340, scrollSnapAlign: 'start', textDecoration: 'none', borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--green-800)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: 32, aspectRatio: 'auto' }}>
          <img src="assets/logos/sprig-cream.png" alt="" style={{ height: 56, marginBottom: 22 }} />
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 26, color: 'var(--cream)', lineHeight: 1.15 }}>See more of<br />everyday life.</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginTop: 22, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 14, color: 'var(--cream)', border: '1px solid rgba(253,251,248,0.4)', padding: '11px 20px', borderRadius: 999 }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></svg>
            Follow @thesnowberrytx
          </div>
        </a>
      </div>
    </section>
  );
}
window.SocialFeed = SocialFeed;