/* ── Phone mockup: live technician en route ───────────────────────────────
   Featured inside the Modules "live tracking" card. Restyled to the
   home-page design language — sentence-case labels, no aggressive mono,
   home tokens for paper/ink/accent. The phone itself sits inside the
   dark .module-feature background.
─────────────────────────────────────────────────────────────── */

function PhoneTrackingMockup() {
  return (
    <div className="ph-stage">
      <style>{PHONE_STYLE}</style>
      <div className="ph-bg">
        {/* subtle diagonal motion lines */}
        <svg viewBox="0 0 600 460" preserveAspectRatio="none" className="ph-motion">
          <g stroke="rgba(255,255,255,0.05)" strokeWidth="1" fill="none">
            <path d="M-50 240 Q 200 180 350 250 T 700 200" />
            <path d="M-50 290 Q 200 220 350 290 T 700 240" />
            <path d="M-50 340 Q 200 280 350 340 T 700 280" />
          </g>
        </svg>

        {/* phone */}
        <div className="ph-device">
          <div className="ph-notch" />
          <div className="ph-screen">
            {/* status bar */}
            <div className="ph-statusbar">
              <span className="ph-time">8:23</span>
              <span className="ph-sig">
                <i /><i /><i /><i />
              </span>
            </div>
            {/* header — client identity */}
            <div className="ph-header">
              <div className="ph-brand">
                <span className="ph-brand-mark" />
                <div>
                  <div className="ph-brand-name">Marlow &amp; Finch</div>
                  <div className="ph-brand-sub">123 Lyle Street</div>
                </div>
              </div>
              <span className="ph-live"><span className="live-dot" /> Live</span>
            </div>

            {/* map area */}
            <div className="ph-map">
              <svg viewBox="0 0 320 220" className="ph-map-svg">
                <g stroke="oklch(0.85 0.005 80)" strokeWidth="6" fill="none" strokeLinecap="round">
                  <path d="M-10 60 L 340 70" />
                  <path d="M-10 150 L 340 160" />
                  <path d="M 60 -10 L 70 230" />
                  <path d="M 200 -10 L 210 230" />
                  <path d="M 280 -10 L 290 230" />
                </g>
                <g stroke="oklch(0.92 0.005 80)" strokeWidth="3" fill="none" strokeLinecap="round">
                  <path d="M-10 100 L 340 105" />
                  <path d="M-10 190 L 340 195" />
                  <path d="M 130 -10 L 140 230" />
                </g>

                <rect x="80" y="80" width="40" height="40" rx="3" fill="oklch(0.93 0.01 80)" />
                <rect x="160" y="115" width="32" height="40" rx="3" fill="oklch(0.93 0.01 80)" />
                <rect x="220" y="80" width="55" height="25" rx="3" fill="oklch(0.92 0.02 145)" />

                <path
                  d="M 30 200 C 80 200, 80 100, 140 105 S 240 100, 250 60"
                  stroke="var(--accent)"
                  strokeWidth="2.2"
                  fill="none"
                  strokeLinecap="round"
                />
                <path
                  d="M 250 60 L 280 30"
                  stroke="var(--accent)"
                  strokeWidth="2.2"
                  fill="none"
                  strokeLinecap="round"
                  opacity="0.3"
                  strokeDasharray="3 5"
                />

                <g transform="translate(30 200)">
                  <circle r="11" fill="var(--accent)" opacity="0.18" />
                  <circle r="6" fill="var(--accent)" />
                  <circle r="2.5" fill="var(--paper)" />
                </g>
                <g transform="translate(280 30)">
                  <circle r="9" fill="oklch(0.32 0.06 250)" />
                  <circle r="3" fill="var(--paper)" />
                </g>
              </svg>
              <div className="ph-eta">
                <div className="ph-eta-l">
                  <span className="ph-eta-label">Technician en route</span>
                  <span className="ph-eta-time">6<small>min</small></span>
                </div>
                <div className="ph-tech">
                  <div className="ph-tech-av" />
                  <div>
                    <div className="ph-tech-name">Tariq M.</div>
                    <div className="ph-tech-role">Lifts certified · Van 04</div>
                  </div>
                </div>
              </div>
            </div>

            {/* request card */}
            <div className="ph-req">
              <div className="ph-req-row">
                <span className="ph-req-tag">REQ-04812 · Lift</span>
                <span className="ph-req-sla">P1 · 4h SLA</span>
              </div>
              <div className="ph-req-title">Lift 2 — stopped on Level 4</div>
              <div className="ph-req-steps">
                <span className="ph-step done">Logged</span>
                <span className="ph-step done">Dispatched</span>
                <span className="ph-step active">En route</span>
                <span className="ph-step">On site</span>
                <span className="ph-step">Resolved</span>
              </div>
            </div>
          </div>
        </div>

        {/* annotation rail */}
        <div className="ph-anno ph-anno-1">
          <span className="ph-anno-label">01 · Client-branded</span>
          <span className="ph-anno-line" />
        </div>
        <div className="ph-anno ph-anno-2">
          <span className="ph-anno-label">02 · Live tracking</span>
          <span className="ph-anno-line" />
        </div>
        <div className="ph-anno ph-anno-3">
          <span className="ph-anno-label">03 · Evidence trail</span>
          <span className="ph-anno-line" />
        </div>
      </div>
    </div>
  );
}

