/* global React, useViewport */
const { useState: useStateFC, useEffect: useEffectFC, useRef: useRefFC } = React;

/* ------------------------------------------------------------------ */
/* FeatureCarousel — Aesop-style full-bleed hero                       */
/*                                                                    */
/* Full-viewport image OR looping video, crossfade between projects.  */
/* Centered-bottom eyebrow + title + one-line blurb.                  */
/* Faint dots, no arrows. Auto-advance 8s, pause on hover.            */
/*                                                                    */
/* To use video: set `video: "assets/feature/my-clip.mp4"` on the     */
/* feature. Falls back to `image` if video fails or is absent.        */
/* ------------------------------------------------------------------ */

const FEATURES = [
  {
    eyebrow: "Featured project",
    project: "Adelaide Airport",
    tagline: "Gateway and Twig, specified across the gate lounge refresh.",
    collection: "Gateway · Twig",
    firm: "Woods Bagot",
    city: "Adelaide, Australia",
    year: 2025,
    image: "images/_legacy/projects/adelaide-airport.jpg",
    credit: "Florian Groehn",
    tone: "#b8a588",
    toneDeep: "#8a7760",
  },
  {
    eyebrow: "New for 2026",
    project: "Trio",
    tagline: "Mono-material LDPE, sculpted bucket seats.",
    collection: "Trio",
    firm: "Alexander Lotersztain",
    city: "Brisbane, Australia",
    year: 2026,
    image: "images/_legacy/collections/trio.webp",
    tone: "#a8a898",
    toneDeep: "#7c7c6b",
  },
  {
    eyebrow: "Featured project",
    project: "Jubilee Place",
    tagline: "Mochi, shaped to a premium hospitality foyer.",
    collection: "Mochi",
    firm: "Blight Rayner",
    city: "Brisbane, Australia",
    year: 2022,
    image: "images/_legacy/projects/jubilee-place.webp",
    tone: "#a89080",
    toneDeep: "#75604f",
  },
];

function FeatureCarousel() {
  const vw = useViewport();
  const isMobile = vw < 760;
  const [i, setI] = useStateFC(0);
  const [paused, setPaused] = useStateFC(false);

  useEffectFC(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % FEATURES.length), 8000);
    return () => clearInterval(id);
  }, [paused]);

  const f = FEATURES[i];

  return (
    <section
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      style={{
        position: "relative",
        width: "100%",
        height: isMobile ? "92vh" : "100vh",
        minHeight: isMobile ? 560 : 680,
        maxHeight: isMobile ? "none" : 900,
        overflow: "hidden",
        background: f.toneDeep,
        transition: "background 900ms ease",
      }}
    >
      {/* Media layers — crossfade */}
      {FEATURES.map((ff, idx) => (
        <div key={idx} style={{
          position: "absolute", inset: 0,
          opacity: idx === i ? 1 : 0,
          transition: "opacity 1200ms ease",
        }}>
          {ff.video ? (
            <video
              src={ff.video}
              autoPlay muted loop playsInline
              poster={ff.image || undefined}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : ff.image ? (
            <img
              src={ff.image} srcSet={window.IMG && window.IMG.srcsetFor(ff.image)} sizes={window.IMG && window.IMG.sizes()}
              alt={ff.project}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          ) : (
            <div style={{
              position: "absolute", inset: 0,
              background: `linear-gradient(135deg, ${ff.tone} 0%, ${ff.toneDeep} 100%)`,
            }}>
              <div style={{
                position: "absolute", bottom: 20, right: 24,
                fontSize: 9, letterSpacing: "0.18em", textTransform: "uppercase",
                color: "rgba(245,243,239,0.4)", fontWeight: 500,
              }}>
                Placeholder · image or video
              </div>
            </div>
          )}
        </div>
      ))}

      {/* Bottom gradient for legibility */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(to bottom, transparent 55%, rgba(26,25,23,0.5) 100%)",
        pointerEvents: "none",
      }} />

      {/* Centered-bottom caption */}
      <div style={{
        position: "absolute",
        left: 0, right: 0,
        bottom: isMobile ? 80 : 96,
        padding: isMobile ? "0 24px" : "0 32px",
        textAlign: "center",
        color: "#f5f3ef",
      }}>
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          fontWeight: 500, marginBottom: 16, opacity: 0.85,
        }}>
          {f.eyebrow}
        </div>
        <h2 style={{
          fontWeight: 500,
          fontSize: isMobile ? "clamp(22px, 5.5vw, 28px)" : "clamp(24px, 2vw, 34px)",
          lineHeight: 1.15,
          letterSpacing: "-0.01em",
          margin: "0 0 14px 0",
          minHeight: isMobile ? 0 : "1.2em",
        }}>
          {f.project}
        </h2>
        <p style={{
          fontSize: isMobile ? 13 : 14,
          lineHeight: 1.55,
          fontWeight: 400,
          margin: 0,
          opacity: 0.9,
          maxWidth: "52ch",
          marginLeft: "auto",
          marginRight: "auto",
          minHeight: isMobile ? 0 : "1.5em",
        }}>
          {f.tagline}
        </p>
      </div>

      {/* Faint dots, bottom-center */}
      <div style={{
        position: "absolute",
        bottom: isMobile ? 32 : 40,
        left: 0, right: 0,
        display: "flex",
        justifyContent: "center",
        gap: 10,
      }}>
        {FEATURES.map((_, idx) => (
          <button key={idx}
            onClick={() => setI(idx)}
            aria-label={`Show project ${idx + 1}`}
            style={{
              width: idx === i ? 24 : 6,
              height: 2,
              background: idx === i ? "rgba(245,243,239,0.95)" : "rgba(245,243,239,0.4)",
              border: "none",
              cursor: "pointer",
              padding: 0,
              transition: "width 320ms ease, background 320ms ease",
            }}
          />
        ))}
      </div>
    </section>
  );
}

window.FeatureCarousel = FeatureCarousel;