/* global React */
// Иконки и анимации из дизайна: иконка документа, «создаю документы», «разбираю таблицу».

const SPARK_A = 'M12 0C12.7 5.8 14.6 7.9 20 8.5C14.6 9.1 12.7 11.2 12 17C11.3 11.2 9.4 9.1 4 8.5C9.4 7.9 11.3 5.8 12 0Z';

// маленькая иконка документа (вместо квадратика ▤ перед названием)
function DocIcon({ size = 16, accent = '#006EDD' }) {
  return (
    <svg width={size} height={size * 1.16} viewBox="0 0 24 28" style={{ display: 'inline-block', verticalAlign: '-3px', flex: '0 0 auto' }} aria-hidden="true">
      <path d="M4 1.4h10.3L21 8.1V25.1A1.5 1.5 0 0 1 19.5 26.6H4A1.5 1.5 0 0 1 2.5 25.1V2.9A1.5 1.5 0 0 1 4 1.4Z" fill="#fff" stroke="#d3dbe8" strokeWidth="1.4" />
      <path d="M14.3 1.6V6.6A1.5 1.5 0 0 0 15.8 8.1H20.8" fill="#eef2f7" stroke="#d3dbe8" strokeWidth="1.3" />
      <rect x="6" y="12.4" width="8.5" height="1.9" rx="0.95" fill="#c9d3e2" />
      <rect x="6" y="16" width="11.5" height="1.9" rx="0.95" fill={accent} />
      <rect x="6" y="19.6" width="7" height="1.9" rx="0.95" fill="#c9d3e2" />
    </svg>
  );
}
window.DocIcon = DocIcon;

// «Создаю договоры» — карточки-документы всплывают, искра летит по траектории
function DocsCreating({ label = 'Создаю договоры', count = 6 }) {
  const cards = Array.from({ length: count }, (_, i) => i);
  const line = [['56%', '#e2e6eb', 0.18], ['78%', '#006EDD', 0.26], ['44%', '#e2e6eb', 0.34], ['64%', '#006EDD', 0.42]];
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 10, padding: '6px 2px', fontFamily: 'var(--sans)' }}>
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(3, 58px)', gap: 12 }}>
        {cards.map((i) => {
          const base = i * 0.26;
          return (
            <div key={i} style={{ width: 58, height: 74, background: '#fff', border: '1px solid #eceef1', borderRadius: 8, boxShadow: '0 6px 16px -8px rgba(20,40,80,0.18)', padding: '9px 8px', display: 'flex', flexDirection: 'column', gap: 5, position: 'relative', animation: 'dmc-pop .5s cubic-bezier(0.22,1,0.36,1) both', animationDelay: base + 's' }}>
              <div style={{ position: 'absolute', top: 0, right: 0, width: 14, height: 14, background: '#f4f6f8', borderBottomLeftRadius: 6, borderLeft: '1px solid #eceef1', borderBottom: '1px solid #eceef1' }} />
              {line.map(([w, c, d], j) => (
                <div key={j} style={{ height: 4, borderRadius: 2, background: c, width: w, '--w': w, animation: 'dmc-line .4s ease both', animationDelay: (base + d) + 's' }} />
              ))}
            </div>
          );
        })}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 5 }}>
          {[0, 1.4, 2.8].map((d, i) => (
            <div key={i} style={{ position: 'absolute', width: 22, height: 22, offsetPath: "path('M 6 150 C 70 20, 130 190, 192 44')", animation: 'dmc-fly 4.2s ease-in-out infinite', animationDelay: d + 's' }}>
              <svg viewBox="0 0 24 24" style={{ width: '100%', height: '100%', fill: '#006EDD', filter: 'drop-shadow(0 0 8px rgba(0,110,221,0.6))', animation: 'dmc-fly-spin 1.4s linear infinite', transformOrigin: 'center' }}><path d={SPARK_A} /></svg>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: '#5a6a8a' }}>
        <span style={{ animation: 'csv-count 1.6s ease-in-out infinite' }}>{label}</span>
        <span style={{ display: 'inline-flex', gap: 3 }}>{[0, 0.18, 0.36].map((d, i) => <span key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: '#006EDD', animation: `csv-dot 1.3s ease-in-out ${d}s infinite` }} />)}</span>
      </div>
    </div>
  );
}
window.DocsCreating = DocsCreating;

