// Testimonials.jsx — StatisticsSection + ReviewsSlider + ClientTestimonialsSection
Object.assign(window, { StatisticsSection, ReviewsSliderSection, ClientTestimonialsSection });

const t = window.t;

/* Statistics */
function StatisticsSection() {
  const scrollToForm = () => {
    const el = document.getElementById("registration");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  const stats = [
    { vk: "stats.s1v", lk: "stats.s1l" },
    { vk: "stats.s2v", lk: "stats.s2l" },
    { vk: "stats.s3v", lk: "stats.s3l" },
    { vk: "stats.s4v", lk: "stats.s4l" },
  ];

  return (
    <section style={{ background: "#F2F2F0", padding: "60px 28px 0" }}>
      <div style={{ maxWidth: 1200, margin: "0 auto" }}>

        <div style={{
          fontFamily: "Unbounded, sans-serif", fontWeight: 600,
          fontSize: "clamp(22px, 2.4vw, 34px)", color: "#f4874b",
          marginBottom: 28, letterSpacing: "-0.5px",
        }}>
          {t("stats.label")}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 48 }}>
          {stats.map((s, i) => (
            <div key={i} style={{
              fontFamily: "Unbounded, sans-serif", fontSize: "clamp(14px, 1.1vw, 17px)",
              color: "#061617", lineHeight: 1.5,
            }}>
              <strong style={{ fontWeight: 700 }}>{t(s.vk)}</strong>
              <span style={{ color: "#3D3D3D" }}> — {t(s.lk)}</span>
            </div>
          ))}
        </div>

        <div style={{ height: 1, background: "#003E40", marginBottom: 40 }} />

        <div style={{ textAlign: "center", paddingBottom: 60 }}>
          <div style={{
            fontFamily: "Unbounded, sans-serif", fontWeight: 700,
            fontSize: "clamp(13px, 1.1vw, 16px)", color: "#003E40",
            letterSpacing: "0.03em", marginBottom: 18, textTransform: "uppercase",
          }}>
            {t("stats.cta_h")}
          </div>
          <button onClick={scrollToForm} className="full-btn-mobile" style={{
            background: "#003E40", border: "none", borderRadius: 10,
            color: "#fff", fontFamily: "Unbounded, sans-serif",
            fontWeight: 700, fontSize: 13, letterSpacing: "0.05em",
            padding: "16px 44px", cursor: "pointer", textTransform: "uppercase",
          }}>
            {t("stats.cta_btn")}
          </button>
        </div>

      </div>
    </section>
  );
}

/* Reviews Slider */
function ReviewsSliderSection() {
  const reviews = [
    { cc: "de", name: "Anna",   rating: "4.9/5", n: 4.9 },
    { cc: "be", name: "Sofia",  rating: "4.8/5", n: 4.8 },
    { cc: "es", name: "Luka",   rating: "4.9/5", n: 4.9 },
    { cc: "lv", name: "Leila",  rating: "5/5",   n: 5   },
    { cc: "dk", name: "Daria",  rating: "4.9/5", n: 4.9 },
    { cc: "cz", name: "Alex",   rating: "4.9/5", n: 4.9 },
    { cc: "nl", name: "Mark",   rating: "5/5",   n: 5   },
    { cc: "fr", name: "Claire", rating: "4.8/5", n: 4.8 },
  ];

  const Stars = ({ n }) => (
    <div style={{ display: "flex", gap: 2 }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width="13" height="13" viewBox="0 0 14 14" fill={i <= Math.round(n) ? "#f4874b" : "#e0d8ce"}>
          <polygon points="7,1 8.8,5.2 13.3,5.5 10,8.5 11,13 7,10.5 3,13 4,8.5 0.7,5.5 5.2,5.2"/>
        </svg>
      ))}
    </div>
  );

  const Card = ({ r }) => (
    <div style={{
      background: "#fff", borderRadius: 16, padding: "20px 22px",
      border: "1px solid #e0d8ce",
      minWidth: 160, textAlign: "center", flexShrink: 0,
    }}>
      <div style={{ display: "flex", justifyContent: "center", marginBottom: 8 }}>
        <img
          src={`https://flagcdn.com/w40/${r.cc}.png`}
          srcSet={`https://flagcdn.com/w80/${r.cc}.png 2x`}
          width="40" height="28"
          alt={r.cc}
          style={{ borderRadius: 4, objectFit: "cover", display: "block" }}
        />
      </div>
      <div style={{ fontFamily: "Inter, Arial, sans-serif", fontWeight: 700, fontSize: 15, color: "#1a2c38", marginBottom: 6 }}>{r.name}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "center", marginBottom: 8 }}>
        <Stars n={r.n} />
        <span style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 13, fontWeight: 600, color: "#f4874b" }}>{r.rating}</span>
      </div>
      <div style={{
        display: "flex", alignItems: "center", gap: 5, justifyContent: "center",
        border: "1px solid #e0d8ce", borderRadius: 20, padding: "4px 10px",
      }}>
        <span style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 11, color: "#3a4a58" }}>{t("testimonials.verified")}</span>
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
          <circle cx="6" cy="6" r="5.5" fill="#005254"/>
          <path d="M3.5 6l2 2 3-3" stroke="#fff" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </div>
  );

  return (
    <section style={{ background: "#F2F2F0", padding: "36px 0", overflow: "hidden" }}>
      <div className="reviews-ticker-track" style={{ padding: "8px 0" }}>
        {[...reviews, ...reviews].map((r, i) => (
          <Card key={i} r={r} />
        ))}
      </div>
    </section>
  );
}

