// Testimonials page

const TESTIMONIALS = [
  {
    name: "Sanne Kuipers",
    role: "Marathon runner · Amsterdam",
    program: "Rehab & Performance",
    quote: "Finally, a coach who treats the injury and the goal as the same problem. I've trained pain-free for the first time in years, and ran a PB at Berlin six months in.",
    img: R('avSanne', "https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=400&q=80"),
    accent: true,
  },
  {
    name: "Karim El-Idrissi",
    role: "Tech founder · Rotterdam",
    program: "Personal Coaching",
    quote: "I came in tired and stiff. A year later I'm stronger than I was at 25 and the back pain hasn't come back. The discipline carries over into every part of work.",
    img: R('avKarim', "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=400&q=80"),
  },
  {
    name: "Jeroen V.",
    role: "Lawyer · The Hague",
    program: "Online Coaching",
    quote: "I travel constantly. The weekly check-ins keep me honest and the programming adapts in a way no template app ever could.",
    img: R('avJeroen', "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=400&q=80"),
  },
  {
    name: "Layla H.",
    role: "Surgical resident · Utrecht",
    program: "40-Day Reset Challenge",
    quote: "The Reset cohort changed how I think about training around discipline cycles. Three years later I still run the same protocols whenever I need to find my edge again.",
    img: R('avLayla', "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=400&q=80"),
    dark: true,
  },
  {
    name: "Daan Hendricks",
    role: "Cyclist · Eindhoven",
    program: "Rehab & Performance",
    quote: "Six PTs, two MRIs, one surgery recommendation, and none of it worked. Two months at 7ARAKA and I was back on the bike. No nonsense, just real diagnosis and load.",
    img: R('avDaan', "https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?auto=format&fit=crop&w=400&q=80"),
  },
  {
    name: "Ines Akkari",
    role: "Educator · Brussels",
    program: "Online Coaching",
    quote: "I'd given up on 'fitness people' before I found 7ARAKA. The tone is grounded. The plans actually fit a real life. The progress is undeniable.",
    img: R('avInes', "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&w=400&q=80"),
  },
];

const FEATURED = TESTIMONIALS[0];

const T_STATS = [
  { num: "4.96", label: "Average client rating · 280+ reviews" },
  { num: "94%", label: "Of clients renew after first 3 months" },
  { num: "12 mo", label: "Median client tenure" },
  { num: "97%", label: "Return-to-sport rate (rehab clients)" },
];

