// The Trading Vault, Mentorship: Who It's For · Proof · Founder

/* ---------------- Who It Is For / Qualification ---------------- */
function WhoFor() {
  const fits = [
    ["Je Vaardigheden Wilt, Geen Signalen", "Je wilt price action begrijpen en zelf beslissingen leren nemen in plaats van entries van iemand anders te kopiëren."],
    ["Je Bereid Bent Je Werk Vast Te Leggen", "Je wilt trades journalen, reviews afmaken en genoeg data verzamelen om je aanpak eerlijk te kunnen beoordelen."],
    ["Je Consequent Tijd Kunt Vrijmaken", "Je kunt ongeveer twee tot vier gerichte uren per week besteden aan studie, replay, trading en review."],
    ["Je Openstaat Voor Directe Feedback", "Je wilt dat je charts, risico en beslissingen eerlijk worden beoordeeld, niet alleen bevestigd."],
    ["Je Één Aanpak Een Eerlijke Kans Geeft", "Je bent bereid te stoppen met steeds opnieuw beginnen en lang genoeg met één framework te werken om echte data op te bouwen."],
  ];
  const notFits = [
    ["Je Signalen Of Snelle Resultaten Zoekt", "Je zoekt trades om te kopiëren, shortcuts of gegarandeerde resultaten."],
    ["Je Niets Wilt Vastleggen", "Je wilt niet journalen, backtesten of je eigen beslissingen terugkijken."],
    ["Je Steeds Van Richting Verandert", "Na een kleine verliesreeks laat je je aanpak direct los en zoek je opnieuw naar iets anders."],
    ["Je Geen Verantwoordelijkheid Wilt Nemen", "Je wilt vooral meer informatie, maar staat er niet voor open dat je gewoontes en beslissingen kritisch worden bekeken."],
    ["Je Garanties Verwacht", "Je verwacht gegarandeerde winst, een funded account, payouts of een vaste termijn waarop dit moet gebeuren."],
  ];
  const Col = ({ title, items, primary }) => {
    const [hoverIdx, setHoverIdx] = React.useState(-1);
    return (
    <div
      style={{
        background: "var(--vault-surface)",
        border: `1px solid ${primary ? "var(--vault-ink-4)" : "var(--vault-line)"}`,
        borderRadius: "var(--radius-md)",
        boxShadow: primary ? "var(--shadow-md), var(--edge-inner-top)" : "var(--edge-inner-top)",
        padding: "clamp(28px,3vw,36px) clamp(26px,3vw,38px) clamp(30px,3.4vw,40px)",
        display: "flex",
        flexDirection: "column",
        gap: 20,
      }}
    >
      <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase", color: primary ? "var(--vault-ink)" : "var(--vault-ink-3)" }}>{title}</h3>
      <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column" }}>
        {items.map(([t, d], i) => (
          <li
            key={t}
            onMouseEnter={() => setHoverIdx(i)}
            onMouseLeave={() => setHoverIdx(-1)}
            style={{
              display: "flex",
              gap: 14,
              padding: "14px 4px",
              borderTop: i === 0 ? "none" : "1px solid var(--vault-line-soft)",
              transition: "background .2s",
              background: hoverIdx === i ? "rgba(255,255,255,.02)" : "transparent",
            }}
          >
            <span aria-hidden="true" style={{ flex: "none", width: 18, fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-4)", paddingTop: 2 }}>0{i + 1}</span>
            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 14.5, letterSpacing: "-0.005em", color: hoverIdx === i ? "var(--vault-ink)" : (primary ? "var(--vault-ink-2)" : "var(--vault-ink-3)"), transition: "color .2s" }}>{t}</span>
              <span style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.55, color: "var(--vault-ink-3)", textWrap: "pretty" }}>{d}</span>
            </div>
          </li>
        ))}
      </ul>
    </div>
    );
  };
  const { Button } = TTV;
  const steps = [
    ["Aanmelden", "Vul de korte aanmelding in en vertel waar je nu staat, wat je doelen zijn en waar je tegenaan loopt."],
    ["Persoonlijke Beoordeling", "Ik bekijk persoonlijk of The Vault aansluit bij jouw situatie."],
    ["Privégesprek", "Wanneer er een mogelijke match is, plannen we een privégesprek voordat er een beslissing wordt genomen."],
  ];
  return (
    <Section id="who" label="Qualification" style={{ paddingTop: "clamp(56px,6vw,84px)", paddingBottom: "clamp(56px,6vw,84px)" }}>
      <Reveal>
        <SectionHead
          eyebrow="Voor Wie The Vault Is"
          title="Alleen Voor Serieuze Traders."
          lede="Je hoeft nog niet winstgevend te zijn voordat je je aanmeldt. Je moet wel openstaan voor feedback, bereid zijn je beslissingen vast te leggen en serieus volgens één aanpak willen werken."
          align="center"
          maxLede={660}
        />
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22, marginTop: "clamp(36px,4.4vw,52px)" }} className="ttv-2col">
        <Reveal><Col title="Dit Past Bij Je Als:" items={fits} primary /></Reveal>
        <Reveal delay={90}><Col title="Dit Past Niet Bij Je Als:" items={notFits} /></Reveal>
      </div>

      <Reveal delay={140}>
        <p style={{ margin: "clamp(32px,3.6vw,44px) 0 0", fontFamily: "var(--font-sans)", fontStyle: "italic", fontSize: 15, lineHeight: 1.6, color: "var(--vault-ink-3)", textAlign: "center", maxWidth: 560, marginLeft: "auto", marginRight: "auto" }}>
          "Ik zoek geen perfecte traders. Ik zoek traders die bereid zijn eerlijk naar hun eigen werk te kijken."
        </p>
      </Reveal>

      <Reveal delay={190}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "center", gap: 0, marginTop: "clamp(36px,4vw,52px)", flexWrap: "wrap" }} className="ttv-appflow">
          {steps.map(([t, d], i) => (
            <React.Fragment key={t}>
              <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 10, maxWidth: 220 }}>
                <span style={{ width: 34, height: 34, borderRadius: "var(--radius-pill)", border: "1px solid var(--vault-line)", background: "var(--vault-surface)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: 12.5, color: "var(--vault-ink-2)" }}>{i + 1}</span>
                <span style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 13, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vault-ink)" }}>{t}</span>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, color: "var(--vault-ink-3)" }}>{d}</span>
              </div>
              {i < steps.length - 1 && <span aria-hidden="true" className="ttv-appflow-line" style={{ flex: 1, minWidth: 40, height: 1, background: "var(--vault-line-soft)", marginTop: 17, alignSelf: "flex-start" }} />}
            </React.Fragment>
          ))}
        </div>
      </Reveal>

      <Reveal delay={230}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 12, marginTop: "clamp(32px,3.6vw,44px)" }}>
          <a href={APPLY_URL} onClick={(e) => { e.preventDefault(); window.__ttvOpenVSL(e.currentTarget); }} style={{ textDecoration: "none" }}>
            <Button variant="primary" size="lg">Meld Je Aan Voor The Vault</Button>
          </a>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.08em", color: "var(--vault-ink-4)" }}>
            Je kunt niet direct kopen. Iedere aanmelding wordt eerst persoonlijk beoordeeld.
          </span>
        </div>
      </Reveal>
    </Section>
  );
}

