// DPO Process, Why-me, Sectors, FAQ
function DPOProcess() {
  const steps = [
    { n: '01', title: 'סקר מוכנות', dur: 'שבוע—שבועיים', desc: 'מיפוי המצב הקיים: איזו רגולציה חלה, איפה יש פערים, מה הסיכון. זה לא ריאליטי — זה אבחון מדויק עם המלצות פעולה.' },
    { n: '02', title: 'בניית מסגרת', dur: 'חודש—חודשיים', desc: 'מדיניות, נהלים, DPIA, טמפלייטים של DPA — כל מה שצריך כדי שהארגון ייתפקד כמו שצריך. המסמכים נכתבים מותאמים, לא מועתקים.' },
    { n: '03', title: 'ליווי שוטף', dur: 'ריטיינר חודשי', desc: 'מענה לפניות לקוחות, דרישות רגולציה, עדכונים שוטפים, ישיבות סטטוס קבועות. מענה ראשוני לכל פנייה תוך 48 שעות.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 640, marginBottom: 56 }}>
          <div className="eyebrow">איך זה עובד</div>
          <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', marginBottom: 16, letterSpacing: '-0.03em' }}>
            תהליך מובנה, לא ערפל.
          </h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', lineHeight: 1.55 }}>
            בלי "נסתכל על זה ונראה" ובלי שעות בלתי צפויות. התהליך הוא ברור, מדורג, וניתן לניהול.
          </p>
        </div>

        <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32,
          }} className="process-grid">
            {steps.map((s, i) => (
              <div key={i}>
                <div style={{
                  width: 72, height: 72, borderRadius: 16,
                  background: 'white', border: '1px solid var(--border)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 24,
                  boxShadow: 'var(--shadow-sm)',
                }}>
                  <span className="en num" style={{ fontSize: 26, fontWeight: 700, color: 'var(--turquoise-700)', letterSpacing: '-0.02em' }}>{s.n}</span>
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 14, letterSpacing: '-0.02em' }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.6 }}>{s.desc}</p>
              </div>
            ))}
          </div>
      </div>
      <style>{`
        @media (max-width: 800px) {
          .process-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function DPOWhy() {
  const credentials = [
    { label: 'DPO מוסמכת', sub: 'הרשות להגנת הפרטיות, משרד המשפטים' },
    { label: 'CISO', sub: 'אוניברסיטת בר-אילן' },
    { label: 'LL.B', sub: 'אוניברסיטת תל אביב' },
    { label: 'In-House', sub: '6 שנים בחברות כולל חברת סייבר' },
    { label: 'TOP 5', sub: 'משרדי עו"ד בישראל' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'start' }} className="dpo-why-grid">
          <div>
            <div className="eyebrow">למה לעבוד איתנו</div>
            <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', marginBottom: 24, letterSpacing: '-0.03em' }}>
              פרטיות היא לא תוספת רגולטורית — היא הליבה של החברה.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.7, marginBottom: 18 }}>
              ההתמחות שלנו בפרטיות לא נבנתה מהרצאות או קורסים. היא נבנתה מליווי שוטף של ארגונים בתחומים שבהם פרטיות היא חלק מהותי מהחברה: ביטוח, מידע אשראי, בריאות, וטכנולוגיה עם חשיפה גלובלית.
            </p>
            <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.7 }}>
              אנחנו מכירים מקרוב גם את הרגולציה הישראלית (חוק הגנת הפרטיות, תקנות אבטחת מידע) וגם את המסגרות הבינלאומיות (GDPR, AI Act). זה מאפשר לנו להסתכל על הארגון כתמונה אחת ולא לפזר את היעוץ בין יועצים נפרדים.
            </p>
          </div>

          <div style={{
            background: 'var(--bg-2)', border: '1px solid var(--border)',
            borderRadius: 16, padding: 28,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8,
                background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-6z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
              </div>
              <h3 style={{ fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em' }}>הסמכות ורקע</h3>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {credentials.map((c, i) => (
                <li key={i} style={{
                  display: 'flex', alignItems: 'baseline', gap: 12,
                  paddingBottom: i < credentials.length - 1 ? 14 : 0,
                  borderBottom: i < credentials.length - 1 ? '1px solid var(--border)' : 'none',
                }}>
                  <div className="en" style={{
                    fontSize: 13, fontWeight: 700, color: 'var(--ink)',
                    minWidth: 80, letterSpacing: '-0.01em',
                  }}>{c.label}</div>
                  <div style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.4 }}>{c.sub}</div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .dpo-why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

function DPOSectors() {
  const sectors = [
    'ביטוח ופיננסים',
    'מידע אשראי',
    'בריאות ודיור מוגן',
    'SaaS ו-Tech',
    'חינוך פרטי',
    'שיווק ופרסום',
    'משרדי עו"ד',
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 640, marginBottom: 40 }}>
          <div className="eyebrow">ניסיון מצטבר</div>
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginBottom: 14, letterSpacing: '-0.03em' }}>
            פרטיות שעובדת בשטח, לא על הנייר.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.55 }}>
            הסקטורים שאני מלווה — מארגונים בינלאומיים ועד סטארטאפים.
          </p>
        </div>

        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
          {sectors.map((s, i) => (
            <div key={i} style={{
              padding: '9px 18px',
              background: 'white',
              border: '1px solid var(--border)',
              borderRadius: 999,
              fontSize: 14.5,
              fontWeight: 500,
              color: 'var(--ink-2)',
              transition: 'border-color 0.18s, color 0.18s',
              cursor: 'default',
            }}
            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--turquoise)'; e.currentTarget.style.color = 'var(--turquoise-700)'; }}
            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border)'; e.currentTarget.style.color = 'var(--ink-2)'; }}
            >{s}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DPOFaq() {
  const FAQS = [
    {
      q: 'עשינו סקר מוכנות. למה צריך ממונה פרטיות חיצוני?',
      a: 'ציות לפרטיות הוא לא מוצר — הוא תחזוקה שוטפת. הרגולציה משתנה, דרישות לקוחות משתנות, והארגון עצמו משתנה. ממונה פרטיות חיצונית נותנת מומחיות קבועה ועדכנית בלי עלות של תפקיד פנימי מלא, ובלי שהתחום יהיה על יועמ"ש עמוס או על הממונה אבטחת מידע שיש לו יעדים אחרים.',
    },
    {
      q: 'יש לנו ממונה אבטחת מידע ומחלקת ציות. זה לא מספיק?',
      a: 'ממונה אבטחת מידע עוסק באבטחת מידע, ומחלקת ציות היא לרוב רוחבית. פרטיות היא תחום נפרד עם מומחיות משלה — משפטית, רגולטורית, ותפעולית. בפועל, החיבור בין הממונה פרטיות לבין צוות אבטחת מידע וצוות ציות הוא ההרכב שעובד הכי טוב. אני מצטרפת לצוות, לא מחליפה אותו.',
    },
    {
      q: 'מה עם לוח הזמנים? אנחנו בלחץ מלקוח גדול.',
      a: 'זה המצב הכי נפוץ שבו פונים אלינו. אנחנו נשב איתך ונעבוד על תוכנית העבודה כך שתוכל לחתום על הסכם ולעמוד ברגולציה.',
    },
    {
      q: 'מה המחיר?',
      a: 'המחיר שלנו מותאם לפי הצרכים שלך, פנה אלינו לקביעת שיחה.',
    },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <section className="section">
      <div className="container">
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">שאלות נפוצות</div>
          <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', letterSpacing: '-0.03em' }}>
            מה ארגונים שואלים אותנו בשיחת היכרות.
          </h2>
        </div>

        <div style={{ maxWidth: 880, display: 'flex', flexDirection: 'column' }}>
          {FAQS.map((f, i) => (
            <div key={i} style={{
              borderTop: '1px solid var(--border)',
              borderBottom: i === FAQS.length - 1 ? '1px solid var(--border)' : 'none',
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'start',
                padding: '24px 0', background: 'none', border: 'none', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
              }}>
                <span style={{ fontSize: 18, fontWeight: 500, color: 'var(--ink-2)', letterSpacing: '-0.01em' }}>{f.q}</span>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: open === i ? 'var(--turquoise)' : 'var(--bg-2)',
                  color: open === i ? 'white' : 'var(--ink-2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  transition: 'all 0.2s',
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" style={{
                    transform: open === i ? 'rotate(45deg)' : 'rotate(0)',
                    transition: 'transform 0.25s',
                  }}>
                    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
                  </svg>
                </div>
              </button>
              <div style={{
                maxHeight: open === i ? 400 : 0,
                overflow: 'hidden',
                transition: 'max-height 0.35s cubic-bezier(.4,0,.2,1)',
              }}>
                <p style={{
                  fontSize: 16, color: 'var(--muted)', lineHeight: 1.7,
                  paddingBottom: 28, paddingInlineEnd: 60,
                }}>{f.a}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DPOFinalCTA() {
  return (
    <section id="contact" style={{
      padding: '120px 0',
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(135deg, #2FB5B5 0%, #47CBCB 100%)',
      color: '#fff',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.18) 1px, transparent 1.4px)',
        backgroundSize: '28px 28px',
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
        opacity: 0.6,
      }} />
      <div style={{
        position: 'absolute', top: -120, insetInlineStart: -120,
        width: 420, height: 420, borderRadius: '50%',
        background: 'rgba(255,255,255,0.12)', filter: 'blur(60px)',
      }} />

      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <h2 style={{
            fontSize: 'clamp(34px, 4.2vw, 52px)',
            fontWeight: 700, letterSpacing: '-0.035em',
            lineHeight: 1.1, marginBottom: 20, textWrap: 'balance',
          }}>
            בואו נבין איפה אתם עומדים — ומה הצעד הבא.
          </h2>
          <p style={{
            fontSize: 19, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.88)',
            marginBottom: 36, maxWidth: 600, marginInline: 'auto',
          }}>
            שיחת היכרות של 30 דקות, ללא עלות וללא התחייבות. גם אם לא נעבוד יחד — תצאו עם מפת דרכים ברורה של מה חייב להיעשות קודם.
          </p>
          <a href="#" className="btn btn-lg" style={{
            background: '#0F1115', color: '#fff',
            padding: '18px 34px', fontSize: 17, borderRadius: 12,
            position: 'relative',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 20px 40px -12px rgba(0,0,0,0.4)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
            קביעת שיחת היכרות
            <svg width="18" height="18" viewBox="0 0 16 16"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
            <span style={{
              position: 'absolute', top: -6, insetInlineEnd: -6,
              width: 14, height: 14, borderRadius: '50%',
              background: 'var(--orange)',
              boxShadow: '0 0 0 3px rgba(237,137,54,0.25)',
            }} />
          </a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { DPOProcess, DPOWhy, DPOSectors, DPOFaq, DPOFinalCTA });