// Home page

const HOME_STATS = [
{ num: "2,000+", label: "Coached athletes" },
{ num: "8 yrs", label: "Clinical practice" },
{ num: "97%", label: "Return-to-sport rate" },
{ num: "40 days", label: "Reset Programs" }];


const PILLARS = [
{ icon: "activity", label: "Pillar 01", title: "Movement", body: "Pain-free, then full potential. Rehab and performance, spoken in the same language." },
{ icon: "shield", label: "Pillar 02", title: "Discipline", body: "Structure that holds. Change that lasts. The 7ARAKA method builds the habit underneath the goal." },
{ icon: "compass", label: "Pillar 03", title: "Mindset", body: "Composure under load. We work on the story you tell yourself when training gets hard." },
{ icon: "feather", label: "Pillar 04", title: "Spiritual Growth", body: "Train the body in service of the life around it. Faith, stillness, and intention sit at the centre." }];


const PROGRAMS = [
{ year: "Rehab", title: "Rehab & Performance Coaching", sub: "Physiotherapy-grade recovery, built to make you stronger than before.", id: "rehab" },
{ year: "Strength", title: "Personal Coaching", sub: "1-on-1 in-person coaching. Programs that fit your body, your goals, your life.", id: "pt", active: true },
{ year: "Online", title: "Online Coaching", sub: "Remote check-ins and adaptive programming for clients training independently.", id: "online" },
{ year: "40 Day", title: "Reset Challenge", sub: "A structured 40-day reset built on discipline, recovery, and intention.", id: "ramadan" },
{ year: "Method", title: "The 7ARAKA Method", sub: "Movement, Discipline, Mindset, Spiritual Growth. Applied daily.", id: null }];


const HOME_QUOTES = [
  {
    initial: "S",
    short: "Sanne K.",
    name: "Sanne Kuipers",
    role: "Marathon runner",
    quote: "Finally, a coach who treats the injury <em>and</em> the goal as the same problem. I've trained pain-free for the first time in years.",
  },
  {
    initial: "K",
    short: "Karim E.",
    name: "Karim El-Idrissi",
    role: "Tech founder · Rotterdam",
    quote: "A year in and I'm stronger than I was at 25. The back pain hasn't come back, and the discipline has carried over into every part of work.",
  },
  {
    initial: "D",
    short: "Daan H.",
    name: "Daan Hendricks",
    role: "Cyclist · Eindhoven",
    quote: "Six PTs and one surgery recommendation, and none of it worked. Two months at 7ARAKA and I was back on the bike. Real diagnosis, real load.",
  },
];

