// GC Page — Fractional General Counsel

// Scroll-reveal: fires IntersectionObserver for [data-reveal] elements
function useScrollReveal() {
  React.useEffect(() => {
    const timer = setTimeout(() => {
      const obs = new IntersectionObserver((entries) => {
        entries.forEach(e => {
          if (e.isIntersecting) {
            e.target.classList.add('revealed');
            obs.unobserve(e.target);
          }
        });
      }, { threshold: 0.12 });
      document.querySelectorAll('[data-reveal]').forEach(el => obs.observe(el));
      return () => obs.disconnect();
    }, 80);
    return () => clearTimeout(timer);
  }, []);
}

function GCBreadcrumb() {
  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)' }}>GC כשירות</span>
    </div>
  );
}

function GCHero() {
  useScrollReveal();
  return (
    <section style={{ paddingTop: 40, paddingBottom: 100 }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: '1.15fr 1fr',
        gap: 60,
        alignItems: 'center',
      }} className="gc-hero-grid">
        <div>
          <div className="eyebrow fade-up">
            <ET path="gc.hero.eyebrow">GC כשירות · Fractional General Counsel</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,
          }}>
            <ET path="gc.hero.title.pre">ליווי משפטי </ET>
            <span style={{ color: 'var(--turquoise-700)' }}>
              <ET path="gc.hero.title.accent">שרץ בקצב</ET>
            </span>
            <ET path="gc.hero.title.post"> של החברה שלך.</ET>
          </h1>
          <ETBlock path="gc.hero.sub" as="p" className="fade-up fade-up-d2" style={{
            fontSize: 18.5, lineHeight: 1.6, color: 'var(--muted)',
            maxWidth: 560, marginBottom: 36,
          }}>
            משרד גדול גובה שעות, גם כשהוא "בודק את הנושא פנימית". אנחנו גובים על תוצרים בלבד: חוזה, סקר, RFP, ייעוץ. משלמים על מה שמקבלים בפועל. ואיך שנוח לכם: פרויקט בודד, ליווי שוטף, או כל מה שמתאים לשלב שבו אתם נמצאים.
          </ETBlock>
          <div className="fade-up fade-up-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="https://www.cal.eu/lawyer-it/30min" target="_blank" rel="noopener noreferrer"
              className="btn btn-brand btn-lg"
              style={{ position: 'relative', paddingInlineEnd: 44 }}
              onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <ET path="gc.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>
              <span style={{
                position: 'absolute', top: -5, insetInlineEnd: -5,
                width: 12, height: 12, borderRadius: '50%',
                background: 'var(--orange)',
                boxShadow: '0 0 0 3px rgba(237,137,54,0.22)',
              }} />
            </a>
            <a href="#process" className="btn btn-outline btn-lg">
              <ET path="gc.hero.cta2">איך אנחנו עובדים?</ET>
            </a>
          </div>
        </div>

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

