/* Pilgrim Wright — Services page */

var { useState } = React;

const SERVICES = [
  {
    n: "I",
    num: "01",
    title: "AI Readiness Assessment",
    duration: "4 weeks · fixed fee",
    body: "Before we recommend a single tool, we want to understand the territory. A four-week look at how your team actually works — what's repetitive, what's relational, what AI can carry, and what it shouldn't.",
    outcomes: [
      "Workflow audit across 3–5 functions",
      "Risk, ethics, and data-governance review",
      "12-month phased roadmap with budget bands",
      "Executive briefing for board or leadership",
    ],
    deliverables: ["~30 page readiness report", "Prioritized opportunity map", "1-hr board presentation"],
    who: "Leaders deciding whether to start, where to start, and how cautiously.",
    notIdeal: "Teams already mid-implementation looking for a sanity check — for that, see Advisory.",
  },
  {
    n: "II",
    num: "02",
    title: "Implementation & Training",
    duration: "8–12 weeks · scope-based",
    body: "We move from map to terrain. Working alongside your team, we build the first two or three workflows end-to-end — not a demo, not a pilot, real software your people use on Monday morning.",
    outcomes: [
      "Two to three production workflows shipped",
      "Cohort training (8–16 hours, role-specific)",
      "Internal AI champion identified and mentored",
      "Lightweight documentation your staff will actually read",
    ],
    deliverables: ["Working tools in your stack", "Runbooks & training videos", "Champion handoff plan"],
    who: "Teams who've completed a readiness phase (with us or elsewhere) and are ready to begin.",
    notIdeal: "Organizations without an internal point-person — we'll insist on naming one first.",
  },
  {
    n: "III",
    num: "03",
    title: "Ongoing Advisory",
    duration: "Monthly retainer · 6-mo. minimum",
    body: "Tools degrade without care. The model gets a new version. A vendor changes pricing. A team member leaves. Advisory is the quiet ongoing relationship that keeps the work in good repair.",
    outcomes: [
      "Monthly council with leadership (90 min)",
      "Quarterly cross-team review and tune-up",
      "On-call guidance for procurement, policy, and incidents",
      "Annual roadmap revision",
    ],
    deliverables: ["Monthly notes & decisions log", "Quarterly tune-up report", "Slack/email line for urgent questions"],
    who: "Organizations already in motion who want stewardship without overhead.",
    notIdeal: "Teams hoping a retainer will replace internal ownership. It won't, and we'll tell you so.",
  },
];

