// sections2.jsx — Products (3 card variations), Testimonials, Gallery
const { useState: useState2, useEffect: useEffect2 } = React;

function ProductCard({ p, variant, c, idx }) {
  const spanWide = idx === 0 || idx === 3;
  const colClass = spanWide ? "lg:col-span-7" : "lg:col-span-5";
  const aspect = spanWide ? "aspect-[16/10]" : "aspect-[4/3]";
  const imgUrl = p.imagePath ? productImageUrl(p.imagePath) : null;
  // Fotoğraflı ürünlerde görsel kendi oranında gösterilir (natural), placeholder
  // sabit karta oturur; natural görselli kartlarda dış kapsayıcıya aspect verilmez.
  const media = (rounded, className) =>
    imgUrl
      ? <img src={imgUrl} alt={p.label} loading="lazy" className={`${rounded} block w-full h-auto transition-transform duration-[1100ms] ease-out group-hover:scale-[1.05]`} />
      : <Placeholder label={p.label} tone={p.tone} rounded={rounded} className={className} />;

  // Variant A — Soft Shadow: caption below, card lifts on hover
  if (variant === "soft") {
    return (
      <a href={`/urun/${p.slug}`} className={`group block ${colClass}`}>
        <div className="rounded-[22px] p-3 transition-all duration-500 bg-transparent group-hover:bg-white"
          style={{ boxShadow: "0 0 0 rgba(45,55,72,0)" }}
          onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "0 30px 60px -30px rgba(45,55,72,0.28)")}
          onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "0 0 0 rgba(45,55,72,0)")}>
          {media("rounded-[16px]", `${aspect} w-full`)}
          <div className="flex items-end justify-between gap-4 px-2 pt-5 pb-2">
            <div>
              <h3 className="font-serif text-ink" style={{ fontSize: 23, lineHeight: 1.15 }}>{p.name}</h3>
              <p className="text-ink/55 mt-1.5" style={{ fontSize: 13.5 }}>{p.meta}</p>
            </div>
            <span className="shrink-0 flex items-center justify-center rounded-full transition-all duration-400 text-ink"
              style={{ width: 42, height: 42, border: "1px solid rgba(45,55,72,0.16)" }}>
              <Icon name="arrowUpRight" size={18} className="transition-transform duration-400 group-hover:rotate-45" />
            </span>
          </div>
        </div>
      </a>
    );
  }

  // Variant B — Editorial: overline + name, "İncele →" reveals on hover, image zooms
  if (variant === "editorial") {
    return (
      <a href={`/urun/${p.slug}`} className={`group block ${colClass}`}>
        <div className={`relative overflow-hidden rounded-[18px] w-full ${imgUrl ? "" : aspect}`}>
          {media("rounded-[18px]", "absolute inset-0 transition-transform duration-[1100ms] ease-out group-hover:scale-[1.06]")}
        </div>
        <div className="pt-5">
          <span className="uppercase" style={{ fontSize: 11, letterSpacing: "0.2em", color: "var(--accent, #a87d79)" }}>{p.cat}</span>
          <h3 className="font-serif text-ink mt-2.5" style={{ fontSize: 25, lineHeight: 1.12 }}>{p.name}</h3>
          <div className="overflow-hidden" style={{ height: 26 }}>
            <span className="inline-flex items-center gap-1.5 text-ink/70 opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500"
              style={{ fontSize: 14 }}>
              {c.products_more}
              <Icon name="arrowRight" size={14} className="transition-transform duration-400 group-hover:translate-x-1" />
            </span>
          </div>
        </div>
      </a>
    );
  }

  // Variant C — Caption overlay that slides up on hover
  return (
    <a href={`/urun/${p.slug}`} className={`group block ${colClass}`}>
      <div className={`relative overflow-hidden rounded-[20px] w-full ${imgUrl ? "" : aspect}`}>
        {media("rounded-[20px]", "absolute inset-0 transition-transform duration-[1100ms] ease-out group-hover:scale-[1.05]")}
        <div className="absolute inset-0" style={{ background: "linear-gradient(to top, rgba(45,55,72,0.42) 0%, rgba(45,55,72,0.04) 42%, transparent 70%)" }} />
        <div className="absolute inset-x-0 bottom-0 p-6 text-cream">
          <div className="flex items-end justify-between gap-4">
            <div>
              <h3 className="font-serif" style={{ fontSize: 24, lineHeight: 1.1 }}>{p.name}</h3>
              <p className="overflow-hidden max-h-0 opacity-0 group-hover:max-h-8 group-hover:opacity-90 group-hover:mt-1.5 transition-all duration-500" style={{ fontSize: 13 }}>
                {p.meta}
              </p>
            </div>
            <span className="shrink-0 flex items-center justify-center rounded-full backdrop-blur-sm transition-all duration-400 group-hover:bg-cream group-hover:text-ink"
              style={{ width: 40, height: 40, backgroundColor: "rgba(250,247,242,0.18)" }}>
              <Icon name="arrowUpRight" size={17} />
            </span>
          </div>
        </div>
      </div>
    </a>
  );
}

