// The Trading Vault, Mentorship: Pricing/Application · FAQ · Final CTA · Footer

/* ---------------- Founding Price / Application ---------------- */
function Pricing() {
  const { Button } = TTV;
  const steps = [
    ["Aanmelden", "Verstuurd", "Vertel waar je nu staat, wat je doelen zijn en wat je belangrijkste obstakels zijn."],
    ["Persoonlijke Beoordeling", "Beoordeeld", "Ik bekijk persoonlijk of The Vault aansluit op jouw situatie."],
    ["Privégesprek", "Besproken", "We bespreken waar je nu staat, wat er moet veranderen en of de mentorship de juiste volgende stap is."],
    ["Beslissing", "Beslist", "Wanneer er van beide kanten een goede match is, ontvang je een duidelijk aanbod en beslis je zonder druk."],
  ];
  const [active, setActive] = React.useState(-1);
  return (
    <Section id="apply" label="Application" atmosphere style={{ paddingTop: "clamp(90px,10vw,150px)", paddingBottom: "clamp(90px,10vw,150px)", position: "relative", overflow: "hidden" }}>
      {/* faint architectural background */}
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.5 }}>
        {[18, 38, 62, 82].map((l, i) => (
          <span key={i} style={{ position: "absolute", top: 0, bottom: 0, left: l + "%", width: 1, background: "linear-gradient(180deg, transparent, rgba(255,255,255,.035) 30%, rgba(255,255,255,.035) 70%, transparent)" }} />
        ))}
        <div style={{ position: "absolute", top: 0, left: "50%", width: "60%", height: "45%", transform: "translateX(-50%)", background: "radial-gradient(closest-side, rgba(255,255,255,.05), transparent 72%)" }} />
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1fr", gap: "clamp(28px,4vw,52px)", alignItems: "start", maxWidth: 1160, margin: "0 auto", position: "relative" }} className="ttv-2col">
        {/* Left: access panel */}
        <Reveal style={{ display: "flex" }}>
          <div
            className="tv-beam"
            style={{
              position: "relative",
              width: "100%",
              background: "linear-gradient(168deg, #161619 0%, #0e0e11 100%)",
              border: "1px solid var(--vault-line)",
              borderRight: "1px solid var(--vault-ink-4)",
              borderRadius: "var(--radius-lg)",
              boxShadow: "var(--shadow-lg), var(--edge-inner-top)",
              padding: "clamp(28px,3.6vw,38px)",
              display: "flex",
              flexDirection: "column",
              gap: 20,
              overflow: "hidden",
            }}
          >
            <div style={{ position: "relative", zIndex: 2, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
                <Kicker color="var(--vault-ink-4)">Eerste Groep</Kicker>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", color: "var(--vault-ink-4)", border: "1px solid var(--vault-line)", borderRadius: "var(--radius-xs)", padding: "5px 9px" }}>BEPERKTE PLEKKEN</span>
              </div>

              <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
                <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(26px,3vw,34px)", letterSpacing: "-0.03em", color: "var(--vault-ink)", lineHeight: 1.12 }}>
                  Toegang Alleen Via Aanmelding.
                </span>
                <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.6, color: "var(--vault-ink-2)", textWrap: "pretty" }}>
                  The Vault is een persoonlijke 1-op-1 mentorship met beperkte capaciteit. Iedere aanmelding wordt persoonlijk beoordeeld voordat er een plek wordt aangeboden.
                </p>
              </div>

              <span aria-hidden="true" style={{ height: 1, background: "var(--vault-line-soft)" }} />

              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 11 }}>
                {[
                  "Persoonlijke 1-op-1 begeleiding",
                  "Een duidelijke opbouw in drie fases",
                  "Live trading en persoonlijke reviews",
                  "Ondersteuning na de eerste twaalf weken",
                ].map((f) => (
                  <li key={f} style={{ display: "flex", gap: 10, alignItems: "baseline", fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--vault-ink-2)" }}>
                    <span aria-hidden="true" style={{ flex: "none", color: "var(--vault-ink-3)", fontFamily: "var(--font-mono)", fontSize: 12.5 }}>+</span>
                    {f}
                  </li>
                ))}
              </ul>

              <a href={APPLY_URL} onClick={(e) => { e.preventDefault(); window.__ttvOpenVSL(e.currentTarget); }} style={{ textDecoration: "none", marginTop: 4 }}>
                <Button variant="primary" size="lg" fullWidth>Meld Je Aan Voor The Vault</Button>
              </a>
              <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--vault-ink-4)", textAlign: "center" }}>
                Iedere aanmelding wordt persoonlijk beoordeeld.
              </p>
            </div>
          </div>
        </Reveal>

        {/* Right: how application works */}
        <div style={{ display: "flex", flexDirection: "column", gap: 20 }} onMouseLeave={() => setActive(-1)}>
          <Reveal>
            <SectionHead eyebrow="Het Proces" title="Wat Er Gebeurt Na Je Aanmelding." lede="Een duidelijk en persoonlijk proces om eerst te bepalen of er een goede match is, voordat je ergens aan vastzit." maxLede={460} />
          </Reveal>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {/* connector from panel's right edge into step 01 */}
            <span aria-hidden="true" style={{ display: "block", width: 56, height: 1, marginBottom: 10, marginLeft: -18, background: "linear-gradient(90deg, var(--vault-ink-4), transparent)" }} />
            {steps.map(([t, status, d], i) => {
              const on = active === -1 || active >= i;
              return (
              <Reveal key={t} delay={i * 60}>
                <div
                  onMouseEnter={() => setActive(i)}
                  style={{ display: "flex", gap: 18, paddingBottom: i === steps.length - 1 ? 0 : 22, opacity: on ? 1 : 0.55, transition: "opacity .3s var(--ease-out)" }}
                >
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "center", flex: "none" }}>
                    <span style={{ width: 36, height: 36, borderRadius: "var(--radius-pill)", border: `1px solid ${active >= i ? "var(--vault-ink-4)" : "var(--vault-line)"}`, background: active === i ? "var(--vault-surface-raised, #17171a)" : "var(--vault-surface)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: 13, color: active >= i ? "var(--vault-ink)" : "var(--vault-ink-2)", transition: "all .3s var(--ease-out)" }}>{i + 1}</span>
                    {i !== steps.length - 1 && <span aria-hidden="true" style={{ width: 1, flex: 1, minHeight: 18, background: active > i ? "var(--vault-ink-3)" : "var(--vault-line-soft)", marginTop: 6, transition: "background .3s var(--ease-out)" }} />}
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", gap: 5, paddingTop: 5 }}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 9 }}>
                      <h3 style={{ margin: 0, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 16, letterSpacing: "-0.01em", color: "var(--vault-ink)" }}>{t}</h3>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--vault-ink-4)" }}>{status}</span>
                    </div>
                    <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.6, color: "var(--vault-ink-3)", maxWidth: 420, textWrap: "pretty" }}>{d}</p>
                  </div>
                </div>
              </Reveal>
              );
            })}
          </div>
          <Reveal delay={240}>
            <p style={{ margin: 0, fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: "0.04em", color: "var(--vault-ink-4)" }}>
              Geen druk. Geen directe aankoop. Beide kanten bepalen of het past.
            </p>
          </Reveal>
        </div>
      </div>

      {/* brand divider */}
      <div aria-hidden="true" style={{ marginTop: "clamp(48px,5.5vw,64px)", display: "flex", alignItems: "center", justifyContent: "center", gap: 18, position: "relative" }}>
        <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, transparent, var(--vault-line) 80%)" }} />
        <span style={{ width: 6, height: 6, transform: "rotate(45deg)", border: "1px solid var(--vault-ink-4)", flex: "none" }} />
        <span style={{ flex: 1, height: 1, background: "linear-gradient(270deg, transparent, var(--vault-line) 80%)" }} />
      </div>
    </Section>
  );
}