// Visual: reuse homepage HeroVisual exactly, with GC chip highlighted as "current"
function GCHeroVisual() {
  const lang = useLang();
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '1/1', maxWidth: 520, marginInlineStart: 'auto' }}>
      {/* Dot grid */}
      <div className="dot-grid" style={{
        position: 'absolute', inset: 0, borderRadius: 24, opacity: 0.7,
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }} />

      {/* Same SVG path as homepage */}
      <svg viewBox="0 0 520 520" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="gcPathGrad2" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#47CBCB" />
            <stop offset="100%" stopColor="#2FB5B5" />
          </linearGradient>
          <linearGradient id="gcTangleGrad2" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#C9C9C4" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#C9C9C4" stopOpacity="0.2" />
          </linearGradient>
        </defs>

        {/* Tangle */}
        <g style={{ opacity: 0.9 }}>
          <path d="M 80 180 C 110 140, 160 240, 110 260 C 60 280, 120 330, 160 310 C 200 290, 140 230, 180 210 C 220 190, 170 150, 140 180"
            stroke="url(#gcTangleGrad2)" strokeWidth="2" fill="none" strokeLinecap="round"/>
          <path d="M 60 220 C 90 210, 80 280, 140 290 C 200 300, 170 240, 200 250"
            stroke="url(#gcTangleGrad2)" strokeWidth="2" fill="none" strokeLinecap="round"/>
        </g>

        {/* Clean resolved path — passes exactly through the 3 nodes */}
        <path
          d="M 95 262 C 150 262, 185 212, 222 212 C 258 212, 292 158, 322 163 C 352 168, 398 288, 422 294 C 446 300, 488 276, 515 272"
          stroke="url(#gcPathGrad2)" strokeWidth="3" fill="none" strokeLinecap="round"
          style={{ strokeDasharray: 720, strokeDashoffset: 720, animation: 'drawPath 2s 0.4s cubic-bezier(.4,0,.2,1) forwards' }}
        />

        {/* GC node — highlighted (current page) with ripple */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.2s forwards' }}>
          <circle cx="222" cy="212" r="16" fill="none" stroke="#47CBCB" strokeOpacity="0.2" strokeWidth="1.5"/>
          <circle cx="222" cy="212" r="8" fill="#47CBCB"/>
          <circle cx="222" cy="212" r="4" fill="white"/>
        </g>

        {/* DPO node */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.4s forwards' }}>
          <circle cx="322" cy="163" r="5" fill="#47CBCB" />
          <circle cx="322" cy="163" r="12" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1" />
        </g>

        {/* REG node */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.6s forwards' }}>
          <circle cx="422" cy="294" r="5" fill="#47CBCB" />
          <circle cx="422" cy="294" r="12" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1" />
        </g>
      </svg>

      {/* Word-style comment bubble */}
      <div style={{
        position: 'absolute', top: '18%', insetInlineEnd: '2%',
        background: 'white',
        border: '1px solid #D1D5DB',
        borderRadius: 6,
        boxShadow: '0 2px 14px rgba(0,0,0,0.10)',
        padding: '10px 13px 11px',
        minWidth: 195,
        opacity: 0, animation: 'chipIn 0.6s 2.2s cubic-bezier(.2,.8,.2,1) forwards',
        zIndex: 10,
        direction: 'rtl',
      }}>
        {/* Arrow pointing left toward the node */}
        <div style={{
          position: 'absolute',
          right: '100%', top: '38%',
          transform: 'translateY(-50%)',
        }}>
          {/* Border triangle */}
          <div style={{
            width: 0, height: 0,
            borderTop: '7px solid transparent',
            borderBottom: '7px solid transparent',
            borderLeft: '9px solid #D1D5DB',
          }} />
          {/* Fill triangle (white) */}
          <div style={{
            position: 'absolute',
            top: '50%', right: 1,
            transform: 'translateY(-50%)',
            width: 0, height: 0,
            borderTop: '6px solid transparent',
            borderBottom: '6px solid transparent',
            borderLeft: '8px solid white',
          }} />
        </div>

        {/* Header */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 5,
          marginBottom: 7, paddingBottom: 7,
          borderBottom: '1px solid #F3F4F6',
        }}>
          <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
            <path d="M14 2H2a1 1 0 00-1 1v9a1 1 0 001 1h2v2.5L7.5 13H14a1 1 0 001-1V3a1 1 0 00-1-1z" stroke="#9CA3AF" strokeWidth="1.4" strokeLinejoin="round"/>
          </svg>
          <span style={{ fontSize: 10, fontWeight: 700, color: '#6B7280', letterSpacing: '0.04em' }}>
            הערות Lawyerit
          </span>
        </div>

        {/* GC label */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 7,
          marginBottom: 9,
        }}>
          <div className="en" style={{
            width: 26, height: 26, borderRadius: 5, flexShrink: 0,
            background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 10, fontWeight: 700,
          }}>GC</div>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink-2)' }}>
            {lang === 'en' ? 'Legal Counsel' : 'ייעוץ משפטי'}
          </span>
        </div>

        {/* Divider */}
        <div style={{ borderTop: '1px solid #F3F4F6', marginBottom: 8 }} />

        {/* Bullet items */}
        {[
          lang === 'en' ? 'Commercial contracts & deal advisory' : 'חוזים מסחריים וליווי עסקאות',
          lang === 'en' ? 'RFP & partnerships'                  : 'שיתופי פעולה ו-RFP',
          lang === 'en' ? 'NDA & privacy agreements'            : 'הסכמי סודיות ופרטיות',
          lang === 'en' ? 'Fundraising & M&A'                   : 'סבבי השקעה ו-M&A',
        ].map((item, i, arr) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'flex-start', gap: 6,
            fontSize: 11.5, color: '#374151', lineHeight: 1.45,
            marginBottom: i < arr.length - 1 ? 4 : 0,
          }}>
            <span style={{ color: 'var(--turquoise-700)', fontWeight: 700, flexShrink: 0, marginTop: 1 }}>•</span>
            <span>{item}</span>
          </div>
        ))}
      </div>

      {/* DPO chip */}
      <Chip label="DPO" sub={lang === 'en' ? 'Privacy' : 'פרטיות'} color="purple"
        style={{ top: '22%', insetInlineStart: '22%' }} delay={2.4} />

      {/* REG chip */}
      <Chip label="REG" sub={lang === 'en' ? 'Compliance' : 'רגולציה'} color="orange"
        style={{ top: '58%', insetInlineStart: '8%' }} delay={2.6} />

      {/* "Deal moves forward" badge */}
      <div style={{
        position: 'absolute', bottom: 24, insetInlineEnd: 24,
        padding: '10px 14px', background: 'white', borderRadius: 10,
        border: '1px solid var(--border)', boxShadow: 'var(--shadow-md)',
        display: 'flex', alignItems: 'center', gap: 8,
        opacity: 0, animation: 'fadeIn 0.6s 2.8s forwards',
      }}>
        <div style={{
          width: 22, height: 22, borderRadius: '50%',
          background: 'var(--turquoise)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6.5 L5 9 L10 3" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-2)' }}>
          {lang === 'en' ? 'Deal moves forward' : 'העסקה ממשיכה'}
        </div>
      </div>

      <style>{`
        @keyframes drawPath { to { stroke-dashoffset: 0; } }
        @keyframes fadeIn   { to { opacity: 1; } }
        @keyframes chipIn   {
          from { opacity: 0; transform: translateY(-6px) scale(0.96); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>
  );
}

// Triggers section — 6 triggers in 3x2
const GC_TRIGGERS = [
  { num: '01', title: 'עסקה גדולה תקועה בגלל חוזה',
    desc: 'המשרד החיצוני לא יודע מה קריטי, ולוקח לו שבועיים לחזור אלייך.' },
  { num: '02', title: 'RFP ראשון לחברה גדולה',
    desc: 'מבלי שיעבירו אותך עורכי דין או משרדים.' },
  { num: '03', title: 'סבב השקעה או מכירת מניות',
    desc: 'מגייסים סיבוב ראשון, סבב גדול יותר, או דנים במכירת מניות. הסכמי מייסדים, Term Sheet, Due Diligence. "לא לקחת מישהו" זה פשוט סיכון.' },
  { num: '04', title: 'המשרד החיצוני יקר מדי או איטי מדי',
    desc: 'שגורמות להחמיץ את העסקה.' },
  { num: '05', title: 'יועמ"ש פנימי עמוס או בחל"ד',
    desc: 'לא רוצים לגייס עוד עורך דין אבל צריך תגבור אמיתי.' },
  { num: '06', title: 'עובדים בלי Playbook משפטי',
    desc: 'אוסף הסכמים שנכתבו על ידי אנשים שונים, אין סטנדרט, אין עמדה ברורה. כל חוזה הוא מחדש — וזה גוזל זמן לכולם.' },
];

function GCTriggers() {
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">מתי פונים אלינו</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="gc.triggers.title">הסיטואציות שבהן המשפט הופך למחסום.</ET>
          </h2>
          <ETBlock path="gc.triggers.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="triggers-grid">
          {GC_TRIGGERS.map((t, i) => (
            <div key={i} data-reveal data-delay={String(i + 1)} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 14, padding: 26,
              transition: 'all 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--turquoise)'}
            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
              <div className="en num" style={{
                fontSize: 13, fontWeight: 500, color: 'var(--turquoise-700)',
                letterSpacing: '0.04em', marginBottom: 12,
              }}>{t.num}</div>
              <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em', lineHeight: 1.35 }}>
                <ET path={`gc.triggers.${i}.title`}>{t.title}</ET>
              </h3>
              <ETBlock path={`gc.triggers.${i}.desc`} as="p" style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55 }}>
                {t.desc}
              </ETBlock>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .triggers-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 640px)  { .triggers-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Service inclusion — 2 columns
const GC_INCLUDED_LEFT = [
  'חוזי לקוחות, ספקים ושיתופי פעולה',
  'הסכמי SaaS, NDA והסכמי סודיות',
  'הסכמי העסקה ומדיניות HR בסיסית',
  'ייעוץ שוטף על שאלות עסקיות',
  'ניהול RFP-ים וניסוח תשובות לשאלוני ספקים',
  'Legal Pulse — עדכוני רגולציה רלוונטיים',
  'מסמך עבודה מותאם — עמדות, קווי אדום, סדרי עדיפויות',
  'משא ומתן מול הצד השני (כשצריך)',
];
const GC_INCLUDED_RIGHT = [
  'הסכמי מייסדים והקמת חברה',
  'סבבי השקעה — Term Sheet, SAFE, Due Diligence',
  'הסכמי מכירה ומכירת מניות',
  'הסכמי שותפות (Reseller, MSSP, Referral)',
  'ניהול corporate — דירקטוריון ובעלי מניות',
  'ליווי בתהליכי M&A',
  'כתיבת תקנונים ותנאי שימוש',
];

function GCIncluded() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">השירות</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="gc.included.title">ליווי משפטי מלא. תשלום על תוצרים, לא על שעות.</ET>
          </h2>
          <ETBlock path="gc.included.sub" as="p" style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            עבודה שוטפת כמו יועמ"ש פנימי, בלי לגייס אחד. משלמים על מה שנעשה בפועל: חוזה, סקר, ייעוץ, RFP. בלי הפתעות בחשבון ובלי ימים של המתנה.
          </ETBlock>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32,
        }} className="included-grid">
          <div data-reveal data-delay="1"><IncludedCol title="שירות שוטף" items={GC_INCLUDED_LEFT} accent="var(--turquoise-700)" pathPrefix="gc.includedA" /></div>
          <div data-reveal data-delay="2"><IncludedCol title="שירותים מתקדמים" items={GC_INCLUDED_RIGHT} accent="var(--blue-600)" pathPrefix="gc.includedB" /></div>
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) { .included-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function IncludedCol({ title, items, accent, pathPrefix }) {
  return (
    <div style={{
      background: 'white', border: '1px solid var(--border)',
      borderRadius: 16, padding: 28,
    }}>
      <div style={{
        fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
        color: accent, marginBottom: 14, textTransform: 'uppercase',
      }}>
        <ET path={`${pathPrefix}.title`}>{title}</ET>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: accent, marginTop: 9, flexShrink: 0 }} />
            <ET path={`${pathPrefix}.${i}`}>{it}</ET>
          </li>
        ))}
      </ul>
    </div>
  );
}

// Process — Playbook + 3 stages
function GCProcess() {
  const stages = [
    {
      n: '01', label: 'חד-פעמי',
      title: 'היכרות ומיפוי',
      desc: 'היכרות מעמיקה עם החברה, הלקוחות ומודל ההכנסות. מגדירים יחד את תחומי העבודה, סדרי העדיפויות, ואיך הצוות שלנו משתלב בתוך הצוות שלכם.',
      time: 'שבוע-שבועיים',
    },
    {
      n: '02', label: 'שוטף',
      title: 'עבודה שוטפת',
      desc: 'סקירה ועריכת חוזים, מענה לפניות, ישיבת סטטוס שבועית. כלי AI לסקירה ראשונית; כל תוצר עובר בדיקה ואחריות מלאה של הצוות שלנו.',
      time: 'מתמשך',
    },
    {
      n: '03', label: 'נקודתי',
      title: 'עליה לעסקאות מורכבות',
      desc: 'במידת הצורך אנחנו עולים לשיחות משא ומתן מול הצד השני. לא מסתכלים מהצד ולוקחים חלק פעיל בקידום העסקה.',
      time: 'לפי דרישה',
    },
  ];

  return (
    <section id="process" style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">השיטה</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            <ET path="gc.process.title">שלושה שלבים, עבודה ברורה ואחריות מלאה.</ET>
          </h2>
          <ETBlock path="gc.process.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="stages-grid">
          {stages.map((s, i) => (
            <div key={i} data-reveal data-delay={String(i + 1)} style={{
              background: 'white', border: '1px solid var(--border)',
              borderRadius: 16, padding: 28, display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                <div className="en num" style={{ fontSize: 36, fontWeight: 700, color: 'var(--turquoise-700)', letterSpacing: '-0.04em', lineHeight: 1 }}>{s.n}</div>
                <div style={{
                  padding: '4px 10px', background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                  borderRadius: 999, fontSize: 11.5, fontWeight: 500,
                }}>{s.label}</div>
              </div>
              <h3 style={{ fontSize: 19, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em' }}>
                <ET path={`gc.process.${i}.title`}>{s.title}</ET>
              </h3>
              <ETBlock path={`gc.process.${i}.desc`} as="p" style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55, marginBottom: 18 }}>
                {s.desc}
              </ETBlock>
              <div style={{
                marginTop: 'auto', paddingTop: 14, borderTop: '1px solid var(--border-2)',
                fontSize: 12.5, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.4"/><path d="M8 5v3l2 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
                <ET path={`gc.process.${i}.time`}>{s.time}</ET>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .stages-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// Typewriter component — types text char-by-char after parent [data-reveal] is revealed
function TypeWriter({ text, subText }) {
  const [count, setCount] = React.useState(0);
  const [done, setDone]   = React.useState(false);
  const ref     = React.useRef(null);
  const started = React.useRef(false);

  React.useEffect(() => {
    const parent = ref.current?.closest('[data-reveal]');
    if (!parent) return;

    function start() {
      if (started.current) return;
      started.current = true;
      let i = 0;
      const id = setInterval(() => {
        i++;
        setCount(i);
        if (i >= text.length) { clearInterval(id); setDone(true); }
      }, 28);
    }

    const fire = () => { if (parent.classList.contains('revealed')) setTimeout(start, 950); };
    fire();
    const obs = new MutationObserver(fire);
    obs.observe(parent, { attributes: true, attributeFilter: ['class'] });
    return () => obs.disconnect();
  }, [text]);

  return (
    <span ref={ref} style={{ color: 'var(--turquoise-700)', fontWeight: 600 }}>
      {text.substring(0, count)}
      {!done && <span className="type-cursor" />}
      {done && subText && (
        <><br/><span style={{ color: 'var(--muted)', fontWeight: 400, fontSize: 13.5 }}>{subText}</span></>
      )}
    </span>
  );
}

// Comparison — authentic Word track-changes: wavy SVG strike + typewriter insertion.
function GCCompare() {
  useScrollReveal();
  const clauses = [
    {
      label: 'עלות',
      bad:     'שכר טרחה לפי שעה',
      good:    'עלות קבועה לפי תוצרים',
      goodSub: 'חוזה, סקר, RFP. לא לפי שעה.',
    },
    {
      label: 'זמן מענה',
      bad:     '"נחזור אליכם בהקדם"',
      good:    'מהיר',
      goodSub: 'לפי הצורך שלכם, לא לפי לוח הזמנים שלנו.',
    },
    {
      label: 'היכרות',
      bad:  'מסבירים מחדש בכל פגישה',
      good: 'מכירים את החברה לעומק. לא מסבירים מחדש אף פעם.',
    },
    {
      label: 'גישה',
      bad:  'מרחיקים סיכונים מיותרים',
      good: 'עסקית, יודעים איך לקדם את החברה שלכם קדימה.',
    },
    {
      label: 'תיעוד',
      bad:  '"המסמכים שמורים אצלנו"',
      good: 'מסמך עבודה מותאם לחברה נשאר אצלכם.',
    },
  ];

  return (
    <section className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">המודל</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em' }}>
            <ET path="gc.compare.title">חמישה דברים שאנחנו עושים אחרת.</ET>
          </h2>
        </div>

        {/* Paper document — no fake OS chrome, just a clean sheet */}
        <div data-reveal data-delay="1" style={{
          maxWidth: 740,
          margin: '0 auto',
          background: 'white',
          boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 8px 36px rgba(0,0,0,0.10)',
          borderRadius: 2,
          overflow: 'hidden',
        }}>

          {/* Minimal header */}
          <div style={{
            background: '#F9FAFB',
            borderBottom: '1px solid #E5E7EB',
            padding: '10px 32px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <span className="en" style={{ fontSize: 11.5, color: '#6B7280', fontWeight: 500 }}>
              engagement-model.docx
            </span>
            <span style={{
              fontSize: 9.5, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase',
              color: '#991B1B', background: '#FEF2F2',
              border: '1px solid #FECACA',
              padding: '2px 8px', borderRadius: 3,
            }}>Track Changes · On</span>
          </div>

          {/* Document body */}
          <div className="gc-compare-body" style={{ padding: '32px 36px 28px', fontFamily: 'inherit' }}>

            {/* Document title */}
            <div style={{ marginBottom: 24, paddingBottom: 16, borderBottom: '1px solid #F3F4F6', textAlign: 'center' }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: '#111827', letterSpacing: '0.02em', fontFamily: 'inherit' }}>
                מודל שיתוף פעולה — Lawyerit
              </div>
              <div style={{ fontSize: 10.5, color: '#9CA3AF', marginTop: 4, fontFamily: 'inherit' }}>
                5 שינויים מסומנים · נערך על ידי Lawyerit
              </div>
            </div>

            {/* Clauses */}
            {clauses.map((c, i) => (
              <div key={i}
                data-reveal data-delay={String(i + 2)}
                style={{
                  display: 'flex',
                  gap: 14,
                  paddingBottom: i < clauses.length - 1 ? 18 : 0,
                  marginBottom: i < clauses.length - 1 ? 18 : 0,
                  borderBottom: i < clauses.length - 1 ? '1px solid #F3F4F6' : 'none',
                }}
              >
                {/* Revision bar — right side in RTL */}
                <div style={{
                  width: 3, flexShrink: 0,
                  background: '#DC2626', borderRadius: 2,
                  alignSelf: 'stretch', minHeight: 24,
                }} />

                <div style={{ flex: 1 }}>
                  <div style={{
                    fontSize: 9.5, fontWeight: 700, letterSpacing: '0.09em',
                    textTransform: 'uppercase', color: '#9CA3AF', marginBottom: 7,
                    fontFamily: 'inherit',
                  }}>{c.label}</div>

                  <div style={{ fontSize: 15, lineHeight: 1.7, fontFamily: 'inherit' }}>
                    {/* Deleted — red italic text + line draws right→left, then text fades gray */}
                    <span className="strike-wrap">
                      <span className="strike-text" style={{ fontFamily: 'David, "David CLM", "FrankRuehl CLM", serif' }}>{c.bad}</span>
                      <span className="strike-line" />
                    </span>
                    {'  '}
                    {/* Inserted — typewriter animation in brand turquoise */}
                    <TypeWriter text={c.good} subText={c.goodSub} />
                  </div>
                </div>
              </div>
            ))}

            {/* Footer */}
            <div style={{
              marginTop: 20, paddingTop: 14,
              borderTop: '1px solid #F3F4F6',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: 'inherit',
            }}>
              <div>
                <div style={{ fontSize: 11, color: '#9CA3AF' }}>5 שינויים ממתינים לאישור</div>
              </div>
              <a
                href="https://www.cal.eu/lawyer-it/30min"
                target="_blank"
                rel="noopener noreferrer"
                className="gc-accept-btn"
              >
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
                  <path d="M2 7L5.5 10.5L12 3.5" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <span>
                  קבל את כל השינויים
                  <span className="gc-accept-sub">לתאם שיחה של 30 דקות</span>
                </span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .gc-accept-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: var(--turquoise);
          color: #0A2A2A;
          font-family: inherit;
          font-size: 14.5px;
          font-weight: 700;
          padding: 11px 20px;
          border-radius: 8px;
          text-decoration: none;
          transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
          white-space: nowrap;
          cursor: pointer;
          box-shadow: 0 2px 10px rgba(71,203,203,0.25);
        }
        .gc-accept-btn:hover {
          background: var(--turquoise-600);
          box-shadow: 0 6px 22px rgba(71,203,203,0.4);
          transform: translateY(-1px);
        }
        .gc-accept-sub {
          display: block;
          font-size: 11px;
          font-weight: 400;
          color: #0A2A2A;
          opacity: 0.65;
          margin-top: 1px;
        }
        @media (max-width: 600px) {
          .gc-compare-body { padding: 24px 20px 20px !important; }
        }
      `}</style>
    </section>
  );
}
function cellHeader() { return { padding: '18px 20px', fontSize: 14, fontWeight: 600, color: 'var(--ink-2)' }; }
function cellLabel() { return { padding: '16px 20px', fontSize: 14, fontWeight: 500, color: 'var(--ink-2)', borderInlineEnd: '1px solid var(--border-2)' }; }
function cell() { return { padding: '16px 20px', fontSize: 14, color: 'var(--muted)', lineHeight: 1.5, borderInlineEnd: '1px solid var(--border-2)' }; }

