// Responsive styles live in index.html, keyed off [data-bp-and-below~="…"]
// or @container queries on .r-tower. Do not add new inline ternaries on
// viewport width or `compact` — convert to a CSS class instead.

// Extracted from matrix.jsx 2026-05-14. No logic change — pure split.

function TowerFloor({ p, tier, state, selected, dark, t, lang, onClick, floorIndex, colIndex, cellMode }) {
  const text = dark ? "#FAF7F3" : "#393433";
  const muted = dark ? "#8A827F" : "#6B6361";
  const faint = dark ? "#5A5654" : "#C1C1C1";
  const lime = "#EDFE38";

  // Padding is class-driven via [data-cell-mode] on .r-matrix-grid.
  const scale = {
    roomy: { gap: 22, numberFs: 18, labelFs: 9, metaFs: 9, showMeta: true,  metaLabels: "full" },
    dense: { gap: 8,  numberFs: 15, labelFs: 9, metaFs: 9, showMeta: true,  metaLabels: "short" },
    tight: { gap: 6,  numberFs: 15, labelFs: 9, metaFs: 9, showMeta: false, metaLabels: "none" },
  }[cellMode || "roomy"];

  // Strategic-state ink color (text on the funded-green wash). Background
  // is class-driven via r-floor-state-* + .dark .r-floor-state-* rules.
  const fundedInk = dark ? "#D8E6CC" : "#3F4F2E";

  const color = state === "gray" || state === "strategic-idle"
    ? faint
    : state === "strategic"
      ? fundedInk
      : text;
  const litDelay = (colIndex * 3 + (4 - floorIndex) * 2) * 30;

  return (
    <button
      type="button"
      onClick={onClick}
      data-floor={`${colIndex}:${floorIndex}`}
      data-tier={tier}
      aria-label={`${TIER_LABELS[tier][lang]} · ${window.pickLang(p.name, lang) || ""} · ${state === "lit" ? t.eligible : t.ineligible}`}
      className={`r-floor r-floor-state-${state}${state === "lit" ? " r-floor-lit" : ""}${selected ? " r-floor-selected" : ""}`}
    >
      {state === "lit" && !selected && (
        <div className="r-lit-sweep r-lit-sweep-fill" style={{
          background: `linear-gradient(90deg, transparent 0%, ${dark ? "rgba(237,254,56,0.18)" : "rgba(237,254,56,0.55)"} 50%, transparent 100%)`,
          animationDelay: `${litDelay}ms`,
        }}/>
      )}
      {state === "lit" && (
        <div className="r-lit-bar" style={{
          background: lime,
          animation: `litBarIn 420ms cubic-bezier(.22,.61,.36,1) ${litDelay}ms both`,
        }}/>
      )}
      <div className="r-floor-stack r-floor-stack-base" style={{ gap: scale.gap }}>
        {state === "strategic" || state === "strategic-idle" ? (
          <>
            <div className="r-floor-strategic-wrap">
              <div className="r-floor-strategic-title" style={{ color: fundedInk }}>
                {t.strategicOpenTitle}
              </div>
              <div className="r-floor-strategic-sub" style={{ color: fundedInk }}>
                {t.fundedSelective}
              </div>
            </div>
          </>
        ) : (
          <>
            <div className="r-floor-price-wrap">
              {p.unitPriceFromUsd ? (
                <>
                  <div className="r-floor-price-label" style={{ fontSize: scale.labelFs, color: state === "gray" ? faint : muted }}>
                    {t.fromUnit}
                  </div>
                  <div className="r-floor-price-value" style={{ fontSize: scale.numberFs, color }}>
                    {window.formatCurrencyShort(p.unitPriceFromUsd)}
                  </div>
                </>
              ) : (
                <>
                  {window.formatRange(p) && !(window.formatRange(p).lo === 0 && window.formatRange(p).hi === 0) && (
                    <div className="r-floor-price-label" style={{ fontSize: scale.labelFs, color: state === "gray" ? faint : muted }}>
                      {window.pickLang(p.yieldLabelOverride, lang) || window.returnKindLabel(p, t)}
                    </div>
                  )}
                  <div className="r-floor-price-value" style={{ fontSize: scale.numberFs, color }}>
                    {window.formatRangeStr(p)}
                  </div>
                </>
              )}
            </div>
            {scale.showMeta && (() => {
              const metaCellStyle = { fontSize: scale.metaFs, color: state === "gray" ? faint : muted };
              if (p.unitPriceFromUsd && Array.isArray(p.detailStats) && p.detailStats.length > 1) {
                const rest = p.detailStats.slice(1);
                return (
                  <div className="r-floor-meta-list">
                    {rest.map((s, i) => {
                      let label = lang === "es" ? (s.labelEs || s.labelEn) : (s.labelEn || s.labelEs);
                      const value = lang === "es" ? (s.valueEs || s.valueEn) : (s.valueEn || s.valueEs);
                      if (/^estimated delivery$/i.test(label)) label = "Est. Delivery";
                      else if (/^entrega estimada$/i.test(label)) label = "Entrega est.";
                      return <div key={i} className="r-floor-meta-cell" style={metaCellStyle}>{label}: {value}</div>;
                    })}
                  </div>
                );
              }
              const holdLabelRaw = window.pickLang(p.holdLabelOverride, lang) || t.holdShort || "Hold";
              const minLabelRaw = t.minShort || "MIN";
              const tilde = p.riskClass === "equity" && p.type !== "pre-sale" ? "~" : "";
              const yrs = `${p.holdPeriodYears[1]}${t.yrs.slice(0,2)}`;
              const minVal = window.formatCurrencyShort(p.minimumInvestment.amount);
              const isFull = scale.metaLabels === "full";
              const holdLabel = isFull ? `${holdLabelRaw}:` : holdLabelRaw.split(" ")[0];
              const minLabel = isFull ? minLabelRaw : minLabelRaw.split(" ")[0];
              return (
                <div className="r-floor-meta-list">
                  <div className="r-floor-meta-cell" style={metaCellStyle}>{holdLabel} {tilde}{yrs}</div>
                  <div className="r-floor-meta-cell" style={metaCellStyle}>{minLabel} {minVal}</div>
                </div>
              );
            })()}
          </>
        )}
      </div>
    </button>
  );
}