// "In-house vs external DPO" comparison — a section on the DPO service page.
// Self-contained + on-brand; highlights the external option. Bilingual.

function DPOCompare() {
  const lang = useLang();
  const isEn = lang === 'en';

  const S = {
    title: isEn ? 'In-house vs external DPO' : 'ממונה פנימי מול ממונה חיצוני',
    sub: isEn
      ? 'For most small and mid-sized organizations, an external DPO delivers the same compliance — at lower cost and without a conflict of interest.'
      : 'לרוב העסקים הקטנים והבינוניים, ממונה חיצוני נותן את אותה עמידה בחוק — בעלות נמוכה יותר ובלי ניגוד עניינים.',
    inhouse: isEn ? 'In-house officer' : 'ממונה פנימי',
    external: isEn ? 'External officer (as a service)' : 'ממונה חיצוני (כשירות)',
    badge: isEn ? 'Often the better fit' : 'לרוב מתאים יותר',
    rows: [
      { k: isEn ? 'Cost' : 'עלות',
        in: isEn ? 'An added role at a full salary cost.' : 'משרה נוספת בעלות שכר מלאה.',
        ex: isEn ? 'A consultant’s cost, scaled to what you need.' : 'עלות של יועץ, לפי היקף הצורך.' },
      { k: isEn ? 'Independence' : 'עצמאות וניגוד עניינים',
        in: isEn ? 'Conflict-of-interest risk if the role is added to an existing manager (IT, finance, legal).' : 'סיכון לניגוד עניינים אם התפקיד מוטל על מנהל קיים (IT, כספים, ייעוץ משפטי).',
        ex: isEn ? 'Built-in professional independence, no conflict of interest.' : 'עצמאות מקצועית מובנית, ללא ניגוד עניינים.' },
      { k: isEn ? 'Knowledge & expertise' : 'ידע ומומחיות',
        in: isEn ? 'Depends on one person staying current.' : 'תלוי ביכולת של אדם אחד להישאר מעודכן.',
        ex: isEn ? 'Broad, current privacy-law expertise, from work across many organizations.' : 'ידע רוחבי ועדכני בדיני פרטיות, מניסיון מול ארגונים רבים.' },
    ],
    checkNudge: isEn ? 'Not sure you’re even required?' : 'לא בטוחים אם אתם בכלל חייבים?',
    checkCta: isEn ? '90-second check →' : 'בדיקה מהירה של 90 שניות ←',
  };

  return (
    <section className="dpocmp">
      <div className="dpocmp__inner">
        <h2 className="dpocmp__title">{S.title}</h2>
        <p className="dpocmp__sub">{S.sub}</p>

        <div className="dpocmp__grid">
          {/* In-house */}
          <div className="dpocmp__card">
            <p className="dpocmp__card-title">{S.inhouse}</p>
            <ul className="dpocmp__list">
              {S.rows.map((r, i) => (
                <li key={i}><span className="dpocmp__k">{r.k}</span><span className="dpocmp__v">{r.in}</span></li>
              ))}
            </ul>
          </div>
          {/* External (highlighted) */}
          <div className="dpocmp__card dpocmp__card--ext">
            <span className="dpocmp__badge">{S.badge}</span>
            <p className="dpocmp__card-title">{S.external}</p>
            <ul className="dpocmp__list">
              {S.rows.map((r, i) => (
                <li key={i}>
                  <span className="dpocmp__k">{r.k}</span>
                  <span className="dpocmp__v">
                    <svg className="dpocmp__check" width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                      <path d="M3.5 8.5l3 3 6-6.5" stroke="var(--turquoise-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                    {r.ex}
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <p className="dpocmp__nudge">
          {S.checkNudge} <a href="dpo-check.html">{S.checkCta}</a>
        </p>
      </div>

      <style>{`
        .dpocmp { padding: 64px 24px; background: var(--bg-2); }
        .dpocmp__inner { max-width: 960px; margin: 0 auto; }
        .dpocmp__title { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0 0 10px; letter-spacing: -0.02em; text-align: center; }
        .dpocmp__sub { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 auto 36px; max-width: 640px; text-align: center; }
        .dpocmp__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .dpocmp__card { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 26px 26px 28px; }
        .dpocmp__card--ext { border: 2px solid var(--turquoise); box-shadow: 0 12px 32px -12px rgba(71,203,203,0.4); }
        .dpocmp__badge { position: absolute; top: -12px; inset-inline-end: 22px; background: var(--turquoise-700); color: #fff; font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
        .dpocmp__card-title { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 18px; }
        .dpocmp__list { list-style: none; margin: 0; padding: 0; }
        .dpocmp__list li { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; border-top: 1px solid var(--border); }
        .dpocmp__list li:first-child { border-top: none; padding-top: 0; }
        .dpocmp__k { font-size: 13px; font-weight: 600; color: var(--muted); }
        .dpocmp__v { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); display: flex; align-items: flex-start; gap: 7px; }
        .dpocmp__check { flex-shrink: 0; margin-top: 3px; }
        .dpocmp__nudge { text-align: center; margin: 32px 0 0; font-size: 15.5px; color: var(--ink-2); }
        .dpocmp__nudge a { color: var(--turquoise-700); font-weight: 600; text-decoration: none; }
        .dpocmp__nudge a:hover { text-decoration: underline; }
        @media (max-width: 720px) { .dpocmp__grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { DPOCompare });
