/* eslint-disable */
const { useState, useEffect, useRef, useMemo } = React;

/* ================================================
   I18N
================================================ */
const COPY = {
  tr: {
    nav: ["Ana Sayfa", "Ürünler", "Tasarla", "Hikaye", "İletişim"],
    cart: "Sepet · 0",
    ticker: ["El İşçiliği", "Modern Tasarım", "İstanbul'dan", "Konfor & Stil", "Akıllı QR", "Özel Üretim"],
    heroMetaTop: ["Est. 2023 · Köpek Ekipmanları", "Edition Nº 04 · Kış"],
    heroLines: [
      ["EL", "EMEĞİ", "."],
      ["MODERN", null, "TASARIM."],
      ["DOSTUN", "İÇİN", "."]
    ],
    heroAccentIdx: { 1: 0 }, // "MODERN" word styled as accent? we'll do separately
    sticker: ["Tasarımı sen seç ·", "kişiselleştir ·"].join(" "),
    heroPitch:
      "Konforu bütünsel bir deneyim olarak görüyoruz. Geniş temas yüzeyi, yumuşak doku, ergonomik tutuş.",
    heroMeta: [
      { k: "Koleksiyon", v: "04 · Kış '26" },
      { k: "Üretim", v: "İstanbul · El yapımı" }
    ],
    marquee1: ["Konfor", "Stil", "Dayanıklılık", "El İşçiliği", "Modern"],
    marqueeAccent: "için dostun",
    marquee2: ["Boyun Tasması", "Gezdirme Kayışı", "Akıllı QR", "Kişiselleştir"],
    manifestoNum: "Nº 01 — Manifesto",
    manifestoQuote: [
      "Bir tasma yalnızca bir",
      "ekipman değil; siz ile",
      "dostunuz arasındaki",
      { em: "zarif bir dokunuş." }
    ],
    manifestoTail:
      "Boynu ip gibi kesen, nefes almasını zorlaştıran kalitesiz tasmaların devri kapanıyor.",
    productsEyebrow: "Nº 02 — Koleksiyon",
    productsTitle: ["İki ürün.", { em: "sonsuz" }, "kombinasyon."],
    products: [
      {
        num: "01",
        cornerLabel: "In Stock",
        title: ["Boyun", { em: "Tasması" }],
        desc:
          "Geniş temas yüzeyi ve yumuşak dokusu boyundaki baskıyı dağıtır. El işçiliği detaylar, paslanmaz çelik halka.",
        specs: [
          { k: "Malzeme", v: "Bizon deri + neopren" },
          { k: "Donanım", v: "Paslanmaz çelik" },
          { k: "Beden", v: "XS — XL" },
          { k: "Kişiselleştirme", v: "İsim · renk · isim plakası" }
        ],
        price: "₺ 1.290",
        swatchLabel: "Renk seç",
        cta: "Tasarla",
        bg: "https://peticota.com/wp-content/uploads/2025/12/2.png"
      },
      {
        num: "02",
        cornerLabel: "Yeni",
        title: ["Gezdirme", { em: "Kayışı" }],
        desc:
          "Uzun yürüyüşlerde eli yormayan ergonomik tutuş. Çift karabina, refleks dikiş, gece görünürlük şeritleri.",
        specs: [
          { k: "Uzunluk", v: "120 — 200 cm" },
          { k: "Tutuş", v: "Yastıklı, ergonomik" },
          { k: "Karabina", v: "Çift, paslanmaz" },
          { k: "Kişiselleştirme", v: "Renk · uzunluk · isim" }
        ],
        price: "₺ 1.490",
        swatchLabel: "Renk seç",
        cta: "Tasarla",
        bg: "https://peticota.com/wp-content/uploads/2025/12/unnamed-4-2-e1767014417477.jpg"
      }
    ],
    customizeEyebrow: "Nº 03 — Kişiselleştir",
    customizeTitle: ["En iyisini", { em: "sen tasarla" }, "."],
    customizeSteps: [
      { t: "Modeli seç", d: "Boyun tasması mı, gezdirme kayışı mı? Bedeni belirle." },
      { t: "Renk & doku", d: "Krem, kömür, kil, kızıl. Mat ya da yağlı deri." },
      { t: "İsim & detay", d: "İsim plakası, gizli baskı, refleks şerit, ton üstü ton dikiş." },
      { t: "Üretim", d: "İstanbul atölyesinde 7 — 10 iş günü içinde el yapımı." }
    ],
    customizeCta: "Tasarlamaya başla",
    customizeMeta: "Min. sipariş yok · Yalnız sana",
    qrTitle: ["Akıllı", { em: "QR" }, "etiket."],
    qrDesc:
      "Acil durumlarda köpeğini bulan kişi tek taramayla alerjiler, iletişim ve ilk yardım bilgilerine ulaşır. Her tasmaya gizlenmiş halde gelir.",
    qrFeatures: ["Alerji bilgileri", "Acil iletişim", "İlk yardım", "Aşı kartı", "Veteriner", "Profilini güncelle"],
    qrTagTop: ["if found, scan", "Peticota ID"],
    qrTagBottom: ["scan", { em: "& save" }, "me."],
    footerMega: ["peticota", "•"],
    footerCols: [
      {
        h: "İletişim",
        items: [
          { l: "hello@peticota.com", href: "mailto:hello@peticota.com" },
          { l: "+90 555 000 00 00", href: "tel:+905550000000" },
          { l: "Galata, İstanbul", href: "https://maps.google.com/?q=Galata+Istanbul" }
        ]
      },
      {
        h: "Keşfet",
        items: [
          { l: "Tasarla", href: "tasarla.html" },
          { l: "Koleksiyon", href: "#products" },
          { l: "Hikaye", href: "#manifesto" },
          { l: "Bayilik", href: "mailto:hello@peticota.com?subject=Bayilik%20Ba%C5%9Fvurusu" }
        ]
      },
      {
        h: "Sosyal",
        items: [
          { l: "Instagram", href: "https://instagram.com/peticota" },
          { l: "TikTok", href: "https://www.tiktok.com/@peticota" },
          { l: "Pinterest", href: "https://pinterest.com/peticota" }
        ]
      }
    ],
    newsletterTitle: "Bültene katıl",
    newsletterDesc: "Yeni koleksiyon ve özel ürünlerden ilk sen haberdar ol.",
    newsletterCta: "Kaydol",
    legal: ["© 2026 Peticota — All rights reserved.", "Tasarım & üretim · İstanbul"],
    floatBadge: ["Tasarla", "Sana özel"]
  },
  en: {
    nav: ["Home", "Products", "Customize", "Story", "Contact"],
    cart: "Cart · 0",
    ticker: ["Hand Made", "Modern Design", "From Istanbul", "Comfort & Style", "Smart QR", "Bespoke"],
    heroMetaTop: ["Est. 2023 · Dog Equipment", "Edition Nº 04 · Winter"],
    heroLines: [
      ["HAND", "MADE", "."],
      ["MODERN", null, "DESIGN."],
      ["FOR", "YOUR", "FRIEND."]
    ],
    sticker: ["Design it your way ·", "your edition ·"].join(" "),
    heroPitch:
      "We see comfort as a whole experience. Wide contact surface, soft texture, ergonomic grip.",
    heroMeta: [
      { k: "Collection", v: "04 · Winter '26" },
      { k: "Made in", v: "Istanbul · By hand" }
    ],
    marquee1: ["Comfort", "Style", "Durability", "Hand Made", "Modern"],
    marqueeAccent: "for your friend",
    marquee2: ["Collar", "Leash", "Smart QR", "Customize"],
    manifestoNum: "Nº 01 — Manifesto",
    manifestoQuote: [
      "A collar is not just",
      "equipment; it is a",
      "graceful link between",
      { em: "you and your friend." }
    ],
    manifestoTail:
      "The era of stiff straps that cut into the neck and crush the windpipe ends here.",
    productsEyebrow: "Nº 02 — Collection",
    productsTitle: ["Two products.", { em: "endless" }, "combinations."],
    products: [
      {
        num: "01",
        cornerLabel: "In Stock",
        title: ["The", { em: "Collar" }],
        desc:
          "Wide contact surface and soft texture spread pressure across the neck. Hand-stitched detail, stainless ring.",
        specs: [
          { k: "Material", v: "Bison leather + neoprene" },
          { k: "Hardware", v: "Stainless steel" },
          { k: "Size", v: "XS — XL" },
          { k: "Customize", v: "Name · color · ID plate" }
        ],
        price: "₺ 1.290",
        swatchLabel: "Pick color",
        cta: "Customize",
        bg: "https://peticota.com/wp-content/uploads/2025/12/2.png"
      },
      {
        num: "02",
        cornerLabel: "New",
        title: ["The", { em: "Leash" }],
        desc:
          "Ergonomic grip that doesn't tire your hand on long walks. Double carabiner, reflective stitching, night visibility.",
        specs: [
          { k: "Length", v: "120 — 200 cm" },
          { k: "Grip", v: "Padded, ergonomic" },
          { k: "Hardware", v: "Double, stainless" },
          { k: "Customize", v: "Color · length · name" }
        ],
        price: "₺ 1.490",
        swatchLabel: "Pick color",
        cta: "Customize",
        bg: "https://peticota.com/wp-content/uploads/2025/12/unnamed-4-2-e1767014417477.jpg"
      }
    ],
    customizeEyebrow: "Nº 03 — Customize",
    customizeTitle: ["Design the", { em: "best one" }, "."],
    customizeSteps: [
      { t: "Pick model", d: "Collar or leash? Choose your size." },
      { t: "Color & finish", d: "Cream, charcoal, clay, red. Matte or oiled leather." },
      { t: "Name & detail", d: "ID plate, blind embossing, reflective trim, tone-on-tone stitching." },
      { t: "Production", d: "Made by hand in our Istanbul atelier within 7 — 10 working days." }
    ],
    customizeCta: "Start designing",
    customizeMeta: "No min. order · Just for you",
    qrTitle: ["Smart", { em: "QR" }, "tag."],
    qrDesc:
      "If your dog gets lost, anyone can scan and reach allergies, contact and first-aid info instantly. Hidden inside every collar.",
    qrFeatures: ["Allergies", "Emergency contact", "First aid", "Vaccine card", "Vet info", "Edit anytime"],
    qrTagTop: ["if found, scan", "Peticota ID"],
    qrTagBottom: ["scan", { em: "& save" }, "me."],
    footerMega: ["peticota", "•"],
    footerCols: [
      {
        h: "Contact",
        items: [
          { l: "hello@peticota.com", href: "mailto:hello@peticota.com" },
          { l: "+90 555 000 00 00", href: "tel:+905550000000" },
          { l: "Galata, Istanbul", href: "https://maps.google.com/?q=Galata+Istanbul" }
        ]
      },
      {
        h: "Explore",
        items: [
          { l: "Customize", href: "tasarla.html" },
          { l: "Collection", href: "#products" },
          { l: "Story", href: "#manifesto" },
          { l: "Wholesale", href: "mailto:hello@peticota.com?subject=Wholesale%20inquiry" }
        ]
      },
      {
        h: "Social",
        items: [
          { l: "Instagram", href: "https://instagram.com/peticota" },
          { l: "TikTok", href: "https://www.tiktok.com/@peticota" },
          { l: "Pinterest", href: "https://pinterest.com/peticota" }
        ]
      }
    ],
    newsletterTitle: "Join the list",
    newsletterDesc: "First to hear about new collections and exclusives.",
    newsletterCta: "Subscribe",
    legal: ["© 2026 Peticota — All rights reserved.", "Designed & made · Istanbul"],
    floatBadge: ["Design", "your own"]
  }
};

