/* Security, Why Hudson Pay, Global Reach (light, responsive). */
const { Card, Badge, Button, Icon } = window.HudsonPayDesignSystem_198a48;

/* ---------- SECTION 5 — Security & Compliance ---------- */
function Security() {
  const { Container, Eyebrow, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const items = [
    { icon: "shield-check", t: "AML Compliance", d: "Continuous transaction monitoring and sanctions screening." },
    { icon: "user", t: "KYC / KYB Verification", d: "Automated identity and business verification in 190+ markets." },
    { icon: "lock", t: "Data Protection", d: "AES-256 at rest, TLS 1.3 in transit, regional data residency." },
    { icon: "trending-down", t: "Risk Management", d: "Real-time fraud scoring and configurable risk rules." },
    { icon: "building", t: "Enterprise Security", d: "SSO, SCIM, granular RBAC and full audit trails." },
    { icon: "shield", t: "Regulatory Standards", d: "Licensed and registered across key global jurisdictions." },
  ];
  return (
    <section id="security" style={{ background: "var(--paper)", padding: mobile ? "72px 0" : "112px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "0.85fr 1.15fr", gap: mobile ? 36 : 56, alignItems: "start" }}>
          <div className="hp-reveal" style={{ position: mobile ? "static" : "sticky", top: 100 }}>
            <Eyebrow>Security &amp; Compliance</Eyebrow>
            <h2 style={{ fontSize: "var(--text-3xl)", marginTop: 16, letterSpacing: "-0.025em" }}>
              Built for the most regulated institutions on earth
            </h2>
            <p style={{ marginTop: 16, fontSize: "var(--text-md)", color: "var(--text-muted)", lineHeight: 1.6 }}>
              Compliance is engineered into every layer of the platform — not bolted on. Your risk, legal and ops teams get the controls and evidence they need by default.
            </p>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 28 }}>
              <Badge tone="brand">SOC 2 Type II</Badge>
              <Badge tone="brand">PCI-DSS L1</Badge>
              <Badge tone="brand">ISO 27001</Badge>
              <Badge tone="brand">GDPR</Badge>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: 18 }}>
            {items.map(it => (
              <div key={it.t} className="hp-lift hp-reveal" style={{ padding: 24, borderRadius: "var(--radius-lg)", border: "1px solid var(--blue-100)", background: "var(--grad-page-soft)" }}>
                <span style={{ display: "inline-flex", width: 42, height: 42, borderRadius: "var(--radius-md)", alignItems: "center", justifyContent: "center", background: "var(--paper)", border: "1px solid var(--blue-100)", color: "var(--violet-600)", marginBottom: 14 }}>
                  <Icon name={it.icon} size={20} />
                </span>
                <h3 style={{ fontSize: "var(--text-md)", marginBottom: 6 }}>{it.t}</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", margin: 0, lineHeight: 1.5 }}>{it.d}</p>
              </div>
            ))}
          </div>
        </div>
      </Container>
    </section>
  );
}

