// Mobile push mockup + flow diagram for Trevoga.

const PhoneMockup = () => (
  <div className="phone" role="img" aria-label="iPhone showing critical alert push notification from Trevoga">
    <div className="phone-screen">
      <div className="phone-notch" />
      <div className="phone-statusbar">
        <span className="phone-time">3:47</span>
        <span className="phone-status-icons">
          {/* signal */}
          <svg width="17" height="11" viewBox="0 0 17 11" fill="none">
            <rect x="0" y="7" width="3" height="4" rx="0.5" fill="white"/>
            <rect x="4.5" y="5" width="3" height="6" rx="0.5" fill="white"/>
            <rect x="9" y="3" width="3" height="8" rx="0.5" fill="white"/>
            <rect x="13.5" y="0" width="3" height="11" rx="0.5" fill="white"/>
          </svg>
          {/* wifi */}
          <svg width="15" height="11" viewBox="0 0 15 11" fill="none" style={{ marginLeft: 4 }}>
            <path d="M7.5 9.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0-4c1.4 0 2.7.5 3.7 1.4l1-1.1c-1.3-1.1-3-1.8-4.7-1.8s-3.4.7-4.7 1.8l1 1.1c1-.9 2.3-1.4 3.7-1.4zm0-4c2.4 0 4.6.9 6.3 2.4l1-1.1C12.8.9 10.2 0 7.5 0S2.2.9.2 2.8l1 1.1C2.9 2.4 5.1 1.5 7.5 1.5z" fill="white"/>
          </svg>
          {/* battery */}
          <svg width="26" height="11" viewBox="0 0 26 11" fill="none" style={{ marginLeft: 4 }}>
            <rect x="0.5" y="0.5" width="22" height="10" rx="2" stroke="white" strokeOpacity="0.6"/>
            <rect x="2" y="2" width="19" height="7" rx="1" fill="white"/>
            <rect x="23" y="3.5" width="2" height="4" rx="0.5" fill="white" fillOpacity="0.6"/>
          </svg>
        </span>
      </div>

      <div className="phone-lock">
        <div className="phone-date">пятница, 9 мая</div>
        <div className="phone-clock">3:47</div>
      </div>

      <div className="notif-stack">
        <div className="notif notif-critical">
          <div className="notif-icon">
            <IconAlert size={18} strokeWidth={2.4} />
          </div>
          <div className="notif-body">
            <div className="notif-title-row">
              <span>TREVOGA · P1</span>
              <span className="notif-time">3:47</span>
            </div>
            <div className="notif-headline">api-prod-eu down</div>
            <div className="notif-msg">HTTP 5xx rate 47% · #A3F9C1</div>
            <div className="notif-actions">
              <div className="notif-act primary">ACK</div>
              <div className="notif-act">Эскалировать</div>
            </div>
          </div>
        </div>

        <div className="notif">
          <div className="notif-icon" style={{ background: 'rgba(220, 53, 69, 0.25)' }}>
            <IconBell size={16} strokeWidth={2} />
          </div>
          <div className="notif-body">
            <div className="notif-title-row" style={{ opacity: 0.85 }}>
              <span style={{ textTransform: 'none', letterSpacing: 0, fontWeight: 600 }}>Trevoga</span>
              <span className="notif-time">3:46</span>
            </div>
            <div style={{ fontSize: 13, opacity: 0.85, marginTop: 2 }}>
              Alertmanager · firing: HighErrorRate
            </div>
          </div>
        </div>
      </div>

      <div className="phone-home" />
    </div>
  </div>
);

// ─── Flow diagram ─────────────────────────────────────────────────

