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

function About({ go }) {
  // Interactive campfire: drag horizontally to sway, drag up/down to grow/dim.
  const [fireDrag, setFireDrag] = React.useState({ x: 0, y: 0, dragging: false });
  const fireStartRef = React.useRef(null);
  const onFireDown = (e) => {
    e.preventDefault();
    fireStartRef.current = { x: e.clientX, y: e.clientY };
    setFireDrag({ x: 0, y: 0, dragging: true });
    if (e.currentTarget.setPointerCapture) {
      try { e.currentTarget.setPointerCapture(e.pointerId); } catch (_) { /* ignore */ }
    }
  };
  const onFireMove = (e) => {
    if (!fireStartRef.current) return;
    const dx = e.clientX - fireStartRef.current.x;
    const dy = e.clientY - fireStartRef.current.y;
    setFireDrag(s => ({ ...s, x: dx, y: dy }));
  };
  const onFireUp = () => {
    fireStartRef.current = null;
    setFireDrag({ x: 0, y: 0, dragging: false });
  };
  // horizontal drag = sway (skewX); drag up = grow, drag down = dim
  const fireSkew = Math.max(-22, Math.min(22, fireDrag.x / 4));
  const fireScale = Math.max(0.42, Math.min(1.7, 1 - fireDrag.y / 220));
  const fireOpacity = Math.max(0.35, Math.min(1, 1 - Math.max(0, fireDrag.y) / 260));

  return (
    <main>
      {/* Hero */}
      <section className="container--narrow" style={{ paddingTop: 96, paddingBottom: 56, textAlign: 'center' }}>
        <span className="eyebrow">What this is · Why it exists</span>
        <h1 className="display lg-about-hero" style={{ fontSize: 'clamp(48px, 8vw, 120px)', lineHeight: 0.98, margin: '20px 0 28px' }}>
          <span className="lg-hero-line">A signal.</span>
          <span className="lg-hero-line">A firelight.</span>
          <span
            className={"lg-hero-fire" + (fireDrag.dragging ? " lg-hero-fire--dragging" : "")}
            role="img"
            aria-label="Campfire"
            title="Drag me — sideways to dance, up for bigger, down to dim"
            onPointerDown={onFireDown}
            onPointerMove={onFireMove}
            onPointerUp={onFireUp}
            onPointerCancel={onFireUp}
          >
            {/*
             * Brand-aligned campfire: same paths as the existing `fire` Sketch
             * plate (gold wash plume, three ink-line flame strokes, ink-line
             * logs, ink-tick sparks). Flames + wash + sparks animate subtly;
             * logs are completely static. Drag transforms the flames group.
             */}
            <svg viewBox="0 0 360 200" preserveAspectRatio="xMidYMid meet"
                 style={{ display: 'block', width: '100%', height: 'auto' }}>
              {/* LOGS — completely static (uses the exact paths from the brand fire sketch) */}
              <g className="lg-fire-logs" stroke="var(--ink)" fill="none" strokeLinecap="round">
                <path d="M84 138 L 244 138" strokeWidth="1.6" />
                <path d="M108 146 L 224 124" strokeWidth="1.4" />
                <path d="M226 148 L 130 124" strokeWidth="1.2" />
                <ellipse cx="84" cy="138" rx="4" ry="3" strokeWidth="0.8" />
                <ellipse cx="244" cy="138" rx="4" ry="3" strokeWidth="0.8" />
              </g>

              {/* FLAMES + wash + sparks — drag affects this whole group */}
              <g
                className="lg-fire-flames"
                style={{
                  transformOrigin: '184px 130px',
                  transform: `skewX(${fireSkew}deg) scale(${fireScale})`,
                  opacity: fireOpacity,
                  transition: fireDrag.dragging ? 'none' : 'transform 800ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease'
                }}
              >
                {/* gold wash plume (subtly pulses) */}
                <path className="lg-flame-wash"
                  d="M168 130 C 142 104, 152 78, 176 56 C 170 72, 188 76, 184 62 C 196 76, 210 92, 198 116 C 216 104, 222 92, 216 76 C 230 96, 222 122, 184 132 Z"
                  fill="var(--gold-deep)" />
                {/* three ink flame strokes (each on its own asynchronous flicker) */}
                <path className="lg-flame lg-flame-1"
                  d="M168 130 C 142 104, 152 78, 176 56 C 170 72, 188 76, 184 62 C 196 76, 210 92, 198 116"
                  fill="none" stroke="var(--ink)" strokeWidth="1.4" strokeLinecap="round" />
                <path className="lg-flame lg-flame-2"
                  d="M184 130 C 206 116, 218 96, 210 76 C 222 92, 232 96, 222 116"
                  fill="none" stroke="var(--ink)" strokeWidth="1.1" strokeLinecap="round" />
                <path className="lg-flame lg-flame-3"
                  d="M152 130 C 142 116, 138 102, 152 90 C 148 102, 162 104, 156 114"
                  fill="none" stroke="var(--ink)" strokeWidth="1" strokeLinecap="round" opacity="0.85" />
                {/* ink-tick sparks rising (one path per spark for staggered animation) */}
                <g className="lg-fire-sparks" stroke="var(--ink)" strokeWidth="0.8" strokeLinecap="round" fill="none">
                  <path className="lg-spark lg-spark-1" d="M114 36 l 1 4" />
                  <path className="lg-spark lg-spark-2" d="M214 22 l 1 4" />
                  <path className="lg-spark lg-spark-3" d="M250 46 l 1 4" />
                  <path className="lg-spark lg-spark-4" d="M74 56 l 1 4" />
                </g>
              </g>
            </svg>
          </span>
          <span className="lg-hero-line lg-hero-line--accent" style={{ color: 'var(--gold-deep)' }}>A call back to adventure.</span>
        </h1>
        <p className="serif" style={{ fontSize: 24, fontStyle: 'italic', color: 'var(--ink-soft)', lineHeight: 1.55, maxWidth: 640, margin: '0 auto' }}>
          Lonesome Goat is a community for people who want to step away from the noise and back into adventure, solitude, and real connection.
        </p>
      </section>

      <hr className="rule rule--double" style={{ margin: '0 32px' }} />

      {/* What it is — the plain version */}
      <section className="container--narrow" style={{ paddingTop: 80, paddingBottom: 80, textAlign: 'center' }}>
        <p className="display" style={{ fontSize: 'clamp(28px, 3.6vw, 40px)', color: 'var(--ink)', lineHeight: 1.25, margin: '0 auto 28px', maxWidth: 760 }}>
          Lonesome Goat is a community built around adventure, story, solitude, and real connection.
        </p>
        <p className="serif" style={{ fontStyle: 'italic', fontSize: 20, color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 660, margin: '0 auto 36px' }}>
          For the overconnected and under-adventured. For people who still believe in long roads, quiet places, hard weather, good fires, and the kind of friendship you only get by living something together.
        </p>
        <p className="hand" style={{ fontSize: 28, color: 'var(--ink)', lineHeight: 1.4 }}>
          This is not about escaping life.<br/>It is about <em style={{ color: 'var(--gold-deep)' }}>returning to it.</em>
        </p>
      </section>

      <hr className="rule" style={{ margin: '0 32px' }} />

      {/* The why */}
      <section className="container--narrow" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="about-grid">
          <div>
            <span className="eyebrow">The why</span>
            <h2 className="display" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '14px 0 20px', lineHeight: 1 }}>
              For people who feel<br/>overconnected<br/>but under-alive.
            </h2>
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 19, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
              Lonesome Goat isn't really a merch brand. It isn't just a lifestyle brand. It's more like a signal — a mark for people who already feel what we believe is true.
            </p>
            <p className="serif" style={{ fontStyle: 'italic', fontSize: 19, color: 'var(--ink-soft)', lineHeight: 1.7 }}>
              People need more real life. More stillness. More silence. More boldness. More adventure. More time outside. More nights around fires. More stories earned the hard way. More connection that happens shoulder to shoulder, not screen to screen.
            </p>
          </div>
          <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 280 }}>
            <LogoGoat size={260} tone="gold" />
            <span className="stamp stamp--gold" style={{ position: 'absolute', top: 12, right: 10 }}>Est. MMXXV</span>
          </div>
        </div>
      </section>

      <hr className="rule" style={{ margin: '0 32px' }} />

      {/* What it can become */}
      <section className="container" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow">What it can become</span>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', margin: '14px 0 12px', lineHeight: 1.05 }}>
            A world built to move<br/>from idea into real life.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }} className="about-grid">
          {[
            { sk: "fire",      h: "The Herd",       b: "The membership community. Gatherings, trips, field weekends, city events, and people who want more adventure in their lives." },
            { sk: "mountains", h: "Lonesome Land",  b: "Remote base camps and hard-to-find places built for small crews, families, friends, and people who need to get quiet for a while." },
            { sk: "map",       h: "Field Notes",    b: "Stories, trip logs, guides, essays, maps, and reflections from the road." },
            { sk: "truck",     h: "Field Goods",    b: "Useful artifacts from the experience: hats, chore coats, knives, mugs, blankets, notebooks, bags, lighters, and gear that earns its place." }
          ].map((c, i) => (
            <div key={i} className="creed-card">
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
                <span style={{ flex: '0 0 100px' }}><Sketch kind={c.sk} height={100} annotations={false} /></span>
                <div>
                  <span className="eyebrow">№ {String(i+1).padStart(2,'0')}</span>
                  <h3 className="display" style={{ fontSize: 26, margin: '8px 0 10px', lineHeight: 1.1 }}>{c.h}</h3>
                  <p className="serif" style={{ fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.6, margin: 0 }}>{c.b}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <hr className="rule rule--double" style={{ margin: '0 32px' }} />

      {/* The phrase */}
      <section className="container--narrow" style={{ paddingTop: 96, paddingBottom: 96, textAlign: 'center' }}>
        <span className="eyebrow">The phrase that holds it together</span>
        <h2 className="hand" style={{ fontSize: 'clamp(48px, 7vw, 96px)', lineHeight: 1.05, margin: '24px 0 32px', color: 'var(--ink)', transform: 'rotate(-1.5deg)' }}>
          To be lonesome<br/>is not to be alone.
        </h2>
        <p className="serif" style={{ fontSize: 21, fontStyle: 'italic', color: 'var(--ink-soft)', lineHeight: 1.7, maxWidth: 620, margin: '0 auto' }}>
          "Lonesome" does not mean sad or isolated. It means still. Free. Self-directed. Grounded. Away from the noise. Closer to what is real.
        </p>
      </section>

      <hr className="rule rule--double" style={{ margin: '0 32px' }} />

      {/* What we believe */}
      <section className="container" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <span className="eyebrow">What we believe</span>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 5vw, 56px)', margin: '14px 0 0' }}>A short creed.</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }} className="about-grid">
          {[
            { sk: "stars",   h: "Solitude makes a person stronger.",      b: "Step away long enough to hear what is true." },
            { sk: "whiskey", h: "Adventure is better when it is earned.", b: "A little hard to get to. Worth it if you do." },
            { sk: "fire",    h: "Friendship is built shoulder to shoulder.", b: "The road is better with the right people." },
            { sk: "sunset",  h: "Stories are meant to be lived first.",   b: "Content is easy. A real story costs something." },
            { sk: "compass", h: "Goods are artifacts, not the point.",    b: "The mark matters because of what it represents." }
          ].map((c, i, arr) => {
            const isOrphan = arr.length % 2 === 1 && i === arr.length - 1;
            return (
              <div key={i} className="creed-card" style={isOrphan ? { gridColumn: '1 / -1', maxWidth: 620, margin: '0 auto' } : undefined}>
                <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20 }}>
                  <span style={{ flex: '0 0 100px' }}><Sketch kind={c.sk} height={100} annotations={false} /></span>
                  <div>
                    <span className="eyebrow">№ {String(i+1).padStart(2,'0')}</span>
                    <h3 className="display" style={{ fontSize: 26, margin: '8px 0 10px', lineHeight: 1.1 }}>{c.h}</h3>
                    <p className="serif" style={{ fontStyle: 'italic', fontSize: 17, color: 'var(--ink-soft)', lineHeight: 1.6, margin: 0 }}>{c.b}</p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      <hr className="rule" style={{ margin: '0 32px' }} />

      {/* Simplest version + photo */}
      <section className="container" style={{ paddingTop: 96, paddingBottom: 96 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="about-grid">
          <div style={{ transform: 'rotate(-2deg)' }}>
            <TapedPhoto caption="the road, near Pinto Canyon" ratio="4 / 3" />
          </div>
          <div>
            <span className="eyebrow">In one line</span>
            <h2 className="display" style={{ fontSize: 'clamp(32px, 4.4vw, 56px)', margin: '14px 0 20px', lineHeight: 1.05 }}>
              A community and<br/>adventure brand for people<br/>who want to live a little<br/>quieter, go a little farther,<br/><span style={{ color: 'var(--gold-deep)' }}>and come back with better stories.</span>
            </h2>
            <p className="hand" style={{ fontSize: 28, color: 'var(--ink-soft)', lineHeight: 1.4, marginTop: 24 }}>
              Lonesome Goat is not about<br/>escaping life. It is about<br/><em style={{ color: 'var(--ink)' }}>returning to it.</em>
            </p>
          </div>
        </div>
      </section>

      <hr className="rule rule--double" style={{ margin: '0 32px' }} />

      {/* CTA */}
      <section className="container--narrow" style={{ paddingTop: 96, paddingBottom: 120, textAlign: 'center' }}>
        <div style={{ display: 'flex', justifyContent: 'center' }}><LogoGoat size={140} tone="gold" /></div>
        <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: '32px 0 16px', transform: 'rotate(-1deg)' }}>
          Stay Lonesome.
        </h2>
        <p className="serif" style={{ fontStyle: 'italic', fontSize: 20, color: 'var(--ink-soft)', maxWidth: 480, margin: '0 auto 36px' }}>
          Read the manifesto. Sit at the Field Desk. Pick a road that asks something of you.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn" onClick={() => go("manifesto")}>Read the manifesto →</button>
          <button className="btn btn--gold" onClick={() => go("desk")}>Enter the Field Desk</button>
        </div>
      </section>
    </main>
  );
}

window.About = About;