/* global React, Media, VideoPlate, VideoEmbed, useReveal, useLocale */
// Jullia — a single commission, treated like a gallery piece. Data-driven by
// window.JULLIA_CARS. Title, rework film, facts, restraint narrative, gallery,
// the obscured reaction, and a quiet way back / forward.

function CarDetail({ car: rawCar, onBack, onOpen }) {
  const { Eyebrow, Divider, Button } = window.JulliaDesignSystem_b654aa;
  const { t, localize } = useLocale();
  const ref = useReveal();
  const cars = (window.JULLIA_CARS || []).map(localize);
  const car = localize(rawCar);
  if (!car) return null;
  const next = cars[(cars.findIndex((c) => c.id === car.id) + 1) % Math.max(cars.length, 1)];

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

      {/* Back */}
      <section style={{ padding: 'var(--space-8) var(--margin-page) 0' }}>
        <button
          onClick={onBack}
          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', display: 'inline-flex', alignItems: 'center', gap: '0.7em' }}
        >
          <span aria-hidden="true">←</span> {t('detail.backLink')}
        </button>
      </section>

      {/* Title block */}
      <section style={{ padding: 'var(--space-7) var(--margin-page) var(--space-9)' }}>
        <div data-reveal style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 'var(--space-6)' }}>
          <div>
            <Eyebrow index={car.ref} accent style={{ marginBottom: 'var(--space-6)' }}>{t('detail.commissionLabel')}</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(44px, 7vw, 92px)', lineHeight: 0.98, letterSpacing: '-0.03em', color: 'var(--text-emphasis)', margin: 0 }}>
              {car.name}
            </h1>
          </div>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{car.year} · {t('footer.krakow')}</span>
        </div>
      </section>

      {/* Rework film */}
      <section style={{ padding: '0 var(--margin-page) var(--space-9)' }}>
        <div data-reveal>
          {car.youtubeId
            ? <VideoEmbed youtubeId={car.youtubeId} ratio="21 / 9" caption={car.videoCaption} />
            : <VideoPlate ratio="21 / 9" caption={car.videoCaption} />}
        </div>
      </section>

      {/* Facts strip */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal className="jx-facts-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(160px, 100%), 1fr))', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
          {car.facts.map((f, i) => (
            <div key={f.k} style={{ padding: 'var(--space-6) 0', borderLeft: i ? '1px solid var(--hairline-faint)' : 'none', paddingLeft: i ? 'var(--space-6)' : 0 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 'var(--space-4)' }}>{f.k}</div>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', color: 'var(--text-primary)' }}>{f.v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Narrative — restraint; no method revealed */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', maxWidth: 720 }}>
        <div data-reveal style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-7)' }}>
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(26px,4vw,44px)', lineHeight: 1.15, letterSpacing: '-0.015em', color: 'var(--text-primary)', margin: 0 }}>
            {car.lead}
          </p>
          {car.body.map((p, i) => (
            <p key={i} style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-lg)', lineHeight: 1.65, color: 'var(--text-secondary)', margin: 0 }}>{p}</p>
          ))}
        </div>
      </section>

      {/* Gallery pair */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)' }}>
        <div data-reveal className="jx-gallery-pair" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 'var(--space-6)' }}>
          <Media ratio="3 / 2" tone="raised" src={car.gallery[0].image} alt={car.gallery[0].caption} caption={car.gallery[0].caption} />
          <Media ratio="3 / 2" tone="raised" src={car.gallery[1].image} alt={car.gallery[1].caption} caption={car.gallery[1].caption} />
        </div>
      </section>

      {/* Owner reaction — the only 'testimonial', obscured and quiet */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', maxWidth: 820 }}>
        <div data-reveal>
          <Divider label={t('detail.reactionLabel')} />
          <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 'clamp(28px,4.5vw,54px)', lineHeight: 1.1, letterSpacing: '-0.015em', color: 'var(--text-emphasis)', margin: 'var(--space-8) 0 var(--space-6)' }}>
            “{car.reaction}”
          </p>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>{car.reactionBy}</span>
        </div>
      </section>

      {/* Next / invitation */}
      <section style={{ padding: '0 var(--margin-page) var(--section-gap)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 'var(--space-6)' }}>
        <div data-reveal>
          <Button variant="ghost" trailing="→" onClick={() => onOpen && next && onOpen(next.id)}>{t('detail.nextPrefix')}{next ? next.name : ''}</Button>
        </div>
        <div data-reveal>
          <Button variant="line" size="lg" trailing="→">{t('detail.requestCta')}</Button>
        </div>
      </section>
    </div>
  );
}

window.CarDetail = CarDetail;
