// Hero section — abstract "resolved path" SVG metaphor
function HeroVisual() {
  const lang = useLang();
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: '1/1',
      maxWidth: 520,
      marginInlineStart: 'auto',
    }}>
      {/* Background grid */}
      <div className="dot-grid" style={{
        position: 'absolute',
        inset: 0,
        borderRadius: 24,
        opacity: 0.7,
        maskImage: 'radial-gradient(circle at center, black 30%, transparent 75%)',
      }} />

      {/* Main SVG: tangled → resolved path */}
      <svg viewBox="0 0 520 520" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <defs>
          <linearGradient id="pathGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0%" stopColor="#47CBCB" />
            <stop offset="100%" stopColor="#2FB5B5" />
          </linearGradient>
          <linearGradient id="tangleGrad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="#C9C9C4" stopOpacity="0.7" />
            <stop offset="100%" stopColor="#C9C9C4" stopOpacity="0.2" />
          </linearGradient>
        </defs>

        {/* Tangled knot — left side (origin) */}
        <g style={{ opacity: 0.9 }}>
          <path
            d="M 80 180 C 110 140, 160 240, 110 260 C 60 280, 120 330, 160 310 C 200 290, 140 230, 180 210 C 220 190, 170 150, 140 180"
            stroke="url(#tangleGrad)"
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
          />
          <path
            d="M 60 220 C 90 210, 80 280, 140 290 C 200 300, 170 240, 200 250"
            stroke="url(#tangleGrad)"
            strokeWidth="2"
            fill="none"
            strokeLinecap="round"
          />
        </g>

        {/* The resolved, clean path (main stroke) */}
        <path
          d="M 100 260 C 180 260, 220 180, 300 180 C 380 180, 420 340, 460 260"
          stroke="url(#pathGrad)"
          strokeWidth="3"
          fill="none"
          strokeLinecap="round"
          style={{
            strokeDasharray: 900,
            strokeDashoffset: 900,
            animation: 'drawPath 2s 0.4s cubic-bezier(.4,0,.2,1) forwards',
          }}
        />

        {/* Nodes on the path: GC, DPO, CISO */}
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.2s forwards' }}>
          <circle cx="220" cy="220" r="5" fill="#47CBCB" />
          <circle cx="220" cy="220" r="12" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1" />
        </g>
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.4s forwards' }}>
          <circle cx="320" cy="185" r="5" fill="#47CBCB" />
          <circle cx="320" cy="185" r="12" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1" />
        </g>
        <g style={{ opacity: 0, animation: 'fadeIn 0.6s 2.6s forwards' }}>
          <circle cx="420" cy="285" r="5" fill="#47CBCB" />
          <circle cx="420" cy="285" r="12" fill="none" stroke="#47CBCB" strokeOpacity="0.3" strokeWidth="1" />
        </g>
      </svg>

      {/* Floating chip labels */}
      <Chip label="GC" sub={t(lang, 'ייעוץ משפטי', 'Legal Counsel')} color="blue" style={{ top: '32%', insetInlineEnd: '14%' }} delay={2.2} />
      <Chip label="DPO" sub={t(lang, 'פרטיות', 'Privacy')} color="purple" style={{ top: '22%', insetInlineStart: '22%' }} delay={2.4} />
      <Chip label="REG" sub={t(lang, 'רגולציה', 'Compliance')} color="orange" style={{ top: '58%', insetInlineStart: '8%' }} delay={2.6} />

      {/* "Resolved" badge */}
      <div style={{
        position: 'absolute',
        bottom: 24,
        insetInlineEnd: 24,
        padding: '10px 14px',
        background: 'white',
        borderRadius: 10,
        border: '1px solid var(--border)',
        boxShadow: 'var(--shadow-md)',
        display: 'flex',
        alignItems: 'center',
        gap: 8,
        opacity: 0,
        animation: 'fadeIn 0.6s 2.8s forwards',
      }}>
        <div style={{
          width: 22,
          height: 22,
          borderRadius: '50%',
          background: 'var(--turquoise)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <svg width="12" height="12" viewBox="0 0 12 12"><path d="M2 6.5 L5 9 L10 3" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
        </div>
        <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-2)' }}>{t(lang, 'העסקה ממשיכה', 'Deal moves forward')}</div>
      </div>

      <style>{`
        @keyframes drawPath { to { stroke-dashoffset: 0; } }
        @keyframes fadeIn { to { opacity: 1; } }
      `}</style>
    </div>
  );
}

