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

function HomeScreen({ heroVariant = 'A', go }) {
  const { Section, ClientStrip } = window.AMLayout;
  const D = window.AM_DATA;
  const HomeHero = window.HomeHero;

  return (
    <div>
      <HomeHero variant={heroVariant} onWork={() => go('work')} onContact={() => go('contact')} />

      <ClientStrip label="Work spanning" items={D.clients} />

      {/* Selected work */}
      <Section id="work">
        <div style={{ marginBottom: 'clamp(40px,6vh,72px)' }}>
          <SectionHeader index={1} eyebrow="Selected Work"
            title="Six projects, concept to tooling."
            description="Each one shipped from first sketch to a manufacturable part — surfacing, FEM, DFM, and supplier coordination."
            action={<Button variant="secondary" onClick={() => go('work')}>All work →</Button>} />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 'clamp(28px,3vw,44px)' }}>
          {D.projects.map((p) => (
            <ProjectCard key={p.id} index={p.index} title={p.title} client={p.client} year={p.year}
              brief={p.brief} imageSrc={p.card || p.hero} imageLabel={`${p.title} — ${p.client}`} ratio="4 / 3"
              href={`#p/${p.id}`}
              onClick={(e) => { e.preventDefault(); e.stopPropagation(); go('product', p.id); }} />
          ))}
        </div>
      </Section>

      {/* About teaser */}
      <Section surface="raised">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px,1fr))', gap: 'clamp(28px,5vw,72px)', alignItems: 'flex-start' }}>
          <div>
            <MonoLabel index={2} tone="muted">About</MonoLabel>
          </div>
          <div style={{ gridColumn: 'span 1' }}>
            <p style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h1)',
              lineHeight: 1.18, letterSpacing: '-0.015em', color: 'var(--fg-0)', margin: 0, maxWidth: '24ch',
            }}>
              The best decisions live at the intersection of strategy, engineering rigor, and the rider.
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.55, color: 'var(--fg-2)', margin: '28px 0 32px', maxWidth: '52ch' }}>
              Industrial Designer at Cinelli since 2021 — eight full-cycle launches, R&D timelines cut by up to 30%,
              and metal 3D printing brought into serial production.
            </p>
            <Button variant="ghost" trailingArrow onClick={() => go('about')}>More about me</Button>
          </div>
        </div>
      </Section>

      {/* Recognition teaser */}
      <Section>
        <div style={{ marginBottom: '8px' }}>
          <SectionHeader index={3} eyebrow="Recognition"
            title="Awarded, patented, raced."
            action={<Button variant="secondary" onClick={() => go('recognition')}>All recognition →</Button>} />
        </div>
        <div style={{ marginTop: 'clamp(28px,4vh,52px)' }}>
          {D.awards.map((a, i) => (
            <AwardRow key={i} title={a.title} org={a.org} project={a.project} year={a.year} badge={a.badge} />
          ))}
        </div>
      </Section>
    </div>
  );
}

window.HomeScreen = HomeScreen;