/* CaseRow.jsx — single case-study row in the hairline grid.
   Whole row is hoverable: bg→white, right panel→green, badge fades, arrow shifts. */
function CaseRow({
  index = 1, total = 4,
  eyebrow = 'E2E DESIGN PROCESS',
  title = 'Scaling up groups through automation',
  lede = "I led an end-to-end process about how we introduced new workflows for hoteliers, enabling them to effectively manage large scale groups of guests.",
  outcomes = [
    { chip: '48%',      text: 'reduction of manual tasks' },
    { chip: 'Unlocked', text: 'new customer segment' },
  ],
  panel = 'navy',
  badge = 'pleo',
  href,
  coming = false,
  pin,
}) {
  const wordmark = badge === 'mews' ? 'assets/Logo-Mews.svg' : 'assets/Logo-Pleo.svg';
  const clipId = `arrow-clip-${index}`;
  const isProtected = !!pin;
  const Tag = href ? 'a' : 'article';
  const rowClass = `case-row panel-${panel}${coming ? ' case-row--coming' : ''}`;
  const tagProps = href
    ? { href, className: rowClass, ...(isProtected && { onClick: (e) => { e.preventDefault(); window.requestPinUnlock && window.requestPinUnlock(href); } }) }
    : { className: rowClass };

  return (
    <Tag {...tagProps}>
      <div className="case-left">
        <div className="case-eyebrow-row">
          <span className="case-eyebrow">{eyebrow}</span>
          <span className="case-count">{index} / {total}</span>
        </div>
        <h3 className="case-title">{title}</h3>
        <p className="case-lede">{lede}</p>

        <div className="case-outcomes-row">
          <div className="case-outcomes">
            <div className="case-outcomes-label">Impact</div>
            <div className="case-outcome-list">
              {outcomes.map((o, i) => (
                <div className="case-outcome-line" key={i}>
                  {o.prefix}<mark>{o.highlight}</mark>{o.rest}
                </div>
              ))}
            </div>
          </div>
          {!coming && <svg className="case-arrow" width="56" height="48" viewBox="0 0 56 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g clipPath={`url(#${clipId})`}>
              <path d="M22.4056 -6.00001L52.8112 24.4056L22.4056 54.8112" stroke="#000B34" strokeWidth="4" />
              <rect x="-14.5" y="22.9056" width="67" height="3" fill="#000B34" stroke="#000B34" />
            </g>
            <defs>
              <clipPath id={clipId}>
                <rect width="56" height="48" fill="white" />
              </clipPath>
            </defs>
          </svg>}
        </div>
      </div>
      <div className="case-right">
        <div className="case-panel">
          {coming && <div className="case-coming-tag">COMING SOON</div>}
          {isProtected && (
            <div className="case-locked-tag">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4.5" y="10.5" width="15" height="10" rx="1.5" stroke="#FFFFFF" strokeWidth="1.6"/><path d="M8 10.5V7.5a4 4 0 0 1 8 0v3" stroke="#FFFFFF" strokeWidth="1.6"/><circle cx="12" cy="15" r="1.4" fill="#FFFFFF"/></svg>
              LOCKED
            </div>
          )}
          <div className={`case-wordmark wordmark-${badge}`}><img src={wordmark} alt={badge} /></div>
          <div className="case-mock-wrap">
            <img src={`assets/Case-Hero-${index}.webp`} alt="" loading="lazy" />
          </div>
        </div>
      </div>
    </Tag>
  );
}
window.CaseRow = CaseRow;