/* ================================================
   Helpers
================================================ */
const renderParts = (parts, key = 0) => {
  if (typeof parts === "string") return parts;
  if (Array.isArray(parts))
    return parts.map((p, i) => (
      <React.Fragment key={`${key}-${i}`}>
        {renderParts(p, `${key}-${i}`)}{" "}
      </React.Fragment>
    ));
  if (parts && parts.em) return <em>{parts.em}</em>;
  return null;
};

const useInView = (ref, opts = { threshold: 0.18 }) => {
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setSeen(true);
        });
      },
      opts
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return seen;
};

/* ================================================
   NAV
================================================ */
const Nav = ({ lang, setLang, t }) => {
  const [hidden, setHidden] = useState(false);
  const lastY = useRef(0);
  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setHidden(y > 120 && y > lastY.current);
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <>
      <nav className={`nav ${hidden ? "hidden" : ""}`}>
        <a className="logo" href="#top">
          peticota<span className="dot"></span>
        </a>
        <ul className="nav-links">
          {t.nav.map((n, i) => (
            <li key={i}>
              <a href={`#${["top","products","customize","manifesto","footer"][i]}`}>{n}</a>
            </li>
          ))}
        </ul>
        <div className="right">
          <div className="lang-toggle">
            <button
              className={lang === "tr" ? "active" : ""}
              onClick={() => setLang("tr")}
            >
              TR
            </button>
            <button
              className={lang === "en" ? "active" : ""}
              onClick={() => setLang("en")}
            >
              EN
            </button>
          </div>
          <ThemeToggle />
          <CartButton lang={lang} />
        </div>
      </nav>
      <div className="ticker">
        <div className="ticker-track">
          {[0, 1].map((d) => (
            <span key={d}>
              {t.ticker.map((x, i) => (
                <span key={i}>{x}</span>
              ))}
            </span>
          ))}
        </div>
      </div>
    </>
  );
};