// Why me — In-House background
function GCWhyMe() {
  const creds = [
    'LL.B אוניברסיטת תל אביב',
    'התמחות בפישר בכר — ליטיגציה מסחרית',
    'פירון — מחלקת פרטיות והייטק',
    'Gilead Sciences — משפט מסחרי ופרטיות',
    'ניהול מחלקה משפטית בחברת סייבר — 4 שנים',
    'DPO ו-CISO מוסמכים',
  ];
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 60,
      }} className="whyme-grid">
        <div data-reveal>
          <div className="eyebrow">הרקע</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 24 }}>
            <ET path="gc.whyme.title">ניסיון In-House. זה מה שעושה את ההבדל.</ET>
          </h2>
          <ETBlock path="gc.whyme.p1" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-2)', marginBottom: 18 }}>
            Lawyerit לא נבנה על ידי מי שראה חברות מהצד או ניהל אותם מהקומה ה-14 במשרד עורכי הדין. המייסדת עבדה במחלקות משפטיות בחברות, ניהלה מחלקה משפטית בחברת סייבר במשך שנים: ישיבות בשולחן מקבלי ההחלטות, ניהול מכרזים, עבודה צמודה עם מכירות ושיווק, הסכמים מול שותפים בינלאומיים, ולקיחת הסיכונים המחושבים שהעסקה דרשה.
          </ETBlock>
          <ETBlock path="gc.whyme.p2" as="p" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--muted)' }}>
            זה ההבדל בין מי שיודע איך חוזה SaaS אמור להיראות, לבין מי שיודע מה באמת תופס בעסקה, מה ניתן למשא ומתן, ואיפה המשרד של הצד השני יוותר אם יודעים איך לבקש.
          </ETBlock>
        </div>
        <div data-reveal data-delay="2" 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={`gc.whyme.cred${i}`}>{c}</ET>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .whyme-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

