/* global React, window */
const { LogoLong, LogoGoat, Sketch, TapedPhoto, SignOff, GoatOrnament } = window;

/*
 * Manifesto — a hero letter, not a typewriter performance.
 *
 * Structure: a single long handwritten letter on aged paper, with sketches,
 * pinned photos, marginalia, ink corrections, and a wax seal at the bottom.
 *
 * Hero moment: the page lifts in on load — feels like opening an envelope.
 *
 * Sections come in via scroll fade (fast, not character-by-character).
 */

const SECTIONS = [
  {
    id: "open",
    body: [
      "People are more connected than ever, and somehow more lost.",
      "We know exactly where we are. Maps in our pockets. Satellites overhead. Calendars full of meetings, messages, alerts, feeds, noise.",
      "We can see everything. And somehow, we see almost nothing at all."
    ],
    pull: "Something has gone missing.",
    margin: { kind: "scribble", text: "feels true.", rotate: -4, gold: true },
  },
  {
    id: "missing",
    head: "What got replaced",
    body: [
      "Adventure has been replaced by convenience.",
      "Silence has been replaced by scrolling.",
      "Friendship has been replaced by following.",
      "Stories have been replaced by content.",
      "The open road has been replaced by optimized routes."
    ],
    sketch: "compass",
    sketchCaption: "the needle still works",
    margin: { kind: "underline", w: 240, gold: true },
  },
  {
    id: "need",
    head: "What we need instead",
    body: [
      "More stillness. More silence. More dirt roads.",
      "More long drives with no hurry.",
      "More campfires that make people talk honestly.",
      "More storms rolling over the desert.",
      "More mornings where the only thing on the calendar is coffee and the horizon."
    ],
    pull: "We need more real life.",
    photo: "the kettle, before sunrise",
    margin: { kind: "arrow", text: "this one." },
  },
  {
    id: "real",
    head: "The real kind of adventure",
    body: [
      "Not the polished kind. Not the algorithm kind.",
      "The kind where the truck barely starts. The road washes out. The sky turns black. The hail comes sideways. The plan falls apart.",
      "And somehow, by the end of the day, you have a better story than the one you set out to make."
    ],
    sketch: "truck",
    sketchCaption: "the F-100 · still runs",
    margin: { kind: "scribble", text: "best story", rotate: 4 },
  },
  {
    id: "lonesome",
    head: "To be lonesome is not to be alone",
    body: [
      "It is to step away from the noise long enough to hear what is true.",
      "It is to remember who you are without the crowd telling you.",
      "It is to choose the road that still asks something of you."
    ],
    pull: "Solitude makes a person stronger.",
    margin: { kind: "circle" },
  },
  {
    id: "signal",
    head: "Lonesome Goat is a signal",
    body: [
      "Not another clothing brand. Not another lifestyle label. Not another thing to buy.",
      "A mark for people who still want to live a life with some grit in it.",
      "A reminder to get outside, take the long way, gather around the fire, tell the truth, and go find the story worth bringing home."
    ],
    sketch: "fire",
    sketchCaption: "third log on",
  },
  {
    id: "longhaul",
    head: "This is for the long haul",
    body: [
      "For West Texas evenings and first stars. For trucks covered in dust. For coffee before sunrise. For whiskey after the storm.",
      "For old roads, new friends, and the quiet confidence that comes from doing hard things together.",
      "The world does not need more noise. It needs more people willing to leave it behind for a while."
    ],
    photo: "first stars · west of Alpine",
  }
];

function MarginNote({ note }) {
  if (!note) return null;
  if (note.kind === "scribble") {
    return (
      <span className={"mf-margin mf-margin--scribble" + (note.gold ? " mf-margin--gold" : "")}
        style={{ transform: `rotate(${note.rotate || 0}deg)` }}>
        {note.text}
      </span>
    );
  }
  if (note.kind === "underline") {
    return (
      <svg className="mf-margin mf-margin--underline" width={note.w || 200} height="14" viewBox={`0 0 ${note.w || 200} 14`}>
        <path d={`M 4 8 Q ${(note.w||200)/3} 4, ${(note.w||200)/2} 7 T ${(note.w||200) - 2} 6`}
          fill="none" stroke={note.gold ? "var(--gold-deep)" : "var(--ink)"} strokeWidth="2.2" strokeLinecap="round" />
      </svg>
    );
  }
  if (note.kind === "arrow") {
    return (
      <span className="mf-margin mf-margin--arrow">
        <svg width="120" height="48" viewBox="0 0 120 48">
          <path d="M 4 36 C 24 12, 60 6, 100 18" fill="none" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" />
          <path d="M 88 8 L 104 18 L 92 28" fill="none" stroke="var(--ink)" strokeWidth="1.6" strokeLinecap="round" />
        </svg>
        <span className="hand">{note.text}</span>
      </span>
    );
  }
  if (note.kind === "circle") {
    return (
      <svg className="mf-margin mf-margin--circle" width="180" height="44" viewBox="0 0 180 44">
        <path d="M 8 22 C 12 6, 100 4, 168 8 C 178 22, 170 36, 90 38 C 16 40, 4 32, 8 22 Z"
          fill="none" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" opacity="0.7" />
      </svg>
    );
  }
  return null;
}