/* ---------------- FAQ ---------------- */
function FAQItem({ q, a, open, onToggle }) {
  return (
    <div style={{ borderBottom: "1px solid var(--vault-line-soft)" }}>
      <button
        onClick={onToggle}
        aria-expanded={open}
        style={{
          width: "100%",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 20,
          padding: "22px 4px",
          background: "transparent",
          border: 0,
          cursor: "pointer",
          textAlign: "left",
          color: "inherit",
        }}
      >
        <span style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: "clamp(15px,1.4vw,17px)", letterSpacing: "-0.01em", color: open ? "var(--vault-ink)" : "var(--vault-ink-2)", transition: "color .2s" }}>{q}</span>
        <span aria-hidden="true" style={{ flex: "none", width: 20, height: 20, position: "relative", color: "var(--vault-ink-3)" }}>
          <span style={{ position: "absolute", top: "50%", left: 0, width: 20, height: 1, background: "currentColor" }} />
          <span style={{ position: "absolute", top: "50%", left: 0, width: 20, height: 1, background: "currentColor", transform: open ? "rotate(0deg)" : "rotate(90deg)", transition: "transform .26s var(--ease-out)" }} />
        </span>
      </button>
      <div style={{ display: "grid", gridTemplateRows: open ? "1fr" : "0fr", transition: "grid-template-rows .3s var(--ease-out)" }}>
        <div style={{ overflow: "hidden" }}>
          <p style={{ margin: 0, padding: "0 40px 24px 4px", fontFamily: "var(--font-sans)", fontSize: 14.5, lineHeight: 1.7, color: "var(--vault-ink-3)", maxWidth: 760, textWrap: "pretty", whiteSpace: "pre-line" }}>{a}</p>
        </div>
      </div>
    </div>
  );
}

