/* global React */

/* ============================================================
   REVIEWS PAGE — screenshot grid, ready for 20+ images
   ============================================================ */
function ReviewsPage({ setRoute }) {
  const reviews = [
    { id: 1,  src: "media/reviews/review-01.jpg" },
    { id: 2,  src: "media/reviews/review-02.jpg" },
    { id: 3,  src: "media/reviews/review-03.jpg" },
    { id: 4,  src: "media/reviews/review-04.jpg" },
    { id: 5,  src: "media/reviews/review-05.jpg" },
    { id: 6,  src: "media/reviews/review-06.jpg" },
    { id: 7,  src: "media/reviews/review-07.jpg" },
    { id: 8,  src: "media/reviews/review-08.jpeg" },
    { id: 9,  src: "media/reviews/review-09.jpeg" },
    { id: 10, src: "media/reviews/review-10.jpeg" },
    { id: 11, src: "media/reviews/review-11.jpeg" },
    { id: 12, src: "media/reviews/review-12.jpeg" },
    { id: 13, src: "media/reviews/review-13.jpeg" },
    { id: 14, src: "media/reviews/review-14.jpeg" },
  ];

  return (
    <div className="page">

      {/* —— HERO —— */}
      <section className="page-hero">
        <div className="container">
          <span className="t-mono-label">// REVIEWS</span>
          <h1 className="t-h1" style={{ marginTop: 16, maxWidth: 800 }}>
            What our students <span className="t-serif-italic" style={{ color: "var(--acc)" }}>actually say.</span>
          </h1>
          <p className="t-lede" style={{ marginTop: 20, maxWidth: 600 }}>
            Real messages, real results — straight from WhatsApp, Discord, and email. No actors, no scripts.
          </p>
          <div className="row gap-3 wrap" style={{ marginTop: 32 }}>
            <button className="btn btn-primary" onClick={() => setRoute("contact")}>Join the community →</button>
            <a className="btn btn-ghost" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">Book a free call</a>
          </div>
          {/* Stats bar */}
          <div className="reviews-hero-stats">
            {[
              ["14+", "Student reviews"],
              ["★ 5.0", "Average rating"],
              ["23", "Countries represented"],
              ["13 yrs", "NYC's #1 trading academy"],
            ].map(([val, lbl]) => (
              <div key={lbl} className="reviews-hero-stat">
                <div className="t-mono" style={{ fontSize: 22, color: "var(--ink-0)", fontWeight: 600, letterSpacing: "-0.02em" }}>{val}</div>
                <div className="t-mono-label" style={{ marginTop: 4 }}>{lbl}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— SCREENSHOT GRID —— */}
      <section>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// SCREENSHOT REVIEWS</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Unfiltered. <span className="t-serif-italic">Unedited.</span>
            </h2>
            <p className="t-lede" style={{ marginTop: 16, maxWidth: 560 }}>
              Screenshots from real students — drop yours in whenever they come in.
            </p>
          </div>

          <div className="reviews-grid">
            {reviews.filter(r => r.src).map((r) => (
              <div key={r.id} className="review-card">
                <img src={r.src} alt={"Review " + r.id} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top", display: "block", borderRadius: "inherit" }} />
              </div>
            ))}
            {/* Empty placeholder slots for future reviews */}
            {reviews.filter(r => !r.src).map((r) => (
              <div key={r.id} className="review-card">
                <div className="review-placeholder">
                  <div className="review-ph-inner">
                    <div className="review-ph-icon">
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                        <rect x="3" y="3" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="1.2"/>
                        <path d="M3 16 L8 11 L11 14 L15 9 L21 16" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                    <div className="t-mono-label" style={{ marginTop: 12, color: "var(--ink-4)", textAlign: "center" }}>
                      Coming soon
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="reviews-coming-soon">
            <div className="pill" style={{ marginInline: "auto" }}>
              <span className="dot"></span>
              More reviews coming soon
            </div>
            <p className="t-body" style={{ marginTop: 16, color: "var(--ink-3)", textAlign: "center", maxWidth: 500, marginInline: "auto" }}>
              We're collecting screenshots from students across WhatsApp and Discord. Check back soon.
            </p>
          </div>
        </div>
      </section>

      {/* —— WRITTEN TESTIMONIALS —— */}
      <section style={{ background: "var(--bg-1)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="section-head">
            <span className="t-mono-label">// IN THEIR WORDS</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Longer stories <span className="t-serif-italic">from the room.</span>
            </h2>
          </div>
          <div className="testimonials-grid">
            {[
              { q: "I had been losing money for two years before this. The mentorship gave me one process to be good at — and I finally got good at it.", n: "Marcus L.", r: "Equities, part-time", from: "Brooklyn, NY" },
              { q: "It's not a pump room. It's people watching levels, talking through setups, owning their losses. That's exactly what I needed.", n: "Priya S.", r: "Futures · ES/NQ", from: "London, UK" },
              { q: "Daniel and Philip changed how I journal. I went from blaming the market to fixing my process — which was the whole unlock.", n: "Diego R.", r: "Forex swing", from: "Mexico City" },
              { q: "The WhatsApp is the part nobody else has. Real questions, real answers — no gurus posting Lambos. I lurk every morning.", n: "Aisha B.", r: "Options, beginner", from: "Toronto, ON" },
              { q: "I came in cocky after a hot streak. Brandon basically saved me from blowing up. I needed someone to actually tell me the truth.", n: "Jonas K.", r: "Crypto · BTC/ETH", from: "Berlin, DE" },
              { q: "Showed up to one NYC meetup as a guest. Joined that night. The vibe is different in person — these are real people, not avatars.", n: "Cassandra T.", r: "Equities · day", from: "Jersey City, NJ" },
            ].map((t, i) => (
              <figure key={i} className="testimonial">
                <div className="t-mono-label" style={{ color: "var(--gold)" }}>★ ★ ★ ★ ★</div>
                <blockquote style={{ margin: "20px 0 0", fontWeight: 400, lineHeight: 1.4, fontSize: 18, color: "var(--ink-1)", flex: 1 }}>
                  "{t.q}"
                </blockquote>
                <figcaption className="testimonial-foot">
                  <div className="testimonial-avatar" style={{ background: `oklch(${40 + i * 5}% 0.10 ${220 + i * 30})` }}/>
                  <div>
                    <div style={{ color: "var(--ink-0)", fontSize: 14 }}>{t.n}</div>
                    <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>{t.r} · {t.from}</div>
                  </div>
                </figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>

      {/* —— CTA —— */}
      <section>
        <div className="container">
          <div className="cta-block">
            <div className="cta-bg-grid" aria-hidden></div>
            <span className="t-mono-label" style={{ color: "var(--acc)", position: "relative" }}>// JOIN THEM</span>
            <h2 className="t-display" style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 72px)", position: "relative" }}>
              Ready to write your <span className="t-serif-italic">own review?</span>
            </h2>
            <div className="row gap-3 center" style={{ marginTop: 36, justifyContent: "center", position: "relative" }}>
              <button className="btn btn-primary" onClick={() => setRoute("contact")}>Get in touch</button>
              <a className="btn btn-ghost" href="https://calendly.com/thetraderdaddy1/10min" target="_blank" rel="noopener noreferrer">Book a free 10-min call →</a>
            </div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.ReviewsPage = ReviewsPage;