// "The Approach" — two column: quote left, paragraph right
function Approach() {
  const lang = useLang();
  return (
    <section style={{ background: 'var(--bg-2)', padding: '110px 0' }}>
      <div className="container">
        <div className="eyebrow">{t(lang, 'הגישה', 'Our Approach')}</div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.2fr 1fr',
          gap: 80,
          alignItems: 'start',
          marginTop: 24,
        }} className="approach-grid">
          <blockquote style={{
            margin: 0,
            fontSize: 'clamp(26px, 3vw, 38px)',
            lineHeight: 1.25,
            fontWeight: 500,
            letterSpacing: '-0.02em',
            color: 'var(--ink)',
            position: 'relative',
            paddingInlineStart: 28,
            borderInlineStart: '3px solid var(--turquoise)',
            textWrap: 'balance',
          }}>
            <span style={{ color: 'var(--turquoise-700)', fontFamily: 'Inter', fontSize: '1.4em', lineHeight: 0.5, marginInlineEnd: 4, verticalAlign: '-0.1em', opacity: 0.6 }}>"</span>
            {lang === 'en'
              ? <>Our approach is simple: understand the business before you solve <span style={{ color: 'var(--turquoise-700)' }}>the legal problem.</span></>
              : <>הגישה שלנו פשוטה: להבין את החברה לפני שמבינים את <span style={{ color: 'var(--turquoise-700)' }}>הבעיה המשפטית.</span></>
            }
          </blockquote>

          <div style={{ paddingTop: 8 }}>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)', marginBottom: 20 }}>
              {t(lang,
                'Lawyerit נבנה מתוך הבנה שהרוב הגדול של ההתנגשויות בין משפט לעסק לא מחייבות בחירה — הן מחייבות חשיבה.',
                'Lawyerit was built on one conviction: most clashes between law and business don\'t require a choice — they require creative thinking.'
              )}
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'var(--muted)' }}>
              {t(lang,
                'חוזים, פרטיות ואבטחת מידע הם לא חומות. הם נתונים בתוך המשוואה, ויש דרך יצירתית להרכיב את המשוואה בלי שהעסק ייתקע.',
                'Contracts, privacy, and data security aren\'t obstacles. They\'re parameters in an equation — and there\'s almost always a way to balance it without stopping the business.'
              )}
            </p>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .approach-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Approach });