// MEGALIS — Reel 2025 section: Vimeo player under a static cover that fades on play.

const reelStyles = `
  .reel-section { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .reel-section .sec-head { border-bottom: 0; }
  .reel-wrap {
    width: 80%;
    margin: 0 auto;
    padding: 24px 0 8px;
  }
  .reel-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--line);
  }
  .reel-grid > * { background: var(--bg); }
  .reel-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .reel-embed {
    position: relative;
    aspect-ratio: 21 / 9;
    background: #000;
    overflow: hidden;
  }
  .reel-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }

  .reel-card .meta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 16px;
    padding: 24px;
  }
  .reel-card .title-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
  }
  .reel-card .title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 36px);
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
  }
  .reel-card .alt-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(14px, 1.4vw, 21px);
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--fg-2);
    position: relative;
    padding-left: 17px;
  }
  .reel-card .alt-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.12em;
    bottom: 0.04em;
    width: 1px;
    background: var(--fg-3);
  }
  .reel-card .sub {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-top: 8px;
  }
  .reel-card .duration {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--fg-2);
  }

  @media (max-width: 900px) {
    .reel-grid { grid-template-columns: 1fr; }
  }
`;

function ReelCard({ item }) {
  return (
    <div className="reel-card primary">
      <div className="reel-embed">
        <iframe
          title="vimeo-player"
          src="https://player.vimeo.com/video/775596568?h=e2dcf70cb2&portrait=0"
          referrerPolicy="strict-origin-when-cross-origin"
          allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
          allowFullScreen></iframe>
      </div>
      <div className="meta">
        <div>
          <div className="title-row">
            <h3 className="title">{item.title}</h3>
            {item.altTitle ? <span className="alt-title">{item.altTitle}</span> : null}
          </div>
          <div className="sub">{item.sub}</div>
        </div>
        <div className="duration">⏵ {item.duration}</div>
      </div>
    </div>
  );
}

function Reel() {
  const t = window.useI18n('reel');
  return (
    <>
      <style>{reelStyles}</style>
      <section className="reel-section" id="reel" data-screen-label="Reel">
        <header className="sec-head">
          <div>
            <div className="sec-num">{t.num}</div>
            <h2 className="sec-title">{t.title[0]}<br/>{t.title[1]}</h2>
          </div>
          <div className="sec-kana">{t.kana}</div>
        </header>

        <div className="reel-wrap">
          <div className="reel-grid">
            <ReelCard item={t.card} />
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Reel });