// «Разбираю таблицу» — таблица со скан-линией, частицы летят в поля-приёмники
function CsvParsing({ label = 'Разбираю таблицу' }) {
  const cells = Array.from({ length: 18 }, (_, i) => ({ head: Math.floor(i / 3) === 0 ? '#e2e8f4' : '#fff', delay: (Math.floor(i / 3) * 0.18 + (i % 3) * 0.05).toFixed(2) + 's' }));
  const fields = ['78%', '62%', '88%', '54%'].map((w, i) => ({ w, delay: (0.3 + i * 0.25) + 's', fillDelay: (0.5 + i * 0.25) + 's' }));
  const flies = [0, 0.45, 0.9, 1.35];
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 16, width: 320, padding: '8px 6px', fontFamily: 'var(--sans)' }}>
      <div style={{ display: 'flex', alignItems: 'stretch', gap: 36, position: 'relative', width: '100%', justifyContent: 'center' }}>
        <div style={{ position: 'relative', width: 120, flexShrink: 0 }}>
          <div style={{ position: 'relative', border: '1px solid #dfe4ec', borderRadius: 8, overflow: 'hidden', background: '#fff', boxShadow: '0 6px 16px -10px rgba(20,40,80,.25)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr' }}>
              {cells.map((c, i) => <div key={i} style={{ height: 14, borderRight: '1px solid #eef1f5', borderBottom: '1px solid #eef1f5', background: c.head, animation: 'csv-cell 1.6s ease-in-out infinite', animationDelay: c.delay }} />)}
            </div>
            <div style={{ position: 'absolute', left: 0, right: 0, height: 2, background: 'linear-gradient(90deg,transparent,#006EDD,transparent)', animation: 'csv-scan 1.6s ease-in-out infinite' }} />
          </div>
        </div>
        <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', pointerEvents: 'none', zIndex: 5 }}>
          {flies.map((d, i) => <div key={i} style={{ position: 'absolute', width: 7, height: 7, borderRadius: 2, background: '#006EDD', boxShadow: '0 0 6px rgba(0,110,221,.6)', offsetPath: "path('M 120 40 C 160 20, 180 90, 210 60')", animation: 'csv-fly 1.8s ease-in-out infinite', animationDelay: d + 's' }} />)}
        </div>
        <div style={{ width: 120, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
          {fields.map((fl, i) => (
            <div key={i} style={{ opacity: 0, animation: 'csv-row .4s ease both', animationDelay: fl.delay }}>
              <div style={{ height: 4, width: '44%', borderRadius: 3, background: '#c3ccdd', marginBottom: 4 }} />
              <div style={{ height: 15, border: '1px solid #dfe4ec', borderRadius: 5, background: '#fff', overflow: 'hidden', display: 'flex', alignItems: 'center', padding: '0 4px' }}>
                <div style={{ height: 4, borderRadius: 3, background: '#006EDD', width: fl.w, '--w': fl.w, animation: 'csv-fill .5s ease both', animationDelay: fl.fillDelay }} />
              </div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, fontWeight: 600, color: '#5a6a8a' }}>
        <span style={{ animation: 'csv-count 1.6s ease-in-out infinite' }}>{label}</span>
        <span style={{ display: 'inline-flex', gap: 3 }}>{[0, 0.18, 0.36].map((d, i) => <span key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: '#006EDD', animation: `csv-dot 1.3s ease-in-out ${d}s infinite` }} />)}</span>
      </div>
    </div>
  );
}
window.CsvParsing = CsvParsing;

