// Services — 4 categories: Legal, Privacy & AI, Financial Compliance, International Regulation
const SERVICES_DEFAULT = [
  {
    id: 'gc',
    tag: 'GC',
    color: 'blue',
    badge: 'תשלום על תוצרים',
    badgeKind: 'deliverable',
    badges: [{ kind: 'project', label: 'פרויקט ייעודי' }, { kind: 'retainer', label: 'שוטף' }],
    title: 'שירותים משפטיים',
    sub: 'Fractional General Counsel',
    desc: 'ליווי משפטי מסחרי לחברות טכנולוגיה — חוזים, עסקאות וליווי שוטף, ללא עלות קבועה של יועמ"ש פנימי.',
    bullets: [
      'הסכמי SaaS, NDA ושיתופי פעולה',
      'ליווי עסקאות ו-RFP-ים',
      'סבבי השקעה והסכמי מייסדים',
      'Playbook משפטי מותאם לחברה',
    ],
    href: 'Lawyerit GC.html',
  },
  {
    id: 'dpo',
    tag: 'DPO',
    color: 'purple',
    badge: 'ריטיינר חודשי',
    badgeKind: 'retainer',
    badges: [{ kind: 'project', label: 'פרויקט ייעודי' }, { kind: 'retainer', label: 'שוטף' }],
    title: 'פרטיות',
    sub: 'DPO as a Service · GDPR',
    desc: 'שירות ממונת פרטיות חיצונית — סקר מוכנות, ייעוץ חד-פעמי וליווי שוטף. כולל עמידה בחוק הגנת הפרטיות הישראלי ו-GDPR.',
    bullets: [
      { text: 'סקר מוכנות — פרטיות, אבטחת מידע ו-GDPR',  mode: 'project'  },
      { text: 'מדיניות פרטיות, תנאי שימוש ו-DPA',          mode: 'project'  },
      { text: 'ממונת פרטיות שוטפת — מינוי פורמלי',         mode: 'retainer' },
      { text: 'ממשק מול רגולטורים ולקוחות ארגוניים',       mode: 'retainer' },
    ],
    href: 'Lawyerit DPO.html',
  },
  {
    id: 'cco',
    tag: 'CCO',
    color: 'green',
    badge: 'ריטיינר חודשי',
    badgeKind: 'retainer',
    title: 'ציות פיננסי',
    sub: 'CCO as a Service',
    desc: 'שירות קצינת ציות חיצונית לגופים מפוקחים — ISA, חברות תשלומים וביטוח.',
    bullets: [
      'קצינת ציות כשירות — מינוי פורמלי',
      'מסגרת ציות מותאמת לרישיון',
      'ממשק מול ISA ובנק ישראל',
      'נהלי AML/KYC ובקרות פנימיות',
    ],
    href: 'Lawyerit Compliance.html',
  },
  {
    id: 'reg',
    tag: 'REG',
    color: 'orange',
    badge: 'פרויקט קבוע-מחיר',
    badgeKind: 'project',
    badges: [{ kind: 'project', label: 'פרויקט ייעודי' }],
    title: 'מוכנות רגולטורית',
    sub: 'HIPAA · AI Act',
    desc: 'הערכות מוכנות וסגירת פערים — HIPAA לשוק האמריקאי ו-AI Act לשוק האירופאי, במחיר קבוע ומוגדר מראש.',
    bullets: [
      'HIPAA Readiness Assessment',
      'AI Act Gap Analysis',
      'סגירת פערים מקצה לקצה',
      'תיעוד לביקורת ולדרישות לקוחות',
    ],
    href: 'Lawyerit Regulation.html',
  },
];

