/* =========================================================
   home.jsx — the trailhead (homepage).
   Editorial hero + a preview of the seven waypoints.
   ========================================================= */

function Marker() {
  const J = window.JOURNEY;
  return (
    <div className="marker">
      <div className="marker__row"><span className="marker__k">Companion</span><span className="marker__v">Facilitator’s field guide</span></div>
      <div className="marker__row"><span className="marker__k">Method</span><span className="marker__v">Demand Discovery</span></div>
      <div className="marker__row"><span className="marker__k">Subject</span><span className="marker__v">{J.subject}</span></div>
      <div className="marker__rule" />
      <div className="marker__sig">Dark Horse Works</div>
    </div>
  );
}

function TrailMap() {
  const s = window.useJourney();
  const { WPS } = s;
  return (
    <section className="trailmap">
      <SectionHead>The route · seven waypoints</SectionHead>
      <div className="trailmap__list">
        {WPS.map((w, i) => {
          const done = s.stageComplete(w.id);
          const visited = i <= s.maxReached;
          return (
            <button
              key={w.id}
              className={`tm-row ${done ? "is-done" : ""}`}
              onClick={() => s.goTo(i)}
            >
              <span className="tm-row__num">{w.num}</span>
              <span className="tm-row__node" />
              <span className="tm-row__body">
                <span className="tm-row__title">{w.title}</span>
                <span className="tm-row__q">{w.questions[0]}</span>
              </span>
              <span className="tm-row__state">
                {done ? "walked" : visited ? "open" : "explore"}
              </span>
            </button>
          );
        })}
      </div>
    </section>
  );
}

function Home() {
  const J = window.JOURNEY;
  const s = window.useJourney();
  const started = s.totalMarks > 0 || s.maxReached > 0;
  const resumeIdx = Math.min(s.maxReached, J.waypoints.length - 1);

  return (
    <main className="home">
      <div className="home__inner">
        <section className="hero">
          <div className="hero__main">
            <div className="hero__eyebrow">
              <span>A facilitated sense-making walk</span>
              <span className="hero__eyebrow-dash" />
              <span>{J.session}</span>
            </div>
            <h1 className="hero__title">
              From plausible output to <span className="serif-em">defensible</span> evidence.
            </h1>
            <p className="hero__sub">
              This is not a deck to watch. It is a trail to walk. Seven waypoints
              carry a group from the raw things we heard about {J.subject}, through how we frame and
              test them, to the single question that unlocks the rest. You read evidence,
              sort it, mark what matters, and decide deliberately. Every mark you leave
              stays visible behind you.
            </p>
            <div className="hero__cta">
              <button className="btn btn--primary" onClick={() => s.goTo(started ? resumeIdx : 0)}>
                {started ? "Resume the walk" : "Begin the walk"}
                <Icon name="arrow" size={18} style={{ marginLeft: 2 }} />
                <span className="arrow" style={{ display: "none" }} />
              </button>
              {started && (
                <button className="btn-text" onClick={() => s.setLedgerOpen(true)}>
                  <Icon name="ledger" size={15} />
                  <span className="u">Open the ledger · {s.totalMarks} marks</span>
                </button>
              )}
            </div>
          </div>
          <Marker />
        </section>

        <div className="home__spine-quote">
          <div className="pull">{J.spine}</div>
        </div>

        <TrailMap />

        <footer className="home__foot">
          <span>{J.facilitator}</span>
          <span className="home__foot-sep" />
          <span>The walk autosaves. Leave and return whenever.</span>
          {started && (
            <button className="btn-text home__reset" onClick={() => {
              if (window.confirm("Clear all marks and start the walk over?")) s.reset();
            }}>
              <Icon name="rotate" size={14} /><span className="u">Start over</span>
            </button>
          )}
        </footer>
      </div>
    </main>
  );
}

Object.assign(window, { Home, TrailMap, Marker });