/* Pilgrim Wright — Home page */

function HomePage({ navigate }) {
  return (
    <div className="page">
      <HomeHero navigate={navigate} />
      <HomeIntro />
      <HomePillars navigate={navigate} />
      <HomeWhoWeServe navigate={navigate} />
      <HomeApproach />
      <HomeProof />
      <HomeFounderNote />
      <HomeCTA navigate={navigate} />
    </div>
  );
}

/* ---------- Hero · Journal cover ---------- */
function HomeHero({ navigate }) {
  const tweaks = React.useContext(window.TweaksContext || React.createContext({}));
  const headlines = {
    frontier: { l1: "Chart your", em: "path." },
    guide:    { l1: "A trusted", em: "guide." },
    progress: { l1: "Purposeful", em: "progress." },
    ground:   { l1: "New", em: "ground." },
  };
  const H = headlines[tweaks?.headline] || headlines.frontier;
  const issueDate = new Date().toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" });
  const toc = [
    ["I",   "Services",             "services",  "p. 14"],
    ["II",  "Who we serve",         "audiences", "p. 22"],
    ["III", "Our values",           "about",     "p. 31"],
    ["IV",  "Begin a conversation", "contact",   "p. 40"],
  ];

  return (
    <section style={{ background: "var(--paper-deep)", position: "relative", overflow: "hidden" }}>
      {/* Masthead */}
      <Reveal>
        <div style={{ borderBottom: "1px solid var(--ink)" }}>
          <div className="container--wide" style={{
            padding: "20px 0",
            display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap",
          }}>
            <span style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontSize: "clamp(20px, 2.2vw, 26px)", color: "var(--ink)", letterSpacing: "-0.01em",
            }}>The Pilgrim Wright Field Guide</span>
            <span className="kicker kicker--muted">Vol. I, No. 01 · Spring 2026</span>
          </div>
        </div>
      </Reveal>

      {/* Meta bar */}
      <Reveal delay={60}>
        <div style={{ borderBottom: "1px solid var(--ink)" }}>
          <div className="container--wide" style={{
            padding: "16px 0",
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
            gap: 16,
            fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.14em",
            textTransform: "uppercase", color: "var(--text-muted)",
          }}>
            <div>Issue · {issueDate}</div>
            <div>Plymouth · MA</div>
            <div>Bearing · NNE</div>
            <div style={{ textAlign: "right" }}>pilgrimwright.ai</div>
          </div>
        </div>
      </Reveal>

      {/* Hero body */}
      <div className="container--wide" style={{
        paddingTop: 64, paddingBottom: 56,
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)",
        gap: 56, alignItems: "start",
      }}>
        <div>
          <Reveal delay={120}>
            <div style={{
              fontFamily: "var(--font-serif)", fontStyle: "italic",
              fontSize: "clamp(22px, 2.2vw, 30px)", color: "var(--accent-deep)",
              lineHeight: 1, marginBottom: 28,
            }}>
              № 01 — On Beginning
            </div>
          </Reveal>

          <Reveal delay={200}>
            <h1 className="display" style={{
              fontSize: "clamp(56px, 8vw, 132px)",
              fontVariationSettings: '"opsz" 96',
              lineHeight: 0.95, letterSpacing: "-0.028em",
              margin: 0, color: "var(--ink)",
            }}>
              {H.l1}<br />
              <em style={{
                fontStyle: "italic", color: "var(--accent-deep)",
                fontVariationSettings: '"opsz" 96',
              }}>{H.em}</em>
            </h1>
          </Reveal>

          <Reveal delay={320}>
            <div style={{
              marginTop: 40, paddingTop: 24,
              borderTop: "1px dashed var(--ink)",
              maxWidth: 620,
            }}>
              <p className="serif" style={{
                fontSize: "clamp(18px, 1.5vw, 22px)",
                lineHeight: 1.5, color: "var(--ink-soft)", letterSpacing: "-0.005em",
              }}>
                <span style={{
                  float: "left", fontFamily: "var(--font-serif)",
                  fontSize: 88, lineHeight: 0.85,
                  paddingRight: 14, paddingTop: 6,
                  color: "var(--accent)", fontStyle: "italic",
                }}>W</span>
                e help non-profits, faith communities, and small businesses
                adopt AI with clarity, conscience, and a clear first step —
                not hype, not hand-waving, not a 200-slide deck.
              </p>
            </div>
          </Reveal>

          <Reveal delay={420}>
            <div style={{ marginTop: 44, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <Btn variant="primary" arrow onClick={() => navigate("contact")}>
                Begin the journey
              </Btn>
              <Btn variant="ghost" onClick={() => navigate("services")}>
                <span>Read the field guide</span>
                <span className="arrow" />
              </Btn>
            </div>
          </Reveal>
        </div>

        {/* Right: compass rose + table of contents */}
        <aside>
          <Reveal delay={260}>
            <div style={{ color: "var(--ink-quiet)", display: "flex", justifyContent: "center" }}>
              <CompassRose size={200} accent />
            </div>
          </Reveal>

          <Reveal delay={360}>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--ink)" }}>
              <div className="kicker" style={{ marginBottom: 20 }}>In this issue</div>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 0 }}>
                {toc.map(([n, t, target, p], i) => (
                  <li key={i}>
                    <a href={`#${target}`}
                       onClick={(e) => { e.preventDefault(); navigate(target); }}
                       style={{
                         display: "grid", gridTemplateColumns: "32px 1fr auto",
                         gap: 12, alignItems: "baseline",
                         padding: "12px 0",
                         borderBottom: "1px dotted var(--line)",
                         transition: "color 0.2s",
                       }}
                       onMouseEnter={(e) => { e.currentTarget.style.color = "var(--accent-deep)"; }}
                       onMouseLeave={(e) => { e.currentTarget.style.color = ""; }}>
                      <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)", fontSize: 18 }}>{n}</span>
                      <span className="serif" style={{ fontSize: 19, color: "inherit" }}>{t}</span>
                      <span className="kicker kicker--muted" style={{ fontSize: 10 }}>{p}</span>
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </aside>
      </div>

      {/* Footer rule + scroll cue */}
      <div style={{ borderTop: "1px solid var(--line)" }}>
        <div className="container--wide" style={{
          padding: "20px 0",
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, flexWrap: "wrap",
        }}>
          <div className="kicker kicker--muted">↓ Scroll · The path begins here</div>
          <div className="kicker kicker--muted">№ 001 / 005</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Intro / brand story (typographic, no images) ---------- */
function HomeIntro() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 2fr)", gap: 64, alignItems: "start" }}>
          <Reveal>
            <div className="kicker">§ 01 — Premise</div>
          </Reveal>
          <Reveal delay={80}>
            <p className="serif" style={{
              fontSize: "clamp(28px, 3.4vw, 44px)",
              lineHeight: 1.22,
              letterSpacing: "-0.018em",
              color: "var(--ink)",
              fontWeight: 380,
            }}>
              <span style={{
                float: "left",
                fontFamily: "var(--font-serif)",
                fontSize: 96,
                lineHeight: 0.85,
                paddingRight: 12,
                paddingTop: 6,
                color: "var(--accent)",
                fontStyle: "italic",
              }}>E</span>
              very organization is stepping onto unfamiliar ground.
              Some are eager, some are anxious, most are both.
              Our work is to be the kind of guide we'd want for ourselves —
              <em style={{ color: "var(--accent-deep)" }}>patient, plain-spoken,
              and prepared</em> — so the first step feels less like a leap
              and more like the natural next move.
            </p>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------- Three pillars ---------- */
function HomePillars({ navigate }) {
  return (
    <section className="section horizon">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, paddingTop: 32 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 14 }}>§ 02 — Services</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)", maxWidth: 720 }}>
              Three offerings, one quiet method.
            </h2>
          </div>
          <Btn variant="ghost" onClick={() => navigate("services")}>
            <span>All services</span>
            <span className="arrow" />
          </Btn>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 0, border: "1px solid var(--line)" }}>
          {[
            {
              num: "01 / Discovery",
              title: "AI Readiness Assessment",
              body: "A four-week look at how your team works, where AI fits, and where it doesn't. You leave with a prioritized map, not a sales pitch.",
              outcomes: ["Workflow audit", "Risk & ethics review", "12-month roadmap"],
              who: "Leaders deciding whether to start",
            },
            {
              num: "02 / Practice",
              title: "Implementation & Training",
              body: "We build the first two or three workflows alongside your team and train the people who'll keep using them on Monday morning.",
              outcomes: ["Two workflows shipped", "Cohort training (8 hrs)", "Internal champion named"],
              who: "Teams ready to begin",
            },
            {
              num: "03 / Stewardship",
              title: "Ongoing Advisory",
              body: "A monthly check-in, a clear line for hard questions, and a tempo of small improvements — so the tools age into the work rather than against it.",
              outcomes: ["Monthly council", "Quarterly review", "On-call guidance"],
              who: "Teams already in motion",
            },
          ].map((p, i) => (
            <Reveal key={i} delay={i * 90}
              style={{ borderRight: i < 2 ? "1px solid var(--line)" : "none", display: "flex" }}>
              <div className="card lift" style={{
                border: 0,
                background: "transparent",
                padding: 36,
                display: "flex", flexDirection: "column",
                width: "100%",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="card__num">{p.num}</div>
                  <CompassMark style={{ color: "var(--accent)" }} />
                </div>
                <h3 className="card__title">{p.title}</h3>
                <p className="card__body">{p.body}</p>
                <ul style={{
                  marginTop: 28, paddingTop: 18, borderTop: "1px dashed var(--line)",
                  listStyle: "none", padding: "18px 0 0", display: "flex", flexDirection: "column", gap: 8,
                  fontSize: 14, color: "var(--ink-soft)"
                }}>
                  {p.outcomes.map((o, j) => (
                    <li key={j} style={{ display: "flex", gap: 12 }}>
                      <span style={{ color: "var(--accent)", fontFamily: "var(--font-mono)", fontSize: 11, paddingTop: 4 }}>
                        ⌁
                      </span>
                      <span>{o}</span>
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: "auto", paddingTop: 28 }}>
                  <div className="kicker kicker--muted">For — {p.who}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Who we serve preview ---------- */
function HomeWhoWeServe({ navigate }) {
  const audiences = [
    {
      tag: "Non-profits",
      title: "Mission-bound teams.",
      body: "Stretch the program dollar without stretching the staff.",
      accent: "#6f7a58", // sage
    },
    {
      tag: "Churches & Faith",
      title: "Communities of practice.",
      body: "Tools that respect the work of being present with people.",
      accent: "#1a2540", // navy
    },
    {
      tag: "Small business",
      title: "Owners who wear five hats.",
      body: "Reclaim the evenings. Keep the craft. Skip the hype cycle.",
      accent: "#a8632f", // clay
    },
  ];
  return (
    <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: 64, marginBottom: 56 }}>
          <div>
            <div className="kicker" style={{ marginBottom: 14 }}>§ 03 — Who we serve</div>
            <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)" }}>
              Three audiences, one shared question.
            </h2>
          </div>
          <p className="lede" style={{ alignSelf: "end", maxWidth: 520 }}>
            <em>"Where do we even start?"</em> — we begin there, every time.
            What follows looks a little different depending on who's asking.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 18 }}>
          {audiences.map((a, i) => (
            <Reveal key={i} delay={i * 80}>
              <article className="card lift" style={{
                padding: 32, height: "100%", display: "flex", flexDirection: "column", gap: 18,
                background: "rgba(255, 252, 245, 0.5)",
                borderTop: `2px solid ${a.accent}`,
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="tag" style={{ borderColor: a.accent, color: a.accent }}>{a.tag}</span>
                  <span style={{
                    fontFamily: "var(--font-serif)", fontStyle: "italic",
                    fontSize: 24, lineHeight: 1, color: a.accent,
                  }}>0{i + 1}</span>
                </div>
                <h3 className="serif" style={{ fontSize: 28, lineHeight: 1.15, color: "var(--ink)" }}>
                  {a.title}
                </h3>
                <p style={{ fontSize: 15.5, color: "var(--text-muted)", lineHeight: 1.55 }}>{a.body}</p>
                <a href="#" onClick={(e) => { e.preventDefault(); navigate("audiences"); }}
                   className="kicker" style={{ marginTop: "auto", display: "inline-flex", gap: 6, color: a.accent }}>
                  Read more →
                </a>
              </article>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Approach (numbered process steps) ---------- */
function HomeApproach() {
  const steps = [
    { n: "I", t: "Listen", d: "We spend the first week in your room, not on a Zoom. Whatever the work actually is, we want to see it." },
    { n: "II", t: "Map", d: "We sketch the territory: which workflows AI can lift, which it shouldn't touch, and where the line goes." },
    { n: "III", t: "Walk", d: "We build the first two workflows with you — not a demo, not a pilot, a real piece of working software." },
    { n: "IV", t: "Tend", d: "Tools degrade without care. We stay close enough to notice, and quiet enough to stay out of the way." },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 64, maxWidth: 720 }}>
          <div className="kicker" style={{ marginBottom: 14 }}>§ 04 — The way we work</div>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 72px)" }}>
            A method, not a methodology.
          </h2>
          <p className="lede" style={{ marginTop: 24, maxWidth: 580 }}>
            Four movements. We've found these are enough — and shorter than
            the average tech-consultancy decks we've sat through.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
          gap: 0,
          borderTop: "1px solid var(--ink)",
        }}>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80}>
              <div style={{
                padding: "32px 28px 36px 0",
                borderRight: i < steps.length - 1 ? "1px solid var(--line)" : "none",
                paddingLeft: i === 0 ? 0 : 28,
                position: "relative",
              }}>
                <div style={{
                  fontFamily: "var(--font-serif)",
                  fontStyle: "italic",
                  fontSize: 48,
                  color: "var(--accent)",
                  lineHeight: 1,
                  marginBottom: 14,
                  fontWeight: 380,
                }}>
                  {s.n}
                </div>
                <h3 className="serif" style={{ fontSize: 24, color: "var(--ink)", marginBottom: 12, letterSpacing: "-0.01em" }}>
                  {s.t}
                </h3>
                <p style={{ fontSize: 15, color: "var(--text-muted)", lineHeight: 1.55 }}>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Social proof ---------- */
function HomeProof() {
  const proofs = [
    {
      quote: "They translated AI into plain language without making us feel slow. That's a rare gift.",
      name: "Pastor David Ng",
      role: "Senior Pastor",
      org: "Grace & Truth Church",
    },
    {
      quote: "I came in skeptical. I left with two workflows my staff actually uses every Monday.",
      name: "Sarah Reinhardt",
      role: "Executive Director",
      org: "Cape Ann Family Services",
    },
    {
      quote: "Most consultancies sell you the future. Pilgrim Wright helped us get through this Tuesday.",
      name: "James O'Donnell",
      role: "Owner",
      org: "O'Donnell & Sons Builders",
    },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="divider-topo" style={{ marginBottom: 48 }}>
          <span className="kicker kicker--muted">§ 05 — Voices from the trail</span>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
          gap: 18,
        }}>
          {proofs.map((p, i) => (
            <Reveal key={i} delay={i * 90}>
              <Testimonial {...p} />
            </Reveal>
          ))}
        </div>

        {/* Logo wall */}
        <Reveal delay={200}>
          <div style={{
            marginTop: 96, paddingTop: 32, borderTop: "1px solid var(--line)",
            display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 32,
          }}>
            <div className="kicker kicker--muted">In partnership with</div>
            <div style={{ display: "flex", gap: 48, flexWrap: "wrap", alignItems: "center" }}>
              {["Plymouth Bay Foundation", "MA Council of Nonprofits", "Diocese of Worcester", "SBA New England", "Cape Cod Chamber"].map((logo, i) => (
                <div key={i} style={{
                  fontFamily: "var(--font-serif)",
                  fontStyle: "italic",
                  fontSize: 17,
                  color: "var(--ink-quiet)",
                  letterSpacing: "-0.005em",
                  opacity: 0.7,
                }}>
                  {logo}
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Pilgrim ship engraving (founder-note illustration) ----------
   Inline line-art galleon under full sail in an engraving style. Uses theme
   vars so it tracks the palette switcher. Swap for a photo later if desired. */
function FounderShip() {
  // engraved sea
  const waveRows = [];
  for (let i = 0; i < 9; i++) waveRows.push(330 + i * 17);
  const wavePath = (y, off) => {
    let d = `M${24 + off},${y}`;
    for (let i = 0; i < 11; i++) d += " q9,-6 18,0 q9,6 18,0";
    return d;
  };
  // shroud net with ratline rungs, fanning aft from a masthead
  const shrouds = (mx, myTop, bx0, bx1, by, n, rungs) => {
    const bxs = [];
    const lines = [];
    for (let i = 0; i < n; i++) {
      const bx = bx0 + (bx1 - bx0) * (i / (n - 1));
      bxs.push(bx);
      const topx = mx + (i - (n - 1) / 2) * 1.6;
      lines.push(<line key={"s" + i} x1={bx} y1={by} x2={topx} y2={myTop} />);
    }
    for (let r = 1; r <= rungs; r++) {
      const tr = r / (rungs + 1);
      const y = (by + (myTop - by) * tr).toFixed(1);
      const pts = bxs.map((bx, i) => {
        const topx = mx + (i - (n - 1) / 2) * 1.6;
        return (bx + (topx - bx) * tr).toFixed(1) + "," + y;
      });
      lines.push(<polyline key={"r" + r} points={pts.join(" ")} />);
    }
    return lines;
  };
  // billowed square sail outline
  const sail = (x1, x2, yT, yF) => {
    const w = x2 - x1;
    return `M${x1},${yT} C${x1 + w * 0.3},${yT + 4} ${x1 + w * 0.7},${yT + 4} ${x2},${yT} `
      + `C${x2 + 3},${(yT + yF) / 2} ${x2 + 1},${yF - 5} ${x2 - 3},${yF} `
      + `C${x1 + w * 0.7},${yF + 8} ${x1 + w * 0.3},${yF + 8} ${x1 + 3},${yF} `
      + `C${x1 - 1},${yF - 5} ${x1 - 3},${(yT + yF) / 2} ${x1},${yT} Z`;
  };
  const seams = (x1, x2, yT, yF, n) => {
    const out = [];
    for (let i = 1; i < n; i++) {
      const x = x1 + ((x2 - x1) * i) / n;
      out.push(<path key={"sm" + i} d={`M${x},${yT + 3} C${x - 2},${(yT + yF) / 2} ${x - 2},${(yT + yF) / 2} ${x},${yF + 3}`} />);
    }
    return out;
  };
  return (
    <div style={{
      aspectRatio: "4 / 5", width: "100%",
      border: "1px solid var(--line)", background: "var(--paper-deep)", overflow: "hidden",
    }}>
      <svg viewBox="0 0 400 500" width="100%" height="100%" role="img"
        aria-label="Engraving of a Pilgrim ship under full sail on the open sea"
        style={{ display: "block" }}>
        {/* frame */}
        <rect x="14" y="14" width="372" height="472" fill="none" stroke="var(--ink)" strokeWidth="1.5" />
        <rect x="20" y="20" width="360" height="460" fill="none" stroke="var(--line)" strokeWidth="1" />

        {/* sun + rays */}
        <g stroke="var(--accent)" strokeWidth="1.3" fill="none" strokeLinecap="round">
          <circle cx="330" cy="76" r="18" />
          {Array.from({ length: 12 }).map((_, i) => {
            const a = (i * Math.PI) / 6;
            return <line key={i}
              x1={330 + Math.cos(a) * 23} y1={76 + Math.sin(a) * 23}
              x2={330 + Math.cos(a) * 30} y2={76 + Math.sin(a) * 30} />;
          })}
        </g>

        {/* clouds + birds */}
        <g stroke="var(--ink)" strokeWidth="1" fill="none" strokeLinecap="round" opacity="0.5">
          <path d="M50,150 q22,-9 44,0 q14,-7 28,-1" />
          <path d="M250,54 q26,-8 50,0" />
          <path d="M58,98 q7,-7 14,0 q7,-7 14,0" />
          <path d="M90,114 q6,-6 12,0 q6,-6 12,0" />
        </g>

        {/* sea (behind hull) */}
        <g stroke="var(--ink)" fill="none" strokeLinecap="round">
          {waveRows.map((y, i) => (
            <path key={i} d={wavePath(y, i % 2 ? 9 : 0)} strokeWidth={i < 3 ? 1.2 : 1} opacity={0.5 - i * 0.04} />
          ))}
        </g>

        {/* stays (behind sails) */}
        <g stroke="var(--ink)" strokeWidth="0.8" fill="none" opacity="0.8">
          <path d="M205,118 L150,160" />
          <path d="M258,164 L205,118" />
          <path d="M150,160 L62,262" />
          <path d="M205,118 L70,260" />
          <path d="M205,118 L300,250" />
          <path d="M258,164 L312,250" />
        </g>

        {/* masts, tops, bowsprit, yards */}
        <g stroke="var(--ink)" strokeLinecap="round">
          <line x1="150" y1="294" x2="150" y2="160" strokeWidth="2.4" />
          <line x1="205" y1="300" x2="205" y2="118" strokeWidth="2.6" />
          <line x1="258" y1="296" x2="258" y2="164" strokeWidth="2.2" />
          <line x1="112" y1="300" x2="58" y2="260" strokeWidth="2.2" />
          {/* fighting tops */}
          <line x1="140" y1="196" x2="160" y2="196" strokeWidth="2" />
          <line x1="193" y1="168" x2="217" y2="168" strokeWidth="2" />
          <line x1="248" y1="200" x2="268" y2="200" strokeWidth="2" />
          {/* square yards */}
          <g strokeWidth="1.6">
            <line x1="116" y1="214" x2="186" y2="214" />
            <line x1="126" y1="170" x2="176" y2="170" />
            <line x1="163" y1="210" x2="249" y2="210" />
            <line x1="176" y1="156" x2="238" y2="156" />
            <line x1="232" y1="214" x2="284" y2="214" />
            <line x1="240" y1="172" x2="276" y2="172" />
          </g>
        </g>

        {/* sails */}
        <g stroke="var(--ink)" strokeWidth="1.3" fill="var(--paper)" strokeLinejoin="round">
          <path d={sail(118, 184, 216, 262)} />
          <path d={sail(128, 172, 172, 206)} />
          <path d={sail(165, 247, 212, 266)} />
          <path d={sail(178, 236, 158, 204)} />
          {/* mizzen course + topsail */}
          <path d={sail(232, 284, 216, 256)} />
          <path d={sail(240, 276, 174, 202)} />
        </g>

        {/* sail seams + reef bands */}
        <g stroke="var(--ink)" strokeWidth="0.6" fill="none" opacity="0.5">
          {seams(118, 184, 216, 262, 5)}
          {seams(165, 247, 212, 266, 6)}
          {seams(178, 236, 158, 204, 4)}
          {seams(128, 172, 172, 206, 3)}
          {seams(232, 284, 216, 256, 4)}
          <path d="M121,240 C150,247 154,247 182,240" />
          <path d="M168,242 C200,250 214,250 245,242" />
          <path d="M235,238 C258,244 262,244 282,238" />
        </g>

        {/* shrouds + ratlines */}
        <g stroke="var(--ink)" strokeWidth="0.55" fill="none" opacity="0.8">
          {shrouds(150, 170, 150, 172, 292, 4, 4)}
          {shrouds(205, 128, 205, 234, 300, 5, 5)}
          {shrouds(258, 202, 250, 284, 296, 4, 4)}
        </g>

        {/* flags / pennants */}
        <g fill="var(--accent)" stroke="none">
          <path d="M205,114 C172,104 150,114 120,108 C150,118 172,116 205,124 Z" />
          <path d="M150,158 L150,170 L128,164 Z" />
          <path d="M258,162 L258,174 L238,168 Z" />
          <path d="M312,234 L312,252 L290,245 Z" />
          <path d="M58,260 L58,249 L73,254 Z" />
        </g>
        <line x1="312" y1="252" x2="312" y2="230" stroke="var(--ink)" strokeWidth="1.2" />

        {/* hull body (sheer crescent, bow left / stern right) */}
        <path d="M108,286 C124,282 140,288 160,292 C180,296 195,298 205,298 C225,298 250,294 276,290 C290,288 298,286 304,288 C312,300 310,322 300,336 C250,356 150,356 108,334 C100,322 100,298 108,286 Z"
          fill="var(--paper-deep)" stroke="var(--ink)" strokeWidth="2.2" strokeLinejoin="round" />
        {/* wales */}
        <path d="M110,298 C150,300 180,308 205,310 C235,308 262,302 304,300" fill="none" stroke="var(--ink)" strokeWidth="1.8" />
        <path d="M114,312 C150,314 182,322 205,324 C235,322 260,316 300,314" fill="none" stroke="var(--ink)" strokeWidth="1.8" />
        {/* gunports */}
        <g fill="var(--ink)" stroke="none">
          {[[118, 301], [142, 304], [166, 307], [190, 309], [214, 308], [238, 305], [262, 301]].map(([x, y], i) => (
            <rect key={i} x={x} y={y} width="11" height="8" rx="0.5" />
          ))}
        </g>
        {/* planking */}
        <g stroke="var(--ink)" strokeWidth="0.6" fill="none" opacity="0.4">
          <path d="M116,320 C150,322 184,332 205,334 C235,332 258,326 296,322" />
          <path d="M120,330 C152,334 184,344 205,346 C232,344 254,338 290,332" />
        </g>
        {/* sterncastle (poop) */}
        <path d="M270,292 L270,262 C270,256 273,253 279,253 L302,255 C309,255 314,259 316,266 L317,286 C317,292 313,296 306,298 Z"
          fill="var(--paper-deep)" stroke="var(--ink)" strokeWidth="1.6" strokeLinejoin="round" />
        <g fill="var(--paper)" stroke="var(--ink)" strokeWidth="0.8">
          <rect x="276" y="263" width="8" height="7" />
          <rect x="288" y="263" width="8" height="7" />
          <rect x="300" y="264" width="7" height="7" />
        </g>
        {/* forecastle */}
        <path d="M108,286 L108,274 C108,269 111,267 116,267 L140,272 L140,292 Z"
          fill="var(--paper-deep)" stroke="var(--ink)" strokeWidth="1.4" strokeLinejoin="round" />
        <g stroke="var(--ink)" strokeWidth="0.7">
          <line x1="116" y1="270" x2="116" y2="290" />
          <line x1="128" y1="270" x2="128" y2="291" />
        </g>
        {/* beakhead (projects forward, figurehead upturn) + head rails to bowsprit */}
        <path d="M106,300 L66,300 C60,300 57,296 60,292 L104,290 Z"
          fill="var(--paper-deep)" stroke="var(--ink)" strokeWidth="1.2" strokeLinejoin="round" />
        <path d="M66,300 C59,299 55,293 59,288" fill="none" stroke="var(--ink)" strokeWidth="1.3" strokeLinecap="round" />
        <path d="M104,286 C86,284 72,280 62,275" fill="none" stroke="var(--ink)" strokeWidth="0.8" />
        <path d="M105,293 C88,292 74,289 64,285" fill="none" stroke="var(--ink)" strokeWidth="0.8" />
        {/* rudder */}
        <line x1="303" y1="334" x2="308" y2="352" stroke="var(--ink)" strokeWidth="2" strokeLinecap="round" />
        {/* reflection */}
        <g stroke="var(--ink)" strokeWidth="0.8" fill="none" opacity="0.16" strokeLinecap="round">
          {[120, 160, 200, 240, 280].map((x, i) => (
            <path key={i} d={`M${x},360 q3,5 0,10 q-3,5 0,10`} />
          ))}
        </g>
      </svg>
    </div>
  );
}

/* ---------- A note from the founder ---------- */
function HomeFounderNote() {
  return (
    <section className="section" style={{ background: "var(--paper-deep)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <Reveal>
          <div className="kicker" style={{ marginBottom: 24 }}>A note from the guide</div>
        </Reveal>

        {/* Featured painting */}
        <Reveal delay={80}>
          <figure style={{ margin: 0 }}>
            <div style={{ border: "1px solid var(--ink)", background: "var(--paper)", padding: 8 }}>
              <img
                src="images/mayflower.jpg"
                alt="An oil painting of the Mayflower under sail on the open sea, carrying the Pilgrims toward a new world"
                style={{ display: "block", width: "100%", height: "auto" }}
              />
            </div>
            <figcaption className="kicker kicker--muted" style={{ marginTop: 12, textAlign: "right" }}>
              Plate I · The Mayflower, bound for a new world
            </figcaption>
          </figure>
        </Reveal>

        {/* Note + signature */}
        <Reveal delay={160}>
          <div style={{ maxWidth: 760, marginTop: 56 }}>
            <p className="serif" style={{
              fontSize: "clamp(22px, 2.4vw, 32px)",
              lineHeight: 1.32, color: "var(--ink)", fontWeight: 380, letterSpacing: "-0.012em",
            }}>
              I started Pilgrim Wright because I watched good organizations get
              talked past by the AI conversation — sold complexity they didn't
              need and couldn't keep. Our promise is simpler:
              <em style={{ color: "var(--accent-deep)" }}> we meet you where you are,
              tell you the truth, and walk the first stretch with you.</em>
            </p>
            <div style={{
              marginTop: 36, paddingTop: 24, borderTop: "1px dashed var(--ink)",
              display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap",
            }}>
              <span style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 32, color: "var(--ink)",
              }}>
                Jacob Bernard
              </span>
              <span className="kicker kicker--muted">Founder · Pilgrim Wright</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function HomeCTA({ 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.08, color: "var(--paper)" }}>
        <TopoLines count={10} opacity={1} />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 2fr) minmax(0, 1fr)", gap: 56, alignItems: "end" }}>
          <Reveal>
            <div className="kicker" style={{ color: "var(--accent-soft)", marginBottom: 24 }}>↓ The first step</div>
            <h2 className="display" style={{
              fontSize: "clamp(48px, 7vw, 104px)",
              color: "var(--paper)",
              fontVariationSettings: '"opsz" 96',
            }}>
              The journey begins<br />
              with a <em style={{ fontStyle: "italic", color: "var(--accent-soft)" }}>conversation</em>.
            </h2>
            <p className="lede" style={{ color: "rgba(244,237,224,0.78)", marginTop: 28, maxWidth: 520 }}>
              Thirty minutes, no slides, no obligation. We'll listen first,
              tell you honestly whether we're a fit, and either way you'll
              leave with one concrete next move.
            </p>
          </Reveal>

          <Reveal delay={120}>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Btn variant="accent" arrow onClick={() => navigate("contact")}>Book a consultation</Btn>
              <Btn variant="secondary" onClick={() => navigate("about")}>
                <span style={{ color: "var(--paper)" }}>Read our story</span>
              </Btn>
              <div style={{
                marginTop: 24, paddingTop: 24, borderTop: "1px solid rgba(244,237,224,0.2)",
                fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "rgba(244,237,224,0.5)",
              }}>
                hello@pilgrimwright.ai<br />
                Plymouth · Massachusetts
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

window.HomePage = HomePage;
