// ─── OpposingCounsel.jsx ──────────────────────────────────────
// Split-screen analysis: YOUR ARGUMENT vs OPPOSING COUNSEL.
// Same sources data, but reframed dialectically. Each side gets
// its own claim, supporting cases, and verbatim stamp. A verdict
// bar at the bottom compares the strength of each side.

function OpposingCounsel({ query, data }) {
  if (!data) return null;

  // Split the sources into "your side" and "opposing side".
  // The CANNED data already has pros (first half) and cons (rest).
  const yours    = data.sources.slice(0, Math.ceil(data.sources.length / 2));
  const opposing = data.sources.slice(Math.ceil(data.sources.length / 2));

  // Counter-narrative: invert the claim phrasing.
  const yourStrength = data.strength;
  const oppStrength  = Math.max(40, Math.min(85, 100 - data.strength + Math.floor(data.strength * 0.4)));
  const verdict = yourStrength > oppStrength + 8 ? 'pro'
                : oppStrength > yourStrength + 8 ? 'con'
                : 'tie';

  return (
    <div className="le-oc">
      <header className="le-oc-head">
        <div className="le-oc-head-eyebrow"><svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: '-2px' }}><line x1="8" y1="2.6" x2="8" y2="13.4"></line><line x1="5" y1="13.4" x2="11" y2="13.4"></line><line x1="3" y1="4.6" x2="13" y2="4.6"></line><path d="M3 4.6 L1.4 8.6 H4.6 Z"></path><path d="M13 4.6 L11.4 8.6 H14.6 Z"></path><circle cx="8" cy="2.6" r="1"></circle></svg> § Opposing Counsel · ניתוח דו-צדדי</div>
        <h2 className="le-oc-head-h2">{query}</h2>
      </header>

      <div className="le-oc-split">
        {/* YOUR side */}
        <section className="le-oc-side le-oc-side--pro">
          <div className="le-oc-side-tag">
            <span className="le-oc-side-letter">A</span>
            <div>
              <div className="le-oc-side-label">הצד שלך</div>
              <div className="le-oc-side-latin">YOUR ARGUMENT</div>
            </div>
            <span className="le-oc-side-score">
              <b>{yourStrength}</b>
              <span>/100</span>
            </span>
          </div>

          <p className="le-oc-claim">
            הלכת <b>{data.doctrine}</b> מחילה את העיקרון על המקרה. הפסיקה התומכת היא <b>קוהרנטית</b>, וההגיון הקלאסי מאמץ את עמדתך.
          </p>

          <div className="le-oc-cases">
            {yours.map((s, i) => (
              <div className="le-oc-case" key={i}>
                <div className="le-oc-case-num">{i + 1}</div>
                <div className="le-oc-case-body">
                  <div className="le-oc-case-title">{s.title}</div>
                  <p className="le-oc-case-excerpt">{s.excerpt}</p>
                  <div className="le-oc-case-meta">
                    <span className="le-oc-badge le-oc-badge--pro">✓ מילה במילה</span>
                    <span>{s.year} · {s.court}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>

          <div className="le-oc-stamp le-oc-stamp--pro">
            <svg viewBox="0 0 100 100" width="100%" height="100%">
              <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="2"/>
              <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" strokeWidth="0.6"/>
              <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.6"/>
              <text fontFamily="'Heebo','JetBrains Mono',sans-serif" fontSize="6" fill="currentColor" letterSpacing="1.2" fontWeight="600" direction="rtl">
                <textPath href="#oc-circle-pro" startOffset="0">חוזק · {yourStrength}/100 · תומך · חוזק · {yourStrength}/100 · </textPath>
              </text>
              <defs>
                <path id="oc-circle-pro" d="M 50 50 m -38 0 a 38 38 0 1 1 76 0 a 38 38 0 1 1 -76 0"/>
              </defs>
            </svg>
            <div className="le-oc-stamp-inner">
              <div className="le-oc-stamp-kind">תומך</div>
              <div className="le-oc-stamp-glyph">✓</div>
              <div className="le-oc-stamp-case">{yours[0]?.title.split(' ').slice(0, 2).join(' ')}</div>
            </div>
          </div>
        </section>

        {/* Divider */}
        <div className="le-oc-divider" aria-hidden="true">
          <div className="le-oc-divider-line"></div>
          <div className="le-oc-divider-glyph">
            <svg viewBox="0 0 60 80">
              {/* miniature scales of justice */}
              <line x1="30" y1="6" x2="30" y2="70" stroke="#bf9b30" strokeWidth="1.6" strokeLinecap="round"/>
              <line x1="30" y1="70" x2="20" y2="74" stroke="#bf9b30" strokeWidth="1.6" strokeLinecap="round"/>
              <line x1="30" y1="70" x2="40" y2="74" stroke="#bf9b30" strokeWidth="1.6" strokeLinecap="round"/>
              <line x1="10" y1="14" x2="50" y2="14" stroke="#bf9b30" strokeWidth="1.6" strokeLinecap="round"/>
              <path d="M 5 22 Q 11 30 17 22 Q 13 26 11 26 Q 9 26 5 22 Z" fill="#bf9b30" opacity="0.85"/>
              <path d="M 43 22 Q 49 30 55 22 Q 51 26 49 26 Q 47 26 43 22 Z" fill="#bf9b30" opacity="0.85"/>
              <circle cx="30" cy="6" r="2" fill="#bf9b30"/>
            </svg>
          </div>
        </div>

        {/* OPPOSING side */}
        <section className="le-oc-side le-oc-side--con">
          <div className="le-oc-side-tag">
            <span className="le-oc-side-letter">B</span>
            <div>
              <div className="le-oc-side-label">הצד השני</div>
              <div className="le-oc-side-latin">OPPOSING COUNSEL</div>
            </div>
            <span className="le-oc-side-score">
              <b>{oppStrength}</b>
              <span>/100</span>
            </span>
          </div>

          <p className="le-oc-claim">
            {opposing.length > 0
              ? <>החריגים שב<b>הלכת {data.doctrine}</b> פוגעים בבסיס הטיעון. הצד השני יציג <b>פסיקה סותרת</b> + עובדות חסרות לחיזוק טענתך.</>
              : <>הצד השני יבסס את הטיעון על <b>חריגים לדוקטרינה</b> ועל פסיקה ניאו-מודרנית. דורש <b>תיקון הניסוח</b>.</>}
          </p>

          <div className="le-oc-cases">
            {opposing.length > 0 ? opposing.map((s, i) => (
              <div className="le-oc-case le-oc-case--con" key={i}>
                <div className="le-oc-case-num">{i + 1}</div>
                <div className="le-oc-case-body">
                  <div className="le-oc-case-title">{s.title}</div>
                  <p className="le-oc-case-excerpt">{s.excerpt}</p>
                  <div className="le-oc-case-meta">
                    <span className="le-oc-badge le-oc-badge--con"><svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: '-1px' }}><path d="M8 2.5 L14.5 13.5 H1.5 Z"></path><line x1="8" y1="6.6" x2="8" y2="9.6"></line><circle cx="8" cy="11.4" r="0.5" fill="currentColor" stroke="none"></circle></svg> סותר</span>
                    <span>{s.year} · {s.court}</span>
                  </div>
                </div>
              </div>
            )) : (
              <div className="le-oc-case le-oc-case--con">
                <div className="le-oc-case-num">1</div>
                <div className="le-oc-case-body">
                  <div className="le-oc-case-title">חריגים מתועדים לדוקטרינה</div>
                  <p className="le-oc-case-excerpt">״הדוקטרינה מוגבלת כאשר הלשון ברורה וחד-משמעית. הצד השני יטען כי המקרה נופל בגדר חריג זה.״</p>
                  <div className="le-oc-case-meta">
                    <span className="le-oc-badge le-oc-badge--con"><svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" style={{ verticalAlign: '-1px' }}><path d="M8 2.5 L14.5 13.5 H1.5 Z"></path><line x1="8" y1="6.6" x2="8" y2="9.6"></line><circle cx="8" cy="11.4" r="0.5" fill="currentColor" stroke="none"></circle></svg> חריג</span>
                    <span>אנליטיקה</span>
                  </div>
                </div>
              </div>
            )}
          </div>

          <div className="le-oc-stamp le-oc-stamp--con">
            <svg viewBox="0 0 100 100" width="100%" height="100%">
              <circle cx="50" cy="50" r="46" fill="none" stroke="currentColor" strokeWidth="2"/>
              <circle cx="50" cy="50" r="42" fill="none" stroke="currentColor" strokeWidth="0.6"/>
              <circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.6"/>
              <text fontFamily="'Heebo','JetBrains Mono',sans-serif" fontSize="6" fill="currentColor" letterSpacing="1.2" fontWeight="600" direction="rtl">
                <textPath href="#oc-circle-con" startOffset="0">חוזק · {oppStrength}/100 · סותר · חוזק · {oppStrength}/100 · </textPath>
              </text>
              <defs>
                <path id="oc-circle-con" d="M 50 50 m -38 0 a 38 38 0 1 1 76 0 a 38 38 0 1 1 -76 0"/>
              </defs>
            </svg>
            <div className="le-oc-stamp-inner">
              <div className="le-oc-stamp-kind">סותר</div>
              <div className="le-oc-stamp-glyph"><svg width="22" height="22" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2.5 L14.5 13.5 H1.5 Z"></path><line x1="8" y1="6.5" x2="8" y2="9.7"></line><circle cx="8" cy="11.6" r="0.5" fill="currentColor" stroke="none"></circle></svg></div>
              <div className="le-oc-stamp-case">{opposing[0]?.title.split(' ').slice(0, 2).join(' ') || 'חריגים'}</div>
            </div>
          </div>
        </section>
      </div>

      <footer className="le-oc-verdict">
        <div className="le-oc-verdict-eyebrow">§ פסק דין השוואתי · BALANCE OF ARGUMENTS</div>
        <div className="le-oc-verdict-bar">
          <div className="le-oc-verdict-fill le-oc-verdict-fill--pro" style={{ width: `${(yourStrength / (yourStrength + oppStrength)) * 100}%` }}>
            <span>{yourStrength}</span>
          </div>
          <div className="le-oc-verdict-fill le-oc-verdict-fill--con" style={{ width: `${(oppStrength / (yourStrength + oppStrength)) * 100}%` }}>
            <span>{oppStrength}</span>
          </div>
        </div>
        <div className="le-oc-verdict-call">
          {verdict === 'pro'
            ? <>הצד שלך <b>מוביל</b> · יתרון של {yourStrength - oppStrength} נקודות. המלצה: דחיפה לכיוון פסיקה מנחה.</>
            : verdict === 'con'
            ? <>הצד השני <b>מוביל</b> · יתרון של {oppStrength - yourStrength} נקודות. <b>הזהר</b> · יש לחזק עובדות.</>
            : <>שני הצדדים <b>שקולים</b>. הפסיקה מאפשרת לכל אחד לטעון בכבוד. תיק שראוי להתחקות בו על-עובדות.</>}
        </div>
      </footer>
    </div>
  );
}

window.OpposingCounsel = OpposingCounsel;