/* Pilgrim Wright — Home page */

function HomePage({ navigate }) {
  return (
    <div className="page">
      <HomeHero navigate={navigate} />
      <HomeIntro />
      <HomePillars navigate={navigate} />
      <HomeWhoWeServe navigate={navigate} />
      <HomeApproach />
      <HomeProof />
      <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.",
    },
    {
      tag: "Churches & Faith",
      title: "Communities of practice.",
      body: "Tools that respect the work of being present with people.",
    },
    {
      tag: "Small business",
      title: "Owners who wear five hats.",
      body: "Reclaim the evenings. Keep the craft. Skip the hype cycle.",
    },
  ];
  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)",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <span className="tag">{a.tag}</span>
                  <span className="kicker kicker--muted">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 kicker--accent" style={{ marginTop: "auto", display: "inline-flex", gap: 6 }}>
                  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>
  );
}

/* ---------- 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;
