// The Trading Vault, Mentorship: Proof Archive, infinite dual-row marquee of real evidence

const ARCHIVE_ITEMS_TOP = [
  { id: "hyro-sol", title: "SOLUSDT, ROE +32.63%", category: "Vastgelegd Resultaat", image: "uploads/pasted-1784286062148-0.png", alt: "HyroTrader SOLUSDT closed position card", context: "Gesloten positie op een funded account, ROE en gerealiseerde winst.", date: "08 jul 2026", disclaimer: "Resultaten verschillen per trader. Winst wordt niet gegarandeerd.", ratio: "1 / 1.15", rotation: -1, featured: false },
  { id: "cert-funding", title: "Funding Certificate", category: "Vastgelegd Resultaat", image: "uploads/Schermafbeelding_2026-04-29_om_10.16.41-b4121972.png", alt: "MCF funding certificate", context: "Funding certificate uitgegeven na het aantonen van consistente prestaties.", date: "28 apr 2026", disclaimer: "Educatief voorbeeld. Resultaten uit het verleden garanderen geen toekomstige uitkomsten.", ratio: "4 / 5", rotation: -1.4, featured: false },
  { id: "cert-ftmo", title: "FTMO Challenge Behaald", category: "Vastgelegd Resultaat", image: "uploads/passed-ftmo-challenge (1).jpeg", alt: "FTMO passed challenge certificate", context: "Certificaat dat bevestigt dat de FTMO Challenge is behaald binnen de vastgestelde risico- en winstregels.", date: "4 mei 2026", disclaimer: "Educatief voorbeeld. Een challenge behalen garandeert geen funding, payouts of toekomstige resultaten.", ratio: "1 / 1", rotation: -1.1, featured: true },
  { id: "cert-ftmo-verification", title: "FTMO Verification Behaald", category: "Vastgelegd Resultaat", image: "uploads/passed-verification (2).jpeg", alt: "FTMO passed verification certificate", context: "Certificaat dat bevestigt dat het volledige FTMO-evaluatieproces, zowel de Challenge als de Verification-fase, is afgerond.", date: "31 jul 2026", disclaimer: "Educatief voorbeeld. Het afronden van de evaluatie garandeert geen funding, payouts of toekomstige resultaten.", ratio: "1 / 1", rotation: 1.2, featured: true },
  { id: "cert-payout", title: "$4.264,73 Payout", category: "Vastgelegd Resultaat", image: "uploads/4c0e651915a562f5d2c0bc12b5293f1e (1)-840c7428.png", alt: "Trading profit payout certificate, $4,264.73", context: "Payout certificate met gerealiseerde tradingwinst.", date: "10 jul 2026", disclaimer: "Resultaten verschillen per trader. Winst wordt niet gegarandeerd.", ratio: "1 / 1", rotation: 1.6, featured: true },
  { id: "hyro-btc", title: "BTCUSDT, ROE +4.95%", category: "Vastgelegd Resultaat", image: "uploads/pasted-1784286071857-0.png", alt: "HyroTrader BTCUSDT closed position card", context: "Gesloten positie op een funded account, ROE en gerealiseerde winst.", date: "08 jul 2026", disclaimer: "Resultaten verschillen per trader. Winst wordt niet gegarandeerd.", ratio: "1 / 1.15", rotation: 1.3, featured: false },
];