// FAQ — accordion
const GC_FAQ = [
  { q: 'מה זה יועצת משפטית כשירות (Fractional GC)?',
    a: 'יועצת משפטית כשירות היא פתרון לחברות שצריכות ליווי משפטי שוטף — בלי להחזיק יועצת משפטית במשרה מלאה. החל מחוזים ועסקאות ועד RFPs וייעוץ יומיומי, המודל מעניק לחברה ליווי משפטי זמין, עסקי ומעשי, שמשתלב בעבודה השוטפת של הצוותים וההנהלה. זהו שילוב בין החשיבה והזמינות של יועצת פנימית לבין הגמישות של משרד חיצוני — במודל שמתאים לחברות טכנולוגיה וסטארטאפים בצמיחה, במיוחד בשלבי Series A. ואם במקביל צריך גם DPO או קצין ציות — זה אצלנו, אין צורך בספק נוסף.' },
  { q: 'כמה עולה השירות? מה מודל התמחור?',
    a: 'אנחנו מאמינים בתמחור ברור והוגן, שמבוסס על העבודה והערך שניתנים בפועל ולא על חיוב שעתי בלתי צפוי. בשיחת היכרות נבין את הצרכים שלכם ונבנה מודל תמחור שמתאים להיקף הפעילות ולשלב הצמיחה של החברה.' },
  { q: 'האם אפשר להשתמש בשירות באופן נקודתי?',
    a: 'כן. לא כל חברה צריכה ליווי משפטי שוטף בכל שלב. אפשר להיעזר בנו גם בפרויקטים נקודתיים — כמו ניסוח הסכם SaaS, סקר GDPR, הכנה לסבב השקעה או בניית Playbook משפטי — ולסיים שם. חברות רבות מתחילות בפרויקט ממוקד, ובהמשך עוברות לליווי שוטף כשהפעילות גדלה והצרכים המשפטיים מתרחבים.' },
  { q: 'מה ההבדל בין Lawyerit למשרד עורכי דין גדול?',
    a: 'שלושה הבדלים מרכזיים: תמחור — משלמים על תוצרים וליווי בפועל, לא על שעון רץ וחיוב לפי שעות. מהירות — מענה מהיר וזמין, במקום להמתין ימים או שבועות לתשובה. גישה — ייעוץ משפטי שמבין עסקים ומקדם עסקאות, במקום להתמקד רק בהגנה משפטית וברשימות הערות אינסופיות.' },
  { q: 'יש לי כבר משרד עורכי דין שמלווה אותי. האם Lawyerit מחליף אותו?',
    a: 'ממש לא. בפועל, הרבה חברות עובדות איתנו במקביל למשרד גדול. Lawyerit מטפלת בעבודה היומיומית — חוזים מסחריים, NDA-ים, RFP-ים וליווי שוטף של הצוותים — בעוד שמשרדים גדולים נשארים מעורבים בתחומים נקודתיים כמו ליטיגציה, עסקאות M&A או גיוסי הון מורכבים. כך החברה מקבלת מענה משפטי זמין ועסקי יותר ביומיום, בלי לשלם תעריפים של משרד גדול על כל משימה שוטפת.' },
  { q: 'אתם עוסקים גם בדיני עבודה, נדל"ן, ליטיגציה?',
    a: 'אנחנו מאמינים בליווי שהוא חלק אמיתי מהצוות שלכם. המטרה שלנו היא להיות זמינים, מעורבים ופרקטיים — ולא להשאיר אתכם בלי מענה או להפנות אתכם הלאה כי "זה לא בתחום שלנו". אפשר לפנות אלינו עם כל שאלה משפטית או רגולטורית, ואנחנו נדאג למצוא את הפתרון הנכון.' },
];