function ServicesPage({ navigate }) {
  const [active, setActive] = useState(null);
  return (
    <div className="page">
      <PageHero
        num="№ 02 / 05"
        kicker="Services"
        title={<>Three offerings.<br />One quiet method.</>}
        lede="We don't sell software. We sell good judgment, careful pacing, and a willingness to say 'not yet' when 'not yet' is the right answer. Pick a stage that matches where you are."
      >
        <div style={{ marginTop: 44, display: "flex", gap: 14, flexWrap: "wrap" }}>
          <Btn variant="primary" arrow onClick={() => navigate("contact")}>Book a consultation</Btn>
          <Btn variant="ghost" href="#services-list">
            <span>Jump to services</span>
            <span style={{ width: 22, height: 1, background: "currentColor", display: "inline-block", marginLeft: 4 }} />
          </Btn>
        </div>
      </PageHero>

      {/* Pricing strip */}
      <section className="section--tight" id="services-list">
        <div className="container">
          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
            border: "1px solid var(--line)",
          }}>
            {[
              ["Engagements / year", "12"],
              ["Avg. project length", "9 wks"],
              ["Repeat or referral", "94%"],
              ["Sectors served", "Non-profit · Faith · SMB"],
            ].map(([l, v], i) => (
              <div key={i} style={{
                padding: "28px 24px",
                borderRight: i < 3 ? "1px solid var(--line)" : "none",
              }}>
                <div className="kicker kicker--muted" style={{ marginBottom: 14 }}>{l}</div>
                <div className="display" style={{ fontSize: 36, color: "var(--ink)" }}>{v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Service detail panels */}
      <section className="section">
        <div className="container">
          {SERVICES.map((s, i) => (
            <Reveal key={s.num} delay={i * 90}>
              <ServiceDetail s={s} index={i} navigate={navigate} />
            </Reveal>
          ))}
        </div>
      </section>

      {/* Method strip */}
      <section className="section" style={{ background: "var(--paper-deep)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 2fr)", gap: 56 }}>
            <div>
              <div className="kicker" style={{ marginBottom: 14 }}>§ 06 — Principles</div>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>
                A few things we<br />won't do.
              </h2>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {[
                ["No 'transformation' decks.", "We've never seen one survive its second quarter. We write short memos and ship working things."],
                ["No off-the-shelf prompts library.", "Your work is specific. We respect that by sitting inside it long enough to learn it."],
                ["No fear-of-missing-out framing.", "If now isn't the right time, we'll say so. Often a six-month delay is the right answer."],
                ["No black boxes.", "Everything we set up, your team can read, edit, and unplug. Vendor lock-in is the opposite of stewardship."],
              ].map(([t, b], i) => (
                <div key={i} style={{
                  padding: "28px 0",
                  borderBottom: i < 3 ? "1px solid var(--line)" : "none",
                  display: "grid", gridTemplateColumns: "32px 1fr", gap: 24,
                }}>
                  <div className="kicker kicker--muted" style={{ paddingTop: 6 }}>0{i + 1}</div>
                  <div>
                    <h3 className="serif" style={{ fontSize: 24, color: "var(--ink)", marginBottom: 8 }}>{t}</h3>
                    <p style={{ fontSize: 15.5, color: "var(--text-muted)", lineHeight: 1.55 }}>{b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <ServicesFAQ />

      {/* Contact */}
      <HomeCTA navigate={navigate} />
    </div>
  );
}

function ServiceDetail({ s, index, navigate }) {
  return (
    <article style={{
      padding: "72px 0",
      borderTop: "1px solid var(--line)",
      borderBottom: index === SERVICES.length - 1 ? "1px solid var(--line)" : "none",
      display: "grid",
      gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)",
      gap: 64,
    }}>
      <div>
        <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32 }}>
          <span style={{
            fontFamily: "var(--font-serif)",
            fontStyle: "italic",
            fontSize: 64,
            color: "var(--accent)",
            lineHeight: 0.8,
            fontWeight: 380,
          }}>
            {s.n}
          </span>
          <div>
            <div className="kicker">{s.num} / Service</div>
            <div className="kicker kicker--muted" style={{ marginTop: 4 }}>{s.duration}</div>
          </div>
        </div>

        <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", marginBottom: 28 }}>
          {s.title}
        </h2>

        <p className="serif" style={{ fontSize: 22, lineHeight: 1.4, color: "var(--ink-soft)", letterSpacing: "-0.008em", marginBottom: 36, maxWidth: 620 }}>
          {s.body}
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 36, marginBottom: 36 }}>
          <div>
            <div className="kicker kicker--muted" style={{ marginBottom: 16 }}>What you'll come away with</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {s.outcomes.map((o, i) => (
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 15.5, color: "var(--ink-soft)", lineHeight: 1.5 }}>
                  <CompassMark style={{ color: "var(--accent)", marginTop: 7 }} />
                  <span>{o}</span>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <div className="kicker kicker--muted" style={{ marginBottom: 16 }}>Deliverables</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {s.deliverables.map((d, i) => (
                <li key={i} style={{ display: "flex", gap: 12, fontSize: 15.5, color: "var(--ink-soft)", lineHeight: 1.5 }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--accent)", paddingTop: 4 }}>
                    →
                  </span>
                  <span>{d}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <Btn variant="primary" arrow onClick={() => navigate("contact")}>
          Inquire about this service
        </Btn>
      </div>

      {/* Right: who-it's-for card + compass */}
      <aside style={{ position: "sticky", top: 96, alignSelf: "start" }}>
        <div style={{
          border: "1px solid var(--line)",
          padding: 28,
          background: "rgba(255,255,255,0.32)",
        }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
            <span className="kicker">Best fit for</span>
            <CompassMark style={{ color: "var(--accent)" }} />
          </div>
          <p className="serif" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--ink)", marginBottom: 24 }}>
            {s.who}
          </p>
          <div style={{
            paddingTop: 18, borderTop: "1px dashed var(--line)",
            fontSize: 13.5, color: "var(--text-muted)", lineHeight: 1.55,
          }}>
            <div className="kicker kicker--muted" style={{ marginBottom: 8 }}>Not ideal for</div>
            {s.notIdeal}
          </div>
        </div>

        <div style={{
          marginTop: 18,
          padding: 18,
          border: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
          color: "var(--ink-quiet)",
        }}>
          <div>
            <div className="kicker kicker--muted">Bearing</div>
            <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 24, color: "var(--ink)", marginTop: 4 }}>
              {["N", "NE", "E"][index]}
            </div>
          </div>
          <CompassRose size={72} accent />
        </div>
      </aside>
    </article>
  );
}

