// =========================================================================
// Alice Murrell, Work index
// =========================================================================
const { Cursor, Nav, Footer, Icon, PROJECTS, useSiteEffects } = window;

const SECTORS = ['All', 'Hospitality', 'E‑commerce', 'Luxury', 'Retail'];

const WORK_POSITIONS = {
  'one-and-only': 'calc(50% - 40px) center',
  'agent-provocateur': 'center 20%',
};

const WORK_IMAGES = {
  'the-pig': 'assets/pig-thumb-2.png',
  'one-and-only': 'assets/one-and-only-next.png',
  'agent-clarks': 'assets/clarks-thumb-2.png',
  'noble-panacea': 'assets/noble-panacea-thumb.png',
  'grenson': 'assets/grenson-thumb.png',
  'london-stone': 'assets/london-stone-thumb.png',
  'siro-hotels': 'assets/siro-thumb.png',
  'agent-provocateur': 'assets/ap-thumb.webp',
};

function CaseCard({ p, orientation }) {
  return (
    <a className={`case is-${orientation}`} href={p.href}
    data-reveal data-cursor="view" data-cursor-label="View project">
      <div className="case-frame">
        {WORK_IMAGES[p.slug]
          ? <img src={WORK_IMAGES[p.slug]} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: WORK_POSITIONS[p.slug] || 'center', display: 'block' }} />
          : <image-slot id={`work-grid-${p.slug}`} shape="rect" placeholder={`${p.title} - drop image`}></image-slot>
        }
        <div className="case-tags">{p.sectors.map((s) => <span key={s} className="case-tag">{s}</span>)}</div>
      </div>
      <div className="case-meta">
        <span className="case-year">{p.year}</span>
        <div className="case-meta-head">
          <h3 className="case-title">{p.title}</h3>
        </div>
        <span className="case-role">{p.role}</span>
      </div>
    </a>);

}

function App() {
  const [sector, setSector] = React.useState('All');
  useSiteEffects();

  const norm = (s) => s.replace(/[\u2011\u2010]/g, '-');
  const visibleProjects = PROJECTS.filter((p) => !p.hidden);
  const items = sector === 'All' ? visibleProjects : visibleProjects.filter((p) => p.sectors.some((s) => norm(s) === norm(sector)));

  // Re-run reveal when filter changes
  React.useEffect(() => {
    requestAnimationFrame(() => document.querySelectorAll('.case[data-reveal]').forEach((el) => window.revealEl(el)));
  }, [sector]);

  return (
    <React.Fragment>
      <Cursor />
      <Nav active="work" />

      <main>
        <section className="wrap page-head">
          <div className="ad-eyebrow" data-reveal style={{ marginBottom: 22 }}>SELECTED WORK, 2021–2026</div>
          <h1 className="display" data-reveal style={{ fontSize: 'clamp(3rem, 8vw, 7rem)', maxWidth: '14ch' }}>Some work I am proud of.

          </h1>
          <p className="lead muted" data-reveal style={{ maxWidth: '50ch', marginTop: 28 }}>Brand and digital experiences across hospitality, e‑commerce, retail and luxury.

          </p>
        </section>

        <section className="wrap section-tight" style={{ paddingTop: 0 }}>
          <div className="filter-wrap" data-reveal style={{ marginBottom: 'clamp(36px, 5vw, 64px)' }}>
            <div className="filter-row">
              {SECTORS.map((s) =>
              <button key={s} className={`filter-chip${sector === s ? ' is-active' : ''}`} onClick={() => setSector(s)}>{s}</button>
              )}
            </div>
            <span className="count">{String(items.length).padStart(2, '0')} projects</span>
          </div>

          <div className="cases">
            {(() => {
              const rows = [];
              for (let i = 0; i < items.length; i += 2) rows.push(items.slice(i, i + 2));
              return rows.map((row, r) => {
                const isAlt = r % 2 === 0;
                const orientations = isAlt ? ['portrait', 'landscape'] : ['landscape', 'portrait'];
                return (
                  <div className={`case-row${isAlt ? ' is-alt' : ''}`} key={r}>
                    {row.map((p, i) => <CaseCard key={p.slug} p={p} orientation={orientations[i]} />)}
                  </div>);
              });
            })()}
          </div>
        </section>
      </main>
      <Footer />
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);