webseite_BB-Apartment2026/components/ui/Impressions.tsx

"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";

const tilePools = [
  [
    "/images/houses/herdweg/impressions/11.png",
    "/images/houses/herdweg/impressions/MKE_1986.JPG",
    "/images/houses/herdweg/impressions/MKE_2042.JPG",
  ],
  [
    "/images/houses/herdweg/impressions/MKE_1974.jpg",
    "/images/houses/herdweg/impressions/MKE_2027.jpg",
  ],
  [
    "/images/houses/herdweg/impressions/MKE_2030.jpg",
    "/images/houses/herdweg/impressions/MKE_2034.JPG",
  ],
  [
    "/images/houses/herdweg/impressions/MKE_2037.jpg",
    "/images/houses/herdweg/impressions/MKE_2038.JPG",
  ],
];

function nextFromPool(pool: string[], exclude: string) {
  const filtered = pool.filter((src) => src !== exclude);
  if (filtered.length === 0) return pool[0];
  return filtered[Math.floor(Math.random() * filtered.length)];
}

interface ImpressionsTileProps {
  pool: string[];
  initialSrc: string;
  className?: string;
}

function ImpressionsTile({ pool, initialSrc, className = "" }: ImpressionsTileProps) {
  const [current, setCurrent] = useState(initialSrc);
  const [visible, setVisible] = useState(true);

  const rotate = useCallback(() => {
    setVisible(false);
    setTimeout(() => {
      setCurrent((prev) => nextFromPool(pool, prev));
      setVisible(true);
    }, 700);
  }, [pool]);

  useEffect(() => {
    let timeout: NodeJS.Timeout;

    const schedule = () => {
      const delay = 6000 + Math.random() * 6000;
      timeout = setTimeout(() => {
        rotate();
        schedule();
      }, delay);
    };

    schedule();
    return () => clearTimeout(timeout);
  }, [rotate]);

  return (
    <div
      className={`relative overflow-hidden rounded-2xl shadow-md hover:shadow-xl transition-shadow ${className}`}
    >
      <Image
        src={current}
        alt="Impression"
        fill
        className={`object-cover transition-all duration-700 ease-in-out ${
          visible
            ? "opacity-100 translate-x-0"
            : "opacity-0 -translate-x-8"
        }`}
        sizes="(max-width: 768px) 100vw, 33vw"
      />
    </div>
  );
}

interface ImpressionsProps {
  title: string;
  subtitle: string;
}

export function Impressions({ title, subtitle }: ImpressionsProps) {
  return (
    <section className="py-24 bg-brand-grey-soft/30">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <p className="text-brand-green font-semibold mb-2 uppercase tracking-wider text-sm">
            {subtitle}
          </p>
          <h2 className="text-4xl font-bold mb-4 text-brand-grey-dark">
            {title}
          </h2>
          <div className="w-20 h-1 bg-brand-green mx-auto rounded-full" />
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 auto-rows-[220px]">
          <ImpressionsTile
            pool={tilePools[0]}
            initialSrc={tilePools[0][0]}
            className="md:col-span-2 md:row-span-2"
          />
          <ImpressionsTile pool={tilePools[1]} initialSrc={tilePools[1][0]} />
          <ImpressionsTile pool={tilePools[2]} initialSrc={tilePools[2][0]} />
          <ImpressionsTile
            pool={tilePools[3]}
            initialSrc={tilePools[3][0]}
            className="md:col-span-3"
          />
        </div>
      </div>
    </section>
  );
}