// over.jsx, Over-pagina met grote Oliver leunend tegen geschiedenis-blok.

function OverPagina({ over, hero, caps, onBack, accent = "#E63946", fontScale, setFontScale }) {
  const showOliver = caps?.oliverOverEnabled !== false;
  const showOliverBalloon = caps?.oliverOverBalloonEnabled !== false;
  if (!over) {
    return (
      <div style={{ padding: 40, textAlign: "center" }}>
        <div className="app-loader">🌶️ Laden…</div>
      </div>
    );
  }

  return (
    <div style={{
      minHeight: "100%", width: "100%",
      position: "relative", overflowX: "hidden",
      background: "#D6EFC7",
      fontFamily: "'Patrick Hand', cursive",
      color: "#1A1A1A",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.07) 1.2px, transparent 1.4px)",
        backgroundSize: "12px 12px",
        pointerEvents: "none", zIndex: 0,
      }} />

      <div style={{
        position: "sticky", top: 0, zIndex: 20,
        background: "#F0FAE6",
        borderBottom: "5px solid #1A1A1A",
        padding: "14px 40px",
        display: "flex", justifyContent: "space-between", alignItems: "center",
        boxShadow: "0 4px 0 rgba(0,0,0,0.08)",
      }}>
        <button onClick={onBack} className="btn-comic" style={{ fontSize: 20, padding: "6px 16px" }}>
          ← HOME
        </button>
        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: 40, letterSpacing: "0.05em",
          color: accent, WebkitTextStroke: "2px #1A1A1A",
          textShadow: "4px 4px 0 #1A1A1A",
        }}>
          {over.titel || "OVER HETE PEPER"}
        </div>
        <FontSizer scale={fontScale} setScale={setFontScale} />
      </div>

      <section style={{
        position: "relative", zIndex: 2,
        padding: "40px 40px 60px",
        maxWidth: 1720, margin: "0 auto",
        display: "grid",
        gridTemplateColumns: showOliver
          ? "minmax(720px, 1.1fr) minmax(440px, 0.9fr)"
          : "minmax(0, 1fr)",
        gap: 20,
        alignItems: "end",
      }}>
        {showOliver && (
          /* Oliver-kolom, groot, leunend */
          <div style={{
            minHeight: 960,
            display: "flex",
            alignItems: "flex-end",
            gap: 24,
          }}>
            {showOliverBalloon && <div style={{
              background: "#FFD23F",
              border: "5px solid #1A1A1A",
              boxShadow: "8px 8px 0 #1A1A1A",
              padding: "22px 26px",
              fontFamily: "'Patrick Hand', cursive",
              fontSize: 24, lineHeight: 1.25,
              width: 280,
              flexShrink: 0,
              alignSelf: "flex-end",
              marginBottom: 480,
              transform: "rotate(-3deg)",
              position: "relative",
              zIndex: 4,
              color: "#1A1A1A",
            }} className="wobble">
              <div style={{
                fontFamily: "'Bangers', sans-serif", fontSize: 32,
                color: "#E63946", WebkitTextStroke: "1.3px #1A1A1A",
                letterSpacing: "0.04em", marginBottom: 6, lineHeight: 1,
              }}>
                YO!
              </div>
              {over.ballonTekst || "Ik ben Oliver en vertel je alles over Hete Peper"}
              <div style={{
                position: "absolute",
                right: -22, bottom: 34,
                width: 0, height: 0,
                borderTop: "14px solid transparent",
                borderBottom: "14px solid transparent",
                borderLeft: "22px solid #1A1A1A",
              }} />
              <div style={{
                position: "absolute",
                right: -15, bottom: 38,
                width: 0, height: 0,
                borderTop: "10px solid transparent",
                borderBottom: "10px solid transparent",
                borderLeft: "16px solid #FFD23F",
              }} />
            </div>}

            <img src="/assets/oliver-b2b.png" alt="Oliver"
              style={{
                width: "min(720px, 38vw)",
                minWidth: 420,
                height: "auto",
                flexShrink: 0,
                marginLeft: "auto",
                filter: "drop-shadow(8px 8px 0 rgba(0,0,0,0.25))",
                transform: "rotate(-3deg)",
                zIndex: 3,
                alignSelf: "flex-end",
              }} />
          </div>
        )}

        {/* Geschiedenis-blok rechts */}
        <div style={{
          background: "#F0FAE6",
          color: "#1A1A1A",
          border: "5px solid #1A1A1A",
          boxShadow: "10px 10px 0 #FFD23F",
          padding: "36px 40px",
          transform: "rotate(-0.2deg)",
          position: "relative",
          zIndex: 2,
        }}>
          {over.introKop && (
            <div style={{
              fontFamily: "'Bangers', sans-serif",
              fontSize: 54, lineHeight: 1,
              color: "#E63946", WebkitTextStroke: "2.2px #1A1A1A",
              textShadow: "4px 4px 0 #1A1A1A", letterSpacing: "0.03em",
              marginBottom: 14,
            }}>
              {over.introKop}
            </div>
          )}

          {over.intro && (
            <div style={{ fontSize: 24, lineHeight: 1.5, color: "#2A2118", marginBottom: 24 }}>
              {over.intro}
            </div>
          )}

          {(over.secties || []).map((s, i) => (
            <div key={i} style={{ marginBottom: 24 }}>
              <div style={{
                fontFamily: "'Bangers', sans-serif", fontSize: 30,
                letterSpacing: "0.04em", color: "#1A1A1A",
                marginBottom: 6,
              }}>{s.kop}</div>
              <div style={{ fontSize: 22, lineHeight: 1.5, color: "#2A2118", whiteSpace: "pre-wrap" }}>
                {s.tekst}
              </div>
            </div>
          ))}

          {over.afsluiter && (
            <div style={{
              marginTop: 26, padding: "16px 20px",
              border: "3px dashed #1A1A1A",
              fontFamily: "'Bangers', sans-serif", fontSize: 28,
              color: "#E63946", textAlign: "center",
              letterSpacing: "0.04em",
            }}>
              {over.afsluiter}
            </div>
          )}
        </div>
      </section>

      {over.laatstBijgewerkt && (
        <div style={{
          position: "relative", zIndex: 2,
          fontSize: 14, color: "#6B5A3D",
          textAlign: "center", padding: "0 40px 30px",
        }}>
          Laatst bijgewerkt: {over.laatstBijgewerkt}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { OverPagina });