const FAQ_ITEMS_HE = [
  {
    q: 'מה בעצם Lawyerit עושה?',
    a: 'Lawyerit היא לא משרד עורכי דין רגיל ולא חברת ייעוץ רגולטורי. אנחנו מביאים תחת קורת גג אחת ייעוץ משפטי מסחרי, DPO כשירות וציות רגולטורי — הכל בגישה עסקית, בתמחור ברור, ומאנשים שישבו בתוך חברות טכנולוגיה. אין צורך לתאם בין ספקים שונים — הכל במקום אחד.',
  },
  {
    q: 'אנחנו צריכים רק DPO או קצין ציות, לא עורך דין. זה מתאים?',
    a: 'בהחלט. אפשר להגיע אלינו דרך כל אחד מהשירותים — ייעוץ משפטי, DPO כשירות, או ציות רגולטורי — ולקחת בדיוק מה שצריך. היתרון הוא שכשיש חפיפה בין הנושאים — ותמיד יש — לא צריך לתאם בין שני ספקים שונים ולשלם פעמיים.',
  },
  {
    q: 'למה לא לגייס עורך דין או קצין ציות פנימי?',
    a: 'גיוס פנימי הגיוני — בשלב הנכון. הבעיה שברוב שלבי הצמיחה, חברה צריכה גם משפטי, גם פרטיות, גם ציות — ואדם אחד לא מכסה את הכל. Lawyerit נותנת את כל המעטפת, בעלות שמתאימה לשלב, ובלי הסיכון של גיוס שגוי. וכשהזמן יגיע לגייס פנימית — נעזור לכם לבנות את ה-JD.',
  },
  {
    q: 'כמה עולה השירות? מה מודל התמחור?',
    a: 'אנחנו מאמינים בתמחור ברור והוגן, שמבוסס על העבודה והערך שניתנים בפועל ולא על חיוב שעתי בלתי צפוי. בשיחת היכרות נבין את הצרכים שלכם ונבנה מודל תמחור שמתאים להיקף הפעילות ולשלב הצמיחה של החברה.',
  },
  {
    q: 'האם אפשר להשתמש בשירות באופן נקודתי?',
    a: 'כן. לא כל חברה צריכה ליווי שוטף בכל שלב. אפשר להיעזר בנו בפרויקטים נקודתיים — GDPR gap assessment, מינוי DPO, הסכם SaaS, הכנה לסבב השקעה — ולסיים שם. חברות רבות מתחילות בפרויקט ממוקד ועוברות לליווי שוטף כשהצרכים גדלים. אין התחייבות מינימום.',
  },
  {
    q: 'יש לנו כבר עורך דין ו/או קצין ציות. Lawyerit מחליף אותם?',
    a: 'לא בהכרח. חברות רבות עובדות איתנו לצד משרד קיים — Lawyerit מטפלת בעבודה השוטפת (חוזים, DPA, ציות יומיומי) בעוד שהמשרד הגדול נשאר לעסקאות M&A, ליטיגציה וגיוסי הון. כך מקבלים זמינות ומהירות ביומיום, בלי לשלם תעריפי משרד גדול על כל משימה שוטפת.',
  },
];

const FAQ_ITEMS_EN = [
  {
    q: 'What is a Fractional General Counsel (GC as a Service)?',
    a: 'A Fractional General Counsel provides full commercial legal support — contracts, transactions, RFPs, ongoing advice — under a fixed monthly retainer, without hiring an in-house lawyer. It combines the availability of in-house counsel with the flexibility of an external advisor, at a significantly lower cost. Ideal for SaaS companies and startups that need ongoing legal support but don\'t yet justify a full-time attorney.',
  },
  {
    q: 'How much does the service cost? What is the pricing model?',
    a: 'Pricing is based on deliverables — not hours. You know in advance what you get and what you pay, with no end-of-month surprises. There are three tracks: ongoing monthly retainer (for companies needing continuous support), a dedicated project (DPO, regulatory review, funding round), or a one-time service for a specific contract. Pricing is determined by your activity scope — in an intro call we understand what fits and I\'ll send a precise proposal.',
  },
  {
    q: 'Can the service be used on a one-time basis, not just a retainer?',
    a: 'Yes. Not every company needs ongoing support at every stage. You can come for a specific project: drafting a SaaS agreement, a GDPR audit, preparing for a funding round, building a Legal Playbook — and end there. Many companies start with a one-time project and move to a retainer as needs grow.',
  },
  {
    q: 'What is the difference between Lawyerit and a large law firm?',
    a: 'Three main differences: price (fixed retainer, not hourly billing that can reach thousands per NDA), speed (initial response within 48 hours vs. days to weeks), and approach (business-minded and deal-advancing vs. risk management and lengthy comment lists). For complex work like litigation — a large firm is the right place. For day-to-day commercial matters — Lawyerit typically saves 40–60% in costs.',
  },
  {
    q: 'I already have a law firm representing me. Does Lawyerit replace them?',
    a: 'Not necessarily. Lawyerit often works alongside an external firm: we handle the day-to-day (client contracts, NDAs, RFPs, daily advice) while the large firm handles exceptional and complex matters like litigation, large M&As and capital transactions. This combination typically saves clients tens of percentage points in annual legal costs.',
  },
  {
    q: 'Do you handle employment law, real estate, litigation?',
    a: 'No. Lawyerit specializes in commercial-regulatory matters: contracts, privacy, compliance, international regulation. For employment law, real estate, litigation and criminal law — we have a network of excellent colleagues we refer to, and we won\'t leave you without coverage.',
  },
];

