// FontSizer — kleine A- / A+ knoppen in de navigatie voor lettergrootte.
// Waarden worden in localStorage bewaard en toegepast via CSS `zoom` op de
// hele app-wrapper, zodat álle tekst (én padding/borders) mee-schaalt.

const FONT_SCALES = [0.9, 1.0, 1.15, 1.35, 1.6, 1.85];
const DEFAULT_SCALE = 1.0;
const STORAGE_KEY = "hp_font_scale";

function loadFontScale() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    const n = raw ? parseFloat(raw) : DEFAULT_SCALE;
    return FONT_SCALES.includes(n) ? n : DEFAULT_SCALE;
  } catch { return DEFAULT_SCALE; }
}

function saveFontScale(v) {
  try { localStorage.setItem(STORAGE_KEY, String(v)); } catch {}
}

function FontSizer({ scale, setScale }) {
  const [showAllie, setShowAllie] = React.useState(false);
  const idx = FONT_SCALES.indexOf(scale);
  const canSmaller = idx > 0;
  const canBigger = idx >= 0 && idx < FONT_SCALES.length - 1;

  function step(dir) {
    const next = FONT_SCALES[Math.max(0, Math.min(FONT_SCALES.length - 1, idx + dir))];
    setScale(next);
  }

  const btn = (label, onClick, disabled, small) => (
    <button onClick={onClick} disabled={disabled}
      title={label === "A-" ? "Kleiner" : label === "A+" ? "Groter" : "Standaard"}
      style={{
        background: disabled ? "#F4EBDD" : "#FFF8EC",
        border: "3px solid #1A1A1A",
        boxShadow: disabled ? "2px 2px 0 #1A1A1A" : "3px 3px 0 #1A1A1A",
        cursor: disabled ? "default" : "pointer",
        opacity: disabled ? 0.4 : 1,
        fontFamily: "'Bangers', sans-serif",
        fontSize: small ? 14 : 20,
        padding: small ? "2px 8px" : "4px 10px",
        color: "#1A1A1A", letterSpacing: "0.04em",
        lineHeight: 1, minWidth: 36,
      }}
      onMouseDown={e => !disabled && (e.currentTarget.style.transform = "translate(2px,2px)", e.currentTarget.style.boxShadow = "1px 1px 0 #1A1A1A")}
      onMouseUp={e => !disabled && (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "3px 3px 0 #1A1A1A")}
      onMouseLeave={e => !disabled && (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "3px 3px 0 #1A1A1A")}>
      {label}
    </button>
  );

  return (
    <>
      <div style={{
        display: "inline-flex", alignItems: "center",
        gap: 6, padding: "4px 8px",
        background: "#F0FAE6", border: "3px solid #1A1A1A",
        boxShadow: "3px 3px 0 #1A1A1A",
      }}
      title="Lettergrootte">
        {btn("A-", () => step(-1), !canSmaller, true)}
        <button onClick={() => setScale(DEFAULT_SCALE)}
          title="Standaard"
          style={{
            background: "transparent", border: "none", cursor: "pointer",
            fontFamily: "'Bangers', sans-serif",
            fontSize: 22, color: "#1A1A1A", letterSpacing: "0.03em",
            padding: "0 4px", lineHeight: 1,
          }}>
          A
        </button>
        {btn("A+", () => step(1), !canBigger)}
        <AllieButton onClick={() => setShowAllie(true)} />
      </div>
      {showAllie && <AllieModal onClose={() => setShowAllie(false)} />}
    </>
  );
}

function AllieButton({ onClick }) {
  return (
    <button onClick={onClick}
      title="?"
      aria-label="Een geheim"
      className="allie-sparkle"
      style={{
        background: "linear-gradient(135deg, #FF8FBE 0%, #FF4FA3 50%, #FFB6D5 100%)",
        backgroundSize: "200% 200%",
        border: "3px solid #1A1A1A",
        boxShadow: "3px 3px 0 #1A1A1A",
        cursor: "pointer",
        fontFamily: "'Bangers', sans-serif",
        fontSize: 22,
        padding: "4px 10px",
        color: "#FFF",
        textShadow: "1px 1px 0 #1A1A1A",
        letterSpacing: "0.03em",
        lineHeight: 1, minWidth: 36,
        marginLeft: 4,
        position: "relative",
      }}
      onMouseDown={e => (e.currentTarget.style.transform = "translate(2px,2px)", e.currentTarget.style.boxShadow = "1px 1px 0 #1A1A1A")}
      onMouseUp={e => (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "3px 3px 0 #1A1A1A")}
      onMouseLeave={e => (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "3px 3px 0 #1A1A1A")}>
      A<span style={{ position: "absolute", top: -8, right: -6, fontSize: 14, animation: "allie-twinkle 1.4s infinite" }}>✨</span>
    </button>
  );
}

function AllieModal({ onClose }) {
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
      display: "flex", alignItems: "center", justifyContent: "center",
      zIndex: 1000, padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: "linear-gradient(160deg, #FFE6F0 0%, #FFD6E8 100%)",
        border: "5px solid #1A1A1A",
        boxShadow: "12px 12px 0 #1A1A1A",
        padding: "26px 30px",
        maxWidth: 640, width: "min(640px, 92vw)",
        position: "relative",
        fontFamily: "'Patrick Hand', cursive",
        color: "#1A1A1A",
      }}>
        <button onClick={onClose} aria-label="Sluiten" style={{
          position: "absolute", top: -18, right: -18,
          width: 44, height: 44, borderRadius: "50%",
          background: "#1A1A1A", color: "#F0FAE6",
          border: "3px solid #FFF", boxShadow: "2px 2px 0 #1A1A1A",
          fontFamily: "'Bangers', sans-serif", fontSize: 22, cursor: "pointer",
        }}>✕</button>

        <div style={{
          fontFamily: "'Bangers', sans-serif", fontSize: 44,
          color: "#E63946",
          WebkitTextStroke: "2px #1A1A1A",
          textShadow: "5px 5px 0 #1A1A1A",
          letterSpacing: "0.04em", lineHeight: 1,
          textAlign: "center", marginBottom: 14,
        }}>
          ✨ DAT IS ALLIE! ✨
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginBottom: 16 }}>
          <img src="/assets/boze-allie.png" alt="Allie, het zusje van Oliver"
            style={{
              maxWidth: "min(380px, 80vw)", height: "auto",
              border: "4px solid #1A1A1A",
              boxShadow: "6px 6px 0 #1A1A1A",
              background: "#FFF",
              transform: "rotate(-2deg)",
            }} />
        </div>

        <div style={{
          background: "#FFF", border: "3px solid #1A1A1A",
          boxShadow: "4px 4px 0 #1A1A1A",
          padding: "14px 18px", fontSize: 22, lineHeight: 1.35,
        }}>
          Allie is het <b>zusje van Oliver</b>. Soms is ze een beetje jaloers
          omdat haar broer zo'n grote held is. Daarom wil ze ook héél graag op
          deze website staan — en zo krijgt ze haar eigen plekje! 💖
        </div>

        <div style={{ marginTop: 18, textAlign: "center" }}>
          <button onClick={onClose} style={{
            background: "#FF4FA3", color: "#FFF",
            border: "3px solid #1A1A1A", boxShadow: "4px 4px 0 #1A1A1A",
            fontFamily: "'Bangers', sans-serif", fontSize: 22,
            letterSpacing: "0.04em", padding: "10px 22px",
            cursor: "pointer", textShadow: "1px 1px 0 #1A1A1A",
          }}>
            HOI ALLIE! 👋
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FontSizer, loadFontScale, saveFontScale, FONT_SCALES });