// Industries — pills
function Industries() {
  const lang = useLang();
  const items = lang === 'en'
    ? ['SaaS & Tech', 'Insurance & Finance', 'Credit Information', 'Assisted Living & Health', 'Private Education', 'Marketing & Advertising', 'Law Firms']
    : ['SaaS ו-Tech', 'ביטוח ופיננסים', 'מידע אשראי', 'דיור מוגן ובריאות', 'חינוך פרטי', 'שיווק ופרסום', 'משרדי עו"ד'];
  return (
    <section className="section-sm" style={{ paddingTop: 40, paddingBottom: 80 }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <div className="eyebrow" style={{ justifyContent: 'center' }}>{t(lang, 'מלווה ארגונים בתחומי', 'Serving organizations in')}</div>
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          justifyContent: 'center',
          gap: 10,
          marginTop: 20,
          maxWidth: 880,
          marginInline: 'auto',
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: '10px 18px',
              borderRadius: 999,
              background: 'var(--bg-2)',
              border: '1px solid var(--border-2)',
              fontSize: 15,
              fontWeight: 500,
              color: 'var(--ink-2)',
              transition: 'all 0.2s',
            }}
            onMouseEnter={e => {
              e.currentTarget.style.background = 'white';
              e.currentTarget.style.borderColor = 'var(--turquoise)';
              e.currentTarget.style.color = 'var(--turquoise-700)';
            }}
            onMouseLeave={e => {
              e.currentTarget.style.background = 'var(--bg-2)';
              e.currentTarget.style.borderColor = 'var(--border-2)';
              e.currentTarget.style.color = 'var(--ink-2)';
            }}>
              {it}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Why Lawyerit — 2x2 with icons
function Why() {
  const lang = useLang();
  const items = [
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 18c4-8 14-8 18 0M7 14l2-3 3 2 5-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
      title: t(lang, 'חשיבה יצירתית, לא חומות', 'Creative thinking, not walls'),
      desc: t(lang,
        'דרישות משפטיות ורגולטוריות הן נתון, לא סוף פסוק. המטרה היא למצוא את הדרך שבה הארגון ממשיך לעבוד בתוך הכללים — לא לעצור הכל בשם הזהירות.',
        'Legal and regulatory requirements are a given, not a dead end. The goal is finding the path where your business keeps moving within the rules — not grinding to a halt in the name of caution.'
      ),
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/><path d="M3 9h18M8 14h3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
      title: t(lang, 'ניסיון "מבפנים"', '"Inside" experience'),
      desc: t(lang,
        'לא יועצים חיצונים שמסתכלים מהצד — יועצים משפטיים שניהלו מחלקה משפטית שלמה, ישבו בחדר ההחלטות, וליוו צוותי מכירות ושיווק מקרוב.',
        'Not outside consultants looking in from the sidelines — lawyers who ran a full legal department, sat at the decision table, and worked hand-in-hand with sales and marketing teams.'
      ),
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="1.6"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>),
      title: t(lang, 'זמינים תמיד בשבילכם', 'Always available for you'),
      desc: t(lang,
        'מענה ראשוני מהיר לכל פניה. תשלום על תוצרים, לא על שעות — בלי הפתעות בחשבון, בלי המתנה לתוצרים ימים ושבועות.',
        'Quick first response to every inquiry. Billing per deliverable, not per hour — no surprise invoices, no waiting days or weeks for results.'
      ),
    },
    {
      icon: (<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/><path d="M9 12l2 2 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>),
      title: t(lang, 'טכנולוגיה שעובדת ברקע', 'Technology working in the background'),
      desc: t(lang,
        'כלי AI ייעודיים מאפשרים מהירות ודיוק — אבל כל תוצר שיוצא ללקוח עובר בדיקה ואחריות אישית שלנו.',
        'Purpose-built AI tools bring speed and precision — but every deliverable that reaches a client gets my personal review and sign-off.'
      ),
    },
  ];

  return (
    <section id="how" className="section" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div style={{ maxWidth: 640, marginBottom: 56 }}>
          <div className="eyebrow">{t(lang, 'למה Lawyerit', 'Why Lawyerit')}</div>
          <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', letterSpacing: '-0.03em' }}>
            {t(lang, <>ארבעה דברים שתרגישו<br />כבר בשיחה הראשונה.</>, <>Four things you'll notice<br />from the very first conversation.</>)}
          </h2>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: '48px 64px',
        }} className="why-grid">
          {items.map((it, i) => (
            <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
              <div style={{
                width: 44, height: 44,
                borderRadius: 10,
                background: 'white',
                border: '1px solid var(--border)',
                color: 'var(--turquoise-700)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
              }}>{it.icon}</div>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                  <span className="en num" style={{ fontSize: 12, fontWeight: 500, color: 'var(--muted-2)' }}>0{i+1}</span>
                  <h3 style={{ fontSize: 19, fontWeight: 500, letterSpacing: '-0.01em' }}>{it.title}</h3>
                </div>
                <p style={{ fontSize: 15.5, color: 'var(--muted)', lineHeight: 1.6 }}>{it.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) {
          .why-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// About — Tal
function About() {
  const lang = useLang();
  return (
    <section id="about" className="section">
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: 64,
          alignItems: 'center',
        }} className="about-grid">
          {/* Photo */}
          <div style={{ position: 'relative' }}>
            <div style={{
              aspectRatio: '4/5',
              borderRadius: 20,
              position: 'relative',
              overflow: 'hidden',
              border: '1px solid var(--border-2)',
              background: 'var(--bg-2)',
            }}>
              <img
                src="tal.jpg"
                alt="עו״ד טל גלק לביא"
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
              />
            </div>
            {/* Floating credential tag */}
            <div style={{
              position: 'absolute', bottom: 24, insetInlineEnd: -20,
              padding: '12px 16px', background: 'white',
              borderRadius: 12, border: '1px solid var(--border)',
              boxShadow: 'var(--shadow-md)',
              display: 'flex', alignItems: 'center', gap: 10,
            }}>
              <div style={{
                width: 28, height: 28, borderRadius: 6, background: 'var(--turquoise-50)',
                color: 'var(--turquoise-700)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                <svg width="14" height="14" viewBox="0 0 16 16"><path d="M3 8l3 3 7-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>DPO & CISO</div>
                <div style={{ fontSize: 11, color: 'var(--muted)' }}>מוסמכת</div>
              </div>
            </div>
          </div>

          <div>
            <div className="eyebrow">{t(lang, 'מי מובילה את Lawyerit', 'Who leads Lawyerit')}</div>
            <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', letterSpacing: '-0.03em', marginBottom: 12 }}>
              {t(lang, 'עו״ד טל גלק לביא', 'Adv. Tal Galik Lavi')}
            </h2>
            <div style={{ fontSize: 16, color: 'var(--muted)', marginBottom: 24, display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
              <span>{t(lang, 'מייסדת ומנהלת Lawyerit', 'Founder & Managing Director, Lawyerit')}</span>
              <span style={{ color: 'var(--border)' }}>·</span>
              <span>{t(lang, 'DPO ו-CISO מוסמכת', 'Certified DPO & CISO')}</span>
              <span style={{ color: 'var(--border)' }}>·</span>
              <span>{t(lang, 'LL.B אוניברסיטת תל אביב', 'LL.B Tel Aviv University')}</span>
            </div>

            <p style={{ fontSize: 18, lineHeight: 1.65, color: 'var(--ink-2)', marginBottom: 20 }}>
              {t(lang,
                'מעל שבע שנות ניסיון במשרדי עורכי דין בטופ 5 וכיועמשית פנימית במחלקות משפטיות בינלאומיות, בינהן ניסיון בניהול מחלקה משפטית. ישיבה בחדר ההחלטות, ליווי צמוד של צוותי מכירות ושיווק, ועבודה מול רגולטורים. זה הניסיון שמאפשר לדבר את שפת העסק ואת שפת הרגולציה באותה נשימה.',
                'Seven-plus years at top Israeli law firms and as in-house counsel at international companies — including running a full legal department. Sitting at the decision table, working side-by-side with sales and marketing, and dealing directly with regulators. That background is what lets me speak both fluent business and fluent law.'
              )}
            </p>

            <p style={{ fontSize: 16, lineHeight: 1.65, color: 'var(--muted)', marginBottom: 32 }}>
              {t(lang,
                'Lawyerit הוא משרד מתמחה עם חזון ברור: צוות עורכות דין ואנשי ציות, בשיתוף שותפים טכנולוגיים מובילים — כולם עם אותה גישה עסקית-יצירתית. פתרונות שמקדמים עסקאות, לא מעכבים אותן.',
                'Lawyerit is a boutique firm with a clear vision: lawyers and compliance professionals, working with leading technology partners — all sharing the same business-first approach. Advice that moves deals forward.'
              )}
            </p>

            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a href="https://www.cal.eu/lawyer-it/30min" target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: '10px 20px', fontSize: 15 }}>
                {t(lang, 'קביעת שיחת היכרות', 'Book a Call')}
              </a>
              <a href="#" style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 15, fontWeight: 500, color: 'var(--turquoise-700)',
                alignSelf: 'center',
              }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M16 8l-4-4-4 4M12 4v12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/><rect x="4" y="18" width="16" height="2" rx="1" fill="currentColor"/></svg>
                LinkedIn
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Industries, Why, About });