// Portfolio carousel — large founder photo (≈2/3) + text panel (≈1/3),
// arrows top-right, counter top-left.
function PortfolioCarousel({ items }) {
  const [i, setI] = React.useState(0);
  const n = items.length;
  const go = (d) => setI((p) => (p + d + n) % n);
  const item = items[i];

  const arrowBtn = {
    width: 44, height: 44, borderRadius: "50%",
    border: "1px solid #213A2C", background: "transparent", color: "#213A2C",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    cursor: "pointer", padding: 0, transition: "background 120ms ease, color 120ms ease",
  };

  return (
    <section style={{ background: "#FFFFFF", color: "#213A2C", padding: "96px 48px", borderTop: "1px solid #DFE9E9", borderBottom: "1px solid #DFE9E9" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header row */}
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 32, gap: 24, flexWrap: "wrap" }}>
          <div>
            <h2 style={{ margin: 0, fontSize: 40, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.05 }}>
              Success stories
            </h2>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
            <span style={{ fontSize: 13, color: "#4A5C50", fontVariantNumeric: "tabular-nums" }}>
              {String(i + 1).padStart(2, "0")} <span style={{ color: "#A8B6AC" }}>/ {String(n).padStart(2, "0")}</span>
            </span>
            <div style={{ display: "flex", gap: 10 }}>
              <button
                onClick={() => go(-1)} aria-label="Previous"
                style={arrowBtn}
                onMouseEnter={(e) => { e.currentTarget.style.background = "#213A2C"; e.currentTarget.style.color = "#FFFFFF"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#213A2C"; }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square">
                  <path d="M15 5 L8 12 L15 19" />
                </svg>
              </button>
              <button
                onClick={() => go(1)} aria-label="Next"
                style={arrowBtn}
                onMouseEnter={(e) => { e.currentTarget.style.background = "#213A2C"; e.currentTarget.style.color = "#FFFFFF"; }}
                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "#213A2C"; }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square">
                  <path d="M9 5 L16 12 L9 19" />
                </svg>
              </button>
            </div>
          </div>
        </div>

        {/* Slide */}
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 40, alignItems: "stretch" }}>
          {/* Photo */}
          <div style={{ position: "relative", aspectRatio: "16 / 10", overflow: "hidden", background: "#DFE9E9" }}>
            {item.image ? (
              <img
                src={item.image}
                alt={`${item.company} founders`}
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
            ) : (
              <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "#7B937D", fontSize: 13, letterSpacing: "0.16em", textTransform: "uppercase" }}>
                Founder photo
              </div>
            )}
          </div>

          {/* Text */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", padding: "8px 0" }}>
            <div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 24 }}>
                <div style={{
                  fontSize: 10, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase",
                  color: "#CDF6B0", background: "#213A2C", display: "inline-block",
                  padding: "6px 10px", whiteSpace: "nowrap",
                }}>
                  {item.role}
                </div>
                {item.status && (
                  <div style={{
                    fontSize: 10, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase",
                    color: "#213A2C", background: "transparent", border: "1px solid #213A2C",
                    display: "inline-block", padding: "5px 9px", whiteSpace: "nowrap",
                  }}>
                    {item.status}
                  </div>
                )}
              </div>
              <h3 style={{
                margin: "0 0 20px 0",
                fontSize: 48, fontWeight: 700, lineHeight: 0.95, letterSpacing: "-0.03em",
                color: "#213A2C",
              }}>
                {item.company}
              </h3>
              <p style={{
                margin: 0, fontSize: 16, lineHeight: 1.55, color: "#4A5C50",
                textWrap: "pretty",
              }}>
                {item.body}
              </p>
            </div>
            {item.meta && (
              <div style={{ marginTop: 32, paddingTop: 20, borderTop: "1px solid #DFE9E9", display: "flex", gap: 28, fontSize: 12, color: "#7B937D", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                {item.meta.map((m, k) => (
                  <div key={k}>
                    <div style={{ color: "#A8B6AC", marginBottom: 4 }}>{m.label}</div>
                    <div style={{ color: "#213A2C", fontWeight: 600, letterSpacing: "0.02em", textTransform: "none", fontSize: 14 }}>{m.value}</div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.PortfolioCarousel = PortfolioCarousel;