const HomeTestimonialCarousel = ({ navigate, fill }) => {
  const [i, setI] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const n = HOME_QUOTES.length;

  React.useEffect(() => {
    if (paused) return;
    const t = setTimeout(() => setI((x) => (x + 1) % n), 7000);
    return () => clearTimeout(t);
  }, [i, paused, n]);

  const t = HOME_QUOTES[i];

  return (
    <div
      className="card"
      style={{
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        position: "relative", overflow: "hidden",
        ...(fill ? { height: "100%" } : { aspectRatio: "1 / 1" }),
      }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div key={i} style={{ animation: "page-enter 320ms ease-out" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <div style={{ width: 24, height: 24, borderRadius: 6, background: "var(--ink)", color: "var(--canvas)", display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12 }}>{t.initial}</div>
          <span style={{ fontWeight: 600, fontSize: 13 }}>{t.short}</span>
        </div>
        <p
          style={{ marginTop: 18, fontSize: 16, lineHeight: 1.4, color: "var(--ink)" }}
          dangerouslySetInnerHTML={{ __html: `“${t.quote}”` }}
        />
      </div>
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div>
            <div style={{ fontSize: 12, color: "var(--muted)" }}>{t.name}</div>
            <div style={{ fontSize: 11, color: "var(--muted-soft)" }}>{t.role}</div>
          </div>
          <button className="btn-arrow" onClick={() => navigate("testimonials")} aria-label="More stories">
            <Icon name="arrow-up-right" size={16} />
          </button>
        </div>
        <div style={{ display: "flex", gap: 6, marginTop: 14 }}>
          {HOME_QUOTES.map((_, idx) => (
            <button
              key={idx}
              onClick={() => setI(idx)}
              aria-label={`Show testimonial ${idx + 1}`}
              style={{
                height: 4,
                flex: idx === i ? 2 : 1,
                borderRadius: 999,
                background: idx === i ? "var(--ink)" : "var(--hairline-strong)",
                border: "none",
                padding: 0,
                cursor: "pointer",
                transition: "flex 320ms ease, background 200ms ease",
              }}
            />
          ))}
        </div>
      </div>
    </div>
  );
};


const HomePage = ({ navigate, openApply }) => {
  const defaultProgram = Math.max(0, PROGRAMS.findIndex((p) => p.active));
  const [hoveredProgram, setHoveredProgram] = React.useState(defaultProgram);
  return (
    <Page>
      {/* ---------- Hero ---------- */}
      <section style={{ padding: "56px 0 24px", lineHeight: "1.45" }}>
        <div className="container-wide">
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "end", lineHeight: "1.45" }}>
            <h1 className="display-mega text-balance" style={{ maxWidth: 760 }}>
              Movement is the medicine.
              <br />
              <span style={{ color: "var(--muted)" }}>Discipline is the dose.</span>
            </h1>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 16, paddingBottom: 8 }}>
              <p className="text-body-lg text-pretty" style={{ maxWidth: 360, margin: 0 }}>Performance coaching for the body you actually have, and the life you actually live.
Rehab-led. Strength-driven. Honest from the first moment.
              </p>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                <Button variant="primary" iconRight="arrow-right" onClick={() => openApply("rehab")}>Apply now</Button>
                <Button variant="ghost" onClick={() => navigate("services")}>See services</Button>
              </div>
              <a
                href="https://calendly.com/7araka-coaching/30min"
                target="_blank"
                rel="noopener"
                style={{
                  display: "inline-flex", alignItems: "center", gap: 12,
                  textDecoration: "none", color: "var(--ink)",
                  border: "1px solid var(--hairline-strong)", borderRadius: 12,
                  padding: "10px 14px", marginTop: 2, maxWidth: 360, width: "100%",
                }}
              >
                <span style={{ width: 34, height: 34, borderRadius: 9, background: "var(--cursor-primary)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                  <Icon name="calendar" size={16} />
                </span>
                <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.25 }}>
                  <span style={{ fontSize: 14, fontWeight: 600 }}>Book a free intake call</span>
                  <span style={{ fontSize: 12, color: "var(--muted)" }}>Free · 30 min video · no commitment</span>
                </span>
                <Icon name="arrow-up-right" size={16} style={{ marginLeft: "auto", flexShrink: 0 }} />
              </a>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--semantic-success)" }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--semantic-success)" }}></span>
                Based in Amsterdam & Haarlem · In-person & online · Dutch / English
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Hero photo ---------- */}
      <section style={{ padding: "16px 0 32px" }}>
        <div className="container-wide">
          <div className="hero-photo">
            <img src={R('imgHeroAthlete', "https://images.unsplash.com/photo-1517963879433-6ad2b056d712?auto=format&fit=crop&w=2000&q=80")} alt="Athlete setting up for a deadlift" />
            <div className="hero-info-card">
              <h6>7ARAKA Method</h6>
              <div style={{ fontSize: 12, color: "var(--ink)", opacity: 0.8 }}>
                Coaching system:<br />movement, recovery,<br />discipline, intention.
              </div>
              <ul style={{ listStyle: "none", padding: 0, margin: "10px 0 0", display: "flex", flexDirection: "column", gap: 4, fontSize: 12 }}>
                <li>· Rehab-led training</li>
                <li>· Structured 40-day cycles</li>
                <li>· Measured progress. Real results.</li>
              </ul>
            </div>
            <div className="photo-badge" style={{ bottom: 24, left: 24 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cursor-primary)" }}></span>
              In-person sessions · Amsterdam & Haarlem
            </div>
          </div>
        </div>
      </section>

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

      {/* ---------- Daily check-ins block (matches inspo) ---------- */}
      <section className="section">
        <div className="container-wide">
          <div style={{ textAlign: "center" }}>
            <Eyebrow>Practice · What to expect</Eyebrow>
            <h2 className="display-xl text-balance" style={{ marginTop: 14, maxWidth: 720, marginInline: "auto" }}>
              Daily check-ins.
              <br />Feedback that actually moves you.
            </h2>
            <div style={{ display: "inline-flex", gap: 8, marginTop: 24 }}>
              <Button variant="primary" onClick={() => openApply("online")}>Start a program</Button>
              <ArrowBtn light onClick={() => navigate("services")} />
            </div>
          </div>

          <div className="home-bento" style={{
            display: "grid",
            gridTemplateColumns: "1.1fr 1fr 1fr 1fr",
            gridTemplateRows: "1.5fr 1fr",
            gridTemplateAreas: `
              "photo photo photo quote"
              "nutrition recovery progress quote"
            `,
            gap: 16,
            marginTop: 48
          }}>
            {/* Wide hero photo */}
            <div className="card-image" style={{ position: "relative", gridArea: "photo", minHeight: 420 }}>
              <img src={R('imgCoachClient', "assets/coach-client.jpg")} alt="Coach guiding a client through a seated row" />
              <div className="photo-badge" style={{ bottom: 20, left: 20 }}>
                <Icon name="dumbbell" size={14} />
                <div>
                  <div style={{ fontWeight: 600, color: "var(--ink)" }}>Personal Coaching</div>
                  <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 1 }}>Expert-guided sessions</div>
                </div>
              </div>
              <div className="photo-badge" style={{ top: 20, right: 20, background: "rgba(38,37,30,.55)", borderColor: "transparent", color: "var(--canvas)", backdropFilter: "blur(8px)" }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cursor-primary)" }}></span>
                <span style={{ color: "var(--canvas)" }}>Live · in-studio session</span>
              </div>
            </div>

            {/* Nutrition */}
            <div className="card-image" style={{ position: "relative", gridArea: "nutrition" }}>
              <img src={R('imgNutrition', "https://images.unsplash.com/photo-1490645935967-10de6ba17061?auto=format&fit=crop&w=900&q=80")} alt="" />
              <div className="photo-badge" style={{ bottom: 12, left: 12, fontSize: 12 }}>
                <Icon name="heart" size={12} />
                Nutrition that works
              </div>
            </div>

            {/* Recovery */}
            <div className="card-image" style={{ position: "relative", gridArea: "recovery" }}>
              <img src={R('imgRecovery', "assets/recovery.avif")} alt="Hands-on recovery work" />
              <div className="photo-badge" style={{ bottom: 12, left: 12, fontSize: 12 }}>
                <Icon name="feather" size={12} />
                Recovery protocols
              </div>
            </div>

            {/* Progress (accent) */}
            <div className="card-accent" style={{ position: "relative", overflow: "hidden", padding: 20, gridArea: "progress" }}>
              <svg width="100%" height="100%" viewBox="0 0 200 200" style={{ position: "absolute", inset: 0, opacity: 0.5 }}>
                <g stroke="#26251e" strokeOpacity="0.18" fill="none" strokeWidth="1.4">
                  <path d="M30 70 L70 70 L90 30 L70 -10 M70 70 L100 100" />
                  <path d="M130 130 L170 130 L190 90 L170 50 M170 130 L200 160" />
                </g>
              </svg>
              <div style={{ position: "relative", display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
                <Icon name="trending-up" size={20} />
                <div>
                  <h6 style={{ fontSize: 15, fontWeight: 600 }}>Progress tracking</h6>
                  <div style={{ fontSize: 11, marginTop: 2, color: "rgba(38,37,30,.7)" }}>Visual weekly insights</div>
                </div>
              </div>
            </div>

            {/* Testimonial (full-height right column) */}
            <div style={{ gridArea: "quote" }}>
              <HomeTestimonialCarousel navigate={navigate} fill />
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Because every goal matters (image left, card right) ---------- */}
      <section style={{ padding: "32px 0" }}>
        <div className="container-wide">
          <div className="card-image goal-band" style={{ aspectRatio: "21 / 9", display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 24, padding: 24, alignItems: "stretch" }}>
            <img src={R('imgGoalBand', "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=1600&q=80")} alt="" style={{ position: "absolute", inset: 0, zIndex: 0 }} />
            <div className="goal-band-copy" style={{ position: "relative", zIndex: 1, color: "var(--canvas)", padding: 32, display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
              <Eyebrow color="var(--canvas)">
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cursor-primary)", display: "inline-block", marginRight: 6 }}></span>
                The 7ARAKA Method
              </Eyebrow>
              <h2 className="display-xl" style={{ color: "var(--canvas)", marginTop: 14, maxWidth: 520 }}>
                Because every goal<br />deserves a real plan.
              </h2>
              <p style={{ color: "rgba(247,247,244,.75)", maxWidth: 460, marginTop: 12, fontSize: 15, lineHeight: 1.55 }}>
                We redefine fitness through rehab-informed coaching, structured discipline cycles, and progress tracking, all aligned with your life.
              </p>
              <div style={{ display: "inline-flex", gap: 10, marginTop: 24, flexWrap: "wrap" }}>
                <Button variant="light" onClick={() => navigate("services")}>View services</Button>
                <ArrowBtn onClick={() => navigate("about")} />
              </div>
            </div>
            <div style={{ position: "relative", zIndex: 1 }}>
              <div className="card-accent" style={{ height: "100%", position: "relative", overflow: "hidden", padding: 24, display: "flex", flexDirection: "column" }}>
                {/* decorative motif */}
                <svg width="180" height="180" viewBox="0 0 200 200" style={{ position: "absolute", right: -40, top: -40, opacity: 0.18, pointerEvents: "none" }}>
                  <g stroke="#26251e" fill="none" strokeWidth="1.4">
                    <path d="M30 70 L70 70 L90 30 L70 -10 M70 70 L100 100" />
                    <path d="M130 130 L170 130 L190 90 L170 50 M170 130 L200 160" />
                  </g>
                </svg>

                <span className="pill" style={{ background: "rgba(255,255,255,.55)", fontSize: 10, padding: "4px 10px", borderColor: "transparent", alignSelf: "flex-start", letterSpacing: 0.8 }}>FEATURED</span>

                <div style={{ marginTop: 32, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
                  <Icon name="heart" size={22} />
                  <h6 style={{ fontSize: 22, fontWeight: 500, letterSpacing: "-0.01em", marginTop: 18, lineHeight: 1.2 }}>
                    Rehab &amp;<br />Performance.
                  </h6>
                  <div style={{ fontSize: 13, color: "rgba(38,37,30,.7)", marginTop: 6 }}>
                    Targeted coaching. Train pain-free.
                  </div>
                  <div style={{ marginTop: 24, display: "flex", alignItems: "baseline", gap: 8 }}>
                    <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>2,000+</span>
                    <span style={{ fontSize: 12, color: "rgba(38,37,30,.7)" }}>clients helped</span>
                  </div>
                </div>

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 16, paddingTop: 16, borderTop: "1px solid rgba(38,37,30,.18)" }}>
                  <span style={{ fontSize: 13, fontWeight: 600 }}>Apply now</span>
                  <button className="btn-arrow" onClick={() => openApply("rehab")} aria-label="Apply"><Icon name="arrow-up-right" size={14} /></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Single Session promo + secondary image ---------- */}
      <section style={{ padding: "32px 0 80px" }}>
        <div className="container-wide" style={{ display: "flex", justifyContent: "center" }}>
          <div className="card-accent" style={{ padding: 28, display: "flex", flexDirection: "column", gap: 16, minHeight: 280, position: "relative", overflow: "hidden", width: "100%", maxWidth: 750 }}>
            <h3 className="display-md">Intake call</h3>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8, fontSize: 14, color: "var(--ink)" }}>
              <li style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink)" }}></span>30-minute video call</li>
              <li style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink)" }}></span>Movement & history review</li>
              <li style={{ display: "flex", alignItems: "center", gap: 8 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--ink)" }}></span>Honest assessment of fit</li>
            </ul>
            <div style={{ marginTop: "auto" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
                <div>
                  <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>Free</span>
                  <span style={{ fontSize: 14, color: "rgba(38,37,30,.7)" }}> / 30 min</span>
                </div>
                <span style={{ background: "var(--ink)", color: "var(--canvas)", fontSize: 10, padding: "5px 10px", borderRadius: 999, display: "inline-flex", alignItems: "center", gap: 6, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600 }}>
                  <Icon name="clock" size={11} />
                  Limited slots this month
                </span>
              </div>
              <a className="btn btn-primary" href="https://calendly.com/7araka-coaching/30min" target="_blank" rel="noopener" style={{ width: "100%", justifyContent: "center" }}>
                Book now <Icon name="arrow-right" size={14} />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Featured Programs (dark band) ---------- */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container-wide">
          <div className="dark-band" style={{ background: "var(--ink)", borderRadius: 18, padding: "56px 48px 48px" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, flexWrap: "wrap", gap: 16 }}>
              <div>
                <h2 className="display-xl" style={{ color: "var(--canvas)" }}>Programs &amp; Services</h2>
                <div style={{ marginTop: 10, color: "rgba(247,247,244,.6)", fontSize: 14, display: "inline-flex", alignItems: "center", gap: 8 }}>
                  Through{" "}
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cursor-primary)", display: "inline-block" }}></span>{" "}
                  rehab-informed coaching and structured discipline.
                </div>
              </div>
              <a href="#services" onClick={(e) => {e.preventDefault();navigate("services");}} style={{ color: "var(--canvas)", fontSize: 13, display: "inline-flex", alignItems: "center", gap: 6 }}>
                See all <Icon name="arrow-up-right" size={14} />
              </a>
            </div>
            <div className="program-list" onMouseLeave={() => setHoveredProgram(defaultProgram)}>
              {PROGRAMS.map((p, i) => {
                const isActive = hoveredProgram === i;
                return (
                  <div
                    className={`program-row ${isActive ? "active" : ""}`}
                    key={i}
                    onMouseEnter={() => setHoveredProgram(i)}
                  >
                    <span className="program-year">{p.year}</span>
                    <div>
                      <div className="title">{p.title}</div>
                      <div className="sub">{p.sub}</div>
                    </div>
                    {isActive ?
                      <button className="btn btn-primary btn-sm" onClick={() => (p.id ? openApply(p.id) : navigate("services"))} style={{ paddingRight: 14 }}>
                        {p.id ? "Apply" : "Explore"} <Icon name="arrow-right" size={12} />
                      </button> :

                      <button className="arrow" onClick={() => (p.id ? openApply(p.id) : navigate("services"))} style={{ background: "transparent", border: "none", cursor: "pointer", color: "rgba(247,247,244,.5)" }} aria-label="Open">
                        <Icon name="arrow-up-right" size={20} />
                      </button>
                    }
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Final CTA ---------- */}
      <CTABand navigate={navigate} openApply={() => openApply("rehab")} />
    </Page>);

};

Object.assign(window, { HomePage });