// InstagramFeed.jsx — The "Infinite Feed" centerpiece
// Drops in the Elfsight widget. Premium dark frame, caption, hover-zoom CSS on embedded children.
function InstagramFeed(){
  return (
    <section id="feed" className="bento grain" style={{padding:'24px 0 0',background:'#0D0D0D',color:'#F5E6C4',border:'1px solid rgba(0,0,0,.1)'}}>
      <span className="tape">Daily // Mastery</span>

      <div className="flex flex-col items-start justify-between gap-4" style={{padding:'4px 32px 12px',flexWrap:'wrap'}}>
        <div style={{flex:1,minWidth:260}}>
          <p className="eyebrow flex items-center gap-2" style={{color:'#FFC107'}}>
            <span style={{display:'inline-flex',height:8,width:8,borderRadius:9999,background:'var(--grub-ketchup)'}} className="flame-pulse" />
            Live from @jasonsgrub
          </p>
          <h2 className="display" style={{marginTop:10,marginBottom:0,fontSize:'clamp(2.75rem,6vw,5.5rem)',lineHeight:.9,color:'#F5E6C4'}}>
            Daily hot dog<br /><span style={{color:'#FFC107'}}>mastery.</span>
          </h2>
        </div>
        <a href="https://www.instagram.com/jasonsgrub/" target="_blank" rel="noopener" className="btn-ghost" style={{borderColor:'rgba(255,193,7,.35)',color:'#FFC107'}}>View on Instagram →</a>
      </div>

      {/* Premium container for the Elfsight widget — configured to show 30 posts */}
      <div className="ig-feed-frame">
        <div
          className="elfsight-app-efd88b66-3ee9-4947-ab81-d4538bf0d88f"
          data-elfsight-app-lazy
          data-elfsight-feeds-count="30"
          data-elfsight-posts-per-page="30"
          data-elfsight-max-posts="30"
        ></div>
        {/* Skeleton — disappears once widget renders on top */}
        <div className="ig-skeleton" aria-hidden>
          <div className="ig-skel-grid">
            {Array.from({length:9}).map((_,i)=>(
              <div key={i} className="ig-skel-tile" style={{animationDelay:`${i*90}ms`}} />
            ))}
          </div>
          <p className="meta" style={{marginTop:24,opacity:.5}}>Elfsight feed loading…</p>
        </div>
      </div>

      <style>{`
        .ig-feed-frame{
          position:relative;
          padding: 16px 16px 32px;
          background: linear-gradient(180deg, rgba(13,13,13,.4), rgba(13,13,13,.9));
          border-top: 1px solid rgba(255,255,255,.06);
        }
        @media(min-width:768px){ .ig-feed-frame{ padding: 24px 32px 40px } }

        /* Hover-zoom for any <img> Elfsight renders inside */
        .ig-feed-frame img{ transition: transform 400ms var(--ease-grub); }
        .ig-feed-frame a:hover img,
        .ig-feed-frame [class*="post"]:hover img{ transform: scale(1.06); }

        /* Loading skeleton */
        .ig-skeleton{
          position:absolute; inset:16px; border-radius:16px; padding:24px;
          display:flex; flex-direction:column; align-items:center; justify-content:center;
          background: var(--grub-ink); border:1px dashed rgba(255,255,255,.08);
          pointer-events:none; z-index:0;
        }
        .elfsight-app-efd88b66-3ee9-4947-ab81-d4538bf0d88f{ position:relative; z-index:1; min-height:400px; }
        .elfsight-app-efd88b66-3ee9-4947-ab81-d4538bf0d88f:empty{ background:transparent }
        .ig-skel-grid{
          display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; width:100%; max-width:560px;
        }
        .ig-skel-tile{
          aspect-ratio:1; border-radius:8px;
          background: linear-gradient(135deg, #1a1a1a 0%, #262626 50%, #1a1a1a 100%);
          background-size: 200% 200%;
          animation: skelpulse 1.8s var(--ease-grub) infinite;
        }
        @keyframes skelpulse{
          0%,100%{ background-position: 0% 0%; opacity:.6 }
          50%    { background-position: 100% 100%; opacity:1 }
        }
      `}</style>
    </section>
  );
}
window.InstagramFeed = InstagramFeed;