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

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

const t = window.t;

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

  const points = [
    { boldKey: "trust.p1b", restKey: "trust.p1r" },
    { boldKey: "trust.p2b", restKey: "trust.p2r" },
    { boldKey: "trust.p3b", restKey: "trust.p3r" },
    { boldKey: "trust.p4b", restKey: "trust.p4r" },
    { boldKey: "trust.p5b", restKey: "trust.p5r" },
    { boldKey: "trust.p6b", restKey: "trust.p6r" },
  ];

  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 }}>{t("trust.badge")}</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 }}>
                {t("trust.h2")}
              </h2>
              <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 }}
              dangerouslySetInnerHTML={{ __html: t("trust.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" }}>{t(p.boldKey)}</strong>{" "}{t(p.restKey)}
                </p>
              </div>
            ))}

            <p style={{ fontFamily: "Unbounded, sans-serif", fontSize: 12, color: "#3a4a58", lineHeight: 1.75, marginTop: 10, marginBottom: 6 }}>
              {t("trust.honest")}
            </p>
            <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: 12, color: "#061617", marginBottom: 0 }}>
              {t("trust.no_false")}
            </p>

            <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" }}>
                {t("trust.footer_q")}
              </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",
              }}>
                {t("trust.footer_btn")}
              </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 faqKeys = [
    { q: "faq.q1", a: "faq.a1", html: true  },
    { q: "faq.q2", a: "faq.a2", html: false },
    { q: "faq.q3", a: "faq.a3", html: false, multiline: true },
    { q: "faq.q4", a: "faq.a4", html: false },
    { q: "faq.q5", a: "faq.a5", html: false },
    { q: "faq.q6", a: "faq.a6", html: false },
    { q: "faq.q7", a: "faq.a7", html: true  },
  ];

  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",
        }}>
          {t("faq.h2")}
        </h2>

        {faqKeys.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 }}>
                {t(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" }}>
                {item.html ? (
                  <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(11px, 0.85vw, 13px)", color: "#3a4a58", lineHeight: 1.75 }}
                    dangerouslySetInnerHTML={{ __html: t(item.a) }} />
                ) : item.multiline ? (
                  <div style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(11px, 0.85vw, 13px)", color: "#3a4a58", lineHeight: 1.75 }}>
                    {t(item.a).split('\n').map((line, j) => <div key={j}>{line}</div>)}
                  </div>
                ) : (
                  <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(11px, 0.85vw, 13px)", color: "#3a4a58", lineHeight: 1.75 }}>
                    {t(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",
          }}>
            {t("faq.cta_h")}
          </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",
          }}>
            {t("faq.cta_btn")}
          </button>
        </div>

      </div>
    </section>
  );
}