/* global React */

function QuoteMark() {
  return (
    <span className="font-serif" style={{ color: "var(--gold)", fontSize: "4rem", lineHeight: 0.6, display: "block", height: "2.2rem" }}>“</span>
  );
}

function Testimonials({ t, lang, items }) {
  return (
    <section style={{ background: "var(--cream)", padding: "120px 0 110px" }}>
      <div className="mx-auto px-6 lg:px-12" style={{ maxWidth: 1340 }}>
        <div className="text-center mb-16 reveal" style={{ maxWidth: 640, marginInline: "auto" }}>
          <span className="eyebrow" style={{ color: "var(--terracotta)" }}>{t.testiEyebrow}</span>
          <h2 className="font-serif mt-4" style={{ fontSize: "clamp(2rem, 3.6vw, 3.1rem)", fontWeight: 500, lineHeight: 1.1, color: "var(--charcoal)" }}>{t.testiTitle}</h2>
        </div>

        <div className="grid md:grid-cols-3 gap-7">
          {items.map((it, i) => (
            <figure key={i} className="reveal" data-delay={i + 1} style={{ background: "#fff", padding: "38px 34px 34px", borderRadius: 4, boxShadow: "0 24px 50px -36px rgba(42,42,42,0.4)", display: "flex", flexDirection: "column" }}>
              <QuoteMark />
              <blockquote className="font-serif mt-3" style={{ fontSize: "1.12rem", lineHeight: 1.55, color: "var(--charcoal)", fontWeight: 400, flex: 1 }}>
                {it.quote[lang] || it.quote.es}
              </blockquote>
              <figcaption className="flex items-center gap-3 mt-7" style={{ paddingTop: 20, borderTop: "1px solid var(--line)" }}>
                <span style={{ fontSize: "1.5rem" }}>{it.flag}</span>
                <span>
                  <span style={{ display: "block", fontWeight: 600, color: "var(--charcoal)", fontSize: "0.92rem" }}>{it.name}</span>
                  <span style={{ display: "block", color: "#8a8378", fontSize: "0.78rem" }}>{it.origin} → {it.where}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Testimonials });