/* global React, useLang */
const TotalSolution = () => {
  const { t } = window.useLang();
  return (
    <section id="solution" data-screen-label="04 Solution">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow"><span className="dot"></span>{t("ts.eyebrow")}</div>
          <h2>{t("ts.title1")}<br />{t("ts.title2")}</h2>
          <p>
            {t("ts.desc.before")}<strong style={{ color: "var(--ink)" }}>{t("ts.desc.hw")}</strong>
            {t("ts.desc.mid")}<strong style={{ color: "var(--ink)" }}>{t("ts.desc.cloud")}</strong>
            {t("ts.desc.and")}<strong style={{ color: "var(--ink)" }}>{t("ts.desc.notify")}</strong>
            {t("ts.desc.after")}
          </p>
        </div>

        <div className="ts-stage reveal">
          <svg className="ts-paths" viewBox="0 0 1200 360" preserveAspectRatio="none" aria-hidden="true">
            <path d="M 175 180 C 260 180, 280 180, 360 180" className="ts-line" />
            <path d="M 510 180 C 590 180, 610 180, 690 180" className="ts-line" />
            <path d="M 840 180 C 920 180, 940 140, 1025 110" className="ts-line" />
            <path d="M 840 180 C 920 180, 940 220, 1025 250" className="ts-line" />
            <circle r="4" fill="var(--accent)" className="ts-dot ts-dot-1">
              <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto"
                path="M 175 180 C 260 180, 280 180, 360 180 L 510 180 C 590 180, 610 180, 690 180 L 840 180 C 920 180, 940 140, 1025 110" />
            </circle>
            <circle r="4" fill="var(--accent)" className="ts-dot ts-dot-2">
              <animateMotion dur="3.6s" begin="1.2s" repeatCount="indefinite" rotate="auto"
                path="M 175 180 C 260 180, 280 180, 360 180 L 510 180 C 590 180, 610 180, 690 180 L 840 180 C 920 180, 940 220, 1025 250" />
            </circle>
          </svg>

          <div className="ts-flow">
            <div className="ts-node ts-node-sim">
              <div className="ts-step">01</div>
              <div className="ts-icon">
                <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M19 21H5a2 2 0 0 1-2-2V8l5-5h11a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2z" />
                  <path d="M8 10h8M8 14h8M10 18h4" />
                </svg>
              </div>
              <div className="ts-label">{t("ts.sim.label")}</div>
              <div className="ts-desc">{t("ts.sim.desc")}</div>
              <div className="ts-meta mono">{t("ts.sim.meta")}</div>
            </div>

            <span className="ts-link">
              <span className="ts-flow-dot"></span>
              <span className="ts-link-lbl">{t("ts.link.insert")}</span>
            </span>

            <div className="ts-node ts-node-gw">
              <div className="ts-badge">{t("ts.gw.badge")}</div>
              <div className="ts-step">02</div>
              <div className="ts-icon ts-icon-hw">
                <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="6" width="18" height="12" rx="2" />
                  <path d="M7 10h.01M11 10h.01M15 10h.01M7 14h6" />
                  <path d="M19 14h2M19 14a2 2 0 0 1 0-4" />
                </svg>
              </div>
              <div className="ts-label">{t("ts.gw.label")}</div>
              <div className="ts-desc">{t("ts.gw.desc")}</div>
              <div className="ts-meta mono">{t("ts.gw.meta")}</div>
              <div className="ts-hw">
                <div className="ts-hw-led"><span /><span /><span /></div>
                <div className="ts-hw-slots"><span /><span /><span /><span /></div>
                <div className="ts-hw-name mono">SEAMEW · GW-4G</div>
              </div>
            </div>

            <span className="ts-link">
              <span className="ts-flow-dot" style={{ animationDelay: "1.2s" }}></span>
              <span className="ts-link-lbl">{t("ts.link.wifi")}</span>
            </span>

            <div className="ts-node ts-node-cloud">
              <div className="ts-step">03</div>
              <div className="ts-icon">
                <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z" />
                </svg>
              </div>
              <div className="ts-label">{t("ts.cloud.label")}</div>
              <div className="ts-desc">{t("ts.cloud.desc")}</div>
              <div className="ts-meta mono">{t("ts.cloud.meta")}</div>
            </div>

            <span className="ts-link">
              <span className="ts-flow-dot" style={{ animationDelay: "2.4s" }}></span>
              <span className="ts-link-lbl">{t("ts.link.route")}</span>
            </span>

            <div className="ts-outputs">
              <div className="ts-output ts-output-tg">
                <div className="ts-step">04a</div>
                <div className="ts-out-head">
                  <span className="ts-out-icon ts-out-icon-tg">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M21.5 4.5 18.7 19c-.2 1-.8 1.2-1.6.7l-4.5-3.3-2.2 2.1c-.2.2-.5.4-1 .4l.3-4.6 8.4-7.6c.4-.3-.1-.5-.5-.2L7.2 13l-4.4-1.4c-1-.3-1-1 .2-1.5L20.1 3.6c.8-.3 1.5.2 1.4.9z" />
                    </svg>
                  </span>
                  <div>
                    <div className="ts-out-label">{t("ts.tg.label")}</div>
                    <div className="ts-out-sub mono">{t("ts.tg.sub")}</div>
                  </div>
                </div>
                <div className="ts-tg-msg">
                  <div className="ts-tg-from">📨 Seamew Bot</div>
                  <div className="ts-tg-body">
                    <span className="mono" style={{ color: "var(--ink-mute)", fontSize: 11 }}>0987-***-321</span><br />
                    {t("ts.tg.code")} <strong>482931</strong>
                  </div>
                </div>
              </div>

              <div className="ts-output ts-output-web">
                <div className="ts-step">04b</div>
                <div className="ts-out-head">
                  <span className="ts-out-icon ts-out-icon-web">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="3" width="20" height="14" rx="2" />
                      <path d="M8 21h8M12 17v4" />
                    </svg>
                  </span>
                  <div>
                    <div className="ts-out-label">{t("ts.web.label")}</div>
                    <div className="ts-out-sub mono">{t("ts.web.sub")}</div>
                  </div>
                </div>
                <div className="ts-web-rows">
                  <div className="ts-web-row"><span className="ts-web-dot" /><span className="mono">0987</span><span>{t("ts.web.row1")}</span></div>
                  <div className="ts-web-row"><span className="ts-web-dot" /><span className="mono">0912</span><span>{t("ts.web.row2")}</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="ts-values reveal">
          <div className="ts-value"><div className="ts-value-num mono">01</div><div className="ts-value-title">{t("ts.value1.title")}</div><div className="ts-value-desc">{t("ts.value1.desc")}</div></div>
          <div className="ts-value"><div className="ts-value-num mono">02</div><div className="ts-value-title">{t("ts.value2.title")}</div><div className="ts-value-desc">{t("ts.value2.desc")}</div></div>
          <div className="ts-value"><div className="ts-value-num mono">03</div><div className="ts-value-title">{t("ts.value3.title")}</div><div className="ts-value-desc">{t("ts.value3.desc")}</div></div>
        </div>
      </div>
    </section>
  );
};

window.TotalSolution = TotalSolution;