// Popup.jsx — TrustSection + FAQSection
Object.assign(window, { TrustSection, FAQSection, HorizonPopup, ExitPopup });

function HorizonPopup() { return null; }
function ExitPopup()    { return null; }

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

  const points = [
    { bold: "Apex Claim Limited",        rest: "Registered Netherland legal company KVK 90098110" },
    { bold: "Success-Based Model",       rest: "No upfront fees. You pay only after we successfully recover your money." },
    { bold: "Official Agreement",        rest: "Every client receives a formal contract with clear terms, timelines, and conditions." },
    { bold: "European Legislation",      rest: "We operate under EU law and work directly with banks and regulatory authorities." },
    { bold: "Full Confidentiality",      rest: "All your data is protected and never shared with third parties." },
    { bold: "Over 15 Million Recovered", rest: "187 successfully closed cases to date." },
  ];

  return (
    <section id="about-trust" style={{ background: "#F2F2F0", padding: "72px 24px" }}>
      <div style={{ maxWidth: 1000, margin: "0 auto" }}>
        <div style={{
          background: "#fff", borderRadius: 20, overflow: "hidden",
          display: "flex", border: "1px solid #e0d8ce",
        }} className="trust-card">

          {/* Left: photo */}
          <div style={{ width: 340, flexShrink: 0, position: "relative" }} className="trust-photo-col">
            <div style={{
              position: "absolute", top: 20, left: 20, zIndex: 2,
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "#003E40", borderRadius: 20, padding: "7px 16px",
            }}>
              <span style={{ fontFamily: "Unbounded, sans-serif", fontSize: 11, fontWeight: 500, color: "#fff", letterSpacing: 0 }}>Trust &amp; Guarantees</span>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#f4874b", display: "inline-block", flexShrink: 0 }} />
            </div>
            <img src="assets/images/Img.png" alt="Apex Claim office"
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", minHeight: 460 }} />
          </div>

          {/* Right: content */}
          <div style={{ flex: 1, padding: "36px 36px 0" }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 16, gap: 16, flexWrap: "wrap" }}>
              <h2 style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: "clamp(18px, 1.8vw, 26px)", color: "#061617", lineHeight: 1.25 }}>
                Why You Can Trust Us
              </h2>
              {/* Logo: icon + text */}
              <div style={{ display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
                <img src="assets/images/Group.png" alt="Apex Claim" style={{ height: 40, width: "auto" }} />
                <div style={{ display: "flex", flexDirection: "column", lineHeight: 1.15 }}>
                  <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: 13, color: "#003E40", letterSpacing: "-0.3px" }}>Apex</span>
                  <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: 13, color: "#003E40", letterSpacing: "-0.3px" }}>Claim</span>
                </div>
              </div>
            </div>

            <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: 13, color: "#3a4a58", lineHeight: 1.75, marginBottom: 20 }}>
              We are an official <strong style={{ fontWeight: 700 }}>European legal</strong> company operating strictly within the law.
            </p>

            {points.map((p, i) => (
              <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: 12 }}>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#005254", flexShrink: 0, marginTop: 5 }} />
                <p style={{ fontFamily: "Unbounded, sans-serif", fontSize: 12, color: "#3a4a58", lineHeight: 1.7 }}>
                  <strong style={{ fontWeight: 700, color: "#061617" }}>{p.bold}</strong>{" "}{p.rest}
                </p>
              </div>
            ))}

            <p style={{ fontFamily: "Unbounded, sans-serif", fontSize: 12, color: "#3a4a58", lineHeight: 1.75, marginTop: 10, marginBottom: 6 }}>
              If we don't see a realistic chance of recovering your money, we will honestly tell you during the free case review.
            </p>
            <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: 12, color: "#061617", marginBottom: 0 }}>
              No false hopes.
            </p>

            {/* Card footer */}
            <div style={{
              marginTop: 28, marginLeft: -36, marginRight: -36,
              padding: "18px 36px",
              background: "#F2F2F0",
              display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap", justifyContent: "space-between",
            }}>
              <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 600, fontSize: 13, color: "#061617" }}>
                Ready to check your case?
              </span>
              <button onClick={scrollToForm} className="full-btn-mobile" style={{
                background: "#f4874b", border: "none", borderRadius: 8,
                color: "#fff", fontFamily: "Unbounded, sans-serif",
                fontWeight: 700, fontSize: 11, letterSpacing: "0.04em",
                padding: "13px 22px", cursor: "pointer",
                textTransform: "uppercase",
              }}>
                Get Your Free Case Review in 24 Hours
              </button>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}

