/* Pilgrim Wright — Hero Explorations
   Four distinct hero treatments rendered into a design canvas. */

var { useState, useEffect, useRef, useMemo } = React;

const HERO_W = 1280;
const HERO_H = 820;

/* ---------- 01 · Editorial Split ---------- */
function HeroEditorialSplit() {
  return (
    <div className="hero-shell">
      <HeroNav />
      <div className="hero-body" style={{
        display: "grid",
        gridTemplateColumns: "minmax(0, 1.6fr) minmax(0, 1fr)",
        gap: 56,
        padding: "56px 64px 64px",
        alignItems: "start",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
            <CompassMark style={{ color: "var(--accent)" }} />
            <span className="kicker kicker--accent">An AI consultancy for the cautiously curious</span>
          </div>
          <h1 className="display" style={{
            fontSize: 116,
            fontVariationSettings: '"opsz" 96',
            lineHeight: 0.92,
            letterSpacing: "-0.028em",
            margin: 0,
          }}>
            Chart your path<br />
            to the AI <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>frontier</em>.
          </h1>
          <p className="lede" style={{ marginTop: 36, maxWidth: 540 }}>
            We help non-profits, faith communities, and small businesses
            adopt AI with clarity, conscience, and a clear first step.
          </p>
          <div style={{ marginTop: 44, display: "flex", gap: 14 }}>
            <span className="btn btn--primary">Start your journey</span>
            <span className="btn btn--ghost">See how we work →</span>
          </div>
        </div>
        <div>
          <div style={{ border: "1px solid var(--line)", padding: 24, background: "rgba(255,255,255,0.32)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
              <span className="kicker">From the field</span>
              <span className="kicker kicker--muted">N 41°57′</span>
            </div>
            <div className="serif" style={{ fontSize: 19, lineHeight: 1.35, color: "var(--ink)" }}>
              <span style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>"</span>
              We didn't want a chatbot — we wanted to give our staff six
              hours back. They did that in nine days.
              <span style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>"</span>
            </div>
            <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px dashed var(--line)", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <div>
                <div className="serif" style={{ fontSize: 13, color: "var(--ink)" }}>Margaret Hollis</div>
                <div className="kicker kicker--muted" style={{ marginTop: 4, fontSize: 9 }}>Exec. Dir.</div>
              </div>
              <CompassRose size={42} />
            </div>
          </div>
          <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", border: "1px solid var(--line)" }}>
            {[["27", "engagements"], ["94%", "renewed"], ["6 hrs", "med. saved"]].map(([n, l], i) => (
              <div key={i} style={{ padding: "10px 8px", borderRight: i < 2 ? "1px solid var(--line)" : "none", textAlign: "center" }}>
                <div className="serif" style={{ fontSize: 18, color: "var(--ink)" }}>{n}</div>
                <div className="kicker kicker--muted" style={{ fontSize: 8, marginTop: 4 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <HeroFooter label="Approach A · Editorial split" />
    </div>
  );
}

/* ---------- 02 · Typography-led ---------- */
function HeroTypographyLed() {
  return (
    <div className="hero-shell">
      <HeroNav />
      <div className="hero-body" style={{
        padding: "72px 64px 56px",
        position: "relative",
      }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 40 }}>
          <div className="kicker">Vol. I · An AI consultancy</div>
          <div className="kicker kicker--muted">Plymouth, MA · 2026</div>
        </div>

        <h1 className="display" style={{
          fontSize: 188,
          fontVariationSettings: '"opsz" 120',
          lineHeight: 0.9,
          letterSpacing: "-0.034em",
          margin: 0,
          textAlign: "left",
        }}>
          Chart<br />
          your <em style={{ fontStyle: "italic", color: "var(--accent-deep)", fontVariationSettings: '"opsz" 120' }}>path.</em>
        </h1>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 56,
          marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--ink)",
        }}>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>§ Premise</div>
            <p className="serif" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--ink)" }}>
              Every organization is stepping onto unfamiliar ground.
              Our work is to be the kind of guide we'd want for ourselves.
            </p>
          </div>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>§ For</div>
            <p className="serif" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--ink)" }}>
              Non-profits. Churches and faith communities.
              Small and medium businesses.
            </p>
          </div>
          <div>
            <div className="kicker" style={{ marginBottom: 12 }}>§ Begin</div>
            <p className="serif" style={{ fontSize: 18, lineHeight: 1.4, color: "var(--ink)" }}>
              Thirty minutes. No slides. No obligation. <br />
              <span style={{ color: "var(--accent-deep)", fontStyle: "italic" }}>→ Book a consultation</span>
            </p>
          </div>
        </div>
      </div>
      <HeroFooter label="Approach B · Typography-led" />
    </div>
  );
}

/* ---------- 03 · Full-bleed image with overlay ---------- */
function HeroFullBleed() {
  return (
    <div className="hero-shell" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <HeroNav inverted />
      <div className="hero-body" style={{
        position: "relative",
        padding: 0,
        minHeight: 660,
        background: "var(--ink-soft)",
      }}>
        {/* Image placeholder — landscape */}
        <div style={{
          position: "absolute", inset: 0,
          background:
            "linear-gradient(180deg, rgba(26, 37, 64, 0.1) 0%, rgba(26, 37, 64, 0.9) 100%), " +
            "repeating-linear-gradient(135deg, rgba(244, 237, 224, 0.08) 0 1px, transparent 1px 14px)",
        }} />
        {/* Topo lines as horizon */}
        <div style={{ position: "absolute", inset: "auto 0 25% 0", height: 220, color: "rgba(244,237,224,0.2)" }}>
          <TopoLines count={9} opacity={1} />
        </div>
        {/* Corner ticks */}
        <div style={{ position: "absolute", top: 32, left: 64, color: "rgba(244,237,224,0.5)" }} className="kicker">
          Photograph № 014 · Plymouth Coast at first light
        </div>
        <div style={{ position: "absolute", top: 32, right: 64, color: "rgba(244,237,224,0.5)" }} className="kicker">
          [ Replace with original photograph ]
        </div>

        {/* Content overlay bottom-left */}
        <div style={{ position: "absolute", left: 64, right: 64, bottom: 56 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 32, color: "rgba(244,237,224,0.85)" }}>
            <span style={{ color: "var(--accent-soft)" }}><CompassMark /></span>
            <span className="kicker" style={{ color: "var(--accent-soft)" }}>An AI consultancy for the cautiously curious</span>
          </div>
          <h1 className="display" style={{
            color: "var(--paper)",
            fontSize: 132,
            fontVariationSettings: '"opsz" 96',
            lineHeight: 0.92,
            letterSpacing: "-0.028em",
            margin: 0,
            maxWidth: 1000,
          }}>
            Chart your path<br />
            to the AI <em style={{ fontStyle: "italic", color: "var(--accent-soft)" }}>frontier</em>.
          </h1>
          <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "end" }}>
            <p className="lede" style={{ color: "rgba(244,237,224,0.85)", maxWidth: 480 }}>
              We help non-profits, faith communities, and small businesses
              adopt AI with clarity, conscience, and a clear first step.
            </p>
            <div style={{ display: "flex", gap: 14 }}>
              <span className="btn btn--accent">Start your journey</span>
              <span className="btn" style={{ border: "1px solid var(--paper)", color: "var(--paper)" }}>See how we work →</span>
            </div>
          </div>
        </div>
      </div>
      <HeroFooter label="Approach C · Full-bleed photograph" inverted />
    </div>
  );
}

/* ---------- 04 · Journal cover ---------- */
function HeroJournalCover() {
  const date = "May 16, 2026";
  return (
    <div className="hero-shell" style={{ background: "var(--paper-deep)" }}>
      <div style={{
        padding: "20px 64px",
        borderBottom: "1px solid var(--ink)",
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 22, color: "var(--ink)", letterSpacing: "-0.01em",
          }}>The Pilgrim Wright Field Guide</span>
        </div>
        <div className="kicker kicker--muted">Vol. I, No. 01 · Spring 2026</div>
      </div>

      <div style={{ padding: "20px 64px", borderBottom: "1px solid var(--ink)", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-muted)" }}>
        <div>Issue · {date}</div>
        <div>Plymouth · MA</div>
        <div>Bearing · NNE</div>
        <div style={{ textAlign: "right" }}>pilgrimwright.ai</div>
      </div>

      <div className="hero-body" style={{ padding: "64px 64px 40px", display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr)", gap: 56, alignItems: "start" }}>
        <div>
          <div style={{
            fontFamily: "var(--font-serif)", fontStyle: "italic",
            fontSize: 28, color: "var(--accent-deep)", lineHeight: 1,
            marginBottom: 24,
          }}>
            № 01 — On Beginning
          </div>

          <h1 className="display" style={{
            fontSize: 124,
            fontVariationSettings: '"opsz" 96',
            lineHeight: 0.95,
            letterSpacing: "-0.028em",
            margin: 0,
            color: "var(--ink)",
          }}>
            Chart your<br />
            <em style={{ fontStyle: "italic", color: "var(--accent-deep)" }}>path.</em>
          </h1>

          <div style={{ marginTop: 40, paddingTop: 24, borderTop: "1px dashed var(--ink)", maxWidth: 580 }}>
            <p className="serif" style={{ fontSize: 20, lineHeight: 1.5, color: "var(--ink-soft)", letterSpacing: "-0.005em" }}>
              <span style={{
                float: "left", fontFamily: "var(--font-serif)", fontSize: 84,
                lineHeight: 0.85, paddingRight: 12, paddingTop: 4,
                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>

          <div style={{ marginTop: 40, display: "flex", gap: 14 }}>
            <span className="btn btn--primary">Begin the journey →</span>
            <span className="btn btn--ghost">Read the field guide</span>
          </div>
        </div>

        {/* Right column with table of contents */}
        <aside>
          <CompassRose size={180} accent />
          <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--ink)" }}>
            <div className="kicker" style={{ marginBottom: 18 }}>In this issue</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["I", "Services", "p. 14"],
                ["II", "Who we serve", "p. 22"],
                ["III", "Our values", "p. 31"],
                ["IV", "Begin a conversation", "p. 40"],
              ].map(([n, t, p], i) => (
                <li key={i} style={{ display: "grid", gridTemplateColumns: "28px 1fr auto", gap: 12, alignItems: "baseline", borderBottom: "1px dotted var(--line)", paddingBottom: 10 }}>
                  <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "var(--accent)", fontSize: 16 }}>{n}</span>
                  <span className="serif" style={{ fontSize: 17, color: "var(--ink)" }}>{t}</span>
                  <span className="kicker kicker--muted" style={{ fontSize: 10 }}>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        </aside>
      </div>
      <HeroFooter label="Approach D · Journal cover" tone="paper" />
    </div>
  );
}

/* ---------- Shared shell parts ---------- */
function HeroNav({ inverted }) {
  const c = inverted ? "rgba(244,237,224,0.95)" : "var(--ink)";
  return (
    <div style={{
      padding: "20px 64px",
      borderBottom: `1px solid ${inverted ? "rgba(244,237,224,0.2)" : "var(--line)"}`,
      display: "flex", justifyContent: "space-between", alignItems: "center",
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, color: c }}>
        <div style={{
          width: 26, height: 26, border: `1px solid ${c}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 15,
          position: "relative",
        }}>
          P
        </div>
        <span style={{ fontFamily: "var(--font-serif)", fontSize: 17, color: c }}>Pilgrim Wright</span>
      </div>
      <div style={{ display: "flex", gap: 28, fontSize: 13.5, color: c }}>
        <span>Services</span>
        <span>Who We Serve</span>
        <span>About</span>
        <span>Contact</span>
      </div>
      <span className="btn" style={{
        padding: "10px 16px",
        border: `1px solid ${c}`,
        color: c,
        fontSize: 12.5,
      }}>Book a consultation →</span>
    </div>
  );
}

function HeroFooter({ label, inverted, tone }) {
  const bg = inverted ? "rgba(255,255,255,0.06)" : tone === "paper" ? "transparent" : "transparent";
  const c = inverted ? "rgba(244,237,224,0.55)" : "var(--text-muted)";
  return (
    <div style={{
      padding: "16px 64px",
      borderTop: `1px solid ${inverted ? "rgba(244,237,224,0.2)" : "var(--line)"}`,
      background: bg,
      display: "flex", justifyContent: "space-between", alignItems: "center",
      fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase",
      color: c, marginTop: "auto",
    }}>
      <span>{label}</span>
      <span>↓ Scroll · The path begins here</span>
    </div>
  );
}

/* ---------- Notes panel ---------- */
function HeroNote({ title, pros, cons, when }) {
  return (
    <div style={{
      width: 320,
      padding: 24,
      border: "1px solid var(--line)",
      background: "rgba(255,255,255,0.45)",
      display: "flex", flexDirection: "column", gap: 14,
      fontFamily: "var(--font-sans)",
    }}>
      <div className="kicker kicker--accent">{title}</div>
      <div>
        <div className="kicker kicker--muted" style={{ marginBottom: 8 }}>Works for</div>
        <ul style={{ margin: 0, paddingLeft: 16, fontSize: 13.5, lineHeight: 1.5, color: "var(--ink-soft)" }}>
          {pros.map((p, i) => <li key={i}>{p}</li>)}
        </ul>
      </div>
      <div>
        <div className="kicker kicker--muted" style={{ marginBottom: 8 }}>Watch out</div>
        <ul style={{ margin: 0, paddingLeft: 16, fontSize: 13.5, lineHeight: 1.5, color: "var(--text-muted)" }}>
          {cons.map((p, i) => <li key={i}>{p}</li>)}
        </ul>
      </div>
      <div style={{ paddingTop: 12, borderTop: "1px dashed var(--line)", fontSize: 13, fontStyle: "italic", color: "var(--ink)" }}>
        Use when — {when}
      </div>
    </div>
  );
}

/* ---------- Mount ---------- */
function HeroCanvas() {
  return (
    <DesignCanvas>
      <DCSection id="heroes"
        title="Hero — Four directions"
        subtitle="One headline, four ways to land it. Drag artboards to reorder; click to focus.">
        <DCArtboard id="A" label="A · Editorial split" width={HERO_W} height={HERO_H}>
          <HeroEditorialSplit />
        </DCArtboard>
        <DCArtboard id="B" label="B · Typography-led" width={HERO_W} height={HERO_H}>
          <HeroTypographyLed />
        </DCArtboard>
        <DCArtboard id="C" label="C · Full-bleed photograph" width={HERO_W} height={HERO_H}>
          <HeroFullBleed />
        </DCArtboard>
        <DCArtboard id="D" label="D · Journal cover" width={HERO_W} height={HERO_H}>
          <HeroJournalCover />
        </DCArtboard>
      </DCSection>

      <DCSection id="notes" title="Designer's notes"
        subtitle="Trade-offs to weigh — drag any of these to delete or reorder.">
        <DCArtboard id="note-a" label="A · Editorial split" width={360} height={500}>
          <HeroNote
            title="A · Editorial split"
            pros={["Confident but warm", "Quote earns credibility immediately", "Stats land without feeling slick"]}
            cons={["Right-rail is busy — risk of pulling eye from headline", "Needs a real testimonial"]}
            when="You have one strong quote and want it doing work above the fold."
          />
        </DCArtboard>
        <DCArtboard id="note-b" label="B · Typography-led" width={360} height={500}>
          <HeroNote
            title="B · Typography-led"
            pros={["Bold, unmistakable", "Photo-free — fast to ship", "Reads as a confident voice"]}
            cons={["Lives or dies on the headline", "Less for skimmers", "Demands restraint elsewhere"]}
            when="You believe the words and want the type to carry them."
          />
        </DCArtboard>
        <DCArtboard id="note-c" label="C · Full-bleed photograph" width={360} height={500}>
          <HeroNote
            title="C · Full-bleed photograph"
            pros={["Atmospheric, evocative", "Plymouth-rooted if photo is right", "Dark mode adds gravitas"]}
            cons={["Requires a great original photograph", "Stock imagery will sink it", "Harder to keep type-led"]}
            when="You can commission a New England coast photograph."
          />
        </DCArtboard>
        <DCArtboard id="note-d" label="D · Journal cover" width={360} height={500}>
          <HeroNote
            title="D · Journal cover"
            pros={["Most distinctive — earns the 'literary' descriptor", "Built-in table of contents", "Strong content brand"]}
            cons={["Easy to over-design", "TOC needs maintenance", "Reads as 'publication' before 'consultancy'"]}
            when="The brand sustains a real, ongoing field guide."
          />
        </DCArtboard>
      </DCSection>
    </DesignCanvas>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HeroCanvas />);