// ecamp.jsx — Part 3: ECAMP Edmonton City as Museum Project

const a = (file) => "assets/" + file;

const THEME_COLORS = {
  "Indigenous Domesticity": { bg: "#4a7a5c", text: "#fff" },
  "Labour & Organizing":    { bg: "#3d3228", text: "#f4eddd" },
  "Sport & Gender":         { bg: "#a84d2e", text: "#fff" },
  "Carceral History":       { bg: "#2c3347", text: "#f4eddd" },
  "Gender & Television":    { bg: "#7a3b2e", text: "#fff" },
  "Migration & Memory":     { bg: "#517fa3", text: "#fff" },
  "Women in Academia":      { bg: "#3D6184", text: "#fff" },
  "Nursing & Immigration":  { bg: "#5c8a7a", text: "#fff" },
  "Disability & Performance":{ bg: "#8B4513", text: "#fff" },
  "Place & Memory":         { bg: "#7a6a52", text: "#fff" },
  "Military Leadership":    { bg: "#2d3a2d", text: "#f4eddd" },
  "Technology & Labour":    { bg: "#395a7a", text: "#fff" },
  "Aviation & Gender":      { bg: "#1a4a6b", text: "#fff" },
  "Engineering & Immigration":{ bg: "#5c462b", text: "#fff" },
  "Retail & Immigration":   { bg: "#8b6914", text: "#fff" },
  "Indigenous Resistance":  { bg: "#3d5c2e", text: "#fff" },
  "Chinese Heritage":       { bg: "#8B2020", text: "#fff" },
};

const LABOUR_STORIES = [
  { title: "Making Home: Homemakers' Clubs in Life on Reserve", author: "", date: "Jan 14", theme: "Indigenous Domesticity", url: "https://citymuseumedmonton.ca/2025/01/14/making-home-the-role-of-homemakers-clubs-in-life-on-reserve/", img: a("making-home.png") },
  { title: "The Company and the Combination: Collective Bargaining at the River's Edge", author: "", date: "Jan 28", theme: "Labour & Organizing", url: "https://citymuseumedmonton.ca/2025/01/28/the-company-and-the-combination-collective-bargaining-at-the-rivers-edge/", img: a("the-company-and-the-combination.png") },
  { title: "Women Wanted: To Work and to Win — The Grads Take Flight", author: "", date: "Feb 11", theme: "Sport & Gender", url: "https://citymuseumedmonton.ca/2025/02/11/women-wanted-to-work-and-win-the-grads-take-flight/", img: a("the-grads-take-flight.png") },
  { title: "Hard Times in the Alberta Penitentiary, 1906–1920", author: "", date: "Feb 25", theme: "Carceral History", url: "https://citymuseumedmonton.ca/2025/02/25/hard-times-in-the-alberta-penitentiary-1906-1920/", img: a("hard-times.png") },
  { title: "Laura Lindsay, First Lady of Daytime TV in Alberta (1955–68)", author: "Katherine Koller", date: "Mar 11", theme: "Gender & Television", url: "https://citymuseumedmonton.ca/2025/03/11/laura-lindsay-first-lady-of-daytime-tv-in-alberta-from-1955-68/", img: a("laura-lindsay.png") },
  { title: "Station of Broken Promises", author: "", date: "Mar 25", theme: "Migration & Memory", url: "https://citymuseumedmonton.ca/2025/03/25/station-of-broken-promises/", img: a("station-of-broken-promises.png") },
  { title: "More Than a Prize Scholar or Bookworm: Dr. Geneva Misener", author: "Pamela Young", date: "May 20", theme: "Women in Academia", url: "https://citymuseumedmonton.ca/2025/05/20/more-than-a-prize-scholar-or-bookworm-the-leadership-and-legacy-of-dr-geneva-misener/", img: a("more-than-a-prize-scholar.png") },
  { title: "She Can Move Mountains: Tessie Oliva's Impact on Nursing in Edmonton", author: "Giselle General", date: "Jun 03", theme: "Nursing & Immigration", url: "https://citymuseumedmonton.ca/2025/06/03/she-can-move-mountains-tessie-olivas-impact-on-the-nursing-sector-in-edmonton/", img: a("she-can-move-mountains.png") },
  { title: "Hot Wheelz: Raising a Middle Finger and Building World-Class Accessible Drag", author: "Kels Valenzuela Delamarter", date: "Jun 17", theme: "Disability & Performance", url: "https://citymuseumedmonton.ca/2025/06/17/hot-wheelz-raising-a-middle-finger-and-building-world-class-accessible-drag/", img: a("hot-wheelz.png") },
  { title: "Happyland", author: "", date: "Jul 02", theme: "Place & Memory", url: "https://citymuseumedmonton.ca/2025/07/02/happyland/", img: a("happyland.png") },
  { title: "James Big Jim Stone, The People's Commander", author: "Tiffany Chan", date: "Jul 15", theme: "Military Leadership", url: "https://citymuseumedmonton.ca/2025/07/15/james-big-jim-stone-the-peoples-commander/", img: a("big-jim-stone.png") },
  { title: "Alberta's Government, the Mainframe Computer, and Women's Work", author: "Cathy Roy", date: "Jul 29", theme: "Technology & Labour", url: "https://citymuseumedmonton.ca/2025/07/29/albertas-government-the-mainframe-computer-and-womens-work/", img: a("the-mainframe-computer.png") },
  { title: "Queen of the Link: Margaret Littlewood", author: "Bruce Cinnamon", date: "Aug 12", theme: "Aviation & Gender", url: "https://citymuseumedmonton.ca/2025/08/12/queen-of-the-link-margaret-littlewood/", img: a("queen-of-the-link.png") },
  { title: "Bridging Alberta: Dilip Dasmohapatra's YEG Origin Story", author: "Soni Dasmohapatra", date: "Aug 27", theme: "Engineering & Immigration", url: "https://citymuseumedmonton.ca/2025/08/27/bridging-alberta-dilip-dasmohapatras-yeg-origin-story/", img: a("bridging-alberta.png") },
  { title: "My Grandma Going Out into the World: Working at Woodward's", author: "Harma-Mae Smit", date: "Sep 09", theme: "Retail & Immigration", url: "https://citymuseumedmonton.ca/2025/09/09/my-grandma-going-out-into-the-world-working-at-woodwards/", img: a("working-at-woodwards.png") },
  { title: "More Than Half a Day: Child Labour at the St. Albert Youville Indian Residential School", author: "Crystal Gail Fraser", date: "Sep 30", theme: "Indigenous Resistance", url: "https://citymuseumedmonton.ca/2025/09/30/more-than-half-a-day-child-labour-at-the-st-albert-youville-indian-residential-school/", img: a("more-than-half-day.png") },
  { title: "Chinese Hand Laundries: A History of the First Chinese Entrepreneurs in Edmonton", author: "", date: "Dec 03", theme: "Chinese Heritage", url: "https://citymuseumedmonton.ca/2025/12/03/chinese-hand-laundries-a-history-of-the-first-chinese-entrepreneurs-in-edmonton/", img: a("chinese-hand-laundries.png") },
];

