/* global React, window */
const DS = window.ACONADesignSystem_e7dd84;
const { Tag, Stat, Eyebrow, ArrowLink, Button, SiteHeader, SiteFooter, SectionHeader } = DS;

const GCSS = 'acona-gallery-css';
if (typeof document !== 'undefined' && !document.getElementById(GCSS)) {
  const st = document.createElement('style');
  st.id = GCSS;
  st.textContent = `
  .gmosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;}
  .gtile{position:relative;border:0;margin:0;padding:0;cursor:pointer;overflow:hidden;display:flex;
    flex-direction:column;justify-content:flex-end;text-align:left;font-family:inherit;
    border-radius:var(--radius-sm);background:var(--greige-100);
    transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);}
  .gtile:hover{box-shadow:var(--shadow-md);}
  .gtile:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;}
  .gtile__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transition:transform var(--dur-slow) var(--ease-out);}
  .gtile--photo:hover .gtile__img{transform:scale(1.05);}
  .gtile__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,23,32,0) 38%,rgba(12,23,32,.86) 100%);}
  .gtile__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px;padding:26px;}
  .gtile__sector{font-family:var(--font-eyebrow);font-size:11px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--clay-400);}
  .gtile__sector--ink{color:var(--clay-600);}
  .gtile__name{font-family:var(--font-heading);font-weight:400;font-size:var(--text-xl);
    line-height:1.12;letter-spacing:var(--tracking-snug);color:var(--text-strong);}
  .gtile__name--on{color:#fff;}
  .gtile__reveal{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-sans);
    font-size:var(--text-sm);font-weight:600;color:#fff;opacity:0;transform:translateY(6px);
    transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);}
  .gtile__reveal--ink{color:var(--navy-800);opacity:.85;transform:none;}
  .gtile--photo:hover .gtile__reveal{opacity:1;transform:none;}
  .gtile--type{background:var(--greige-100);padding:26px;gap:12px;border:1px solid var(--border-hairline);}
  .gtile--type:hover{background:var(--greige-200);}
  .gtile--type .gtile__name{font-size:var(--text-2xl);}
  .gtile__corner{position:absolute;top:20px;right:20px;width:16px;height:16px;
    border-top:2px solid var(--clay-500);border-right:2px solid var(--clay-500);}
  .gtile--type .gtile__reveal--ink svg{transition:transform var(--dur) var(--ease-out);}
  .gtile--type:hover .gtile__reveal--ink svg{transform:translateX(4px);}
  /* reveal panel */
  .gpanel-scrim{position:fixed;inset:0;background:rgba(12,23,32,.55);backdrop-filter:blur(3px);
    opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease-standard);z-index:var(--z-overlay);}
  .gpanel-scrim.is-open{opacity:1;pointer-events:auto;}
  .gpanel{position:fixed;top:0;right:0;height:100%;width:min(560px,92vw);background:var(--paper);
    transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
    z-index:var(--z-modal);box-shadow:var(--shadow-xl);overflow-y:auto;}
  .gpanel.is-open{transform:translateX(0);}
  .gpanel__inner{position:relative;}
  .gpanel__close{position:absolute;top:18px;right:18px;z-index:3;width:42px;height:42px;border:0;
    border-radius:50%;background:rgba(246,244,239,.9);color:var(--navy-900);cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast);}
  .gpanel__close:hover{background:#fff;}
  .gpanel__media{aspect-ratio:16/10;overflow:hidden;background:var(--greige-200);}
  .gpanel__media img{width:100%;height:100%;object-fit:cover;}
  .gpanel__media--type{background:linear-gradient(160deg,var(--navy-700),var(--navy-900));display:flex;
    align-items:flex-end;padding:26px;}
  .gpanel__media--type span{font-family:var(--font-eyebrow);font-size:12px;font-weight:600;
    letter-spacing:.18em;text-transform:uppercase;color:var(--clay-400);}
  .gpanel__content{padding:34px 36px 44px;display:flex;flex-direction:column;gap:18px;}
  .gpanel__sector{font-family:var(--font-eyebrow);font-size:12px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-accent);}
  .gpanel__name{font-family:var(--font-heading);font-weight:400;font-size:var(--text-2xl);line-height:1.1;
    letter-spacing:var(--tracking-snug);color:var(--text-strong);margin:0;}
  .gpanel__blurb{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.65;
    color:var(--text-body);margin:0;}
  .gpanel__stats{display:flex;gap:34px;flex-wrap:wrap;padding:6px 0 4px;}
  .gpanel__tags{display:flex;flex-wrap:wrap;gap:8px;}
  .gpanel__foot{display:flex;flex-direction:column;gap:16px;margin-top:8px;padding-top:22px;
    border-top:1px solid var(--border-hairline);align-items:flex-start;}
  .gpanel__soon{font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-faint);
    letter-spacing:.02em;font-style:italic;}
  @media (max-width:900px){
    .gtile{grid-column:span 12 !important;}
  }
  `;
  document.head.appendChild(st);
}