const SERVICES_DEFAULT_EN = [
  {
    id: 'gc',
    tag: 'GC',
    color: 'blue',
    badge: 'Fixed-fee',
    badgeKind: 'deliverable',
    badges: [{ kind: 'project', label: 'Project' }, { kind: 'retainer', label: 'Ongoing' }],
    title: 'Legal Services',
    sub: 'Fractional General Counsel',
    desc: 'Commercial legal support for technology companies — contracts, transactions and ongoing counsel, without the cost of an in-house GC.',
    bullets: [
      'SaaS agreements, NDAs & partnerships',
      'Deal support & RFP negotiations',
      'Investment rounds & founder agreements',
      'Custom legal playbook',
    ],
    href: 'Lawyerit GC.html',
  },
  {
    id: 'dpo',
    tag: 'DPO',
    color: 'purple',
    badge: 'Monthly retainer',
    badgeKind: 'retainer',
    badges: [{ kind: 'project', label: 'Project' }, { kind: 'retainer', label: 'Ongoing' }],
    title: 'Privacy',
    sub: 'DPO as a Service · GDPR',
    desc: 'External privacy officer services — readiness assessments, one-time advisory and ongoing engagement. Covers Israeli privacy law and GDPR.',
    bullets: [
      { text: 'Privacy, data security & GDPR readiness assessment', mode: 'project'  },
      { text: 'Privacy policy, terms of use & DPA',                 mode: 'project'  },
      { text: 'Ongoing privacy officer — formal appointment',       mode: 'retainer' },
      { text: 'Interface with regulators & enterprise clients',     mode: 'retainer' },
    ],
    href: 'Lawyerit DPO.html',
  },
  {
    id: 'cco',
    tag: 'CCO',
    color: 'green',
    badge: 'Monthly retainer',
    badgeKind: 'retainer',
    title: 'Financial Compliance',
    sub: 'CCO as a Service',
    desc: 'External compliance officer services for regulated entities — ISA, payment companies and insurance.',
    bullets: [
      'Compliance officer as a service — formal appointment',
      'License-tailored compliance framework',
      'ISA & Bank of Israel interface',
      'AML/KYC procedures & internal controls',
    ],
    href: 'Lawyerit Compliance.html',
  },
  {
    id: 'reg',
    tag: 'REG',
    color: 'orange',
    badge: 'Fixed-fee project',
    badgeKind: 'project',
    badges: [{ kind: 'project', label: 'Project' }],
    title: 'Regulatory Readiness',
    sub: 'HIPAA · AI Act',
    desc: 'Readiness assessments and gap remediation — HIPAA for the US market and AI Act for the European market, at a fixed, defined price.',
    bullets: [
      'HIPAA Readiness Assessment',
      'AI Act Gap Analysis',
      'End-to-end gap remediation',
      'Audit & client-facing documentation',
    ],
    href: 'Lawyerit Regulation.html',
  },
];

const TAG_COLORS = {
  blue: { bg: 'var(--blue-50)', fg: 'var(--blue-600)' },
  purple: { bg: 'var(--purple-50)', fg: 'var(--purple-600)' },
  orange: { bg: 'var(--orange-50)', fg: 'var(--orange)' },
  green: { bg: '#ECFDF5', fg: '#059669' },
};

function ModelBadge({ kind, label }) {
  const isRetainer = kind === 'retainer';
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px',
      borderRadius: 999,
      background: isRetainer ? '#F1F1EE' : '#FAECE7',
      border: `1px solid ${isRetainer ? '#E2E2DD' : '#F0D6C8'}`,
      color: isRetainer ? '#5C5C58' : '#993C1D',
      fontSize: 11.5,
      fontWeight: 500,
      letterSpacing: '0.01em',
      whiteSpace: 'nowrap',
    }}>
      <span style={{
        width: 6, height: 6, borderRadius: '50%',
        background: isRetainer ? '#8C8C86' : '#C2532E',
      }} />
      {label}
    </div>
  );
}

function TagChip({ tag, color, size = 40 }) {
  const c = TAG_COLORS[color];
  return (
    <div className="en" style={{
      width: size, height: size, borderRadius: 8,
      background: c.bg, color: c.fg,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size > 40 ? 13 : 11, fontWeight: 700,
      letterSpacing: '0.02em', flexShrink: 0,
    }}>{tag}</div>
  );
}

function BulletList({ bullets, color }) {
  const c = TAG_COLORS[color];
  const modeTag = (mode) => {
    if (mode === 'project')  return { text: 'חד-פעמי', bg: '#FAECE7', fg: '#993C1D' };
    if (mode === 'retainer') return { text: 'שוטף',    bg: '#F1F1EE', fg: '#5C5C58' };
    return null;
  };
  return (
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
      {bullets.map((b, i) => {
        const text  = typeof b === 'string' ? b : b.text;
        const tag   = typeof b === 'object' && b.mode ? modeTag(b.mode) : null;
        return (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.45 }}>
            <div style={{
              width: 18, height: 18, borderRadius: 4, background: c.bg, color: c.fg,
              display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2,
            }}>
              <svg width="10" height="10" 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>
            <span style={{ flex: 1 }}>
              {text}
              {tag && (
                <span style={{
                  display: 'inline-flex', alignItems: 'center',
                  marginInlineStart: 7,
                  padding: '1px 7px', borderRadius: 999,
                  background: tag.bg, color: tag.fg,
                  fontSize: 10.5, fontWeight: 500,
                  verticalAlign: 'middle', whiteSpace: 'nowrap',
                }}>{tag.text}</span>
              )}
            </span>
          </li>
        );
      })}
    </ul>
  );
}

