// MEGALIS — Hero with massive wordmark + reel placeholder + scroll cue

const heroStyles = `
  .hero {
    position: relative;
    padding: clamp(8px, 1vw, 16px) var(--pad) clamp(24px, 4vw, 48px);
    border-bottom: 1px solid var(--line);
  }
  .hero-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 40px;
  }
  .hero-meta .item { display: flex; flex-direction: column; gap: 6px; }
  .hero-meta .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
  .hero-meta .value { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--fg); }
  .hero-meta .value-jp { font-family: var(--font-jp); font-size: 12px; color: var(--fg-3); letter-spacing: 0.2em; }

  .hero-mark {
    margin: 0;
    text-wrap: balance;
  }
  .hero-logo {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }
  body[data-theme="light"] .hero-logo { filter: invert(1); }
  .hero-sub {
    display: block;
    font-family: var(--font-narrow);
    font-weight: 500;
    font-size: clamp(20px, 2.2vw, 36px);
    letter-spacing: -0.01em;
    color: var(--fg-2);
    margin-top: clamp(8px, 1.2vw, 24px);
    line-height: 1.1;
  }
  .hero-sub .slash { color: var(--accent); font-weight: 500; padding-right: 0.3em; }

  .hero-divider {
    height: 1px;
    background: var(--line);
    margin: clamp(40px, 6vw, 80px) calc(-1 * var(--pad)) clamp(28px, 4vw, 56px);
  }

  .hero-reel {
    position: relative;
    margin: 0 auto;
    width: 81%;
    max-width: calc((100vh - 260px) * 16 / 9);
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
  }
  .hero-reel iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    z-index: 1;
  }

  /* ── cycling-image cover ──────────────────────────────────────────── */
  .hero-cover {
    position: absolute;
    inset: 0;
    z-index: 4;
    cursor: pointer;
    overflow: hidden;
    background: #000;
    transition: opacity 0.7s var(--easing);
  }
  .hero-cover[data-revealed="true"] { opacity: 0; pointer-events: none; }

  .hero-cover .frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center;
    filter: contrast(1.12) saturate(0.82) brightness(0.92);
  }
  .hero-cover[data-mode="slideshow"] .frame { transition: opacity 0.8s var(--easing); }
  .hero-cover[data-mode="kenburns"]  .frame { transition: opacity 1s var(--easing); }
  .hero-cover[data-mode="montage"]   .frame { transition: none; }
  .hero-cover .frame[data-on="true"] { opacity: 1; }
  .hero-cover[data-mode="kenburns"] .frame[data-on="true"] {
    animation: heroKenburns 6s var(--easing) forwards;
  }
  @keyframes heroKenburns {
    from { transform: scale(1.18) translate(2%, -2%); }
    to   { transform: scale(1.02) translate(-2%, 2%); }
  }

  .hero-cover .mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    background: var(--line);
  }
  .hero-cover .tile {
    position: relative;
    background-size: cover;
    background-position: center;
    filter: contrast(1.12) saturate(0.8) brightness(0.88);
    transition: filter 0.5s var(--easing);
  }
  .hero-cover .tile[data-hot="true"] {
    filter: contrast(1.15) saturate(1) brightness(1.08);
    z-index: 1;
  }

  .hero-cover .grade {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      radial-gradient(120% 90% at 50% 35%, transparent 35%, color-mix(in oklab, #000 55%, transparent) 100%),
      linear-gradient(to top, color-mix(in oklab, #000 78%, transparent) 0%, transparent 42%),
      color-mix(in oklab, var(--accent) 9%, transparent);
  }
  .hero-cover .scanline {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.16;
    background-image: repeating-linear-gradient(to bottom, transparent 0 2px, #000 2px 3px);
  }

  .hero-cover .cover-tag {
    position: absolute;
    top: clamp(14px, 1.6vw, 22px);
    left: clamp(14px, 1.6vw, 22px);
    z-index: 4;
    font-family: var(--font-mono);
    font-size: clamp(9px, 0.78vw, 11px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    background: color-mix(in oklab, #000 38%, transparent);
    border: 1px solid color-mix(in oklab, #fff 28%, transparent);
    padding: 6px 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(6px);
  }
  .hero-cover .cover-tag .rec {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.4s ease-in-out infinite;
  }
  .hero-cover .cover-meta {
    position: absolute;
    left: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 26px);
    z-index: 4;
    color: #fff;
    max-width: min(78%, 640px);
    pointer-events: none;
  }
  .hero-cover .cover-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(22px, 3vw, 46px);
    letter-spacing: -0.02em;
    line-height: 0.98;
    margin: 0;
    text-shadow: 0 2px 24px rgba(0,0,0,0.45);
  }
  .hero-cover .cover-sub {
    display: flex;
    gap: 14px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: clamp(9px, 0.8vw, 11px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: color-mix(in oklab, #fff 70%, transparent);
    margin-top: 12px;
  }
  .hero-cover .cover-sub .dot { color: var(--accent); }

  .hero-cover .cover-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: block;
    width: 54%;
    max-width: 820px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 8px 36px rgba(0,0,0,0.55));
  }
  .hero-cover .play-me {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + clamp(56px, 6.8vw, 108px)));
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-family: var(--font-narrow);
    font-size: clamp(15px, 1.5vw, 21px);
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: #fff;
    background: none;
    border: 0;
    padding: 0.4em 0.2em;
    transition: color 0.35s var(--easing), letter-spacing 0.35s var(--easing);
  }
  .hero-cover .play-me:hover {
    color: var(--accent);
    letter-spacing: 0.4em;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-cover .frame { transition: none; }
    .hero-cover[data-mode="kenburns"] .frame[data-on="true"] { animation: none; }
  }
  @media (max-width: 900px) {
    .hero-cover .mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); }
  }
  .hero-reel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--bg) 35%, transparent),
      color-mix(in oklab, var(--bg) 68%, transparent));
  }
  .reel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.1s var(--easing), transform 6s linear;
    will-change: opacity, transform;
  }
  .reel-bg[data-active="true"] {
    opacity: 1;
    transform: scale(1);
  }
  .hero-reel .placeholder-label {
    position: absolute;
    z-index: 2;
    bottom: 16px;
    left: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--fg-3);
    text-transform: uppercase;
  }
  .hero-reel .reel-tag {
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-2);
    background: color-mix(in oklab, var(--bg) 70%, transparent);
    padding: 6px 10px;
    border: 1px solid var(--line);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(6px);
  }
  .hero-reel .reel-tag .rec {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    animation: pulse 1.4s ease-in-out infinite;
  }
  .reel-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 2.4vw, 34px);
    padding: 0 var(--pad);
    pointer-events: none;
  }
  .reel-logo-btn {
    width: clamp(220px, 36vw, 620px);
    height: auto;
    display: block;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.4s var(--easing), filter 0.3s var(--easing);
    filter: drop-shadow(0 8px 36px color-mix(in oklab, var(--bg) 85%, transparent));
  }
  .hero-reel:hover .reel-logo-btn { transform: scale(1.035); }
  body[data-theme="light"] .reel-logo-btn {
    filter: invert(1) drop-shadow(0 8px 36px color-mix(in oklab, var(--bg) 60%, transparent));
  }
  .reel-tagline {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-narrow);
    font-weight: 500;
    font-size: clamp(18px, 2.1vw, 32px);
    letter-spacing: 0.01em;
    color: var(--fg);
    text-shadow: 0 2px 20px color-mix(in oklab, var(--bg) 80%, transparent);
  }
  .reel-tagline .red-arrow {
    color: #E5423B;
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1;
    display: inline-block;
    transition: transform 0.4s var(--easing);
  }
  .hero-reel:hover .reel-tagline .red-arrow { transform: translateX(8px); }
  body[data-lang="ja"] .reel-tagline { font-family: var(--font-jp); letter-spacing: 0.08em; }

  .hero-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding-top: clamp(24px, 4vw, 48px);
    border-top: 1px solid var(--line);
  }
  .hero-bottom .col-l { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: 0.1em; max-width: 32ch; }
  .hero-bottom .col-c {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3em;
    color: var(--fg-3);
    text-transform: uppercase;
    text-align: center;
  }
  .hero-bottom .scroll-cue {
    display: inline-flex; gap: 10px; align-items: center;
  }
  .scroll-cue .line {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--fg-3);
    position: relative;
    overflow: hidden;
  }
  .scroll-cue .line::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--accent);
    animation: scrollLine 2.2s ease-in-out infinite;
  }
  @keyframes scrollLine {
    0%   { transform: translateX(-100%); }
    50%  { transform: translateX(0); }
    100% { transform: translateX(100%); }
  }
  .hero-bottom .col-r {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-2);
    letter-spacing: 0.08em;
  }
  body[data-lang="ja"] .hero-bottom .col-c {
    font-family: var(--font-jp);
    letter-spacing: 0.16em;
    text-transform: none;
  }

  @media (max-width: 700px) {
    .hero-meta { grid-template-columns: 1fr 1fr; }
    .hero-meta .item:nth-child(3) { grid-column: 1 / -1; }
    .hero-bottom { grid-template-columns: 1fr; text-align: left; }
    .hero-bottom .col-c, .hero-bottom .col-r { text-align: left; }
  }
`;

