// Regulation Page — GDPR / HIPAA / AI Act surveys

function RegBreadcrumb() {
  return (
    <div className="container" style={{ paddingTop: 20, paddingBottom: 12, fontSize: 13, color: 'var(--muted)' }}>
      <a href="Lawyerit Homepage.html" style={{ color: 'var(--muted)' }}>דף הבית</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <a href="Lawyerit Homepage.html#services" style={{ color: 'var(--muted)' }}>שירותים</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <span style={{ color: 'var(--ink-2)' }}>סקרי רגולציה והכנות לתקנים</span>
    </div>
  );
}

function RegHero() {
  return (
    <section style={{ paddingTop: 40, paddingBottom: 100 }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.15fr 1fr',
        gap: 60, alignItems: 'center',
      }} className="reg-hero-grid">
        <div>
          <div className="eyebrow fade-up">
            <ET path="reg.hero.eyebrow">פרויקט ייעודי · GDPR · HIPAA · AI Act</ET>
          </div>
          <h1 className="fade-up fade-up-d1" style={{
            fontSize: 'clamp(38px, 5vw, 60px)',
            fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.035em', marginBottom: 24,
          }}>
            <span style={{ color: 'var(--turquoise-700)' }}>
              <ET path="reg.hero.title.accent">מהפער הראשוני</ET>
            </span>
            <ET path="reg.hero.title.post"> ועד התעודה.</ET>
          </h1>
          <ETBlock path="reg.hero.sub" as="p" className="fade-up fade-up-d2" style={{
            fontSize: 18.5, lineHeight: 1.6, color: 'var(--muted)',
            maxWidth: 560, marginBottom: 36,
          }}>
            פרויקטים ייעודיים להכנת החברה לעמידה ברגולציה בינלאומית — GDPR, HIPAA, AI Act. סקר מוכנות, Gap Analysis, תכנית פעולה, וליווי עד סגירת הפערים. לוח זמנים ברור, תוצרים מוגדרים, ומישהי שמלווה אתכם עד לקו הסיום.
          </ETBlock>
          <div className="fade-up fade-up-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#contact" className="btn btn-brand btn-lg">
              <ET path="reg.hero.cta1">לשיחת היכרות</ET>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#process" className="btn btn-outline btn-lg">
              <ET path="reg.hero.cta2">איך זה עובד</ET>
            </a>
          </div>
        </div>

        <div className="fade-up fade-up-d2">
          <RegHeroVisual />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .reg-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// Visual: 4-stage timeline
function RegHeroVisual() {
  const stages = [
    { label: 'סקר', n: '01', color: '#47CBCB' },
    { label: 'Gap', n: '02', color: '#47CBCB' },
    { label: 'יישום', n: '03', color: '#47CBCB' },
    { label: 'תעודה', n: '04', color: '#ED8936' },
  ];

  return (
    <div style={{
      position: 'relative', aspectRatio: '1/1', maxWidth: 480,
      marginInlineStart: 'auto',
    }}>
      <div className="dot-grid" style={{
        position: 'absolute', inset: 0, borderRadius: 24, opacity: 0.6,
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }} />

      {/* Vertical timeline */}
      <div style={{
        position: 'absolute', top: '8%', bottom: '8%', insetInlineEnd: '50%',
        width: 2, background: 'linear-gradient(180deg, var(--border) 0%, var(--turquoise) 100%)',
        transform: 'translateX(50%)',
      }} />

      {stages.map((s, i) => {
        const top = `${10 + i * 25}%`;
        const isLast = i === stages.length - 1;
        return (
          <div key={i} style={{
            position: 'absolute', top, insetInlineStart: i % 2 === 0 ? '8%' : '52%',
            width: '40%',
            opacity: 0, animation: `fadeIn 0.5s ${0.4 + i * 0.2}s forwards`,
          }}>
            <div style={{
              background: 'white', border: `1px solid ${isLast ? 'var(--orange)' : 'var(--border)'}`,
              borderRadius: 12, padding: '12px 14px',
              boxShadow: '0 8px 20px -8px rgba(0,0,0,0.08)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div className="en num" style={{
                fontSize: 18, fontWeight: 700,
                color: isLast ? 'var(--orange)' : 'var(--turquoise-700)',
                letterSpacing: '-0.02em',
              }}>{s.n}</div>
              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink-2)' }}>{s.label}</div>
              {isLast && (
                <svg width="14" height="14" viewBox="0 0 16 16" style={{ marginInlineStart: 'auto' }}>
                  <path d="M3 8l3 3 7-7" stroke="var(--orange)" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                </svg>
              )}
            </div>
            {/* Connector dot */}
            <div style={{
              position: 'absolute', top: 22,
              insetInlineStart: i % 2 === 0 ? 'calc(100% + 4px)' : 'auto',
              insetInlineEnd: i % 2 === 1 ? 'calc(100% + 4px)' : 'auto',
              width: 12, height: 12, borderRadius: '50%',
              background: 'white', border: `2px solid ${isLast ? 'var(--orange)' : 'var(--turquoise)'}`,
            }} />
          </div>
        );
      })}

      <style>{`
        @keyframes fadeIn { to { opacity: 1; } }
      `}</style>
    </div>
  );
}

