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

/* eslint-disable @next/next/no-img-element */
export default function TrustStrip({ content }: { content: HomeContent }) {
  const { trust } = content;
  return (
    <section className="container" style={{ paddingBottom: 8 }}>
      <div
        style={{
          background: "rgba(255,255,255,.55)",
          backdropFilter: "blur(14px)",
          WebkitBackdropFilter: "blur(14px)",
          border: "1px solid rgba(255,255,255,.7)",
          borderRadius: 20,
          padding: "18px 32px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 30,
          flexWrap: "wrap",
          boxShadow: "0 16px 40px rgba(2,47,49,.08)",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span style={{ fontWeight: 700, fontSize: 22, color: "#006568" }}>{trust.rating}</span>
          <span style={{ color: "#a38425", fontSize: 15, letterSpacing: 2 }}>★★★★★</span>
          <span style={{ fontSize: 14, color: "#63686d" }}>{trust.reviewsLine}</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 26 }}>
          <Image src="/img/badge-bbb.webp" alt="BBB Accredited Business A+" style={{ height: 26, width: "auto", opacity: 0.92 }} />
          <Image src="/img/badge-inc5000.webp" alt="Inc. 5000 fastest-growing companies" style={{ height: 42, width: "auto", opacity: 0.92 }} />
          <Image src="/img/badge-startup-weekly.webp" alt="The Startup Weekly 2021 award" style={{ height: 28, width: "auto", opacity: 0.92 }} />
        </div>
      </div>
    </section>
  );
}