// LP『働かないで、生きていく（仮）』 — sections part 2 + page assembly
const { Button: LPButton, Chip: LPChip, SectionHeading: LPHeading, Statement: LPStatement, Marquee: LPMarquee, WorkCard: LPWorkCard, DividedGrid: LPDividedGrid } =
  window.GUMDesignSystem_f11fa0;
const { LP_ASSETS: A2, LP_WORKS, LP_DISCORD_ITEMS, LP_MEMBERS, LP_AMBASSADORS, LP_PROFILE } = window.LP_DATA;
const { LPHeader, LPHero, LPIntro, LPPurpose, LPThemes, LPTone, LPSynopsis, LPSection, lpBody } = window.LP_PART1;

function LPCocreation() {
  return (
    <section data-screen-label="cocreation" style={{ color: "#fff", padding: "130px 0 60px", textAlign: "center" }}>
      <div className="container section">
        <LPStatement label="Co-creation">
          30,000 people.<br />One film.
        </LPStatement>
        <div style={{ maxWidth: "680px", margin: "44px auto 0", display: "grid", gap: "28px" }}>
          <p style={{ ...lpBody, fontSize: "calc(var(--fs-lead) * 1.5)", lineHeight: 1.8 }}>
            <span style={{ fontWeight: 700 }}>僕たち、わたしたちの映画</span><br /><span style={{ fontWeight: 400 }}>と言える3万人の熱量を<br />集めたい</span>
          </p>
          <p style={lpBody}>
            映画界も変わる時がきています。私たちが求めているのは、3年後の映画公開日に「これは、わたしたちの映画だ」と胸を張って言い切れる3万人の共創者です。
          </p>
          <p style={lpBody}>
            緻密な戦略で数字を追いかける「逆算思考」を捨て、関わる人たちそれぞれの「日常」と「余白」を大切にしながら進める物語。そこに集まる予期せぬ縁や、奇跡のような共鳴が、社会現象という名の「風」を起こすと信じています。
          </p>
        </div>
      </div>
    </section>
  );
}

function LPProducer() {
  return (
    <LPSection id="producer" label="PRODUCER" darkLabel style={{ background: "var(--surface-sub)", color: "var(--color-text)", padding: "110px 0" }}>
      <LPHeading en="Producer" ja="映画プロデューサー" />
      <div style={{ display: "flex", gap: "60px", marginTop: "50px", flexWrap: "wrap" }}>
        <div style={{ flex: "0 1 320px", minWidth: "260px" }}>
          <img src={LP_PROFILE.image} alt={LP_PROFILE.name} style={{ width: "100%", display: "block", borderRadius: "var(--radius)", objectFit: "cover", aspectRatio: "4 / 5" }} />
        </div>
        <div style={{ flex: "1 1 380px", minWidth: "300px" }}>
          <p style={{ ...lpBody, fontWeight: 700, fontSize: "var(--fs-lead)", lineHeight: 1.6 }}>{LP_PROFILE.name}</p>
          <p style={{ ...lpBody, fontSize: "var(--fs-small)", color: "var(--text-muted)", margin: "8px 0 0", lineHeight: 1.8 }}>{LP_PROFILE.title}</p>
          <div style={{ display: "grid", gap: "22px", marginTop: "26px" }}>
            {LP_PROFILE.body.map((p, i) => (
              <p key={i} style={{ ...lpBody, fontSize: "16px" }}>{p}</p>
            ))}
          </div>
        </div>
      </div>
      <p style={{ ...lpBody, fontWeight: 500, margin: "70px 0 24px" }}>代表作</p>
      <LPDividedGrid columns={3}>
        {LP_WORKS.map((w) => (
          <LPWorkCard key={w.title} image={w.image} title={w.title} date={w.date} />
        ))}
      </LPDividedGrid>
    </LPSection>
  );
}

function LPDiscord() {
  return (
    <LPSection id="discord" label="COMMUNITY" style={{ color: "#fff", padding: "110px 0 60px" }}>
      <LPHeading en="Open Process" ja="Discordで体験する「プロセスの全出し」" light />
      <div style={{ maxWidth: "680px", marginTop: "44px", display: "grid", gap: "28px" }}>
        <p style={lpBody}>
          ベーシックインカムが導入された世界を一緒に考えたい。映画をつくる側として一緒に関わりたい。どんな動機でも構いません。Discordコミュニティはこれまでの映画制作のブラックボックスを解放し、「映画をゼロから共につくる」を体現していきます。
        </p>
        <p style={{ ...lpBody, fontWeight: 500 }}>Discordで公開する内容（予定）</p>
      </div>
      <div style={{ marginTop: "30px" }}>
        <LPDividedGrid columns={3}>
          {LP_DISCORD_ITEMS.map((item) => (
            <div key={item.title} style={{ padding: "10px 4px 20px" }}>
              <LPChip badge style={{ color: "#fff", borderColor: "var(--border-translucent)", marginBottom: "18px" }}>{item.title}</LPChip>
              <p style={{ ...lpBody, fontSize: "16px" }}>{item.body}</p>
            </div>
          ))}
        </LPDividedGrid>
      </div>
    </LPSection>
  );
}