// Anasayfa ürün vitrini — klasik kaydırmalı slider yerine "açılır panel"
// (akordeon): ürünler şerit halinde yan yana durur, aktif olan genişleyerek
// fotoğrafını ve bilgisini gösterir. Birkaç saniyede bir sıradaki ürün açılır;
// imleç üzerindeyken otomatik geçiş durur.
function ShowcasePanel({ p, i, isActive, setActive, moreLabel, soldOutLabel }) {
  const imgUrl = p.imagePath ? productImageUrl(p.imagePath) : null;
  const soldOut = (p.stock || 0) <= 0;
  return (
    <div onClick={() => setActive(i)} onMouseEnter={() => setActive(i)}
      className="relative overflow-hidden rounded-[18px] cursor-pointer"
      style={{ flexGrow: isActive ? 6 : 1, flexBasis: 0, minWidth: 0, minHeight: 0,
        boxShadow: isActive ? "0 0 0 rgba(45,55,72,0)" : "0 22px 44px -20px rgba(45,55,72,0.45)",
        transition: "flex-grow 900ms cubic-bezier(0.33,1,0.36,1), box-shadow 700ms ease" }}>
      {imgUrl
        ? <img src={imgUrl} alt={p.label} loading="lazy" className={`absolute inset-0 w-full h-full object-cover ${soldOut ? "blur-[3px] grayscale-[35%]" : ""}`} />
        : <Placeholder label="" tone={p.tone} rounded="rounded-[18px]" className="absolute inset-0" />}
      <div className="absolute inset-0 transition-all duration-700"
        style={{ background: isActive
          ? "linear-gradient(to top, rgba(45,55,72,0.6) 0%, rgba(45,55,72,0.08) 45%, transparent 65%)"
          : "rgba(45,55,72,0.38)" }} />
      {/* Kapalı şerit: masaüstünde dikey, mobilde yatay ürün adı */}
      <span className={`absolute inset-0 hidden lg:flex items-end justify-center pb-6 transition-opacity duration-500 ${isActive ? "opacity-0" : "opacity-100"}`}>
        <span className="font-serif text-cream whitespace-nowrap"
          style={{ writingMode: "vertical-rl", transform: "rotate(180deg)", fontSize: 15, letterSpacing: "0.03em" }}>{p.name}</span>
      </span>
      <span className={`absolute inset-0 flex lg:hidden items-center px-5 transition-opacity duration-500 ${isActive ? "opacity-0" : "opacity-100"}`}>
        <span className="font-serif text-cream whitespace-nowrap" style={{ fontSize: 15 }}>{p.name}</span>
      </span>
      {/* Açık panel bilgisi */}
      <div className={`absolute inset-x-0 bottom-0 p-6 lg:p-7 transition-all duration-700 ${isActive ? "opacity-100 translate-y-0" : "opacity-0 translate-y-3 pointer-events-none"}`}>
        <h3 className="font-serif text-cream whitespace-nowrap" style={{ fontSize: "clamp(20px,2vw,26px)", lineHeight: 1.1 }}>{p.name}</h3>
        <p className="text-cream/85 mt-1.5 whitespace-nowrap" style={{ fontSize: 13.5 }}>
          {p.price} · {p.meta}
          {soldOut && <span className="ml-2 rounded-full px-2.5 py-0.5 align-middle" style={{ fontSize: 11, fontWeight: 600, backgroundColor: "rgba(178,60,60,0.9)", color: "#faf7f2" }}>{soldOutLabel}</span>}
        </p>
        <a href={`/urun/${p.slug}`} onClick={(e) => e.stopPropagation()}
          className="inline-flex items-center gap-2 mt-4 rounded-full bg-cream text-ink px-5 py-2.5 whitespace-nowrap transition-transform duration-300 hover:scale-[1.04]"
          style={{ fontSize: 13.5 }}>
          {moreLabel}
          <Icon name="arrowUpRight" size={14} />
        </a>
      </div>
    </div>
  );
}