function FAQ() {
  const faqs = [
    ["Is deze mentorship geschikt voor beginners?", "Ja, maar alleen voor serieuze beginners. Je hoeft niet winstgevend te zijn voordat je je aanmeldt, maar je moet wel coachbaar, gedisciplineerd en bereid zijn om een gestructureerd proces te volgen. Dit is niet voor mensen die op zoek zijn naar shortcuts, signalen of snelle winst. Het is voor traders die vanaf de basis echte price-action skills willen opbouwen."],
    ["Geef je trading-signalen?", "Nee. Het doel is niet om je afhankelijk te maken van de entries van iemand anders, maar om je te helpen price action te begrijpen, marktstructuur te lezen, risico te beheersen en zelfstandig betere beslissingen te nemen. Signalen geven je een trade; skill geeft je een proces. Deze mentorship is gebouwd rond skill."],
    ["Wat maakt dit anders dan een cursus?", "Een cursus geeft je informatie. Een mentorship geeft je feedback. De focus ligt niet alleen op het leren van concepten, maar op het toepassen ervan, het terugkijken van je beslissingen, het corrigeren van fouten en het bouwen van een gestructureerd proces. Je kijkt niet alleen lessen, je ontwikkelt je trading."],
    ["Op welke markten focus je?", "De belangrijkste focus ligt op price action, dus de principes gelden voor verschillende liquide markten zoals crypto en forex, afhankelijk van jouw focus en marktomstandigheden. De mentorship leunt niet op indicatoren, signaalgroepen of één vast marktverhaal. De focus ligt op structuur, liquiditeit, risico en uitvoering."],
    ["Hoeveel tijd moet ik per week vrijmaken?", "Dat hangt af van je niveau en doelen. Je moet minimaal wekelijks tijd kunnen vrijmaken voor studie, chartwerk, backtesting, journaling en review. Dit is niet passief. Als je geen tijd kunt maken om je eigen beslissingen te bestuderen en je aanpak terug te kijken, is deze mentorship waarschijnlijk niet de juiste fit."],
    ["Wat als ik niet bij iedere livesessie kan zijn?", "Dat hangt af van het uiteindelijke format van de mentorship. Als er livesessies, opnames of asynchrone feedback worden gebruikt, wordt dit duidelijk uitgelegd voordat je begint. Het doel is om de structuur praktisch te maken, maar de mentorship vraagt nog steeds actieve deelname. Je hoeft niet 24/7 beschikbaar te zijn, je moet het proces wel serieus nemen."],
    ["Garandeer je resultaten?", "Nee. Wij kunnen je alle kennis, structuur, feedback en tools geven die je nodig hebt, maar uiteindelijk moet jij ze gebruiken. Hoe serieus je oefent, feedback toepast en tijd in je ontwikkeling stopt, bepaalt voor een groot deel wat je eruit haalt. Wij pushen je, sturen bij en helpen waar nodig, maar jij moet uiteindelijk zelf de trades uitvoeren."],
    ["Is dit financieel advies?", "Nee. The Trading Vault Mentorship is uitsluitend educatief. Er wordt geen financieel advies, beleggingsadvies, tradingsignalen, portfoliobeheer of gegarandeerd resultaat geboden. Je blijft zelf verantwoordelijk voor je eigen handelsbeslissingen en risico."],
    ["Helpt dit mij om prop-firm challenges te halen?", "Dat kan zeker een volgende stap zijn. Binnen The Vault bouwen we eerst aan een winstgevende en herhaalbare aanpak. Als je resultaten en data sterk genoeg zijn, kunnen we diezelfde aanpak gebruiken om gericht naar prop-firm challenges en funded trading toe te werken. We hebben hiervoor een systeem dat in de praktijk al succesvol is toegepast. Een challenge halen is natuurlijk nooit gegarandeerd, uiteindelijk moet jij de trades zelf uitvoeren."],
    ["Waarom werk je met een aanmeldingsprocedure?", "Omdat dit geen massaproduct is. De mentorship vraagt tijd, feedback en serieuze inzet. De aanmelding helpt bepalen of jouw niveau, verwachtingen, mindset en doelen aansluiten bij het programma. Het doel is niet om iedereen aan te nemen, maar om te werken met traders die serieus zijn over het opbouwen van echte vaardigheden."],
    ["Is dit alleen voor traders uit Nederland en België?", "Het is voornamelijk gebouwd voor serieuze traders uit Nederland en België. De pagina en materialen kunnen Engels gebruiken waar dat bij het merk past, maar de voertaal en communicatiestijl worden verduidelijkt voordat je begint. Als taal voor jou belangrijk is, vraag dit dan tijdens de aanmeldingsprocedure."],
    ["Wat is het restitutiebeleid?", "Het restitutiebeleid wordt duidelijk uitgelegd voordat je begint. Omdat dit een intensieve mentorship is met persoonlijke begeleiding en beperkte capaciteit, kunnen de voorwaarden afwijken van een standaard digitale cursus. Er mag geen onduidelijkheid zijn voor de betaling, je weet precies wat de voorwaarden zijn voordat je een beslissing neemt."],
    ["Wat is de founding prijs?", "De founding prijs is beperkt en alleen beschikbaar voor de eerste geaccepteerde aanmeldingen. De prijs kan stijgen naarmate de mentorship zich ontwikkelt, het aanbod sterker wordt en de capaciteit beperkter wordt. Exacte prijzen en betaalopties worden besproken tijdens de aanmeldingsprocedure."],
    ["Voor wie is dit niet geschikt?", "Niet voor mensen die signalen, shortcuts, hype of gegarandeerde winst willen. Niet voor traders die weigeren te journalen, feedback vermijden of steeds van de ene naar de andere strategie springen. Het is voor serieuze traders die bereid zijn om te vertragen, structuur op te bouwen en echte vaardigheden te ontwikkelen."],
    ["Wat gebeurt er nadat ik mij aanmeld?", "Je aanmelding wordt beoordeeld om te zien of de mentorship een goede fit is. Als er een match is, is de volgende stap een gesprek om je huidige situatie, doelen, uitdagingen te bespreken en of The Trading Vault Mentorship je verder kan helpen. Dit is geen directe aankoop, toegang verloopt via aanmelding."],
  ];
  const [open, setOpen] = React.useState(0);
  const mid = Math.ceil(faqs.length / 2);
  const cols = [faqs.slice(0, mid), faqs.slice(mid)];
  return (
    <Section id="faq" label="FAQ" style={{
      background:
        "linear-gradient(rgba(8,8,10,.965), rgba(8,8,10,.98))," +
        "url('uploads/SteezyWes_A_dramatic_dark_cinematic_YouTube_thumbnail_backgro_e05253f5-218a-408a-8bc3-07dccea7ee46_3.png') center / cover no-repeat, var(--vault-void)",
    }}>
      <Reveal>
        <SectionHead
          eyebrow="Veelgestelde Vragen"
          title="Duidelijkheid Voordat Je Je Aanmeldt."
          align="center"
          maxLede={560}
        />
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 clamp(32px,5vw,72px)", marginTop: "clamp(36px,4vw,52px)" }} className="ttv-faqgrid">
        {cols.map((col, ci) => (
          <div key={ci} style={{ borderTop: "1px solid var(--vault-line-soft)" }}>
            {col.map((f, i) => {
              const idx = ci * mid + i;
              return <FAQItem key={f[0]} q={f[0]} a={f[1]} open={open === idx} onToggle={() => setOpen(open === idx ? -1 : idx)} />;
            })}
          </div>
        ))}
      </div>

      {/* divider into the final CTA */}
      <div aria-hidden="true" style={{ marginTop: "clamp(56px,7vw,84px)", display: "flex", alignItems: "center", justifyContent: "center", gap: 18 }}>
        <span style={{ flex: 1, height: 1, background: "linear-gradient(90deg, transparent, var(--vault-line) 80%)" }} />
        <span style={{ width: 6, height: 6, transform: "rotate(45deg)", border: "1px solid var(--vault-ink-4)", flex: "none" }} />
        <span style={{ flex: 1, height: 1, background: "linear-gradient(270deg, transparent, var(--vault-line) 80%)" }} />
      </div>
    </Section>
  );
}

