// Kotleto · PROMOS / deals strip

function Promos({ accent = "#D9461E" }) {
  const { lang } = useLang();
  const [copied, setCopied] = useState(null);
  const copyTimer = useRef(null);
  useEffect(() => () => clearTimeout(copyTimer.current), []);

  const onCopy = async (code) => {
    try {
      if (!navigator.clipboard?.writeText) throw new Error("Clipboard unavailable");
      await navigator.clipboard.writeText(code);
      setCopied(code);
      clearTimeout(copyTimer.current);
      copyTimer.current = setTimeout(() => setCopied(null), 1400);
    } catch (_) {
      notify(lang === "fa" ? `کپی خودکار ممکن نشد؛ کد تخفیف: ${code}` : `Automatic copy unavailable; promo code: ${code}`, "error");
    }
  };

  return (
    <section id="deals" style={{ padding: "80px 0", background: "var(--paper-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <Wrap className="wrap-pad">
        <SectionTitle
          eyebrow={{ fa: "پیشنهادها", en: "Deals" }}
          title={{ fa: "تخفیف‌های خوشمزه", en: "Tasty discounts" }}
          sub={{ fa: "کدتخفیف رو کپی کن، موقع پرداخت بزن، آب از لب و لوچت راه بیفته.", en: "Copy the code, paste at checkout, watch your wallet smile." }}
          accent={accent}
        />

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(290px, 1fr))", gap: 22, marginTop: 40 }}>
          {PROMOS.map((p, i) => (
            <div key={p.id} style={{
              position: "relative", overflow: "hidden",
              background: p.color, color: "#fff",
              borderRadius: 28, padding: "30px 26px",
              minHeight: 260, display: "flex", flexDirection: "column", justifyContent: "space-between",
              border: "1.5px solid var(--ink)",
              boxShadow: "0 8px 0 var(--ink)",
              transform: `rotate(${i % 2 ? 1 : -1}deg)`,
            }}>
              {/* dashed top notch */}
              <div style={{
                position: "absolute", top: 0, left: 0, right: 0, height: 8,
                backgroundImage: "linear-gradient(90deg, rgba(0,0,0,0.3) 50%, transparent 50%)",
                backgroundSize: "16px 8px",
              }} />
              <div>
                <div style={{ fontSize: 12, opacity: 0.8, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 8 }}>
                  {lang === "fa" ? "تخفیف ویژه" : "Special offer"}
                </div>
                <div className="display" style={{ fontSize: 36, lineHeight: 1 }}>{p[lang].title}</div>
                <p style={{ marginTop: 12, fontSize: 14, opacity: 0.9, lineHeight: 1.5 }}>{p[lang].body}</p>
              </div>

              <div style={{ display: "flex", gap: 10, alignItems: "stretch", marginTop: 14 }}>
                <div style={{
                  flex: 1, background: "rgba(0,0,0,0.25)",
                  border: "1.5px dashed rgba(255,255,255,0.4)",
                  borderRadius: 14, padding: "10px 14px",
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                }}>
                  <span style={{ fontSize: 11, opacity: 0.7 }}>{lang === "fa" ? "کد" : "Code"}</span>
                  <span className="display" style={{ fontSize: 22, letterSpacing: "0.1em" }}>{p.code}</span>
                </div>
                <button onClick={()=>onCopy(p.code)} style={{
                  padding: "10px 18px", borderRadius: 14,
                  background: "var(--ink)", color: "var(--paper)",
                  fontWeight: 700, fontSize: 13, whiteSpace: "nowrap",
                }}>
                  {copied === p.code ? (lang === "fa" ? "کپی شد ✓" : "Copied ✓") : (lang === "fa" ? "کپی" : "Copy")}
                </button>
              </div>
              <div style={{ marginTop: 10, fontSize: 11, opacity: 0.7 }}>
                {lang === "fa" ? "اعتبار تا" : "Until"}: <span style={{fontWeight:700}}>{typeof p.expires === "object" ? pick(p.expires, lang) : p.expires}</span>
              </div>
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

window.Promos = Promos;