/* ================================================
   HERO
================================================ */
const Hero = ({ t }) => {
  const imgRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!imgRef.current) return;
      const y = window.scrollY;
      imgRef.current.style.transform = `scale(1.08) translateY(${y * 0.18}px)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Hero lines from copy.heroLines — each line is array of strings.
  // We render words with stagger and underline accents
  return (
    <section className="hero" id="top">
      <div className="hero-frame">
        <div
          ref={imgRef}
          className="hero-image"
          style={{
            backgroundImage:
              "url('https://peticota.com/wp-content/uploads/2025/12/WhatsApp-Gorsel-2025-12-16-saat-14.16.55_2d9803f0-1-edited-1024x683.jpg')"
          }}
        />
        <div className="hero-meta-top">
          <span>{t.heroMetaTop[0]}</span>
          <span>{t.heroMetaTop[1]}</span>
        </div>

        <div className="hero-sticker">
          <div className="inner" style={{ position: "absolute", inset: 0 }} />
          <span style={{ position: "relative", maxWidth: "78%" }}>
            {t.sticker}
          </span>
        </div>

        <div className="hero-headline">
          {t.heroLines.map((line, i) => (
            <span className="line" key={i}>
              <span className="word">
                {line.map((w, j) =>
                  w == null ? (
                    <span key={j} className="accent">design</span>
                  ) : (
                    <span key={j}>{w} </span>
                  )
                )}
              </span>
            </span>
          ))}
        </div>
      </div>

      <div className="hero-bottom-row">
        <p className="pitch">"{t.heroPitch}"</p>
        {t.heroMeta.map((m, i) => (
          <div className="meta" key={i}>
            <b>{m.k}</b>
            {m.v}
          </div>
        ))}
      </div>
    </section>
  );
};

/* ================================================
   KINETIC MARQUEE
================================================ */
const Marquee = ({ words, accent, dark, reverse }) => {
  return (
    <div
      className={`kinetic-marquee ${dark ? "dark" : ""} ${reverse ? "reverse" : ""}`}
    >
      <div className="kinetic-marquee-track">
        {[0, 1].map((d) => (
          <span key={d}>
            {words.map((w, i) => (
              <span key={i}>
                {w}
                {i === 2 && accent ? (
                  <span className="italic"> {accent} </span>
                ) : null}
              </span>
            ))}
          </span>
        ))}
      </div>
    </div>
  );
};

/* ================================================
   MANIFESTO
================================================ */
const Manifesto = ({ t }) => {
  const ref = useRef(null);
  const seen = useInView(ref);
  return (
    <section className="manifesto" ref={ref} id="manifesto">
      <span className="num">{t.manifestoNum}</span>
      <div className={`manifesto-quote ${seen ? "in-view" : ""}`}>
        {t.manifestoQuote.map((p, i) => {
          if (typeof p === "string") {
            // strike-through "ekipman" word optionally
            return (
              <span key={i}>
                {p.split(" ").map((w, j) => {
                  const isCross = /ekipman|equipment/i.test(w);
                  return (
                    <span key={j} className={isCross ? "crossout" : ""}>
                      {w}{" "}
                    </span>
                  );
                })}
                <br />
              </span>
            );
          }
          if (p.em) return <em key={i}>{p.em}</em>;
          return null;
        })}
      </div>
      <p className="manifesto-tail">{t.manifestoTail}</p>
    </section>
  );
};

/* ================================================
   PRODUCTS
================================================ */
const SWATCHES = [
  { c: "#0b0b08", name: "Kömür" },
  { c: "#e1261c", name: "Kızıl" },
  { c: "#c9a371", name: "Buğday" },
  { c: "#f1ecdf", name: "Krem" }
];

const ProductsIntro = ({ t }) => (
  <section className="products-intro" id="products">
    <span className="eyebrow">{t.productsEyebrow}</span>
    <h2>{renderParts(t.productsTitle)}</h2>
  </section>
);

const ProductCard = ({ p, idx, t, lang }) => {
  const wrapRef = useRef(null);
  const imgRef = useRef(null);
  const [activeSwatch, setActiveSwatch] = useState(idx === 0 ? 0 : 1);

  useEffect(() => {
    const onScroll = () => {
      if (!wrapRef.current || !imgRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      const center = r.top + r.height / 2;
      const vh = window.innerHeight;
      const progress = (vh / 2 - center) / vh; // -1..1 ish
      const rot = progress * 28 * (idx % 2 === 0 ? 1 : -1);
      const y = progress * 30;
      imgRef.current.style.transform = `translateY(${y}px) rotate(${rot}deg)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, [idx]);

  const flip = idx % 2 === 1;
  return (
    <article ref={wrapRef} className={`product ${flip ? "flip" : ""}`}>
      <div className="product-image">
        <span className="corner-label">{p.cornerLabel}</span>
        <div className="product-img-wrap">
          <img ref={imgRef} src={p.bg} alt={p.title.join(" ")} />
        </div>
        <span className="price-tag">{p.price}</span>
      </div>
      <div className="product-info">
        <div
          style={{
            display: "flex",
            alignItems: "baseline",
            justifyContent: "space-between"
          }}
        >
          <span className="number">
            <span className="barre">/</span>
            {p.num}
          </span>
          <span className="mono">{lang === "tr" ? "Ürün" : "Product"}</span>
        </div>
        <h3>{renderParts(p.title)}</h3>
        <p className="desc">{p.desc}</p>

        <div className="specs">
          {p.specs.map((s, i) => (
            <div className="spec" key={i}>
              {s.k}
              <b>{s.v}</b>
            </div>
          ))}
        </div>

        <div>
          <div className="swatch-label" style={{ marginBottom: 10 }}>
            {p.swatchLabel} · {SWATCHES[activeSwatch].name}
          </div>
          <div className="swatches">
            {SWATCHES.map((s, i) => (
              <span
                key={i}
                className={`swatch ${activeSwatch === i ? "active" : ""}`}
                style={{ background: s.c }}
                onClick={() => setActiveSwatch(i)}
              />
            ))}
          </div>
        </div>

        <div className="product-actions">
          <a className="btn btn-red" href={`tasarla.html?p=${idx === 0 ? "collar" : "leash"}`}>
            {p.cta} <span className="arr">→</span>
          </a>
          <button
            className="btn"
            onClick={() => {
              const item = {
                kind: idx === 0 ? (lang === "en" ? "Collar" : "Tasma") : (lang === "en" ? "Leash" : "Kayış"),
                name: typeof p.title === "object" ? p.title.map(x => typeof x === "string" ? x : x.em).join(" ") : String(p.title),
                size: idx === 0 ? "M" : "150 cm",
                color: SWATCHES[activeSwatch].name,
                swatch: SWATCHES[activeSwatch].c,
                code: idx === 0 ? "C" : "L",
                price: idx === 0 ? 1290 : 1490,
                qty: 1
              };
              try {
                const raw = localStorage.getItem("peticota.cart.v1");
                const arr = raw ? JSON.parse(raw) : [];
                arr.push({ ...item, id: `it_${Date.now()}_${Math.random().toString(36).slice(2,6)}` });
                localStorage.setItem("peticota.cart.v1", JSON.stringify(arr));
                window.dispatchEvent(new CustomEvent("peticota:cart-changed"));
              } catch (e) {}
              if (typeof showCartToast === "function") showCartToast(item.name, lang);
            }}
          >
            {lang === "tr" ? "Sepete ekle" : "Add to cart"}
          </button>
        </div>
      </div>
    </article>
  );
};

