// Startups Page — AI-assisted legal for hi-tech & startups (bilingual HE/EN via t())

function useStartupsReveal() {
  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 StartupsBreadcrumb() {
  const lang = useLang();
  return (
    <div className="container" style={{ paddingTop: 20, paddingBottom: 12, fontSize: 13, color: 'var(--muted)' }}>
      <a href="Lawyerit Homepage.html" style={{ color: 'var(--muted)' }}>{t(lang, 'דף הבית', 'Home')}</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <a href="Lawyerit Homepage.html#services" style={{ color: 'var(--muted)' }}>{t(lang, 'שירותים', 'Services')}</a>
      <span style={{ margin: '0 8px', color: 'var(--border)' }}>/</span>
      <span style={{ color: 'var(--ink-2)' }}>{t(lang, 'לסטארטאפים', 'For Startups')}</span>
    </div>
  );
}

function StartupsHero() {
  useStartupsReveal();
  const lang = useLang();
  return (
    <section style={{ paddingTop: 40, paddingBottom: 100 }}>
      <div className="container startups-hero-grid" style={{
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 60, alignItems: 'center',
      }}>
        <div>
          <div className="eyebrow fade-up">{t(lang, 'לחברות הייטק וסטארטאפים', 'For hi-tech companies & startups')}</div>
          <h1 className="fade-up fade-up-d1" style={{
            fontSize: 'clamp(38px, 5vw, 60px)', fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.035em', marginBottom: 22,
          }}>
            {t(lang, 'חוזה אחד לא צריך לעצור ', "One contract shouldn't hold up your ")}
            <span style={{ color: 'var(--turquoise-700)' }}>{t(lang, 'עסקה שלמה', 'whole deal')}</span>
            {t(lang, '.', '.')}
          </h1>
          <p className="fade-up fade-up-d2" style={{
            fontSize: 18.5, lineHeight: 1.6, color: 'var(--muted)', maxWidth: 580, marginBottom: 20,
          }}>
            {t(lang,
              'הסכמי SaaS, הסכמים עם לקוחות ו-order forms — נבחנים לפי הכללים המסחריים שלכם והמומחיות המשפטית שלנו, עם חתימת עו"ד. המחלקה המשפטית שאתם לא צריכים לגייס.',
              "SaaS agreements, customer contracts and order forms — reviewed against your commercial rules and our legal expertise, with an attorney's sign-off. The legal team you don't have to hire.")}
          </p>
          <p className="fade-up fade-up-d2" style={{
            fontSize: 14, lineHeight: 1.5, color: 'var(--ink-2)', maxWidth: 540, marginBottom: 34,
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <span style={{ color: 'var(--turquoise-700)', fontWeight: 700 }}>✓</span>
            {t(lang,
              'משרד שנבנה מתוך ניסיון של ניהול מחלקות משפטיות בהייטק.',
              'Built and run by attorneys who led in-house legal teams in hi-tech.')}
          </p>
          <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)'; }}
            >
              {t(lang, 'קבעו שיחה', 'Book a call')}
              <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="#how" className="btn btn-outline btn-lg">{t(lang, 'איך זה עובד?', 'How it works')}</a>
          </div>
        </div>

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

function StartupsHeroVisual() {
  const lang = useLang();
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 460, marginInlineStart: 'auto' }}>
      <div className="dot-grid" style={{
        position: 'absolute', inset: -20, borderRadius: 24, opacity: 0.6,
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }} />

      <div style={{
        position: 'relative', background: 'white', border: '1px solid var(--border)',
        borderRadius: 10, boxShadow: '0 1px 2px rgba(0,0,0,0.06), 0 12px 40px rgba(0,0,0,0.10)',
        padding: '22px 24px 26px',
        opacity: 0, animation: 'suFade 0.6s 0.3s forwards',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16, paddingBottom: 12, borderBottom: '1px solid #F3F4F6' }}>
          <span className="en" style={{ fontSize: 11.5, color: '#6B7280', fontWeight: 500 }}>service-agreement.docx</span>
          <span style={{
            fontSize: 9.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
            color: 'var(--turquoise-700)', background: 'var(--turquoise-50)',
            border: '1px solid var(--turquoise-50)', padding: '2px 8px', borderRadius: 3,
          }}>{t(lang, 'נבדק מול הכללים שלכם', 'Checked vs. your rules')}</span>
        </div>

        {[100, 88, 72].map((w, i) => (
          <div key={i} style={{ height: 8, width: w + '%', borderRadius: 4, background: '#EEF0F2', marginBottom: 12 }} />
        ))}
        <div style={{ marginBottom: 12 }}>
          <div style={{ height: 8, width: '94%', borderRadius: 4, background: 'var(--turquoise-50)', border: '1px solid #CDEDED' }} />
        </div>
        {[80, 60].map((w, i) => (
          <div key={i} style={{ height: 8, width: w + '%', borderRadius: 4, background: '#EEF0F2', marginBottom: 12 }} />
        ))}

        <div style={{
          marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 7,
          background: '#FFF7ED', border: '1px solid #FED7AA', borderRadius: 7,
          padding: '7px 11px', fontSize: 12, color: '#9A3412',
          opacity: 0, animation: 'suFade 0.6s 1s forwards',
        }}>
          <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="#EA580C" strokeWidth="1.4" strokeLinejoin="round"/></svg>
          {t(lang, 'קו אדום — הגבלת אחריות חסרה', 'Red line — liability cap missing')}
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: -18, insetInlineStart: -14,
        background: 'white', borderRadius: 12, border: '1px solid var(--border)',
        boxShadow: 'var(--shadow-md)', padding: '11px 15px',
        display: 'flex', alignItems: 'center', gap: 10, zIndex: 5,
        opacity: 0, animation: 'suFade 0.6s 1.5s forwards',
      }}>
        <div style={{
          width: 30, height: 30, borderRadius: '50%', background: 'var(--turquoise)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
        }}>
          <svg width="15" height="15" viewBox="0 0 12 12"><path d="M2 6.5 L5 9 L10 3" stroke="white" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div>
          <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink-2)' }}>{t(lang, 'אושר על ידי עו"ד', 'Attorney-approved')}</div>
          <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{t(lang, 'מוכן לחתימה', 'Ready to sign')}</div>
        </div>
      </div>

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