/* ---------- SECTION 6 — Why Hudson Pay ---------- */
function WhyHudson() {
  const { Container, Eyebrow, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const items = [
    { icon: "zap", t: "Faster Settlements", d: "Seconds, not days — even across borders.", stat: "< 3s" },
    { icon: "trending-down", t: "Lower Fees", d: "Wholesale FX and transparent pricing.", stat: "0.2%" },
    { icon: "globe", t: "Global Reach", d: "Local presence in every major corridor.", stat: "190+" },
    { icon: "shield-check", t: "Enterprise Reliability", d: "Redundant rails with a 99.99% SLA.", stat: "99.99%" },
    { icon: "user", t: "Dedicated Support", d: "Named relationship managers, 24/7.", stat: "24/7" },
    { icon: "building", t: "Institutional Infrastructure", d: "Bank-grade architecture, audited.", stat: "Tier 1" },
  ];
  return (
    <section id="why" style={{ background: "var(--grad-page-soft)", padding: mobile ? "72px 0" : "112px 0" }}>
      <Container>
        <div className="hp-reveal" style={{ textAlign: "center", maxWidth: 620, margin: "0 auto 56px" }}>
          <Eyebrow center>Why Hudson Pay</Eyebrow>
          <h2 style={{ fontSize: "var(--text-3xl)", marginTop: 16, letterSpacing: "-0.025em" }}>
            The advantages compound at scale
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "repeat(3,1fr)", gap: 20 }}>
          {items.map(it => (
            <div key={it.t} className="hp-lift hp-reveal" style={{ background: "var(--paper)", border: "1px solid var(--blue-100)", borderRadius: "var(--radius-xl)", boxShadow: "var(--shadow-sm)", padding: 30, display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ display: "inline-grid", placeItems: "center", width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--grad-brand)", color: "#fff", boxShadow: "var(--shadow-brand)" }}><Icon name={it.icon} size={22} /></span>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-2xl)", fontWeight: 600, color: "var(--indigo-800)" }}>{it.stat}</span>
              </div>
              <h3 style={{ fontSize: "var(--text-lg)", marginTop: 4 }}>{it.t}</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", margin: 0, lineHeight: 1.5 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}

/* ---------- SECTION 7 — Global Reach ---------- */
function GlobalReach() {
  const { Container, Eyebrow, useIsMobile } = window.HPSite;
  const mobile = useIsMobile();
  const corridors = [
    ["New York", "London"], ["Singapore", "Frankfurt"], ["Dubai", "Mumbai"],
    ["São Paulo", "Lisbon"], ["Hong Kong", "Sydney"], ["Toronto", "Lagos"],
  ];
  const regions = [
    { r: "North America", c: "USD · CAD · MXN" },
    { r: "Europe & UK", c: "EUR · GBP · CHF" },
    { r: "Middle East", c: "AED · SAR · QAR" },
    { r: "Asia Pacific", c: "SGD · HKD · JPY" },
    { r: "Latin America", c: "BRL · MXN · CLP" },
    { r: "Africa", c: "NGN · ZAR · KES" },
  ];
  return (
    <section id="global" style={{ background: "var(--paper)", padding: mobile ? "72px 0" : "112px 0" }}>
      <Container>
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 36 : 56, alignItems: "center" }}>
          <div className="hp-reveal">
            <Eyebrow>Global Reach</Eyebrow>
            <h2 style={{ fontSize: "var(--text-3xl)", marginTop: 16, letterSpacing: "-0.025em" }}>
              Local everywhere your business operates
            </h2>
            <p style={{ marginTop: 16, fontSize: "var(--text-md)", color: "var(--text-muted)", lineHeight: 1.6, maxWidth: 460 }}>
              One integration unlocks payment corridors across six continents, with in-region settlement and licensing.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 32 }}>
              {regions.map(rg => (
                <div key={rg.r} style={{ padding: "14px 16px", borderRadius: "var(--radius-md)", border: "1px solid var(--blue-100)", background: "var(--grad-page-soft)" }}>
                  <div style={{ fontWeight: 600, fontSize: "var(--text-sm)", color: "var(--text-strong)" }}>{rg.r}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--text-muted)", marginTop: 4 }}>{rg.c}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="hp-reveal" style={{ background: "var(--grad-panel)", borderRadius: "var(--radius-2xl)", padding: mobile ? 26 : 36, color: "#fff", boxShadow: "var(--shadow-lg)", position: "relative", overflow: "hidden" }}>
            <div aria-hidden style={{ position: "absolute", top: -80, right: -80, width: 260, height: 260, borderRadius: "50%", border: "1.5px solid rgba(255,255,255,0.18)" }} />
            <div style={{ fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.85)", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 20, position: "relative" }}>Live Payment Corridors</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 12, position: "relative" }}>
              {corridors.map(([a, b], i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 14, padding: "12px 16px", borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.12)", border: "1px solid rgba(255,255,255,0.18)" }}>
                  <span style={{ fontSize: "var(--text-sm)", fontWeight: 500, flex: 1 }}>{a}</span>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#7CFFB2", boxShadow: "0 0 8px #7CFFB2" }} />
                    <Icon name="arrow-right" size={16} color="#fff" />
                  </span>
                  <span style={{ fontSize: "var(--text-sm)", fontWeight: 500, flex: 1, textAlign: "right" }}>{b}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

Object.assign(window, { HPParts: Object.assign(window.HPParts || {}, { Security, WhyHudson, GlobalReach }) });