const HERO_SHOT_TAGS = [
  "COMP", "FX SIM", "LIGHTING", "FULL CG", "MATTE PAINT",
  "CREATURE", "ENVIRONMENT", "CLOTH SIM", "DMP", "LOOKDEV",
];

function makeHeroFrames(n) {
  return Array.from({ length: n }, (_, i) => {
    const seed = "mgl" + Math.random().toString(36).slice(2, 9);
    return {
      url: `https://picsum.photos/seed/${seed}/1280/720`,
      tag: HERO_SHOT_TAGS[i % HERO_SHOT_TAGS.length],
      sh: "SH_" + String(1 + Math.floor(Math.random() * 999) * 10).padStart(4, "0"),
    };
  });
}

function HeroCover({ t, loopStyle, cycleSpeed }) {
  const frames = React.useMemo(() => makeHeroFrames(10), []);
  const mode = ["slideshow", "montage", "mosaic", "kenburns"].includes(loopStyle) ? loopStyle : "slideshow";
  const [revealed, setRevealed] = React.useState(false);
  const [idx, setIdx] = React.useState(0);
  const [hot, setHot] = React.useState(0);
  const speedMs = (mode === "montage" ? Math.min(cycleSpeed, 0.35) : cycleSpeed) * 1000;

  React.useEffect(() => {
    if (revealed) return;
    if (mode === "mosaic") {
      const id = setInterval(() => setHot(() => Math.floor(Math.random() * frames.length)), speedMs);
      return () => clearInterval(id);
    }
    const id = setInterval(() => setIdx((i) => (i + 1) % frames.length), speedMs);
    return () => clearInterval(id);
  }, [mode, speedMs, frames.length, revealed]);

  const active = mode === "mosaic" ? frames[hot] : frames[idx];

  return (
    <div
      className="hero-cover"
      data-mode={mode}
      data-revealed={revealed}
      tabIndex={0}
      aria-label={t.playBtn}
      onMouseEnter={() => setRevealed(true)}
      onMouseLeave={() => setRevealed(false)}
      onFocus={() => setRevealed(true)}
      onBlur={() => setRevealed(false)}
    >
      {mode === "mosaic" ? (
        <div className="mosaic">
          {frames.map((f, i) => (
            <div key={i} className="tile" data-hot={i === hot}
                 style={{ backgroundImage: `url(${f.url})` }}></div>
          ))}
        </div>
      ) : (
        frames.map((f, i) => (
          <div key={i} className="frame" data-on={i === idx}
               style={{ backgroundImage: `url(${f.url})` }}></div>
        ))
      )}

      <div className="grade" aria-hidden="true"></div>
      <div className="scanline" aria-hidden="true"></div>

      <span className="cover-tag">
        <span className="rec"></span>
        {active.sh} · {active.tag}
      </span>

      <img className="cover-logo" src="assets/megalis-logo.png" alt="MEGALIS" />
      <button className="play-me" type="button" aria-label={t.playBtn} onClick={() => setRevealed(true)}>Play Me</button>

      <div className="cover-meta">
        <div className="cover-sub">
          <span>{t.reelTag}</span>
        </div>
      </div>
    </div>
  );
}

function Hero({ loopStyle = "slideshow", cycleSpeed = 2 }) {
  const t = window.useI18n('hero');

  return (
    <>
      <style>{heroStyles}</style>
      <section className="hero" id="top">
        <div className="hero-reel">
          <iframe
            title="vimeo-player"
            src="https://player.vimeo.com/video/1089284514?h=1804abc06b&portrait=0"
            referrerPolicy="strict-origin-when-cross-origin"
            allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
            allowFullScreen></iframe>
          <HeroCover t={t} loopStyle={loopStyle} cycleSpeed={cycleSpeed} />
        </div>

        <div className="hero-bottom">
          <div className="col-l"></div>
          <div className="col-c">
            <span className="scroll-cue">
              {t.scroll} <span className="line"></span> {t.explore}
            </span>
          </div>
          <div className="col-r">
            {t.coords}
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Hero });