const SU_PAIN = [
  { num: '01', he: ['אין מחלקה משפטית', 'כל חוזה נופל על המייסד או על מי שקיבל אותו, והוא מתחיל להתנהל מול גורמים חיצוניים.'],
    en: ['No legal team', 'Every contract lands on the founder — or whoever received it — who ends up dealing with outside parties.'] },
  { num: '02', he: ['ההסכם לא מתאים', 'חוזרות המון הערות, והמשא ומתן נמשך ימים.'],
    en: ["The agreement doesn't fit", 'Comments pile up, and the negotiation drags on for days.'] },
  { num: '03', he: ['עו"ד חיצוני', 'יקר, איטי, ומתמחר בשעות — ולפעמים גורם להחמיץ את העסקה.'],
    en: ['Outside counsel', 'Expensive, slow, and billed by the hour — sometimes costing you the deal.'] },
  { num: '04', he: ['צמיחה גלובלית', 'אתם גדלים מהר, וההסכמים לא מדביקים את הקצב.'],
    en: ['Global growth', "You're scaling fast, and the paperwork can't keep up."] },
];

function StartupsPain() {
  const lang = useLang();
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">{t(lang, 'מוכר לכם?', 'Sound familiar?')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            {t(lang, 'המקומות שבהם המשפט הופך למחסום.', 'Where legal turns into a bottleneck.')}
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            {t(lang,
              'אתם לא מחפשים "מחלקה משפטית". אתם מחפשים דרך לגרום לעסק לזוז מהר יותר — בלי לסכן את החברה בדרך.',
              "You're not looking for a “legal department.” You're looking to move faster — without putting the company at risk.")}
          </p>
        </div>
        <div className="su-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {SU_PAIN.map((c, i) => {
            const [title, desc] = t(lang, c.he, c.en);
            return (
              <div key={i} data-reveal data-delay={String(i + 1)} style={{
                background: 'white', border: '1px solid var(--border)', borderRadius: 14, padding: 24, 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 }}>{c.num}</div>
                <h3 style={{ fontSize: 16.5, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em', lineHeight: 1.35 }}>{title}</h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>{desc}</p>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .su-grid-4 { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 560px) { .su-grid-4 { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const SU_STEPS = [
  { n: '01', he: ['המסמך נכנס', 'כל הסכם שמגיע אליכם — הסכם SaaS, הסכם עם לקוח, order form — נכנס למערכת.'],
    en: ['The document comes in', 'Every agreement you receive — a SaaS agreement, a customer contract, an order form — enters the system.'] },
  { n: '02', he: ['בדיקה לפי הכללים שלכם', 'ה-AI בוחן אותו לפי הכללים המסחריים שהגדרתם והמומחיות המשפטית שלנו — מה חשוב לכם, מה מקובל, מה קו אדום.'],
    en: ['Checked against your rules', 'The AI reviews it against the commercial rules you set and our legal expertise — what matters to you, what’s acceptable, what’s a red line.'] },
  { n: '03', he: ['הערות או חתימה', 'יש הערות → redline מסומן. נקי → מוכן לחתימה.'],
    en: ['Comments or signature', 'Comments needed → a marked redline. Clean → ready to sign.'] },
  { n: '04', he: ['עו"ד מאשרת. תמיד.', 'עורכת דין מהצוות עוברת ומאשרת כל מסמך לפני שהוא יוצא.'],
    en: ['An attorney approves. Always.', 'An attorney on the team reviews and approves every document before it goes out.'] },
];

function StartupsHow() {
  const lang = useLang();
  return (
    <section id="how" className="section">
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 48 }}>
          <div className="eyebrow">{t(lang, 'איך זה עובד', 'How it works')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            {t(lang, 'מסמך נכנס. עו"ד מאשרת. אתם ממשיכים.', 'A document comes in. An attorney signs off. You move on.')}
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            {t(lang,
              'אתם נוגעים בהסכם רק כשחשוב — בהחלטה אסטרטגית או לפני חתימה.',
              'You only touch a contract when it matters — a strategic decision, or right before signing.')}
          </p>
        </div>
        <div className="su-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {SU_STEPS.map((s, i) => {
            const [title, desc] = t(lang, s.he, s.en);
            return (
              <div key={i} data-reveal data-delay={String(i + 1)} style={{
                background: 'white', border: '1px solid var(--border)', borderRadius: 16, padding: 26, display: 'flex', flexDirection: 'column',
              }}>
                <div className="en num" style={{ fontSize: 34, fontWeight: 700, color: 'var(--turquoise-700)', letterSpacing: '-0.04em', lineHeight: 1, marginBottom: 16 }}>{s.n}</div>
                <h3 style={{ fontSize: 17.5, fontWeight: 600, marginBottom: 10, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{title}</h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>{desc}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function StartupsSafe() {
  const lang = useLang();
  return (
    <section style={{ background: 'var(--bg-2)', padding: '70px 0' }}>
      <div className="container">
        <div data-reveal style={{
          background: 'white', border: '1px solid var(--border)', borderRadius: 20,
          padding: '44px 48px', display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap',
        }}>
          <div style={{
            width: 64, height: 64, borderRadius: 16, flexShrink: 0,
            background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg width="30" height="30" viewBox="0 0 24 24" fill="none"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M8.5 12l2.5 2.5L15.5 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div style={{ flex: 1, minWidth: 280 }}>
            <h2 style={{ fontSize: 'clamp(24px, 2.4vw, 32px)', letterSpacing: '-0.02em', marginBottom: 10 }}>
              {t(lang, 'מהירות של AI. אחריות של עורכת דין.', 'The speed of AI. The accountability of an attorney.')}
            </h2>
            <p style={{ fontSize: 16.5, color: 'var(--muted)', lineHeight: 1.6 }}>
              {t(lang,
                'זה לא רובוט משוחרר. כל הסכם עובר אישור של עו"ד מהצוות שלנו לפני שהוא יוצא.',
                'This isn’t an unsupervised robot. Every agreement is approved by an attorney on our team before it goes out.')}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function StartupsValue() {
  const lang = useLang();
  return (
    <section className="section">
      <div className="container" style={{ maxWidth: 820, textAlign: 'center' }}>
        <div data-reveal>
          <div className="eyebrow" style={{ justifyContent: 'center' }}>{t(lang, 'הערך האמיתי', 'The real value')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3.4vw, 44px)', letterSpacing: '-0.03em', marginBottom: 20 }}>
            {t(lang, 'הזמן שלנו עובר לאסטרטגיה.', 'Our time shifts to strategy.')}
          </h2>
          <p style={{ fontSize: 19, color: 'var(--muted)', lineHeight: 1.65, marginInline: 'auto' }}>
            {t(lang,
              'כשה-AI לוקח על עצמו את העבודה החוזרת, הזמן המשפטי שלנו מתפנה למה שבאמת מזיז אתכם: ייעוץ עסקי-משפטי אסטרטגי, ומענה מהיר ביום-יום. אנחנו לא עוד גורם שכותב הסכמים — אנחנו שותפה שחושבת אתכם על ההחלטות הגדולות.',
              'When the AI takes on the repetitive work, our legal time is freed for what actually moves you forward: strategic business-legal advice, and fast day-to-day responsiveness. We’re not just another party drafting agreements — we’re a partner thinking alongside you on the big decisions.')}
          </p>
        </div>
      </div>
    </section>
  );
}

const SU_COVERED = [
  ['הסכמי סודיות (NDA)', 'NDAs'],
  ['Order forms', 'Order forms'],
  ['הסכמי עיבוד מידע (DPA)', 'Data processing agreements (DPA)'],
  ['הסכמי ספקים', 'Vendor agreements'],
  ['תנאי שימוש', 'Terms of use'],
  ['הסכמי שירות (SaaS)', 'SaaS agreements'],
];

function StartupsCovered() {
  const lang = useLang();
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow">{t(lang, 'מה מכוסה', "What's covered")}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            {t(lang, 'כל ההסכמים שרצים אצלכם ביום-יום.', 'Every agreement that runs through your day-to-day.')}
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            {t(lang,
              'ובמידת הצורך — GC ו-DPO כשירות שוטף מאחורי הכל. לא כלי לבדיקת חוזים; מחלקה משפטית מלאה.',
              'And when needed — GC and DPO as an ongoing service behind it all. Not a contract-review tool; a full legal department.')}
          </p>
        </div>
        <div data-reveal data-delay="1" className="su-covered-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {SU_COVERED.map((c, i) => (
            <div key={i} style={{
              background: 'white', border: '1px solid var(--border)', borderRadius: 12,
              padding: '18px 20px', display: 'flex', alignItems: 'center', gap: 12,
              fontSize: 15.5, fontWeight: 500, color: 'var(--ink-2)',
            }}>
              <div style={{
                width: 20, height: 20, borderRadius: 6, flexShrink: 0,
                background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="11" height="11" viewBox="0 0 10 10"><path d="M2 5.5 L4 7.5 L8 3" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
              </div>
              {t(lang, c[0], c[1])}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) { .su-covered-grid { grid-template-columns: repeat(2, 1fr) !important; } }
        @media (max-width: 480px) { .su-covered-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const SU_START = [
  { he: ['הסכם מייסדים', 'מסדיר ביניכם את מה שקשה לדבר עליו אחר כך.'],
    en: ["Founders' agreement", "Settles between you what's hard to talk about later."] },
  { he: ['NDA', 'לשיחות עם משקיעים, מועמדים ושותפים.'],
    en: ['NDA', 'For conversations with investors, candidates and partners.'] },
  { he: ['תקנון ותנאי שימוש', 'לפעילות ולאתר.'],
    en: ['Terms & conditions', 'For your operations and your website.'] },
  { he: ['מדיניות פרטיות לאתר', 'כפי שהחוק דורש.'],
    en: ['Website privacy policy', 'As the law requires.'] },
];

function StartupsStart() {
  const lang = useLang();
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow">{t(lang, 'רק התחלתם?', 'Just getting started?')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 14 }}>
            {t(lang, 'נבנה את הבסיס יחד.', "Let's build the foundation together.")}
          </h2>
          <p style={{ fontSize: 17, color: 'var(--muted)', lineHeight: 1.6 }}>
            {t(lang,
              'לפני שיש עסקאות לבחון, יש בסיס משפטי שחייב להיות מסודר מהיום הראשון. אנחנו בונים אתכם את מסמכי הליבה:',
              'Before there are deals to review, there’s a legal foundation that has to be in order from day one. We build your core documents:')}
          </p>
        </div>
        <div className="su-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginBottom: 32 }}>
          {SU_START.map((d, i) => {
            const [title, desc] = t(lang, d.he, d.en);
            return (
              <div key={i} data-reveal data-delay={String(i + 1)} style={{
                background: 'white', border: '1px solid var(--border)', borderRadius: 14, padding: 24,
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10, marginBottom: 16,
                  background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M6 3h8l4 4v14H6V3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/><path d="M14 3v4h4" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>
                </div>
                <h3 style={{ fontSize: 16.5, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.01em' }}>{title}</h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.55 }}>{desc}</p>
              </div>
            );
          })}
        </div>
        <p data-reveal style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6 }}>
          {t(lang,
            'בסיס נקי שתגדלו עליו — ואנחנו כבר שם כשמגיעים ההסכמים הראשונים.',
            'A clean foundation to grow on — and we’re already there when the first agreements arrive.')}
        </p>
      </div>
    </section>
  );
}

const SU_WHY = [
  { he: ['דין ישראלי בשפה שלכם', 'לא תבנית אמריקאית — הדין המקומי שבאמת חל עליכם.'],
    en: ['Israeli-law expertise', 'Not an off-the-shelf American template — the local law that actually applies to you.'] },
  { he: ['עומק פרטיות ורגולציה', 'חוק הגנת הפרטיות, GDPR, וה-AI Act.'],
    en: ['Deep privacy & regulation', 'Israeli Privacy Law, GDPR, and the AI Act.'] },
  { he: ['עו"ד עם שם ופנים', 'צוות עם ניסיון in-house בהייטק שמאשר — לא מנוע אנונימי.'],
    en: ['Named, accountable attorneys', 'A team with in-house hi-tech experience signs off — not a faceless engine.'] },
  { he: ['תמחור צפוי', 'משלמים על מה שנעשה בפועל, לא לפי שעות.'],
    en: ['Predictable pricing', 'You pay for what’s actually done, not by the hour.'] },
];

function StartupsWhy() {
  const lang = useLang();
  return (
    <section style={{ background: 'var(--bg-2)', padding: '90px 0' }}>
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 44 }}>
          <div className="eyebrow">{t(lang, 'למה אנחנו', 'Why us')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em' }}>
            {t(lang, 'למה דווקא אנחנו.', 'Why us, specifically.')}
          </h2>
        </div>
        <div className="su-why-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {SU_WHY.map((w, i) => {
            const [title, desc] = t(lang, w.he, w.en);
            return (
              <div key={i} data-reveal data-delay={String(i + 1)} style={{
                background: 'white', border: '1px solid var(--border)', borderRadius: 14,
                padding: 26, display: 'flex', gap: 16, alignItems: 'flex-start',
              }}>
                <div style={{
                  width: 34, height: 34, borderRadius: 9, flexShrink: 0,
                  background: 'var(--turquoise-50)', color: 'var(--turquoise-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <svg width="16" height="16" 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>
                <div>
                  <h3 style={{ fontSize: 17, fontWeight: 600, marginBottom: 7, letterSpacing: '-0.01em' }}>{title}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.55 }}>{desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) { .su-why-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

const SU_FAQ = [
  { he: ['ה-AI מחליף עורך דין?', 'לא — הוא מזרז. ה-AI עושה את הבדיקה הראשונית והסימון, אבל כל הסכם מאושר על ידי עו"ד מהצוות לפני שהוא יוצא. מהירות של AI, אחריות של עורכת דין.'],
    en: ['Does the AI replace a lawyer?', 'No — it speeds things up. The AI does the first-pass review and markup, but every agreement is approved by an attorney on the team before it goes out. The speed of AI, the accountability of a lawyer.'] },
  { he: ['כמה זמן זה לוקח?', 'מהר — בלי לחכות שבועות למענה. רוב ההסכמים חוזרים אליכם מוכנים להחלטה בזמן קצר.'],
    en: ['How long does it take?', 'Fast — no waiting weeks for a reply. Most agreements come back to you ready for a decision quickly.'] },
  { he: ['איך מתחילים?', 'שיחת היכרות של 30 דקות. מגדירים יחד את הכללים המסחריים שלכם — מה חשוב לכם, מה מקובל, מה קו אדום — ויוצאים לדרך.'],
    en: ['How do we start?', 'A 30-minute intro call. We define your commercial rules together — what matters to you, what’s acceptable, what’s a red line — and get going.'] },
  { he: ['אנחנו רק בהתחלה, אין לנו עדיין הסכמים לבחון.', 'מצוין — זה בדיוק הזמן הנכון. נבנה אתכם את מסמכי הליבה: הסכם מייסדים, NDA, תקנון ומדיניות פרטיות, ונהיה שם כשמגיעים ההסכמים הראשונים.'],
    en: ["We're just starting out and don't have agreements to review yet.", 'Perfect — that’s exactly the right time. We’ll build your core documents: founders’ agreement, NDA, terms and privacy policy, and be there when the first agreements arrive.'] },
];

function StartupsFAQAccordion({ items }) {
  const lang = useLang();
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ background: 'white', border: '1px solid var(--border)', borderRadius: 16, overflow: 'hidden' }}>
      {items.map((it, i) => {
        const [q, a] = t(lang, it.he, it.en);
        return (
          <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',
            }}>
              <span style={{ fontSize: 16.5, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.005em' }}>{q}</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' }}>
                <p style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.65 }}>{a}</p>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function StartupsFaq() {
  const lang = useLang();
  return (
    <section className="section">
      <div className="container">
        <div data-reveal style={{ maxWidth: 720, marginBottom: 40 }}>
          <div className="eyebrow">{t(lang, 'שאלות נפוצות', 'FAQ')}</div>
          <h2 style={{ fontSize: 'clamp(30px, 3vw, 40px)', letterSpacing: '-0.03em', marginBottom: 16 }}>
            {t(lang, 'מה מייסדים שואלים בשיחה הראשונה.', 'What founders ask on the first call.')}
          </h2>
        </div>
        <div data-reveal data-delay="1"><StartupsFAQAccordion items={SU_FAQ} /></div>
      </div>
    </section>
  );
}

function StartupsFinalCTA() {
  const lang = useLang();
  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 }}>
          {t(lang, 'מוכנים שההסכמים יפסיקו לעצור אתכם?', 'Ready for contracts to stop stalling you?')}
        </h2>
        <p style={{ fontSize: 18, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)', marginBottom: 32, maxWidth: 560, marginInline: 'auto' }}>
          {t(lang,
            'שיחת היכרות של 30 דקות, ללא עלות וללא התחייבות. גם אם לא נעבוד יחד, תצאו עם תובנות שיעזרו לכם.',
            'A 30-minute intro call, free and no strings attached. Even if we don’t end up working together, you’ll leave with insights that help.')}
        </p>
        <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'; }}
        >
          {t(lang, 'קבעו שיחה', 'Book a call')}
          <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, {
  StartupsBreadcrumb, StartupsHero, StartupsPain, StartupsHow, StartupsSafe,
  StartupsValue, StartupsCovered, StartupsStart, StartupsWhy, StartupsFaq, StartupsFinalCTA,
});