const TestimonialsPage = ({ navigate, openApply }) => {
  return (
    <Page>
      {/* ---------- Hero ---------- */}
      <section style={{ padding: "72px 0 24px" }}>
        <div className="container-wide">
          <Eyebrow>Testimonials</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, marginTop: 20, alignItems: "end" }}>
            <h1 className="display-mega text-balance" style={{ maxWidth: 880 }}>
              The work,
              <br />
              <span style={{ color: "var(--muted)" }}>in their own words.</span>
            </h1>
            <p className="text-body-lg text-pretty">
              We don't run before-and-after photo campaigns. The work that matters is harder to photograph: pain that left, habits that stayed, lives that quietly changed shape.
            </p>
          </div>
        </div>
      </section>

      {/* ---------- Featured / hero quote ---------- */}
      <section style={{ padding: "32px 0 24px" }}>
        <div className="container-wide">
          <div className="card-image testi-hero" style={{ aspectRatio: "21 / 9", display: "grid", gridTemplateColumns: "1.6fr 1fr", position: "relative" }}>
            <img src={R('imgTestiHero', "https://images.unsplash.com/photo-1551632811-561732d1e306?auto=format&fit=crop&w=2000&q=80")} alt="" style={{ position: "absolute", inset: 0 }} />
            <div style={{ position: "relative", zIndex: 1, color: "var(--canvas)", padding: 48, display: "flex", flexDirection: "column", justifyContent: "flex-end", background: "linear-gradient(90deg, rgba(38,37,30,.7), rgba(38,37,30,.1))" }}>
              <Icon name="quote" size={28} stroke={1.5} style={{ color: "var(--cursor-primary)" }} />
              <blockquote style={{ margin: "20px 0 0", fontSize: 26, lineHeight: 1.35, color: "var(--canvas)", maxWidth: 620, fontWeight: 400, letterSpacing: "-0.01em" }}>
                "{FEATURED.quote}"
              </blockquote>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 28 }}>
                <img src={FEATURED.img} alt="" style={{ width: 44, height: 44, borderRadius: 999, objectFit: "cover", border: "2px solid var(--canvas)" }} />
                <div>
                  <div style={{ fontWeight: 500 }}>{FEATURED.name}</div>
                  <div style={{ fontSize: 13, color: "rgba(247,247,244,.7)" }}>{FEATURED.role}</div>
                </div>
              </div>
            </div>
            <div style={{ position: "relative", zIndex: 1, padding: 24, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-end", gap: 8 }}>
              <span className="pill pill-accent" style={{ fontSize: 11 }}>
                <Icon name="star" size={11} />
                Featured story
              </span>
              <span className="pill" style={{ fontSize: 11, background: "rgba(38,37,30,.5)", color: "var(--canvas)", borderColor: "transparent" }}>
                {FEATURED.program}
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Stats ---------- */}
      <section style={{ padding: "32px 0 56px" }}>
        <div className="container-wide">
          <StatsStrip items={T_STATS} />
        </div>
      </section>

      {/* ---------- Testimonial grid ---------- */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container-wide">
          <div className="grid-3" style={{ gap: 16 }}>
            {TESTIMONIALS.slice(1).map((t, i) => (
              <article key={i} className={t.dark ? "card-dark" : "card"} style={{ display: "flex", flexDirection: "column", gap: 14, padding: 24 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div style={{ display: "inline-flex", gap: 2 }}>
                    {[0,1,2,3,4].map((s) => (
                      <Icon key={s} name="star" size={12} stroke={0} style={{ fill: t.dark ? "var(--cursor-primary)" : "var(--ink)", color: t.dark ? "var(--cursor-primary)" : "var(--ink)" }} />
                    ))}
                  </div>
                  <span style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: 0.8, textTransform: "uppercase",
                    color: t.dark ? "var(--cursor-primary)" : "var(--muted)"
                  }}>{t.program}</span>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.5, color: t.dark ? "var(--canvas)" : "var(--ink)", flex: 1 }}>
                  "{t.quote}"
                </p>
                <div style={{ display: "flex", alignItems: "center", gap: 10, paddingTop: 12, borderTop: `1px solid ${t.dark ? "rgba(255,255,255,.1)" : "var(--hairline)"}` }}>
                  <img src={t.img} alt="" style={{ width: 36, height: 36, borderRadius: 999, objectFit: "cover" }} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500, color: t.dark ? "var(--canvas)" : "var(--ink)" }}>{t.name}</div>
                    <div style={{ fontSize: 11, color: t.dark ? "rgba(247,247,244,.6)" : "var(--muted)" }}>{t.role}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- Video testimonial placeholder ---------- */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 32, alignItems: "center" }}>
          <div>
            <Eyebrow>Video stories</Eyebrow>
            <h2 className="display-lg text-balance" style={{ marginTop: 14 }}>
              Watch the work, not the marketing.
            </h2>
            <p className="text-body" style={{ marginTop: 14, fontSize: 15 }}>
              Long-form conversations with clients about what changed physically, mentally, and spiritually, and what they wish they'd known earlier.
            </p>
            <div style={{ display: "inline-flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
              <Button variant="primary" icon="play" onClick={() => alert("Video placeholder — drop your real link here.")}>Watch the latest</Button>
              <Button variant="ghost" onClick={() => navigate("about")}>Read the method</Button>
            </div>
          </div>
          <div className="card-image" style={{ aspectRatio: "16 / 10", position: "relative" }}>
            <img src={R('imgVideo', "https://images.unsplash.com/photo-1605296867304-46d5465a13f1?auto=format&fit=crop&w=1400&q=80")} alt="" />
            <button
              onClick={() => alert("Video placeholder")}
              style={{
                position: "absolute", inset: 0, display: "grid", placeItems: "center",
                background: "rgba(38,37,30,.25)", border: "none", cursor: "pointer",
              }}
              aria-label="Play"
            >
              <span style={{
                width: 80, height: 80, borderRadius: 999,
                background: "var(--cursor-primary)", color: "var(--ink)",
                display: "grid", placeItems: "center",
              }}>
                <Icon name="play" size={28} />
              </span>
            </button>
            <div className="photo-badge" style={{ top: 20, left: 20 }}>
              <Icon name="play" size={12} />
              <span>Karim · 8 months in</span>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Experience strip ---------- */}
      <section style={{ padding: "0 0 64px" }}>
        <div className="container-wide">
          <div style={{ borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)", padding: "24px 0" }}>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", gap: 24 }}>
              <span style={{ fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: 1, color: "var(--muted)" }}>
                Experience with
              </span>
              {["EREDIVISIE FOOTBALL", "DUTCH TOP-FLIGHT RUGBY", "NATIONAL SWIMMING", "POST-SURGICAL REHAB", "2,000+ CLIENTS"].map((l, i) => (
                <span key={i} style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 500, color: "var(--ink)", letterSpacing: 1 }}>
                  {l}
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABand navigate={navigate} openApply={() => openApply("rehab")} />
    </Page>
  );
};

Object.assign(window, { TestimonialsPage });