// Scenarios — 5 cards
const REG_SCENARIOS = [
  { num: '01', title: 'לקוח דורש עמידה בתקן לפני חתימה',
    desc: 'לקוח גדול (אירופאי, אמריקאי, או בריאותי) מתנה את החתימה בעמידה ברגולציה. אין לכם זמן ללמוד מאפס, ואתם זקוקים לוודא שהעמידה היא אמיתית — לא רק על הנייר.' },
  { num: '02', title: 'כניסה לשוק חדש',
    desc: 'החברה מרחיבה את פעילותה לאירופה (GDPR), לארה"ב (HIPAA במגזר הבריאות), או למגזרים מוסדרים אחרים. זה לא טכני בלבד — זה דורש מסגרת משפטית ותפעולית מלאה.' },
  { num: '03', title: 'מוצר AI חדש או קיים',
    desc: 'פיתוח, רכישה או שימוש במערכת AI — וה-AI Act האירופאי החדש משנה את כללי המשחק. צריך להבין באיזו קטגוריה אתם, אילו דרישות חלות, ומה צריך להוסיף.' },
  { num: '04', title: 'פערים שזוהו בביקורת',
    desc: 'ביקורת פנימית, חיצונית, או רגולטורית הצביעה על פערים. רשימת המטלות כבר קיימת — צריך מי שיסגור אותה בצורה מקצועית ומדויקת.' },
  { num: '05', title: 'Compliance Statement ללקוחות',
    desc: 'רוצים להוכיח ללקוחות ולשותפים שאתם עומדים בסטנדרטים בינלאומיים. לא בשביל לעמוד ברגולציה — בשביל ליצור אמון בשוק.' },
];