const ARCHIVE_ITEMS_BOTTOM = [
  { id: "discord-recap", title: "Mentorship Recap", category: "Mentorship & Community", image: "uploads/Schermafbeelding 2026-07-17 om 12.17.38-50e0f009.png", alt: "Community message documenting funded account progress", context: "Community recap over de voortgang van een student op een funded account.", date: "25 jun 2026", disclaimer: "Resultaten verschillen per trader. Gedeeld met toestemming.", ratio: "1 / 1", rotation: 1.4, featured: false },
  { id: "chart-silver", title: "Trade Review Met Annotaties", category: "Live Trading", image: "uploads/pasted-1784286044026-0.png", alt: "Annotated Silver/USD chart with structure and review", context: "Annotatie na de trade met structuur, entrylogica en review.", date: "13 jul 2026", disclaimer: "Uitsluitend voor educatieve doeleinden. Geen financieel advies.", ratio: "16 / 10", rotation: 1.2, featured: false },
  { id: "workflow-payout", title: "Workflow Payoutstructuur", category: "Professionele Workflow", image: "uploads/Schermafbeelding 2026-07-17 om 13.02.44.png", alt: "Internal workflow diagram explaining payout structure", context: "Interne procesdocumentatie gebruikt tijdens mentorship review.", date: "", disclaimer: "Intern werkdocument, gedeeld ter illustratie.", ratio: "16 / 10.4", rotation: -1, featured: false },
  { id: "blofin-sol", title: "SOLUSDT Perp, +41.81%", category: "Live Trading", image: "uploads/pasted-1784286081769-0.png", alt: "BloFin SOLUSDT perpetual closed position", context: "Gesloten positie gedeeld via het platform van een partnerexchange.", date: "08 jul 2026", disclaimer: "Resultaten verschillen per trader. Winst wordt niet gegarandeerd.", ratio: "1 / 1.3", rotation: 1, featured: false },
  { id: "chart-btc-webcam", title: "Live Chart Review", category: "Live Trading", image: "uploads/Schermafbeelding 2026-07-17 om 13.02.05.png", alt: "Annotated BTCUSDT chart during live review session", context: "Live review met annotaties van de BTCUSDT prijsstructuur.", date: "14 okt 2025", disclaimer: "Uitsluitend voor educatieve doeleinden. Geen financieel advies.", ratio: "16 / 9.4", rotation: -1.6, featured: true },
];

function ArchiveCard({ item, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      className="archiveCardSlot"
      onClick={() => onOpen(item)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        flex: "0 0 clamp(240px, 18vw, 310px)",
        border: 0,
        padding: 0,
        cursor: "pointer",
        background: "transparent",
        transform: `rotate(${item.rotation}deg) ${hover ? "scale(1.02)" : "scale(1)"}`,
        transition: "transform .25s var(--ease-out)",
      }}
    >
      <div
        style={{
          position: "relative",
          width: "100%",
          aspectRatio: item.ratio,
          borderRadius: "var(--radius-sm)",
          overflow: "hidden",
          border: `1px solid ${hover ? "var(--vault-ink)" : "var(--vault-line)"}`,
          background: "var(--vault-surface)",
          boxShadow: hover ? "var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.06)" : "var(--edge-inner-top)",
          transition: "border-color .25s, box-shadow .25s",
        }}
      >
        <img src={item.image} alt={item.alt} loading="lazy" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: hover ? "brightness(1.07)" : "none", transition: "filter .25s" }} />
        <div aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "18px 12px 10px", background: "linear-gradient(0deg, rgba(6,6,7,.82), transparent)" }}>
          <span style={{ display: "block", fontFamily: "var(--font-mono)", fontSize: 9.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vault-ink-3)" }}>{item.category}</span>
          <span style={{ display: "block", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 12.5, color: "var(--vault-ink)", marginTop: 2 }}>{item.title}</span>
        </div>
      </div>
    </button>
  );
}

function MarqueeRow({ items, direction, duration, onOpen }) {
  return (
    <div className="archiveViewport ttv-marquee-mask ttv-archive-mask" style={{ position: "relative", left: "50%", transform: "translateX(-50%)", width: "min(88vw, 1550px)", overflow: "hidden" }}>
      <div>
      <div
        className="archiveTrack ttv-marquee-track ttv-archive-track"
        style={{
          display: "flex",
          gap: 22,
          width: "max-content",
          animation: `${direction === "rtl" ? "ttvMarqueeRtl" : "ttvMarqueeLtr"} ${duration}s linear infinite`,
          padding: "14px 4px 26px",
        }}
      >
        <div className="archiveGroup" style={{ display: "flex", gap: 22 }}>
          {items.map((item) => (
            <ArchiveCard key={item.id + "-a"} item={item} onOpen={onOpen} />
          ))}
        </div>
        <div className="archiveGroup" aria-hidden="true" style={{ display: "flex", gap: 22 }}>
          {items.map((item) => (
            <ArchiveCard key={item.id + "-b"} item={item} onOpen={onOpen} />
          ))}
        </div>
      </div>
      </div>
    </div>
  );
}