const IMG = '../../assets/photography/';
const LOGO = '../../assets/logos/';
const NAV = [
  { label: 'Services', href: '#services' },
  { label: 'Experience', href: '#/experience' },
  { label: 'Gallery', href: '#/gallery' },
  { label: 'About', href: '#/about' },
];

const PROJECTS = [
  { id: 'madison', name: 'Madison Square Boys & Girls Club', sector: 'Youth & Community', engagement: 'Principal-led',
    image: '../../assets/photography/madison-boys-girls-club.jpg', span: 7, caseStudy: true,
    blurb: 'A ground-up, 45,000 sf clubhouse in Harlem — classrooms, art rooms, athletics, a screening room and a recording studio — delivered through a five-agency approvals path.',
    metrics: [{ v: '45,000', u: 'sf', l: 'Ground-up' }, { v: '5', l: 'Agencies coordinated' }],
    services: ["Owner's Rep", 'Public Funding', 'City-Agency Coordination'] },
  { id: 'bam', name: 'BAM Fisher Building', sector: 'Arts & Culture', engagement: 'Principal-led',
    image: '../../assets/photography/bam-fisher.jpg', span: 5, caseStudy: false,
    blurb: 'Part of a $90M BAM capital portfolio — the ground-up, LEED Gold Fisher Building alongside historic façade restoration and a new glass canopy for a flagship Brooklyn institution.',
    metrics: [{ v: '$90M', l: 'Capital portfolio' }, { v: 'LEED', u: ' Gold', l: 'Certification' }],
    services: ["Owner's Rep", 'Historic Restoration'] },
  { id: 'joyce', name: 'The Joyce Theater', sector: 'Performing Arts', engagement: 'ACONA',
    image: null, span: 4, caseStudy: false,
    blurb: "Owner's representation for the adaptive reuse of a 58,000 sf former Boys & Girls Club into a performance and rehearsal home for dance — anchored by a $13M DCLA allocation.",
    metrics: [{ v: '58,000', u: 'sf', l: 'Adaptive reuse' }, { v: '$13M', l: 'DCLA allocation' }],
    services: ["Owner's Rep", 'Public Funding'] },
  { id: 'bax', name: 'Brooklyn Arts Exchange', sector: 'Arts & Culture', engagement: 'ACONA',
    image: null, span: 4, caseStudy: false,
    blurb: 'Feasibility, master planning and NYSCA-funded HVAC and accessibility upgrades for a beloved multigenerational arts organization above a Park Slope storefront.',
    metrics: [{ v: 'NYSCA', l: 'Public funding secured' }],
    services: ['Tenant Rep', "Owner's Rep", 'Public Funding'] },
  { id: 'casa', name: 'Casa Belongó', sector: 'Performing Arts', engagement: 'ACONA',
    image: null, span: 4, caseStudy: false,
    blurb: "Owner's representation for a 20,000 sf East Harlem music venue and community space with Diller Scofidio + Renfro and Turner Construction.",
    metrics: [{ v: '20,000', u: 'sf', l: 'Music & community' }],
    services: ["Owner's Rep"] },
  { id: 'manny', name: 'Manny Cantor Center', sector: 'Community', engagement: 'Principal-led',
    image: null, span: 6, caseStudy: false,
    blurb: 'A $55M, 103,000 sf LEED renovation of a historic Lower East Side settlement house — phased around continuous operations for the community it serves every day.',
    metrics: [{ v: '$55M', l: 'Renovation' }, { v: '103,000', u: 'sf', l: 'LEED-certified' }],
    services: ["Owner's Rep", 'Historic Tax Credits'] },
  { id: 'sheen', name: 'The Sheen Center', sector: 'Performing Arts', engagement: 'Principal-led',
    image: null, span: 6, caseStudy: false,
    blurb: 'Converting a former school into a 25,000 sf arts center for the Archdiocese of New York — two theaters and four rehearsal studios with demanding acoustic isolation.',
    metrics: [{ v: '25,000', u: 'sf', l: 'Arts center' }, { v: '2', l: 'Theaters' }],
    services: ["Owner's Rep", 'Acoustics'] },
  { id: 'secondstage', name: 'Second Stage · Hayes Theater', sector: 'Performing Arts', engagement: 'Principal-led',
    image: null, span: 12, caseStudy: false,
    blurb: 'Acquisition and landmark renovation of a Broadway theater dedicated to contemporary American work — Community Board and Landmarks approvals with a mixed DCLA / NYCEDC capital stack.',
    metrics: [{ v: 'Broadway', l: 'Landmark theater' }, { v: 'DCLA', u: ' + NYCEDC', l: 'Capital stack' }],
    services: ["Owner's Rep", 'Landmarks', 'Public Funding'] },
];

