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

export default function Reviews({ content }: { content: HomeContent }) {
  const { reviews } = content;
  return (
    <section style={{ padding: "110px 0" }}>
      <div className="container">
        <div style={{ textAlign: "center", maxWidth: 600, margin: "0 auto" }}>
          <div
            style={{
              fontSize: 12,
              fontWeight: 700,
              letterSpacing: ".18em",
              textTransform: "uppercase",
              color: "#7e6516",
            }}
          >
            {reviews.eyebrow}
          </div>
          <h2 style={{ fontWeight: 900, fontSize: 42, letterSpacing: "-.025em", margin: "14px 0 0", color: "#182233" }}>
            {reviews.titleLead}
            <span style={{ color: "#006568" }}>{reviews.titleAccent}</span>
          </h2>
        </div>
        <div className="grid-3" style={{ marginTop: 52 }}>
          {reviews.items.map((r) => (
            <article key={r.name} className="glass-card card-lift stp-reveal">
              <div style={{ fontFamily: "var(--font-plex-serif)", fontSize: 48, lineHeight: 0.7, color: "#a38425" }}>
                &ldquo;
              </div>
              <p style={{ fontSize: 17, lineHeight: 1.6, color: "#1b2023", margin: "14px 0 0" }}>{r.quote}</p>
              <div
                style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 12,
                  marginTop: 24,
                  paddingTop: 20,
                  borderTop: "1px solid rgba(2,47,49,.10)",
                }}
              >
                <div
                  style={{
                    width: 40,
                    height: 40,
                    borderRadius: "50%",
                    background: "#eef4f3",
                    color: "#006568",
                    fontWeight: 700,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    fontSize: 14,
                  }}
                >
                  {r.initials}
                </div>
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14 }}>{r.name}</div>
                  <div style={{ fontSize: 13, color: "#63686d" }}>{r.role}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}