// mapemedia — Architektur-Visualisierung reference marquee.
// Auto-scrolls right→left, pauses on hover, click opens a lightbox.

const REF_IMAGES = [
  { src: 'mapemedia/assets/ref/ref-house-sunset.png', cap: 'Einfamilienhaus · Außenvisualisierung' },
  { src: 'mapemedia/assets/ref/ref-kitchen-marble.jpg', cap: 'Küche · Innenvisualisierung' },
  { src: 'mapemedia/assets/ref/ref-bad.png', cap: 'Badezimmer · Innenvisualisierung' },
  { src: 'mapemedia/assets/ref/ref-dollhouse.png', cap: 'Grundriss · 3D-Dollhouse' },
  { src: 'mapemedia/assets/ref/ref-office.png', cap: 'Büro · Innenvisualisierung' },
  { src: 'mapemedia/assets/ref/ref-kitchen-evening.jpg', cap: 'Küche · Abendstimmung' },
  { src: 'mapemedia/assets/ref/ref-bath-iso.png', cap: 'Bad · 3D-Schnitt' },
  { src: 'mapemedia/assets/ref/ref-sink.png', cap: 'Detail · Küchenarmatur' },
  { src: 'mapemedia/assets/ref/ref-tinyhouse.jpg', cap: 'Tiny House · Außenvisualisierung' },
  { src: 'mapemedia/assets/ref/ref-lava-hero.png', cap: 'Produkt · Lava-Inszenierung' },
  { src: 'mapemedia/assets/ref/ref-bottle-studio-sm.png', cap: 'Produkt · Studio-Freisteller' },
  { src: 'mapemedia/assets/ref/ref-schlafzimmer.jpg', cap: 'Schlafzimmer · Innenvisualisierung' },
];

const RefCard = ({ img, onOpen }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={() => onOpen(img)}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        all: 'unset', cursor: 'pointer', position: 'relative', display: 'block',
        height: '100%', flex: '0 0 auto', overflow: 'hidden',
        border: '.5px solid rgba(255,255,255,.08)', background: 'var(--surface-dark-elevated)',
      }}
    >
      <img src={img.src} alt={img.cap} draggable="false" style={{
        height: '100%', width: 'auto', display: 'block', objectFit: 'cover',
        transition: 'transform .5s ease', transform: hover ? 'scale(1.04)' : 'scale(1)',
      }} />
      {/* caption + zoom affordance */}
      <span aria-hidden style={{
        position: 'absolute', left: 0, right: 0, bottom: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
        padding: '14px 16px',
        background: 'linear-gradient(180deg, rgba(26,26,26,0) 0%, rgba(26,26,26,.82) 100%)',
        opacity: hover ? 1 : 0, transition: 'opacity .25s',
      }}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, fontWeight: 500, letterSpacing: '.16em', textTransform: 'uppercase', color: '#fff' }}>{img.cap}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 11, color: 'var(--primary)', flexShrink: 0 }}>vergrößern ↗</span>
      </span>
      {/* copper top accent on hover */}
      <span aria-hidden style={{ position: 'absolute', left: 0, right: 0, top: 0, height: 2, background: 'var(--primary)', transform: hover ? 'scaleX(1)' : 'scaleX(0)', transformOrigin: 'left', transition: 'transform .3s' }} />
      <AILabel position="tl" />
    </button>
  );
};

const Lightbox = ({ img, onClose }) => {
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);
  if (!img) return null;
  return (
    <div onClick={onClose} role="dialog" aria-modal="true" style={{
      position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(26,26,26,.95)',
      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '48px',
    }}>
      <button onClick={onClose} aria-label="Schließen" style={{
        all: 'unset', cursor: 'pointer', position: 'absolute', top: 24, right: 32,
        width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: '#fff', fontSize: 30, fontWeight: 200, lineHeight: 1, border: '.5px solid rgba(255,255,255,.2)',
      }}>×</button>
      <img src={img.src} alt={img.cap} onClick={(e) => e.stopPropagation()} style={{
        maxWidth: '90vw', maxHeight: '80vh', width: 'auto', height: 'auto', display: 'block',
        border: '.5px solid rgba(255,255,255,.12)', objectFit: 'contain',
      }} />
      <div style={{
        marginTop: 20, fontFamily: 'var(--font-sans)', fontSize: 11, fontWeight: 500,
        letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,.7)',
      }}>{img.cap} <span style={{ color: 'var(--primary)' }}>· KI-generiert</span></div>
    </div>
  );
};

const ReferenceMarquee = () => {
  const [open, setOpen] = React.useState(null);
  const items = [...REF_IMAGES, ...REF_IMAGES];
  return (
    <section className="band dark" style={{ overflow: 'hidden', background: 'var(--surface-dark-deep)' }}>
      <div className="container">
        <SectionHead
          eyebrow="Referenzen"
          title="Ausgewählte <em>Referenzen</em>."
          intro="Ein laufender Querschnitt durch meine Produkt-, Architektur- und Innenraum-Visualisierungen. — zum Vergrößern anklicken." />
      </div>

      {/* full-bleed marquee track */}
      <div className="ref-marquee" style={{ position: 'relative', marginTop: 8 }}>
        <div className="ref-track" style={{
          display: 'flex', gap: 16, width: 'max-content', height: 300,
          animation: 'marquee 60s linear infinite', padding: '4px 48px',
        }}>
          {items.map((img, i) => <RefCard key={i} img={img} onOpen={setOpen} />)}
        </div>
      </div>

      {open && <Lightbox img={open} onClose={() => setOpen(null)} />}

      <style>{`
        .ref-marquee:hover .ref-track { animation-play-state: paused; }
        @media (max-width: 900px){ .ref-track { height: 220px !important; padding-left: 24px !important; padding-right: 24px !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { ReferenceMarquee });