// Services page — 3 main services + Reset Challenge specialty, with apply modals

const SERVICES = [
  {
    id: "rehab",
    label: "01 / Physiotherapy",
    title: "Rehab & Performance Coaching",
    sub: "1-on-1 in-person sessions to recover from pain or injury, then rebuild stronger, smarter movement.",
    image: R('imgSvcRehab', "assets/rehab-kinesio.avif"),
    price: "€120",
    unit: "/ session",
    note: "Bundle of 6: €660 (–8%)",
    duration: "60 min",
    format: "In-person · Amsterdam & Haarlem",
    accent: true,
    includes: [
      "Movement & pain assessment",
      "Manual therapy + dry needling (if indicated)",
      "Loaded rehab progression",
      "Return-to-sport / return-to-life plan",
      "Direct WhatsApp access between sessions",
    ],
    bestFor: "Pain, post-injury, chronic stiffness, athletes returning to load.",
  },
  {
    id: "pt",
    label: "02 / Strength",
    title: "Personal Coaching",
    sub: "In-person strength and conditioning, built around your body, goals, and lifestyle. To change your life, not just your physique.",
    image: R('imgIntent', "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?auto=format&fit=crop&w=1400&q=80"),
    price: "€90",
    unit: "/ session",
    note: "Bundle of 10: €820 (–9%)",
    duration: "60 min",
    format: "In-person · Amsterdam & Haarlem",
    accent: false,
    includes: [
      "Individualised strength programming",
      "Conditioning & energy-system training",
      "Recovery & sleep coaching",
      "Nutrition guidance (referred to dietitian if needed)",
      "Monthly progress reviews",
    ],
    bestFor: "Professionals who want long-term physical capability and disciplined training.",
  },
  {
    id: "online",
    label: "03 / Anywhere",
    title: "Online Coaching",
    sub: "Remote training and recovery programs with structured check-ins. For clients training independently or outside the Netherlands.",
    image: R('imgSvcOnline', "https://images.unsplash.com/photo-1586439496903-c96e9f18f212?auto=format&fit=crop&w=1400&q=80"),
    price: "€220",
    unit: "/ month",
    note: "3-month commitment · cancel anytime after",
    duration: "Ongoing",
    format: "Remote · Worldwide",
    accent: false,
    includes: [
      "Custom training program, updated every 4 weeks",
      "Weekly video check-ins",
      "Form video review (48-hr feedback)",
      "Recovery & mobility protocols",
      "Adaptive deload weeks built in",
    ],
    bestFor: "Self-driven trainees, expats, and athletes who need expert eyes from anywhere.",
  },
];

const RESET = {
  id: "ramadan",
  title: "The 40-Day Reset Challenge",
  sub: "A structured 40-day reset built on the four pillars. Discipline, intentional recovery, and a deliberate return to movement.",
  price: "€180",
  duration: "40 days · structured cohort",
  spots: "32 spots / cohort · next intake September 2026",
};