// Style 1: Bordered cards
function BorderedCard({ s }) {
  const lang = useLang();
  return (
    <a href={s.href} style={{
      display: 'flex', flexDirection: 'column',
      background: 'white',
      border: '1px solid var(--border)',
      borderRadius: 16,
      padding: 32,
      transition: 'all 0.25s cubic-bezier(.4,0,.2,1)',
      height: '100%',
      position: 'relative',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.borderColor = 'var(--turquoise)';
      e.currentTarget.style.transform = 'translateY(-4px)';
      e.currentTarget.style.boxShadow = 'var(--shadow-md)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.borderColor = 'var(--border)';
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = 'none';
    }}>
      <div style={{
        position: 'absolute', top: 16, insetInlineStart: 16,
        display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap',
      }}>
        {s.badges
          ? s.badges.map((b, i) => <ModelBadge key={i} kind={b.kind} label={b.label} />)
          : <ModelBadge kind={s.badgeKind} label={s.badge} />
        }
        {s.isNew && (
          <div style={{
            display: 'inline-flex', alignItems: 'center',
            padding: '4px 9px', borderRadius: 999,
            background: '#ECFDF5', border: '1px solid #A7F3D0',
            color: '#059669', fontSize: 11, fontWeight: 600,
            letterSpacing: '0.03em',
          }}>{lang === 'en' ? 'New' : 'חדש'}</div>
        )}
      </div>

      <TagChip tag={s.tag} color={s.color} />
      <h3 style={{ fontSize: 22, marginTop: 20, marginBottom: 4, letterSpacing: '-0.02em' }}>{s.title}</h3>
      <div className="en" style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 14 }}>{s.sub}</div>
      <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 24 }}>{s.desc}</p>

      <div style={{ marginBottom: 28 }}>
        <BulletList bullets={s.bullets} color={s.color} />
      </div>

      <div style={{
        marginTop: 'auto',
        paddingTop: 20,
        borderTop: '1px solid var(--border-2)',
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 14, fontWeight: 500, color: 'var(--turquoise-700)',
      }}>
        {lang === 'en' ? 'Full details' : 'לפרטים המלאים'}
        <svg width="14" height="14" viewBox="0 0 16 16"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
      </div>
    </a>
  );
}

// Style 2: Editorial — numbered, no boxes
function EditorialCard({ s, idx }) {
  const lang = useLang();
  return (
    <a href={s.href} style={{
      display: 'flex', flexDirection: 'column',
      padding: '8px 0',
      transition: 'transform 0.25s',
      height: '100%',
      borderTop: '1px solid var(--border)',
      paddingTop: 28,
    }}
    onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
    onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 18, flexWrap: 'wrap' }}>
        <div className="en num" style={{ fontSize: 14, fontWeight: 500, color: 'var(--muted-2)', letterSpacing: '0.02em' }}>
          0{idx + 1}
        </div>
        <div className="en" style={{
          fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
          color: TAG_COLORS[s.color].fg,
          padding: '3px 8px', background: TAG_COLORS[s.color].bg, borderRadius: 4,
        }}>{s.tag}</div>
        {s.badges
          ? s.badges.map((b, i) => <ModelBadge key={i} kind={b.kind} label={b.label} />)
          : <ModelBadge kind={s.badgeKind} label={s.badge} />
        }
      </div>

      <h3 style={{ fontSize: 24, marginBottom: 4, letterSpacing: '-0.02em' }}>{s.title}</h3>
      <div className="en" style={{ fontSize: 13, color: 'var(--muted)', marginBottom: 16 }}>{s.sub}</div>
      <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.6, marginBottom: 22 }}>{s.desc}</p>

      <div style={{ marginBottom: 24 }}>
        <BulletList bullets={s.bullets} color={s.color} />
      </div>

      <div style={{
        marginTop: 'auto',
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 14, fontWeight: 500, color: 'var(--turquoise-700)',
      }}>
        {lang === 'en' ? 'Full details' : 'לפרטים המלאים'}
        <svg width="14" height="14" viewBox="0 0 16 16"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
      </div>
    </a>
  );
}

