/* global React, Media, useReveal, useLocale */
// Jullia — Car Audio. The invisible rework, then the commissions as tiles.
// Clicking a tile opens that car's detail page (description + rework film).

function CarAudio({ onOpen }) {
  const { Eyebrow, Divider } = window.JulliaDesignSystem_b654aa;
  const { t, localize } = useLocale();
  const cars = (window.JULLIA_CARS || []).map(localize);
  const ref = useReveal();

  const steps = t('carAudio.steps') || [];

  return (
    <div ref={ref} style={{ background: 'var(--canvas)' }}>

      {/* Header statement */}
      <section style={{ minHeight: '64vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '0 var(--margin-page)' }}>
        <div data-reveal>
          <Eyebrow index={t('nav.carAudio')} style={{ marginBottom: 'var(--space-6)' }}>{t('carAudio.eyebrow')}</Eyebrow>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(52px, 9vw, 108px)', lineHeight: 0.98, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: '0 0 var(--space-7)', maxWidth: 1100 }}>
            {t('carAudio.heroLine1')}<br />{t('carAudio.heroLine2')}<br />{t('carAudio.heroLine3')}
          </h1>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: 520, margin: 0 }}>
            {t('carAudio.heroSub')}
          </p>
        </div>
      </section>

      {/* The rework — four quiet steps */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal style={{ marginBottom: 'var(--space-8)' }}><Divider label={t('common.invisibleRework')} /></div>
        <div className="jx-grid-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(240px, 100%), 1fr))', gap: 'var(--space-8)' }}>
          {steps.map((s, i) => (
            <article data-reveal key={s.t} style={{ borderTop: '1px solid var(--hairline)', paddingTop: 'var(--space-5)' }}>
              <Eyebrow index={String(i + 1).padStart(2, '0')} style={{ marginBottom: 'var(--space-6)' }}>{s.t}</Eyebrow>
              <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-base)', lineHeight: 1.55, color: 'var(--text-secondary)', margin: 0 }}>{s.c}</p>
            </article>
          ))}
        </div>
      </section>

      {/* The bench — a supporting image */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal>
          <Media ratio="21 / 9" src="assets/img/workshop-bench.jpg" alt="" showCaption={false} />
        </div>
      </section>

      {/* Commissions — the tiles */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal style={{ marginBottom: 'var(--space-8)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <Eyebrow>{t('carAudio.commissionsLabel')}</Eyebrow>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{cars.length} {t('carAudio.builds')}</span>
        </div>
        <div className="jx-grid-reveal" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(340px, 100%), 1fr))', gap: 'var(--space-7)' }}>
          {cars.map((car) => (
            <CarTile key={car.id} car={car} domainLabel={t('nav.carAudio')} viewLabel={t('common.view')} onOpen={onOpen} />
          ))}
        </div>
      </section>
    </div>
  );
}

// A single commission tile. Hover lifts the image out of shadow and reveals the
// action. The whole tile is clickable.
function CarTile({ car, domainLabel, viewLabel, onOpen }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      data-reveal
      onClick={() => onOpen && onOpen(car.id)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{ cursor: 'pointer', border: '1px solid var(--hairline)', borderColor: hover ? 'var(--hairline-strong)' : 'var(--hairline)', transition: 'border-color var(--dur-med) var(--ease-quiet)', background: 'var(--surface)' }}
    >
      <div className="jx-tile-media" style={{ position: 'relative', aspectRatio: '3 / 2', background: 'var(--surface-inset)', overflow: 'hidden' }}>
        {car.tileImage && (
          <img
            src={car.tileImage}
            alt={car.name}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
              filter: 'grayscale(0.55) contrast(1.08) brightness(0.82)',
              transform: hover ? 'scale(1.045)' : 'scale(1)',
              transition: 'transform var(--dur-slow) var(--ease-door)',
            }}
          />
        )}
        <div style={{ position: 'absolute', inset: 0, background: car.tileImage ? 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5) 90%), radial-gradient(120% 100% at 30% 15%, rgba(255,255,255,0.08), transparent 55%)' : 'radial-gradient(120% 100% at 30% 15%, rgba(255,255,255,0.06), transparent 55%)', opacity: hover ? 1 : 0.85, transition: 'opacity var(--dur-med) var(--ease-quiet)' }} />
        <span style={{ position: 'absolute', top: 'var(--space-5)', left: 'var(--space-5)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>№ {car.ref}</span>
        <span style={{ position: 'absolute', bottom: 'var(--space-5)', left: 'var(--space-5)', right: 'var(--space-5)', fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-sm)', color: car.tileImage ? 'var(--text-secondary)' : 'var(--text-tertiary)', lineHeight: 1.4 }}>{car.tileCaption}</span>
      </div>
      <div style={{ padding: 'var(--space-6)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 'var(--space-5)' }}>
        <div>
          <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-xl)', letterSpacing: '-0.02em', color: 'var(--text-emphasis)', margin: '0 0 6px' }}>{car.name}</h3>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-mono)', color: 'var(--text-tertiary)' }}>{car.year} · {domainLabel}</span>
        </div>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: hover ? 'var(--text-emphasis)' : 'var(--text-secondary)', display: 'inline-flex', alignItems: 'center', gap: '0.7em', transition: 'var(--t-hover)', whiteSpace: 'nowrap' }}>
          {viewLabel} <span aria-hidden="true" style={{ color: 'var(--accent)' }}>→</span>
        </span>
      </div>
    </article>
  );
}

window.CarAudio = CarAudio;