// page_top.jsx — landing page

function PageTop() {
  const { go } = useRouter();
  const lang = useLang();
  const theme = window.__HOSHI_THEME || "light";
  const hero = window.__HOSHI_HERO || "canvas";
  const intensity = window.__HOSHI_INTENSITY ?? 1.0;

  const featured = PRODUCTS.filter(p => p.featured).slice(0, 4);

  return (
    <main>
      {/* Hero */}
      <section style={{
        position: "relative",
        height: "92vh",
        minHeight: 720,
        overflow: "hidden",
        background: theme === "dark" ? "#0A0908" : "#F8F5F0",
      }}>
        {hero === "canvas" && (
          <div style={{ position: "absolute", inset: 0 }}>
            <PearlHeroCanvas intensity={intensity} theme={theme} />
          </div>
        )}
        {hero === "still" && (
          <div style={{
            position: "absolute", inset: 0,
            background: theme === "dark"
              ? "radial-gradient(ellipse at 50% 40%, #1a1714 0%, #0A0908 70%)"
              : "linear-gradient(180deg, #F8F5F0 0%, #E8DED0 100%)",
          }}>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
              <PearlCanvas size={520} darkness={theme === "dark" ? 0 : 0.02} hueShift={-0.1} />
            </div>
          </div>
        )}

        <div style={{
          position: "absolute", inset: 0,
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          textAlign: "center",
          color: theme === "dark" ? "#F8F5F0" : "#0C0C0C",
          pointerEvents: "none",
          padding: "0 40px",
        }}>
          <div className="hoshi-reveal" style={{
            fontFamily: "var(--sans)",
            fontSize: 11,
            letterSpacing: "0.48em",
            textTransform: "uppercase",
            opacity: 0.68,
            marginBottom: 32,
          }}>
            {lang === "ja" ? "創業 1925年 · 銀座" : "Est. 1925 · Ginza, Tokyo"}
          </div>
          <h1 className="hoshi-reveal" style={{
            fontFamily: "var(--serif-display)",
            fontSize: "clamp(56px, 8.5vw, 148px)",
            fontWeight: 400,
            lineHeight: 1.0,
            letterSpacing: "-0.015em",
            margin: 0,
            animationDelay: "120ms",
          }}>
            {lang === "ja"
              ? <><span style={{ fontFamily: "var(--serif-jp)", fontWeight: 300, letterSpacing: "0.08em" }}>百年の、</span><em style={{ fontStyle: "italic" }}>lumière</em></>
              : <>A Hundred Years, <em style={{ fontStyle: "italic" }}>of Light</em></>
            }
          </h1>
          <p className="hoshi-reveal" style={{
            marginTop: 40,
            fontFamily: "var(--serif-jp)",
            fontSize: 16,
            lineHeight: 2.0,
            maxWidth: 520,
            opacity: 0.85,
            animationDelay: "240ms",
            fontWeight: 300,
            letterSpacing: "0.06em",
          }}>
            {lang === "ja"
              ? "伊勢志摩の静かな海、南洋の深い青、ダイヤの結晶。四代にわたる銀座の工房が、一点のために紡ぐ光。"
              : "The quiet seas of Ise-Shima, the depths of the South Pacific, the crystal of diamond. A four-generation atelier in Ginza, threading light for a single piece."}
          </p>
          <div style={{ pointerEvents: "auto", display: "flex", gap: 28, marginTop: 56 }} className="hoshi-reveal" css={{ animationDelay: "360ms" }}>
            <SolidButton onClick={() => go("collection")} theme={theme}>
              {lang === "ja" ? "コレクション" : "View Collection"}
            </SolidButton>
            <GhostLink onClick={() => go("bespoke")} theme={theme}>
              {lang === "ja" ? "ビスポークの旅" : "Begin Bespoke"}
            </GhostLink>
          </div>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: "absolute", bottom: 36, left: "50%", transform: "translateX(-50%)",
          fontFamily: "var(--sans)",
          fontSize: 9,
          letterSpacing: "0.4em",
          textTransform: "uppercase",
          color: theme === "dark" ? "rgba(244,238,227,0.55)" : "rgba(12,12,12,0.5)",
          writingMode: "vertical-rl",
        }}>
          {lang === "ja" ? "スクロール" : "Scroll"}
        </div>
      </section>

      {/* Manifesto */}
      <section style={{ padding: "160px 40px", background: "var(--off-white)", color: "var(--ink)" }}>
        <div style={{ maxWidth: 960, margin: "0 auto", display: "grid", gridTemplateColumns: "160px 1fr", gap: 80 }}>
          <div className="hoshi-eyebrow" style={{ paddingTop: 12 }}>
            {lang === "ja" ? "メゾンのこと" : "The Maison"}
          </div>
          <div>
            <p style={{
              fontFamily: "var(--serif-display)",
              fontSize: "clamp(30px, 3vw, 46px)",
              fontWeight: 400,
              lineHeight: 1.45,
              letterSpacing: "-0.005em",
              margin: 0,
              color: "var(--ink)",
              fontStyle: "italic",
            }}>
              {lang === "ja"
                ? "「一連の真珠にも、一つの宇宙がある。」"
                : "\u201cIn a single strand of pearls, there is a universe.\u201d"}
            </p>
            <p style={{
              marginTop: 40,
              fontFamily: "var(--serif-jp)",
              fontSize: 16,
              lineHeight: 2.0,
              color: "#2A2623",
              maxWidth: 680,
              fontWeight: 300,
            }}>
              {lang === "ja"
                ? "1925年、銀座五丁目に一軒の宝飾工房が生まれた。伊勢志摩で育まれるアコヤ真珠、南洋の黒蝶と白蝶、そしてダイヤモンド——四代を経て受け継がれる石合わせの眼と、鍛造・彫金・石留めの一切を自社工房で行う姿勢は、今も昔も変わらない。一点に時間を重ねること。それがわたしたちの流儀です。"
                : "In 1925, a small jewellery atelier was founded at 5-chōme Ginza. Akoya pearls raised in Ise-Shima, Tahitian and South Sea pearls, and diamonds — passed through four generations of stone-selecting eyes. Every forging, engraving and setting done in-house. Our way is to let time accumulate in a single piece."}
            </p>
            <div style={{ marginTop: 48, display: "flex", gap: 32, alignItems: "center" }}>
              <GhostLink onClick={() => go("heritage")}>
                {lang === "ja" ? "四代の系譜へ" : "Four Generations"}
              </GhostLink>
              <GhostLink onClick={() => go("artisans")}>
                {lang === "ja" ? "職人のこと" : "Meet the Artisans"}
              </GhostLink>
            </div>
          </div>
        </div>
      </section>

      {/* Collections teaser */}
      <section style={{ padding: "120px 40px 160px", background: "var(--pearl-100)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 80 }}>
            <SectionHead
              eyebrowJa="コレクション" eyebrowEn="Collection"
              titleJa="四つの章" titleEn="Four Chapters"
            />
            <GhostLink onClick={() => go("collection")}>
              {lang === "ja" ? "すべて見る" : "Explore all"}
            </GhostLink>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 2 }}>
            {COLLECTIONS.map((c, idx) => {
              const darkCols = ["yoru", "kotodama"];
              const isDark = darkCols.includes(c.id);
              const bg = c.id === "tsuki" ? "#EFE8DB"
                : c.id === "yoru" ? "#0E0D0C"
                : c.id === "akatsuki" ? "#FBF8F2"
                : "#1A1714";
              return (
                <button
                  key={c.id}
                  onClick={() => go("collection", c.id)}
                  style={{
                    background: bg,
                    color: isDark ? "#F4EEE3" : "#0C0C0C",
                    padding: "56px 36px 48px",
                    textAlign: "left",
                    aspectRatio: "3/4.2",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    position: "relative",
                    overflow: "hidden",
                    cursor: "pointer",
                  }}
                >
                  <div>
                    <div className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.6 }}>
                      Chapter 0{idx + 1}
                    </div>
                    <div style={{
                      fontFamily: "var(--serif-jp)",
                      fontWeight: 300,
                      fontSize: 48,
                      letterSpacing: "0.04em",
                      lineHeight: 1.1,
                      marginTop: 16,
                    }}>
                      {lang === "ja" ? c.nameJa.split(" ")[0] : c.nameEn}
                    </div>
                    <div style={{
                      fontFamily: "var(--serif-display)",
                      fontStyle: "italic",
                      fontSize: 18,
                      marginTop: 8,
                      opacity: 0.75,
                    }}>
                      {lang === "ja" ? c.nameJa.split("—")[1]?.trim() : c.nameJa.split("—")[1]?.trim()}
                    </div>
                  </div>

                  <div style={{ position: "absolute", right: -20, top: "45%", transform: "translateY(-50%)", opacity: 0.85 }}>
                    <PearlCanvas
                      size={240}
                      darkness={isDark ? 0.9 : 0.04}
                      hueShift={c.id === "yoru" ? 0.4 : c.id === "akatsuki" ? -0.3 : -0.1}
                    />
                  </div>

                  <div>
                    <p style={{
                      fontFamily: "var(--serif-jp)",
                      fontSize: 12,
                      lineHeight: 1.7,
                      opacity: 0.85,
                      maxWidth: 240,
                      marginBottom: 24,
                      position: "relative",
                      zIndex: 1,
                    }}>
                      {lang === "ja" ? c.taglineJa : c.taglineEn}
                    </p>
                    <div className="hoshi-eyebrow" style={{ color: "inherit", opacity: 0.5 }}>
                      {c.pieces} {lang === "ja" ? "点" : "pieces"}
                    </div>
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </section>

      {/* Featured pieces */}
      <section style={{ padding: "140px 40px", background: "var(--off-white)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <SectionHead
            eyebrowJa="新作・注目の一点" eyebrowEn="Featured · Maître's Selection"
            titleJa="今月の薦め" titleEn="This Season"
            align="center"
          />
          <div style={{ marginTop: 80, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 40 }}>
            {featured.map((p) => (
              <div key={p.id}>
                <ProductThumb product={p} onClick={() => go("pdp", p.id)} />
                <div style={{ marginTop: 20 }}>
                  <div className="hoshi-eyebrow">{p.id}</div>
                  <div style={{ fontFamily: "var(--serif-jp)", fontSize: 18, marginTop: 6, fontWeight: 300 }}>
                    {lang === "ja" ? p.nameJa : p.nameEn}
                  </div>
                  <div style={{ fontFamily: "var(--serif-display)", fontStyle: "italic", fontSize: 14, color: "#5E5851", marginTop: 4 }}>
                    {formatPrice(p, lang)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bespoke CTA — full-bleed dark panel */}
      <section style={{ padding: "160px 40px", background: "var(--urushi)", color: "#F8F5F0" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 100, alignItems: "center" }}>
          <div style={{ position: "relative", aspectRatio: "1/1" }}>
            <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
              <PearlCanvas size={420} darkness={0} hueShift={-0.1} />
            </div>
            {/* Faint gold circle */}
            <div style={{
              position: "absolute", inset: "10%",
              border: "1px solid rgba(201,169,97,0.25)",
              borderRadius: "50%",
            }}/>
          </div>
          <div>
            <div className="hoshi-eyebrow" style={{ color: "#C9A961" }}>
              {lang === "ja" ? "ビスポーク" : "Bespoke"}
            </div>
            <h2 style={{
              fontFamily: "var(--serif-display)",
              fontSize: "clamp(40px, 4vw, 64px)",
              fontWeight: 400,
              lineHeight: 1.1,
              margin: "20px 0 32px",
              letterSpacing: "-0.01em",
            }}>
              {lang === "ja" ? "一点のために、半年。" : <>Six Months,<br/> for a Single Piece.</>}
            </h2>
            <p style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 2.0, opacity: 0.82, maxWidth: 480, fontWeight: 300 }}>
              {lang === "ja"
                ? "お客様との対話から始まる、一年から半年をかけたビスポーク。原石の選定、図面、蝋型、鋳造、石留め、仕上げ——銀座の本店工房にて、当主と職人が一人の手で仕上げます。"
                : "Beginning with conversation, spanning six months to a year. Rough selection, drawings, wax, casting, setting, finishing — all done by the Maître and her artisans at the Ginza atelier."}
            </p>
            <div style={{ marginTop: 48, display: "flex", gap: 28 }}>
              <SolidButton onClick={() => go("bespoke")} theme="dark">
                {lang === "ja" ? "予約する" : "Request an Appointment"}
              </SolidButton>
              <GhostLink onClick={() => go("artisans")} theme="dark">
                {lang === "ja" ? "職人を知る" : "The Artisans"}
              </GhostLink>
            </div>
          </div>
        </div>
      </section>

      {/* Century warranty strip */}
      <section style={{ padding: "100px 40px", background: "var(--paper)" }}>
        <div style={{ maxWidth: 1200, margin: "0 auto", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 60 }}>
          {[
            { nJa: "百年", nEn: "100", lJa: "無償保証", lEn: "Century Warranty", dJa: "ご購入から百年間、無償でメンテナンス。", dEn: "Complimentary maintenance for a hundred years." },
            { nJa: "四代", nEn: "IV", lJa: "の系譜", lEn: "Generations", dJa: "1925年銀座、変わらぬ一つの工房にて。", dEn: "Since 1925, one atelier in Ginza." },
            { nJa: "全工程", nEn: "100%", lJa: "自社製作", lEn: "In-House", dJa: "鍛造から石留まで、全て銀座本店にて。", dEn: "From forging to setting, all at Ginza." },
            { nJa: "国際発送", nEn: "World", lJa: "FedEx便", lEn: "Wide · FedEx", dJa: "世界各国へ、保険付き安全発送。", dEn: "Insured worldwide delivery." },
          ].map((item, i) => (
            <div key={i} style={{ textAlign: "center" }}>
              <div style={{
                fontFamily: "var(--serif-display)",
                fontSize: 56,
                fontWeight: 400,
                letterSpacing: "0.02em",
              }}>
                {lang === "ja" ? item.nJa : item.nEn}
              </div>
              <div className="hoshi-eyebrow" style={{ marginTop: 8 }}>
                {lang === "ja" ? item.lJa : item.lEn}
              </div>
              <p style={{ fontFamily: "var(--serif-jp)", fontSize: 13, color: "#5E5851", marginTop: 20, lineHeight: 1.8 }}>
                {lang === "ja" ? item.dJa : item.dEn}
              </p>
            </div>
          ))}
        </div>
      </section>

      {/* Journal teaser */}
      <section style={{ padding: "140px 40px 160px", background: "var(--off-white)" }}>
        <div style={{ maxWidth: 1400, margin: "0 auto" }}>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 60 }}>
            <SectionHead
              eyebrowJa="Journal" eyebrowEn="Journal"
              titleJa="読み物" titleEn="Editorial"
            />
            <GhostLink onClick={() => go("journal")}>
              {lang === "ja" ? "Journal全て" : "All stories"}
            </GhostLink>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr", gap: 40 }}>
            {JOURNAL.slice(0, 3).map((j, i) => (
              <article key={j.id} style={{ cursor: "pointer" }} onClick={() => go("journal", j.id)}>
                <div style={{
                  aspectRatio: i === 0 ? "16/10" : "4/5",
                  background: j.color,
                  position: "relative",
                  overflow: "hidden",
                }}>
                  <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center" }}>
                    <PearlCanvas
                      size={i === 0 ? 240 : 180}
                      darkness={hexDarkness(j.color) > 0.5 ? 0.9 : 0.04}
                      hueShift={0}
                    />
                  </div>
                </div>
                <div style={{ marginTop: 20 }}>
                  <div className="hoshi-eyebrow">
                    {(lang === "ja" ? j.categoryJa : j.categoryEn)} · {lang === "ja" ? j.dateJa : j.dateEn}
                  </div>
                  <h3 style={{
                    fontFamily: i === 0 ? "var(--serif-display)" : "var(--serif-jp)",
                    fontWeight: i === 0 ? 400 : 300,
                    fontSize: i === 0 ? 30 : 20,
                    letterSpacing: i === 0 ? "-0.005em" : "0.02em",
                    lineHeight: 1.3,
                    margin: "14px 0 10px",
                  }}>
                    {lang === "ja" ? j.titleJa : j.titleEn}
                  </h3>
                  {i === 0 && (
                    <p style={{ fontFamily: "var(--serif-jp)", fontSize: 14, lineHeight: 1.8, color: "#5E5851", margin: 0, maxWidth: 520 }}>
                      {lang === "ja" ? j.excerptJa : j.excerptEn}
                    </p>
                  )}
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.PageTop = PageTop;
