/* global React, window */
const DS = window.ACONADesignSystem_e7dd84;
const { Button, Eyebrow, Tag, Stat, ArrowLink, Testimonial, 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 FACTS = [
  { k: 'Client', v: 'Madison Square Boys & Girls Club' },
  { k: 'Location', v: 'Harlem, New York' },
  { k: 'Role', v: "Owner's Representation" },
  { k: 'Engagement', v: 'Principal-led experience' },
];

const NARRATIVE = [
  { n: '01', t: 'The challenge',
    d: 'A ground-up, 45,000 sf clubhouse on a constrained Harlem site beside an active rail viaduct — with a program (classrooms, art rooms, athletics, a screening room and a recording studio) that had to survive a demanding budget and an unusually crowded approvals path.' },
  { n: '02', t: 'Our approach',
    d: "As owner's representative, our leadership ran the project end to end — threading DOT, MTA, DEP, DOB and FDNY approvals, holding the budget and schedule, and protecting the community program through every design and construction decision." },
  { n: '03', t: 'The outcome',
    d: 'A modern, welcoming home for the young people who need it most — a durable, mission-first building that expanded what the organization can offer its Harlem community for decades to come.' },
];

function MetaRow() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '1px', background: 'var(--border-hairline)',
      border: '1px solid var(--border-hairline)', borderRadius: 'var(--radius-sm)', overflow: 'hidden' }}>
      {FACTS.map((f) => (
        <div key={f.k} style={{ background: 'var(--surface)', padding: '22px 24px' }}>
          <div style={{ fontFamily: 'var(--font-eyebrow)', fontSize: '11px', fontWeight: 600, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--text-faint)', marginBottom: '8px' }}>{f.k}</div>
          <div style={{ fontFamily: 'var(--font-heading)', fontSize: 'var(--text-md)', color: 'var(--text-strong)', lineHeight: 1.25 }}>{f.v}</div>
        </div>
      ))}
    </div>
  );
}

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

      {/* Hero */}
      <section className="hero" style={{ minHeight: '78vh' }}>
        <img className="hero__img" src={'../../assets/photography/madison-boys-girls-club.jpg'} alt="Madison Square Boys & Girls Club, Harlem" />
        <div className="hero__scrim" />
        <div className="container container--wide hero__inner" style={{ paddingBottom: 'clamp(2.5rem,2rem+4vw,4.5rem)' }}>
          <a href="#/experience" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', color: 'rgba(255,255,255,.8)', fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', fontWeight: 600, letterSpacing: '.02em', textDecoration: 'none', marginBottom: '26px' }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><line x1="20" y1="12" x2="5" y2="12" /><polyline points="12 19 5 12 12 5" /></svg>
            All experience
          </a>
          <div className="hero__eyebrow" style={{ marginBottom: '22px' }}>Youth &amp; Community · Principal-led</div>
          <h1 className="hero__title" style={{ fontSize: 'clamp(2.5rem,1.4rem+4.6vw,5rem)', maxWidth: '18ch', marginBottom: '18px' }}>Madison Square Boys &amp; Girls Club</h1>
          <p className="hero__sub" style={{ marginBottom: 0 }}>The Pinkerton Clubhouse — a ground-up home for youth in Harlem.</p>
        </div>
      </section>

      {/* Meta + overview */}
      <section className="section section--paper">
        <div className="container container--wide">
          <MetaRow />
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: '56px', alignItems: 'start', marginTop: 'var(--space-8)' }}>
            <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-2xl)', lineHeight: 1.28, letterSpacing: '-0.01em', color: 'var(--text-strong)', margin: 0, textWrap: 'balance' }}>
              A modern clubhouse built to <em style={{ color: 'var(--navy-600)' }}>empower young people</em> — delivered through one of the most complex approvals paths in the city.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '28px' }}>
              <Stat value="45,000" unit="sf" label="Ground-up construction" size="sm" tone="accent" />
              <Stat value="5" label="City & state agencies coordinated" size="sm" />
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                <Tag variant="soft">Owner's Representation</Tag>
                <Tag variant="soft" tone="clay">Public Funding</Tag>
                <Tag variant="soft" tone="neutral">City-Agency Coordination</Tag>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Wide section image */}
      <section className="section section--tight section--paper">
        <div className="container container--wide">
          <img src={'../../assets/photography/madison-section.jpg'} alt="Architectural section — Pinkerton Clubhouse" style={{ width: '100%', height: 'auto', borderRadius: 'var(--radius-md)', display: 'block' }} />
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', color: 'var(--text-faint)', marginTop: '14px', letterSpacing: '.02em' }}>Building section — classrooms, athletics and community program stacked on a constrained site.</p>
        </div>
      </section>

      {/* Narrative */}
      <section className="section section--warm">
        <div className="container container--wide">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '40px' }}>
            {NARRATIVE.map((b) => (
              <div key={b.n} style={{ borderTop: '2px solid var(--navy-800)', paddingTop: '22px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: '14px', marginBottom: '16px' }}>
                  <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-lg)', color: 'var(--clay-500)' }}>{b.n}</span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-xl)', letterSpacing: '-0.01em', color: 'var(--text-strong)', margin: 0 }}>{b.t}</h3>
                </div>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-base)', lineHeight: 1.6, color: 'var(--text-body)', margin: 0 }}>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonial */}
      <section className="section section--paper">
        <div className="container" style={{ maxWidth: '940px' }}>
          <Testimonial size="lg"
            quote={<>&ldquo;A rare and significant opportunity to <em>empower young people</em> — to create a safe, healthy environment for them to learn and grow.&rdquo;</>}
            name="Madison Square Boys &amp; Girls Club" role="On the Pinkerton Clubhouse" />
        </div>
      </section>

      {/* Next / CTA */}
      <section className="section section--ink">
        <div className="container container--wide">
          <div className="cta-band">
            <div style={{ maxWidth: '560px' }}>
              <Eyebrow tone="on-dark" rule>Keep exploring</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: '#fff', fontSize: 'var(--text-3xl)', lineHeight: 1.02, letterSpacing: '-0.02em', margin: '24px 0 0' }}>
                See how we approach every engagement.
              </h2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
              <Button variant="primary" onDark arrow href="#/experience">All experience</Button>
              <Button variant="ghost" onDark arrow href="#/contact">Start a project</Button>
            </div>
          </div>
        </div>
      </section>

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

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