function RegScenarios() {
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">מתי צריך פרויקט כזה</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="reg.scenarios.title">חמישה תרחישים שדורשים סקר מסודר.</ET>
          </h2>
          <ETBlock path="reg.scenarios.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            ברוב המקרים, חברות לא מחפשות "סקר רגולציה" — הן מחפשות פתרון לסיטואציה ספציפית. אם אחת מהבאות נשמעת מוכרת, פרויקט מובנה הוא הדבר הנכון:
          </ETBlock>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="scenarios-grid">
          {REG_SCENARIOS.map((s, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 14, padding: 26,
            }}>
              <div className="en num" style={{
                fontSize: 13, fontWeight: 500, color: 'var(--turquoise-700)',
                letterSpacing: '0.04em', marginBottom: 12,
              }}>{s.num}</div>
              <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 10, lineHeight: 1.35 }}>
                <ET path={`reg.scenarios.${i}.title`}>{s.title}</ET>
              </h3>
              <ETBlock path={`reg.scenarios.${i}.desc`} as="p" style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55 }}>
                {s.desc}
              </ETBlock>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .scenarios-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px)  { .scenarios-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Standards — GDPR / HIPAA / AI Act
const REG_STANDARDS = [
  {
    code: 'GDPR',
    fullName: 'General Data Protection Regulation',
    region: 'אירופה',
    flag: <FlagEU />,
    relevant: 'חברות שמעבדות מידע אישי של תושבי האיחוד האירופי — בכל סקטור',
    includes: 'מיפוי מידע, ניתוח בסיסים חוקיים, סקר זכויות נושאי מידע, בחינת העברות חוצות גבולות, DPA-ים, מדיניות פרטיות',
    deliverable: 'דוח Gap Analysis + תכנית פעולה מפורטת + טיוטות מסמכים + ליווי עד סגירה',
    duration: '8-12 שבועות',
    color: '#3B82C4',
  },
  {
    code: 'HIPAA',
    fullName: 'Health Insurance Portability and Accountability Act',
    region: 'ארצות הברית',
    flag: <FlagUS />,
    relevant: 'חברות בריאות, MedTech ו-HealthTech שמטפלות במידע רפואי של אזרחי ארה"ב',
    includes: 'Privacy Rule, Security Rule, Breach Notification Rule. סקר אבטחה אדמיניסטרטיבית, פיזית וטכנית. BAA-ים, נהלי גישה ועוד',
    deliverable: 'דוח Gap Analysis + תכנית פעולה + טיוטות מדיניות ונהלים + ליווי עד סגירה',
    duration: '10-14 שבועות',
    color: '#C24F4F',
  },
  {
    code: 'AI Act',
    fullName: 'EU Artificial Intelligence Act',
    region: 'אירופה',
    flag: <IconAI />,
    relevant: 'חברות שמפתחות, מוכרות, או משתמשות במערכות AI — לפי קטגוריות סיכון',
    includes: 'סיווג מערכות AI לפי רמת סיכון, ניתוח חובות (תיעוד, שקיפות, פיקוח אנושי), גישור עם GDPR, הכנה ל-Conformity Assessment',
    deliverable: 'סיווג + דוח Gap Analysis + תכנית פעולה לעמידה בדרישות הספציפיות לקטגוריה',
    duration: '6-10 שבועות (תלוי בקטגוריה)',
    color: '#7C5BA0',
  },
];

function FlagEU() {
  return (
    <svg width="36" height="24" viewBox="0 0 36 24">
      <rect width="36" height="24" rx="3" fill="#003399"/>
      {[0, 1, 2, 3, 4].map(i => {
        const angle = (i / 5) * 2 * Math.PI - Math.PI / 2;
        const x = 18 + 6 * Math.cos(angle);
        const y = 12 + 6 * Math.sin(angle);
        return <circle key={i} cx={x} cy={y} r="1.4" fill="#FFCC00"/>;
      })}
    </svg>
  );
}
function FlagUS() {
  return (
    <svg width="36" height="24" viewBox="0 0 36 24">
      <rect width="36" height="24" rx="3" fill="#fff"/>
      {[0,1,2,3,4,5].map(i => (
        <rect key={i} x="0" y={i*4 + (i ? 0 : 0)} width="36" height="2" fill="#B22234" />
      ))}
      <rect width="14" height="12" fill="#3C3B6E"/>
    </svg>
  );
}
function IconAI() {
  return (
    <div style={{
      width: 36, height: 24, borderRadius: 3,
      background: 'linear-gradient(135deg, #6366F1, #A855F7)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'white', fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
    }}>AI</div>
  );
}

function RegStandards() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">התקנים</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="reg.standards.title">שלושה תקנים. שלושה עולמות. שיטה אחת.</ET>
          </h2>
          <ETBlock path="reg.standards.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            כל תקן הוא עולם בפני עצמו — אבל השיטה לעבוד איתם דומה. אבחון, פערים, תכנית, ליווי. הנה מה שכלול בכל אחד:
          </ETBlock>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }} className="standards-grid">
          {REG_STANDARDS.map((std, i) => (
            <div key={std.code} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 16, padding: 28,
              display: 'flex', flexDirection: 'column',
              transition: 'all 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = std.color}
            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
                {std.flag}
                <div>
                  <div className="en" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', color: std.color }}>
                    <ET path={`reg.standards.${i}.code`}>{std.code}</ET>
                  </div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted-2)' }}>
                    <ET path={`reg.standards.${i}.region`}>{std.region}</ET>
                  </div>
                </div>
              </div>
              <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 18, fontStyle: 'italic' }}>
                <ET path={`reg.standards.${i}.fullName`}>{std.fullName}</ET>
              </div>

              <StandardField label="למי רלוונטי" value={std.relevant} path={`reg.standards.${i}.relevant`} />
              <StandardField label="מה כלול בסקר" value={std.includes} path={`reg.standards.${i}.includes`} />
              <StandardField label="תוצר סופי" value={std.deliverable} path={`reg.standards.${i}.deliverable`} />

              <div style={{
                marginTop: 'auto',
                background: 'var(--bg-2)', borderRadius: 10,
                padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 10,
              }}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <circle cx="8" cy="8" r="6.5" stroke={std.color} strokeWidth="1.4"/>
                  <path d="M8 5v3l2 1.5" stroke={std.color} strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
                <div>
                  <div style={{ fontSize: 11, color: 'var(--muted)' }}>משך טיפוסי</div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)' }}>
                    <ET path={`reg.standards.${i}.duration`}>{std.duration}</ET>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .standards-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function StandardField({ label, value, path }) {
  return (
    <div style={{ marginBottom: 14 }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--muted-2)', letterSpacing: '0.04em', marginBottom: 4, textTransform: 'uppercase' }}>
        {label}
      </div>
      <ETBlock path={path} as="p" style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
        {value}
      </ETBlock>
    </div>
  );
}

