// Kotleto · REVIEWS — testimonial cards

function Reviews({ accent = "#D9461E" }) {
  const { lang } = useLang();
  return (
    <section style={{ padding: "80px 0", background: "var(--paper-2)", borderTop: "1px solid var(--line)" }}>
      <Wrap className="wrap-pad">
        <SectionTitle
          eyebrow={{ fa: "تجربه‌ها", en: "Reviews" }}
          title={{ fa: "مردم چی می‌گن؟", en: "What people say" }}
          sub={{ fa: "بیش از ۲۱۰۰ مشتری، میانگین ۴.۹ ستاره. این فقط یه نمونه‌ست.", en: "2,100+ customers, 4.9 average. Just a sample below." }}
          accent={accent}
        />
        <div style={{ marginTop: 40, display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 22 }}>
          {REVIEWS.map((r, i) => (
            <div key={i} style={{
              background: "var(--paper)", border: "1.5px solid var(--ink)", borderRadius: 24,
              padding: 24, display: "flex", flexDirection: "column", gap: 14,
              transform: `rotate(${i % 2 ? 0.8 : -0.6}deg)`,
              boxShadow: "0 6px 0 var(--ink)",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: 999,
                  background: ["#D9461E", "#5B6B3A", "#E8B14A", "#8B2510", "#7B4A1C", "#5A7A8B"][i % 6],
                  color: "#fff", display: "grid", placeItems: "center",
                  fontFamily: "var(--display)", fontSize: 18,
                  border: "1.5px solid var(--ink)",
                }}>{pick(r.name, lang).slice(0,1)}</div>
                <div style={{ flex: 1 }}>
                  <div className="display" style={{ fontSize: 16 }}>{pick(r.name, lang)}</div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>{pick(r.city, lang)}</div>
                </div>
                <div style={{ display: "flex", gap: 2, color: accent }}>
                  {Array(r.stars).fill().map((_, j) => <Ico.Star key={j} />)}
                </div>
              </div>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)" }}>
                «{pick(r.text, lang)}»
              </p>
              {r.item && (() => {
                const it = MENU.find(m => m.id === r.item);
                if (!it) return null;
                return (
                  <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", background: "var(--paper-2)", borderRadius: 14, fontSize: 13 }}>
                    <span style={{ width: 28, height: 28, borderRadius: 999, background: it.color, display: "grid", placeItems: "center" }}>{it.emoji}</span>
                    <span style={{ color: "var(--ink-3)" }}>{lang === "fa" ? "سفارش داده:" : "Ordered:"}</span>
                    <span style={{ fontWeight: 700 }}>{it[lang].name}</span>
                  </div>
                );
              })()}
            </div>
          ))}
        </div>
      </Wrap>
    </section>
  );
}

window.Reviews = Reviews;