import type { HomeContent } from "@/lib/content";
import Image from "@/components/Image";

export default function BankPartners({ content }: { content: HomeContent }) {
  const { bank } = content;
  return (
    <section id="bank" style={{ padding: "30px 0 90px" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <div
          style={{
            fontSize: 12,
            fontWeight: 700,
            letterSpacing: ".18em",
            textTransform: "uppercase",
            color: "#7e6516",
          }}
        >
          {bank.eyebrow}
        </div>
        <h2 style={{ fontWeight: 900, fontSize: 30, letterSpacing: "-.02em", margin: "14px 0 0", color: "#182233" }}>
          {bank.titleLead}
          <span style={{ color: "#006568" }}>{bank.titleAccent}</span>
        </h2>
        <div style={{ display: "flex", gap: 16, justifyContent: "center", flexWrap: "wrap", marginTop: 36 }}>
          {bank.partners.map((bp) => (
            <span
              key={bp.name}
              style={{
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                height: 80,
                minWidth: 176,
                padding: "0 26px",
                background: "rgba(255,255,255,.55)",
                backdropFilter: "blur(12px)",
                WebkitBackdropFilter: "blur(12px)",
                border: "1px solid rgba(255,255,255,.75)",
                borderRadius: 18,
                boxShadow: "0 14px 34px rgba(2,47,49,.08)",
              }}
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <Image src={bp.logo} alt={bp.name} style={{ maxHeight: 34, maxWidth: 130, width: "auto", objectFit: "contain" }} />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}