const Trust = () => {
  const items = t("trust.items");

  return (
    <section style={{ background: "var(--ink)", color: "#fff", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{
        position: "absolute", right: -120, top: -120, opacity: .04,
      }}>
        <CraneMark size={500} color="#fff" accent="#fff"/>
      </div>
      <div className="wrap" style={{ position: "relative" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end", marginBottom: 56 }} className="tr-head">
          <div>
            <span className="eyebrow" style={{ color: "var(--accent)" }}>{t("trust.eyebrow")}</span>
            <h2 style={{ color: "#fff", fontSize: "clamp(36px, 4.5vw, 56px)", fontWeight: 800, marginTop: 16, lineHeight: 1.0, letterSpacing: "-0.035em" }}>
              {t("trust.title")}
            </h2>
          </div>
          <p style={{ color: "#cdd9eb", fontSize: "calc(18px * var(--scale))", lineHeight: 1.5 }}>
            {t("trust.intro")}
          </p>
        </div>

        <div className="grid-3">
          {items.map((it, i) => {
            const C = Icon[it.ic];
            return (
              <div key={i} style={{
                background: "rgba(255,255,255,.04)",
                border: "1px solid rgba(255,255,255,.08)",
                borderRadius: 24, padding: 28,
                display: "grid", gap: 14,
              }}>
                <div style={{
                  width: 48, height: 48, borderRadius: 14,
                  background: "rgba(77,237,193,.16)", color: "var(--accent)",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}><C size={24}/></div>
                <h3 style={{ color: "#fff", fontWeight: 700, fontSize: "calc(19px * var(--scale))", letterSpacing: "-0.02em" }}>{it.t}</h3>
                <p style={{ color: "#bccada", fontSize: "calc(15px * var(--scale))", lineHeight: 1.55 }}>{it.d}</p>
              </div>
            );
          })}
        </div>

        {/* Testimonial */}
        <div style={{
          marginTop: 56, padding: "40px 48px", borderRadius: 28,
          background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.1)",
          display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center",
        }} className="testimonial">
          <div style={{
            width: 88, height: 88, borderRadius: 999,
            background: "var(--accent)", color: "var(--ink)",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 30, fontWeight: 800, flexShrink: 0, letterSpacing: "-0.02em",
          }}>HM</div>
          <div>
            <div style={{ display: "flex", gap: 4, marginBottom: 12 }}>
              {[1,2,3,4,5].map(i => <Icon.star key={i} size={16} fill="var(--accent)" stroke="var(--accent)"/>)}
            </div>
            <p style={{ color: "#e6edf7", fontSize: "calc(19px * var(--scale))", lineHeight: 1.5, fontStyle: "italic" }}>
              {t("trust.quote")}
            </p>
            <div style={{ marginTop: 14, color: "#9eb1c8", fontSize: "calc(15px * var(--scale))" }}>
              {t("trust.author")}
            </div>
          </div>
        </div>

        <style>{`
          @media (max-width: 800px) {
            .tr-head { grid-template-columns: 1fr !important; gap: 24px !important; }
            .testimonial { grid-template-columns: 1fr !important; padding: 28px !important; text-align: center; }
            .testimonial > div:first-child { margin: 0 auto; }
          }
        `}</style>
      </div>
    </section>
  );
};

Object.assign(window, { Trust });