// анимированный логотип DataDoc на приветственном экране
const DD_MARK = ['M40.7375 20.0967C40.2948 20.0967 39.9142 20.019 39.5958 19.8637C39.2773 19.7084 39.0327 19.487 38.8618 19.1997C38.6987 18.9045 38.6172 18.555 38.6172 18.1512C38.6172 17.7784 38.7026 17.4483 38.8735 17.1609C39.0443 16.8658 39.289 16.6328 39.6074 16.4619C39.9259 16.2911 40.3025 16.2056 40.7375 16.2056C41.2811 16.2056 41.7161 16.3299 42.0422 16.5784C42.3762 16.8192 42.6092 17.1532 42.7412 17.5803H42.0888V16.1241C42.0888 15.8833 42.0073 15.662 41.8442 15.46C41.6811 15.2581 41.3937 15.1571 40.9821 15.1571C40.7646 15.1571 40.5239 15.1843 40.2598 15.2387C40.0035 15.2853 39.7356 15.3707 39.456 15.495L39.1065 14.598C39.4249 14.4426 39.755 14.3261 40.0967 14.2485C40.4384 14.1708 40.7724 14.132 41.0986 14.132C41.5879 14.132 41.9918 14.2213 42.3102 14.3999C42.6286 14.5785 42.8655 14.8193 43.0208 15.1222C43.1762 15.4173 43.2538 15.7513 43.2538 16.1241V19.9336H42.415L42.1238 18.8968L42.7412 18.722C42.6014 19.1802 42.3529 19.5258 41.9956 19.7588C41.6384 19.9841 41.219 20.0967 40.7375 20.0967ZM40.9472 19.0599C41.2889 19.0599 41.5646 18.9822 41.7743 18.8269C41.984 18.6638 42.0888 18.4385 42.0888 18.1512C42.0888 17.856 41.984 17.6308 41.7743 17.4755C41.5646 17.3201 41.2889 17.2425 40.9472 17.2425C40.6054 17.2425 40.3297 17.3201 40.12 17.4755C39.9103 17.6308 39.8055 17.856 39.8055 18.1512C39.8055 18.4385 39.9103 18.6638 40.12 18.8269C40.3297 18.9822 40.6054 19.0599 40.9472 19.0599Z',
  'M35.8056 20.0384C35.3085 20.0384 34.9124 19.8947 34.6173 19.6073C34.3299 19.3122 34.1862 18.8579 34.1862 18.2443V14.3183V14.2484L34.4076 12.9669H35.3512V18.2676C35.3512 18.4851 35.4056 18.6482 35.5143 18.7569C35.6308 18.8656 35.7745 18.92 35.9454 18.92C36.0774 18.92 36.1939 18.9122 36.2949 18.8967C36.3958 18.8812 36.4851 18.8618 36.5628 18.8385V19.9219C36.4618 19.953 36.3492 19.9801 36.225 20.0034C36.1085 20.0267 35.9687 20.0384 35.8056 20.0384ZM33.3125 15.3202V14.2484H36.5628V15.3202H33.3125Z',
  'M28.7453 20.0967C28.3026 20.0967 27.922 20.019 27.6036 19.8637C27.2852 19.7084 27.0405 19.487 26.8696 19.1997C26.7065 18.9045 26.625 18.555 26.625 18.1512C26.625 17.7784 26.7104 17.4483 26.8813 17.1609C27.0522 16.8658 27.2968 16.6328 27.6152 16.4619C27.9337 16.2911 28.3103 16.2056 28.7453 16.2056C29.2889 16.2056 29.7239 16.3299 30.0501 16.5784C30.384 16.8192 30.617 17.1532 30.7491 17.5803H30.0967V16.1241C30.0967 15.8833 30.0151 15.662 29.852 15.46C29.6889 15.2581 29.4016 15.1571 28.9899 15.1571C28.7725 15.1571 28.5317 15.1843 28.2676 15.2387C28.0113 15.2853 27.7434 15.3707 27.4638 15.495L27.1143 14.598C27.4327 14.4426 27.7628 14.3261 28.1045 14.2485C28.4463 14.1708 28.7802 14.132 29.1064 14.132C29.5957 14.132 29.9996 14.2213 30.318 14.3999C30.6364 14.5785 30.8733 14.8193 31.0287 15.1222C31.184 15.4173 31.2616 15.7513 31.2616 16.1241V19.9336H30.4229L30.1316 18.8968L30.7491 18.722C30.6093 19.1802 30.3607 19.5258 30.0035 19.7588C29.6462 19.9841 29.2268 20.0967 28.7453 20.0967ZM28.955 19.0599C29.2967 19.0599 29.5724 18.9822 29.7821 18.8269C29.9918 18.6638 30.0967 18.4385 30.0967 18.1512C30.0967 17.856 29.9918 17.6308 29.7821 17.4755C29.5724 17.3201 29.2967 17.2425 28.955 17.2425C28.6132 17.2425 28.3375 17.3201 28.1278 17.4755C27.9181 17.6308 27.8133 17.856 27.8133 18.1512C27.8133 18.4385 27.9181 18.6638 28.1278 18.8269C28.3375 18.9822 28.6132 19.0599 28.955 19.0599Z',
  'M18 19.9336V12H20.6096C21.3707 12 22.0503 12.1592 22.6483 12.4776C23.2463 12.7961 23.7162 13.2543 24.0579 13.8523C24.3997 14.4426 24.5705 15.1532 24.5705 15.9843C24.5705 16.8308 24.3958 17.5492 24.0463 18.1395C23.7046 18.722 23.2347 19.1686 22.6366 19.4792C22.0386 19.7821 21.359 19.9336 20.5979 19.9336H18ZM19.165 19.0948L18.8155 18.8385H20.5397C21.06 18.8385 21.5299 18.7375 21.9493 18.5356C22.3765 18.3259 22.7182 18.0113 22.9745 17.5919C23.2308 17.1725 23.3589 16.6366 23.3589 15.9843C23.3589 15.3552 23.2308 14.827 22.9745 14.3999C22.726 13.9649 22.3881 13.6387 21.961 13.4213C21.5416 13.2038 21.0717 13.0951 20.5513 13.0951H18.7339L19.165 12.6757V19.0948Z',
  'M50.5631 42.7218C49.1819 42.7218 47.9663 42.4179 46.9166 41.8101C45.8852 41.2024 45.0749 40.3552 44.4856 39.2686C43.8962 38.182 43.6016 36.9481 43.6016 35.5668C43.6016 34.204 43.8962 32.9885 44.4856 31.9203C45.0749 30.8521 45.8852 30.0142 46.9166 29.4064C47.9663 28.7802 49.1819 28.4672 50.5631 28.4672C52.1285 28.4672 53.473 28.8447 54.5964 29.5998C55.7198 30.3549 56.521 31.3678 56.9998 32.6386L52.9941 34.4618C52.7547 33.9462 52.4508 33.5502 52.0825 33.274C51.7142 32.9793 51.2261 32.8319 50.6184 32.8319C49.9001 32.8319 49.2924 33.0806 48.7951 33.5778C48.3163 34.0751 48.0768 34.7381 48.0768 35.5668C48.0768 36.4324 48.3163 37.1139 48.7951 37.6111C49.2924 38.0899 49.9001 38.3294 50.6184 38.3294C51.2261 38.3294 51.7142 38.1912 52.0825 37.915C52.4508 37.6387 52.7547 37.252 52.9941 36.7547L56.9998 38.5227C56.521 39.7935 55.7106 40.8156 54.5688 41.5891C53.4454 42.3442 52.1101 42.7218 50.5631 42.7218Z',
  'M39.0221 42.7218C37.604 42.7218 36.3609 42.4179 35.2927 41.8101C34.2245 41.2024 33.3866 40.3644 32.7788 39.2963C32.1711 38.2281 31.8672 37.0034 31.8672 35.6221C31.8672 34.2224 32.1711 32.9885 32.7788 31.9203C33.3866 30.8521 34.2245 30.0142 35.2927 29.4064C36.3609 28.7802 37.604 28.4672 39.0221 28.4672C40.4586 28.4672 41.711 28.7802 42.7792 29.4064C43.8657 30.0142 44.7037 30.8521 45.293 31.9203C45.9008 32.9885 46.2047 34.2224 46.2047 35.6221C46.2047 37.0034 45.9008 38.2281 45.293 39.2963C44.7037 40.3644 43.8657 41.2024 42.7792 41.8101C41.711 42.4179 40.4586 42.7218 39.0221 42.7218ZM39.0221 38.357C39.7956 38.357 40.431 38.1084 40.9283 37.6111C41.4255 37.0954 41.6741 36.4232 41.6741 35.5945C41.6741 34.7657 41.4255 34.1027 40.9283 33.6055C40.431 33.0898 39.7956 32.8319 39.0221 32.8319C38.267 32.8319 37.6409 33.0898 37.1436 33.6055C36.6464 34.1027 36.3977 34.7657 36.3977 35.5945C36.3977 36.4048 36.6464 37.0678 37.1436 37.5835C37.6409 38.0992 38.267 38.357 39.0221 38.357Z',
  'M18 42.3626V23.5498H24.7129C26.7019 23.5498 28.4055 23.9273 29.8236 24.6824C31.2417 25.4191 32.3283 26.4873 33.0834 27.887C33.8385 29.2866 34.216 30.9718 34.216 32.9424C34.216 34.9314 33.8293 36.6257 33.0557 38.0254C32.3007 39.4251 31.2141 40.5025 29.796 41.2576C28.3779 41.9942 26.6743 42.3626 24.6853 42.3626H18ZM22.4753 39.8763L20.6244 38.0254H24.3814C25.4496 38.0254 26.3704 37.8597 27.144 37.5282C27.9359 37.1783 28.5436 36.6257 28.9672 35.8707C29.4092 35.1156 29.6302 34.1395 29.6302 32.9424C29.6302 31.7637 29.4184 30.806 28.9948 30.0694C28.5713 29.3143 27.9635 28.7618 27.1716 28.4118C26.3981 28.0619 25.4772 27.887 24.4091 27.887H20.431L22.4753 26.6438V39.8763Z'];
