// Portfolio — grid of company cards with sector filter pills.
//
// Filter bar above the grid lets users narrow by sector. Hover any card to
// see a one-line description and a "Visit website" link. Exited companies
// carry a status pill in the top-left.
function Portfolio({ companies }) {
  const [active, setActive] = React.useState(null);
  const [filter, setFilter] = React.useState("All");

  // Build sector list from data, preserving a sensible order.
  const sectors = React.useMemo(() => {
    const seen = new Set();
    const ordered = [];
    companies.forEach(c => {
      const s = c.sector || "Other";
      if (!seen.has(s)) { seen.add(s); ordered.push(s); }
    });
    return ["All", ...ordered];
  }, [companies]);

  const visible = filter === "All"
    ? companies
    : companies.filter(c => (c.sector || "Other") === filter);

  return (
    <section style={{ background: "#F1F5F5", color: "#213A2C", padding: "120px 48px 140px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 5fr) minmax(0, 7fr)", gap: 80, alignItems: "end", marginBottom: 64 }}>
          <h1 style={{ margin: 0, fontWeight: 700, fontSize: 56, lineHeight: 1.05, letterSpacing: "-0.035em" }}>
            Portfolio.
          </h1>
          <p style={{ margin: 0, fontSize: 20, lineHeight: 1.5, color: "#213A2C", letterSpacing: "-0.01em", textWrap: "pretty" }}>
            We back founders building category-defining companies in climate, energy, mobility,
            water, and the built environment — from early stage through to successful exits.
          </p>
        </div>

        {/* Filter bar */}
        <div style={{
          display: "flex", flexWrap: "wrap", alignItems: "center", gap: 8,
          paddingBottom: 28, marginBottom: 32,
          borderBottom: "1px solid #DFE9E9",
        }}>
          <span style={{
            fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
            textTransform: "uppercase", color: "#4A5C50",
            marginRight: 16,
          }}>Filter</span>
          {sectors.map(s => {
            const isActive = filter === s;
            const count = s === "All"
              ? companies.length
              : companies.filter(c => (c.sector || "Other") === s).length;
            return (
              <button
                key={s}
                onClick={() => setFilter(s)}
                style={{
                  background: isActive ? "#213A2C" : "transparent",
                  color: isActive ? "#FFFFFF" : "#213A2C",
                  border: isActive ? "1px solid #213A2C" : "1px solid #DFE9E9",
                  padding: "8px 14px 7px",
                  font: "500 13px 'Plus Jakarta Sans', sans-serif",
                  letterSpacing: "-0.01em",
                  cursor: "pointer",
                  borderRadius: 999,
                  display: "inline-flex", alignItems: "center", gap: 8,
                  transition: "background 160ms ease, color 160ms ease, border-color 160ms ease",
                }}
              >
                {s}
                <span style={{
                  fontSize: 11,
                  color: isActive ? "rgba(255,255,255,0.6)" : "#858885",
                  fontWeight: 500,
                }}>{count}</span>
              </button>
            );
          })}
        </div>

        {/* Grid */}
        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 1,
          background: "#DFE9E9",
          border: "1px solid #DFE9E9",
        }}>
          {visible.map((c) => (
            <PortfolioCard
              key={c.name}
              company={c}
              isActive={active === c.name}
              onToggle={() => setActive(active === c.name ? null : c.name)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

const PORTFOLIO_DESCRIPTION = "Renewal Climate Ventures portfolio company. Detailed description coming soon.";

function PortfolioCard({ company, isActive, onToggle }) {
  const [hover, setHover] = React.useState(false);
  const showing = hover || isActive;
  const status = company.status;

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={(e) => {
        if (e.target.tagName === "A") return;
        onToggle();
      }}
      style={{
        position: "relative",
        background: "#FFFFFF",
        aspectRatio: "1 / 1",
        overflow: "hidden",
        cursor: "pointer",
        userSelect: "none",
      }}
    >
      {/* Logo layer */}
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: "28px 36px",
        opacity: showing ? 0 : 1,
        transition: "opacity 280ms ease",
      }}>
        <img
          src={company.logo}
          alt={company.name}
          style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", display: "block" }}
        />
      </div>

      {/* Status pill */}
      {status && (
        <div style={{
          position: "absolute", top: 16, left: 16,
          opacity: showing ? 0 : 1,
          transition: "opacity 200ms ease",
          display: "inline-flex", alignItems: "center", gap: 6,
          background: "#CDF6B0",
          color: "#213A2C",
          fontSize: 10.5,
          fontWeight: 600,
          letterSpacing: "0.14em",
          textTransform: "uppercase",
          padding: "5px 9px 4px",
          borderRadius: 2,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "#213A2C" }}/>
          {status}
        </div>
      )}

      {/* Hover layer */}
      <div style={{
        position: "absolute", inset: 0,
        background: "#213A2C",
        color: "#FFFFFF",
        padding: "28px 28px 24px",
        display: "flex", flexDirection: "column", justifyContent: "space-between",
        opacity: showing ? 1 : 0,
        transition: "opacity 280ms ease",
        pointerEvents: showing ? "auto" : "none",
      }}>
        <div>
          <div style={{
            fontSize: 10.5, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase",
            color: status ? "#CDF6B0" : "#7B937D",
            marginBottom: 14,
          }}>
            {status || company.sector || "Active investment"}
          </div>
          <div style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: 12 }}>
            {company.name}
          </div>
          <p style={{
            margin: 0,
            fontSize: 14,
            lineHeight: 1.5,
            color: "rgba(255,255,255,0.86)",
            textWrap: "pretty",
          }}>
            {company.description || PORTFOLIO_DESCRIPTION}
          </p>
        </div>
        {company.website && (
          <a
            href={company.website}
            target="_blank"
            rel="noopener noreferrer"
            style={{
              alignSelf: "flex-start",
              color: "#CDF6B0",
              fontSize: 13,
              fontWeight: 500,
              letterSpacing: "-0.01em",
              textDecoration: "none",
              borderBottom: "1px solid rgba(205,246,176,0.4)",
              paddingBottom: 2,
              display: "inline-flex", alignItems: "center", gap: 8,
            }}
          >
            Visit website
            <span aria-hidden="true">→</span>
          </a>
        )}
      </div>
    </article>
  );
}

window.Portfolio = Portfolio;