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

function ExperienceRow({ item }) {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.32fr) minmax(0,0.68fr)', gap: 'clamp(20px,4vw,56px)', padding: '28px 0', borderTop: '1px solid var(--line)' }} className="am-exp-row">
      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--type-h4)', color: 'var(--fg-0)', letterSpacing: '-0.01em' }}>{item.org}</span>
        <MonoLabel tone="faint">{item.period}</MonoLabel>
      </div>
      <div>
        <h3 style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 'var(--type-h4)', color: 'var(--fg-1)', margin: '0 0 8px' }}>{item.role}</h3>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.6, color: 'var(--fg-3)', margin: 0, maxWidth: '60ch' }}>{item.note}</p>
      </div>
    </div>
  );
}

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

  return (
    <div>
      {/* Intro */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px,1fr))', gap: 'clamp(32px,5vw,72px)', alignItems: 'center' }}>
          <div>
            <div style={{ marginBottom: '28px' }}><MonoLabel index={1} tone="muted">About</MonoLabel></div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-display)',
              lineHeight: 1.04, letterSpacing: 'var(--ls-display)', color: 'var(--fg-0)', margin: 0,
            }}>
              Driven by curiosity and a passion for method.
            </h1>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.55, color: 'var(--fg-2)', margin: '30px 0 0', maxWidth: '52ch' }}>
              I&rsquo;m an Industrial Design Engineer who believes the best design decisions live at the
              intersection of strategic thinking, engineering rigor, and a genuine understanding of the user.
              I work from first sketch to tooling-ready parametric CAD — and I care as much about how a part is
              made as how it looks.
            </p>
          </div>
          <ImageFrame src={D.portrait} alt="Alessandro Merli" label="Alessandro Merli — portrait" ratio="4 / 5" radius="lg" caption="EU citizen · Italian native · fluent English" />
        </div>
      </Section>

      {/* Experience */}
      <Section surface="raised">
        <SectionHeader index={2} eyebrow="Experience" title="Where I&rsquo;ve worked." />
        <div style={{ marginTop: 'clamp(28px,4vh,48px)' }}>
          {D.experience.map((e, i) => <ExperienceRow key={i} item={e} />)}
        </div>
      </Section>

      {/* Education + Tools */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,1fr))', gap: 'clamp(40px,6vw,96px)' }}>
          <div>
            <MonoLabel index={3} tone="muted">Education</MonoLabel>
            <div style={{ marginTop: '28px' }}>
              {D.education.map((ed, i) => (
                <div key={i} style={{ padding: '22px 0', borderTop: '1px solid var(--line)' }}>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h3)', color: 'var(--fg-0)', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{ed.degree}</h3>
                  <div style={{ display: 'flex', justifyContent: 'space-between', gap: '16px', flexWrap: 'wrap' }}>
                    <span style={{ fontSize: '15px', color: 'var(--fg-2)' }}>{ed.school}</span>
                    <MonoLabel tone="faint">{ed.period}</MonoLabel>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <MonoLabel index={4} tone="muted">Tools &amp; Strengths</MonoLabel>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '28px' }}>
              {D.tools.map((t) => <Badge key={t} variant="outline">{t}</Badge>)}
            </div>
            <div style={{ marginTop: '40px' }}>
              <MonoLabel tone="faint">Availability</MonoLabel>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '15px', lineHeight: 1.6, color: 'var(--fg-2)', margin: '14px 0 0', maxWidth: '40ch' }}>
                EU citizen, open to relocation and remote / European roles. Fluent English (TOEIC), Italian native.
              </p>
            </div>
          </div>
        </div>
      </Section>

      {/* CTA */}
      <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: '18ch' }}>
            Want the full picture? See the work.
          </h2>
          <Button variant="primary" size="lg" trailingArrow onClick={() => go('work')}>View work</Button>
        </div>
      </Section>
    </div>
  );
}

window.AboutScreen = AboutScreen;