const FlowDiagram = () => {
  const sources = [
    { name: 'Prometheus', Logo: LogoPrometheus },
    { name: 'Alertmanager', Logo: LogoAlertmanager },
    { name: 'Grafana', Logo: LogoGrafana },
    { name: 'Webhook', Logo: LogoWebhook },
  ];

  const channels = [
    { name: 'Mobile app', Icon: IconBellRing },
    { name: 'SMS', Icon: IconMessageSquare },
    { name: 'Voice', Icon: IconPhone },
    { name: 'Telegram', Icon: () => <LogoTelegram /> },
    { name: 'Email', Icon: IconMail },
  ];

  return (
    <div className="flow-diagram">
      <svg
        viewBox="0 0 1160 420"
        width="100%"
        height="420"
        preserveAspectRatio="xMidYMid meet"
        style={{ display: 'block' }}
      >
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
            <path d="M0,0 L10,5 L0,10 z" fill="#dc3545" />
          </marker>
          <linearGradient id="line-grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#2a2a35" />
            <stop offset="50%" stopColor="#dc3545" stopOpacity="0.9" />
            <stop offset="100%" stopColor="#2a2a35" />
          </linearGradient>
        </defs>

        {/* sources column boxes */}
        {sources.map((s, i) => {
          const y = 60 + i * 70;
          return (
            <g key={s.name}>
              <rect x="12" y={y} width="220" height="52" rx="6"
                    fill="#0f0f14" stroke="#1f1f27" />
              <foreignObject x="22" y={y + 8} width="36" height="36">
                <div xmlns="http://www.w3.org/1999/xhtml" style={{ width: 36, height: 36 }}>
                  <div style={{ transform: 'scale(0.9)', transformOrigin: '0 0' }}>
                    <s.Logo />
                  </div>
                </div>
              </foreignObject>
              <text x="68" y={y + 24} fill="#ededf2" fontSize="14" fontFamily="Inter, system-ui" fontWeight="500">
                {s.name}
              </text>
              <text x="68" y={y + 41} fill="#6c6c7a" fontSize="11" fontFamily="JetBrains Mono, monospace">
                webhook
              </text>
              {/* arrow source -> trevoga */}
              <line x1="232" y1={y + 26} x2="448" y2="210"
                    stroke="#2a2a35" strokeWidth="1" />
            </g>
          );
        })}

        {/* Trevoga center box */}
        <g>
          <rect x="448" y="120" width="264" height="180" rx="10"
                fill="#0d0d11" stroke="#dc3545" strokeWidth="1.5" />
          <rect x="448" y="120" width="264" height="180" rx="10"
                fill="url(#center-gradient)" opacity="0.15" />
          <defs>
            <radialGradient id="center-gradient" cx="50%" cy="0%" r="80%">
              <stop offset="0%" stopColor="#dc3545" />
              <stop offset="100%" stopColor="transparent" />
            </radialGradient>
          </defs>

          {/* triangle mark */}
          <g transform="translate(580, 152)">
            <path d="M0 -16 L14 8 L-14 8 Z" fill="#dc3545" stroke="#dc3545" strokeWidth="1" strokeLinejoin="round" />
            <rect x="-1.2" y="-7" width="2.4" height="9" rx="1.2" fill="#0a0a0e" />
            <circle cx="0" cy="6" r="1.4" fill="#0a0a0e" />
          </g>

          <text x="580" y="200" textAnchor="middle" fill="#ededf2" fontSize="20" fontFamily="JetBrains Mono, monospace" fontWeight="500">
            trevoga
          </text>
          <text x="580" y="222" textAnchor="middle" fill="#a8a8b3" fontSize="12" fontFamily="Inter, system-ui">
            расписание · эскалация · ACK
          </text>

          {/* status row */}
          <g fontFamily="JetBrains Mono, monospace" fontSize="10.5">
            <rect x="458" y="248" width="244" height="36" rx="4" fill="#07070a" stroke="#1f1f27" />
            <circle cx="472" cy="266" r="3" fill="#dc3545">
              <animate attributeName="opacity" values="1;0.3;1" dur="1.4s" repeatCount="indefinite" />
            </circle>
            <text x="484" y="270" fill="#dc3545">@ivanov</text>
            <text x="540" y="270" fill="#6c6c7a">esc 5m →</text>
            <text x="608" y="270" fill="#a8a8b3">@petrov</text>
          </g>
        </g>

        {/* channels column */}
        {channels.map((c, i) => {
          const y = 24 + i * 70;
          const Ico = c.Icon;
          return (
            <g key={c.name}>
              <rect x="928" y={y} width="220" height="52" rx="6"
                    fill="#0f0f14" stroke="#1f1f27" />
              <foreignObject x="938" y={y + 8} width="36" height="36">
                <div xmlns="http://www.w3.org/1999/xhtml" style={{ width: 36, height: 36, display: 'grid', placeItems: 'center', color: '#dc3545' }}>
                  <Ico size={20} strokeWidth={1.8} />
                </div>
              </foreignObject>
              <text x="984" y={y + 24} fill="#ededf2" fontSize="14" fontFamily="Inter, system-ui" fontWeight="500">
                {c.name}
              </text>
              <text x="984" y={y + 41} fill="#6c6c7a" fontSize="11" fontFamily="JetBrains Mono, monospace">
                {['iOS · Android', 'РФ провайдер', 'РФ провайдер', 'bot · DM', 'smtp'][i]}
              </text>
              {/* arrow trevoga -> channel */}
              <line x1="712" y1="210" x2="928" y2={y + 26}
                    stroke="#2a2a35" strokeWidth="1" />
            </g>
          );
        })}

        {/* labels */}
        <text x="122" y="14" textAnchor="middle" fill="#6c6c7a" fontSize="10.5" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">
          ИСТОЧНИКИ
        </text>
        <text x="580" y="108" textAnchor="middle" fill="#dc3545" fontSize="10.5" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">
          TREVOGA · CORE
        </text>
        <text x="1038" y="14" textAnchor="middle" fill="#6c6c7a" fontSize="10.5" fontFamily="JetBrains Mono, monospace" letterSpacing="1.2">
          КАНАЛЫ
        </text>
      </svg>
    </div>
  );
};

Object.assign(window, { PhoneMockup, FlowDiagram });