// Interactive "do you need a DPO?" self-check tool (standalone page).
// Four Amendment-13 triggers as yes/no; one "yes" => likely required.
// On-brand, bilingual, funnels to booking + the article + the DPO service page.

function DPOCheck() {
  const lang = useLang();
  const isEn = lang === 'en';
  const [answers, setAnswers] = React.useState([null, null, null, null]);

  const S = {
    crumbHome: isEn ? 'Home' : 'ראשי',
    crumbDpo: isEn ? 'DPO as a service' : 'DPO כשירות',
    crumbHere: isEn ? 'Quick check' : 'בדיקה מהירה',
    eyebrow: isEn ? 'Amendment 13 · Privacy Protection Law' : 'תיקון 13 · חוק הגנת הפרטיות',
    title: isEn
      ? 'Do you have to appoint a Data Protection Officer?'
      : 'האם אתם חייבים למנות ממונה על הגנת הפרטיות?',
    intro: isEn
      ? 'Four triggers, and meeting even one is enough. Answer below for an initial read.'
      : 'ארבע חלופות, ודי לעמוד באחת מהן. ענו על השאלות לקבלת כיוון ראשוני.',
    yes: isEn ? 'Yes' : 'כן',
    no: isEn ? 'No' : 'לא',
    reset: isEn ? 'Start over' : 'התחלה מחדש',
    hint: isEn ? 'Answer all four to see the result.' : 'ענו על ארבע השאלות כדי לראות תוצאה.',
    book: isEn ? 'Book a call' : 'לתיאום שיחה',
    readArticle: isEn ? 'Read the full guide' : 'למדריך המלא',
    aboutService: isEn ? 'About the external-DPO service' : 'על שירות ה-DPO החיצוני',
    disclaimer: isEn
      ? 'This check gives an initial direction only and is not legal advice; a definitive determination requires a proper assessment.'
      : 'הבדיקה נותנת כיוון ראשוני בלבד ואינה מהווה ייעוץ משפטי; הכרעה לגופו של עניין מחייבת בדיקה מסודרת.',
    resYesTitle: isEn ? 'You are likely required to appoint a DPO' : 'כנראה שאתם חייבים למנות ממונה',
    resYesText: isEn
      ? 'Under the Authority’s position paper, one trigger is enough. The next step is a structured assessment and an appointment that meets the requirements: proven privacy-law knowledge, direct reporting to the CEO, and no conflict of interest.'
      : 'לפי גילוי הדעת של הרשות, די בחלופה אחת. השלב הבא הוא בדיקה מסודרת ומינוי שעומד בדרישות: ידע מוכח בדיני פרטיות, דיווח ישיר למנכ"ל, וללא ניגוד עניינים.',
    resNoTitle: isEn ? 'You’re likely not required — but worth checking' : 'כנראה שאינכם חייבים — אבל שווה בדיקה',
    resNoText: isEn
      ? 'You didn’t flag a trigger, but the definitions (“holder”, “significant scale”) are flexible, and a voluntary appointment can even earn up to a 10% sanction reduction. A one-time check is worth it.'
      : 'לא זיהיתם חלופה, אך ההגדרות ("מחזיק", "היקף ניכר") גמישות, ולעיתים מינוי וולונטרי אף מזכה בהקלה של עד 10% בעיצום. בדיקה חד-פעמית שווה את זה.',
  };

  const questions = isEn ? [
    'You’re a public body — or a vendor/contractor/SaaS processing data for one (a “holder”)?',
    'Your core business is trading in personal data or direct mail, over a database of more than 10,000 people?',
    'You monitor individuals on an ongoing, systematic basis at significant scale (location, health, targeted ads, IoT)?',
    'You process specially sensitive data (financial, health, etc.) at significant scale?',
  ] : [
    'אתם גוף ציבורי, או ספק/קבלן/SaaS שמעבד מידע עבור גוף ציבורי ("מחזיק")?',
    'עיקר עיסוקכם הוא סחר במידע אישי או דיוור ישיר, על מאגר של מעל 10,000 בני אדם?',
    'אתם מנטרים אנשים באופן שוטף ושיטתי בהיקף ניכר (מיקום, בריאות, פרסום ממוקד, IoT)?',
    'אתם מעבדים בהיקף ניכר מידע רגיש במיוחד (פיננסי, בריאותי וכדומה)?',
  ];

  const setAns = (i, v) => setAnswers(a => a.map((x, j) => (j === i ? v : x)));
  const answered = answers.every(a => a !== null);
  const anyYes = answers.some(a => a === true);
  const align = isEn ? 'left' : 'right';

  return (
    <section className="dpocheck">
      <nav className="dpocheck__crumb">
        <a href="index.html">{S.crumbHome}</a><span> › </span>
        <a href="Lawyerit DPO.html">{S.crumbDpo}</a><span> › </span>
        <span className="dpocheck__crumb-here">{S.crumbHere}</span>
      </nav>

      <span className="dpocheck__eyebrow">{S.eyebrow}</span>
      <h1 className="dpocheck__title">{S.title}</h1>
      <p className="dpocheck__intro">{S.intro}</p>

      <div className="dpocheck__qs">
        {questions.map((q, i) => (
          <div className="dpocheck__q" key={i}>
            <p className="dpocheck__q-text"><span className="dpocheck__q-num">{i + 1}</span>{q}</p>
            <div className="dpocheck__opts">
              <button
                className={'dpocheck__opt' + (answers[i] === true ? ' is-yes' : '')}
                onClick={() => setAns(i, true)} aria-pressed={answers[i] === true}
              >{S.yes}</button>
              <button
                className={'dpocheck__opt' + (answers[i] === false ? ' is-no' : '')}
                onClick={() => setAns(i, false)} aria-pressed={answers[i] === false}
              >{S.no}</button>
            </div>
          </div>
        ))}
      </div>

      {!answered && <p className="dpocheck__hint">{S.hint}</p>}

      {answered && (
        <div className={'dpocheck__result' + (anyYes ? ' is-required' : ' is-maybe')}>
          <p className="dpocheck__result-title">{anyYes ? S.resYesTitle : S.resNoTitle}</p>
          <p className="dpocheck__result-text">{anyYes ? S.resYesText : S.resNoText}</p>
          <div className="dpocheck__actions" style={{ flexDirection: isEn ? 'row' : 'row-reverse' }}>
            <a className="dpocheck__cta" href="https://www.cal.eu/lawyer-it/30min"
               target="_blank" rel="noopener noreferrer">{S.book}</a>
            <a className="dpocheck__link" href="articles/dpo-appointment-amendment-13.html">{S.readArticle}</a>
            <a className="dpocheck__link" href="Lawyerit DPO.html">{S.aboutService}</a>
          </div>
        </div>
      )}

      <div className="dpocheck__footer" style={{ textAlign: align }}>
        <button className="dpocheck__reset" onClick={() => setAnswers([null, null, null, null])}>{S.reset}</button>
        <p className="dpocheck__disclaimer">{S.disclaimer}</p>
      </div>

      <style>{`
        .dpocheck { max-width: 760px; margin: 0 auto; padding: 40px 24px 72px; }
        .dpocheck__crumb { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
        .dpocheck__crumb a { color: var(--muted); text-decoration: none; }
        .dpocheck__crumb a:hover { color: var(--turquoise-700); }
        .dpocheck__crumb-here { color: var(--ink-2); }
        .dpocheck__eyebrow {
          display: inline-block; background: var(--turquoise-50); color: var(--turquoise-700);
          font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 5px 12px; margin-bottom: 16px;
        }
        .dpocheck__title { font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: -0.02em; }
        .dpocheck__intro { font-size: 17px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; }
        .dpocheck__qs { display: flex; flex-direction: column; gap: 14px; }
        .dpocheck__q { border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; background: #fff; }
        .dpocheck__q-text { font-size: 16.5px; line-height: 1.6; color: var(--ink); margin: 0 0 14px; }
        .dpocheck__q-num {
          display: inline-flex; align-items: center; justify-content: center;
          width: 24px; height: 24px; border-radius: 999px; background: var(--turquoise-50);
          color: var(--turquoise-700); font-size: 13px; font-weight: 700;
          margin-inline-end: 10px; flex-shrink: 0;
        }
        .dpocheck__opts { display: flex; gap: 10px; }
        .dpocheck__opt {
          flex: 1; max-width: 130px; padding: 10px 0; border-radius: 10px;
          border: 1.5px solid var(--border); background: #fff; color: var(--ink-2);
          font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.15s;
        }
        .dpocheck__opt:hover { border-color: var(--turquoise); }
        .dpocheck__opt.is-yes { background: var(--turquoise-700); border-color: var(--turquoise-700); color: #fff; }
        .dpocheck__opt.is-no { background: var(--ink); border-color: var(--ink); color: #fff; }
        .dpocheck__hint { font-size: 14px; color: var(--muted); margin: 20px 2px 0; }
        .dpocheck__result { margin-top: 26px; padding: 24px 26px; border-radius: 16px; }
        .dpocheck__result.is-required { background: var(--turquoise-50); border: 1px solid var(--turquoise); }
        .dpocheck__result.is-maybe { background: var(--bg-2); border: 1px solid var(--border); }
        .dpocheck__result-title { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
        .dpocheck__result-text { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 20px; }
        .dpocheck__actions { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; }
        .dpocheck__cta {
          display: inline-flex; align-items: center; gap: 8px; background: var(--turquoise-700);
          color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 26px; border-radius: 999px;
        }
        .dpocheck__cta:hover { background: var(--turquoise-600); }
        .dpocheck__link { color: var(--turquoise-700); text-decoration: underline; text-underline-offset: 2px; font-size: 14.5px; font-weight: 500; }
        .dpocheck__footer { margin-top: 30px; }
        .dpocheck__reset {
          background: transparent; border: 1px solid var(--border); border-radius: 10px;
          color: var(--muted); font-size: 13.5px; font-weight: 500; font-family: inherit;
          padding: 8px 16px; cursor: pointer;
        }
        .dpocheck__reset:hover { color: var(--ink-2); border-color: var(--ink-2); }
        .dpocheck__disclaimer { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; }
        @media (max-width: 600px) { .dpocheck__title { font-size: 25px; } .dpocheck__opt { max-width: none; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { DPOCheck });