function ServicesFAQ() {
  const faqs = [
    ["How do you price?", "Readiness is a fixed fee starting at $18,000. Implementation is scope-based, typically $40–90K. Advisory is a monthly retainer starting at $4,500. We'll give you a written estimate after a 30-minute call — no spreadsheets, no negotiation theatre."],
    ["What tools do you use?", "We're not partnered with any vendor. Most engagements use a mix of Anthropic Claude, OpenAI, Microsoft Copilot, and open-source models, chosen for fit and cost. We document our reasoning so you can change later."],
    ["Will our data be safe?", "We never train external models on your data. Every engagement includes a data inventory, retention policy, and access controls. For faith and healthcare clients we extend that into a written ethics review."],
    ["Do you only work with Massachusetts organizations?", "We're rooted here, but we serve clients across New England and the eastern seaboard, and remotely beyond. We charge no travel for the first 90 miles from Plymouth."],
    ["Can you help us write an AI policy for our board?", "Yes. It's a common deliverable inside Readiness. A short, plain-English policy your board can actually adopt at the next meeting — not a 40-page risk document."],
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>§ 07 — Common questions</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>
            Things people ask us<br />on the first call.
          </h2>
        </div>
        <div>
          {faqs.map(([q, a], i) => (
            <div key={i} style={{ borderTop: "1px solid var(--line)", borderBottom: i === faqs.length - 1 ? "1px solid var(--line)" : "none" }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: "100%", textAlign: "left",
                  padding: "28px 0",
                  display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
                }}
              >
                <span className="serif" style={{ fontSize: 22, color: "var(--ink)", letterSpacing: "-0.005em" }}>
                  <span className="kicker kicker--muted" style={{ marginRight: 16 }}>0{i + 1}</span>
                  {q}
                </span>
                <span style={{
                  width: 24, height: 24, position: "relative", flex: "none",
                  color: "var(--ink)",
                }}>
                  <span style={{ position: "absolute", left: 0, right: 0, top: "50%", height: 1, background: "currentColor" }} />
                  <span style={{
                    position: "absolute", top: 0, bottom: 0, left: "50%", width: 1, background: "currentColor",
                    transform: open === i ? "scaleY(0)" : "scaleY(1)", transition: "transform 0.25s",
                  }} />
                </span>
              </button>
              <div style={{
                maxHeight: open === i ? 400 : 0,
                overflow: "hidden",
                transition: "max-height 0.4s cubic-bezier(.2,.6,.2,1), padding 0.3s",
                paddingBottom: open === i ? 32 : 0,
              }}>
                <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--text-muted)", maxWidth: 720, paddingLeft: 56 }}>
                  {a}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.ServicesPage = ServicesPage;
