// DPO page sections — built with same design system as homepage

function DPOBreadcrumb() {
  return (
    <nav style={{ paddingTop: 24, paddingBottom: 8 }}>
      <div className="container" style={{ fontSize: 13, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 8 }}>
        <a href="Lawyerit Homepage.html" style={{ color: 'var(--muted)', transition: 'color 0.2s' }}
           onMouseEnter={e => e.target.style.color = 'var(--turquoise-700)'}
           onMouseLeave={e => e.target.style.color = 'var(--muted)'}>דף הבית</a>
        <span style={{ color: 'var(--border)' }}>/</span>
        <a href="Lawyerit Homepage.html#services" style={{ color: 'var(--muted)' }}>שירותים</a>
        <span style={{ color: 'var(--border)' }}>/</span>
        <span style={{ color: 'var(--ink-2)' }}>DPO כשירות</span>
      </div>
    </nav>
  );
}

function DPOHero() {
  return (
    <section style={{ paddingTop: 40, paddingBottom: 100, position: 'relative', overflow: 'hidden' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 60, alignItems: 'center',
      }} className="dpo-hero-grid">
        <div>
          <div className="eyebrow fade-up">
            <span className="en" style={{ marginInlineEnd: 4 }}>DPO</span>
            <span>{DPO.hero.eyebrow.replace('DPO ', '')}</span>
          </div>

          <h1 className="fade-up fade-up-d1" style={{
            fontSize: 'clamp(40px, 5.2vw, 64px)',
            fontWeight: 700,
            lineHeight: 1.06,
            letterSpacing: '-0.035em',
            marginBottom: 24,
          }}>
            {DPO.hero.titleLine1}<br />
            <span style={{ color: 'var(--turquoise-700)', position: 'relative', display: 'inline-block' }}>
              {DPO.hero.titleAccent}
              <svg viewBox="0 0 300 14" preserveAspectRatio="none" style={{
                position: 'absolute', bottom: -4, insetInlineStart: 0,
                width: '100%', height: 10, overflow: 'visible',
              }}>
                <path d="M2 9 C 75 2, 225 2, 298 9" stroke="var(--turquoise)" strokeWidth="3" fill="none" strokeLinecap="round"
                  style={{ strokeDasharray: 320, strokeDashoffset: 320, animation: 'drawUnderline 1.2s 0.9s cubic-bezier(.4,0,.2,1) forwards' }}
                />
              </svg>
            </span> {DPO.hero.titleEnd}
          </h1>

          <p className="fade-up fade-up-d2" style={{
            fontSize: 19, lineHeight: 1.55, color: 'var(--muted)', maxWidth: 560, marginBottom: 36,
          }}>
            {DPO.hero.desc}
          </p>

          <div className="fade-up fade-up-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#contact" className="btn btn-brand btn-lg">
              {DPO.hero.cta1}
              <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="#triggers" className="btn btn-outline btn-lg">
              {DPO.hero.cta2}
            </a>
          </div>
        </div>

        <div className="fade-up fade-up-d2">
          <DPOHeroVisual />
        </div>
      </div>
      <style>{`
        @keyframes drawUnderline { to { stroke-dashoffset: 0; } }
        @keyframes drawPath { to { stroke-dashoffset: 0; } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @media (max-width: 900px) {
          .dpo-hero-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// "Key opens door" abstract: regulatory frameworks as gates that unlock
function DPOHeroVisual() {
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '1/1', maxWidth: 500, 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%)',
      }} />

      {/* S-curve through 3 regulatory framework nodes */}
      <svg viewBox="0 0 500 500" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="gateGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#47CBCB" />
            <stop offset="100%" stopColor="#2FB5B5" />
          </linearGradient>
        </defs>

        {/* Background dashed guide — dramatic S-curve */}
        <path d="M 38 318 C 76 318, 100 300, 132 300 C 166 300, 224 108, 262 118 C 300 128, 360 302, 392 312 C 424 322, 462 285, 485 278"
          stroke="#E5E5E0" strokeWidth="1.5" strokeDasharray="4 6" fill="none" />

        {/* Animated main curve — pronounced S through 3 nodes */}
        <path
          d="M 38 318 C 76 318, 100 300, 132 300 C 166 300, 224 108, 262 118 C 300 128, 360 302, 392 312 C 424 322, 462 285, 485 278"
          stroke="url(#gateGrad)" strokeWidth="2.5" fill="none" strokeLinecap="round"
          style={{ strokeDasharray: 760, strokeDashoffset: 760, animation: 'drawPath 1.8s 0.5s ease-out forwards' }}
        />

        {/* Node 1 — חוק הגנת הפרטיות */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.5s 0.8s forwards' }}>
          <circle cx="132" cy="300" r="14" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1"/>
          <circle cx="132" cy="300" r="6" fill="#47CBCB"/>
        </g>

        {/* Node 2 — GDPR */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.5s 1.0s forwards' }}>
          <circle cx="262" cy="118" r="14" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1"/>
          <circle cx="262" cy="118" r="6" fill="#47CBCB"/>
        </g>

        {/* Node 3 — AI Act */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.5s 1.2s forwards' }}>
          <circle cx="392" cy="312" r="14" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1"/>
          <circle cx="392" cy="312" r="6" fill="#47CBCB"/>
        </g>
      </svg>

      {/* Framework chips — positioned near their nodes */}
      {/* Node 1 at (132,300) = 26% left, 60% top */}
      <FrameworkChip label="חוק הגנת הפרטיות" sub="ישראל" style={{ top: '50%', insetInlineEnd: '2%' }} delay={0.9} />
      {/* Node 2 at (262,118) = 52% left, 24% top */}
      <FrameworkChip label="GDPR" sub="אירופה" style={{ top: '10%', insetInlineEnd: '36%' }} delay={1.1} accent="purple" />
      {/* Node 3 at (392,312) = 78% left, 62% top */}
      <FrameworkChip label="AI Act" sub="2026" style={{ top: '52%', insetInlineEnd: '64%' }} delay={1.3} accent="orange" />

      {/* Closer card */}
      <div style={{
        position: 'absolute', bottom: 24, insetInlineStart: 24,
        padding: '12px 14px', background: 'white',
        borderRadius: 12, border: '1px solid var(--border)',
        boxShadow: 'var(--shadow-md)',
        display: 'flex', alignItems: 'center', gap: 10,
        opacity: 0, animation: 'fadeIn 0.5s 1.8s forwards',
      }}>
        <div style={{
          width: 28, height: 28, borderRadius: 6, background: 'var(--turquoise)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7.5 L6 10 L11 4" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 500 }}>DPA חתום</div>
          <div style={{ fontSize: 11, color: 'var(--muted)' }}>העסקה מתקדמת</div>
        </div>
      </div>
    </div>
  );
}

function FrameworkChip({ label, sub, style, delay, accent }) {
  const colors = {
    default: { bg: 'var(--turquoise-50)', fg: 'var(--turquoise-700)' },
    purple: { bg: 'var(--purple-50)', fg: 'var(--purple-600)' },
    orange: { bg: 'var(--orange-50)', fg: 'var(--orange)' },
  };
  const c = colors[accent || 'default'];
  return (
    <div style={{
      position: 'absolute', ...style,
      padding: '8px 12px', background: 'white',
      border: '1px solid var(--border)', borderRadius: 10,
      boxShadow: 'var(--shadow-md)',
      opacity: 0,
      animation: `chipIn 0.5s ${delay}s cubic-bezier(.2,.8,.2,1) forwards`,
      display: 'flex', alignItems: 'center', gap: 10,
    }}>
      <div style={{
        width: 8, height: 8, borderRadius: '50%', background: c.fg,
        boxShadow: `0 0 0 3px ${c.bg}`,
      }} />
      <div>
        <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink-2)' }}>{label}</div>
        <div style={{ fontSize: 10, color: 'var(--muted)' }}>{sub}</div>
      </div>
      <style>{`
        @keyframes chipIn { from { opacity: 0; transform: translateY(-6px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
      `}</style>
    </div>
  );
}

Object.assign(window, { DPOBreadcrumb, DPOHero });