function LPRedefine() {
  return (
    <section data-screen-label="redefine" style={{ color: "#fff", padding: "120px 0 40px", textAlign: "center" }}>
      <div className="container section">
        <LPStatement label="「働く」を再定義する">Work = make others' lives lighter.</LPStatement>
        <div style={{ maxWidth: "680px", margin: "44px auto 0", display: "grid", gap: "28px" }}>
          <p style={{ ...lpBody, fontWeight: 500, fontSize: "calc(var(--fs-lead) * 1.5)", lineHeight: 1.8 }}>
            働く ＝ 傍(はた) が、楽(らく) になる
          </p>
          <p style={lpBody}>
            これが、この映画が社会に問いかける核です。お金のための労働から解放された時、私たちは誰かを笑顔にするために何ができるのか。共感コミュニティ通貨「eumo」や、新しい働き方を模索する仲間たちと共に、この問いを3年かけて社会に実装していきます。
          </p>
        </div>
      </div>
    </section>
  );
}

function LPMemberCard({ m }) {
  const [open, setOpen] = React.useState(false);
  const [truncated, setTruncated] = React.useState(false);
  const bodyRef = React.useRef(null);
  React.useEffect(() => {
    const el = bodyRef.current;
    if (el) setTruncated(el.scrollHeight - el.clientHeight > 2);
  }, []);
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  const linkStyle = { display: "inline-block", marginTop: "8px", padding: 0, background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-ja)", fontSize: "var(--fs-small)", color: "var(--accent)", textDecoration: "underline", textUnderlineOffset: "3px" };
  return (
    <div style={{ padding: "6px 4px 20px" }}>
      <img src={m.image} alt={m.name} style={{ width: "100%", display: "block", borderRadius: "var(--radius)", objectFit: "cover", aspectRatio: "1 / 1", objectPosition: m.objectPosition || "top" }} />
      <p style={{ ...lpBody, fontWeight: 700, fontSize: "var(--fs-lead)", margin: "20px 0 0", lineHeight: 1.6 }}>{m.name}</p>
      <p style={{ ...lpBody, fontSize: "var(--fs-small)", color: "var(--text-sub)", margin: "6px 0 0", lineHeight: 1.8 }}>{m.role}</p>
      <p ref={bodyRef} style={{ ...lpBody, fontSize: "16px", margin: "12px 0 0", whiteSpace: "pre-line", display: "-webkit-box", WebkitLineClamp: 2, WebkitBoxOrient: "vertical", overflow: "hidden" }}>{m.body}</p>
      {truncated && (
        <button type="button" onClick={() => setOpen(true)} style={linkStyle}>続きを読む</button>
      )}
      {open && (
        <div onClick={() => setOpen(false)} style={{ position: "fixed", inset: 0, zIndex: 10000, background: "rgba(0,0,0,0.72)", display: "flex", alignItems: "center", justifyContent: "center", padding: "24px" }}>
          <div onClick={(e) => e.stopPropagation()} style={{ background: "var(--surface-dark)", border: "1px solid var(--border-translucent)", borderRadius: "var(--radius)", maxWidth: "560px", width: "100%", maxHeight: "80vh", overflowY: "auto", padding: "36px 32px", boxShadow: "0 24px 60px rgba(0,0,0,0.5)" }}>
            <p style={{ ...lpBody, fontWeight: 700, fontSize: "var(--fs-lead)", margin: 0, lineHeight: 1.6 }}>{m.name}</p>
            <p style={{ ...lpBody, fontSize: "var(--fs-small)", color: "var(--text-sub)", margin: "6px 0 0", lineHeight: 1.8 }}>{m.role}</p>
            <p style={{ ...lpBody, fontSize: "16px", margin: "20px 0 0", lineHeight: 1.9, whiteSpace: "pre-line" }}>{m.body}</p>
            <button type="button" onClick={() => setOpen(false)} style={{ marginTop: "28px", padding: "10px 24px", background: "none", border: "1px solid var(--border-translucent)", borderRadius: "999px", cursor: "pointer", fontFamily: "var(--font-ja)", fontSize: "var(--fs-small)", color: "#fff" }}>閉じる</button>
          </div>
        </div>
      )}
    </div>
  );
}

