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

/* Cases */
function CasesSection() {
  const cases = [
    { num: "1", name: "Maria Schmidt, Germany", lost: "24,800", platform: "Crypto scam via Instagram advertising",           recovered: "22,800 (92%)", time: "8 days"  },
    { num: "2", name: "Luca Rossi, Italy",       lost: "41,500", platform: "Fake Forex broker (Google Ads)",                   recovered: "37,350 (90%)", time: "12 days" },
    { num: "3", name: "Sophie Laurent, France",  lost: "18,900", platform: "Investment scam after targeted Facebook ads",      recovered: "17,200 (91%)", time: "9 days"  },
    { num: "4", name: "Anna Kowalska, Poland",   lost: "32,700", platform: "Crypto withdrawal block (Instagram advertising)", recovered: "29,800 (91%)", time: "11 days" },
  ];

  return (
    <section style={{ background: "#F2F2F0", padding: "72px 24px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>

        <h2 style={{
          fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 900,
          fontSize: "clamp(22px, 3.2vw, 42px)", color: "#1a2c38",
          lineHeight: 1.15, marginBottom: 14, textTransform: "uppercase",
        }}>
          WE HAVE ALREADY RECOVERED OVER{" "}
          <span style={{ color: "#f4874b" }}>&euro;15,000,000</span>{" "}
          FOR EUROPEAN CLIENTS
        </h2>

        <p style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 16, color: "#3a4a58", lineHeight: 1.7, marginBottom: 8 }}>
          Here are some of our recent cases where people lost money after seeing ads on Meta and Google.
        </p>
        <div style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 700, fontSize: 18, color: "#f4874b", marginBottom: 36 }}>
          Four European Cases:
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }} className="cases-grid">
          {cases.map((c, i) => (
            <div key={i}>
              <div style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 900, fontSize: 42, color: "#f4874b", lineHeight: 1, marginBottom: 10 }}>{c.num}</div>
              <div style={{ fontFamily: "Montserrat, Arial, sans-serif", fontWeight: 700, fontSize: 18, color: "#1a2c38", marginBottom: 10 }}>{c.name}</div>
              <div style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 15, color: "#3a4a58", marginBottom: 6 }}>
                <strong>Lost:</strong> &euro;{c.lost}
              </div>
              <div style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 15, color: "#3a4a58", marginBottom: 14 }}>
                <strong>Platform:</strong> {c.platform}
              </div>
              <div style={{
                display: "inline-block",
                background: "#005254", color: "#fff",
                fontFamily: "Inter, Arial, sans-serif", fontWeight: 600, fontSize: 14,
                padding: "7px 14px", borderRadius: 20, marginBottom: 10,
              }}>
                <strong>Recovered:</strong> &euro;{c.recovered}
              </div>
              <div style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 15, color: "#3a4a58" }}>
                Time: {c.time}
              </div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

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

  const stats = [
    { value: "15+ million €", label: "Total amount recovered" },
    { value: "187",           label: "Successfully closed cases" },
    { value: "91%",           label: "Average recovery rate" },
    { value: "11 days",       label: "Average recovery time" },
  ];

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

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

        {/* List */}
        <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 }}>{s.value}</strong>
              <span style={{ color: "#3D3D3D" }}> — {s.label}</span>
            </div>
          ))}
        </div>

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

        {/* CTA */}
        <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",
          }}>
            WANT TO KNOW HOW MUCH WE CAN RECOVER IN YOUR CASE?
          </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",
          }}>
            CHECK MY CASE FOR FREE
          </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" }}>Verified Review</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 = [
    {
      amount: "RECOVERY OF €24,800",
      text: "I lost €24,800 after seeing an ad on Instagram. Within just 8 days, Apex Claim returned almost everything. The team was extremely professional and kept me updated at every stage. Thank you so much!",
      name: "Maria Schmidt, Germany", age: "30 years old", total: "€24,800",
    },
    {
      amount: "RECOVERY OF €37,350",
      text: "I was scammed through a fake Forex broker via Google Ads. Apex Claim recovered €37,350 in 12 days. I'm very glad I contacted them. No upfront fees - everything was honest and transparent.",
      name: "Luca Rossi, Italy", age: "37 years old", total: "€37,350",
    },
    {
      amount: "RECOVERY OF €18,900",
      text: "After losing €18,900 I no longer believed it was possible to get the money back. Apex Claim managed to do it in 9 days. I'm very grateful for their support and transparency.",
      name: "Sophie Laurent, France", age: "40 years old", total: "€18,900",
    },
    {
      amount: "RECOVERY OF €29,400",
      text: "They recovered €29,400 after a crypto scam. The most important thing - no hidden fees. Everything was official and according to the contract. I highly recommend them!",
      name: "Thomas Muller, Germany", age: "25 years old", 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 }}>RESULT</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" }}>
            CLIENT TESTIMONIALS<br />ABOUT OUR WORK
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20, marginBottom: 48 }} className="testimonials-grid">
          {testimonials.map((t, 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.amount}</div>

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

              <div style={{ background: "#005254", color: "#fff", fontFamily: "Inter, Arial, sans-serif", fontSize: 12, fontWeight: 600, padding: "7px 12px", borderRadius: 8, marginBottom: 16 }}>
                The total amount recovered was {t.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" }}>{t.name}</div>
                  <div style={{ fontFamily: "Inter, Arial, sans-serif", fontSize: 12, color: "#888" }}>{t.age}</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 }}>
            WANT TO LEAVE A REVIEW LIKE THIS TOO?
          </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",
          }}>
            CHECK MY CASE FOR FREE
          </button>
        </div>

      </div>
    </section>
  );
}