import Script from "next/script";

const InstagramReelsArea = () => {
  return (
    <>
      <section className="s_instagram_reels_premium o_colored_level pt-80 rpt-60 pb-80 rpb-60" style={{ backgroundColor: '#111111' }}>
        <div className="container">
          {/* Header */}
          <div className="row mb-5">
            <div className="col-12 text-center">
              <p className="blog-subtitle-top mb-2" style={{ color: '#ffb800', fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase' }}>FOLLOW US ON INSTAGRAM</p>
              <h2 className="blog-main-heading mb-4" style={{ color: '#ffffff', textTransform: 'uppercase', fontFamily: "'Bebas Neue', sans-serif", fontSize: '52px', letterSpacing: '1px' }}>LATEST REELS</h2>
              <p className="mt-4 mb-4" style={{ color: '#d1d1d1', fontSize: '18px', fontWeight: 400, maxWidth: '600px', margin: '0 auto', lineHeight: 1.6 }}>
                Follow <a href="https://www.instagram.com/shivasakthi.ca/?hl=en" target="_blank" rel="noopener noreferrer" style={{ color: '#ffb800', fontWeight: 600, textDecoration: 'none', borderBottom: '2px dashed #ffb800', paddingBottom: '2px', transition: 'all 0.3s ease' }}>@shivasakthi.ca</a> for our latest updates and delicious moments.
              </p>
            </div>
          </div>

          {/* Instagram Widget Container */}
          <div className="row justify-content-center">
            <div className="col-12">
              <div className="instagram-widget-container" style={{ backgroundColor: 'transparent', minHeight: '200px' }}>
                {/* Zyff Instagram Feed widget */}
                <div className="zyff-instagram" data-zyff-widget="instagram" data-zyff-id="uKQdhDxThLY0mg"></div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Script src="https://www.zyff.app/w/instagram.js" strategy="lazyOnload" />
    </>
  );
};

export default InstagramReelsArea;