function FAQ() {
  const lang = useLang();
  const [open, setOpen] = React.useState(0);
  const items = lang === 'en' ? FAQ_ITEMS_EN : FAQ_ITEMS_HE;

  return (
    <section id="faq" style={{ padding: '100px 0' }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.6fr',
          gap: 80,
          alignItems: 'start',
        }} className="faq-grid">

          {/* Left: header */}
          <div style={{ position: 'sticky', top: 100 }}>
            <div className="eyebrow">{t(lang, 'שאלות נפוצות', 'FAQ')}</div>
            <h2 style={{ fontSize: 'clamp(30px, 3.2vw, 42px)', letterSpacing: '-0.03em', marginBottom: 20 }}>
              {t(lang, 'מה מנכ"לים שואלים בשיחת ההיכרות.', 'What CEOs ask in the intro call.')}
            </h2>
            <p style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.65, marginBottom: 32 }}>
              {t(lang, 'לא מצאתם תשובה? שיחת ההיכרות הראשונה ללא עלות.', 'Didn\'t find your answer? The first intro call is free.')}
            </p>
            <a href="https://www.cal.eu/lawyer-it/30min" target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ padding: '11px 20px', fontSize: 15 }}>
              {t(lang, 'לשיחת היכרות', 'Book a Call')}
            </a>
          </div>

          {/* Right: accordion */}
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((item, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{
                  borderBottom: '1px solid var(--border-2)',
                }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      gap: 16,
                      padding: '22px 0',
                      background: 'none',
                      border: 'none',
                      cursor: 'pointer',
                      textAlign: 'start',
                    }}
                  >
                    <span style={{
                      fontSize: 17,
                      fontWeight: isOpen ? 600 : 500,
                      color: isOpen ? 'var(--turquoise-700)' : 'var(--ink)',
                      lineHeight: 1.4,
                      transition: 'color 0.2s',
                    }}>{item.q}</span>
                    <div style={{
                      width: 28, height: 28, borderRadius: '50%', flexShrink: 0,
                      background: isOpen ? 'var(--turquoise)' : 'var(--bg-2)',
                      border: '1px solid var(--border-2)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      color: isOpen ? 'white' : 'var(--muted)',
                      transition: 'all 0.2s',
                    }}>
                      <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>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 400 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 0.35s cubic-bezier(.4,0,.2,1)',
                  }}>
                    <p style={{
                      fontSize: 16,
                      color: 'var(--muted)',
                      lineHeight: 1.7,
                      paddingBottom: 24,
                    }}>{item.a}</p>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      {/* FAQPage schema for GEO/AI search */}
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": FAQ_ITEMS_HE.map(item => ({
          "@type": "Question",
          "name": item.q,
          "acceptedAnswer": { "@type": "Answer", "text": item.a },
        })),
      })}} />

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

// Final CTA + Footer
function FinalCTA() {
  const lang = useLang();
  return (
    <section id="contact" style={{
      padding: '120px 0',
      position: 'relative',
      overflow: 'hidden',
      background: 'linear-gradient(135deg, #2FB5B5 0%, #47CBCB 100%)',
      color: '#fff',
    }}>
      {/* Decorative dot grid */}
      <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.6,
      }} />

      {/* Soft orbs */}
      <div style={{
        position: 'absolute', top: -120, insetInlineStart: -120,
        width: 420, height: 420, borderRadius: '50%',
        background: 'rgba(255,255,255,0.12)', filter: 'blur(60px)',
      }} />
      <div style={{
        position: 'absolute', bottom: -160, insetInlineEnd: -160,
        width: 460, height: 460, borderRadius: '50%',
        background: 'rgba(15,50,50,0.2)', filter: 'blur(60px)',
      }} />

      <div className="container" style={{ position: 'relative', textAlign: 'center' }}>
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', background: 'rgba(255,255,255,0.15)',
            border: '1px solid rgba(255,255,255,0.25)',
            borderRadius: 999,
            fontSize: 13, fontWeight: 500, marginBottom: 28,
            backdropFilter: 'blur(8px)',
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#6CE8CF', boxShadow: '0 0 0 3px rgba(108,232,207,0.2)' }} />
            {t(lang, 'מענה תוך 24 שעות', 'Response within 24 hours')}
          </div>

          <h2 style={{
            fontSize: 'clamp(36px, 4.4vw, 56px)',
            fontWeight: 700,
            letterSpacing: '-0.035em',
            lineHeight: 1.08,
            marginBottom: 20,
            textWrap: 'balance',
          }}>
            {t(lang,
              <><span className="en num">30</span> דקות שיכולות לחסוך לכם חודשים.</>,
              <><span className="en num">30</span> minutes that can save you months.</>
            )}
          </h2>

          <p style={{
            fontSize: 19,
            lineHeight: 1.55,
            color: 'rgba(255,255,255,0.88)',
            marginBottom: 40,
            maxWidth: 600,
            marginInline: 'auto',
          }}>
            {t(lang,
              'שיחת היכרות ראשונה ללא עלות וללא התחייבות. גם אם לא נעבוד יחד — תצאו עם תמונה ברורה של מה צריך לעשות.',
              'No cost, no commitment. Even if we don\'t end up working together — you\'ll leave with a clear, actionable picture of what your company needs.'
            )}
          </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: '18px 34px',
            fontSize: 17,
            borderRadius: 12,
            position: 'relative',
            paddingInlineEnd: 50,
          }}
          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 Free Call')}
            <svg width="18" height="18" 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 style={{
            marginTop: 28,
            fontSize: 13,
            color: 'rgba(255,255,255,0.75)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, flexWrap: 'wrap',
          }}>
            <Reassure>{t(lang, 'ללא עלות', 'No cost')}</Reassure>
            <Reassure>{t(lang, 'ללא התחייבות', 'No commitment')}</Reassure>
            <Reassure>{t(lang, 'מענה תוך 48 שעות', 'Response within 48 hours')}</Reassure>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reassure({ children }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
      <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>
      {children}
    </span>
  );
}

