"""
src/ui/components.py — Reusable HTML components for the Codevally VLA UI.

Each constant is a self-contained HTML string ready to drop into a
``gr.HTML()`` call. Keeping HTML here avoids polluting layout.py with
long inline strings.
"""

HEADER_HTML: str = """
<div class="cv-header">
  <div style="display:flex; align-items:center; gap:16px; margin-bottom:14px;
              position:relative; z-index:1;">
    <div style="width:44px; height:44px;
                background:linear-gradient(135deg,#1A4BDB,#00D4FF);
                border-radius:12px; display:flex; align-items:center;
                justify-content:center; font-size:22px; flex-shrink:0;
                box-shadow:0 4px 16px rgba(0,212,255,0.3);">🤖</div>
    <div>
      <div style="font-size:22px; font-weight:700; color:#fff;
                  letter-spacing:-0.01em; line-height:1.2;">
        Vision Language Action
      </div>
      <div style="font-size:13px; color:rgba(255,255,255,0.5); margin-top:2px;">
        Powered by
        <a href="https://www.codevally.com" target="_blank"
           style="color:#00D4FF; font-weight:600; text-decoration:none;">
          Codevally
        </a>
        &nbsp;·&nbsp; Open Vocabulary Detection + LLM Reasoning
      </div>
    </div>
    <div style="margin-left:auto; display:flex; flex-direction:column;
                align-items:flex-end; gap:6px; position:relative; z-index:1;">
      <a href="https://www.codevally.com" target="_blank"
         style="background:rgba(0,212,255,0.12); border:1px solid rgba(0,212,255,0.35);
                border-radius:8px; padding:7px 18px; color:#00D4FF; font-size:13px;
                font-weight:600; text-decoration:none; letter-spacing:0.02em;
                transition:background 0.2s;"
         onmouseover="this.style.background='rgba(0,212,255,0.2)'"
         onmouseout="this.style.background='rgba(0,212,255,0.12)'">
        🌐 codevally.com
      </a>
    </div>
  </div>

  <p style="font-size:14px; color:rgba(255,255,255,0.6); max-width:760px;
            line-height:1.7; margin:0 0 14px; position:relative; z-index:1;">
    An enterprise-grade
    <strong style="color:rgba(255,255,255,0.85);">
      Vision Language Action (VLA) pipeline
    </strong>
    that understands any natural-language instruction, detects objects using
    open vocabulary AI, generates structured action plans, and visualizes
    robotic task execution — all in real time.
  </p>

  <div style="display:flex; flex-wrap:wrap; gap:6px;
              position:relative; z-index:1; margin-bottom:0;">
    <span class="cv-badge">🔍 Grounding DINO</span>
    <span class="cv-badge">🧠 GPT-4o</span>
    <span class="cv-badge">🎯 Open Vocabulary</span>
    <span class="cv-badge">⚡ Real-time Inference</span>
    <span class="cv-badge">🤖 Action Planning</span>
    <span class="cv-badge">🏭 Industrial AI</span>
  </div>

  <div class="how-it-works">
    <div class="hiw-step">
      <span class="hiw-icon">📸</span>
      <span class="hiw-label">Vision</span>
      Open vocabulary object detection
    </div>
    <div class="hiw-step">
      <span class="hiw-icon">🧠</span>
      <span class="hiw-label">Language</span>
      LLM command interpretation
    </div>
    <div class="hiw-step">
      <span class="hiw-icon">📋</span>
      <span class="hiw-label">Planning</span>
      Structured action steps
    </div>
    <div class="hiw-step">
      <span class="hiw-icon">🎬</span>
      <span class="hiw-label">Action</span>
      Annotated visualization
    </div>
  </div>
</div>
"""

FOOTER_HTML: str = """
<div class="cv-footer">
  Built by
  <a href="https://www.codevally.com" target="_blank">Codevally</a>
  &nbsp;·&nbsp; Vision Language Action AI Platform
  &nbsp;·&nbsp; © 2026 Codevally Technologies
</div>
"""