// The Trading Vault, Mentorship: Problem · What It Is · 3-Phase Structure

/* ---------------- The Problem ---------------- */
function Problem() {
  const items = [
    ["Willekeurig Wisselen Van Strategie", "Steeds overstappen naar iets nieuws voordat je genoeg data hebt verzameld om te begrijpen wat daadwerkelijk werkt."],
    ["Afhankelijk Van Signalen", "De trades van iemand anders volgen kan je entries geven, maar leert je niet om zelfstandig goede beslissingen te nemen."],
    ["Inconsistent Handelen", "Je regels kunnen op papier kloppen, maar twijfel, overtrading en steeds wisselende criteria maken je resultaten onmogelijk om eerlijk te beoordelen."],
    ["Emotionele Beslissingen", "Verlies leidt tot frustratie. Gemiste trades creëren FOMO. Stops worden verplaatst en risico wordt verhoogd, omdat er geen betrouwbaar proces is om op terug te vallen."],
  ];
  return (
    <Section id="problem" label="Problem" atmosphere style={{ position: "relative", overflow: "hidden" }}>
      {/* faint background: fragmented lines resolving toward order */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.5 }}>
        <svg width="100%" height="100%" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
          <defs>
            <linearGradient id="probFade" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#fff" stopOpacity="0.05" />
              <stop offset="100%" stopColor="#fff" stopOpacity="0.16" />
            </linearGradient>
          </defs>
          {Array.from({ length: 7 }).map((_, i) => {
            const y = 8 + i * 13;
            const jitter = i < 4 ? 5.5 - i : 0.6;
            return (
              <polyline
                key={i}
                fill="none"
                stroke="url(#probFade)"
                strokeWidth="1"
                points={Array.from({ length: 14 }, (_, j) => `${(j / 13) * 100}%,${y + (Math.sin(j * (1.4 + i * 0.3)) * jitter)}%`).join(" ")}
              />
            );
          })}
        </svg>
      </div>

      <div style={{ position: "relative" }}>
        <Reveal>
          <SectionHead
            eyebrow="Het Probleem"
            title="Waarom Zoveel Traders Blijven Vastlopen."
            lede="De meeste traders hebben niet te weinig informatie. Ze missen een duidelijke manier om die informatie om te zetten in goede beslissingen. Zonder vaste regels, bruikbare data en eerlijke reviews blijft iedere trade uiteindelijk een losse gok."
            align="center"
            maxLede={680}
          />
        </Reveal>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: "clamp(44px,5vw,64px)" }} className="ttv-phasegrid">
          {items.slice(0, 2).map(([t, d], i) => (
            <Reveal key={t} delay={i * 70}>
              <div style={{ height: "100%", background: "var(--vault-surface)", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-md)", boxShadow: "var(--edge-inner-top)", padding: "24px 26px", display: "flex", gap: 18, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-4)", flex: "none", paddingTop: 2 }}>0{i + 1}</span>
                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 16.5, letterSpacing: "-0.01em", color: "var(--vault-ink)" }}>{t}</h3>
                  <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.58, color: "var(--vault-ink-3)", textWrap: "pretty" }}>{d}</p>
                </div>
              </div>
            </Reveal>
          ))}

          {/* Featured: No Usable Data */}
          <Reveal delay={140} style={{ gridColumn: "1 / -1" }}>
            <div
              style={{
                background: "linear-gradient(168deg, #161619 0%, #0e0e11 100%)",
                border: "1px solid var(--vault-ink-4)",
                borderRadius: "var(--radius-md)",
                boxShadow: "var(--shadow-md), var(--edge-inner-top)",
                padding: "clamp(28px,3.2vw,36px)",
                display: "flex",
                gap: 24,
                alignItems: "baseline",
                flexWrap: "wrap",
              }}
            >
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-4)", flex: "none", paddingTop: 2 }}>03</span>
              <div style={{ display: "flex", flexDirection: "column", gap: 9, flex: "1 1 320px" }}>
                <Kicker color="var(--vault-ink-4)">Het Echte Probleem</Kicker>
                <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(20px,2.2vw,26px)", letterSpacing: "-0.02em", color: "var(--vault-ink)" }}>Geen Bruikbare Data</h3>
                <p style={{ margin: 0, maxWidth: 620, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.65, color: "var(--vault-ink-2)", textWrap: "pretty" }}>
                  Trades worden genomen, gewonnen en verloren, maar nauwelijks omgezet in bruikbare inzichten. Zonder goede data weet je niet waar je voordeel ligt, welke fouten blijven terugkomen en onder welke omstandigheden je het beste presteert.
                </p>
              </div>
            </div>
          </Reveal>

          {items.slice(2).map(([t, d], i) => (
            <Reveal key={t} delay={210 + i * 70}>
              <div style={{ height: "100%", background: "var(--vault-surface)", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-md)", boxShadow: "var(--edge-inner-top)", padding: "24px 26px", display: "flex", gap: 18, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-4)", flex: "none", paddingTop: 2 }}>0{i + 4}</span>
                <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
                  <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 16.5, letterSpacing: "-0.01em", color: "var(--vault-ink)" }}>{t}</h3>
                  <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.58, color: "var(--vault-ink-3)", textWrap: "pretty" }}>{d}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={320}>
          <p style={{ margin: "clamp(32px,4vw,44px) 0 0", fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--vault-ink-2)", textAlign: "center", maxWidth: 680, marginLeft: "auto", marginRight: "auto", textWrap: "pretty" }}>
            Zonder een vastgelegd proces weet je niet of je probleem bij je uitvoering, je strategie of simpelweg bij normale marktvariatie ligt.
          </p>
        </Reveal>

        <Reveal delay={370}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 14, marginTop: 28 }}>
            <span aria-hidden="true" style={{ width: 32, height: 1, background: "var(--vault-line)" }} />
            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 12.5, letterSpacing: "0.04em", color: "var(--vault-ink-4)", textAlign: "center" }}>
              De oplossing is niet meer informatie. De oplossing is een aanpak die je kunt herhalen.
            </p>
            <span aria-hidden="true" style={{ width: 32, height: 1, background: "var(--vault-line)" }} />
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

