// Founder Perspective — pull-quote testimonials from portfolio CEOs.
// Replaces the legacy Thesis "Section label" placeholder.
//
// Each item:
//   { name, title, company, quote, portrait, logo }
// portrait → circular crop (originals stored at full size in images/)
// logo → small monochrome wordmark badge below the attribution
function FounderPerspective({ items }) {
  return (
    <section style={{ background: "#F1F5F5", color: "#213A2C", padding: "120px 48px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          {items.map((it, idx) => (
            <article key={idx} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 28, alignItems: "center" }}>
              {/* Portrait — left column */}
              <div style={{
                width: 128, height: 128, borderRadius: "50%", overflow: "hidden",
                background: "#DFE9E9", flexShrink: 0,
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                {it.portrait ? (
                  <img
                    src={it.portrait}
                    alt={it.name}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", filter: "grayscale(1) contrast(1.05)" }}
                  />
                ) : (
                  <span style={{ fontSize: 32, fontWeight: 700, color: "#7B937D", letterSpacing: "-0.02em" }}>
                    {it.name.split(" ").map(s => s[0]).join("").slice(0, 2)}
                  </span>
                )}
              </div>

              {/* Right column — quote + attribution stacked */}
              <div style={{ display: "flex", flexDirection: "column", gap: 24, minWidth: 0 }}>
                <blockquote style={{ margin: 0, fontSize: 17, lineHeight: 1.5, color: "#213A2C", letterSpacing: "-0.005em", textWrap: "pretty" }}>
                  <span aria-hidden="true" style={{
                    display: "block", fontSize: 56, lineHeight: 0.6, color: "#7B937D",
                    fontFamily: "Georgia, serif", marginBottom: 12,
                  }}>“</span>
                  {it.quote}
                </blockquote>

                <div style={{ paddingTop: 20, borderTop: "1px solid #DFE9E9", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: "#213A2C", letterSpacing: "-0.01em" }}>
                      {it.name}
                    </div>
                    <div style={{ fontSize: 13, color: "#4A5C50", marginTop: 2 }}>
                      {it.title}
                    </div>
                  </div>
                  <div style={{ height: 32, display: "flex", alignItems: "center" }}>
                    {it.logo ? (
                      <img src={it.logo} alt={it.company} style={{ height: 24, width: "auto", display: "block", filter: "grayscale(1) brightness(0.2)" }} />
                    ) : (
                      <div style={{
                        fontSize: 12, fontWeight: 700, letterSpacing: "0.04em",
                        color: "#213A2C", border: "1px solid #213A2C",
                        padding: "5px 10px",
                      }}>
                        {it.company}
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FounderPerspective = FounderPerspective;