/* global React, window */
const DS = window.ACONADesignSystem_e7dd84;
const { Button, Eyebrow, ArrowLink, TeamCard, Testimonial, SiteHeader, SiteFooter, SectionHeader, Field, Input, Textarea, Select } = 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 VALUES = [
  { n: '01', t: 'Trust over transactions', d: 'We measure success by long-term impact on the organizations and communities we serve — not by the size of a single deal.' },
  { n: '02', t: 'Senior-led, always', d: 'Matt and Toby are directly involved in every engagement. Clients get advisors, not just project managers.' },
  { n: '03', t: 'Planning over reacting', d: 'Careful, mission-aligned planning up front is what keeps complex capital projects on budget and on schedule.' },
  { n: '04', t: 'Small by design', d: 'We scale a trusted cohort of consultants to fit each project — flexible capacity without losing focus or vision.' },
];

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

      {/* Intro */}
      <section className="section section--paper">
        <div className="container container--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '56px', alignItems: 'end' }}>
            <div>
              <Eyebrow number="—" rule>About ACONA</Eyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--display-sm)', lineHeight: .98, letterSpacing: '-0.03em', color: 'var(--text-strong)', margin: '26px 0 0' }}>
                Lifelong friends.<br />A shared mission.
              </h1>
            </div>
            <div>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.7, color: 'var(--text-body)', margin: '0 0 18px' }}>
                Matt Hopkins and Toby Rappaport grew up on the same block in Park Slope. Decades later — raising their own families in Brooklyn — they founded ACONA in 2021 on a shared commitment to their community and to the mission-driven organizations that shape it.
              </p>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.7, color: 'var(--text-muted)', margin: 0 }}>
                Today ACONA is a full-service real estate and owner's representation firm serving the greater New York area — trusted by some of the city's most prestigious cultural and civic institutions.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="section section--tight section--warm" id="team">
        <div className="container container--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px', maxWidth: '900px', margin: '0 auto' }}>
            <TeamCard image={'../../assets/photography/headshot-a.jpg'} name="Matt Hopkins" role="Co-Founder"
              bio="The son of a contractor and cultural leader, Matt finds creative leasing solutions for nonprofits, arts organizations and makers. Before ACONA he was a Managing Director at Vicus Partners, with prior roles at the Brooklyn Navy Yard and L+M Development."
              email="matt@aconarea.com" phone="347.276.0627" />
            <TeamCard image={'../../assets/photography/headshot-b.jpg'} name="Toby Rappaport" role="Co-Founder"
              bio="Toby helps mission-driven organizations deliver capital projects through creative problem-solving and rigorous management. He began at BAM — managing $90M in capital work including the Fisher Building — and later led projects at Zubatkin Owner Representation."
              email="toby@aconarea.com" phone="917.734.0815" />
          </div>
        </div>
      </section>

      {/* The ACONA Way */}
      <section className="section section--paper">
        <div className="container container--wide">
          <SectionHeader eyebrow="The ACONA Way" title="How we work." />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2px', marginTop: 'var(--space-6)', borderTop: '1px solid var(--border-hairline)' }}>
            {VALUES.map((v) => (
              <div key={v.n} style={{ padding: '32px 40px 32px 0', borderBottom: '1px solid var(--border-hairline)', display: 'flex', gap: '22px' }}>
                <span style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-lg)', color: 'var(--clay-500)', lineHeight: 1 }}>{v.n}</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 10px' }}>{v.t}</h3>
                  <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0, maxWidth: '46ch' }}>{v.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Community band */}
      <section className="band">
        <img className="band__img" src={'../../assets/photography/nyc-skyline.jpg'} alt="New York City" />
        <div className="band__scrim" />
        <div className="container container--wide band__inner">
          <div style={{ maxWidth: '620px' }}>
            <Eyebrow tone="on-dark" rule>Community</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, color: '#fff', fontSize: 'var(--text-3xl)', lineHeight: 1.02, letterSpacing: '-0.02em', margin: '26px 0 22px', textWrap: 'balance' }}>
              A throughline, not a statement.
            </h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.65, color: 'var(--navy-100)', margin: 0, maxWidth: '52ch' }}>
              As native New Yorkers, Matt and Toby know the impact of diversity, equity, inclusion and belonging in building strong communities. At ACONA, it's a throughline to the founders' values and to the work the firm chooses to take on.
            </p>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section className="section section--paper" id="contact">
        <div className="container container--wide">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: '64px', alignItems: 'start' }}>
            <div>
              <Eyebrow number="—" rule>Contact</Eyebrow>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-3xl)', lineHeight: 1, letterSpacing: '-0.02em', color: 'var(--text-strong)', margin: '24px 0 20px' }}>
                Let's discuss your next project.
              </h2>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-md)', lineHeight: 1.6, color: 'var(--text-muted)', margin: '0 0 32px', maxWidth: '42ch' }}>
                Whether you're weighing a lease, planning a capital project or navigating public funding, we'd love to hear what you're working on.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', borderTop: '1px solid var(--border-hairline)', paddingTop: '24px' }}>
                <ArrowLink href="mailto:hello@aconarea.com">hello@aconarea.com</ArrowLink>
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-cap)', color: 'var(--text-muted)' }}>Brooklyn, New York · Serving the greater NYC area</span>
              </div>
            </div>
            <form onSubmit={(e) => e.preventDefault()} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '22px' }}>
              <Field label="Full name" htmlFor="cn" required><Input id="cn" placeholder="Jane Rivera" /></Field>
              <Field label="Organization" htmlFor="co"><Input id="co" placeholder="Brooklyn Arts Exchange" /></Field>
              <Field label="Email" htmlFor="ce" required><Input id="ce" type="email" placeholder="jane@org.org" /></Field>
              <Field label="How can we help?" htmlFor="cs">
                <Select id="cs" defaultValue="">
                  <option value="" disabled>Select a service…</option>
                  <option>Real Estate Brokerage</option>
                  <option>Owner's Representation</option>
                  <option>Public Funding Support</option>
                  <option>Not sure yet</option>
                </Select>
              </Field>
              <div style={{ gridColumn: '1 / -1' }}>
                <Field label="About your project" htmlFor="cm" hint="A few sentences is plenty — we'll take it from there.">
                  <Textarea id="cm" placeholder="We're planning a capital project and need help navigating funding and construction…" />
                </Field>
              </div>
              <div style={{ gridColumn: '1 / -1' }}>
                <Button variant="primary" arrow type="submit">Send message</Button>
              </div>
            </form>
          </div>
        </div>
      </section>

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

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