// Style 3: Chip-forward dark
function DarkChipCard({ s }) {
  const lang = useLang();
  const c = TAG_COLORS[s.color];
  return (
    <a href={s.href} style={{
      display: 'flex', flexDirection: 'column',
      background: '#111215',
      color: '#fff',
      borderRadius: 16,
      padding: 32,
      transition: 'all 0.25s cubic-bezier(.4,0,.2,1)',
      height: '100%',
      position: 'relative',
      overflow: 'hidden',
    }}
    onMouseEnter={e => {
      e.currentTarget.style.transform = 'translateY(-4px)';
      e.currentTarget.style.boxShadow = '0 24px 48px -16px rgba(0,0,0,0.4)';
    }}
    onMouseLeave={e => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = 'none';
    }}>
      <div style={{
        position: 'absolute', top: -80, insetInlineEnd: -80,
        width: 240, height: 240, borderRadius: '50%',
        background: c.fg, opacity: 0.1, filter: 'blur(40px)',
      }} />

      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
        marginBottom: 20,
      }}>
        <div className="en" style={{
          display: 'inline-flex', alignSelf: 'flex-start',
          padding: '6px 12px',
          borderRadius: 20,
          background: 'rgba(255,255,255,0.06)',
          border: `1px solid ${c.fg}40`,
          color: c.fg,
          fontSize: 11, fontWeight: 700, letterSpacing: '0.08em',
        }}>{s.tag}</div>

        <div style={{
          padding: '4px 10px',
          borderRadius: 999,
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.12)',
          color: 'rgba(255,255,255,0.75)',
          fontSize: 11.5, fontWeight: 500,
        }}>{s.badge}</div>
      </div>

      <h3 style={{ fontSize: 24, marginBottom: 4, letterSpacing: '-0.02em', color: '#fff' }}>{s.title}</h3>
      <div className="en" style={{ fontSize: 13, color: 'rgba(255,255,255,0.5)', marginBottom: 14 }}>{s.sub}</div>
      <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginBottom: 24 }}>{s.desc}</p>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
        {s.bullets.map((b, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: 'rgba(255,255,255,0.85)', lineHeight: 1.45 }}>
            <div style={{ width: 4, height: 4, borderRadius: '50%', background: c.fg, marginTop: 9, flexShrink: 0 }} />
            {b}
          </li>
        ))}
      </ul>

      <div style={{
        marginTop: 'auto',
        paddingTop: 20,
        borderTop: '1px solid rgba(255,255,255,0.1)',
        display: 'flex', alignItems: 'center', gap: 8,
        fontSize: 14, fontWeight: 500, color: 'var(--turquoise)',
      }}>
        {lang === 'en' ? 'Full details' : 'לפרטים המלאים'}
        <svg width="14" height="14" viewBox="0 0 16 16"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
      </div>
    </a>
  );
}

