/* Pilgrim Wright — Who We Serve (audiences) */

const AUDIENCES = [
  {
    id: "nonprofits",
    n: "I",
    tag: "Non-profits",
    title: "Stretch the mission, not the team.",
    lede: "You are doing more with less again this year. AI, used carefully, can give your staff back five to ten hours a week without changing what makes your organization yours.",
    pains: [
      "Grant writers buried under reporting deadlines",
      "Development teams under-resourced for donor outreach",
      "Program staff burned out by data entry that crowds out program time",
      "Boards asking 'what about AI?' with no real plan to follow",
    ],
    wins: [
      "Grant narratives drafted from prior reports in 40% of the time",
      "Donor follow-up sequences that read like a person wrote them",
      "Intake forms that summarize themselves for case-workers",
      "An AI-use policy your board adopts in one meeting",
    ],
    proof: {
      quote: "We replaced six hours of weekly admin with twenty minutes of review. Our case-workers got their afternoons back.",
      name: "Margaret Hollis",
      org: "New Bedford Coalition for Families",
    },
    bearing: "NNE",
  },
  {
    id: "faith",
    n: "II",
    tag: "Churches & Faith",
    title: "Tools that respect the work of being present.",
    lede: "Ministry is relational. AI shouldn't replace the conversations that matter; it should clear the desk so those conversations can happen. We work with church staffs, denominations, and faith-based non-profits, and we're comfortable in the theological room.",
    pains: [
      "Pastors writing communications late on Saturday night",
      "Small staffs juggling website, bulletin, social, newsletter",
      "Pastoral-care notes that never make it back into the system",
      "Real concerns about ethics, privacy, and what's appropriate",
    ],
    wins: [
      "Newsletters drafted from sermon notes in the pastor's voice",
      "Bulletin and social posts generated together, not duplicated",
      "Pastoral-care follow-up reminders that respect confidentiality",
      "A written 'what we will and won't do with AI' for the congregation",
    ],
    proof: {
      quote: "They sat with our elders and asked theological questions before technical ones. That mattered.",
      name: "Pastor David Ng",
      org: "Grace & Truth Church, Worcester",
    },
    bearing: "E",
  },
  {
    id: "smb",
    n: "III",
    tag: "Small / Medium Business",
    title: "Reclaim the evenings. Keep the craft.",
    lede: "You started a business to do the work, and now you spend most nights doing the work around the work. AI can take a real bite out of the second category. We help owner-operators and 10-to-150-person teams keep what makes them theirs.",
    pains: [
      "Quotes and estimates that eat an entire Friday",
      "Customer follow-up that falls through the cracks",
      "Marketing that's always last on the list",
      "An office manager wearing eight hats",
    ],
    wins: [
      "Quoting workflows that read job descriptions and surface line items",
      "Customer service email drafts in your voice, ready to send",
      "Marketing calendar populated for the quarter in an afternoon",
      "Recurring reports that write themselves from the systems you already pay for",
    ],
    proof: {
      quote: "Most consultants sell you the future. Pilgrim Wright helped us get through this Tuesday.",
      name: "James O'Donnell",
      org: "O'Donnell & Sons Builders",
    },
    bearing: "SE",
  },
];

