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

function SpecItem({ label, body }) {
  if (!body) return null;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', paddingTop: '20px', borderTop: '1px solid var(--line)' }}>
      <MonoLabel tone="muted">{label}</MonoLabel>
      <p style={{ fontFamily: 'var(--font-body)', fontSize: '15.5px', lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{body}</p>
    </div>
  );
}

function ProductPage({ project, go, next }) {
  const { Section } = window.AMLayout;
  const p = project;

  return (
    <div>
      {/* Header */}
      <Section tight>
        <button onClick={() => go('work')} style={{
          display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'transparent', border: 'none',
          cursor: 'pointer', padding: 0, marginBottom: 'clamp(36px,6vh,64px)', color: 'var(--fg-3)',
          fontFamily: 'var(--font-mono)', fontSize: 'var(--type-label)', letterSpacing: '0.1em', textTransform: 'uppercase',
        }}>
          <span aria-hidden="true">←</span> All work
        </button>

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1.2fr) minmax(0,0.8fr)', gap: 'clamp(28px,5vw,72px)', alignItems: 'end' }} className="am-pp-head">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '16px', flexWrap: 'wrap', marginBottom: '20px' }}>
              <MonoLabel index={p.index} tone="muted">{p.client} · {p.year}</MonoLabel>
              {p.patent && <Badge variant="outline">Patent · {p.patent}</Badge>}
            </div>
            <h1 style={{
              fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-display)',
              lineHeight: 0.98, letterSpacing: 'var(--ls-display)', color: 'var(--fg-0)', margin: 0,
            }}>{p.title}</h1>
          </div>
          <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-lead)', lineHeight: 1.55, color: 'var(--fg-2)', margin: 0 }}>
            {p.summary}
          </p>
        </div>
      </Section>

      {/* Hero image */}
      <div style={{ padding: '0 var(--gutter)' }}>
        <figure style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '12px' }}>
          <div style={{ width: '100%', aspectRatio: '16 / 9', overflow: 'hidden', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)', background: p.heroBg || 'var(--bg-void)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <img src={p.hero} alt={p.title} style={{ width: p.heroScale ? (p.heroScale*100)+'%' : '100%', height: p.heroScale ? (p.heroScale*100)+'%' : '100%', objectFit: p.heroFit || 'cover', display: 'block' }} />
          </div>
          {p.heroCaption && (
            <figcaption style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--type-micro)', letterSpacing: '0.04em', color: 'var(--fg-4)', textTransform: 'uppercase' }}>{p.heroCaption}</figcaption>
          )}
        </figure>
      </div>

      {/* Spec: Role / Brief / Process + Outcome */}
      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,0.9fr) minmax(0,1.1fr)', gap: 'clamp(36px,6vw,96px)', alignItems: 'start' }} className="am-pp-spec">
          <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
            <SpecItem label="Role" body={p.role} />
            <SpecItem label="Brief" body={p.brief} />
            <SpecItem label="Process" body={p.process} />
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: '32px', paddingTop: '20px', borderTop: '1px solid var(--line-strong)' }}>
            <div>
              <MonoLabel tone="bright">Outcome</MonoLabel>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h2)',
                lineHeight: 1.28, letterSpacing: '-0.012em', color: 'var(--fg-0)', margin: '20px 0 0',
              }}>{p.outcome}</p>
            </div>
            {(p.awards && p.awards.length > 0) && (
              <div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
                {p.awards.map((a, i) => <Badge key={i} variant="solid">{a}</Badge>)}
              </div>
            )}
          </div>
        </div>
      </Section>

      {/* Gallery */}
      {p.galleryGroups && p.galleryGroups.length > 0 && (
        <Section surface="raised">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(48px,7vh,88px)' }}>
            {p.galleryGroups.map((grp, gi) => (
              <div key={gi}>
                <div style={{ marginBottom: 'clamp(20px,3vh,32px)' }}>
                  <MonoLabel tone="muted">{grp.label}</MonoLabel>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${p.galleryMin || 320}px, 1fr))`, gap: 'clamp(20px,2.4vw,36px)' }}>
                  {grp.items.map((g, i) => (
                    <div key={i} style={g.span ? { gridColumn: `span ${g.span}` } : undefined}>
                      <ImageFrame src={g.src} alt={g.caption} caption={g.caption}
                        ratio={g.ratio || '4 / 3'} radius="md" cover={g.cover !== false} />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </Section>
      )}
      {p.gallery && p.gallery.length > 0 && (
        <Section surface="raised">
          <div style={{ marginBottom: 'clamp(28px,4vh,48px)' }}>
            <MonoLabel tone="muted">Gallery</MonoLabel>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(${p.galleryMin || 320}px, 1fr))`, gap: 'clamp(20px,2.4vw,36px)' }}>
            {p.gallery.map((g, i) => (
              <div key={i} style={g.span ? { gridColumn: `span ${g.span}` } : undefined}>
                <ImageFrame src={g.src} alt={g.caption} caption={g.caption}
                  ratio={g.ratio || '4 / 3'} radius="md" cover={g.cover !== false} />
              </div>
            ))}
          </div>
        </Section>
      )}

      {/* Video */}
      {p.video && (
        <Section surface="void">
          <div style={{ marginBottom: 'clamp(24px,3.5vh,40px)' }}>
            <MonoLabel tone="muted">{p.video.label || 'Motion'}</MonoLabel>
          </div>
          <figure style={{ margin: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
            <div style={{
              width: '100%', maxWidth: p.video.maxWidth || '820px',
              borderRadius: 'var(--radius-lg)', overflow: 'hidden',
              border: '1px solid var(--line)', background: p.video.bg || '#ffffff',
            }}>
              <video
                src={p.video.src}
                poster={p.video.poster}
                controls
                muted
                loop
                playsInline
                preload="metadata"
                style={{ width: '100%', height: 'auto', display: 'block' }}
              />
            </div>
            {p.video.caption && (
              <figcaption style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--type-micro)', letterSpacing: '0.04em', color: 'var(--fg-4)', textTransform: 'uppercase', textAlign: 'center' }}>{p.video.caption}</figcaption>
            )}
          </figure>
        </Section>
      )}

      {/* Next project */}
      {next && (
        <Section surface="void" tight>
          <button onClick={() => go('product', next.id)} style={{
            width: '100%', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '24px', flexWrap: 'wrap',
          }}>
            <div>
              <MonoLabel tone="muted">Next project</MonoLabel>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--type-h1)', letterSpacing: '-0.02em', color: 'var(--fg-0)', margin: '14px 0 0' }}>
                {next.title}
              </h2>
            </div>
            <span aria-hidden="true" style={{ fontSize: 'clamp(2rem,4vw,3.4rem)', color: 'var(--fg-3)' }}>→</span>
          </button>
        </Section>
      )}
    </div>
  );
}

window.ProductPage = ProductPage;