const PHONE_STYLE = `
  .ph-stage { width: 100%; height: 100%; min-height: 540px; position: relative; }
  .ph-bg {
    position: absolute; inset: 0;
    background: var(--ink);
    overflow: hidden;
  }
  .ph-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

  .ph-anno-label {
    font-family: var(--sans);
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
  }

  .ph-device {
    position: absolute;
    left: 38px; bottom: -56px;
    width: 280px; height: 540px;
    background: oklch(0.12 0.01 60);
    border-radius: 38px;
    padding: 10px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.05) inset,
      0 50px 80px -40px rgba(0,0,0,0.6),
      0 30px 60px -30px rgba(0,0,0,0.4);
  }
  .ph-notch {
    position: absolute;
    top: 18px; left: 50%; transform: translateX(-50%);
    width: 86px; height: 22px;
    background: oklch(0.06 0.01 60);
    border-radius: 14px;
    z-index: 2;
  }
  .ph-screen {
    width: 100%; height: 100%;
    background: var(--paper);
    border-radius: 30px;
    overflow: hidden;
    display: flex; flex-direction: column;
    font-family: var(--sans);
    color: var(--ink);
  }
  .ph-statusbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 22px 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
  }
  .ph-time { font-variant-numeric: tabular-nums; }
  .ph-sig { display: inline-flex; gap: 2px; align-items: flex-end; }
  .ph-sig i {
    width: 3px; background: var(--ink); border-radius: 1px;
    height: 4px;
  }
  .ph-sig i:nth-child(2) { height: 6px; }
  .ph-sig i:nth-child(3) { height: 8px; }
  .ph-sig i:nth-child(4) { height: 10px; }

  .ph-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 26px 18px 14px;
  }
  .ph-brand { display: flex; gap: 10px; align-items: center; }
  .ph-brand-mark {
    width: 28px; height: 28px;
    background: oklch(0.32 0.06 250);
    border-radius: 6px;
    position: relative;
  }
  .ph-brand-mark::after {
    content: ""; position: absolute; inset: 7px;
    background: oklch(0.96 0.02 80);
    border-radius: 2px;
  }
  .ph-brand-name { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.018em; }
  .ph-brand-sub { font-size: 11.5px; color: var(--ink-3); }
  .ph-live {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px;
    color: var(--accent-ink);
    font-weight: 500;
  }

  .ph-map {
    margin: 0 14px;
    border-radius: 14px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    overflow: hidden;
    position: relative;
  }
  .ph-map-svg { width: 100%; height: 160px; display: block; }
  .ph-eta {
    padding: 12px 14px;
    background: var(--paper);
    border-top: 1px solid var(--rule);
    display: flex; flex-direction: column; gap: 10px;
  }
  .ph-eta-l { display: flex; justify-content: space-between; align-items: baseline; }
  .ph-eta-label {
    font-size: 11.5px;
    color: var(--ink-3);
    font-weight: 500;
  }
  .ph-eta-time {
    font-family: var(--display);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }
  .ph-eta-time small { font-size: 11px; color: var(--ink-3); margin-left: 2px; font-weight: 500; }
  .ph-tech { display: flex; gap: 10px; align-items: center; padding-top: 10px; border-top: 1px dashed var(--rule); }
  .ph-tech-av {
    width: 26px; height: 26px; border-radius: 50%;
    background:
      radial-gradient(circle at 40% 30%, oklch(0.7 0.04 50) 0%, oklch(0.45 0.04 50) 100%);
    border: 1px solid var(--rule);
    flex-shrink: 0;
  }
  .ph-tech-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .ph-tech-role { font-size: 11px; color: var(--ink-3); }

  .ph-req {
    margin: 12px 14px 14px;
    padding: 12px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .ph-req-row { display: flex; justify-content: space-between; align-items: baseline; }
  .ph-req-tag {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-3);
  }
  .ph-req-sla {
    font-size: 11px;
    color: oklch(50% 0.18 30);
    font-weight: 600;
  }
  .ph-req-title { font-family: var(--display); font-size: 14px; font-weight: 600; letter-spacing: -0.018em; }
  .ph-req-steps { display: flex; gap: 4px; flex-wrap: wrap; }
  .ph-step {
    font-size: 10.5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-3);
    border: 1px solid var(--rule);
  }
  .ph-step.done { background: var(--paper-2); color: var(--ink-2); }
  .ph-step.active {
    background: var(--ink);
    color: oklch(85% 0.10 160);
    border-color: var(--ink);
    font-weight: 500;
  }

  /* Annotation rail */
  .ph-anno {
    position: absolute;
    right: 30px;
    display: flex; align-items: center; gap: 12px;
  }
  .ph-anno-line {
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 100%);
  }
  .ph-anno-1 { top: 60px; }
  .ph-anno-2 { top: 184px; }
  .ph-anno-3 { top: 332px; }

  @media (max-width: 1100px) {
    .ph-stage { min-height: 600px; }
    .ph-device { position: relative; left: 50%; transform: translateX(-50%); bottom: 0; margin-top: 32px; }
    .ph-anno { display: none; }
  }
  @media (max-width: 700px) {
    .ph-device { transform: translateX(-50%) scale(0.92); transform-origin: center top; }
  }
`;

window.PhoneTrackingMockup = PhoneTrackingMockup;