/* ---------------- Proof & Credibility ---------------- */
function Proof() {
  const markers = ["Live Trading", "Vastgelegde Payouts", "Accountresultaten", "Ontwikkeling Van Traders"];
  return (
    <Section id="proof" label="Proof" atmosphere style={{ paddingTop: "clamp(132px,15vw,168px)" }}>
      <Reveal>
        <SectionHead
          eyebrow="Resultaten &amp; Bewijs"
          title="Bewezen In De Markt. Aangescherpt Door Review."
          lede="The Vault is gebouwd rond echte trading, transparante reviews en meetbare ontwikkeling. Geen willekeurige screenshots. Geen beloftes. Geen theorie zonder toepassing."
          maxLede={680}
          align="center"
        />
      </Reveal>

      {/* Credibility marker strip */}
      <Reveal delay={80}>
        <div style={{ maxWidth: 960, margin: "clamp(44px,5vw,60px) auto 0", display: "flex", flexWrap: "wrap", justifyContent: "center", alignItems: "center" }} className="ttv-markerstrip">
          {markers.map((m, i) => (
            <React.Fragment key={m}>
              <span style={{ padding: "8px 26px", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 12.5, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--vault-ink-2)" }}>{m}</span>
              {i < markers.length - 1 && <span aria-hidden="true" style={{ width: 1, height: 16, background: "var(--vault-line)" }} className="ttv-markerstrip-sep" />}
            </React.Fragment>
          ))}
        </div>
      </Reveal>

      {/* Transition into The Archive */}
      <div aria-hidden="true" style={{ maxWidth: 260, margin: "clamp(40px,4.6vw,54px) auto 0", height: 1, background: "linear-gradient(90deg, transparent, var(--vault-line) 50%, transparent)" }} />

      <ProofArchive />

      <FeaturedTestimonial />

      <Reveal delay={260}>
        <div aria-hidden="true" style={{ maxWidth: 260, margin: "clamp(48px,5.2vw,64px) auto 0", height: 1, background: "linear-gradient(90deg, transparent, var(--vault-line) 50%, transparent)" }} />
        <p style={{ margin: "clamp(22px,2.6vw,30px) 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(21px,2.3vw,28px)", lineHeight: 1.4, letterSpacing: "-0.015em", color: "var(--vault-ink)", textAlign: "center", maxWidth: 680, marginLeft: "auto", marginRight: "auto", textWrap: "balance", paddingBottom: "clamp(24px,3vw,40px)" }}>
          Geloofwaardigheid ontstaat niet door de juiste dingen te zeggen.<br /><span style={{ color: "var(--vault-ink)", fontWeight: 800 }}>Het ontstaat door het werk te laten zien.</span>
        </p>
      </Reveal>
    </Section>
  );
}

/* ---------------- Founder, SteezyWes ---------------- */
function Founder() {
  return (
    <Section id="founder" label="Founder" style={{ paddingTop: "clamp(56px,6vw,84px)", paddingBottom: "clamp(56px,6vw,84px)" }}>
      {/* trader-first, founder-second */}
      <div style={{ display: "grid", gridTemplateColumns: "0.98fr 1.02fr", gap: "clamp(40px,5.4vw,76px)", alignItems: "center" }} className="ttv-2col">
        <Reveal style={{ display: "flex" }}>
          <div style={{ position: "relative", width: "100%" }}>
            <span style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--vault-ink-4)" }}>
              <span>Dossier Oprichter / 001</span>
              <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span aria-hidden="true" style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--vault-ink-3)" }} />
                Status: Actief
              </span>
            </span>
            <div style={{ position: "relative", aspectRatio: "4 / 5.1" }}>
              {/* subtle secondary portrait layer for depth */}
              <div aria-hidden="true" style={{ position: "absolute", inset: 0, transform: "translate(10px,-10px) scale(1.03)", opacity: 0.08, borderRadius: "var(--radius-md)", overflow: "hidden", filter: "grayscale(1)" }}>
                <img src="uploads/0b5586cc-e000-4e7c-81ff-6856e0ddc347.png" alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ position: "relative", width: "100%", height: "100%", borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--vault-line)", boxShadow: "var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.045)" }}>
                <img
                  src="uploads/0b5586cc-e000-4e7c-81ff-6856e0ddc347.png"
                  alt="SteezyWes portrait"
                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
                />
                {/* corner registration marks */}
                {[
                  { top: 12, left: 12, b: "Top", s: "Left" },
                  { top: 12, right: 12, b: "Top", s: "Right" },
                  { bottom: 12, left: 12, b: "Bottom", s: "Left" },
                  { bottom: 12, right: 12, b: "Bottom", s: "Right" },
                ].map((c, i) => (
                  <span key={i} aria-hidden="true" style={{ position: "absolute", top: c.top, bottom: c.bottom, left: c.left, right: c.right, width: 12, height: 12, [`border${c.b}`]: "1px solid rgba(255,255,255,.35)", [`border${c.s}`]: "1px solid rgba(255,255,255,.35)" }} />
                ))}
              </div>
            </div>
            <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vault-ink-4)" }}>
              <span>Trader / Oprichter / Mentor</span>
            </div>
          </div>
        </Reveal>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <Reveal>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              <SectionHead eyebrow="De Oprichter" title="Ontmoet De Trader Achter The Vault." />
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--vault-ink-4)" }}>Wesley "SteezyWes" Fokken</span>
            </div>
          </Reveal>
          <Reveal delay={60}>
            <div style={{ display: "flex", gap: 16, paddingLeft: 2 }}>
              <span aria-hidden="true" style={{ flex: "none", width: 1, background: "var(--vault-line)" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <Kicker color="var(--vault-ink-4)">Waarom Ik The Vault Heb Gebouwd</Kicker>
                <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(20px,2.3vw,26px)", lineHeight: 1.42, letterSpacing: "-0.01em", color: "var(--vault-ink)", maxWidth: 520, textWrap: "pretty" }}>
                  "Ik heb The Vault gebouwd rond de structuur die ik zelf nodig had toen ik traden nog alleen probeerde op te lossen."
                </p>
              </div>
            </div>
          </Reveal>
          <Reveal delay={110}>
            <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 500 }}>
              {[
                "Ik liep niet vast omdat er te weinig informatie beschikbaar was. Ik liep vast omdat er juist te veel was en ik geen duidelijke manier had om te bepalen wat belangrijk was, wat werkte en wat ik moest veranderen.",
                "Na verloop van tijd stopte ik met zoeken naar steeds nieuwe strategieën. Ik begon mijn trading te bouwen rond structuur, duidelijke regels, het vastleggen van iedere beslissing en eerlijke reviews. Dat werd uiteindelijk de basis van The Trading Vault.",
                "Vandaag gebruik ik dezelfde principes om traders te helpen losse kennis om te zetten in een aanpak die ze begrijpen, kunnen uitvoeren en zelf verder kunnen verbeteren.",
                "Mijn rol is niet om je trades te geven die je kunt kopiëren. Mijn rol is om je manier van denken en beslissen kritisch te beoordelen, zodat je uiteindelijk niet meer van mij afhankelijk bent.",
              ].map((p, i) => (
                <p key={i} style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.7, color: i === 0 ? "var(--vault-ink-2)" : "var(--vault-ink-3)", textWrap: "pretty" }}>{p}</p>
              ))}
            </div>
          </Reveal>
          <Reveal delay={160}>
            <div style={{ display: "flex", flexDirection: "column", gap: 6, paddingTop: 4, borderTop: "1px solid var(--vault-line-soft)" }}>
              <p style={{ margin: "14px 0 0", fontFamily: "var(--font-sans)", fontStyle: "italic", fontSize: 14.5, lineHeight: 1.6, color: "var(--vault-ink-2)", maxWidth: 500 }}>
                "Ik verwacht geen perfectie. Ik verwacht eerlijkheid, discipline en de bereidheid om je eigen werk terug te kijken."
              </p>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--vault-ink-4)" }}>, Wesley, oprichter van The Trading Vault</span>
            </div>
          </Reveal>
          <Reveal delay={200}>
            <div style={{ paddingTop: 6 }}>
              <Kicker color="var(--vault-ink-4)" style={{ display: "block", marginBottom: 12 }}>Ervaring</Kicker>
              <div style={{ display: "flex", gap: 0, borderTop: "1px solid var(--vault-line-soft)" }} className="ttv-founder-record">
                {[["01", "±5 Jaar", "Ervaring binnen trading en communities"], ["02", "Live Trading", "Trades vastgelegd en beoordeeld"], ["03", "Privé 1-Op-1", "Gebouwd rond jouw beslissingen"]].map(([n, v, l], i) => (
                  <div key={n} style={{ flex: 1, padding: "12px 16px 0 0", borderLeft: i === 0 ? "none" : "1px solid var(--vault-line-soft)", paddingLeft: i === 0 ? 0 : 16, display: "flex", flexDirection: "column", gap: 5 }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--vault-ink-4)" }}>{n}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 17, color: "var(--vault-ink)", letterSpacing: "-0.01em" }}>{v}</span>
                    <span style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, color: "var(--vault-ink-4)" }}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <a
              href="#proof"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                fontFamily: "var(--font-sans)",
                fontWeight: 700,
                fontSize: 12.5,
                letterSpacing: "0.1em",
                textTransform: "uppercase",
                color: "var(--vault-ink-3)",
                textDecoration: "none",
                transition: "color .18s, letter-spacing .18s",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--vault-ink)"; e.currentTarget.style.letterSpacing = "0.14em"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--vault-ink-3)"; e.currentTarget.style.letterSpacing = "0.1em"; }}
            >
              Bekijk Het Vastgelegde Proces →
            </a>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { WhoFor, Proof, Founder });