/* =========================================================
   HOME — photo BG + sticker brandmark + 3 folders
   ========================================================= */

function Folder({ data, index, onOpen }) {
  return (
    <button
      className={`folder f${index+1}`}
      style={{ animation: `cardIn .7s ${0.1 + index*0.12}s cubic-bezier(.2,1.2,.3,1) backwards` }}
      onClick={() => onOpen(data.title)}
    >
      <span className="tape-corner"></span>

        <div className="stickerwrap">
          <span className="folder-num">0{index+1}</span>
          <div className="kind">{data.kind.split(" / ")[0]}</div>
          <div className={`label ${data.titleStyle === "marker" ? "marker" : ""}`}>
            {data.title === "Collection of Favorites" ? (
              <>Collection<br/>of <span className="accent">Favorites</span></>
            ) : data.title === "By -e" ? (
              <>By <span className="accent">-e</span></>
            ) : (
              <>{data.title}</>
            )}
          </div>
          <div className="meta">{data.entries.length} entries</div>
        </div>

      <style>{`
        @keyframes cardIn {
          0% { opacity: 0; transform: translateY(80px) rotate(-12deg) scale(.85); }
          60% { opacity: 1; transform: translateY(-6px) rotate(2deg) scale(1.02); }
          100% { opacity: 1; transform: translateY(0) rotate(var(--rot, -1deg)) scale(1); }
        }
      `}</style>
    </button>
  );
}

function Home({ onOpenFolder }) {
  const order = ["Stories", "Collection of Favorites", "By -e"];
  return (
    <div className="home">
      <BgPhoto variant="home" reveal />

      <header className="hometop">
        {/* The sticker IS the brandmark (top-right) */}
        <button
          className="brandmark-btn"
          onClick={() => window.__replayIntro && window.__replayIntro()}
          aria-label="The Pink Curation — click to replay intro"
          title="click to replay intro"
        >
          <img className="brand-sticker" src="assets/logo-sticker.png" alt="The Pink Curation" draggable="false" />
        </button>
      </header>

      <div className="folders">
        {order.map((k, i) => (
          <Folder key={k} data={window.PC_CONTENT[k]} index={i} onOpen={onOpenFolder} />
        ))}
      </div>

      <footer className="homefoot">
        <span>est. ’26</span>
        <span className="dot">✦</span>
        <span>unknown &amp; messy</span>
      </footer>
    </div>
  );
}

window.Home = Home;