function WelcomeLogo({ size = 128 }) {
  const S = size;
  const spark = (top, right, bottom, left, w, delay) => (
    <svg viewBox="0 0 24 24" style={{ position: 'absolute', top: top != null ? S * top : undefined, right: right != null ? S * right : undefined, bottom: bottom != null ? S * bottom : undefined, left: left != null ? S * left : undefined, width: S * w, height: S * w, fill: 'white', opacity: 0, transformOrigin: 'center', animation: `dd-spark 3.4s ease-in-out ${delay}s infinite`, pointerEvents: 'none' }}>
      <path d="M12 0C12.6 5.4 14.6 7.4 20 8C14.6 8.6 12.6 10.6 12 16C11.4 10.6 9.4 8.6 4 8C9.4 7.4 11.4 5.4 12 0Z" />
    </svg>
  );
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px 0 4px', flex: '0 0 auto' }}>
      <div style={{ position: 'relative', width: S, height: S, display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'dd-breathe 5.2s ease-in-out 1.4s infinite' }}>
        <div style={{ position: 'relative', width: S, height: S, background: '#006EDD', borderRadius: '24%', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', animation: 'dd-square-in 1.15s cubic-bezier(0.34,1.56,0.64,1) both, dd-glow 5.2s ease-in-out 1.4s infinite' }}>
          <div style={{ opacity: 0, animation: 'dd-mark-rise 0.7s cubic-bezier(0.22,1,0.36,1) 0.62s both' }}>
            <svg width={S * 0.7} height={S * 0.507} viewBox="0 0 75 54" fill="none" xmlns="http://www.w3.org/2000/svg">
              {DD_MARK.map((d, i) => <path key={i} d={d} fill="white" />)}
            </svg>
          </div>
          {spark(0.10, 0.113, null, null, 0.226, 1.5)}
          {spark(0.22, 0.073, null, null, 0.12, 2.0)}
          {spark(null, null, 0.16, 0.127, 0.093, 2.5)}
          <div style={{ position: 'absolute', top: 0, left: 0, width: 40, height: '200%', background: 'linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.42) 50%,rgba(255,255,255,0) 100%)', animation: 'dd-sheen 5.2s ease-in-out 2.2s infinite', pointerEvents: 'none' }} />
        </div>
      </div>
    </div>
  );
}
window.WelcomeLogo = WelcomeLogo;