function AudiencesPage({ navigate }) {
  return (
    <div className="page">
      <PageHero
        num="№ 03 / 05"
        kicker="Who we serve"
        title={<>Three audiences,<br /><em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>one shared question.</em></>}
        lede={
          <>
            <em>"Where do we even start?"</em> — we begin there, every time.
            What follows looks a little different depending on who's asking,
            but the posture is the same: listen first, recommend lightly,
            ship something real.
          </>
        }
      >
        <div style={{ marginTop: 44, display: "flex", gap: 18, flexWrap: "wrap" }}>
          {AUDIENCES.map((a, i) => (
            <a key={a.id} href={`#${a.id}`}
               className="tag"
               style={{ padding: "10px 16px", fontSize: 12, cursor: "pointer" }}>
              <span style={{ color: "var(--accent)" }}>0{i + 1}</span> {a.tag}
            </a>
          ))}
        </div>
      </PageHero>

      {AUDIENCES.map((a, i) => (
        <AudienceBlock key={a.id} a={a} index={i} navigate={navigate} />
      ))}

      {/* Shared next step */}
      <section className="section" style={{ background: "var(--paper-deep)", borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 56, alignItems: "center" }}>
            <Reveal>
              <div className="kicker" style={{ marginBottom: 18 }}>↓ Whoever you are</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)" }}>
                The first step is the same.
              </h2>
              <p className="lede" style={{ marginTop: 24, maxWidth: 480 }}>
                A thirty-minute conversation, no slides, no pressure.
                We listen. We tell you honestly whether we're a fit.
                Either way you leave with a clear next move.
              </p>
              <div style={{ marginTop: 36 }}>
                <Btn variant="primary" arrow onClick={() => navigate("contact")}>Book a consultation</Btn>
              </div>
            </Reveal>
            <Reveal delay={120} style={{ display: "flex", justifyContent: "center", color: "var(--ink-quiet)" }}>
              <CompassRose size={300} accent />
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

function AudienceBlock({ a, index, navigate }) {
  const reverse = index % 2 === 1;
  return (
    <section id={a.id} className="section" style={{
      borderBottom: index < AUDIENCES.length - 1 ? "1px solid var(--line)" : "none",
      background: index === 1 ? "var(--paper-deep)" : "transparent",
    }}>
      <div className="container">
        {/* Sectional title strip */}
        <div style={{
          display: "flex", alignItems: "center", gap: 18,
          paddingBottom: 36, borderBottom: "1px solid var(--line)", marginBottom: 56,
        }}>
          <span style={{
            fontFamily: "var(--font-serif)",
            fontStyle: "italic",
            fontSize: 64,
            lineHeight: 0.8,
            color: "var(--accent)",
            fontWeight: 380,
          }}>{a.n}</span>
          <div>
            <div className="kicker">For — {a.tag}</div>
            <div className="kicker kicker--muted" style={{ marginTop: 4 }}>Bearing {a.bearing}</div>
          </div>
          <div style={{ marginLeft: "auto" }}>
            <CompassMark style={{ color: "var(--accent)" }} />
          </div>
        </div>

        <Reveal>
          <div style={{
            display: "grid",
            gridTemplateColumns: reverse ? "minmax(0, 1fr) minmax(0, 1.6fr)" : "minmax(0, 1.6fr) minmax(0, 1fr)",
            gap: 56,
            marginBottom: 64,
          }}>
            <div style={{ order: reverse ? 2 : 1 }}>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", marginBottom: 28 }}>
                {a.title}
              </h2>
              <p className="lede" style={{ maxWidth: 620 }}>{a.lede}</p>
            </div>
            <aside style={{
              order: reverse ? 1 : 2,
              alignSelf: "start",
              border: "1px solid var(--line)",
              padding: 28,
              background: index === 1 ? "rgba(255, 252, 245, 0.6)" : "rgba(255,255,255,0.32)",
            }}>
              <span className="quote-mark" style={{ display: "block", marginBottom: 12 }}>"</span>
              <blockquote className="quote" style={{ margin: 0, fontSize: 19, lineHeight: 1.35 }}>
                {a.proof.quote}
              </blockquote>
              <figcaption style={{
                marginTop: 24, paddingTop: 18, borderTop: "1px dashed var(--line)",
                display: "flex", alignItems: "center", gap: 14,
              }}>
                <div className="placeholder" style={{ width: 40, height: 40, padding: 0, borderRadius: "50%", fontSize: 8 }}>
                  Photo
                </div>
                <div>
                  <div style={{ fontFamily: "var(--font-serif)", fontSize: 15, color: "var(--ink)" }}>{a.proof.name}</div>
                  <div className="kicker kicker--muted" style={{ marginTop: 4 }}>{a.proof.org}</div>
                </div>
              </figcaption>
            </aside>
          </div>
        </Reveal>

        <Reveal delay={80}>
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 0,
            border: "1px solid var(--line)",
          }}>
            <div style={{ padding: 36, borderRight: "1px solid var(--line)" }}>
              <div className="kicker" style={{ marginBottom: 24 }}>The trouble we hear</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {a.pains.map((p, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, fontSize: 16, lineHeight: 1.5, color: "var(--ink-soft)" }}>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--text-muted)", paddingTop: 5 }}>
                      0{i + 1}
                    </span>
                    <span>{p}</span>
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ padding: 36, background: "var(--paper-deep)" }}>
              <div className="kicker kicker--accent" style={{ marginBottom: 24 }}>What we deliver</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
                {a.wins.map((w, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, fontSize: 16, lineHeight: 1.5, color: "var(--ink)" }}>
                    <CompassMark style={{ color: "var(--accent)", marginTop: 7 }} />
                    <span>{w}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.AudiencesPage = AudiencesPage;