/* global React */
const NS = window.AlessandroMerliPortfolioDesignSystem_251cec;
const { SectionHeader, AwardRow, MonoLabel, Badge, Card, Button, ImageFrame } = NS;

function RecognitionScreen({ go }) {
  const { Section } = window.AMLayout;
  const D = window.AM_DATA;

  return (
    <div>
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.75fr)', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }} className="am-rec-head">
          <SectionHeader size="xl" index={1} eyebrow="Recognition"
            title="Awards, exhibitions, and granted patents."
            description="Independent recognition for work that performs on the road and holds up in production." />
          <ImageFrame src="assets/recognition/made-show.jpg" alt="MADE bike show"
            caption="Exhibited at MADE — the handmade bicycle show" ratio="4 / 3" radius="lg" />
        </div>
      </Section>

      {/* Awards list */}
      <div style={{ padding: '0 var(--gutter)' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
          <div style={{ marginBottom: '8px' }}><MonoLabel tone="muted">Awards &amp; Exhibitions</MonoLabel></div>
          <div>
            {D.awards.map((a, i) => (
              <AwardRow key={i} title={a.title} org={a.org} project={a.project} year={a.year} badge={a.badge} />
            ))}
          </div>
        </div>
      </div>

      {/* Patents */}
      <Section surface="raised" style={{ marginTop: 'var(--section-y)' }}>
        <div style={{ marginBottom: 'clamp(28px,4vh,48px)' }}><MonoLabel index={2} tone="muted">Patents</MonoLabel></div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px,1fr))', gap: 'clamp(20px,3vw,32px)' }}>
          {D.patents.map((p, i) => (
            <Card key={i} padding="lg" surface="card">
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '16px', marginBottom: '20px' }}>
                <Badge variant="solid" dot>{p.status}</Badge>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--fg-3)', letterSpacing: '0.06em' }}>{p.number}</span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h2)', color: 'var(--fg-0)', margin: '0 0 10px', letterSpacing: '-0.018em' }}>{p.title}</h3>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', color: 'var(--fg-3)', margin: 0 }}>{p.project}</p>
            </Card>
          ))}
        </div>
      </Section>

      {/* Headline metrics */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px,1fr))', gap: 'clamp(24px,4vw,48px)', borderTop: '1px solid var(--line-strong)', paddingTop: 'clamp(32px,5vh,56px)' }}>
          {[['8', 'Full-cycle launches'], ['30%', 'R&D time reduced'], ['2', 'Granted patents'], ['5%', 'Aero gain, Aeroscoop']].map(([n, l]) => (
            <div key={l}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(2.6rem,5vw,4rem)', lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--fg-0)' }}>{n}</div>
              <div style={{ marginTop: '12px' }}><MonoLabel tone="muted">{l}</MonoLabel></div>
            </div>
          ))}
        </div>
      </Section>

      <Section surface="void" tight>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px', flexWrap: 'wrap' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h1)', letterSpacing: '-0.02em', color: 'var(--fg-0)', margin: 0, maxWidth: '20ch' }}>
            Looking for someone who bridges design and engineering?
          </h2>
          <Button variant="primary" size="lg" trailingArrow onClick={() => go('contact')}>Get in touch</Button>
        </div>
      </Section>
    </div>
  );
}

window.RecognitionScreen = RecognitionScreen;