/* global React, Icon */

/*
  To connect real Instagram Reels, replace each REELS[n].embedUrl with the
  actual Instagram reel URL (e.g. "https://www.instagram.com/reel/ABC123/")
  and set type: "instagram". The component will render an Instagram iframe embed.
  For local MP4 files set type: "video" and provide src: "path/to/video.mp4".
*/

const REELS = [
  {
    id: 1,
    type: "placeholder",
    thumb: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg",
    caption: "Nyt tag i Sønderborg fra start til slut 🏠",
    views: "2.4k",
  },
  {
    id: 2,
    type: "placeholder",
    thumb: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider01.jpg",
    caption: "VELFAC vinduer monteret på Als ✅",
    views: "1.8k",
  },
  {
    id: 3,
    type: "placeholder",
    thumb: "./assets/hero-desktop.png",
    caption: "Tilbygning på 40 m² timelapse 🎬",
    views: "3.1k",
  },
  {
    id: 4,
    type: "placeholder",
    thumb: "https://www.frederiksen-jepsen.dk/tl_files/materiale/slider/slider02.jpg",
    caption: "Akut tagskade? Vi rykker ud samme dag ⚡",
    views: "5.2k",
  },
];

function VideoReels() {
  const [playing, setPlaying] = React.useState(null);

  return (
    <section className="vr" data-screen-label="Video Reels">
      <div className="container">
        <div className="vr__head">
          <div>
            <span className="vr__eyebrow">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
              </svg>
              Fra Instagram
            </span>
            <h2 className="vr__title">Se os i aktion</h2>
            <p className="vr__sub">Følg med bag kulisserne fra første søm til aflevering.</p>
          </div>
          <a href="https://www.instagram.com" target="_blank" rel="noopener noreferrer" className="vr__follow">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
              <circle cx="12" cy="12" r="4"/>
              <circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none"/>
            </svg>
            Følg @frederiksen_jepsen
          </a>
        </div>

        <div className="vr__grid">
          {REELS.map((r) => (
            <div key={r.id} className={"vr__card" + (playing === r.id ? " vr__card--playing" : "")}
                 onClick={() => setPlaying(playing === r.id ? null : r.id)}>

              {r.type === "instagram" ? (
                /* Replace with real Instagram embed iframe */
                <iframe
                  src={`${r.embedUrl}embed/`}
                  className="vr__iframe"
                  frameBorder="0"
                  scrolling="no"
                  allowTransparency="true"
                  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                  title={r.caption}
                />
              ) : r.type === "video" ? (
                <video src={r.src} className="vr__video" controls={playing === r.id}
                       poster={r.thumb} playsInline />
              ) : (
                <>
                  <img src={r.thumb} alt={r.caption} className="vr__thumb" referrerPolicy="no-referrer" />
                  <div className="vr__overlay" />
                  <div className="vr__play">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
                      <polygon points="5,3 19,12 5,21"/>
                    </svg>
                  </div>
                  <div className="vr__meta">
                    <span className="vr__views">
                      <Icon name="eye" size={12} stroke="rgba(255,255,255,0.7)" />
                      {r.views}
                    </span>
                    <p className="vr__caption">{r.caption}</p>
                  </div>
                </>
              )}
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .vr {
          background: var(--surface-ink);
          padding: 80px 0 100px;
        }
        .vr__head {
          display: flex; align-items: flex-end; justify-content: space-between;
          gap: 24px; margin-bottom: 40px; flex-wrap: wrap;
        }
        .vr__eyebrow {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-display); font-weight: 600; font-size: 11px;
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--accent); margin-bottom: 10px;
        }
        .vr__title {
          font-family: var(--font-display); font-weight: 700;
          font-size: clamp(28px, 3.5vw, 46px); line-height: 1;
          text-transform: uppercase; letter-spacing: -0.01em;
          color: var(--paper); margin: 0 0 10px;
        }
        .vr__sub {
          font-family: var(--font-body); font-size: 15px;
          color: var(--paper-dim); margin: 0;
        }
        .vr__follow {
          display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--font-display); font-weight: 600; font-size: 12px;
          letter-spacing: 0.08em; text-transform: uppercase;
          color: var(--accent);
          border: 1px solid rgba(229,172,49,0.45);
          border-radius: 999px; padding: 10px 18px;
          transition: background 150ms var(--ease-snappy), border-color 150ms;
          white-space: nowrap;
          flex-shrink: 0;
        }
        .vr__follow:hover { background: rgba(229,172,49,0.1); border-color: var(--accent); }

        /* Grid */
        .vr__grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }

        /* Card */
        .vr__card {
          position: relative;
          border-radius: var(--radius-lg);
          overflow: hidden;
          aspect-ratio: 9/16;
          background: var(--surface-panel);
          cursor: pointer;
          transition: transform 200ms var(--ease-snappy);
        }
        .vr__card:hover { transform: translateY(-4px); }
        .vr__thumb {
          width: 100%; height: 100%; object-fit: cover; display: block;
          transition: transform 400ms var(--ease-snappy);
        }
        .vr__card:hover .vr__thumb { transform: scale(1.04); }
        .vr__overlay {
          position: absolute; inset: 0;
          background: linear-gradient(to top, rgba(11,17,24,0.88) 0%, rgba(11,17,24,0.1) 50%, transparent 100%);
        }
        .vr__play {
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          width: 48px; height: 48px;
          border-radius: 999px;
          background: rgba(11,17,24,0.55);
          border: 1.5px solid rgba(255,255,255,0.4);
          backdrop-filter: blur(4px);
          display: flex; align-items: center; justify-content: center;
          transition: background 150ms, transform 150ms var(--ease-snappy);
        }
        .vr__card:hover .vr__play {
          background: var(--accent);
          border-color: var(--accent);
          transform: translate(-50%, -50%) scale(1.1);
        }
        .vr__meta {
          position: absolute; bottom: 0; left: 0; right: 0;
          padding: 14px 14px 16px;
        }
        .vr__views {
          display: inline-flex; align-items: center; gap: 4px;
          font-family: var(--font-display); font-weight: 600; font-size: 10px;
          letter-spacing: 0.08em; color: rgba(255,255,255,0.6);
          margin-bottom: 6px;
        }
        .vr__caption {
          font-family: var(--font-body); font-size: 12px; line-height: 1.4;
          color: rgba(244,241,236,0.85); margin: 0;
        }
        .vr__iframe, .vr__video {
          width: 100%; height: 100%; border: none; display: block;
        }

        @media (max-width: 960px) {
          .vr__grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 540px) {
          .vr__grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { VideoReels });