// About page — story + 4 pillars

const AboutPage = ({ navigate, openApply }) => (
  <Page>
    {/* ---------- Hero ---------- */}
    <section style={{ padding: "72px 0 32px" }}>
      <div className="container-wide">
        <Eyebrow>About 7ARAKA</Eyebrow>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, marginTop: 24, alignItems: "center" }}>
          <h1 className="display-mega text-balance" style={{ maxWidth: 880 }}>
            We coach the body
            <br />
            <span style={{ color: "var(--muted)" }}>so the human can grow.</span>
          </h1>
          <p className="text-body-lg text-pretty">
            7ARAKA, from the Arabic <span style={{ fontFamily: "var(--font-mono)", fontSize: 14, padding: "1px 6px", background: "var(--surface-strong)", borderRadius: 6 }}>حركة</span> for <em>movement</em>, is a health-performance coaching practice based in the Netherlands. We work in clinics, gyms, and online with people who are done with generic fitness and want something honest.
          </p>
        </div>
      </div>
    </section>

    {/* ---------- Two-col story ---------- */}
    <section className="section">
      <div className="container-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }}>
        <div>
          <Eyebrow>The practice</Eyebrow>
          <h2 className="display-lg text-balance" style={{ marginTop: 12 }}>
            Built at the intersection of rehab, performance, and lifestyle.
          </h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
          <p className="text-body-lg text-pretty">
            Most coaches understand training. Most therapists understand recovery. Very few work in both languages at the same time. That gap is exactly where 7ARAKA was built.
          </p>
          <p className="text-body text-pretty">
            We coach professionals, athletes, and ambitious individuals through injuries, plateaus, and life seasons that demand more than a generic gym program. Every plan is rehab-informed, performance-driven, and tuned to the body in front of us, for Dutch and English speakers, in person and remote.
          </p>
          <p className="text-body text-pretty">
            We take the work seriously and the person in front of us even more so. Programming is evidence-based, progress is measured, and reviews are honest. It's the kind of work that compounds over years, not weeks.
          </p>
        </div>
      </div>
    </section>

    {/* ---------- Four Pillars ---------- */}
    <section style={{ padding: "0 0 80px" }}>
      <div className="container-wide">
        <div className="dark-band" style={{ background: "var(--ink)", borderRadius: 18, padding: "64px 56px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 48, flexWrap: "wrap", gap: 24 }}>
            <div style={{ maxWidth: 520 }}>
              <Eyebrow color="rgba(255,255,255,.6)">
                <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--cursor-primary)", display: "inline-block", marginRight: 8 }}></span>
                Four pillars
              </Eyebrow>
              <h2 className="display-xl" style={{ color: "var(--canvas)", marginTop: 14 }}>
                The 7ARAKA Method,<br />in four parts.
              </h2>
            </div>
            <p style={{ color: "rgba(247,247,244,.65)", maxWidth: 360, fontSize: 15, lineHeight: 1.55 }}>
              Every program we run sits on the same four pillars, whether it's rehab, personal coaching, online, or the 40-day reset. And the order matters.
            </p>
          </div>
          <div className="grid-4">
            {PILLARS.map((p, i) => <PillarCard key={i} {...p} dark />)}
          </div>
        </div>
      </div>
    </section>

    {/* ---------- What makes us different ---------- */}
    <section className="section">
      <div className="container-wide">
        <SectionHead
          eyebrow="What makes us different"
          title="Honest coaching. Measured progress. Results that compound."
          maxWidth={720}
        />
        <div className="grid-3" style={{ marginTop: 48 }}>
          {[
            {
              n: "01",
              title: "Rehab-informed by default",
              body: "Every program is screened through a physiotherapy lens. If something hurts, we fix it instead of avoiding it.",
            },
            {
              n: "02",
              title: "Science over slogans",
              body: "Programming follows evidence-based progression: load, recover, adapt, repeat. Every block has a reason you can ask about.",
            },
            {
              n: "03",
              title: "Built for real lives",
              body: "Sessions fit around work, family, prayer, travel. The program is yours; we just keep it honest.",
            },
          ].map((c, i) => (
            <div className="card" key={i} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--muted)" }}>{c.n}</span>
              <h4 className="display-sm">{c.title}</h4>
              <p className="text-body" style={{ fontSize: 14 }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* ---------- Founder / team ---------- */}
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, alignItems: "stretch" }}>
          <div className="card-image" style={{ minHeight: 480 }}>
            <img src={R('imgFounder', "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=1200&q=80")} alt="Founder" />
          </div>
          <div className="card" style={{ padding: 40, display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
            <Eyebrow>Founder</Eyebrow>
            <h3 className="display-lg text-balance">Bido Mohamed, BSc. PT</h3>
            <p className="text-body" style={{ fontSize: 15 }}>
              Bido started as a sport coach at CIOS, became a physiotherapist at Hogeschool Leiden, and never stopped studying. Along the way he worked with practices like Performance Guys, treating Eredivisie footballers, top-flight rugby players, national-level swimmers, and high performers across many sports.
            </p>
            <p className="text-body" style={{ fontSize: 15 }}>
              In every setting he saw the same gap: rehab gets people out of pain, coaching makes them perform, but almost nobody holds both jobs at once. So he built the practice that does. 7ARAKA takes you from recovery to performance under one method, with discipline and intention holding it together.
            </p>
            <div style={{ display: "flex", gap: 16, marginTop: 8, flexWrap: "wrap" }}>
              {["BSc Physiotherapy", "Hogeschool Leiden", "CIOS Sport & Bewegen", "Henselmans PT Course", "Milo Education", "EN · NL · AR"].map((b, i) => (
                <span key={i} className="pill" style={{ fontSize: 12 }}>
                  <Icon name="check" size={12} />
                  {b}
                </span>
              ))}
            </div>
            <div style={{ marginTop: 12, display: "flex", gap: 8, flexWrap: "wrap" }}>
              <Button variant="primary" iconRight="arrow-right" onClick={() => window.open("https://calendly.com/7araka-coaching/30min", "_blank", "noopener")}>Book an intake</Button>
              <Button variant="ghost" onClick={() => navigate("services")}>See programs</Button>
            </div>
          </div>
        </div>
      </div>
    </section>

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

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

Object.assign(window, { AboutPage });