/* ---------------- Footer ---------------- */
function Footer() {
  const links = [
    ["De Methode", "#method"],
    ["Fases", "#phases"],
    ["Resultaten", "#proof"],
    ["Over Wesley", "#founder"],
    ["FAQ", "#faq"],
  ];
  const legalLinks = [
    ["Privacy", "#"],
    ["Voorwaarden", "#"],
    ["Contact", "#"],
  ];
  return (
    <footer style={{ background: "var(--vault-void, #08080a)", borderTop: "1px solid var(--vault-line)", padding: "clamp(56px,7vw,80px) var(--section-pad-x) 36px" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto", display: "flex", flexDirection: "column", gap: 40 }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 40, justifyContent: "space-between", alignItems: "flex-start" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 16, maxWidth: 320 }}>
            <img src="assets/tv-wordmark-white.png" alt="The Trading Vault" style={{ height: 38, alignSelf: "flex-start" }} />
            <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13.5, lineHeight: 1.65, color: "var(--vault-ink-3)", textWrap: "pretty" }}>
              Een persoonlijke price-action mentorship voor serieuze traders uit Nederland en België. Gebouwd rond discipline, structuur en zelfstandig leren handelen.
            </p>
          </div>
          <nav style={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 }}>
            {links.map(([l, h]) => (
              <a key={l} href={h} style={{ fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--vault-ink)", textDecoration: "none", padding: "4px 0", transition: "letter-spacing .18s" }} onMouseEnter={(e) => (e.currentTarget.style.letterSpacing = "0.18em")} onMouseLeave={(e) => (e.currentTarget.style.letterSpacing = "0.14em")}>{l}</a>
            ))}
            <a href={APPLY_URL} onClick={(e) => { e.preventDefault(); window.__ttvOpenVSL(e.currentTarget); }} style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 11.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--vault-ink)", textDecoration: "none", padding: "4px 0", borderBottom: "1px solid var(--vault-ink-3)" }}>Meld Je Aan →</a>
          </nav>
        </div>

        <Rule style={{ background: "var(--vault-line)" }} />

        {/* Risk disclaimer */}
        <div style={{ display: "flex", flexDirection: "column", gap: 10, maxWidth: 880, paddingTop: 4 }}>
          <Kicker color="var(--vault-ink-4)">Risicowaarschuwing</Kicker>
          <p style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.75, color: "var(--vault-ink-3)", textWrap: "pretty" }}>
            Trading brengt risico met zich mee. Deze mentorship is uitsluitend bedoeld voor educatieve doeleinden en vormt geen financieel advies, beleggingsadvies of handelsadvies. Er worden geen signalen, gegarandeerde resultaten of gegarandeerde payouts aangeboden. Resultaten uit het verleden bieden geen garantie voor de toekomst. Je blijft altijd zelf verantwoordelijk voor je handelsbeslissingen en riskmanagement. Trade alleen met geld dat je kunt missen. Niets op deze website vormt een aanbeveling om een financieel instrument te kopen, verkopen of aan te houden.
          </p>
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, paddingTop: 12, borderTop: "1px solid var(--vault-line-soft)" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--vault-ink-4)" }}>© 2026 The Trading Vault · KVK 98937847</span>
          <nav style={{ display: "flex", gap: 18 }}>
            {legalLinks.map(([l, h]) => (
              <a key={l} href={h} style={{ fontFamily: "var(--font-sans)", fontSize: 11.5, color: "var(--vault-ink-4)", textDecoration: "none" }}>{l}</a>
            ))}
          </nav>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pricing, FAQ, Footer });
