// LP『働かないで、生きていく（仮）』 — sections
const { Button, Chip, SectionHeading, Statement, Marquee, VerticalLabel, WorkCard, DividedGrid } =
  window.GUMDesignSystem_f11fa0;
const { LP_ASSETS, lpImg, LP_THEMES, LP_WORKS, LP_DISCORD_ITEMS, LP_MEMBERS, LP_PROFILE } = window.LP_DATA;

const lpBody = {
  fontFamily: "var(--font-ja)",
  fontSize: "var(--fs-body)",
  lineHeight: "var(--lh-body)",
  letterSpacing: "var(--ls-normal)",
  margin: 0,
};

function LPSection({ id, label, children, style, darkLabel = false }) {
  return (
    <section id={id} data-screen-label={id} style={{ display: "flex", ...style }}>
      <div className="lp-vlabel-col" style={{ width: "70px", flex: "none", display: "flex", justifyContent: "center", alignItems: "flex-start" }}>
        <VerticalLabel top={120} light={!darkLabel}>{label}</VerticalLabel>
      </div>
      <div className="container section lp-content" style={{ flex: 1, minWidth: 0, paddingRight: "150px" }}>
        {children}
      </div>
    </section>
  );
}

function LPHeader() {
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 10, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "22px 40px", mixBlendMode: "difference", color: "#fff" }}>
      <span style={{ fontFamily: "var(--font-en-sans)", fontWeight: 500, fontSize: "20px", letterSpacing: "var(--ls-wide)" }}>GUM</span>
      <a href="#join" style={{ fontFamily: "var(--font-en-sans)", fontWeight: 500, fontSize: "var(--fs-small)", letterSpacing: "var(--ls-wide)", color: "inherit", textDecoration: "none", display: "flex", alignItems: "center", gap: "10px" }}>
        Join Discord
        <span style={{ width: "var(--dot-size)", height: "var(--dot-size)", borderRadius: "50%", background: "var(--accent)" }}></span>
      </a>
    </header>
  );
}

const LP_HERO_SUBTITLE = "映画『働かないで、生きていく（仮）』共創プロジェクト";

function LPHeroMarquee() {
  return (
    <div className="lp-marquee-lg">
      <Marquee yellow size="100px" style={{ marginTop: "70px" }}>
        THIS FILM HAS ALREADY BEGUN.&nbsp;
      </Marquee>
    </div>
  );
}

