// POVArchive — asymmetric magazine grid of 3 primary builds; the rest of the library opens in a modal
const PRIMARY = [
  { n: "01", section: "SALES SYSTEM", title: "AI Lead Triage System",       color: "#C7DCE8", fg: "#1A1714", tilt: -1, link: "case-study-03" },
  { n: "02", section: "MARKETING SYSTEM", title: "Competitor Intelligence Engine", color: "#F4E36A", fg: "#1A1714", tilt: 1.5 },
  { n: "03", section: "GROWTH SYSTEM", title: "Done-in-a-Day Funnel Builder", color: "#8E9BC8", fg: "#FBF6EF", tilt: -2 },
];

// Cards whose `link` points to a matching case-study tile scroll there instead of firing onOpen
function openBuild(item, onOpen) {
  if (item.link) {
    scrollToId(item.link);
  } else {
    onOpen?.(item);
  }
}

const MORE_BUILDS = [
  { n: "04", title: "Dead Lead Resurrector",              color: "#F2C3C5" },
  { n: "05", title: "Ad Creative Testing Engine",          color: "#DD6B3A" },
  { n: "06", title: "Influencer Outreach Automation",      color: "#ECA888" },
  { n: "07", title: "Market Research Automation",          color: "#6F7FB3" },
  { n: "08", title: "AI Receptionist",                     color: "#F4E36A" },
  { n: "09", title: "Abandoned Revenue Recovery System",   color: "#C7DCE8" },
];

// Modal revealing the rest of the build library — same card visuals as before, laid out as a grid instead of a drag rail
function MoreBuildsModal({ onClose }) {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [onClose]);

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(26,23,20,0.6)",
      display: "flex", alignItems: "center", justifyContent: "center",
      padding: 20, zIndex: 1000,
    }}>
      <div role="dialog" aria-modal="true" onClick={(e)=>e.stopPropagation()} style={{
        background: "#FBF6EF", color: "#1A1714",
        width: "min(900px, 94vw)", maxHeight: "85vh", overflowY: "auto",
        padding: "40px 36px", position: "relative",
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: "absolute", top: 20, right: 20, background: "transparent",
          border: "1px solid #1A1714", color: "#1A1714", width: 32, height: 32,
          borderRadius: "50%", cursor: "pointer", fontSize: 16, lineHeight: 1,
          fontFamily: "var(--font-mono)",
        }}>×</button>

        <div style={{ borderBottom: "1px solid #1A1714", paddingBottom: 20, marginBottom: 28, paddingRight: 44 }}>
          <Eyebrow color="#DD6B3A" style={{ marginBottom: 6 }}>MORE BUILDS · ROLLING OUT</Eyebrow>
          <Headline size={36} color="#1A1714">The rest of the library.</Headline>
        </div>

        <div className="pov-more-builds-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {MORE_BUILDS.map(b => (
            <div key={b.n} style={{
              aspectRatio: "3/4", background: b.color, padding: 18,
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              color: b.color === "#F4E36A" || b.color === "#F2C3C5" || b.color === "#C7DCE8" || b.color === "#ECA888" ? "#1A1714" : "#FBF6EF",
            }}>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 34, lineHeight: 1 }}>{b.n}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 15, lineHeight: 1.2 }}>{b.title}</div>
            </div>
          ))}
          <div onClick={()=>{ onClose(); scrollToId("get-in-touch"); }} style={{
            aspectRatio: "3/4", border: "1px dashed #1A1714",
            display: "flex", alignItems: "center", justifyContent: "center", textAlign: "center", cursor: "pointer",
            fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "#1A1714", padding: 14,
          }}>MORE COMING SOON ›</div>
        </div>
      </div>
    </div>,
    document.body
  );
}

function POVArchive({ onOpen }) {
  const [showMore, setShowMore] = React.useState(false);
  return (
    <ColorBlock id="recent-builds" bg="#FBF6EF" grain={false}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "80px 32px 0" }}>
        <div className="pov-archive-header-row" style={{
          display: "flex", alignItems: "baseline", justifyContent: "space-between",
          borderBottom: "1px solid #1A1714", paddingBottom: 20, marginBottom: 36,
        }}>
          <div>
            <Eyebrow color="#DD6B3A" style={{ marginBottom: 6 }}>SECTION B · THE BUILD LIBRARY</Eyebrow>
            <Headline size={72} color="#1A1714" className="pov-archive-headline" style={{ letterSpacing: "-0.02em" }}>Recent builds.</Headline>
          </div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "#8E867A" }}>
            A GROWING LIBRARY · BUILT AS I GO
          </div>
        </div>

        {/* Asymmetric 3-up — one large + two stacked */}
        <div className="pov-archive-grid" style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 26 }}>
          {/* Big left card */}
          <div onClick={PRIMARY[0].link ? ()=>openBuild(PRIMARY[0], onOpen) : undefined} style={{
            background: PRIMARY[0].color, color: PRIMARY[0].fg, padding: 32,
            transform: `rotate(${PRIMARY[0].tilt}deg)`, cursor: PRIMARY[0].link ? "pointer" : "default", minHeight: 420,
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            boxShadow: "0 24px 60px -28px rgba(26,23,20,0.32)",
          }}>
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.24em", textTransform: "uppercase", marginBottom: 18, opacity: 0.7 }}>
                {PRIMARY[0].section} · BUILD {PRIMARY[0].n}
              </div>
              <div className="pov-archive-card-big-title" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 56, lineHeight: 1.02, letterSpacing: "-0.015em" }}>
                {PRIMARY[0].title}
              </div>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
              <div style={{ fontFamily: "var(--font-script)", fontSize: 28, transform: "rotate(-4deg)" }}>
                on never missing a lead.
              </div>
              {PRIMARY[0].link && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase" }}>▸ VIEW</div>}
            </div>
          </div>

          {/* Right column — two smaller cards stacked */}
          <div style={{ display: "flex", flexDirection: "column", gap: 26 }}>
            {PRIMARY.slice(1).map(p => (
              <div key={p.n} onClick={p.link ? ()=>openBuild(p, onOpen) : undefined} style={{
                background: p.color, color: p.fg, padding: 24,
                transform: `rotate(${p.tilt}deg)`, cursor: p.link ? "pointer" : "default", flex: 1,
                display: "flex", flexDirection: "column", justifyContent: "space-between",
                boxShadow: "0 24px 60px -28px rgba(26,23,20,0.32)", minHeight: 196,
              }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", opacity: 0.75 }}>
                  {p.section} · BUILD {p.n}
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 28, lineHeight: 1.08 }}>{p.title}</div>
              </div>
            ))}
          </div>
        </div>

        {/* CTA — opens a modal with the rest of the build library */}
        <div style={{
          display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap",
          borderTop: "1px solid #E6DFD3", marginTop: 30, padding: "30px 0 64px",
        }}>
          <BlockButton onClick={()=>setShowMore(true)}>See {MORE_BUILDS.length} more builds</BlockButton>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "#8E867A" }}>
            MORE BUILDS, ROLLING OUT
          </div>
        </div>
      </div>

      {showMore && <MoreBuildsModal onClose={()=>setShowMore(false)} />}
    </ColorBlock>
  );
}

Object.assign(window, { POVArchive });