function Footer() {
  return (
    <footer style={{
      background: '#0F1115',
      color: 'rgba(255,255,255,0.7)',
      padding: '60px 0 28px',
      fontSize: 14,
    }}>
      <div className="container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 40,
        }} className="footer-grid">
          <div>
            <Logo color="#fff" size={24} />
            <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.55)', fontSize: 14, lineHeight: 1.6, maxWidth: 260 }}>
              משרד משפטי לחברות טכנולוגיה — ייעוץ משפטי, פרטיות וציות כשירות.
            </p>
            <a href="https://lawyer-it.com" className="en" style={{
              color: 'var(--turquoise)', marginTop: 14, display: 'inline-block', fontSize: 13,
            }}>lawyer-it.com</a>
          </div>

          <FooterCol title="שירותים" items={[
            { label: 'GC כשירות', href: 'Lawyerit GC.html' },
            { label: 'DPO כשירות', href: 'Lawyerit DPO.html' },
            { label: 'סקרי רגולציה', href: 'Lawyerit Regulation.html' },
          ]} />

          <FooterCol title="המשרד" items={[
            { label: 'עליי', href: '#about' },
            { label: 'איך עובדים', href: '#how' },
            { label: 'צור קשר', href: '#contact' },
          ]} />

          <FooterCol title="משפטי" items={[
            { label: 'מדיניות פרטיות', href: '#' },
            { label: 'תנאי שימוש', href: '#' },
            { label: 'נגישות', href: '#' },
          ]} />
        </div>

        <div style={{
          paddingTop: 24,
          borderTop: '1px solid rgba(255,255,255,0.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 16,
          fontSize: 13, color: 'rgba(255,255,255,0.5)',
        }}>
          <div>© <span className="en">2026</span> Lawyerit. כל הזכויות שמורות.</div>
          <div style={{ display: 'flex', gap: 14 }}>
            <SocialLink label="LinkedIn" icon={
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M2 5.5h2.6V14H2zM3.3 1.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3zM6.5 5.5H9v1.15h.03C9.4 5.9 10.3 5.3 11.7 5.3c2.6 0 3.1 1.7 3.1 3.9V14h-2.6V9.7c0-1 0-2.3-1.4-2.3s-1.6 1.1-1.6 2.2V14H6.5z"/></svg>
            } />
            <SocialLink label="Email" icon={
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M3 5l5 3.5L13 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            } />
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 780px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FooterCol({ title, items }) {
  return (
    <div>
      <div style={{ color: '#fff', fontSize: 13, fontWeight: 500, marginBottom: 14, letterSpacing: '0.02em' }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((i, idx) => (
          <li key={idx}>
            <a href={i.href} style={{ color: 'rgba(255,255,255,0.6)', fontSize: 14, transition: 'color 0.2s' }}
               onMouseEnter={e => e.target.style.color = 'var(--turquoise)'}
               onMouseLeave={e => e.target.style.color = 'rgba(255,255,255,0.6)'}>
              {i.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function SocialLink({ label, icon }) {
  return (
    <a href="#" aria-label={label} style={{
      width: 34, height: 34, borderRadius: 8,
      border: '1px solid rgba(255,255,255,0.12)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: 'rgba(255,255,255,0.7)', transition: 'all 0.2s',
    }}
    onMouseEnter={e => { e.currentTarget.style.color = 'var(--turquoise)'; e.currentTarget.style.borderColor = 'var(--turquoise)'; }}
    onMouseLeave={e => { e.currentTarget.style.color = 'rgba(255,255,255,0.7)'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)'; }}
    >{icon}</a>
  );
}

Object.assign(window, { FinalCTA, Footer, FAQ });