function LPHeroDesktop() {
  return (
    <section data-screen-label="hero" style={{ background: "var(--surface-dark)", color: "#fff", paddingBottom: "70px" }}>
      <div className="lp-hero-media" style={{ position: "relative", overflow: "hidden" }}>
        <img src={lpImg("first-view.jpg")} alt="" className="lp-hero-img" style={{ width: "100%", display: "block", opacity: 0.9 }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, #222 4%, transparent 45%)" }}></div>
      </div>
      <div className="container section" style={{ marginTop: "-40px", position: "relative" }}>
        <p style={{ fontFamily: "var(--font-ja)", fontWeight: 500, fontSize: "var(--fs-h2-sub)", color: "var(--text-sub)", margin: 0, lineHeight: 1.8 }}>
          {LP_HERO_SUBTITLE}
        </p>
        <h1 className="lp-hero-title" style={{ fontFamily: "var(--font-ja)", fontWeight: 700, fontSize: "44px", lineHeight: 1.7, margin: "20px 0 0", letterSpacing: "var(--ls-normal)" }}>
          ベーシックインカムが導入された世界で、<br />わたしたちはどう生きていくのか？
        </h1>
      </div>
      <LPHeroMarquee />
    </section>
  );
}

// Mobile: scroll-driven film pan → title/body rises up with blur + gradient-to-bg
function LPHeroMobile() {
  const sectionRef = React.useRef(null);
  const filmRef = React.useRef(null);
  const overlayRef = React.useRef(null);
  const titleRef = React.useRef(null);

  React.useEffect(() => {
    let raf = 0;
    const easeOut = (t) => 1 - Math.pow(1 - t, 3);
    const clamp = (v) => Math.max(0, Math.min(1, v));
    const PAN_END = 0.62; // film pans over the first 62% of scroll, then title rises

    const update = () => {
      raf = 0;
      const section = sectionRef.current, film = filmRef.current;
      if (!section || !film) return;
      const vh = window.innerHeight;
      const scrollable = section.offsetHeight - vh;
      const progress = clamp(scrollable > 0 ? -section.getBoundingClientRect().top / scrollable : 0);
      const p1 = clamp(progress / PAN_END);
      const p2 = clamp((progress - PAN_END) / (1 - PAN_END));
      const e2 = easeOut(p2);

      const maxPan = Math.max(0, film.scrollWidth - window.innerWidth);
      film.style.transform = `translateX(${-maxPan * easeOut(p1)}px) translateY(-50%) scale(${1 + 0.06 * e2})`;
      film.style.filter = `blur(${9 * e2}px)`;
      if (overlayRef.current) overlayRef.current.style.opacity = e2;
      if (titleRef.current) {
        titleRef.current.style.transform = `translateY(${(1 - e2) * 64}px)`;
        titleRef.current.style.opacity = e2;
      }
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };

    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    const img = filmRef.current && filmRef.current.querySelector("img");
    if (img) { if (img.complete) update(); else img.addEventListener("load", onScroll); }
    update();
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (img) img.removeEventListener("load", onScroll);
      cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <React.Fragment>
      <section ref={sectionRef} data-screen-label="hero" style={{ background: "var(--surface-dark)", color: "#fff", height: "300svh", position: "relative" }}>
        <div style={{ position: "sticky", top: 0, height: "100svh", overflow: "hidden" }}>
          <div ref={filmRef} style={{ position: "absolute", top: "50%", left: 0, height: "88svh", display: "flex", transform: "translateY(-50%)", transformOrigin: "center", willChange: "transform, filter" }}>
            <img src={lpImg("first-view.jpg")} alt="" style={{ height: "100%", width: "auto", display: "block", opacity: 0.92 }} />
          </div>
          <div ref={overlayRef} style={{ position: "absolute", inset: 0, opacity: 0, pointerEvents: "none", backdropFilter: "blur(1.5px)", background: "linear-gradient(to top, var(--surface-dark) 14%, rgba(34,34,34,0.82) 46%, rgba(34,34,34,0.35) 100%)" }}></div>
          <div ref={titleRef} style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "0 24px 64px", opacity: 0, willChange: "transform, opacity" }}>
            <p style={{ fontFamily: "var(--font-ja)", fontWeight: 500, fontSize: "var(--fs-h2-sub)", color: "var(--text-sub)", margin: 0, lineHeight: 1.8 }}>
              {LP_HERO_SUBTITLE}
            </p>
            <h1 style={{ fontFamily: "var(--font-ja)", fontWeight: 700, fontSize: "26px", lineHeight: 1.7, margin: "14px 0 0", letterSpacing: "var(--ls-normal)" }}>
              ベーシックインカムが<br />導入された世界で、<br />わたしたちは<br />どう生きていくのか？
            </h1>
          </div>
        </div>
      </section>
      <div style={{ background: "var(--surface-dark)", paddingBottom: "70px" }}>
        <LPHeroMarquee />
      </div>
    </React.Fragment>
  );
}

function LPHero() {
  const query = "(max-width: 767px)";
  const [mobile, setMobile] = React.useState(() =>
    typeof window !== "undefined" && window.matchMedia(query).matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia(query);
    const on = (e) => setMobile(e.matches);
    mq.addEventListener("change", on);
    return () => mq.removeEventListener("change", on);
  }, []);
  return mobile ? <LPHeroMobile /> : <LPHeroDesktop />;
}