/* FAQ */
function FAQSection() {
  const [open, setOpen] = React.useState(null);

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

  const faqs = [
    {
      q: "1. How much does your service cost?",
      a: <span>We work with <strong>no upfront fees</strong>. You only pay after the money is returned to your account. Our success fee ranges from 15% to 35% depending on the complexity of the case (clearly stated in the contract).</span>,
    },
    {
      q: "2. Is it realistic to recover money lost through Meta or Google ads?",
      a: "Yes. The majority of our successful cases involve victims of targeted advertising. On average, we recover 88–93% of lost funds.",
    },
    {
      q: "3. How long does the recovery process take?",
      a: <span>
           <span style={{ display: "flex", flexDirection: "column", gap: 4 }}>
             <span>• Case review: within 24 hours</span>
             <span>• First actions: 3–7 days</span>
             <span>• Full recovery: on average 7–14 days</span>
           </span>
         </span>,
    },
    {
      q: "4. Do I need to provide many documents?",
      a: "Only the minimum. Screenshots of chats, payment history, emails, and the name of the platform are usually enough. We will help you collect everything necessary.",
    },
    {
      q: "5. What if the chances of recovery are low?",
      a: "We will honestly tell you during the free case review and won't waste your time.",
    },
    {
      q: "6. Do you only work with Europeans?",
      a: "No. We assist clients from any country, but the company is registered in Netherland and operates under European law.",
    },
    {
      q: "7. Do you guarantee 100% recovery?",
      a: <span>We guarantee transparency and maximum effort. No one can guarantee 100% success, but our success rate on accepted cases is over <strong>90%</strong>.</span>,
    },
  ];

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

        <h2 style={{
          fontFamily: "Unbounded, sans-serif", fontWeight: 700,
          fontSize: "clamp(26px, 3.2vw, 48px)", color: "#fff",
          lineHeight: 1.2, marginBottom: 40, letterSpacing: "-0.5px",
        }}>
          Answers to the most common questions from our clients
        </h2>

        {faqs.map((item, i) => (
          <div key={i} style={{ background: "#fff", borderRadius: 12, marginBottom: 10, overflow: "hidden" }}>
            <button
              onClick={() => setOpen(open === i ? null : i)}
              style={{
                width: "100%", background: "none", border: "none",
                display: "flex", justifyContent: "space-between", alignItems: "center",
                padding: "20px 24px", cursor: "pointer",
                textAlign: "left", gap: 16,
              }}>
              <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 500, fontSize: "clamp(12px, 1vw, 15px)", color: "#1a2c38", lineHeight: 1.4 }}>
                {item.q}
              </span>
              <span style={{
                width: 30, height: 30, borderRadius: "50%",
                border: "1.5px solid #c8c0b4",
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0, color: "#3a4a58",
                fontSize: 20, lineHeight: 1, fontWeight: 300,
                transition: "transform 0.2s",
                transform: open === i ? "rotate(45deg)" : "none",
              }}>+</span>
            </button>
            {open === i && (
              <div style={{ padding: "0 24px 20px" }}>
                <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(11px, 0.85vw, 13px)", color: "#3a4a58", lineHeight: 1.75 }}>
                  {item.a}
                </p>
              </div>
            )}
          </div>
        ))}

        <div style={{ textAlign: "center", marginTop: 44 }}>
          <div style={{
            fontFamily: "Unbounded, sans-serif", fontWeight: 700,
            fontSize: "clamp(13px, 1.1vw, 16px)", color: "#fff",
            letterSpacing: "0.05em", marginBottom: 18, textTransform: "uppercase",
          }}>
            STILL HAVE QUESTIONS?
          </div>
          <button onClick={scrollToForm} className="full-btn-mobile" style={{
            background: "#f4874b", border: "none", borderRadius: 10,
            color: "#fff", fontFamily: "Unbounded, sans-serif",
            fontWeight: 700, fontSize: 13, letterSpacing: "0.05em",
            padding: "16px 48px", cursor: "pointer",
            textTransform: "uppercase",
          }}>
            ASK US NOW
          </button>
        </div>

      </div>
    </section>
  );
}