function Section({ section, idx }) {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setSeen(true); });
    }, { threshold: 0.15, rootMargin: "0px 0px -10% 0px" });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const flip = idx % 2 === 1;
  return (
    <section
      ref={ref}
      className={"mf-section" + (seen ? " is-seen" : "") + (flip ? " mf-section--flip" : "")}
    >
      <div className="mf-section__body">
        {section.head && <h2 className="display mf-section__head">{section.head}</h2>}
        {section.body.map((p, i) => (
          <p key={i} className="serif mf-section__p">{p}</p>
        ))}
        {section.pull && (
          <p className="hand mf-section__pull">
            {section.pull}
            <MarginNote note={section.margin} />
          </p>
        )}
      </div>
      <aside className="mf-section__aside">
        {section.sketch && (
          <div className="mf-section__sketch">
            <Sketch kind={section.sketch} height={140} />
            <span className="hand mf-caption">{section.sketchCaption}</span>
          </div>
        )}
        {section.photo && (
          <div className="mf-section__photo">
            <TapedPhoto caption={section.photo} ratio="4 / 3" />
          </div>
        )}
        {!section.sketch && !section.photo && !section.pull && section.margin && (
          <MarginNote note={section.margin} />
        )}
      </aside>
    </section>
  );
}

function Manifesto() {
  return (
    <main className="mf-room">
      {/* Envelope hero */}
      <section className="mf-hero">
        <div className="mf-hero__envelope">
          <span className="eyebrow mf-hero__eyebrow">Filed · From the Field Desk · West of Alpine</span>
          <div className="mf-hero__sender">
            <LogoGoat size={120} tone="gold" />
          </div>
          <h1 className="display mf-hero__title">
            A letter<br/>
            <span style={{ color: 'var(--gold-deep)' }}>about being lonesome.</span>
          </h1>
          <p className="serif mf-hero__sub">
            To whoever is reading this — most of what's wrong with how we live<br/>
            can be fixed by a long drive, a quiet night, and the right kind of fire.
          </p>
          <div className="mf-hero__divider">
            <span/>
            <GoatOrnament size={20} opacity={0.5} />
            <span/>
          </div>
          <span className="hand" style={{ fontSize: 24, color: 'var(--ink-soft)' }}>↓ keep reading</span>
        </div>
      </section>

      {/* The letter — long handwritten body with sketches and pinned photos */}
      <article className="mf-letter">
        <header className="mf-letter__head">
          <p className="hand" style={{ fontSize: 30, lineHeight: 1.3, margin: 0 }}>
            From the desk of Lonesome Goat —<br/>
            <span style={{ color: 'var(--ink-soft)' }}>written by lamplight, somewhere west of Alpine.</span>
          </p>
        </header>

        {SECTIONS.map((s, i) => <Section key={s.id} section={s} idx={i} />)}

        {/* Closing */}
        <section className="mf-section mf-section--close is-seen">
          <div className="mf-section__body" style={{ textAlign: 'center' }}>
            <p className="serif mf-section__p" style={{ textAlign: 'center', fontSize: 22 }}>
              Lonesome Goat is not about escaping life.<br/>
              It is about returning to it.
            </p>
            <h2 className="display" style={{ fontSize: 'clamp(64px, 11vw, 160px)', lineHeight: 0.95, margin: '40px 0 16px', transform: 'rotate(-2deg)', color: 'var(--ink)' }}>
              Stay Lonesome.
            </h2>
            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
              <SignOff size={56} />
              <span className="eyebrow">— The Lonesome Goat</span>
            </div>
          </div>
          <aside className="mf-section__aside" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div className="wax-seal">
              <LogoGoat size={140} tone="gold" />
            </div>
          </aside>
        </section>
      </article>
    </main>
  );
}

window.Manifesto = Manifesto;