/* Client Testimonials */
function ClientTestimonialsSection() {
  const scrollToForm = () => {
    const el = document.getElementById("registration");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
  };

  const testimonials = [
    { amountKey: "testimonials.t1_amount", textKey: "testimonials.t1_text", name: "Maria Schmidt, Germany", ageKey: "testimonials.t1_age", total: "€24,800" },
    { amountKey: "testimonials.t2_amount", textKey: "testimonials.t2_text", name: "Luca Rossi, Italy",       ageKey: "testimonials.t2_age", total: "€37,350" },
    { amountKey: "testimonials.t3_amount", textKey: "testimonials.t3_text", name: "Sophie Laurent, France", ageKey: "testimonials.t3_age", total: "€18,900" },
    { amountKey: "testimonials.t4_amount", textKey: "testimonials.t4_text", name: "Thomas Muller, Germany", ageKey: "testimonials.t4_age", total: "€29,400" },
  ];

  const Stars = () => (
    <div style={{ display: "flex", gap: 3 }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width="14" height="14" viewBox="0 0 14 14" fill="#f4874b">
          <polygon points="7,1 8.8,5.2 13.3,5.5 10,8.5 11,13 7,10.5 3,13 4,8.5 0.7,5.5 5.2,5.2"/>
        </svg>
      ))}
    </div>
  );

  return (
    <section id="reviews" style={{ background: "linear-gradient(180deg, #005254 0%, #003E40 100%)", padding: "72px 24px" }}>
      <div style={{ maxWidth: 1160, margin: "0 auto" }}>

        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, border: "1px solid rgba(255,255,255,0.25)", borderRadius: 20, padding: "5px 14px", marginBottom: 20 }}>
            <span style={{ fontFamily: "Montserrat, Arial, sans-serif", fontSize: 12, fontWeight: 700, color: "#fff", letterSpacing: 0.5 }}>{t("testimonials.badge")}</span>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#f4874b", display: "inline-block" }} />
          </div>
          <h2 style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 900, fontSize: "clamp(24px, 3vw, 40px)", color: "#fff", lineHeight: 1.2, textTransform: "uppercase" }}>
            {t("testimonials.h2a")}<br />{t("testimonials.h2b")}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginBottom: 48 }} className="testimonials-grid">
          {testimonials.map((t2, i) => (
            <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "22px", display: "flex", flexDirection: "column" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
                <div style={{
                  width: 30, height: 30, borderRadius: 8, background: "#005254",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  color: "#fff", fontFamily: "Georgia, serif", fontWeight: 700, fontSize: 18, lineHeight: 1,
                }}>"</div>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <Stars />
                  <span style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 12, fontWeight: 600, color: "#f4874b" }}>4.9/5</span>
                </div>
              </div>

              <div style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 800, fontSize: 14, color: "#1a2c38", marginBottom: 12, letterSpacing: 0.2 }}>{t(t2.amountKey)}</div>

              <p style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 13, color: "#3a4a58", lineHeight: 1.65, marginBottom: 14, flex: 1 }}>
                &laquo;{t(t2.textKey)}&raquo;
              </p>

              <div style={{ background: "#005254", color: "#fff", fontFamily: "Inter, Arial, sans-serif", fontSize: 12, fontWeight: 600, padding: "7px 12px", borderRadius: 8, marginBottom: 16 }}>
                {t("testimonials.rec_pre")}{t2.total}.
              </div>

              <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                <img src="assets/images/avatar.png" alt="" style={{ width: 40, height: 40, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
                <div>
                  <div style={{ fontFamily: "Inter, Arial, sans-serif", fontWeight: 700, fontSize: 14, color: "#1a2c38" }}>{t2.name}</div>
                  <div style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 12, color: "#888" }}>{t(t2.ageKey)}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: "center" }}>
          <div style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 700, fontSize: 17, color: "#fff", marginBottom: 20, textTransform: "uppercase", letterSpacing: 0.5 }}>
            {t("testimonials.cta_h")}
          </div>
          <button onClick={scrollToForm} className="full-btn-mobile" style={{
            background: "#f4874b", border: "none", borderRadius: 10,
            color: "#fff", fontFamily: "Montserrat, Arial, sans-serif",
            fontWeight: 700, fontSize: 14, letterSpacing: 1,
            padding: "16px 40px", cursor: "pointer", textTransform: "uppercase",
          }}>
            {t("testimonials.cta_btn")}
          </button>
        </div>

      </div>
    </section>
  );
}