/* =========================================================
   FOLDER LIST OVERLAY
   ========================================================= */
function FolderList({ folderKey, onBack, onPickEntry, closing }) {
  const data = window.PC_CONTENT[folderKey];
  if (!data) return null;

  return (
    <div
      className="listoverlay"
      style={{
        animation: closing
          ? "listOut .4s forwards"
          : "listIn .45s cubic-bezier(.2,1.1,.3,1) forwards"
      }}
    >
      <div className="inner">
        <aside className="panel">
          <div className="crumbs">› home / {data.title.toLowerCase()}</div>
          <h2 className={data.titleStyle === "marker" ? "marker" : ""}>
            {data.title === "Collection of Favorites" ? (
              <>Collection<br/>of Favorites</>
            ) : data.title}
          </h2>
          <p className="blurb">{data.blurb}</p>
          <button className="back" onClick={onBack}>← back to folders</button>

          {/* doodle */}
          <svg style={{position:"absolute", right: 20, bottom: 24, width: 130, opacity:.85}} viewBox="0 0 120 120">
            <g filter="url(#rough)" stroke="#060606" strokeWidth="3" fill="#ff1f8f">
              <path d="M60,98 C25,72 10,52 22,30 C34,12 50,22 60,38 C70,22 86,12 98,30 C110,52 95,72 60,98 Z"/>
            </g>
            <text x="60" y="64" textAnchor="middle"
              fontFamily="Permanent Marker"
              fontSize="18" fill="#060606">
              folder
            </text>
          </svg>
        </aside>

        <div className="list">
          {data.entries.map((e, i) => (
            <button
              key={e.id}
              className="entry"
              style={{ animationDelay: `${0.08 + i * 0.07}s` }}
              onClick={() => onPickEntry(e)}
            >
              <span className="num">{String(i+1).padStart(2,"0")}</span>
              <span className="titletxt">
                {e.title}
                <span className="arrow"> →</span>
              </span>
              <span className="meta-r">{e.date} · {e.pages.length} pgs</span>
            </button>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes listIn {
          from { opacity: 0; transform: translateY(20px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes listOut {
          to { opacity: 0; transform: translateY(10px); }
        }
      `}</style>
    </div>
  );
}

window.FolderList = FolderList;