function Chip({ label, sub, color, style, delay }) {
  const 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)' },
  };
  const c = colors[color];
  return (
    <div style={{
      position: 'absolute',
      ...style,
      display: 'flex',
      alignItems: 'center',
      gap: 10,
      padding: '8px 12px 8px 8px',
      background: 'white',
      border: '1px solid var(--border)',
      borderRadius: 10,
      boxShadow: 'var(--shadow-md)',
      opacity: 0,
      animation: `chipIn 0.6s ${delay}s cubic-bezier(.2,.8,.2,1) forwards`,
    }}>
      <div className="en" style={{
        width: 32,
        height: 32,
        borderRadius: 6,
        background: c.bg,
        color: c.fg,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: 11,
        fontWeight: 700,
        letterSpacing: '0.02em',
      }}>{label}</div>
      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink-2)' }}>{sub}</div>
      <style>{`
        @keyframes chipIn {
          from { opacity: 0; transform: translateY(-8px) scale(0.95); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </div>
  );
}

function Hero() {
  const lang = useLang();
  return (
    <section style={{
      paddingTop: 80,
      paddingBottom: 120,
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container" style={{
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 60,
        alignItems: 'center',
      }}>
        <div>
          <div className="eyebrow fade-up">
            {t(lang, 'ייעוץ משפטי · פרטיות · ציות · רגולציה בינלאומית', 'Legal Counsel · Privacy · Compliance · International Regulation')}
          </div>

          <h1 className="fade-up fade-up-d1" style={{
            fontSize: 'clamp(40px, 5.5vw, 68px)',
            fontWeight: 700,
            lineHeight: 1.05,
            letterSpacing: '-0.035em',
            marginBottom: 24,
          }}>
            {lang === 'en' ? (
              <>Legal counsel that <span style={{ color: 'var(--turquoise-700)', position: 'relative', display: 'inline-block' }}>
                solves
                <svg viewBox="0 0 240 14" preserveAspectRatio="none" style={{ position: 'absolute', bottom: -4, insetInlineStart: 0, width: '100%', height: 10, overflow: 'visible' }}>
                  <path d="M2 9 C 60 2, 180 2, 238 9" stroke="var(--turquoise)" strokeWidth="3" fill="none" strokeLinecap="round" style={{ strokeDasharray: 260, strokeDashoffset: 260, animation: 'drawUnderline 1.2s 0.9s cubic-bezier(.4,0,.2,1) forwards' }} />
                </svg>
              </span>,<br />not complicates.</>
            ) : (
              <>ליווי משפטי <span style={{ color: 'var(--turquoise-700)', position: 'relative', display: 'inline-block' }}>
                שפותר
                <svg viewBox="0 0 240 14" preserveAspectRatio="none" style={{ position: 'absolute', bottom: -4, insetInlineStart: 0, width: '100%', height: 10, overflow: 'visible' }}>
                  <path d="M2 9 C 60 2, 180 2, 238 9" stroke="var(--turquoise)" strokeWidth="3" fill="none" strokeLinecap="round" style={{ strokeDasharray: 260, strokeDashoffset: 260, animation: 'drawUnderline 1.2s 0.9s cubic-bezier(.4,0,.2,1) forwards' }} />
                </svg>
              </span><br />במקום לסבך.</>
            )}
          </h1>

          <p className="fade-up fade-up-d2" style={{
            fontSize: 19,
            lineHeight: 1.55,
            color: 'var(--muted)',
            maxWidth: 560,
            marginBottom: 36,
          }}>
            {t(lang,
              'משרד עורכי דין לחברות — ייעוץ משפטי, פרטיות וציות. תשלום על תוצרים, לא על שעות.',
              'A law firm for companies — legal counsel, privacy and compliance. Payment per deliverable, not per hour.'
            )}
          </p>

          {/* Social proof */}
          <div className="fade-up fade-up-d2" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 16px',
            background: 'var(--bg-2)',
            border: '1px solid var(--border-2)',
            borderRadius: 999,
            fontSize: 14, color: 'var(--muted)',
            marginBottom: 32,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#059669', flexShrink: 0 }} />
            {t(lang,
              'מלווים חברות ב: פארמה · פינטק · ביטוח · סטארטאפים · פיננסים',
              'Serving companies in: Pharma · Fintech · Insurance · Startups · Finance'
            )}
          </div>

          <div className="fade-up fade-up-d3" style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginBottom: 40 }}>
            <a href="https://www.cal.eu/lawyer-it/30min" target="_blank" rel="noopener noreferrer" className="btn btn-brand btn-lg">
              {t(lang, 'קביעת שיחת היכרות', 'Book a Free 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>
            </a>
            <a href="#services" className="btn btn-outline btn-lg">
              {t(lang, 'השירותים שלנו', 'Our Services')}
            </a>
          </div>

          {/* Trust micro-row */}
          <div className="fade-up fade-up-d4" style={{
            display: 'flex',
            alignItems: 'center',
            gap: 24,
            paddingTop: 24,
            borderTop: '1px solid var(--border-2)',
            flexWrap: 'wrap',
          }}>
            <TrustStat num="10+" label={t(lang, 'לקוחות פעילים', 'Active clients')} />
            <Divider />
            <TrustStat num="40–60%" label={t(lang, 'חיסכון לעומת משרד גדול', 'Savings vs. large firms')} accent />
            <Divider />
            <TrustStat num="+7" label={t(lang, 'שנות ניסיון', 'Years of experience')} />
          </div>
        </div>

        <div className="fade-up fade-up-d2">
          <HeroVisual />
        </div>
      </div>

      <style>{`
        @keyframes drawUnderline { to { stroke-dashoffset: 0; } }
        @media (max-width: 900px) {
          section > .container { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function TrustStat({ num, label, accent }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div className="en num" style={{ fontSize: 18, fontWeight: 700, color: accent ? 'var(--orange)' : 'var(--ink)', letterSpacing: '-0.02em' }}>{num}</div>
      <div style={{ fontSize: 13, color: 'var(--muted)' }}>{label}</div>
    </div>
  );
}

function Divider() {
  return <div style={{ width: 1, height: 28, background: 'var(--border)' }} />;
}

// Logo strip — client / partner logos
function LogoStrip() {
  const lang = useLang();
  const logos = [
    'SaaS Co', 'FinTech', 'InsurTech', 'DataPro', 'CyberNet', 'PaySmart',
  ];
  return (
    <section style={{
      borderTop: '1px solid var(--border-2)',
      borderBottom: '1px solid var(--border-2)',
      padding: '28px 0',
      background: 'var(--bg-3)',
    }}>
      <div className="container">
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 32,
          flexWrap: 'wrap',
          justifyContent: 'center',
        }}>
          <span style={{
            fontSize: 12,
            fontWeight: 500,
            color: 'var(--muted)',
            letterSpacing: '0.06em',
            textTransform: 'uppercase',
            whiteSpace: 'nowrap',
            opacity: 0.7,
          }}>
            {t(lang, 'לקוחות מרוצים', 'Trusted by')}
          </span>
          <div style={{
            width: 1, height: 20,
            background: 'var(--border)',
            flexShrink: 0,
          }} />
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 28,
            flexWrap: 'wrap',
            justifyContent: 'center',
          }}>
            {logos.map((name, i) => (
              <div key={i} style={{
                padding: '8px 18px',
                borderRadius: 8,
                background: 'var(--bg-2)',
                border: '1px solid var(--border-2)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                opacity: 0.6,
                transition: 'opacity 0.2s',
                cursor: 'default',
                fontSize: 13,
                fontWeight: 600,
                color: 'var(--muted)',
                letterSpacing: '0.02em',
                fontFamily: 'var(--font-en)',
              }}
              onMouseEnter={e => e.currentTarget.style.opacity = '0.9'}
              onMouseLeave={e => e.currentTarget.style.opacity = '0.6'}
              >
                {name}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, LogoStrip });