// Article.jsx — WhyChooseUsSection + ProcessSection
Object.assign(window, { WhyChooseUsSection, ProcessSection });

/* ── Why Choose Us ── */
function WhyChooseUsSection() {
  const serviceCards = [
    {
      icon: (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <circle cx="18" cy="18" r="7" stroke="#005254" strokeWidth="1.8" fill="none"/>
          <path d="M23 23L29 29" stroke="#005254" strokeWidth="1.8" strokeLinecap="round"/>
          <circle cx="26" cy="14" r="4" stroke="#005254" strokeWidth="1.5" fill="none"/>
          <path d="M24 18h4" stroke="#f4874b" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
      title: "RECOVERY FROM META & GOOGLE ADS",
      text: "Recovery from Meta & Google Ads",
      bullets: [
        "Specialized in crypto scams, forex and fake investment platforms",
        "Completely no upfront fees",
      ],
    },
    {
      icon: (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <circle cx="15" cy="17" r="5" stroke="#005254" strokeWidth="1.8" fill="none"/>
          <circle cx="27" cy="17" r="5" stroke="#005254" strokeWidth="1.8" fill="none"/>
          <path d="M8 32c0-4 3.1-7 7-7h14c3.9 0 7 3 7 7" stroke="#005254" strokeWidth="1.8" strokeLinecap="round" fill="none"/>
          <path d="M20 10v5M18 12h4" stroke="#f4874b" strokeWidth="1.4" strokeLinecap="round"/>
        </svg>
      ),
      title: "FAST PROCESS",
      text: "Case review within 24 hours",
      bullets: [
        "First legal actions within 48–72 hours",
        "Average recovery time: 1–14 days",
      ],
    },
    {
      icon: (
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
          <path d="M12 10h16v3l3 3v14l-3 3H12l-3-3V16l3-3V10z" stroke="#005254" strokeWidth="1.8" fill="none" strokeLinejoin="round"/>
          <path d="M16 22h8M16 26h5" stroke="#f4874b" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      ),
      title: "STRONG LEGAL PROTECTION",
      text: "Netherlands legal company",
      bullets: [
        "Operating under European law",
        "Direct work with banks and regulators",
      ],
    },
  ];

  return (
    <section id="about" style={{ background: "#F2F2F0", padding: "72px 24px" }}>
      <div style={{ maxWidth: 1160, margin: "0 auto", display: "flex", gap: 48, alignItems: "flex-start" }} className="why-cols">

        {/* Left */}
        <div style={{ flex: "1 1 0", minWidth: 0 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 8, border: "1px solid #c8c0b4", borderRadius: 20, padding: "5px 14px", marginBottom: 24 }}>
            <span style={{ fontFamily: "Unbounded, Montserrat, sans-serif", fontSize: 11, fontWeight: 400, color: "#1a2c38", letterSpacing: 0 }}>WHY CHOOSE US</span>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#f4874b", display: "inline-block", flexShrink: 0 }} />
          </div>

          <h2 style={{ fontFamily: "Unbounded, Montserrat, sans-serif", fontWeight: 700, fontSize: "clamp(26px, 3.2vw, 52px)", color: "#061617", lineHeight: 1.1, marginBottom: 10, textTransform: "uppercase", letterSpacing: "-1px" }}>
            SCAMMED AFTER CLICKING AN AD ON META OR GOOGLE?
          </h2>
          <div style={{ fontFamily: "Unbounded, Montserrat, sans-serif", fontWeight: 700, fontSize: "clamp(22px, 2.6vw, 42px)", color: "#f4874b", marginBottom: 20, textTransform: "uppercase", letterSpacing: "-1px" }}>
            YOU ARE NOT ALONE.
          </div>

          <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(14px, 1.1vw, 22px)", color: "#061617", lineHeight: 1.6, letterSpacing: "-1px", marginBottom: 24 }}>
            Every day, hundreds of people lose money after clicking on attractive-looking ads. We have already helped recover millions of euros in exactly these types of cases.
          </p>

          <div style={{ borderRadius: 12, overflow: "hidden", marginBottom: 20, lineHeight: 0 }}>
            <img src="assets/images/Container.png" alt="Apex Claim specialists"
              style={{ width: "100%", height: "auto", display: "block" }} />
          </div>

          {/* Stats box */}
          <div style={{ background: "#fff", borderRadius: 12, padding: "20px 22px", border: "1px solid #e0d8ce" }}>
            <div style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: "clamp(12px, 0.9vw, 16px)", color: "#061617", textTransform: "uppercase", letterSpacing: "-0.5px", marginBottom: 14 }}>
              STATISTICS SECTION:
            </div>
            {[
              { bold: "15+ million €", boldWeight: 700, rest: " already recovered for clients", accentBold: false, accentRest: false },
              { bold: "69",            boldWeight: 700, rest: " fraudulent companies shut down",  accentBold: true,  accentRest: true  },
              { bold: "4.9/5",         boldWeight: 700, rest: " average client rating",            accentBold: true,  accentRest: true  },
              { bold: "Free case review within 24 hours", boldWeight: 700, rest: "", accentBold: true, accentRest: false },
            ].map((item, i) => (
              <div key={i} style={{ marginBottom: 8, letterSpacing: "-0.5px" }}>
                <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: item.boldWeight, fontSize: "clamp(12px, 0.85vw, 15px)", color: item.accentBold ? "#005254" : "#061617" }}>{item.bold}</span>
                {item.rest && <span style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(12px, 0.85vw, 15px)", color: item.accentRest ? "#005254" : "#6a7a8a" }}>{item.rest}</span>}
              </div>
            ))}
          </div>
        </div>

        {/* Right — 3 service cards stacked */}
        <div style={{ width: 340, flexShrink: 0, display: "flex", flexDirection: "column", gap: 16 }} className="why-cards-col">
          {serviceCards.map((card, i) => (
            <div key={i} style={{ background: "#fff", borderRadius: 16, padding: "24px 22px", border: "1px solid #e0d8ce" }}>
              <div style={{ marginBottom: 14, display: "flex", justifyContent: "center" }}>{card.icon}</div>
              <div style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 700, fontSize: "clamp(13px, 0.8vw, 14px)", color: "#061617", marginBottom: 8, letterSpacing: "-0.3px", textAlign: "center", lineHeight: 1.4 }}>{card.title}</div>
              <div style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(12px, 0.75vw, 13px)", color: "#6a7a8a", marginBottom: 10, textAlign: "center", letterSpacing: "-0.3px" }}>{card.text}</div>
              {card.bullets.map((b, j) => (
                <div key={j} style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(12px, 0.7vw, 13px)", color: "#005254", lineHeight: 1.55, marginBottom: 6, textAlign: "center", letterSpacing: "-0.3px" }}>{b}</div>
              ))}
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

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

  const steps = [
    {
      num: "01",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#005254" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/>
          <path d="M21 21l-4.35-4.35"/>
        </svg>
      ),
      title: "Free Case Review",
      desc: "Submit your request or call us. Our specialist will analyze your situation within 24 hours and tell you honestly whether there is a realistic chance of recovery.",
    },
    {
      num: "02",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#005254" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
        </svg>
      ),
      title: "Signing the Agreement",
      desc: "We draw up a formal agreement with clear terms: amount, deadlines, and our fee only in case of success. No upfront payments.",
    },
    {
      num: "03",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#005254" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="16 18 22 12 16 6"/>
          <polyline points="8 6 2 12 8 18"/>
        </svg>
      ),
      title: "Evidence Collection & Process Launch",
      desc: "We gather all required documents, screenshots, and correspondence. We then submit official requests to banks, payment systems, and regulators.",
    },
    {
      num: "04",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#005254" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="22 7 13.5 15.5 8.5 10.5 2 17"/>
          <polyline points="16 7 22 7 22 13"/>
        </svg>
      ),
      title: "Legal Work & Pressure on Scammers",
      desc: "We negotiate, prepare claims, initiate chargebacks, and start legal proceedings if necessary. We work until we achieve a positive result.",
    },
    {
      num: "05",
      icon: (
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#005254" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
          <circle cx="9" cy="7" r="4"/>
          <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
          <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
        </svg>
      ),
      title: "Money Returned to Your Account",
      desc: "Once the funds are received, you get them back minus our success fee (paid only after actual recovery). Case closed.",
    },
  ];

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

        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div style={{ fontFamily: "Unbounded, sans-serif", fontSize: 11, fontWeight: 400, color: "#6a7a8a", letterSpacing: "0.05em", marginBottom: 20, textTransform: "uppercase" }}>
            OUR PROCESS
          </div>
          <h2 style={{
            fontFamily: "Unbounded, sans-serif", fontWeight: 500,
            fontSize: "clamp(26px, 4vw, 44px)", color: "#015254",
            lineHeight: "1.35", marginBottom: 16, letterSpacing: "0px",
            textAlign: "center",
          }}>
            We Recover Your Money — 5 Simple Steps
          </h2>
          <p style={{ fontFamily: "Unbounded, sans-serif", fontWeight: 400, fontSize: "clamp(14px, 1.5vw, 18px)", lineHeight: "1.6", letterSpacing: "0px", color: "#3D3D3D", textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
            A transparent process with no hidden actions or upfront fees. You stay in full control at every stage.
          </p>
        </div>

        {/* Cards */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center", marginBottom: 48 }}>
          {steps.map((step, i) => (
            <div key={i} style={{
              background: "#fff",
              border: "1px solid #e8e4de",
              borderRadius: 16, padding: "28px 24px",
              boxSizing: "border-box",
            }} className="process-card">
              {/* Step number */}
              <div style={{
                fontFamily: "Unbounded, sans-serif", fontWeight: 400,
                fontSize: 12, color: "#aab0b8", marginBottom: 16,
              }}>{step.num}</div>

              {/* Icon in container */}
              <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: "rgba(244,135,75,0.10)",
                display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 20,
              }}>
                {step.icon}
              </div>

              {/* Title */}
              <h3 style={{
                fontFamily: "Unbounded, sans-serif", fontWeight: 700,
                fontSize: "clamp(14px, 1.1vw, 18px)", color: "#003E40",
                marginBottom: 12, lineHeight: 1.35, letterSpacing: "-0.3px",
              }}>{step.title}</h3>

              {/* Orange divider */}
              <div style={{ width: 24, height: 3, background: "#f4874b", borderRadius: 2, marginBottom: 14 }} />

              {/* Description */}
              <p style={{
                fontFamily: "Unbounded, sans-serif", fontWeight: 400,
                fontSize: "clamp(11px, 0.75vw, 13px)", color: "#6a7a8a",
                lineHeight: 1.75, margin: 0,
              }}>{step.desc}</p>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ textAlign: "center" }}>
          <div style={{
            fontFamily: "Unbounded, sans-serif", fontWeight: 700,
            fontSize: "clamp(14px, 1.1vw, 18px)", color: "#003E40",
            marginBottom: 10, textTransform: "uppercase", letterSpacing: "-0.3px",
          }}>
            READY TO START THE RECOVERY PROCESS?
          </div>
          <p style={{
            fontFamily: "Unbounded, sans-serif", fontWeight: 400,
            fontSize: 13, color: "#6a7a8a", marginBottom: 20,
          }}>
            Check your case for free <strong style={{ color: "#003E40", fontWeight: 700 }}>right now</strong>
          </p>
          <button onClick={scrollToForm} className="full-btn-mobile" style={{
            background: "#003E40", border: "none", borderRadius: 10,
            color: "#fff", fontFamily: "Unbounded, sans-serif",
            fontWeight: 700, fontSize: 12, letterSpacing: "0.05em",
            padding: "18px 56px", cursor: "pointer",
            textTransform: "uppercase",
          }}>
            GET YOUR FREE CASE REVIEW IN 24 HOURS
          </button>
        </div>

      </div>
    </section>
  );
}