function FAQAccordion({ items, pathPrefix }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{
      background: 'white', border: '1px solid var(--border)',
      borderRadius: 16, overflow: 'hidden',
    }}>
      {items.map((it, i) => (
        <div key={i} style={{ borderTop: i ? '1px solid var(--border-2)' : 'none' }}>
          <button
            onClick={() => setOpen(open === i ? -1 : i)}
            style={{
              width: '100%', padding: '22px 24px',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
              background: 'transparent', border: 'none', cursor: 'pointer',
              fontFamily: 'inherit', textAlign: 'start', direction: 'rtl',
            }}
          >
            <span style={{ fontSize: 16.5, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>
              <ET path={`${pathPrefix}.${i}.q`}>{it.q}</ET>
            </span>
            <span style={{
              width: 28, height: 28, 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="12" height="12" viewBox="0 0 12 12" style={{ transform: open === i ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.2s' }}>
                <path d="M6 2v8M2 6h8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
              </svg>
            </span>
          </button>
          {open === i && (
            <div style={{ padding: '0 24px 24px' }}>
              <ETBlock path={`${pathPrefix}.${i}.a`} as="p" style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.65 }}>
                {it.a}
              </ETBlock>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function GCFaq() {
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow">שאלות נפוצות</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 16 }}>
            <ET path="gc.faq.title">מה מנכ"לים שואלים בשיחת ההיכרות.</ET>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.65 }}>
            לא מצאתם תשובה? שיחת ההיכרות הראשונה ללא עלות.
          </p>
        </div>
        <div data-reveal data-delay="1"><FAQAccordion items={GC_FAQ} pathPrefix="gc.faq" /></div>
      </div>
    </section>
  );
}

function PageCTA({ title, sub, pathPrefix }) {
  return (
    <section id="contact" style={{
      padding: '100px 0',
      background: 'linear-gradient(135deg, #2FB5B5 0%, #47CBCB 100%)',
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <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.5,
      }} />
      <div className="container" style={{ position: 'relative', textAlign: 'center', maxWidth: 720 }}>
        <h2 style={{
          fontSize: 'clamp(32px, 4vw, 48px)',
          fontWeight: 700, letterSpacing: '-0.03em',
          marginBottom: 18, lineHeight: 1.12,
        }}>
          <ET path={`${pathPrefix}.title`}>{title}</ET>
        </h2>
        <ETBlock path={`${pathPrefix}.sub`} as="p" style={{
          fontSize: 18, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.88)', marginBottom: 32, maxWidth: 580, marginInline: 'auto',
        }}>
          {sub}
        </ETBlock>
        <a href="https://www.cal.eu/lawyer-it/30min" target="_blank" rel="noopener noreferrer"
          className="btn btn-lg"
          style={{
            background: '#0F1115', color: '#fff',
            padding: '16px 32px', paddingInlineEnd: 50,
            fontSize: 16, borderRadius: 12,
            position: 'relative', transition: 'transform 0.2s, box-shadow 0.2s',
          }}
          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'; }}
        >
          <ET path={`${pathPrefix}.cta`}>קביעת שיחת היכרות</ET>
          <svg width="16" height="16" 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>
    </section>
  );
}

Object.assign(window, {
  GCBreadcrumb, GCHero, GCTriggers, GCIncluded, GCProcess,
  GCCompare, GCWhyMe, GCFaq, PageCTA, FAQAccordion,
});