function ArchiveModal({ item, items, onClose, onNav }) {
  if (!item) return null;
  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={onClose}
      style={{ position: "fixed", inset: 0, zIndex: 300, background: "rgba(6,6,7,.9)", backdropFilter: "blur(6px)", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}
    >
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 640, width: "100%", maxHeight: "90vh", display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ maxHeight: "70vh", overflow: "auto", borderRadius: "var(--radius-md)", border: "1px solid var(--vault-line)", background: "var(--vault-surface)" }}>
          <img src={item.image} alt={item.alt} style={{ display: "block", width: "100%", height: "auto" }} />
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vault-ink-4)" }}>{item.category}</span>
            {item.date && <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--vault-ink-4)" }}>{item.date}</span>}
          </div>
          <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 17, color: "var(--vault-ink)" }}>{item.title}</h3>
          <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55, color: "var(--vault-ink-2)" }}>{item.context}</p>
          <p style={{ margin: "4px 0 0", fontFamily: "var(--font-sans)", fontSize: 11.5, lineHeight: 1.5, color: "var(--vault-ink-4)", fontStyle: "italic" }}>{item.disclaimer}</p>
        </div>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
          <button onClick={() => onNav(-1)} style={{ background: "transparent", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-xs)", color: "var(--vault-ink-3)", fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", padding: "9px 16px", cursor: "pointer" }}>← Vorige</button>
          <button onClick={onClose} style={{ background: "transparent", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-xs)", color: "var(--vault-ink-3)", fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", padding: "9px 18px", cursor: "pointer" }}>Sluiten</button>
          <button onClick={() => onNav(1)} style={{ background: "transparent", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-xs)", color: "var(--vault-ink-3)", fontFamily: "var(--font-sans)", fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", padding: "9px 16px", cursor: "pointer" }}>Volgende →</button>
        </div>
      </div>
    </div>
  );
}

function ProofArchive() {
  const allItems = React.useMemo(() => [...ARCHIVE_ITEMS_TOP, ...ARCHIVE_ITEMS_BOTTOM], []);
  const [openId, setOpenId] = React.useState(null);
  const activeIndex = allItems.findIndex((it) => it.id === openId);
  const activeItem = activeIndex >= 0 ? allItems[activeIndex] : null;
  const nav = (dir) => {
    const next = (activeIndex + dir + allItems.length) % allItems.length;
    setOpenId(allItems[next].id);
  };
  return (
    <div style={{ marginTop: "clamp(44px,5vw,64px)" }}>
      <Reveal>
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginBottom: "clamp(24px,3vw,34px)" }}>
          <Kicker color="var(--vault-ink-4)">Het Archief</Kicker>
          <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(22px,2.6vw,30px)", letterSpacing: "-0.02em", color: "var(--vault-ink)" }}>Het Werk, Vastgelegd.</h3>
          <p style={{ margin: 0, maxWidth: 560, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--vault-ink-3)", textWrap: "pretty" }}>
            Een levend archief van echte trades, accountmijlpalen, reviews en professioneel chartwerk.
          </p>
        </div>
      </Reveal>
      <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
        <MarqueeRow items={ARCHIVE_ITEMS_TOP} direction="rtl" duration={70} onOpen={(it) => setOpenId(it.id)} />
        <MarqueeRow items={ARCHIVE_ITEMS_BOTTOM} direction="ltr" duration={80} onOpen={(it) => setOpenId(it.id)} />
      </div>
      <ArchiveModal item={activeItem} items={allItems} onClose={() => setOpenId(null)} onNav={nav} />
    </div>
  );
}

Object.assign(window, { ProofArchive });