const Products = ({ t, lang }) => (
  <>
    <ProductsIntro t={t} />
    {t.products.map((p, i) => (
      <ProductCard key={i} p={p} idx={i} t={t} lang={lang} />
    ))}
  </>
);

/* ================================================
   CUSTOMIZE
================================================ */
const Customize = ({ t }) => (
  <section className="customize" id="customize">
    <span className="customize-eyebrow">{t.customizeEyebrow}</span>
    <h2>{renderParts(t.customizeTitle)}</h2>
    <div className="customize-grid">
      {t.customizeSteps.map((s, i) => (
        <div className="customize-step" key={i}>
          <span className="step-num">0{i + 1}</span>
          <h4>{s.t}</h4>
          <p>{s.d}</p>
        </div>
      ))}
    </div>
    <div className="customize-cta-row">
      <span className="mono" style={{ opacity: 0.7 }}>
        {t.customizeMeta}
      </span>
      <a className="btn btn-red" href="tasarla.html">
        {t.customizeCta} <span className="arr">→</span>
      </a>
    </div>
  </section>
);

/* ================================================
   QR
================================================ */
const QRSection = ({ t }) => {
  const tagRef = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!tagRef.current) return;
      const r = tagRef.current.getBoundingClientRect();
      const center = r.top + r.height / 2;
      const vh = window.innerHeight;
      const progress = (vh / 2 - center) / vh;
      tagRef.current.style.transform = `rotate(${-4 + progress * 18}deg)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <section className="qr">
      <div className="qr-left">
        <div>
          <span className="mono" style={{ color: "var(--muted)" }}>
            Nº 04 — Smart Tag
          </span>
          <h2 style={{ marginTop: 22 }}>{renderParts(t.qrTitle)}</h2>
        </div>
        <p className="desc">{t.qrDesc}</p>
        <ul className="features">
          {t.qrFeatures.map((f, i) => (
            <li key={i}>{f}</li>
          ))}
        </ul>
      </div>
      <div className="qr-right">
        <div className="qr-tag" ref={tagRef}>
          <span className="ring" />
          <div className="tag-top">
            <span>{t.qrTagTop[0]}</span>
            <span>{t.qrTagTop[1]}</span>
          </div>
          <div className="qr-square">
            <img
              src="https://peticota.com/wp-content/uploads/2025/03/qr-code-3-300x300.png"
              alt="QR"
            />
          </div>
          <div className="tag-bottom">{renderParts(t.qrTagBottom)}</div>
        </div>
      </div>
    </section>
  );
};

/* ================================================
   NEWSLETTER → Google Sheets (WhiteList)
================================================ */
const Newsletter = ({ t, lang }) => {
  const [email, setEmail] = React.useState("");
  const [hp, setHp] = React.useState(""); // honeypot
  const [cfToken, setCfToken] = React.useState(""); // Cloudflare Turnstile
  const [status, setStatus] = React.useState("idle"); // idle | sending | ok | err | captcha
  const submit = async (e) => {
    e.preventDefault();
    const v = email.trim();
    if (!v || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)) { setStatus("err"); return; }
    if (!cfToken) { setStatus("captcha"); return; }
    setStatus("sending");
    // 1) Yerel kayıt (Sheet erişilemezse veri kaybolmasın)
    try {
      const k = "peticota.newsletter.v1";
      const arr = JSON.parse(localStorage.getItem(k) || "[]");
      arr.push({ email: v, at: new Date().toISOString(), lang });
      localStorage.setItem(k, JSON.stringify(arr));
    } catch (e) {}
    // 2) Google Sheet → WhiteList sekmesi
    if (typeof pushToSheet === "function") {
      await pushToSheet({
        type: "whitelist",
        email: v,
        lang,
        source: "peticota.com",
        hp,
        cfToken
      });
    }
    setStatus("ok");
    setEmail("");
  };
  if (status === "ok") {
    return (
      <div className="footer-col footer-newsletter">
        <h5>{t.newsletterTitle}</h5>
        <div className="newsletter-success">
          <div className="mono">{lang === "en" ? "✓ Subscribed" : "✓ Kaydoldun"}</div>
          <div className="name">
            {lang === "en"
              ? "Welcome. We'll write before the next collection drops."
              : "Hoş geldin. Yeni koleksiyondan önce yazacağız."}
          </div>
        </div>
      </div>
    );
  }
  return (
    <div className="footer-col footer-newsletter">
      <h5>{t.newsletterTitle}</h5>
      <p style={{ marginBottom: 12 }}>{t.newsletterDesc}</p>
      <form onSubmit={submit}>
        {/* Honeypot — görünmez, sadece bot doldurur */}
        <input
          type="text"
          name="website"
          tabIndex={-1}
          autoComplete="off"
          aria-hidden="true"
          value={hp}
          onChange={(e) => setHp(e.target.value)}
          style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0, pointerEvents: "none" }}
        />
        <input
          type="email"
          required
          placeholder={status === "err" ? (lang === "en" ? "Invalid email" : "Geçersiz e-posta") : "email@adres.com"}
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (status === "err" || status === "captcha") setStatus("idle"); }}
          style={status === "err" ? { borderColor: "var(--red)", color: "var(--red)" } : {}}
        />
        <div style={{ margin: "10px 0 8px" }}>
          <TurnstileWidget onToken={setCfToken} theme="dark" size="compact" />
        </div>
        {status === "captcha" ? (
          <div className="mono" style={{ fontSize: 10, color: "var(--red)", marginBottom: 8 }}>
            {lang === "en" ? "Please complete verification" : "Lütfen doğrulamayı tamamlayın"}
          </div>
        ) : null}
        <button type="submit" disabled={status === "sending"}>
          {status === "sending" ? (lang === "en" ? "..." : "...") : t.newsletterCta}
        </button>
      </form>
    </div>
  );
};

/* ================================================
   FOOTER
================================================ */
const Footer = ({ t, lang }) => {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = Math.max(0, Math.min(1, 1 - r.top / vh));
      ref.current.style.transform = `translateX(${-220 * (1 - p)}px)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <footer className="footer" id="footer">
      <div className="footer-mega" ref={ref}>
        {t.footerMega[0]}
        <span className="dot"></span>
      </div>
      <div className="footer-grid">
        <Newsletter t={t} lang={lang} />
        {t.footerCols.map((c, i) => (
          <div className="footer-col" key={i}>
            <h5>{c.h}</h5>
            {c.items.map((it, j) => {
              const isExternal = typeof it.href === "string" && /^https?:\/\//.test(it.href);
              return (
                <a
                  key={j}
                  href={it.href || "#"}
                  target={isExternal ? "_blank" : undefined}
                  rel={isExternal ? "noopener noreferrer" : undefined}
                >
                  {it.l}
                </a>
              );
            })}
          </div>
        ))}
      </div>
      <div className="footer-legal">
        <span>{t.legal[0]}</span>
        <span>{t.legal[1]}</span>
      </div>
    </footer>
  );
};