function ArrowSm({ c }) {
  return <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={c || 'currentColor'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="4" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>;
}

function Tile({ p, onOpen }) {
  const common = { onClick: () => onOpen(p), role: 'button', tabIndex: 0,
    onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(p); } } };
  if (p.image) {
    return (
      <button {...common} className="gtile gtile--photo" style={{ gridColumn: `span ${p.span}`, aspectRatio: p.span >= 12 ? '21 / 8' : p.span >= 7 ? '16 / 11' : '4 / 3' }}>
        <img className="gtile__img" src={p.image} alt={p.name} loading="lazy" />
        <span className="gtile__scrim" />
        <span className="gtile__body">
          <span className="gtile__sector">{p.sector}{p.engagement === 'Principal-led' ? ' · Principal-led' : ''}</span>
          <span className="gtile__name gtile__name--on">{p.name}</span>
          <span className="gtile__reveal">View project <ArrowSm /></span>
        </span>
      </button>
    );
  }
  return (
    <button {...common} className="gtile gtile--type" style={{ gridColumn: `span ${p.span}`, aspectRatio: p.span >= 12 ? '21 / 7' : p.span >= 6 ? '16 / 9' : '4 / 3' }}>
      <span className="gtile__corner" aria-hidden="true" />
      <span className="gtile__sector gtile__sector--ink">{p.sector}{p.engagement === 'Principal-led' ? ' · Principal-led' : ''}</span>
      <span className="gtile__name">{p.name}</span>
      <span className="gtile__reveal gtile__reveal--ink">View project <ArrowSm /></span>
    </button>
  );
}

function Gallery() {
  const [sel, setSel] = React.useState(null);
  const last = React.useRef(null);
  if (sel) last.current = sel;
  const p = sel || last.current;

  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setSel(null); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = sel ? 'hidden' : '';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [sel]);

  return (
    <React.Fragment>
      <SiteHeader variant="solid" logo={'../../assets/logos/acona-logo.png'} logoWhite={'../../assets/logos/acona-logo-white.png'} links={NAV} active="#/gallery" />

      <section className="section section--paper">
        <div className="container container--wide">
          <SectionHeader eyebrow="Gallery" eyebrowNumber="—"
            title="A portfolio of place."
            intro="The arts, cultural and civic projects our team has helped bring to life across New York. Select any project to reveal its story." />
        </div>
        <div className="container container--wide" style={{ marginTop: 'var(--space-7)' }}>
          <div className="gmosaic">
            {PROJECTS.map((pr) => <Tile key={pr.id} p={pr} onOpen={setSel} />)}
          </div>
        </div>
      </section>

      <SiteFooter logoWhite={'../../assets/logos/acona-logo-white.png'} />

      {/* Reveal panel */}
      <div className={'gpanel-scrim' + (sel ? ' is-open' : '')} onClick={() => setSel(null)} />
      <aside className={'gpanel' + (sel ? ' is-open' : '')} aria-hidden={!sel}>
        {p && (
          <div className="gpanel__inner">
            <button className="gpanel__close" onClick={() => setSel(null)} aria-label="Close">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
            </button>
            {p.image
              ? <div className="gpanel__media"><img src={p.image} alt={p.name} /></div>
              : <div className="gpanel__media gpanel__media--type"><span>{p.sector}</span></div>}
            <div className="gpanel__content">
              <span className="gpanel__sector">{p.sector}{p.engagement === 'Principal-led' ? ' · Principal-led experience' : ' · ACONA engagement'}</span>
              <h2 className="gpanel__name">{p.name}</h2>
              <p className="gpanel__blurb">{p.blurb}</p>
              <div className="gpanel__stats">
                {p.metrics.map((m, i) => <Stat key={i} value={m.v} unit={m.u} label={m.l} size="sm" tone={i === 0 ? 'accent' : 'navy'} />)}
              </div>
              <div className="gpanel__tags">
                {p.services.map((s, i) => <Tag key={i} variant="soft" size="sm">{s}</Tag>)}
              </div>
              <div className="gpanel__foot">
                {p.caseStudy
                  ? <Button variant="primary" arrow href="#/project" onClick={() => setSel(null)}>Read the full case study</Button>
                  : <span className="gpanel__soon">Full case study in progress</span>}
                <ArrowLink href="#/experience" onClick={() => setSel(null)}>All experience</ArrowLink>
              </div>
            </div>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

window.ACONA = window.ACONA || {};
window.ACONA.Gallery = Gallery;