// The Trading Vault, Mentorship: Featured Testimonial, Trustpilot spotlight card

const TESTIMONIALS = [
  {
    id: "t1",
    quote: "Privé traden is echt een andere game dan funded accounts. Zijn manier van challenges is hetgeen wat mij geholpen heeft om het te behalen, een bewezen strategie die dus ook voor mij werkt! Challenge fase passed, nu op naar payouts!",
    fullQuote: "Wil graag @Wesley | The Trading Vault bedanken voor de begeleiding met funded! Privé traden is echt een andere game dan funded accounts. Als je consistent winst kan maken betekent dat niet dat je ook funded kan traden ben ik achter gekomen. Zijn manier van challenges is hetgeen wat mij geholpen heeft om het te behalen, een bewezen strategie die dus ook voor mij werkt! Challenge fase passed, nu op naar payouts!",
    reviewerName: "Davy",
    avatar: "uploads/Schermafbeelding 2026-07-22 om 16.23.51.png",
    discordUsername: "Ddavy",
    memberContext: "The Vault-lid",
    reviewDate: "Reviewed on Trustpilot",
    rating: 5,
    verifiedCommunityMember: false,
    image: "uploads/pasted-1784726291008-0.png",
    imageAlt: "Trader reviewing an annotated chart during a funded challenge",
    trustpilotUrl: "https://nl.trustpilot.com/review/bitcoinsecrets.nl",
    featured: true,
    proofBadge: { image: "uploads/pasted-1784730475747-0.png", label: "Challenge Behaald" },
  },
];

function StarRow({ rating }) {
  return (
    <div aria-label={`${rating} out of 5 stars`} style={{ display: "flex", gap: 3 }}>
      {Array.from({ length: 5 }, (_, i) => (
        <span key={i} aria-hidden="true" style={{ color: i < rating ? "var(--vault-ink)" : "var(--vault-ink-4)", fontSize: 16, lineHeight: 1 }}>&#9733;</span>
      ))}
    </div>
  );
}

function Avatar({ name, image }) {
  if (image) {
    return (
      <span style={{ flex: "none", width: 36, height: 36, borderRadius: "50%", overflow: "hidden", border: "1px solid var(--vault-line)", background: "var(--vault-surface-raised, #17171a)" }}>
        <img src={image} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
      </span>
    );
  }
  const initials = name.split(" ").map((w) => w.replace(".", "")[0]).filter(Boolean).slice(0, 2).join("").toUpperCase();
  return (
    <span style={{ flex: "none", width: 36, height: 36, borderRadius: "50%", border: "1px solid var(--vault-line)", background: "var(--vault-surface-raised, #17171a)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--vault-ink-3)" }}>{initials}</span>
  );
}

function TestimonialVisual({ item, hover }) {
  return (
    <div style={{ position: "relative", width: "100%", height: "100%", minHeight: 220, overflow: "hidden" }}>
      <img
        src={item.image}
        alt={item.imageAlt}
        loading="lazy"
        style={{
          position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover",
          filter: `grayscale(0.5) brightness(${hover ? 1.08 : 1.02})`,
          transition: "filter .4s var(--ease-out)",
        }}
      />
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(90deg, var(--vault-surface) 0%, rgba(18,18,21,.42) 20%, rgba(18,18,21,.28) 45%, rgba(18,18,21,.22) 100%)" }} />
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "rgba(8,8,10,.3)" }} />
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, boxShadow: "inset 0 0 80px rgba(0,0,0,.45)" }} />
    </div>
  );
}

function CertificateLightbox({ item, onClose }) {
  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: 520, width: "100%", maxHeight: "85vh", display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ borderRadius: "var(--radius-md)", overflow: "hidden", border: "1px solid var(--vault-line)", background: "var(--vault-surface)" }}>
          <img src={item.proofBadge.image} alt={item.proofBadge.label} style={{ display: "block", width: "100%", height: "auto" }} />
        </div>
        <button onClick={onClose} style={{ alignSelf: "center", 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>
      </div>
    </div>
  );
}

