// v:1778882354019-7114
// Bike imagery components: gallery carousel + still photo, both plain <img>.
const { useState: __us, useEffect: __ue } = React;

// Full carousel for the product page — supports arrows + thumbnails + keyboard
const BikeGallery = ({ bikeId }) => {
  const images = (window.GALLERY && window.GALLERY[bikeId]) || [];
  const [idx, setIdx] = __us(0);
  const has = images.length > 0;
  const multi = images.length > 1;

  const prev = React.useCallback(() => setIdx(i => (i - 1 + images.length) % images.length), [images.length]);
  const next = React.useCallback(() => setIdx(i => (i + 1) % images.length), [images.length]);

  __ue(() => {
    if (!multi) return;
    const onKey = e => {
      if (e.target && (e.target.tagName === "INPUT" || e.target.tagName === "TEXTAREA")) return;
      if (e.key === "ArrowLeft") prev();
      else if (e.key === "ArrowRight") next();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [prev, next, multi]);

  // Touch swipe
  const touch = React.useRef({x:0});
  const onTouchStart = e => { touch.current.x = e.touches[0].clientX; };
  const onTouchEnd = e => {
    const dx = e.changedTouches[0].clientX - touch.current.x;
    if (dx > 40) prev();
    else if (dx < -40) next();
  };

  if (!has) {
    return (
      <div className="bike-photo hero">
        <div style={{padding:30, color:"var(--ink-mute)", fontFamily:"var(--f-mono)", fontSize:12, letterSpacing:".06em", textTransform:"uppercase", textAlign:"center"}}>
          Geen foto beschikbaar
        </div>
      </div>
    );
  }

  const isV20 = bikeId === "v20";

  return (
    <div className="bike-gallery">
      <div className="gallery-stage" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
        {images.map((src, i) => (
          <img key={src} src={src} alt={`${isV20 ? "V20 Pro" : "GT2000"} foto ${i+1}`}
            className={"gallery-img " + (i === idx ? "is-active" : "")}/>
        ))}
        {multi && (
          <>
            <button className="gallery-arrow prev" onClick={prev} aria-label="Vorige foto">
              <Icon name="arrowLeft" size={20}/>
            </button>
            <button className="gallery-arrow next" onClick={next} aria-label="Volgende foto">
              <Icon name="arrow" size={20}/>
            </button>
            <div className="gallery-counter">{String(idx+1).padStart(2,"0")} / {String(images.length).padStart(2,"0")}</div>
          </>
        )}
        <div className="bike-photo-badge">
          <span className="dot"/>
          {isV20 ? "V20 PRO" : "GT2000"}
        </div>
      </div>
      {multi && (
        <div className="gallery-thumbs">
          {images.map((src, i) => (
            <button key={src} onClick={()=>setIdx(i)}
              className={"gallery-thumb " + (i === idx ? "is-active" : "")}
              aria-label={`Foto ${i+1}`}>
              <img src={src} alt=""/>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

// GALLERY is defined in data.jsx — no override needed here

window.BikeGallery = BikeGallery;

// Plain <img> — no editor UI, no drop targets, just product photos.
const BikePhoto = ({ bikeId, slotKey = "hero", className, style }) => {
  const isV20 = bikeId === "v20";
  const gal = (window.GALLERY && window.GALLERY[bikeId]) || [];
  const src = gal[0] || (isV20 ? "assets/v20-hero.jpg" : "assets/gt2000-hero.jpg");
  return (
    <div className={"bike-photo " + (className || "")} style={style}>
      <img
        src={src}
        alt={isV20 ? "Zyro V20 Pro" : "Zyro GT2000"}
        style={{width:"100%", height:"100%", objectFit:"contain", display:"block", borderRadius:14}}
      />
      <div className="bike-photo-badge">
        <span className="dot"/>
        {isV20 ? "V20 PRO" : "GT2000"}
      </div>
    </div>
  );
};

// Tiny generic bike pictogram for cart thumbnails when no photo dropped yet
const BikePictogram = ({ size = 40 }) => (
  <svg viewBox="0 0 24 24" width={size} height={size} fill="none" stroke="#111" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="5.5" cy="17.5" r="3.5"/>
    <circle cx="18.5" cy="17.5" r="3.5"/>
    <path d="M5.5 17.5 9 8h5l4 9.5M9 8h6M14 8l-3 6h7"/>
  </svg>
);

/* Accessory icon set (kept minimal — these are illustrative, not "fake products") */
const Acc = {
  lock: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <circle cx="50" cy="50" r="32" fill="none" stroke="#111" strokeWidth="10"/>
      <rect x="42" y="62" width="16" height="22" rx="2" fill="#111"/>
      <rect x="46" y="68" width="8" height="6" fill="#006BFF"/>
    </svg>
  ),
  helmet: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <path d="M20 60a30 30 0 0 1 60 0v15H20z" fill="#111"/>
      <rect x="28" y="52" width="44" height="6" rx="2" fill="#333"/>
      <circle cx="40" cy="50" r="3" fill="#006BFF"/>
    </svg>
  ),
  phone: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <rect x="35" y="15" width="30" height="55" rx="5" fill="#111"/>
      <rect x="38" y="20" width="24" height="40" rx="2" fill="#333"/>
      <rect x="25" y="70" width="50" height="14" rx="2" fill="#222" stroke="#006BFF" strokeWidth="1.5"/>
    </svg>
  ),
  alarm: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <rect x="25" y="35" width="50" height="30" rx="4" fill="#111"/>
      <circle cx="40" cy="50" r="6" fill="#006BFF"/>
      <rect x="52" y="46" width="18" height="3" rx="1" fill="#444"/>
      <path d="M20 50q-5-5 0-10M80 50q5-5 0-10" fill="none" stroke="#006BFF" strokeWidth="2.5" strokeLinecap="round"/>
    </svg>
  ),
  charger: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <rect x="25" y="30" width="50" height="40" rx="4" fill="#111"/>
      <circle cx="50" cy="55" r="5" fill="#006BFF"/>
      <path d="M50 70v15M40 85h20" stroke="#111" strokeWidth="3" strokeLinecap="round"/>
      <path d="M44 30v-8M56 30v-8" stroke="#444" strokeWidth="4" strokeLinecap="round"/>
    </svg>
  ),
  cover: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <path d="M15 40 Q50 20 85 40 L80 80 Q50 70 20 80 Z" fill="#111"/>
      <path d="M30 50 Q50 45 70 50" stroke="#006BFF" strokeWidth="2" fill="none"/>
    </svg>
  ),
  toolkit: ({size=80}) => (
    <svg viewBox="0 0 100 100" width={size} height={size}>
      <rect x="20" y="35" width="60" height="40" rx="4" fill="#111"/>
      <rect x="35" y="28" width="30" height="10" rx="2" fill="#333"/>
      <rect x="20" y="50" width="60" height="3" fill="#006BFF"/>
    </svg>
  ),
};

window.BikePhoto = BikePhoto;
window.BikePictogram = BikePictogram;
window.Acc = Acc;