function LPIntro({ darkRef }) {
  return (
    <section ref={darkRef} data-screen-label="intro" style={{ padding: "150px 0 60px" }}>
      <div className="container section" style={{ color: "#fff" }}>
        <Statement label="Prologue">This film has already begun.</Statement>
        <div style={{ maxWidth: "680px", marginTop: "48px", display: "grid", gap: "28px" }}>
          <p style={{ ...lpBody, fontWeight: 500, fontSize: "var(--fs-lead)" }}>この映画は、もう始まっている。</p>
          <p style={lpBody}>
            「映画は、完成したものを観るもの」 そんな常識を、私たちは壊すことにしました。舞台は2033年、ベーシックインカムが導入された日本。 お金のために働く必要がなくなったとき、人は何に絶望し、何を「幸せ」と呼ぶのか。
          </p>
          <p style={lpBody}>
            この映画は、単なるフィクションではありません。 いま、この激動の時代を生きる「僕たち、わたしたちの物語」です。 そして、この物語は、劇場のスクリーンで始まるのではなく、今日、ここから始まります。
          </p>
        </div>
        <div style={{ marginTop: "64px" }}>
          <img
            src={lpImg("basic-income-infographic.jpg")}
            alt="そもそもベーシックインカムとは？"
            style={{ display: "block", width: "100%", height: "auto", borderRadius: "var(--radius)" }}
          />
        </div>
      </div>
    </section>
  );
}

function LPPurpose() {
  return (
    <LPSection id="purpose" label="PURPOSE" style={{ color: "#fff", padding: "100px 0 40px" }}>
      <div style={{ display: "flex", gap: "70px", flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "0 1 300px", minWidth: "240px" }}>
          <SectionHeading en="Purpose" ja="企画意図" light />
        </div>
        <div style={{ flex: "1 1 420px", minWidth: "280px", maxWidth: "680px", display: "grid", gap: "28px" }}>
        <p style={lpBody}>
          本作は、ベーシックインカムという制度を通して、「人はなぜ働くのか」という根源的な問いを描く群像劇です。
        </p>
        <p style={lpBody}>
          現代社会において、労働の対価は主に「お金」として認識されています。しかし、もし人々が生きるためにお金を必要としなくなったとき、人はそれでも働くのでしょうか。本作では、ベーシックインカムによって生活が保障された社会を描くことで、労働の意味を一度リセットし、その本質を浮かび上がらせます。
        </p>
        <p style={lpBody}>
          本作は、ベーシックインカム制度そのものを肯定・否定する作品ではないです。映画内におけるベーシックインカムはあくまで、今を生きる人々への「気づきの装置」であり、観客に対して「働くとは何か」「生きがいとは何か」「幸せとは何か」を問いかけるための舞台設定です。
        </p>
        <p style={{ ...lpBody, fontWeight: 500, fontSize: "var(--fs-lead)" }}>
          本作が最終的に描こうとするのは、自分のためだけでなく、<br />「誰かのために働くことを選ぶ人間の美しさと尊さ」
        </p>
        <p style={lpBody}>
          他者や社会のために働くという選択は、同時に自分のためでもある。 そこにこそ、人間の生きがいや価値があるのではないか―― その気づきを、観客に静かに提示する作品です。
        </p>
        </div>
      </div>
    </LPSection>
  );
}

function LPThemes() {
  return (
    <LPSection id="themes" label="THEMES" style={{ color: "#fff", padding: "100px 0 40px" }}>
      <div style={{ display: "flex", gap: "70px", flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "0 1 300px", minWidth: "240px" }}>
          <SectionHeading en="Themes" ja="テーマ" light />
        </div>
        <div style={{ flex: "1 1 420px", minWidth: "280px", maxWidth: "760px" }}>
        {LP_THEMES.map((t, i) => (
          <div key={t} style={{ display: "flex", alignItems: "center", gap: "24px", padding: "24px 0", borderTop: "1px solid var(--border-translucent)" }}>
            <span style={{ fontFamily: "var(--font-en-serif)", fontSize: "var(--fs-small)", color: "var(--text-sub)", width: "34px", flex: "none" }}>
              {String(i + 1).padStart(2, "0")}
            </span>
            <span style={{ width: "var(--dot-size)", height: "var(--dot-size)", borderRadius: "50%", background: "var(--accent)", flex: "none" }}></span>
            <span style={{ ...lpBody, fontWeight: 500, fontSize: "var(--fs-lead)", lineHeight: 1.7 }}>{t}</span>
          </div>
        ))}
        <p style={{ ...lpBody, marginTop: "28px", color: "var(--text-sub)", fontSize: "var(--fs-small)" }}>
          ベーシックインカムという制度は、これらの問いを浮き彫りにするための装置です。
        </p>
        </div>
      </div>
    </LPSection>
  );
}

