// Instagram strip — sits just above the footer.
// Tries to load the live feed from Behold (https://behold.so): create a free
// account, connect @slowleyfarm, and paste the JSON feed URL below. Until
// then (or if the fetch fails) it falls back to a strip of site photos, all
// linking to the Instagram profile.
const INSTAGRAM_HANDLE = 'slowleyfarm';
const INSTAGRAM_URL = `https://www.instagram.com/${INSTAGRAM_HANDLE}/`;
const INSTAGRAM_FEED_URL = ''; // ← paste your Behold feed URL here for live posts

const FALLBACK_PHOTOS = [
  'assets/countryside/living-woodburner.jpeg',
  'assets/buttercup/kitchen.jpeg',
  'assets/countryside/copper-bath.jpeg',
  'assets/buttercup/garden-roses.jpeg',
  'assets/countryside/bedroom.jpeg',
  'assets/farm/farmhouse.jpeg',
];

const InstagramStrip = () => {
  const [posts, setPosts] = React.useState(null);

  React.useEffect(() => {
    if (!INSTAGRAM_FEED_URL) return;
    fetch(INSTAGRAM_FEED_URL)
      .then((r) => r.json())
      .then((data) => {
        // Behold returns either an array or { posts: [...] }
        const items = (Array.isArray(data) ? data : data.posts || [])
          .slice(0, 6)
          .map((p) => ({
            src: p.thumbnailUrl || p.mediaUrl || p.sizes?.medium?.mediaUrl,
            href: p.permalink || INSTAGRAM_URL,
          }))
          .filter((p) => p.src);
        if (items.length) setPosts(items);
      })
      .catch(() => {}); // keep the fallback strip
  }, []);

  const tiles = posts || FALLBACK_PHOTOS.map((src) => ({ src, href: INSTAGRAM_URL }));

  return (
    <section style={{
      background: 'var(--bg-inverse)',
      padding: '72px 56px 56px',
      borderTop: '1px solid rgba(245,239,226,0.12)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 12, marginBottom: 28,
        }}>
          <h2 style={{
            fontFamily: 'var(--font-serif)', fontSize: 28, fontWeight: 500,
            color: 'var(--cream)', margin: 0,
          }}>
            Life on the farm
          </h2>
          <a href={INSTAGRAM_URL} target="_blank" rel="noopener noreferrer" style={{
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 700,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--cream)', textDecoration: 'none', opacity: 0.85,
          }}>
            Follow @{INSTAGRAM_HANDLE} on Instagram →
          </a>
        </div>

        <div className="slf-ig-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(6, 1fr)',
          gap: 10,
        }}>
          {tiles.map((t, i) => (
            <a key={i} href={t.href} target="_blank" rel="noopener noreferrer"
              className="slf-zoom" style={{
                display: 'block', aspectRatio: '1',
                borderRadius: 'var(--radius-md)', overflow: 'hidden',
              }}>
              <img src={t.src} alt={`Slowley Farm on Instagram — @${INSTAGRAM_HANDLE}`} loading="lazy"/>
            </a>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 760px) {
          .slf-ig-grid { grid-template-columns: repeat(3, 1fr) !important; }
        }
      `}</style>
    </section>
  );
};

window.InstagramStrip = InstagramStrip;