function Services({ cardStyle = 'bordered', items = SERVICES_DEFAULT, heading, sub }) {
  const lang = useLang();
  const displayItems = lang === 'en' ? SERVICES_DEFAULT_EN : items;
  return (
    <section id="services" className="section">
      <div className="container">
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <div className="eyebrow">{t(lang, 'שירותים', 'Services')}</div>
          <h2 style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', marginBottom: 16, letterSpacing: '-0.03em' }}>
            {heading || t(lang, 'ארבעה תחומים. שותפה אחת.', 'Four practices. One partner.')}
          </h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', lineHeight: 1.55 }}>
            {sub || t(lang,
              'ייעוץ משפטי, פרטיות ו-AI, ציות פיננסי ורגולציה בינלאומית — הכל תחת גג אחד, בריטיינר קבוע או פרויקט ייעודי.',
              'Legal counsel, privacy & AI, financial compliance, and international regulation — all under one roof. Retainer or fixed-fee project.'
            )}
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: cardStyle === 'editorial' ? 'repeat(2, 1fr)' : 'repeat(2, 1fr)',
          gap: cardStyle === 'editorial' ? 40 : 24,
        }} className="services-grid">
          {displayItems.map((s, i) => {
            if (cardStyle === 'editorial') return <EditorialCard key={s.id || s.tag} s={s} idx={i} />;
            if (cardStyle === 'dark') return <DarkChipCard key={s.id || s.tag} s={s} />;
            return <BorderedCard key={s.id || s.tag} s={s} />;
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .services-grid { grid-template-columns: 1fr !important; }
        }
        @media (min-width: 901px) {
          .services-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

const SERVICE_COLUMNS = [
  {
    title: 'שירותים משפטיים',
    tag: 'GC',
    color: 'blue',
    highlight: true,
    href: 'Lawyerit GC.html',
    items: [
      'חוזי לקוחות, ספקים ושיתופי פעולה',
      'הסכמי SaaS, NDA והסכמי סודיות',
      'ליווי עסקאות ו-RFP-ים',
      'סבבי השקעה — Term Sheet, SAFE',
      'הסכמי מייסדים והקמת חברה',
      'Playbook משפטי מותאם לחברה',
    ],
  },
  {
    title: 'פרטיות',
    tag: 'DPO',
    color: 'purple',
    href: 'Lawyerit DPO.html',
    items: [
      'סקר מוכנות — פרטיות ואבטחת מידע',
      'GDPR Readiness Assessment',
      'מדיניות פרטיות, תנאי שימוש ו-DPA',
      'ממונת פרטיות כשירות — מינוי פורמלי',
      'ממשק שוטף מול רגולטורים ולקוחות',
      'הכנה לביקורת רגולטורית',
    ],
  },
  {
    title: 'ציות פיננסי',
    tag: 'CCO',
    color: 'green',
    href: 'Lawyerit Compliance.html',
    items: [
      'קצינת ציות כשירות (CCO)',
      'מסגרת ציות מותאמת לרישיון',
      'ממשק מול ISA ובנק ישראל',
      'נהלי AML/KYC',
      'ליווי ביקורות והליכי פיקוח',
      'Gap Analysis לציות קיים',
    ],
  },
  {
    title: 'מוכנות רגולטורית',
    tag: 'REG',
    color: 'orange',
    href: 'Lawyerit Regulation.html',
    items: [
      'HIPAA Readiness Assessment',
      'AI Act Gap Analysis',
      'סגירת פערים מקצה לקצה',
      'תיעוד לביקורת ולדרישות לקוחות',
      'תעודת עמידה ברגולציה',
    ],
  },
];

function ServicesDetail() {
  const [openIdx, setOpenIdx] = React.useState(null);

  const toggle = (i) => setOpenIdx(prev => prev === i ? null : i);

  return (
    <section style={{ background: 'var(--bg-2)', padding: '80px 0 100px' }}>
      <div className="container">
        <div style={{ maxWidth: 640, marginBottom: 52 }}>
          <div className="eyebrow">פירוט השירותים</div>
          <h2 style={{ fontSize: 'clamp(28px, 3vw, 38px)', letterSpacing: '-0.03em' }}>
            כל השירותים, במקום אחד.
          </h2>
        </div>

        <div style={{
          borderRadius: 16,
          border: '1px solid var(--border)',
          background: 'white',
          overflow: 'hidden',
        }}>
          {SERVICE_COLUMNS.map((col, i) => {
            const isOpen = openIdx === i;
            const accentColor = col.color ? TAG_COLORS[col.color].fg : 'var(--orange)';
            const accentBg   = col.color ? TAG_COLORS[col.color].bg  : 'var(--orange-50)';
            const isHighlight = col.highlight;

            return (
              <div key={i} style={{
                borderBottom: i < SERVICE_COLUMNS.length - 1 ? '1px solid var(--border-2)' : 'none',
                background: isOpen && isHighlight ? 'var(--turquoise-50)' : isOpen ? '#FAFAFA' : 'white',
                transition: 'background 0.2s',
              }}>
                {/* Row header — always visible, clickable */}
                <div
                  onClick={() => toggle(i)}
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    padding: '20px 28px',
                    cursor: 'pointer',
                    gap: 16,
                    userSelect: 'none',
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                    {col.tag && (
                      <div className="en" style={{
                        fontSize: 10, fontWeight: 700, letterSpacing: '0.08em',
                        color: accentColor, background: accentBg,
                        padding: '3px 8px', borderRadius: 4, flexShrink: 0,
                      }}>{col.tag}</div>
                    )}
                    <span style={{
                      fontSize: 16, fontWeight: 600,
                      color: isHighlight ? 'var(--turquoise-700)' : 'var(--ink)',
                      letterSpacing: '-0.01em',
                    }}>{col.title}</span>
                    {/* dot accent */}
                    <div style={{ display: 'flex', gap: 3, flexShrink: 0 }}>
                      {[0,1,2].map(d => (
                        <div key={d} style={{
                          width: 4, height: 4, borderRadius: '50%',
                          background: isHighlight ? 'var(--turquoise)' : 'var(--orange)',
                          opacity: d === 2 ? 0.35 : 1,
                        }} />
                      ))}
                    </div>
                  </div>

                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
                    {/* Link to dedicated page if exists */}
                    {col.href && (
                      <a
                        href={col.href}
                        onClick={e => e.stopPropagation()}
                        style={{
                          fontSize: 13, fontWeight: 500,
                          color: 'var(--turquoise-700)',
                          display: 'flex', alignItems: 'center', gap: 4,
                          whiteSpace: 'nowrap',
                        }}
                      >
                        לדף המלא
                        <svg width="12" height="12" viewBox="0 0 16 16" fill="none"><path d="M10 4L6 8l4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </a>
                    )}
                    {/* Chevron */}
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%',
                      background: isOpen ? 'var(--turquoise)' : 'var(--bg-2)',
                      border: '1px solid var(--border-2)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      transition: 'all 0.2s',
                      color: isOpen ? 'white' : 'var(--muted)',
                    }}>
                      <svg
                        width="12" height="12" viewBox="0 0 12 12" fill="none"
                        style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform 0.25s' }}
                      >
                        <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    </div>
                  </div>
                </div>

                {/* Expandable items */}
                <div style={{
                  maxHeight: isOpen ? 600 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 0.35s cubic-bezier(.4,0,.2,1)',
                }}>
                  <div style={{
                    display: 'flex',
                    flexWrap: 'wrap',
                    gap: '8px 12px',
                    padding: '0 28px 24px',
                  }}>
                    {col.items.map((item, ii) => (
                      <div key={ii} style={{
                        padding: '6px 14px',
                        borderRadius: 999,
                        border: '1px solid var(--border-2)',
                        background: 'white',
                        fontSize: 14,
                        color: 'var(--ink-2)',
                      }}>{item}</div>
                    ))}
                    {col.extra && col.extra.items.map((item, ii) => (
                      <div key={'x'+ii} style={{
                        padding: '6px 14px',
                        borderRadius: 999,
                        border: '1px dashed var(--border)',
                        background: 'var(--bg-2)',
                        fontSize: 14,
                        color: 'var(--muted)',
                      }}>{item}</div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const SERVICE_COLUMNS_EN = [
  {
    title: 'Legal Services',
    tag: 'GC',
    color: 'blue',
    highlight: true,
    href: 'Lawyerit GC.html',
    items: [
      'Client, vendor & partnership agreements',
      'SaaS agreements, NDAs & confidentiality',
      'Deal support & RFP negotiations',
      'Investment rounds — Term Sheet, SAFE',
      'Founder agreements & company formation',
      'Custom legal playbook',
    ],
  },
  {
    title: 'Privacy & AI',
    tag: 'DPO',
    color: 'purple',
    href: 'Lawyerit DPO.html',
    items: [
      'Privacy officer as a service (DPO)',
      'GDPR, AI Act & Israeli privacy law',
      'DPA review with customers & vendors',
      'Privacy policy & terms of service',
      'AI Act Readiness Assessment',
      'Regulatory audit preparation',
    ],
  },
  {
    title: 'Financial Compliance',
    tag: 'CCO',
    color: 'green',
    href: 'Lawyerit Compliance.html',
    items: [
      'Compliance officer as a service (CCO)',
      'License-tailored compliance framework',
      'ISA & Bank of Israel interface',
      'AML/KYC procedures',
      'Regulatory inspection support',
      'Gap analysis for existing compliance',
    ],
  },
  {
    title: 'International Regulation',
    tag: 'REG',
    color: 'orange',
    href: 'Lawyerit Regulation.html',
    items: [
      'GDPR Readiness Assessment',
      'HIPAA Readiness Assessment',
      'AI Act Gap Analysis',
      'End-to-end remediation',
      'Audit & customer documentation',
      'Compliance attestation',
    ],
  },
];

Object.assign(window, { Services, ServicesDetail, SERVICES_DEFAULT, SERVICE_COLUMNS, SERVICE_COLUMNS_EN });