function LPTone() {
  return (
    <LPSection id="tone" label="TONE" style={{ color: "#fff", padding: "100px 0 60px" }}>
      <div style={{ display: "flex", gap: "70px", flexWrap: "wrap", alignItems: "flex-start" }}>
        <div style={{ flex: "0 1 300px", minWidth: "240px" }}>
          <SectionHeading en="Tone" ja="トーン" light />
        </div>
        <div style={{ flex: "1 1 420px", minWidth: "280px", maxWidth: "680px", display: "grid", gap: "28px" }}>
        <p style={lpBody}>
          本作は過度なSF的演出には依存せず、現代社会の延長線上にある「現実的な近未来」を描きます。テクノロジーや制度そのものではなく、その中で生きる人間の選択と感情に焦点を当てた、リアルで静かなヒューマンドラマです。
        </p>
        <p style={lpBody}>
          群像劇として、多様な人物の視点を通して物語が展開され、一つの社会の中で起こる複数の人生が交差していく構造となります。
        </p>
        </div>
      </div>
    </LPSection>
  );
}

function LPSynopsis() {
  return (
    <LPSection id="synopsis" label="SYNOPSIS" style={{ color: "#fff", padding: "100px 0 60px" }}>
      <SectionHeading en="Synopsis" ja="あらすじ" light />
      <img src={lpImg("tone.jpg")} alt="虹彩認証とジャパンコインのイメージビジュアル" style={{ width: "100%", display: "block", borderRadius: "var(--radius)", margin: "44px 0 0" }} />
      <div style={{ maxWidth: "680px", marginTop: "44px", display: "grid", gap: "28px" }}>
        <p style={lpBody}>
          2028年、日本は国民投票でベーシックインカム導入を決定。2033年、ついに全ての国民に毎月20万円が暗号通貨「ジャパンコイン」で支給される。虹彩認証を通じて受け取る新制度は、人々の生活を保障するはずだった。しかし社会は急速に変貌する。仕事を辞める人々が相次ぎ、街はごみ収集も滞り、建設現場は放置され、社会インフラは混乱に陥る。
        </p>
        <p style={lpBody}>
          そんな中、レインマン社で働く金子マリは、離職者があふれる中、不安を抱えながらも働き続ける。専業主婦である内藤沙織は、ベーシックインカムによって、モラハラ夫の元を離れることを意識し始める。一方、マリの弟・優斗は「正しいニートの生き方」を広める動画で注目を集め、働かないニートとして時代の象徴となっていく。
        </p>
        <p style={lpBody}>
          だが、政府は労働力不足を理由に、無職者を強制的に「能力開発局」へ送り込む政策を開始。沙織、そして優斗もまた、その渦に巻き込まれていく。やがて、ジャパンコインの不正利用事件を追うマリは、政府と製薬会社が関与する闇の仕組みに辿り着く。制度の裏に隠された現実を目の当たりにしながら、「働くことの意味」「豊かさとは何か」という根源的な問いに直面する。
        </p>
        <p style={{ ...lpBody, fontWeight: 500 }}>
          未来の日本を舞台に、制度に翻弄されながらも人々が自らの「労働」と「生きがい」「幸せ」を模索する群像劇。
        </p>
      </div>
    </LPSection>
  );
}

window.LP_PART1 = { LPHeader, LPHero, LPIntro, LPPurpose, LPThemes, LPTone, LPSynopsis, LPSection, lpBody };