/* ---------------- What The Vault Is (positioning) ---------------- */
function WhatItIs() {
  const pillars = [
    ["Persoonlijk, Niet Algemeen", "Jouw charts, terugkerende fouten en manier van beslissen bepalen waar we aan werken. Geen vast pad en geen standaardoplossing voor iedereen.", 0],
    ["Toepassen, Niet Alleen Kijken", "Wat je leert, pas je direct toe in chartwerk, replay, journaling, live trading en reviews.", 0],
    ["Feedback, Geen Signalen", "Je krijgt niet te horen wat je moet traden. We beoordelen je analyse, risico en beslissingen totdat je aanpak duidelijk en herhaalbaar wordt.", 1],
    ["Zelfstandig, Niet Afhankelijk", "Het doel is een duidelijke, op regels gebaseerde aanpak die je zelf kunt uitvoeren, beoordelen en verbeteren.", 1],
  ];
  const [hover, setHover] = React.useState(-1);
  const brightness = hover === 2 || hover === 3 ? 1.16 : hover >= 0 ? 1.06 : 1;
  const saturate = hover === 3 ? 0.82 : 1;
  return (
    <Section id="method" label="The Method" style={{ paddingTop: "clamp(56px,6vw,84px)", paddingBottom: "clamp(56px,6vw,84px)" }}>
      <Reveal>
        <SectionHead
          eyebrow="Wat The Vault Is"
          title={<>Geen Cursus.<br />Een Privéomgeving Gebouwd Rondom Jouw Trading.</>}
          lede="The Vault is een persoonlijke mentorship waarin jouw charts, beslissingen en trades centraal staan. Je komt niet binnen om trades te kopiëren. Je komt binnen om een aanpak te bouwen die je uiteindelijk zelfstandig kunt toepassen."
          align="center"
          maxLede={700}
        />
      </Reveal>

      <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: "clamp(22px,3vw,40px)", alignItems: "stretch", marginTop: "clamp(32px,4vw,48px)" }} className="ttv-2col">
        <Reveal style={{ display: "flex" }}>
          <div style={{ position: "relative", width: "100%", aspectRatio: "4 / 3", 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)" }}>
            <video
              autoPlay
              muted
              loop
              playsInline
              controls={false}
              disablePictureInPicture
              className="ttv-broll-video"
              poster="uploads/broll-poster.jpg"
              ref={(el) => { if (el) { el.muted = true; el.defaultMuted = true; el.volume = 0; window.persistentPlay(el); } }}
              onLoadedMetadata={(e) => window.persistentPlay(e.currentTarget)}
              onLoadedData={(e) => window.persistentPlay(e.currentTarget)}
              onCanPlay={(e) => window.persistentPlay(e.currentTarget)}
              onError={(e) => console.error("B-roll video failed to load", e.currentTarget.error)}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", filter: `grayscale(0.7) contrast(1.08) brightness(${brightness * 0.92}) saturate(${saturate * 0.5})`, transition: "filter .5s var(--ease-out)" }}
            >
              <source src="uploads/filmpie.mp4" type="video/mp4" />
            </video>
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "radial-gradient(120% 100% at 50% 30%, transparent 45%, rgba(6,6,7,.5) 100%)", pointerEvents: "none" }} />
            <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(6,6,7,.15) 0%, transparent 30%, transparent 65%, rgba(6,6,7,.55) 100%)", pointerEvents: "none" }} />
            <span style={{ position: "absolute", bottom: 12, left: 14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,.55)" }}>[ Binnen The Vault ]</span>
          </div>
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--vault-line-soft)", border: "1px solid var(--vault-line-soft)", borderRadius: "var(--radius-md)", overflow: "hidden" }} className="ttv-pillargrid">
          {pillars.map(([t, d, emphasis], i) => (
            <Reveal key={t} delay={i * 60} style={{ display: "flex" }}>
              <div
                onMouseEnter={() => setHover(i)}
                onMouseLeave={() => setHover(-1)}
                style={{
                  background: emphasis ? "var(--vault-surface-raised, #17171a)" : "var(--vault-surface)",
                  padding: "24px 22px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 9,
                  width: "100%",
                  borderTop: emphasis ? "1px solid var(--vault-ink-4)" : "1px solid transparent",
                  transition: "background .2s",
                }}
              >
                <Kicker color="var(--vault-ink-4)">0{i + 1}</Kicker>
                <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: emphasis ? 800 : 700, fontSize: 16.5, letterSpacing: "-0.01em", color: "var(--vault-ink)" }}>{t}</h3>
                <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.58, color: emphasis ? "var(--vault-ink-2)" : "var(--vault-ink-3)", textWrap: "pretty" }}>{d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>

      <Reveal delay={140}>
        <h3 style={{ margin: "clamp(28px,3.6vw,40px) 0 0", fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(22px,2.6vw,32px)", lineHeight: 1.2, letterSpacing: "-0.02em", color: "var(--vault-ink)", textAlign: "center", maxWidth: 700, marginLeft: "auto", marginRight: "auto", textWrap: "balance" }}>
          The Vault geeft je geen trades om te volgen.<br />Het bouwt de trader die ze zelf kan vinden en uitvoeren.
        </h3>
      </Reveal>
    </Section>
  );
}

/* ---------------- The 3-Phase Structure ---------------- */
function Phases() {
  const phases = [
    {
      n: "01",
      name: "Fundament",
      tag: "Leer De Markt Lezen",
      body: "Leer marktstructuur, pure prijsactie, liquiditeit en risico lezen. Bouw eerst de basis die nodig is om context te begrijpen voordat live trading centraal komt te staan.",
      points: ["Marktstructuur en trend", "Liquiditeit en belangrijke zones", "Basis van riskmanagement", "Zelfstandig charts leren lezen"],
      unlockLabel: "Voorwaarde Om Door Te Gaan",
      unlock: "Je kunt context, locatie en invalidatie uitleggen zonder te leunen op externe calls.",
    },
    {
      n: "02",
      name: "Uitvoering",
      tag: "Bouw Je Aanpak",
      body: "Zet je kennis om in een aanpak die ook in de live markt werkt. We combineren backtestdata met livedata, analyseren samen je resultaten en zoeken waar je aanpak winstgevend wordt, blijft of verder verbeterd kan worden.",
      points: ["High-value tradezones", "Een herhaalbaar entrymodel", "Backtestdata én livedata verzamelen", "Samen je resultaten analyseren"],
      unlockLabel: "Voorwaarde Om Door Te Gaan",
      unlock: "Je kunt je aanpak consequent uitvoeren en met je eigen data laten zien wat werkt, wat niet werkt en waar verbetering nodig is.",
    },
    {
      n: "03",
      name: "Verfijning",
      tag: "Word Zelfstandig",
      body: "We zetten de puntjes op de i. We pakken de laatste zwakke plekken aan, verfijnen je beslissingen en zorgen dat je zelfstandig en met vertrouwen je eigen aanpak kunt uitvoeren.",
      points: ["Live trades samen reviewen", "Laatste zwakke plekken verbeteren", "Risicomanagement onder druk", "Zelfstandig je plan uitvoeren"],
      unlockLabel: "Einddoel",
      unlock: "Je kunt zelfstandig traden, je eigen resultaten beoordelen en je aanpak blijven verbeteren zonder afhankelijk te zijn van begeleiding.",
      note: "Wanneer de resultaten en data er klaar voor zijn, kunnen we ook kijken naar de volgende stap: opschalen via eigen kapitaal of funded trading.",
    },
  ];
  const [active, setActive] = React.useState(-1);
  return (
    <Section id="phases" label="Phases" atmosphere style={{ paddingTop: "clamp(56px,6vw,84px)", paddingBottom: "clamp(56px,6vw,84px)" }}>
      <div style={{ maxWidth: "var(--content-max, 1240px)", margin: "0 auto" }}>
      <Reveal>
        <SectionHead
          eyebrow="De Opbouw"
          title="Drie Duidelijke Fases."
          lede="Iedere fase bouwt voort op de vorige. Je gaat pas verder wanneer je laat zien dat de basis staat. Zo bouw je vaardigheden die ook onder echte marktomstandigheden overeind blijven."
          maxLede={620}
          align="center"
        />
      </Reveal>

      {/* progression line with checkpoint nodes, centered above each card */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, alignItems: "center", margin: "clamp(34px,4vw,46px) 0 -1px" }} className="ttv-phasegrid ttv-phaseline" aria-hidden="true">
        {[0, 1, 2].map((i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 0 }}>
            <span style={{ flex: 1, height: 1, background: i > 0 && active >= i ? "var(--vault-ink-3)" : i > 0 ? "var(--vault-line-soft)" : "transparent", transition: "background .3s var(--ease-out)" }} />
            <span style={{ flex: "none", width: 9, height: 9, borderRadius: "50%", border: `1px solid ${active >= i ? "var(--vault-ink)" : "var(--vault-line)"}`, background: active >= i ? "var(--vault-ink)" : "transparent", boxShadow: active >= i ? "0 0 8px rgba(255,255,255,.35)" : "none", transition: "all .3s var(--ease-out)" }} />
            <span style={{ flex: 1, height: 1, background: i < 2 && active > i ? "var(--vault-ink-3)" : i < 2 ? "var(--vault-line-soft)" : "transparent", transition: "background .3s var(--ease-out)" }} />
          </div>
        ))}
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginTop: 22 }} className="ttv-phasegrid">
        {phases.map((p, i) => {
          const on = active === -1 || active >= i;
          return (
          <Reveal key={p.n} delay={i * 90} style={{ display: "flex" }}>
            <article
              onMouseEnter={() => setActive(i)}
              onMouseLeave={() => setActive(-1)}
              style={{
                position: "relative",
                width: "100%",
                background: "var(--vault-surface)",
                border: `1px solid ${active === i ? "var(--vault-ink-4)" : "var(--vault-line)"}`,
                borderRadius: "var(--radius-md)",
                boxShadow: active === i ? "var(--shadow-md), var(--edge-inner-top)" : "var(--edge-inner-top)",
                padding: "34px 30px 34px",
                display: "flex",
                flexDirection: "column",
                gap: 18,
                overflow: "hidden",
                opacity: on ? 1 : 0.55,
                transition: "opacity .3s var(--ease-out), border-color .3s var(--ease-out), box-shadow .3s var(--ease-out)",
              }}
            >
              <span aria-hidden="true" style={{ position: "absolute", top: -16, right: 16, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 108, lineHeight: 1, color: "rgba(255,255,255,.03)", letterSpacing: "-0.04em" }}>{p.n}</span>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-4)", letterSpacing: "0.08em" }}>FASE {p.n}</span>
                <Kicker color="var(--vault-ink-4)">{p.tag}</Kicker>
              </div>
              <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 31, letterSpacing: "-0.02em", color: "var(--vault-ink)" }}>{p.name}</h3>
              <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.62, color: "var(--vault-ink-2)", textWrap: "pretty" }}>{p.body}</p>
              <Rule style={{ margin: "4px 0" }} />
              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                {p.points.map((pt) => (
                  <li key={pt} style={{ display: "flex", gap: 11, alignItems: "baseline", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--vault-ink-3)" }}>
                    <span aria-hidden="true" style={{ width: 5, height: 5, flex: "none", transform: "translateY(-1px)", background: "var(--vault-ink-4)", borderRadius: 1, rotate: "45deg" }} />
                    {pt}
                  </li>
                ))}
              </ul>
              <Rule style={{ margin: "4px 0" }} />
              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <Kicker color="var(--vault-ink-4)">{p.unlockLabel}</Kicker>
                <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.55, color: "var(--vault-ink-3)", fontStyle: "italic", textWrap: "pretty" }}>{p.unlock}</p>
                {p.note && (
                  <p style={{ margin: "2px 0 0", fontFamily: "var(--font-sans)", fontSize: 12.5, lineHeight: 1.55, color: "var(--vault-ink-4)", textWrap: "pretty" }}>{p.note}</p>
                )}
              </div>
            </article>
          </Reveal>
          );
        })}
      </div>

      <Reveal delay={120}>
        <div style={{ marginTop: "clamp(32px,4vw,44px)", display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
          <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(18px,2vw,24px)", letterSpacing: "-0.01em", color: "var(--vault-ink)", textAlign: "center" }}>
            Fundament → Uitvoering → Verfijning
          </p>
          <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 15, color: "var(--vault-ink-2)", textAlign: "center" }}>
            Iedere fase bouwt verder op de vorige.
          </p>
        </div>
      </Reveal>
      </div>
    </Section>
  );
}

Object.assign(window, { Problem, WhatItIs, Phases });