/* ================================================
   SCROLL PROGRESS
================================================ */
const ScrollProgress = () => {
  const ref = useRef(null);
  useEffect(() => {
    const onScroll = () => {
      if (!ref.current) return;
      const h =
        document.documentElement.scrollHeight - window.innerHeight;
      const p = Math.min(1, window.scrollY / h);
      ref.current.style.width = `${p * 100}%`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return <div className="scroll-progress" ref={ref}></div>;
};

/* ================================================
   FLOAT BADGE (bottom-left)
================================================ */
const FloatBadge = ({ t }) => (
  <a className="float-badge" href="tasarla.html">
    <span>
      {t.floatBadge[0]}
      <br />
      <em style={{ fontFamily: "var(--f-serif)", color: "#e1261c" }}>
        {t.floatBadge[1]}
      </em>
    </span>
  </a>
);

/* ================================================
   APP
================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "tr",
  "red": "#e1261c",
  "darkMarquee": true,
  "showFloat": true
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang;
  const setLang = (l) => setTweak("lang", l);
  const t = COPY[lang];

  // Apply red as CSS variable
  useEffect(() => {
    document.documentElement.style.setProperty("--red", tweaks.red);
  }, [tweaks.red]);

  return (
    <>
      <ScrollProgress />
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <Marquee words={t.marquee1} accent={t.marqueeAccent} dark={tweaks.darkMarquee} />
      <Manifesto t={t} />
      <Marquee words={t.marquee2} reverse />
      <Products t={t} lang={lang} />
      <Customize t={t} />
      <QRSection t={t} />
      <Footer t={t} lang={lang} />
      <CartDrawer lang={lang} />
      {tweaks.showFloat ? <FloatBadge t={t} /> : null}

      <TweaksPanel title="Tweaks">
        <TweakSection title="Dil / Language">
          <TweakRadio
            value={tweaks.lang}
            onChange={(v) => setTweak("lang", v)}
            options={[
              { value: "tr", label: "Türkçe" },
              { value: "en", label: "English" }
            ]}
          />
        </TweakSection>
        <TweakSection title="Marka Rengi">
          <TweakColor
            value={tweaks.red}
            onChange={(v) => setTweak("red", v)}
            options={["#e1261c", "#c4633a", "#1a3528", "#0b0b08", "#d62828"]}
          />
        </TweakSection>
        <TweakSection title="Stil">
          <TweakToggle
            label="Koyu kinetik marquee"
            value={tweaks.darkMarquee}
            onChange={(v) => setTweak("darkMarquee", v)}
          />
          <TweakToggle
            label="Sol alt 'Tasarla' rozeti"
            value={tweaks.showFloat}
            onChange={(v) => setTweak("showFloat", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
