const { useState, useEffect, useRef, useLayoutEffect, useMemo } = React;

function Placeholder({ aspect, tone = "neutral", imageKey, alt, small = false }) {
  if (imageKey) {
    return (
      <div className="placeholder has-image" style={{ aspectRatio: aspect }}>
        <img src={`/images/${imageKey}`} alt={alt || ""} loading="lazy" />
      </div>
    );
  }
  const tones = {
    warm:    { bg: "#e8dccb", stripe: "#d9c9b0", fg: "#6b5a42" },
    blue:    { bg: "#cfd6da", stripe: "#bac4ca", fg: "#4a5863" },
    neutral: { bg: "#d8d4cc", stripe: "#c5c0b4", fg: "#5a564e" },
  };
  const t = tones[tone] || tones.neutral;
  return (
    <div
      className="placeholder"
      style={{
        aspectRatio: aspect,
        backgroundColor: t.bg,
        backgroundImage: `repeating-linear-gradient(135deg, ${t.stripe} 0 2px, transparent 2px 14px)`,
        color: t.fg,
      }}
    />
  );
}

function Masthead({ onNav, current }) {
  return (
    <header className="masthead">
      <div className="masthead-inner">
        <a
          className="wordmark"
          href="#"
          onClick={(e) => { e.preventDefault(); onNav("feed"); }}
        >
          Kyle Pasalskyj
        </a>
        <nav className="nav">
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("feed"); }} aria-current={current === "feed"}>Feed</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("series"); }} aria-current={current === "series"}>Series</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("gear"); }} aria-current={current === "gear"}>Gear</a>
          <a href="#" onClick={(e) => { e.preventDefault(); onNav("contact"); }} aria-current={current === "contact"}>Contact</a>
          <a href="/feed.xml" className="rss" title="RSS">RSS</a>
        </nav>
      </div>
    </header>
  );
}

function Lightbox({ post, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose]);

  return (
    <div className="lightbox" onClick={onClose} role="dialog" aria-modal="true">
      <button type="button" className="lightbox-close" onClick={onClose} aria-label="Close">×</button>
      <div className="lightbox-content" onClick={(e) => e.stopPropagation()}>
        <img
          className="lightbox-img"
          src={`/images/${post.hero_r2_key}`}
          alt={post.title || post.caption || ""}
        />
        {post.caption && <p className="lightbox-caption">{post.caption}</p>}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <span>© Kyle Pasalskyj, 2026</span>
        <span className="footer-mid">Photographs &amp; writing. All rights reserved.</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Placeholder, Masthead, Footer, Lightbox });