<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Submission Requires Manual Review</title>
  <style>
    /* Reset and base styles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      line-height: 1.6;
      color: #1a1a1a;
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
      background-size: 300% 300%;
      animation: gradientShift 15s ease infinite;
      min-height: 100vh;
      padding: 20px;
      margin: 0;
    }

    @keyframes gradientShift {
      0%, 100% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
    }

    /* Main container with glassmorphism */
    .email-container {
      max-width: 650px;
      margin: 40px auto;
      background: rgba(255, 255, 255, 0.97);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 
        0 32px 80px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
      position: relative;
    }

    /* Warning-style header */
    .header {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
      background-size: 200% 200%;
      animation: gradientShift 8s ease-in-out infinite;
      color: white;
      padding: 30px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .header::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
      background-size: 30px 30px;
      animation: backgroundMove 25s linear infinite;
      opacity: 0.2;
    }

    @keyframes backgroundMove {
      0% { transform: translateX(0) translateY(0); }
      100% { transform: translateX(-30px) translateY(-30px); }
    }

    .header h1 {
      font-size: 2.1rem;
      font-weight: 900;
      margin: 0;
      position: relative;
      z-index: 2;
      text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
    }

    .header h1::before {
      content: '⚠️';
      font-size: 1.8rem;
      animation: attention 2s ease-in-out infinite;
    }

    @keyframes attention {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .header-subtitle {
      font-size: 1rem;
      margin-top: 8px;
      opacity: 0.95;
      position: relative;
      z-index: 2;
      font-weight: 600;
    }

    /* Content area */
    .content {
      padding: 40px 30px;
      position: relative;
    }

    .warning-banner {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
      border: 2px solid rgba(245, 158, 11, 0.3);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 30px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      position: relative;
    }

    .warning-banner::before {
      content: '🔍';
      font-size: 1.5rem;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .warning-content {
      flex: 1;
    }

    .warning-title {
      font-weight: 700;
      color: #92400e;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }

    .warning-text {
      color: #a16207;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* Contact details grid */
    .review-grid {
      display: grid;
      gap: 24px;
      margin: 30px 0;
    }

    .review-field {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.04), rgba(245, 87, 108, 0.04));
      border: 1px solid rgba(102, 126, 234, 0.12);
      border-radius: 18px;
      padding: 24px;
      position: relative;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .review-field:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 35px rgba(102, 126, 234, 0.12);
      border-color: rgba(102, 126, 234, 0.2);
    }

    .field-label {
      font-size: 0.85rem;
      font-weight: 700;
      color: #4b5563;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .field-label.email::before { content: '📧'; font-size: 1.1rem; }
    .field-label.message::before { content: '💬'; font-size: 1.1rem; }
    .field-label.justification::before { content: '⚖️'; font-size: 1.1rem; }

    .field-value {
      background: rgba(255, 255, 255, 0.9);
      padding: 16px 20px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: #1f2937;
      font-weight: 500;
      word-break: break-word;
      line-height: 1.6;
    }

    .message-content, .justification-content {
      background: rgba(255, 255, 255, 0.95);
      padding: 20px;
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: #374151;
      line-height: 1.7;
      white-space: pre-wrap;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: 0.95rem;
      max-height: 180px;
      overflow-y: auto;
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .justification-content {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(217, 119, 6, 0.05));
      border-color: rgba(245, 158, 11, 0.2);
      color: #92400e;
      font-weight: 600;
    }

    /* Action section */
    .action-section {
      background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(239, 68, 68, 0.03));
      border: 1px solid rgba(220, 38, 38, 0.15);
      border-radius: 18px;
      padding: 28px;
      margin: 35px 0;
      text-align: center;
    }

    .action-title {
      font-size: 1.2rem;
      font-weight: 700;
      color: #dc2626;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }

    .action-title::before {
      content: '🎯';
      font-size: 1.3rem;
    }

    .action-description {
      color: #7f1d1d;
      margin-bottom: 24px;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .action-buttons {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .action-button {
      padding: 14px 28px;
      text-decoration: none;
      border-radius: 12px;
      font-weight: 700;
      font-size: 0.9rem;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      min-width: 120px;
      text-align: center;
    }

    .action-approve {
      background: linear-gradient(135deg, #10b981, #059669);
      color: white;
      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    }

    .action-reject {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
    }

    .action-investigate {
      background: rgba(245, 158, 11, 0.1);
      color: #92400e;
      border: 2px solid rgba(245, 158, 11, 0.3);
    }

    .action-button:hover {
      transform: translateY(-2px) scale(1.02);
    }

    .action-approve:hover {
      box-shadow: 0 15px 35px rgba(16, 185, 129, 0.4);
    }

    .action-reject:hover {
      box-shadow: 0 15px 35px rgba(239, 68, 68, 0.4);
    }

    .action-investigate:hover {
      background: rgba(245, 158, 11, 0.15);
      border-color: rgba(245, 158, 11, 0.4);
    }

    /* Footer */
    .footer {
      padding: 25px 30px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, rgba(254, 243, 199, 0.6), rgba(253, 230, 138, 0.4));
      text-align: center;
    }

    .footer-warning {
      font-size: 0.9rem;
      color: #92400e;
      font-weight: 600;
      margin-bottom: 8px;
    }

    .footer-note {
      font-size: 0.85rem;
      color: #a16207;
    }

    /* Priority indicator */
    .priority-review {
      position: absolute;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: white;
      padding: 8px 16px;
      border-radius: 25px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      animation: reviewPulse 3s ease-in-out infinite;
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
    }

    @keyframes reviewPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.8; transform: scale(1.05); }
    }

    /* Responsive design */
    @media (max-width: 640px) {
      body {
        padding: 10px;
      }
      
      .email-container {
        margin: 20px auto;
        border-radius: 20px;
      }
      
      .header, .content, .footer {
        padding: 20px;
      }
      
      .header h1 {
        font-size: 1.7rem;
        flex-direction: column;
        gap: 8px;
      }
      
      .action-buttons {
        flex-direction: column;
        align-items: center;
      }
      
      .action-button {
        width: 100%;
        max-width: 200px;
      }
      
      .warning-banner {
        flex-direction: column;
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <div class="email-container">
    <div class="priority-review">Manual Review</div>
    
    <!-- Header -->
    <div class="header">
      <h1>Review Required</h1>
      <div class="header-subtitle">Contact submission flagged for manual review</div>
    </div>
    
    <!-- Content -->
    <div class="content">
      <div class="warning-banner">
        <div class="warning-content">
          <div class="warning-title">Automated Review Alert</div>
          <div class="warning-text">
            This contact form submission has been flagged by our automated systems and requires manual review before processing. Please examine the content and take appropriate action.
          </div>
        </div>
      </div>
      
      <!-- Review Information -->
      <div class="review-grid">
        <div class="review-field">
          <div class="field-label email">Email Address</div>
          <div class="field-value">{{email}}</div>
        </div>
        
        <div class="review-field">
          <div class="field-label message">Message Content</div>
          <div class="message-content">{{message}}</div>
        </div>
        
        <div class="review-field">
          <div class="field-label justification">Review Justification</div>
          <div class="justification-content">{{justification}}</div>
        </div>
      </div>
    
    <!-- Footer -->
    <div class="footer">
      <div class="footer-warning">⚠️ This submission requires immediate attention</div>
      <div class="footer-note">365DevNet Automated Review System</div>
    </div>
  </div>
</body>
</html>