/* Pilgrim Wright — About page */

function AboutPage({ navigate }) {
  return (
    <div className="page">
      <PageHero
        num="№ 04 / 05"
        kicker="About"
        title={<>Trustworthy guides,<br /><em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>for unfamiliar ground.</em></>}
        lede="We are a small consultancy based in Plymouth, Massachusetts. We took the name from the people who landed on this coast in 1620, and from John Bunyan's old book about a journey of purposeful progress. Both metaphors fit the work."
      />

      <AboutOrigin />
      <AboutValues />
      <AboutTeam />
      <AboutNumbers navigate={navigate} />
    </div>
  );
}

/* ---------- The pilgrim metaphor, explained ---------- */
function AboutOrigin() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 2fr)", gap: 64 }}>
          <Reveal>
            <div className="kicker">§ 08 — On the name</div>
            <div style={{ marginTop: 40, color: "var(--ink-quiet)" }}>
              <CompassRose size={240} accent />
            </div>
            <div style={{
              marginTop: 28, paddingTop: 24, borderTop: "1px dashed var(--line)",
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "var(--text-muted)", lineHeight: 1.8,
            }}>
              Plymouth, MA<br />
              N 41° 57′ 24″ · W 70° 40′ 04″<br />
              Founded 2024
            </div>
          </Reveal>

          <Reveal delay={120}>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", marginBottom: 40 }}>
              Two pilgrims. Same idea.
            </h2>

            <div style={{ display: "flex", flexDirection: "column", gap: 32, fontFamily: "var(--font-serif)", fontSize: 21, lineHeight: 1.5, color: "var(--ink-soft)", letterSpacing: "-0.005em", maxWidth: 640 }}>
              <p>
                <span style={{
                  float: "left", fontFamily: "var(--font-serif)", fontSize: 84,
                  lineHeight: 0.85, paddingRight: 12, paddingTop: 6,
                  color: "var(--accent)", fontStyle: "italic", fontWeight: 380,
                }}>T</span>
                he first pilgrims who landed on this coast were not heroes
                of the frontier so much as ordinary people stepping onto
                ground they did not understand, carrying responsibilities
                they could not put down. They moved slowly. They prepared
                carefully. They survived because they were honest about
                what they did not know.
              </p>
              <p>
                The second pilgrim is the one in John Bunyan's old book —
                a man on a long walk, learning that progress is not a
                straight line and that the right companion at the right
                moment can be the difference between getting through and
                getting lost.
              </p>
              <p>
                Both stories sit easily with the work we do. Organizations
                across New England are stepping into AI — unfamiliar
                ground, real responsibilities, no maps. Our job is to be
                the kind of companion that helps you make the trip with
                your conscience and your craft intact.
              </p>
            </div>

            {/* Pull quote */}
            <div style={{
              marginTop: 56,
              padding: "40px 0",
              borderTop: "1px solid var(--line)",
              borderBottom: "1px solid var(--line)",
              position: "relative",
            }}>
              <span className="quote-mark" style={{ position: "absolute", top: 24, left: -8, fontSize: 96 }}>"</span>
              <div className="display" style={{
                fontSize: "clamp(28px, 3.4vw, 40px)",
                paddingLeft: 56,
                fontStyle: "italic",
                color: "var(--ink)",
                fontVariationSettings: '"opsz" 36',
              }}>
                Patient. Plain-spoken. Prepared.
              </div>
              <div className="kicker kicker--muted" style={{ marginTop: 18, paddingLeft: 56 }}>
                — How we'd like to be described, six months in.
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Values ---------- */
function AboutValues() {
  const values = [
    { n: "I", t: "Honesty before persuasion.", b: "If we don't think AI is the right tool for what you're trying to do, we'll tell you. We've talked clients out of engagements more than once. It tends to build the relationship rather than end it." },
    { n: "II", t: "Plain language, always.", b: "Acronyms are mostly a way of hiding. We use the words your team uses and explain the rest. Our reports read like memos, not white papers." },
    { n: "III", t: "Stewardship over scale.", b: "We stay small on purpose. Three to five engagements at a time. It's the only way we know to do this work without becoming the thing we want to help you avoid." },
    { n: "IV", t: "Faith-friendly, evidence-led.", b: "We work comfortably with religious organizations and we work rigorously with the science. The two aren't at odds. We hold both with care." },
  ];
  return (
    <section className="section" style={{ background: "var(--paper-deep)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>§ 09 — Values</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)" }}>
            Four things we keep<br />close to the chest.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 0, borderTop: "1px solid var(--ink)" }}>
          {values.map((v, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: "36px 32px 40px 0",
                paddingLeft: i === 0 ? 0 : 32,
                borderRight: i < values.length - 1 ? "1px solid var(--line)" : "none",
              }}>
                <div style={{
                  fontFamily: "var(--font-serif)", fontStyle: "italic",
                  fontSize: 48, color: "var(--accent)", lineHeight: 1,
                  marginBottom: 18, fontWeight: 380,
                }}>{v.n}</div>
                <h3 className="serif" style={{ fontSize: 22, color: "var(--ink)", marginBottom: 14, letterSpacing: "-0.008em" }}>
                  {v.t}
                </h3>
                <p style={{ fontSize: 15, color: "var(--text-muted)", lineHeight: 1.6 }}>{v.b}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Founder / team ---------- */
function AboutTeam() {
  const people = [
    {
      name: "Aaron Wright",
      role: "Founder & Principal",
      bio: "Spent twelve years inside non-profits and church staffs before two more building AI systems at a Boston consultancy. Founded Pilgrim Wright when he realized the people who most needed careful guidance were the least likely to be sold it. Lives in Plymouth with his wife and two daughters.",
      tags: ["Strategy · ethics · governance", "Non-profit & faith"],
    },
    {
      name: "Beatrice Holloway",
      role: "Engagement Lead",
      bio: "Operations background — ran a thirty-person family services agency before turning to consulting. Translates messy organizational realities into systems that hold up. Lives in Worcester; runs a small letterpress studio on the side.",
      tags: ["Implementation · training", "SMB operations"],
    },
    {
      name: "Samuel Reyes",
      role: "Technical Director",
      bio: "Former research engineer at a federal lab. Builds the workflows, picks the models, and writes the kind of documentation your team will actually open in six months. Lives in Cambridge; cycles to the Cape on weekends.",
      tags: ["Engineering · data governance", "Tooling"],
    },
  ];

  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 56, display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 14 }}>§ 10 — The people</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)" }}>
              The people<br />you'll work with.
            </h2>
          </div>
          <p className="lede" style={{ maxWidth: 380 }}>
            We are a team of three by design. If you hire us, you get us.
            No swap-out after the sale.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 24 }}>
          {people.map((p, i) => (
            <Reveal key={i} delay={i * 80}>
              <article style={{
                border: "1px solid var(--line)",
                padding: 0,
                background: "rgba(255,255,255,0.32)",
                display: "flex", flexDirection: "column",
                height: "100%",
              }}>
                <div className="placeholder" style={{ height: 280, borderLeft: 0, borderRight: 0, borderTop: 0, fontSize: 11 }}>
                  Portrait — {p.name.split(" ")[0]}
                </div>
                <div style={{ padding: 24, display: "flex", flexDirection: "column", gap: 14, flex: 1 }}>
                  <div>
                    <div className="serif" style={{ fontSize: 26, color: "var(--ink)" }}>{p.name}</div>
                    <div className="kicker kicker--muted" style={{ marginTop: 6 }}>{p.role}</div>
                  </div>
                  <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-muted)" }}>{p.bio}</p>
                  <div style={{ marginTop: "auto", paddingTop: 18, borderTop: "1px dashed var(--line)", display: "flex", flexDirection: "column", gap: 6 }}>
                    {p.tags.map((t, j) => (
                      <div key={j} className="kicker kicker--muted" style={{ fontSize: 10 }}>{t}</div>
                    ))}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- A "by the numbers" close ---------- */
function AboutNumbers({ navigate }) {
  return (
    <section style={{
      background: "var(--ink)", color: "var(--paper)", padding: "120px 0",
      position: "relative", overflow: "hidden",
    }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.06, color: "var(--paper)" }}>
        <TopoLines count={11} opacity={1} />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ marginBottom: 56 }}>
          <div className="kicker" style={{ color: "var(--accent-soft)", marginBottom: 18 }}>§ 11 — In the ledger</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", color: "var(--paper)" }}>
            A small practice,<br />held to a high standard.
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))", gap: 0, borderTop: "1px solid rgba(244, 237, 224, 0.3)" }}>
          {[
            ["27", "Engagements since founding"],
            ["94%", "Clients renewed or referred"],
            ["3–5", "Active engagements at any time"],
            ["6 hrs", "Median weekly hours returned to staff"],
            ["0", "Cookie-cutter decks delivered"],
          ].map(([n, l], i) => (
            <div key={i} style={{
              padding: "32px 24px",
              borderRight: i < 4 ? "1px solid rgba(244, 237, 224, 0.18)" : "none",
            }}>
              <div className="display" style={{
                color: "var(--paper)", fontSize: 56, fontVariationSettings: '"opsz" 48',
                marginBottom: 14, lineHeight: 1,
              }}>{n}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(244,237,224,0.55)", lineHeight: 1.5 }}>
                {l}
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 64, display: "flex", gap: 16, flexWrap: "wrap" }}>
          <Btn variant="accent" arrow onClick={() => navigate("contact")}>Book a consultation</Btn>
          <Btn variant="secondary" onClick={() => navigate("services")}>
            <span style={{ color: "var(--paper)" }}>See services</span>
          </Btn>
        </div>
      </div>
    </section>
  );
}

window.AboutPage = AboutPage;