function FeaturedTestimonial() {
  const [index, setIndex] = React.useState(Math.max(0, TESTIMONIALS.findIndex((t) => t.featured)));
  const [hover, setHover] = React.useState(false);
  const [showCert, setShowCert] = React.useState(false);
  const item = TESTIMONIALS[index] || TESTIMONIALS[0];
  const multi = TESTIMONIALS.length > 1;

  const go = (dir) => setIndex((i) => (i + dir + TESTIMONIALS.length) % TESTIMONIALS.length);

  const onKeyDown = (e) => {
    if (!multi) return;
    if (e.key === "ArrowLeft") go(-1);
    if (e.key === "ArrowRight") go(1);
  };

  return (
    <div style={{ marginTop: "clamp(44px,5vw,64px)" }}>
      <Reveal>
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginBottom: "clamp(26px,3vw,36px)" }}>
          <Kicker color="var(--vault-ink-4)">Ervaring Van Een Trader</Kicker>
          <h3 style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(22px,2.6vw,30px)", letterSpacing: "-0.02em", color: "var(--vault-ink)" }}>Wat Traders Zeggen Nadat Ze The Vault Binnenstappen.</h3>
          <p style={{ margin: 0, maxWidth: 560, fontFamily: "var(--font-sans)", fontSize: 14, lineHeight: 1.6, color: "var(--vault-ink-3)", textWrap: "pretty" }}>
            Eerlijke feedback van traders die de aanpak, structuur en persoonlijke begeleiding binnen The Vault hebben ervaren.
          </p>
        </div>
      </Reveal>

      <Reveal delay={80}>
        <div
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          onKeyDown={onKeyDown}
          tabIndex={0}
          style={{
            maxWidth: 1300,
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "1.3fr 1fr",
            minHeight: 480,
            background: "linear-gradient(168deg, #141417 0%, #0e0e11 100%)",
            border: `1px solid ${hover ? "var(--vault-ink-4)" : "var(--vault-line)"}`,
            borderRadius: "var(--radius-md)",
            boxShadow: hover ? "var(--shadow-lg), var(--edge-inner-top)" : "var(--edge-inner-top)",
            overflow: "hidden",
            outline: "none",
            transition: "border-color .3s, box-shadow .3s",
          }}
          className="ttv-testimonial-card"
        >
          <div style={{ padding: "clamp(34px,4vw,54px)", display: "flex", flexDirection: "column", gap: 22, justifyContent: "center" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <span style={{ fontFamily: "var(--font-sans)", fontWeight: 800, fontSize: 13.5, letterSpacing: "0.02em", color: "var(--vault-ink-2)" }}>Trustpilot</span>
              <StarRow rating={item.rating} />
            </div>

            <blockquote style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(18px,1.9vw,22px)", lineHeight: 1.5, letterSpacing: "-0.005em", color: "var(--vault-ink)", textWrap: "pretty" }}>
              "{item.quote}"
            </blockquote>

            {item.fullQuote && (
              <a
                href={item.trustpilotUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 11.5, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--vault-ink-4)", textDecoration: "none", width: "fit-content", transition: "color .18s" }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--vault-ink-2)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = "var(--vault-ink-4)")}
              >
                Bekijk De Volledige Review →
              </a>
            )}

            <footer style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <Avatar name={item.reviewerName} image={item.avatar} />
              <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                <cite style={{ fontStyle: "normal", fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 14, color: "var(--vault-ink)" }}>{item.reviewerName}</cite>
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--vault-ink-3)" }}>
                  {item.discordUsername ? `Discord: @${item.discordUsername} · ` : ""}{item.verifiedCommunityMember ? "Geverifieerd community-lid" : item.memberContext}
                </span>
                {item.proofBadge && (
                  <button
                    onClick={() => setShowCert(true)}
                    style={{ marginTop: 3, alignSelf: "flex-start", background: "transparent", border: 0, padding: 0, cursor: "pointer", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--vault-ink-3)", borderBottom: "1px solid var(--vault-line-soft)", transition: "color .18s" }}
                    onMouseEnter={(e) => (e.currentTarget.style.color = "var(--vault-ink)")}
                    onMouseLeave={(e) => (e.currentTarget.style.color = "var(--vault-ink-3)")}
                  >
                    {item.proofBadge.label} →
                  </button>
                )}
              </div>
            </footer>

            {!item.fullQuote && (
              <a
                href={item.trustpilotUrl}
                target="_blank"
                rel="noopener noreferrer"
                style={{ fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--vault-ink-3)", textDecoration: "none", width: "fit-content", borderBottom: "1px solid var(--vault-line-soft)", paddingBottom: 2, transition: "color .18s" }}
                onMouseEnter={(e) => (e.currentTarget.style.color = "var(--vault-ink)")}
                onMouseLeave={(e) => (e.currentTarget.style.color = "var(--vault-ink-3)")}
              >
                Bekijk Op Trustpilot →
              </a>
            )}

            {multi && (
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 6 }}>
                <button onClick={() => go(-1)} aria-label="Previous testimonial" style={{ width: 30, height: 30, borderRadius: "50%", border: "1px solid var(--vault-line)", background: "transparent", color: "var(--vault-ink-3)", cursor: "pointer", fontSize: 13 }}>&#8592;</button>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--vault-ink-4)", letterSpacing: "0.05em" }}>{String(index + 1).padStart(2, "0")} / {String(TESTIMONIALS.length).padStart(2, "0")}</span>
                <button onClick={() => go(1)} aria-label="Next testimonial" style={{ width: 30, height: 30, borderRadius: "50%", border: "1px solid var(--vault-line)", background: "transparent", color: "var(--vault-ink-3)", cursor: "pointer", fontSize: 13 }}>&#8594;</button>
              </div>
            )}
          </div>

          <TestimonialVisual item={item} hover={hover} />
        </div>
      </Reveal>
      {showCert && <CertificateLightbox item={item} onClose={() => setShowCert(false)} />}
    </div>
  );
}

Object.assign(window, { FeaturedTestimonial });