// Placeholder chair illustrations, drawn inline so we don't need photos
function ChairArt({ variant = "a", className = "" }) {
  const common = { stroke: "currentColor", strokeWidth: 1.1, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" };
  if (variant === "a") {
    // Lounge chair silhouette
    return (
      <svg viewBox="0 0 200 240" className={className} aria-hidden="true">
        <g {...common}>
          <path d="M50 70 C 55 45, 95 38, 120 55 L 130 145 L 60 150 Z" />
          <path d="M60 150 L 55 210" />
          <path d="M130 145 L 140 205" />
          <path d="M55 210 L 150 210" />
          <path d="M125 100 C 155 100, 165 120, 160 150 L 135 148" />
        </g>
      </svg>);

  }
  if (variant === "b") {
    // Dining chair
    return (
      <svg viewBox="0 0 200 240" className={className} aria-hidden="true">
        <g {...common}>
          <path d="M70 40 L 70 130" />
          <path d="M70 130 L 140 130 L 140 50" />
          <path d="M140 50 C 120 35, 90 35, 70 40" />
          <path d="M70 130 L 60 215" />
          <path d="M140 130 L 150 215" />
          <path d="M85 130 L 82 215" />
          <path d="M125 130 L 128 215" />
        </g>
      </svg>);

  }
  if (variant === "c") {
    // Stool
    return (
      <svg viewBox="0 0 200 240" className={className} aria-hidden="true">
        <g {...common}>
          <ellipse cx="100" cy="90" rx="55" ry="12" />
          <path d="M55 95 L 50 210" />
          <path d="M145 95 L 150 210" />
          <path d="M90 98 L 90 210" />
          <path d="M110 98 L 110 210" />
          <path d="M50 210 L 150 210" />
          <path d="M60 150 L 140 150" />
        </g>
      </svg>);

  }
  if (variant === "d") {
    // Chaise
    return (
      <svg viewBox="0 0 240 200" className={className} aria-hidden="true">
        <g {...common}>
          <path d="M20 130 L 210 130" />
          <path d="M20 130 Q 80 110, 160 115 L 210 120" />
          <path d="M160 115 C 195 95, 215 95, 210 130" />
          <path d="M30 130 L 30 175" />
          <path d="M210 130 L 210 175" />
          <path d="M30 175 L 210 175" />
        </g>
      </svg>);

  }
  return null;
}

function ProductCard({ id, idx, name, type, price, year, material, variant, tone, image, imageFit, white }) {
  const cover = imageFit === "cover";
  const toneClass = white
    ? "bg-white"
    : cover ? "bg-neutral-900"
    : tone === "warm" ? "ph-warm" : tone === "cool" ? "ph-cool" : tone === "sand" ? "ph-sand" : "ph-bg";
  const metaColor = white ? "text-black/40" : "text-white/60";
  return (
    <a href={`product.html?id=${id}`} className="group block">
      <div className={`relative aspect-[4/5] overflow-hidden ${toneClass}`}>
        {/* Index */}
        <div className={`absolute top-4 left-4 z-10 text-[10px] tracking-[0.35em] uppercase ${metaColor}`}>
          {String(idx).padStart(3, "0")} / 015
        </div>
        <div className={`absolute top-4 right-4 z-10 text-[10px] tracking-[0.35em] uppercase ${metaColor}`}>
          {year}
        </div>

        {/* Image or chair art */}
        {image ? (
          cover ? (
            <img
              src={image}
              alt={name}
              className="absolute inset-0 w-full h-full object-cover zoom-img"
              loading="lazy"
              decoding="async"
              draggable="false"
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center p-3">
              <img
                src={image}
                alt={name}
                className="w-full h-full object-contain zoom-img"
                loading="lazy"
                decoding="async"
                draggable="false"
              />
            </div>
          )
        ) : (
          <React.Fragment>
            <div className="absolute inset-0 flex items-center justify-center text-white/55">
              <ChairArt variant={variant} className="w-[55%] h-[70%] zoom-img" />
            </div>
            <div className="absolute left-0 right-0 bottom-[22%] h-px bg-white/10" />
          </React.Fragment>
        )}

        {/* Hover overlay */}
        <div className={`absolute inset-0 transition-colors ${white ? "bg-black/0 group-hover:bg-black/[0.03]" : "bg-black/0 group-hover:bg-black/20"}`} />
        <div className="absolute left-4 bottom-4 right-4 z-10 flex items-end justify-between opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500">
          <span className={`text-[11px] tracking-[0.28em] uppercase ${white ? "text-black/70" : "text-white/80"}`}>View object</span>
          <span className={`inline-flex items-center justify-center w-9 h-9 rounded-full ring-1 ${white ? "ring-black/30" : "ring-white/40"}`}>
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
              <path d="M7 17L17 7M9 7h8v8" />
            </svg>
          </span>
        </div>
      </div>

      {/* Meta */}
      <div className="mt-4 flex items-start justify-between gap-4">
        <div>
          <div className="text-[11px] uppercase tracking-[0.28em] text-white/50 mb-1">{type}</div>
          <div className="text-[18px] md:text-[20px] leading-tight" style={{ letterSpacing: "-0.02em" }}>
            {name}
          </div>
          <div className="text-[12px] text-white/50 mt-1">{material}</div>
        </div>
        <div className="text-right shrink-0">
          <div className="text-[11px] uppercase tracking-[0.28em] text-white/50">from</div>
          <div className="text-[14px] text-white/80 mt-1 tabular-nums">₹ {price.toLocaleString()}</div>
        </div>
      </div>
    </a>);

}

function Products({ sansFont, cursiveFont }) {
  const all = window.QURCEE_PRODUCTS || [];
  const collections = ["All", "Office Chairs", "Sofas", "Lounge", "Cafe Chairs"];
  const [active, setActive] = React.useState("All");
  const items = active === "All" ? all : all.filter((p) => p.collection === active);

  return (
    <section id="products" className="relative bg-black text-white py-24 md:py-36 grain" style={{ "--grain-opacity": 0.09 }}>
      <div className="px-5 md:px-10">
        {/* Header */}
        <div className="flex items-end justify-between gap-6 mb-14 md:mb-20">
          <div>
            <div className="flex items-center gap-3 mb-5">
              <span className="w-10 h-px bg-white/40" />
              <span className="uppercase tracking-[0.35em] text-[11px] text-white/50">
                01 — Collections
              </span>
            </div>
            <h2
              className="hero-title"
              style={{ fontFamily: sansFont, fontSize: "clamp(48px, 8vw, 140px)" }}>
              
              A seat for{" "}
              <span
                className="inline-block italic"
                style={{
                  fontFamily: cursiveFont,
                  fontStyle: "normal",
                  fontSize: "1.25em",
                  transform: "rotate(-3deg)"
                }}>
                
                every
              </span>
              <span className="block">room.</span>
            </h2>
          </div>
          <a
            href="#"
            className="hidden md:inline-flex items-center gap-3 text-[12px] uppercase tracking-[0.28em] text-white/70 hover:text-white">
            
            <span>All objects</span>
            <span className="inline-flex items-center justify-center w-10 h-10 rounded-full ring-1 ring-white/25 hover:ring-white/70 transition">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <path d="M5 12h14M13 6l6 6-6 6" />
              </svg>
            </span>
          </a>
        </div>

        {/* Collection filter */}
        <div className="flex flex-wrap items-center gap-2.5 mb-12 md:mb-16">
          {collections.map((c) => (
            <button
              key={c}
              onClick={() => setActive(c)}
              className={`px-5 py-2.5 rounded-full text-[12px] uppercase tracking-[0.2em] transition ring-1 ${
                active === c
                  ? "bg-white text-black ring-white"
                  : "text-white/70 ring-white/15 hover:text-white hover:ring-white/40"
              }`}>
              {c}
              <span className={`ml-2 tabular-nums ${active === c ? "text-black/50" : "text-white/35"}`}>
                {c === "All" ? all.length : all.filter((p) => p.collection === c).length}
              </span>
            </button>
          ))}
        </div>

        {/* Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
          {items.map((it) =>
          <ProductCard key={it.id} {...it} />
          )}
        </div>
        {items.length === 0 && (
          <div className="py-16 text-center text-white/40 text-[13px] uppercase tracking-[0.28em]">
            Coming soon to this collection
          </div>
        )}
      </div>
    </section>);

}

Object.assign(window, { Products, ProductCard, ChairArt });