// How We Started — title left, intro right, then large hero image, then 2-up image grid.
// Reuses homepage system: italic display headline, mono eyebrows, sketch underlines.

const HistoryPage = () => {
  return (
    <main style={{ background: "var(--paper)", paddingTop: 24, paddingBottom: 80 }}>
      {/* Header */}
      <section className="container r-page-head" style={{ paddingTop: 80, paddingBottom: 80 }}>
        <div className="mono" style={{ color: "var(--muted)", marginBottom: 24 }}>
          <span style={{ color: "var(--blue)" }}>◆</span>&nbsp;&nbsp;02 / Origin
        </div>
        <div className="r-grid-1-1" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "end" }}>
          <h1 className="display r-h2-massive" style={{
            fontSize: "clamp(72px, 10vw, 156px)",
            margin: 0,
            lineHeight: 0.88,
            letterSpacing: "-0.035em"
          }}>
            {copyText("history.title_line1_pre")} <span style={{ fontStyle: "italic", fontWeight: 500 }}>{copyText("history.title_line1_em")}</span><br />
            {copyText("history.title_line2")}
          </h1>
          <div>
            <div className="mono" style={{ color: "var(--blue)", marginBottom: 14 }}>↳ {copyText("history.kicker")}</div>
            <p style={{ fontSize: 19, lineHeight: 1.55, margin: "0 0 16px 0", maxWidth: 560 }}>
              {copyText("history.para1_pre")}
              <span style={{ position: "relative", display: "inline-block" }}>
                {copyText("history.para1_accent")}
                <SketchUnderline color="var(--blue)" />
              </span>.
            </p>
            <p style={{ fontSize: 19, lineHeight: 1.55, margin: 0, color: "var(--ink)", maxWidth: 560 }}>
              {copyText("history.para2")}
            </p>
          </div>
        </div>
      </section>

      <div className="container"><div className="hairline" /></div>

      {/* Hero image */}
      <section className="container" style={{ paddingTop: 64, paddingBottom: 64 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24 }}>
          <span className="mono" style={{ color: "var(--blue)" }}>Fig. 01 — Activision booth, E3</span>
          <span className="mono" style={{ color: "var(--muted)" }}>10 yrs · SVP Marketing → Founded Ignited</span>
        </div>
        <div style={{
          position: "relative",
          aspectRatio: "16/9",
          background: "var(--ink)",
          overflow: "hidden",
          borderRadius: 4
        }}>
          <img
            src="assets/history/activision-e3.png"
            alt="Activision booth on the E3 trade show floor"
            style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
          />
        </div>
      </section>

      {/* Timeline */}
      <section className="container" style={{ paddingTop: 24, paddingBottom: 96 }}>
        <div className="hairline" style={{ marginBottom: 48 }} />
        <div className="mono" style={{ color: "var(--blue)", marginBottom: 32 }}>↳ Selected milestones</div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }} className="r-grid-stats">
          {[
          { year: copyText("history.milestone1_year"), note: copyText("history.milestone1_note") },
          { year: copyText("history.milestone2_year"), note: copyText("history.milestone2_note") },
          { year: copyText("history.milestone3_year"), note: copyText("history.milestone3_note") },
          { year: copyText("history.milestone4_year"), note: copyText("history.milestone4_note") }].
          map((m, i, arr) =>
          <div key={m.year} style={{
            padding: "32px 28px",
            borderRight: i < arr.length - 1 ? "1px solid var(--rule)" : "none"
          }}>
              <div className="display r-stat-year" style={{ fontSize: 56, lineHeight: 1, fontWeight: 600, letterSpacing: "-0.02em", color: "var(--ink)" }}>
                {m.year}
              </div>
              <div style={{ marginTop: 14, fontSize: 14, lineHeight: 1.5, color: "var(--muted)", maxWidth: 220 }}>
                {m.note}
              </div>
            </div>
          )}
        </div>
      </section>
    </main>);

};

// Lightweight sketch underline (matches homepage)
const SketchUnderline = ({ color = "var(--blue)" }) =>
<svg
  viewBox="0 0 200 10"
  preserveAspectRatio="none"
  aria-hidden="true"
  style={{
    position: "absolute",
    left: 0, right: 0, bottom: -6,
    width: "100%", height: 8,
    pointerEvents: "none"
  }}>
  
    <path
    d="M2 6 C 30 2, 60 8, 100 5 S 170 2, 198 6"
    stroke={color}
    strokeWidth="2.4"
    strokeLinecap="round"
    fill="none" />
  
  </svg>;


window.HistoryPage = HistoryPage;