// Process — 4 stages with deliverables
function RegProcess() {
  const stages = [
    { n: '01', time: '2-3 שבועות', title: 'סקר מוכנות',
      desc: 'מיפוי המצב הקיים, מיפוי הפעילות הרלוונטית, ובחינת הפערים מול דרישות התקן. שיחות עם בעלי העניין, בחינת מסמכים קיימים, וזיהוי מה כבר קיים ומה חסר.',
      deliverable: 'דוח אבחון ראשוני + מיפוי הפעילות' },
    { n: '02', time: '2-3 שבועות', title: 'Gap Analysis ותכנית פעולה',
      desc: 'ניתוח מפורט של כל פער מול דרישות התקן, סדר עדיפויות, אומדן מאמץ וזמני יישום. תכנית הפעולה כוללת תוצרים פנים-ארגוניים (נהלים, מדיניות) ופעולות תפעוליות (טכנולוגיה, הסכמים).',
      deliverable: 'דוח Gap Analysis + תכנית פעולה מפורטת לאישור הנהלה' },
    { n: '03', time: '4-8 שבועות', title: 'יישום וליווי',
      desc: 'ליווי הצוות הפנימי בסגירת הפערים — כתיבת מסמכים, התאמת תהליכים, וייעוץ שוטף. במקרים מתאימים — גם עזרה במשא ומתן מול צד שלישי (ספקים, רגולטורים).',
      deliverable: 'כל המסמכים המתחייבים + סטטוס כל פער' },
    { n: '04', time: '1-2 שבועות', title: 'אימות ותיעוד סופי',
      desc: 'בדיקה סופית שכל הפערים נסגרו, תיעוד כולל של מצב התאימות, והכנת מסמך Compliance Statement שאפשר להציג ללקוחות, לרגולטורים, ולשותפים.',
      deliverable: 'דוח תאימות סופי + Compliance Statement' },
  ];

  return (
    <section id="process" style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">איך הפרויקט מתנהל</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="reg.process.title">ארבעה שלבים. תוצר בכל שלב.</ET>
          </h2>
          <ETBlock path="reg.process.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            פרויקט שלא מתמשך לאינסוף. כל שלב מוגדר בלוח זמנים, תוצר ברור, ושער אישור לפני המעבר לשלב הבא.
          </ETBlock>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {stages.map((s, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 16, padding: 26,
              display: 'grid', gridTemplateColumns: 'auto 1fr auto',
              gap: 24, alignItems: 'flex-start',
            }} className="reg-stage-row">
              <div className="en num" style={{
                fontSize: 56, fontWeight: 700, color: 'var(--turquoise-700)',
                letterSpacing: '-0.04em', lineHeight: 0.9,
                opacity: 0.85,
              }}>{s.n}</div>

              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8, flexWrap: 'wrap' }}>
                  <h3 style={{ fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em' }}>
                    <ET path={`reg.process.${i}.title`}>{s.title}</ET>
                  </h3>
                  <span style={{
                    padding: '3px 10px',
                    background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                    borderRadius: 999, fontSize: 11.5, fontWeight: 500,
                  }}>
                    <ET path={`reg.process.${i}.time`}>{s.time}</ET>
                  </span>
                </div>
                <ETBlock path={`reg.process.${i}.desc`} as="p" style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 14 }}>
                  {s.desc}
                </ETBlock>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '6px 12px',
                  background: '#FAECE7', color: '#993C1D',
                  borderRadius: 8, fontSize: 13, fontWeight: 500,
                }}>
                  <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                    <path d="M3 3h7l3 3v7H3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
                    <path d="M5 7h6M5 9h4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
                  </svg>
                  תוצר: <ET path={`reg.process.${i}.deliverable`}>{s.deliverable}</ET>
                </div>
              </div>

              <div style={{ display: 'none' }}>{/* spacer */}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) {
          .reg-stage-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          .reg-stage-row > .en.num { font-size: 36px !important; }
        }
      `}</style>
    </section>
  );
}

// Deliverables — what you get
const REG_DELIVERABLES = [
  { num: '1', title: 'דוח Gap Analysis מלא',
    desc: 'מסמך מקצועי שמתעד את כל הפערים שזוהו, את הפעולות שננקטו, ואת מצב התאימות הסופי. אפשר להציג אותו לדירקטוריון, לרגולטורים, או ללקוחות בדרישה.' },
  { num: '2', title: 'חבילת מסמכים מותאמת',
    desc: 'כל המדיניות, נהלים, טפסים והסכמים שדרשה הרגולציה — בעברית ובאנגלית במידת הצורך. מותאמים ספציפית לחברה שלכם, לא טמפלייטים גנריים.' },
  { num: '3', title: 'תכנית עבודה לתחזוקה',
    desc: 'תאימות אינה אירוע חד-פעמי. מקבלים תכנית של מה צריך לבצע מדי שנה, מי אחראי, ומה הסיכונים אם לא מבצעים.' },
  { num: '4', title: 'Compliance Statement רשמי',
    desc: 'מסמך מקצועי, חתום, שאפשר להציג ללקוחות ולשותפים כאישור עמידה. במקום "אנחנו מסודרים" — "הנה ההוכחה."' },
];

function RegDeliverables() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">התוצרים</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="reg.deliverables.title">בסוף הפרויקט יש לכם ארבעה דברים מוחשיים.</ET>
          </h2>
          <ETBlock path="reg.deliverables.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            לא רק "תחושה שאנחנו מסודרים". מסמכים, תכנית, וראיות — דברים שאפשר להראות, להציג ולתחזק.
          </ETBlock>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24,
        }} className="deliverables-grid">
          {REG_DELIVERABLES.map((d, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 14, padding: 28,
              display: 'flex', gap: 20,
            }}>
              <div className="en num" style={{
                fontSize: 56, fontWeight: 700, color: 'var(--turquoise)',
                letterSpacing: '-0.04em', lineHeight: 0.9, flexShrink: 0,
              }}>{d.num}</div>
              <div>
                <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em' }}>
                  <ET path={`reg.deliverables.${i}.title`}>{d.title}</ET>
                </h3>
                <ETBlock path={`reg.deliverables.${i}.desc`} as="p" style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55 }}>
                  {d.desc}
                </ETBlock>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) { .deliverables-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Why me — international privacy
function RegWhyMe() {
  const creds = [
    'DPO מוסמכת — הרשות להגנת הפרטיות, משרד המשפטים',
    'CISO מוסמכת — אוניברסיטת בר-אילן',
    'LL.B אוניברסיטת תל אביב',
    'ניסיון GDPR שוטף — קבוצת Howden הבינלאומית',
    'ניסיון HIPAA — חברות MedTech ו-HealthTech',
    'פירון — מחלקת פרטיות והייטק',
  ];
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60,
      }} className="reg-whyme-grid">
        <div>
          <div className="eyebrow">הניסיון</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 24 }}>
            <ET path="reg.whyme.title">פרטיות בינלאומית — לא מהספרים, מהשטח.</ET>
          </h2>
          <ETBlock path="reg.whyme.p1" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', marginBottom: 18 }}>
            את הניסיון בסקרי רגולציה בינלאומיים בניתי דרך ליווי שוטף של ארגונים שעובדים בקבוצות בינלאומיות — כולל קבוצת Howden הבריטית. זה לא תיאוריה — זה עבודה שוטפת מול לקוחות באירופה ובארה"ב, מול רגולטורים, ומול דרישות אמיתיות.
          </ETBlock>
          <ETBlock path="reg.whyme.p2" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--muted)' }}>
            המומחיות בפרטיות מתחברת עם הבנה משפטית רחבה — חוזים מסחריים, רגולציה ישראלית, אבטחת מידע. זה מאפשר לי לעשות סקר רגולציה שלא רק "מסמן וי" — אלא משתלב באמת עם הפעילות העסקית של החברה.
          </ETBlock>
        </div>
        <div style={{
          background: 'white', border: '1px solid var(--border)',
          borderRadius: 14, padding: 28, alignSelf: 'start',
        }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--turquoise-700)', marginBottom: 16, letterSpacing: '0.04em' }}>
            הסמכות ורקע רלוונטי
          </div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {creds.map((c, i) => (
              <li key={i} style={{ display: 'flex', gap: 10, fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                <div style={{
                  width: 16, height: 16, borderRadius: 4, background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2,
                }}>
                  <svg width="9" height="9" viewBox="0 0 10 10"><path d="M2 5.5 L4 7.5 L8 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
                </div>
                <ET path={`reg.whyme.cred${i}`}>{c}</ET>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .reg-whyme-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const REG_FAQ = [
  { q: 'כמה זמן זה לוקח?',
    a: 'תלוי בתקן ובמורכבות הארגון. פרויקט GDPR טיפוסי לוקח 8-12 שבועות, HIPAA לוקח 10-14 שבועות, ו-AI Act לוקח 6-10 שבועות. בשיחת ההיכרות נוכל להעריך מדויק יותר.' },
  { q: 'איך מתמחרים פרויקט כזה?',
    a: 'תמחור פרויקטלי קבוע, לא שעתי. לאחר שיחת היכרות וסקירה ראשונית של הסקופ, אני שולחת הצעת מחיר מפורטת עם תוצרים מוגדרים ולוח זמנים. בלי הפתעות בדרך.' },
  { q: 'מה אם נמצאים פערים שלא ידענו עליהם?',
    a: 'זה חלק מהפרויקט. סקר המוכנות נועד לזהות בדיוק את אלה. אם נמצאים פערים גדולים בהיקף שלא ניתן היה לחזות מראש — אנחנו דנים על זה ומחליטים יחד אם להרחיב את הסקופ או להגדיר פרויקט המשך.' },
  { q: 'אנחנו לא מוכנים לעלות בכמה שלבים. אפשר להתחיל קטן?',
    a: 'כן. אפשר להתחיל בסקר מוכנות בלבד (שלב 1), לקבל את התמונה, ואז להחליט אם להמשיך לשלבי היישום. זו דרך מצוינת להבין את הסקופ לפני התחייבות מלאה.' },
  { q: 'יש לנו DPO או CISO. למה צריך עוד מישהי?',
    a: 'DPO ו-CISO הם תפקידי ליווי שוטף. סקר רגולציה הוא פרויקט עם תפוקה ספציפית — וה-DPO/CISO שלכם עסוק ביומיום. הם בדרך כלל שמחים שמישהי אחרת מבצעת את הפרויקט הזה במקביל לעבודה השוטפת שלהם.' },
  { q: 'מה קורה אחרי שהפרויקט מסתיים?',
    a: 'אם החברה רוצה — אפשר להמשיך בליווי שוטף תחת מודל DPO כשירות. אם לא — אתם מקבלים תכנית תחזוקה מפורטת שאתם יכולים להפעיל פנימית. אין התחייבות להמשיך.' },
];

function RegFaq() {
  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow">שאלות נפוצות</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em' }}>
            <ET path="reg.faq.title">מה חברות שואלות לפני שמתחילות פרויקט.</ET>
          </h2>
        </div>
        <FAQAccordion items={REG_FAQ} pathPrefix="reg.faq" />
      </div>
    </section>
  );
}

Object.assign(window, {
  RegBreadcrumb, RegHero, RegScenarios, RegStandards,
  RegProcess, RegDeliverables, RegWhyMe, RegFaq,
});