const ServicesPage = ({ navigate, openApply }) => {
  return (
    <Page>
      {/* ---------- Hero ---------- */}
      <section style={{ padding: "72px 0 24px" }}>
        <div className="container-wide">
          <Eyebrow>Services</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, marginTop: 20, alignItems: "end" }}>
            <h1 className="display-mega text-balance" style={{ maxWidth: 880 }}>
              Three ways to train with us.
              <br />
              <span style={{ color: "var(--muted)" }}>One method underneath.</span>
            </h1>
            <p className="text-body-lg text-pretty" style={{ paddingBottom: 8 }}>
              Whether you're rebuilding from injury, training for a peak, or working with us remotely, every program runs on the same four pillars: movement, discipline, mindset, spiritual growth.
            </p>
          </div>
          <div style={{ display: "flex", gap: 24, marginTop: 28, fontSize: 13, color: "var(--muted)", flexWrap: "wrap" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="map-pin" size={14} /> Amsterdam & Haarlem, NL</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="globe" size={14} /> Online worldwide</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="clock" size={14} /> 48-hour response</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="users" size={14} /> EN · NL · AR</span>
          </div>
        </div>
      </section>

      {/* ---------- Service cards ---------- */}
      <section style={{ padding: "32px 0 24px" }}>
        <div className="container-wide" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          {SERVICES.map((s, i) => (
            <article key={s.id} className="card svc-card" style={{ padding: 0, overflow: "hidden", display: "grid", gridTemplateColumns: i % 2 === 0 ? "1.1fr 1fr" : "1fr 1.1fr", gap: 0, alignItems: "start" }}>
              <div className="card-image" style={{ height: 625, minHeight: 625, alignSelf: "start", borderRadius: 0, order: i % 2 === 0 ? 0 : 1 }}>
                <img src={s.image} alt={s.title} />
                {s.accent && (
                  <div className="photo-badge" style={{ top: 20, left: 20, background: "var(--cursor-primary)", borderColor: "var(--cursor-primary)" }}>
                    <Icon name="star" size={12} />
                    Most requested
                  </div>
                )}
              </div>

              <div style={{ padding: 36, display: "flex", flexDirection: "column", gap: 16 }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)", letterSpacing: 0.5 }}>{s.label}</span>
                  <div style={{ display: "inline-flex", gap: 8 }}>
                    <span className="pill" style={{ fontSize: 11 }}><Icon name="clock" size={11} /> {s.duration}</span>
                    <span className="pill" style={{ fontSize: 11 }}><Icon name="map-pin" size={11} /> {s.format}</span>
                  </div>
                </div>

                <h3 className="display-lg text-balance">{s.title}</h3>
                <p className="text-body text-pretty" style={{ fontSize: 15 }}>{s.sub}</p>

                <div className="hairline" style={{ marginTop: 4 }}></div>

                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 0.8, textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>
                    What's included
                  </div>
                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
                    {s.includes.map((it, idx) => (
                      <li key={idx} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 13, color: "var(--ink)" }}>
                        <span style={{ marginTop: 4, width: 14, height: 14, borderRadius: 999, background: "var(--cursor-primary)", color: "var(--ink)", display: "grid", placeItems: "center", flexShrink: 0 }}>
                          <Icon name="check" size={9} stroke={2.6} />
                        </span>
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>
                </div>

                <div style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--hairline)", display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16 }}>
                  <div>
                    <div>
                      <span style={{ fontSize: 36, fontWeight: 500, letterSpacing: "-0.02em" }}>{s.price}</span>
                      <span style={{ fontSize: 14, color: "var(--muted)", marginLeft: 4 }}>{s.unit}</span>
                    </div>
                    <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 2 }}>{s.note}</div>
                  </div>
                  <div style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
                    <Button variant="ghost" onClick={() => navigate("contact")}>Ask a question</Button>
                    <Button variant={s.accent ? "accent" : "primary"} iconRight="arrow-right" onClick={() => openApply(s.id)}>
                      Apply for {s.title.split(" ")[0]}
                    </Button>
                  </div>
                </div>
                <p className="text-body" style={{ fontSize: 12, color: "var(--muted)" }}>
                  <strong style={{ color: "var(--ink)" }}>Best for:</strong> {s.bestFor}
                </p>
              </div>
            </article>
          ))}
        </div>
      </section>

      {/* ---------- Reset Challenge (featured specialty) ---------- */}
      <section style={{ padding: "32px 0" }}>
        <div className="container-wide">
          <div className="dark-band" style={{ background: "var(--ink)", borderRadius: 18, padding: "56px 56px", display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 48, alignItems: "center", position: "relative", overflow: "hidden" }}>
            {/* decorative rings — cycles of the reset */}
            <svg width="380" height="380" viewBox="0 0 200 200" style={{ position: "absolute", right: -40, top: -40, opacity: 0.06 }}>
              <circle cx="100" cy="100" r="90" fill="none" stroke="#f7f7f4" strokeWidth="1" />
              <circle cx="100" cy="100" r="64" fill="none" stroke="#f7f7f4" strokeWidth="1" />
              <circle cx="100" cy="100" r="38" fill="none" stroke="#f7f7f4" strokeWidth="1" />
              <circle cx="100" cy="100" r="12" fill="#f7f7f4" />
            </svg>
            <div style={{ position: "relative" }}>
              <span className="pill pill-accent" style={{ fontSize: 11 }}>
                <Icon name="zap" size={11} />
                Specialty cohort
              </span>
              <h2 className="display-xl" style={{ color: "var(--canvas)", marginTop: 16 }}>The 40-Day<br />Reset Challenge.</h2>
              <p style={{ color: "rgba(247,247,244,.7)", marginTop: 16, maxWidth: 480, fontSize: 15, lineHeight: 1.55 }}>
                A structured 40-day reset built on discipline, intentional recovery, and a deliberate return to movement. Four cohorts a year. Applications open six weeks before each intake.
              </p>
              <div style={{ display: "flex", gap: 24, marginTop: 24, color: "rgba(247,247,244,.6)", fontSize: 13, flexWrap: "wrap" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="calendar" size={14} /> 40 days · cohort-based</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="users" size={14} /> 32 spots / cohort</span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><Icon name="globe" size={14} /> Worldwide · online</span>
              </div>
            </div>
            <div style={{ position: "relative" }}>
              <div className="card-accent" style={{ padding: 24, position: "relative", overflow: "hidden" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div>
                    <div style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: 1, color: "var(--ink)" }}>Cohort 04</div>
                    <div style={{ fontSize: 13, color: "rgba(38,37,30,.7)", marginTop: 2 }}>Next intake · September 2026</div>
                  </div>
                  <Icon name="compass" size={20} />
                </div>
                <hr style={{ borderColor: "rgba(38,37,30,.18)", margin: "20px 0" }} />
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "var(--ink)" }}>
                  {[
                    "Disciplined training blocks",
                    "Recovery, sleep & hydration protocols",
                    "Daily reflection prompts",
                    "Group accountability + final 1:1",
                  ].map((x, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, alignItems: "center" }}>
                      <span style={{ width: 14, height: 14, borderRadius: 999, background: "var(--ink)", color: "var(--cursor-primary)", display: "grid", placeItems: "center" }}>
                        <Icon name="check" size={9} stroke={2.6} />
                      </span>
                      {x}
                    </li>
                  ))}
                </ul>
                <hr style={{ borderColor: "rgba(38,37,30,.18)", margin: "20px 0" }} />
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
                  <div>
                    <span style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em" }}>{RESET.price}</span>
                    <span style={{ fontSize: 13, color: "rgba(38,37,30,.6)" }}> / cohort</span>
                  </div>
                  <button className="btn btn-primary" onClick={() => openApply("ramadan")}>
                    Apply <Icon name="arrow-right" size={14} />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- Process ---------- */}
      <section className="section">
        <div className="container-wide">
          <SectionHead eyebrow="How it works" title="From application to first session." maxWidth={680} />
          <div className="grid-4" style={{ marginTop: 48 }}>
            {[
              { n: "01", t: "Apply", b: "5 minute form. Tell us your goal, constraints, and history." },
              { n: "02", t: "Intake call", b: "Free 30-min video. Honest assessment of fit and recommended program." },
              { n: "03", t: "Movement screen", b: "First in-person session is diagnostic. We map the body before we load it.", inPerson: true, online: "For online coaching this is done over video." },
              { n: "04", t: "Train & track", b: "Structured weekly blocks. Continuous coach feedback. Honest progress reviews." },
            ].map((p, i) => (
              <div
                key={i}
                className="card"
                style={{
                  display: "flex", flexDirection: "column", gap: 10,
                  ...(p.inPerson ? { background: "var(--cursor-primary)", borderColor: "transparent" } : {}),
                }}
              >
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)" }}>{p.n}</div>
                  {p.inPerson && (
                    <span style={{ background: "var(--ink)", color: "var(--canvas)", fontSize: 9, padding: "4px 8px", borderRadius: 999, textTransform: "uppercase", letterSpacing: 0.6, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 5 }}>
                      <Icon name="map-pin" size={10} />In-person only
                    </span>
                  )}
                </div>
                <h4 className="title-md">{p.t}</h4>
                <p className="text-body" style={{ fontSize: 13 }}>{p.b}</p>
                {p.online && (
                  <div style={{ marginTop: "auto", paddingTop: 10, borderTop: "1px solid rgba(38,37,30,.18)", display: "flex", gap: 8, fontSize: 12, color: "rgba(38,37,30,.75)" }}>
                    <Icon name="video" size={13} style={{ flexShrink: 0, marginTop: 1 }} />
                    <span>{p.online}</span>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- FAQ ---------- */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64 }}>
          <div>
            <Eyebrow>FAQ</Eyebrow>
            <h2 className="display-lg text-balance" style={{ marginTop: 14 }}>The questions we get most often.</h2>
            <p className="text-body" style={{ marginTop: 14, fontSize: 14 }}>
              Don't see yours? Email <a href="mailto:info@7araka.co" style={{ borderBottom: "1px solid var(--ink)" }}>info@7araka.co</a> and we'll reply within 48 hours.
            </p>
          </div>
          <div>
            <Faq />
          </div>
        </div>
      </section>

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

const Faq = () => {
  const items = [
    { q: "Do I need a referral or a diagnosis to start rehab coaching?", a: "No. We screen movement and pain history during intake and refer out for imaging or medical opinions when needed. Most clients arrive without a referral." },
    { q: "I live outside the Netherlands. Can I still work with you?", a: "Yes, that's exactly what Online Coaching is for. We've coached clients across the EU, UK, US, and the Gulf. The check-in cadence is weekly and the programming adapts every four weeks." },
    { q: "Can I switch between in-person and online?", a: "Often. Many clients start with a few in-person sessions (especially for rehab) and transition to online once we've mapped the body. We'll suggest the right path on the intake call." },
    { q: "What does the 40-Day Reset Challenge actually look like?", a: "A structured 40-day cycle: progressive training blocks, recovery and sleep protocols, daily reflection prompts, and group accountability with a closing 1:1. We run four cohorts a year, and applications open six weeks before each intake." },
    { q: "Do you take insurance?", a: "We can issue invoices for Dutch supplementary insurance reimbursement on physiotherapy sessions. We don't bill insurance directly." },
  ];
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {items.map((it, i) => {
        const isOpen = openIdx === i;
        return (
          <div key={i} style={{ borderTop: i === 0 ? "1px solid var(--hairline)" : undefined, borderBottom: "1px solid var(--hairline)" }}>
            <button
              onClick={() => setOpenIdx(isOpen ? -1 : i)}
              style={{
                width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center",
                padding: "20px 0", background: "transparent", border: "none", cursor: "pointer",
                fontSize: 16, fontWeight: 500, textAlign: "left", color: "var(--ink)", fontFamily: "var(--font-sans)",
              }}
            >
              <span>{it.q}</span>
              <Icon name={isOpen ? "minus" : "plus"} size={16} />
            </button>
            {isOpen && <p className="text-body" style={{ paddingBottom: 20, paddingRight: 32, fontSize: 14 }}>{it.a}</p>}
          </div>
        );
      })}
    </div>
  );
};

Object.assign(window, { ServicesPage });