/* global React, BrandMark, BRAND_GOLD */
// Intro splash — broşür kapağı: krem zemin, ince koyu çerçeve, altın GG
// monogramı ve tipografik kilit. Monogram, sol üstteki nav logosuna morph olur;
// kalan kapak öğeleri yerinde solarak kaybolur.

function IntroSplash({ onDone }) {
  const [out, setOut] = React.useState(false);
  const [removed, setRemoved] = React.useState(false);
  const [viewportWidth, setViewportWidth] = React.useState(() => window.innerWidth);

  React.useEffect(() => {
    // ?introhold — kapağı incelemek için açılışı bekletir (yalnızca geliştirme)
    const hold = window.location.search.includes("introhold") ? 60000 : 0;
    const t1 = setTimeout(() => setOut(true), 1500 + hold);
    const t2 = setTimeout(() => { setRemoved(true); onDone && onDone(); }, 3400 + hold);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, [onDone]);

  React.useEffect(() => {
    const onResize = () => setViewportWidth(window.innerWidth);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  if (removed) return null;

  // Broşür paleti
  const coverBg = "#F7F1E8";
  const coverInk = "#221C15";
  const gold = BRAND_GOLD;

  // Nav'daki Wordmark monogramı: height 22*1.05 ≈ 23px, navLeft/navTop.
  const isMobile = viewportWidth <= 760;
  const navLeft = isMobile ? 18 : 32;
  const navTop = isMobile ? 14 : 18;
  const markH = 23;
  const scale = isMobile ? 2.9 : 4.2;
  const pct = (scale / 2) * 100;

  const fadeStyle = {
    opacity: out ? 0 : 1,
    transition: "opacity 700ms ease",
  };

  return (
    <div
      aria-hidden="true"
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 100,
        background: out ? "transparent" : coverBg,
        transition: "background 1000ms cubic-bezier(0.4, 0, 0.2, 1) 600ms",
        pointerEvents: out ? "none" : "auto",
      }}
    >
      {/* İnce koyu çerçeve — broşürdeki gibi */}
      <div
        style={{
          position: "absolute",
          inset: isMobile ? 16 : 28,
          border: `2px solid ${coverInk}`,
          ...fadeStyle,
        }}
      />

      {/* Kapak kilidi — monogram HARİÇ; monogram ayrı morph elemanı */}
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          textAlign: "center",
          gap: 0,
          ...fadeStyle,
        }}
      >
        {/* Monogramın kapladığı boşluk (morph elemanı buraya hizalanır) */}
        <div style={{ height: markH * scale, marginBottom: 26 }} />

        <div
          style={{
            fontFamily: "'Cormorant Garamond', 'Instrument Serif', Georgia, serif",
            fontSize: "clamp(36px, 5.4vw, 58px)",
            fontWeight: 500,
            letterSpacing: "0.06em",
            textTransform: "uppercase",
            color: gold,
            lineHeight: 1,
          }}
        >
          Gizem Güleç
        </div>

        <div
          style={{
            marginTop: 14,
            fontFamily: "var(--font-body)",
            fontWeight: 600,
            fontSize: "clamp(12px, 1.6vw, 17px)",
            letterSpacing: "0.08em",
            textTransform: "uppercase",
            color: coverInk,
          }}
        >
          Yüksek Mimar | Restorasyon Uzmanı
        </div>

        {/* Ayraç: çizgi · nokta · çizgi */}
        <div style={{ marginTop: 26, display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{ width: "clamp(60px, 9vw, 110px)", height: 2, background: gold }} />
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: gold }} />
          <span style={{ width: "clamp(60px, 9vw, 110px)", height: 2, background: gold }} />
        </div>

        <div
          style={{
            marginTop: 26,
            fontFamily: "var(--font-body)",
            fontWeight: 500,
            fontSize: "clamp(11px, 1.5vw, 15px)",
            letterSpacing: "0.32em",
            textTransform: "uppercase",
            color: coverInk,
            display: "flex",
            alignItems: "center",
            gap: 12,
          }}
        >
          <span>Mimarlık</span>
          <span style={{ color: gold, fontSize: "0.7em" }}>●</span>
          <span>Tasarım</span>
          <span style={{ color: gold, fontSize: "0.7em" }}>●</span>
          <span>Restorasyon</span>
        </div>
      </div>

      {/* Morph olan monogram — merkezden nav pozisyonuna */}
      <div
        style={{
          position: "fixed",
          top: navTop,
          left: navLeft,
          transformOrigin: "top left",
          transform: out
            ? "translate(0, 0) scale(1)"
            : `translate(calc(50vw - ${navLeft}px - ${pct}%), calc(50vh - ${navTop}px - ${(markH * scale) / 2 + 78}px)) scale(${scale})`,
          transition: "transform 1600ms cubic-bezier(0.72, 0, 0.12, 1)",
          willChange: "transform",
        }}
      >
        <BrandMark height={markH} color={gold} />
      </div>
    </div>
  );
}

window.IntroSplash = IntroSplash;