function EcampSection() {
  const [hovered, setHovered] = React.useState(null);

  return (
    <section className="section" id="ecamp">
      <div className="section-hd">
        <div className="num">Part 04<span>ECAMP</span></div>
        <div>
          <h2>Edmonton City <span style={{fontStyle:'italic'}}>as Museum</span> Project.</h2>
          <p className="lede" style={{marginTop: 24}}>
            In 2025, ECAMP centred its storytelling on labour as heritage — and had its busiest summer to date.
          </p>
        </div>
      </div>

      {/* Pull quote */}
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', marginBottom: 80}}
           className="ecamp-pull">
        <div>
          <span className="eyebrow">Heritage of Work</span>
          <p className="pull" style={{marginTop: 16}}>
            From drag performance to mainframe computing, from nursing advocacy to department store retail
            — work as a site of <span style={{color: 'var(--brick)', fontStyle: 'italic'}}>resistance, creativity, and belonging</span>.
          </p>
        </div>
        <figure style={{margin: 0, display: 'flex', flexDirection: 'column', gap: 10}}>
          <div style={{overflow: 'hidden', borderRadius: 4}}>
            <img
              src="assets/ecamp-clock-in-elsa-and-shima.jpg"
              alt="Shima and Elsa Robinson during the recording of their episode for the Clock-In Podcast"
              style={{width: '100%', height: '100%', objectFit: 'cover', display: 'block'}}
            />
          </div>
          <figcaption className="mono" style={{
            fontSize: 11, letterSpacing: '0.07em', textTransform: 'uppercase',
            color: 'var(--ink-mute)', lineHeight: 1.5,
          }}>
            Shima and Elsa Robinson during the recording of their episode for the Clock-In Podcast
          </figcaption>
        </figure>
      </div>

      {/* Labour stories grid — 04.1 */}
      <div style={{marginTop: 64}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 16, marginBottom: 12}}>
          <span className="eyebrow eyebrow-ink">04.1 — Labour Stories Published</span>
          <a href="https://citymuseumedmonton.ca" target="_blank" rel="noopener noreferrer"
            className="mono" style={{fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--prairie)', textDecoration: 'none'}}>
            citymuseumedmonton.ca ↗
          </a>
        </div>
        <h3 style={{marginTop: 0, marginBottom: 8}}>17 stories. 9 centre women's labour. All published in 2025.</h3>
        <p style={{fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.6, marginBottom: 40, maxWidth: '72ch'}}>
          Women's work & visibility · immigrant labour & advocacy · bodies & labour · community building as work.
        </p>

        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2}} className="labour-grid">
          {LABOUR_STORIES.map((s, i) => {
            const tc = THEME_COLORS[s.theme] || { bg: 'var(--prairie)', text: '#fff' };
            return (
              <a
                key={i}
                href={s.url}
                target="_blank"
                rel="noopener noreferrer"
                className="labour-card"
                style={{
                  display: 'flex',
                  flexDirection: 'column',
                  textDecoration: 'none',
                  color: 'inherit',
                  background: 'var(--paper)',
                  overflow: 'hidden',
                }}
              >
                <div style={{
                  position: 'relative',
                  background: tc.bg,
                  minHeight: s.img ? 0 : 120,
                  flexShrink: 0,
                }}>
                  {s.img && (
                    <img
                      src={s.img}
                      alt={s.title}
                      style={{width: '100%', height: 'auto', display: 'block'}}
                      onError={e => { e.target.parentNode.style.minHeight = '120px'; e.target.style.display = 'none'; }}
                    />
                  )}
                  <span style={{
                    position: 'absolute', bottom: 10, left: 10,
                    background: 'rgba(0,0,0,0.55)', color: '#fff',
                    fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.12em', textTransform: 'uppercase',
                    padding: '4px 8px', borderRadius: 2, backdropFilter: 'blur(4px)',
                  }}>{s.theme}</span>
                  <span style={{
                    position: 'absolute', top: 10, right: 10,
                    fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(255,255,255,0.7)', letterSpacing: '0.08em',
                  }}>{String(i + 1).padStart(2, '0')}</span>
                </div>
                <div style={{
                  padding: '16px 18px 18px', display: 'flex', flexDirection: 'column', gap: 6, flex: 1,
                  borderBottom: '1px solid var(--rule-soft)', borderLeft: `3px solid ${tc.bg}`,
                }}>
                  <p style={{fontSize: 14, fontWeight: 600, lineHeight: 1.35, color: 'var(--ink)', margin: 0}}>{s.title}</p>
                  <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginTop: 4}}>
                    <span style={{fontSize: 12, color: 'var(--ink-mute)', fontStyle: s.author ? 'italic' : 'normal'}}>
                      {s.author ? `by ${s.author}` : ''}
                    </span>
                    <span className="mono" style={{fontSize: 11, color: 'var(--ink-mute)'}}>{s.date} ↗</span>
                  </div>
                </div>
              </a>
            );
          })}
        </div>

        <style>{`
          .labour-card { transition: transform 0.15s, box-shadow 0.15s; }
          .labour-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); z-index: 1; position: relative; }
          @media (max-width: 900px) {
            .labour-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .ecamp-pull { grid-template-columns: 1fr !important; gap: 32px !important; }
          }
          @media (max-width: 560px) {
            .labour-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>

      {/* Clock In Podcast — featured */}
      <div className="stat-grid" style={{gridTemplateColumns: '1.6fr 1fr', marginTop: 80, marginBottom: 24}}>
        <div className="cell tone-prairie">
          <span className="stat-lbl">Clock In Podcast — launched 2025</span>
          <h3 style={{color:'var(--cream)', maxWidth:'24ch'}}>
            Hosted by musician and postal worker Jay Gilday, exploring labour as heritage.
          </h3>
          <p style={{color: 'rgba(255,255,255,0.85)', fontSize: 14, lineHeight: 1.55, marginTop: 16, maxWidth: '60ch'}}>
            ECAMP launched <em>Clock In</em>, exploring labour as a form of heritage and a lens into Edmonton's social and cultural history.
            The series featured 6 episodes (165 minutes of audio) and brought together <strong style={{color:'var(--cream)'}}>14 storytellers</strong> in intergenerational conversations
            about work, identity, and belonging. The podcast reached audiences through both digital platforms and CJSR radio broadcast,
            generating 935 direct plays alongside an estimated 20,000 listeners through repeated on-air programming.
          </p>
          <div style={{display: 'flex', gap: 32, flexWrap: 'wrap', marginTop: 20}}>
            <div>
              <div className="stat-num sm">6</div>
              <div className="mono" style={{fontSize: 10, letterSpacing: '0.12em', opacity: 0.7}}>EPISODES · 165 MIN</div>
            </div>
            <div>
              <div className="stat-num sm">935</div>
              <div className="mono" style={{fontSize: 10, letterSpacing: '0.12em', opacity: 0.7}}>DIRECT PLAYS</div>
            </div>
            <div>
              <div className="stat-num sm">20,000+</div>
              <div className="mono" style={{fontSize: 10, letterSpacing: '0.12em', opacity: 0.7}}>CJSR LISTENERS</div>
            </div>
          </div>
        </div>
        <div className="cell" style={{background:'var(--sky-pale)', display:'flex', flexDirection:'column', justifyContent:'space-between'}}>
          <span className="stat-lbl">Storytellers</span>
          <div>
            <div className="stat-num" style={{fontSize: 'clamp(96px, 11vw, 168px)', lineHeight: 0.9}}>14</div>
            <div className="stat-cap" style={{marginTop: 12, fontSize: 15, lineHeight: 1.45, maxWidth: '28ch'}}>
              In intergenerational conversation with Jay Gilday about work, identity, and belonging — the voices that carry <em>Clock In</em>.
            </div>
          </div>
        </div>
      </div>

      {/* ECAMP Programming */}
      <div style={{marginTop: 64}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 16}}>
          <div>
            <span className="eyebrow eyebrow-ink">04.2 — ECAMP Programming</span>
            <h3 style={{marginTop: 8}}>Busiest season to date.</h3>
          </div>
          <div className="mono" style={{fontSize: 12, color: 'var(--ink-mute)', letterSpacing: '0.08em'}}>
            5,000+ EDMONTONIANS ENGAGED IN PERSON
          </div>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 24}} className="ecamp-progs">

          {/* Walking Tours */}
          <article style={{border: '1px solid var(--rule)', background: 'var(--paper)', borderRadius: 4, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
            <div style={{borderBottom: '1px solid var(--rule)', overflow: 'hidden'}}>
              <img
                src="assets/august-7-labour-tour.jpg"
                alt="Curiosity Walking Tours — Labour history walking tour, August 2025"
                style={{width: '100%', height: 'auto', display: 'block'}}
              />
            </div>
            <div style={{padding: 32, display: 'flex', flexDirection: 'column', gap: 12, flex: 1}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8}}>
                <span className="stat-lbl">Curiosity Walking Tours</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--prairie)', letterSpacing: '0.08em'}}>SUMMER 2025</span>
              </div>
              <div>
                <div className="stat-num" style={{fontSize: 'clamp(56px, 6vw, 80px)', lineHeight: 0.95, fontWeight: 600, color: 'var(--ink)'}}>365</div>
                <div style={{fontSize: 13, color: 'var(--ink-mute)', marginTop: 6, fontWeight: 500}}>guests · nearly all tours sold out</div>
              </div>
              <p style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0}}>
                ECAMP commissioned two walking tours from community heritage practitioners and provided two early-career heritage
                practitioners with full-time summer employment delivering them. The tours moved through Strathcona, McCauley, and the
                River Valley — and were covered by GlobalTV, CBC Radio, AUPE, and the Edmonton Journal.
                Abigail Struthers explored connections with the McCauley neighbourhood; her story will be published in
                <em> Boyle McCauley News</em> and ECAMP.
              </p>
            </div>
          </article>

          {/* K-Days */}
          <article style={{border: '1px solid var(--rule)', background: 'var(--paper)', borderRadius: 4, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
            <div style={{borderBottom: '1px solid var(--rule)', overflow: 'hidden'}}>
              <img
                src="assets/k-days-exhibit-2025.jpg"
                alt="K-Days Heritage Exhibit 2025 — work-themed display"
                style={{width: '100%', height: 'auto', display: 'block'}}
              />
            </div>
            <div style={{padding: 32, display: 'flex', flexDirection: 'column', gap: 12, flex: 1}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8}}>
                <span className="stat-lbl">K-Days Heritage Exhibit</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--prairie)', letterSpacing: '0.08em'}}>K-DAYS GROUNDS</span>
              </div>
              <div>
                <div className="stat-num" style={{fontSize: 'clamp(56px, 6vw, 80px)', lineHeight: 0.95, fontWeight: 600, color: 'var(--ink)'}}>4,000+</div>
                <div style={{fontSize: 13, color: 'var(--ink-mute)', marginTop: 6, fontWeight: 500}}>interactions · work-themed display</div>
              </div>
              <p style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', margin: 0}}>
                The K-Days heritage exhibit returned with a work-themed display tied to ECAMP's 2025 Heritage of Work focus —
                featuring reusable materials sourced from local builders and businesses, and staffed with volunteer support.
                The exhibit met Edmontonians where they already gather, threading labour heritage into the rhythm of the
                city's biggest summer festival.
              </p>
            </div>
          </article>

          {/* YEG Trivia Night */}
          <article style={{border: '1px solid var(--rule)', background: 'var(--paper)', borderRadius: 4, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
            <div style={{borderBottom: '1px solid var(--rule)', overflow: 'hidden'}}>
              <img
                src="assets/trivia-night-2025.jpg"
                alt="YEG Trivia Night at Canadian Brewhouse — Edmonton North"
                style={{width: '100%', height: 'auto', display: 'block'}}
              />
            </div>
            <div style={{padding: 32, display: 'flex', flexDirection: 'column', gap: 12, flex: 1}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8}}>
                <span className="stat-lbl">ECAMP YEG Trivia Night</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--prairie)', letterSpacing: '0.08em'}}>2025</span>
              </div>
              <div>
                <div className="stat-num" style={{fontSize: 'clamp(56px, 6vw, 80px)', lineHeight: 0.95, fontWeight: 600, color: 'var(--ink)'}}>128+</div>
                <div style={{fontSize: 13, color: 'var(--ink-mute)', marginTop: 6, fontWeight: 500}}>participants · 4 events · 3+ venues</div>
              </div>
              <p style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 8}}>
                YEG Trivia Night brings Edmontonians together to explore the city's history through interactive, social learning.
                Hosted in informal community venues including Teddy's Pub and in collaboration with Taproot, themed trivia rounds
                span neighbourhood histories, elections, labour, and cultural heritage — with guest quizmasters including
                musicians, historians, and community storytellers.
              </p>
              <p style={{fontSize: 12, fontStyle: 'italic', color: 'var(--ink-mute)', lineHeight: 1.5, margin: 0}}>
                Co-hosted by Stephanie Swensrude and Chris Chang-Yen Phillips at Canadian Brewhouse - Edmonton North.
              </p>
            </div>
          </article>

          {/* Momentary Museum */}
          <article style={{border: '1px solid var(--rule)', background: 'var(--paper)', borderRadius: 4, overflow: 'hidden', display: 'flex', flexDirection: 'column'}}>
            <div style={{borderBottom: '1px solid var(--rule)', overflow: 'hidden'}}>
              <img
                src="assets/momentary-museum.jpg"
                alt="Momentary Museum — Senses exhibit"
                style={{width: '100%', height: 'auto', display: 'block'}}
              />
            </div>
            <div style={{padding: 32, display: 'flex', flexDirection: 'column', gap: 12, flex: 1}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: 8}}>
                <span className="stat-lbl">Momentary Museum</span>
                <span className="mono" style={{fontSize: 11, color: 'var(--prairie)', letterSpacing: '0.08em'}}>4 EPL BRANCHES</span>
              </div>
              <div>
                <div className="stat-num" style={{fontSize: 'clamp(56px, 6vw, 80px)', lineHeight: 0.95, fontWeight: 600, color: 'var(--ink)'}}>400+</div>
                <div style={{fontSize: 13, color: 'var(--ink-mute)', marginTop: 6, fontWeight: 500}}>participants · 6 partnerships</div>
              </div>
              <p style={{fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 12}}>
                Momentary Museum transforms accessible public spaces — including Edmonton Public Library branches — into
                pop-up museums where Edmontonians contribute their own objects, stories, and perspectives to temporary,
                community-based exhibitions. Delivered in partnership with the Royal Alberta Museum, the Provincial Archives
                of Alberta, and EPL.
              </p>
              <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8, fontSize: 12, color: 'var(--ink-mute)'}} className="mono">
                <div>STANLEY MILNER · 136</div>
                <div>MILL WOODS · 150+</div>
                <div>LOIS HOLE · 76</div>
                <div>CAPILANO · 46+</div>
              </div>
            </div>
          </article>

        </div>

        <style>{`
          @media (max-width: 900px) {
            .ecamp-progs { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>

    </section>
  );
}

Object.assign(window, { EcampSection });