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

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' },
  { label: 'Insights', href: '#insights' },
];

const FILTERS = ['All work', 'Arts & Culture', 'Performing Arts', 'Youth & Community', 'Public Funding'];

const PRINCIPAL = [
  { sector: 'Arts & Culture', title: 'Manny Cantor Center · Educational Alliance',
    desc: 'A $55M, 103,000 sf LEED renovation of a historic Lower East Side settlement house — classrooms, athletics, art and dance studios — phased around continuous operations.',
    tags: ["Owner's Rep", 'Historic Tax Credits'] },
  { sector: 'Performing Arts', title: 'The Sheen Center for Thought & Culture',
    desc: 'Converting a former school for the Archdiocese of New York into a 25,000 sf arts center — two theaters and four rehearsal studios with demanding acoustic isolation.',
    tags: ["Owner's Rep", 'Acoustics'] },
  { sector: 'Performing Arts', title: 'Second Stage · Hayes Theater',
    desc: 'Acquisition and landmark renovation of a Broadway theater for contemporary American work — Community Board and Landmarks approvals with a mixed DCLA / NYCEDC capital stack.',
    tags: ["Owner's Rep", 'Landmarks', 'Public Funding'] },
  { sector: 'Economic Development', title: 'Brooklyn Navy Yard',
    desc: 'Leasing and destination tenant curation across the industrial campus — bringing in Kings County Distillery, Rooftop Reds, Brooklyn Grange and more.',
    tags: ['Brokerage', 'Placemaking'] },
];

const CURRENT = [
  { sector: 'Performing Arts', title: 'The Joyce Theater',
    desc: 'Owner\u2019s representation for the adaptive reuse of a 58,000 sf former Boys & Girls Club into a home for dance — anchored by a $13M DCLA allocation.',
    tags: ["Owner's Rep", 'Public Funding'] },
  { sector: 'Arts & Culture', title: 'Brooklyn Arts Exchange',
    desc: 'Feasibility, master planning and NYSCA-funded HVAC and accessibility upgrades for a beloved multigenerational arts organization.',
    tags: ['Tenant Rep', "Owner's Rep", 'Public Funding'] },
  { sector: 'Performing Arts', title: 'Casa Belong\u00f3 · Afro Latin Jazz Alliance',
    desc: 'Owner\u2019s representation for a 20,000 sf East Harlem music venue and community space with Diller Scofidio + Renfro and Turner Construction.',
    tags: ["Owner's Rep"] },
];

function WorkRow({ p }) {
  return (
    <a href="#/experience" style={{ display: 'grid', gridTemplateColumns: '0.6fr 2fr 1.1fr auto', gap: '32px',
      alignItems: 'center', padding: '30px 0', borderTop: '1px solid var(--border-hairline)', textDecoration: 'none', color: 'inherit' }}>
      <span style={{ fontFamily: 'var(--font-eyebrow)', fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--text-accent)' }}>{p.sector}</span>
      <div>
        <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 400, fontSize: 'var(--text-xl)', letterSpacing: 'var(--tracking-snug)', color: 'var(--text-strong)', margin: '0 0 8px' }}>{p.title}</h3>
        <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 1.55, color: 'var(--text-muted)', margin: 0, maxWidth: '58ch' }}>{p.desc}</p>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '7px' }}>{p.tags.map((t, i) => <Tag key={i} size="sm">{t}</Tag>)}</div>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--navy-700)" strokeWidth="1.75" 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>
    </a>
  );
}

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

      <section className="section section--paper">
        <div className="container container--wide">
          <SectionHeader eyebrow="Experience" eyebrowNumber="—"
            title="Real estate that advances the mission."
            intro="A selection of ACONA engagements and the principal-led capital projects our leadership has delivered across New York's cultural and civic institutions." />
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: 'var(--space-6)' }}>
            {FILTERS.map((f, i) => (
              <Tag key={i} variant={i === 0 ? 'solid' : 'outline'}>{f}</Tag>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--tight section--paper">
        <div className="container container--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '26px' }}>
            <ProjectCard variant="overlay" ratio="wide" image={'../../assets/photography/madison-boys-girls-club.jpg'}
              sector="Youth & Community · Principal-led" title="Madison Sq. Boys & Girls Club"
              services={["Owner's Rep", 'Public Funding']} cta="Read case study" href="#/project" />
            <ProjectCard variant="overlay" ratio="wide" image={'../../assets/photography/bam-fisher.jpg'}
              sector="Arts & Culture · Principal-led" title="BAM Fisher Building"
              services={["Owner's Rep", 'Historic Restoration']} cta="Read case study" href="#/project" />
          </div>
        </div>
      </section>

      <section className="section section--warm">
        <div className="container container--wide">
          <SectionHeader eyebrow="Currently underway" title="Active ACONA engagements." />
          <div style={{ marginTop: 'var(--space-5)', borderBottom: '1px solid var(--border-hairline)' }}>
            {CURRENT.map((p, i) => <WorkRow key={i} p={p} />)}
          </div>
        </div>
      </section>

      <section className="section section--paper">
        <div className="container container--wide">
          <SectionHeader eyebrow="Principal-led experience"
            title="Delivered by our leadership."
            intro="Flagship capital projects Matt and Toby led prior to founding ACONA — the foundation of the firm's expertise." />
          <div style={{ marginTop: 'var(--space-5)', borderBottom: '1px solid var(--border-hairline)' }}>
            {PRINCIPAL.map((p, i) => <WorkRow key={i} p={p} />)}
          </div>
        </div>
      </section>

      <section className="section section--tight section--ink">
        <div className="container container--wide">
          <div className="metrics metrics--ruled">
            <div><Stat value="$100M+" label="Under management" onDark /></div>
            <div><Stat value="$60M+" label="Public funding secured" onDark /></div>
            <div><Stat value="20+" label="Years combined experience" onDark /></div>
            <div><Stat value="60+" label="Organizations served" onDark tone="accent" /></div>
          </div>
        </div>
      </section>

      <section className="section section--warm">
        <div className="container container--wide" style={{ textAlign: 'center' }}>
          <SectionHeader align="center" eyebrow="Let's begin" title="Have a project in mind?"
            intro="Tell us what you're planning — we'll help you find the path from concept to occupancy."
            action={<Button variant="primary" arrow href="#/contact">Start a project</Button>} />
        </div>
      </section>

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

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