/* eslint-disable */
/* global React, Reveal */
const { useEffect: useEffectGallery } = React;

const MIRROR_SCRIPT = 'https://cdn.jsdelivr.net/npm/@mirrorapp/iframe-bridge@latest/dist/index.umd.js';
const MIRROR_FEED = 'https://app.mirror-app.com/feed-instagram/b951054f-bb1e-4599-acae-3951cbac6ad1/preview';

function Builds() {
  useEffectGallery(() => {
    if (document.querySelector(`script[data-mirror-bridge]`)) return;
    const s = document.createElement('script');
    s.src = MIRROR_SCRIPT;
    s.async = true;
    s.dataset.mirrorBridge = 'true';
    document.body.appendChild(s);
  }, []);

  const handleLoad = (e) => {
    if (typeof window.iFrameSetup === 'function') {
      window.iFrameSetup(e.currentTarget);
    }
  };

  return (
    <section id="gallery" className="section" style={{ borderTop: '1px solid var(--line)' }}>
      <div className="container">
        <Reveal>
          <div className="section-head">
            <hr className="hr-gold" />
            <span className="eyebrow">Gallery</span>
            <h2>Gallery.</h2>
            <p>
              Live from{' '}
              <a
                href="https://www.instagram.com/platinumtuned/"
                target="_blank"
                rel="noopener noreferrer"
                style={{ color: 'var(--gold)', textDecoration: 'none' }}
              >
                @platinumtuned
              </a>
              {' '}— latest builds, in-progress cars and finished work, updated whenever we post.
            </p>
          </div>
        </Reveal>

        <Reveal>
          <div className="gallery">
            <iframe
              src={MIRROR_FEED}
              onLoad={handleLoad}
              className="gallery__iframe"
              scrolling="no"
              title="Platinum Tuning Instagram feed"
              loading="lazy"
            />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Builds = Builds;