// Work index page — four featured cases + logo field

function WorkPage({ setRoute }) {
  const cases = [
    {
      id: 'nec',
      year: '2020–2025',
      sector: 'Higher Education',
      client: 'New England Conservatory',
      desc: 'A five-year digital transformation for the oldest independent music conservatory in the country. 2025 CASE Circle of Excellence Award.',
      services: ['Strategy', 'Technology'],
      image: 'assets/nec-hero.jpg',
    },
    {
      id: 'revere',
      year: '2019–present',
      sector: 'Business',
      client: 'Revere Auctions',
      desc: 'Five years compounding: from website rebuild to proprietary AI tools that free hours of staff time every day.',
      services: ['Technology'],
      image: 'assets/Revere%20-%20Case%20Study%20Hero%20Image.jpg',
    },
    {
      id: 'edexchange',
      year: '2024',
      sector: 'Higher Education',
      client: 'EdExchange at Brown',
      desc: 'Sustainability strategy and business model development for a nationally recognized education research platform at the Annenberg Institute.',
      services: ['Strategy'],
      image: 'assets/EdExchange%20Annenberg%20Brown%20-%20Case%20Study%20Hero%20Image.jpg',
    },
    {
      id: 'ncare',
      year: '2023',
      sector: 'Higher Education',
      client: 'NCARE at Northwestern',
      desc: 'Rebranding, consortium funding model, and go-to-market strategy at an organizational inflection point.',
      services: ['Strategy'],
      image: 'assets/Ncare%20-%20Case%20Study%20Hero%20Image.jpg',
    },
    {
      id: 'concord',
      year: '2019–2020',
      sector: 'K–12 Education',
      client: 'Concord Academy',
      desc: 'A full platform rebuild for one of New England\'s most respected independent schools — 1,500 pages migrated, modular templates built, and a maintainable system handed to the team that would run it.',
      services: ['Technology'],
      image: 'assets/concord-academy-hero.jpg',
    },
    {
      id: 'hazelden',
      year: '2023',
      sector: 'Foundations',
      client: 'Hazelden Betty Ford Foundation',
      desc: 'Reimagining lifelong recovery and alumni engagement for one of the most trusted names in addiction treatment — consumer research, market analysis, and a strategy built to hold.',
      services: ['Strategy'],
      image: 'assets/hazelden-hero.jpg',
    },
    {
      id: 'kvc',
      year: '2022',
      sector: 'Business',
      client: 'KVC Builders',
      desc: 'Technical build for a high-end New England contractor — image-heavy portfolio site engineered for performance, responsiveness, and team-managed content.',
      services: ['Technology'],
      image: 'assets/KVC.jpg',
    },
    {
      id: 'womens-edge',
      year: '2023–present',
      sector: 'Non-Profits',
      client: "The Women's Edge",
      desc: 'Full technical rebuild of a decade-old WordPress platform — modernized codebase, restructured content architecture, and a deployment pipeline that made ongoing maintenance feel manageable again.',
      services: ['Technology'],
      image: 'assets/womens-edge-hero.jpg',
    },
  ];

  const goCase = (id) => {
    setRoute('case', id);
  };

  const logos = [
    'New England Conservatory', 'Northwestern University', 'Brown University',
    'Harvard Business School', 'Revere Auctions', 'Concord Academy',
    'Hazelden Betty Ford', "The Women's Edge", 'Hope Chicago',
    'REDF', 'Turner Broadcasting', 'KVC Builders',
  ];

  return (
    <div data-screen-label="Work">

      <section className="q-work-hero">
        <SiteNav route="work" setRoute={setRoute} theme="light" />
        <div className="q-wrap q-work-hero-inner">
          <div className="q-eyebrow">Selected work</div>
          <h1>Work we're proud of, <em>with clients we're grateful for.</em></h1>
          <p className="lede" style={{ maxWidth: '52ch' }}>
            Every engagement here was a real partnership — organizations that brought us into something that mattered to them, and trusted us to help figure it out.
          </p>
        </div>
      </section>

      <section className="q-work-cases">
        <div className="q-wrap">
          <div className="q-work-grid">
            {cases.map(c => (
              <div className="q-work-card" key={c.id} onClick={() => goCase(c.id)}>
                <div className="q-work-card-image" style={c.image ? { backgroundImage: `url(${c.image})` } : {}}>
                  <div className="q-work-card-tag">{c.sector}</div>
                </div>
                <div className="q-work-card-body">
                  <h3 className="q-work-card-client">{c.client}</h3>
                  <p className="q-work-card-desc">{c.desc}</p>
                  <div className="q-work-card-footer">
                    <div className="q-work-card-services">
                      {c.services.map(s => <span key={s} className="q-work-card-svc">{s}</span>)}
                    </div>
                    <span className="q-work-card-link">Read the case <Arrow /></span>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="q-work-logos">
        <div className="q-wrap">
          <div className="q-work-logos-label">Organizations we've had the pleasure of working with</div>
          <div className="q-work-logos-grid">
            {logos.map(n => <div key={n} className="q-work-logo">{n}</div>)}
          </div>
        </div>
      </section>

      <section className="q-svc-cta">
        <div className="q-wrap">
          <div className="q-svc-cta-inner">
            <div>
              <div className="q-eyebrow q-eyebrow--dark">Next step</div>
              <h2>Tell us what you are <em>trying to figure out.</em></h2>
            </div>
            <div>
              <p>A first conversation is twenty minutes, specific, and free. We'll listen before we suggest anything. If we're the right fit, an initial evaluation is a contained, defined next step.</p>
              <div style={{ marginTop: 24, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a className="qbtn qbtn--paper" href="mailto:info@quarterdeck.io">Email info@quarterdeck.io <Arrow /></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <SiteFooter setRoute={setRoute} />
    </div>
  );
}

Object.assign(window, { WorkPage });