function LPMembers() {
  return (
    <LPSection id="members" label="MEMBERS" style={{ color: "#fff", padding: "100px 0 60px" }}>
      <LPHeading en="Co-creators" ja="共創者" light />
      <div style={{ marginTop: "44px" }}>
        <LPDividedGrid columns={3}>
          {LP_MEMBERS.map((m) => (
            <LPMemberCard key={m.name} m={m} />
          ))}
        </LPDividedGrid>
        <div style={{ marginTop: "72px" }}>
          <LPHeading en="Ambassadors" ja="アンバサダー" light />
        </div>
        <div style={{ marginTop: "44px" }}>
          <LPDividedGrid columns={3}>
            {LP_AMBASSADORS.map((m) => (
              <LPMemberCard key={m.name} m={m} />
            ))}
          </LPDividedGrid>
        </div>
        <p style={{ ...lpBody, fontSize: "var(--fs-small)", color: "var(--text-sub)", marginTop: "24px" }}>
          順不同
        </p>
      </div>
    </LPSection>
  );
}

function LPJoin() {
  return (
    <section id="join" data-screen-label="join" style={{ color: "#fff", padding: "120px 0 0" }}>
      <LPMarquee serif outline size="90px" style={{ color: "#fff", opacity: 0.8 }}>
        Join the Journey —&nbsp;
      </LPMarquee>
      <div className="container section" style={{ padding: "80px var(--section-pad-x) 100px", textAlign: "left" }}>
        <LPHeading en="Join" ja="Discordへの参加ステップ" light />
        <div style={{ maxWidth: "680px", marginTop: "44px", display: "grid", gap: "28px" }}>
          <p style={lpBody}>
            「ネタバレを承知で、映画制作までの約2年半、つくる側としてプロセスを楽しみたい、映画制作の裏側に深く関わりたい」という方々を募集します。
          </p>
          <p style={{ ...lpBody, fontWeight: 500 }}>
            ベーシックインカムが導入された世界を一緒に考え、数年後の未来を今生きてみませんか？
          </p>
        </div>
        <div style={{ marginTop: "56px" }}>
          <LPButton dark href="#">Join Discord</LPButton>
        </div>
      </div>
      <footer style={{ borderTop: "1px solid var(--border-translucent)", padding: "34px 40px", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-en-sans)", fontWeight: 500, fontSize: "14px", letterSpacing: "var(--ls-wide)" }}>GUM</span>
        <span style={{ fontFamily: "var(--font-en-sans)", fontWeight: 500, fontSize: "12px", letterSpacing: "var(--ls-wide)", color: "var(--text-sub)" }}>
          © GUM Inc. — 映画『働かないで、生きていく（仮）』共創プロジェクト
        </span>
      </footer>
    </section>
  );
}

function LPTitleSplash() {
  const [phase, setPhase] = React.useState("in");
  React.useEffect(() => {
    document.body.style.overflow = "hidden";
    const raf = requestAnimationFrame(() => setPhase("hold"));
    const t2 = setTimeout(() => setPhase("out"), 2000);
    const t3 = setTimeout(() => { setPhase("done"); document.body.style.overflow = ""; }, 2900);
    return () => { cancelAnimationFrame(raf); clearTimeout(t2); clearTimeout(t3); document.body.style.overflow = ""; };
  }, []);
  if (phase === "done") return null;
  const out = phase === "out";
  const shown = phase !== "in";
  return (
    <div style={{ position: "fixed", inset: 0, zIndex: 9999, background: "var(--surface-dark)", display: "flex", alignItems: "center", justifyContent: "center", opacity: out ? 0 : 1, transition: "opacity 0.85s ease", pointerEvents: out ? "none" : "auto" }}>
      <h1 style={{ fontFamily: "var(--font-ja-serif)", fontWeight: 700, color: "#fff", fontSize: "clamp(32px, 8vw, 84px)", letterSpacing: "0.08em", lineHeight: 1.5, margin: 0, textAlign: "center", opacity: shown ? 1 : 0, transform: shown ? "translateY(0)" : "translateY(24px)", transition: "opacity 1s ease, transform 1s ease" }}>
        働かないで、<br />生きていく
      </h1>
    </div>
  );
}

function LPPage() {
  const darkRef = React.useRef(null);
  React.useEffect(() => {
    document.body.classList.add("black");
    return () => document.body.classList.remove("black");
  }, []);
  return (
    <div>
      <LPTitleSplash />
      <LPHeader />
      <LPHero />
      <LPIntro darkRef={darkRef} />
      <LPPurpose />
      <LPThemes />
      <LPTone />
      <LPSynopsis />
      <LPCocreation />
      <LPProducer />
      <LPDiscord />
      <LPRedefine />
      <LPMembers />
      <LPJoin />
    </div>
  );
}

window.LPPage = LPPage;