function Products({ c, cardStyle, lang }) {
  const [items, setItems] = useState2(null); // null = yükleniyor
  const [active, setActive] = useState2(0);
  const [paused, setPaused] = useState2(false);

  useEffect2(() => {
    let cancelled = false;
    fetchCatalog(lang).then((list) => { if (!cancelled) setItems(list); });
    return () => { cancelled = true; };
  }, [lang]);

  useEffect2(() => {
    if (!items || items.length < 2 || paused) return;
    const t = setInterval(() => setActive((a) => (a + 1) % items.length), 3800);
    return () => clearInterval(t);
  }, [items, paused]);

  const skeletonTones = ["rose", "sage", "cream", "rose"];

  return (
    <section id="urunler" className="relative py-28 lg:py-36" style={{ backgroundColor: "#f3ede4" }}>
      <div className="mx-auto max-w-[1240px] px-6 lg:px-10">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
          <div>
            <Reveal><Eyebrow>{c.products.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={120}>
              <h2 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(30px,4vw,52px)", lineHeight: 1.08, letterSpacing: "-0.01em" }}>
                {c.products.title}
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <p className="text-ink/60 md:text-right md:max-w-xs" style={{ fontSize: 15, lineHeight: 1.7 }}>{c.products.sub}</p>
          </Reveal>
        </div>

        {items === null && (
          <div className="grid lg:grid-cols-12 gap-x-7 gap-y-12">
            {skeletonTones.map((tone, i) => (
              <div key={i} className={i === 0 || i === 3 ? "lg:col-span-7" : "lg:col-span-5"}>
                <Placeholder label="" tone={tone} rounded="rounded-[16px]" className={`${i === 0 || i === 3 ? "aspect-[16/10]" : "aspect-[4/3]"} w-full`} />
              </div>
            ))}
          </div>
        )}

        {items && items.length === 0 && (
          <p className="text-ink/50" style={{ fontSize: 15 }}>{lang === "tr" ? "Şu anda listelenecek ürün yok." : "No products to show right now."}</p>
        )}

        {items && items.length > 0 && (
          <Reveal>
            <div className="flex flex-col lg:flex-row gap-3 h-[820px] lg:h-[540px]"
              onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
              {items.map((p, i) => (
                <ShowcasePanel key={p.slug} p={p} i={i} isActive={active === i} setActive={setActive}
                  moreLabel={c.products.products_more || (lang === "tr" ? "İncele" : "View")}
                  soldOutLabel={lang === "en" ? "Sold out" : "Tükendi"} />
              ))}
            </div>
          </Reveal>
        )}
      </div>
    </section>
  );
}

function Testimonials({ c }) {
  const [i, setI] = useState2(0);
  const items = c.testimonials.items;
  const go = (d) => setI((prev) => (prev + d + items.length) % items.length);
  return (
    <section id="misafirler" className="relative py-28 lg:py-36 overflow-hidden" style={{ backgroundColor: "#faf7f2" }}>
      <div className="pointer-events-none absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[34rem] h-[34rem] rounded-full"
        style={{ background: "radial-gradient(circle, rgba(216,180,176,0.22) 0%, rgba(216,180,176,0) 66%)" }} />
      <div className="relative mx-auto max-w-[940px] px-6 lg:px-10 text-center">
        <Reveal><Eyebrow center>{c.testimonials.eyebrow}</Eyebrow></Reveal>
        <Reveal delay={120}>
          <span className="font-serif block mx-auto" style={{ fontSize: 88, lineHeight: 0.6, color: "#d8b4b0", marginTop: 34, marginBottom: 8 }}>&ldquo;</span>
        </Reveal>
        <div className="relative" style={{ minHeight: 220 }}>
          {items.map((t, idx) => (
            <div key={idx} className="absolute inset-0 transition-all duration-700 flex flex-col items-center justify-start"
              style={{ opacity: i === idx ? 1 : 0, transform: i === idx ? "translateY(0)" : "translateY(14px)", pointerEvents: i === idx ? "auto" : "none" }}>
              <p className="font-serif text-ink mx-auto" style={{ fontSize: "clamp(21px,2.7vw,32px)", lineHeight: 1.4, letterSpacing: "-0.005em", textWrap: "balance", maxWidth: 720 }}>
                {t.quote}
              </p>
              <div className="mt-8 flex items-center gap-3 justify-center">
                <RoseMark size={20} color="var(--accent, #c2918c)" />
                <div className="text-left">
                  <div className="text-ink" style={{ fontSize: 14.5, fontWeight: 600 }}>{t.name}</div>
                  <div className="text-ink/50" style={{ fontSize: 12.5 }}>{t.place}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="mt-10 flex items-center justify-center gap-5">
          <button onClick={() => go(-1)} className="flex items-center justify-center rounded-full text-ink/70 hover:text-ink hover:border-ink/30 transition-all duration-300"
            style={{ width: 44, height: 44, border: "1px solid rgba(45,55,72,0.15)" }} aria-label="prev"><Icon name="chevronLeft" size={18} /></button>
          <div className="flex items-center gap-2">
            {items.map((_, idx) => (
              <button key={idx} onClick={() => setI(idx)} className="rounded-full transition-all duration-400" aria-label={`go ${idx}`}
                style={{ width: i === idx ? 22 : 7, height: 7, backgroundColor: i === idx ? "var(--accent, #a87d79)" : "rgba(45,55,72,0.18)" }} />
            ))}
          </div>
          <button onClick={() => go(1)} className="flex items-center justify-center rounded-full text-ink/70 hover:text-ink hover:border-ink/30 transition-all duration-300"
            style={{ width: 44, height: 44, border: "1px solid rgba(45,55,72,0.15)" }} aria-label="next"><Icon name="chevronRight" size={18} /></button>
        </div>
      </div>
    </section>
  );
}

// GalleryGrid — masonry grid of photos with a click-to-zoom lightbox, shared
// by the homepage Gallery teaser and the dedicated /galeri page. Each item
// renders a real <img> when given a `src`, otherwise a Placeholder stand-in.
function GalleryGrid({ items }) {
  const [open, setOpen] = useState2(-1);
  const aspects = ["aspect-[4/5]", "aspect-[4/3]", "aspect-square", "aspect-[3/4]", "aspect-[5/4]", "aspect-[4/5]", "aspect-square", "aspect-[4/3]", "aspect-[3/4]"];

  const close = () => setOpen(-1);
  const nav = (d) => setOpen((p) => (p + d + items.length) % items.length);

  useEffect2(() => {
    if (open < 0) return;
    const onKey = (e) => {
      if (e.key === "Escape") close();
      else if (e.key === "ArrowRight") nav(1);
      else if (e.key === "ArrowLeft") nav(-1);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, items.length]);

  if (!items.length) return null;

  return (
    <>
      <div className="columns-1 sm:columns-2 lg:columns-3 gap-4">
        {items.map((it, idx) => (
          <button key={idx} onClick={() => setOpen(idx)}
            className={`gallery-tile group relative block w-full mb-4 overflow-hidden rounded-[18px] ${aspects[idx % aspects.length]}`}
            style={{ breakInside: "avoid", boxShadow: "0 18px 44px -30px rgba(45,55,72,0.55)" }}>
            {it.src
              ? <img src={it.src} alt={it.label} loading="lazy" className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
              : <Placeholder label={it.label} tone={it.tone} rounded="rounded-[18px]" className="w-full h-full transition-transform duration-700 group-hover:scale-105" />}
            <span className="pointer-events-none absolute inset-x-0 bottom-0 px-4 py-3 flex items-end opacity-0 group-hover:opacity-100 transition-opacity duration-400"
              style={{ background: "linear-gradient(to top, rgba(45,55,72,0.6), transparent)" }}>
              <span className="text-cream" style={{ fontSize: 14, fontWeight: 500 }}>{it.label}</span>
            </span>
          </button>
        ))}
      </div>

      {open >= 0 && (
        <div className="fixed inset-0 z-[2147483647] flex items-center justify-center p-5" onClick={close}
          style={{ backgroundColor: "rgba(45,55,72,0.85)", backdropFilter: "blur(6px)", WebkitBackdropFilter: "blur(6px)" }}>
          <button onClick={close} aria-label="Kapat"
            className="absolute top-5 right-5 flex items-center justify-center rounded-full text-cream hover:bg-cream/10 transition-colors"
            style={{ width: 46, height: 46, border: "1px solid rgba(250,247,242,0.3)" }}><Icon name="close" size={22} /></button>
          <button onClick={(e) => { e.stopPropagation(); nav(-1); }} aria-label="Önceki"
            className="absolute left-4 sm:left-8 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full text-cream hover:bg-cream/10 transition-colors"
            style={{ width: 50, height: 50, border: "1px solid rgba(250,247,242,0.3)" }}><Icon name="chevronLeft" size={24} /></button>
          <button onClick={(e) => { e.stopPropagation(); nav(1); }} aria-label="Sonraki"
            className="absolute right-4 sm:right-8 top-1/2 -translate-y-1/2 flex items-center justify-center rounded-full text-cream hover:bg-cream/10 transition-colors"
            style={{ width: 50, height: 50, border: "1px solid rgba(250,247,242,0.3)" }}><Icon name="chevronRight" size={24} /></button>
          <figure className="w-full" style={{ maxWidth: 860 }} onClick={(e) => e.stopPropagation()}>
            <div className="overflow-hidden rounded-[20px]">
              {items[open].src
                ? <img src={items[open].src} alt={items[open].label} className="w-full object-contain" style={{ maxHeight: "78vh" }} />
                : <Placeholder label={items[open].label} tone={items[open].tone} rounded="rounded-[20px]" className="w-full aspect-[4/3]" />}
            </div>
            <figcaption className="mt-4 text-center" style={{ fontSize: 14, color: "rgba(250,247,242,0.8)" }}>
              {items[open].label} · {open + 1}/{items.length}
            </figcaption>
          </figure>
        </div>
      )}
    </>
  );
}

// Gallery — homepage teaser section wrapping GalleryGrid with heading + CTA
// to the dedicated /galeri page (mirrors the Products/Ürünler pattern).
function Gallery({ c }) {
  const g = c.gallery;
  // Anasayfa bir özet: ilk 9 kare gösterilir, tamamı /galeri sayfasında.
  const items = ((g && g.items) || []).slice(0, 9);
  if (!items.length) return null;

  return (
    <section id="galeri" className="relative py-28 lg:py-36" style={{ backgroundColor: "#f3ede4" }}>
      <div className="mx-auto max-w-[1240px] px-6 lg:px-10">
        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-14">
          <div className="max-w-2xl">
            <Reveal><Eyebrow>{g.eyebrow}</Eyebrow></Reveal>
            <Reveal delay={120}>
              <h2 className="font-serif text-ink mt-6" style={{ fontSize: "clamp(28px,3.6vw,46px)", lineHeight: 1.18, letterSpacing: "-0.01em", textWrap: "balance" }}>
                {g.title}
              </h2>
            </Reveal>
          </div>
          <Reveal delay={200}>
            <a href="/galeri" className="hidden sm:inline-flex items-center gap-2 text-ink/70 hover:text-ink transition-colors shrink-0" style={{ fontSize: 14.5 }}>
              {g.viewAll}<Icon name="arrowRight" size={15} />
            </a>
          </Reveal>
        </div>
        <Reveal delay={200}>
          <div className="mt-12">
            <GalleryGrid items={items} />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Products, Testimonials, Gallery, GalleryGrid });