<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Contact Form Submission</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, #1e293b 0%, #334155 50%, #475569 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: 700px;
      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;
    }

    /* Alert-style header */
    .header {
      background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 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: 25px 25px;
      animation: backgroundMove 20s linear infinite;
      opacity: 0.3;
    }

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

    .header h1 {
      font-size: 2.2rem;
      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;
    }

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

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

    .alert-banner {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(248, 113, 113, 0.05));
      border: 1px solid rgba(239, 68, 68, 0.2);
      border-radius: 12px;
      padding: 16px 20px;
      margin-bottom: 30px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #dc2626;
    }

    .alert-banner::before {
      content: '⚡';
      font-size: 1.2rem;
    }

    /* Professional contact display */
    .contact-display {
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(245, 87, 108, 0.03));
      border: 1px solid rgba(102, 126, 234, 0.1);
      border-radius: 20px;
      padding: 30px;
      margin: 30px 0;
      position: relative;
      backdrop-filter: blur(10px);
    }

    .contact-header {
      margin-bottom: 25px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .contact-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 8px 0;
    }

    .contact-subtitle {
      font-size: 1rem;
      color: #6b7280;
      font-weight: 500;
    }

    .message-section {
      margin: 25px 0;
    }

    .message-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #374151;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .message-title::before {
      content: '💬';
      font-size: 1.1rem;
    }

    .response-section {
      margin: 25px 0;
    }

    .response-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #374151;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .response-title::before {
      content: '✍️';
      font-size: 1.1rem;
    }

    .response-area {
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      color: #6b7280;
      font-style: italic;
      min-height: 80px;
      line-height: 1.6;
    }

    .message-content {
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.05);
      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: 200px;
      overflow-y: auto;
    }

    /* Collapsible technical details */
    .meta-details {
      margin: 30px 0;
      border: 1px solid rgba(107, 114, 128, 0.2);
      border-radius: 12px;
      overflow: hidden;
    }

    .meta-summary {
      background: linear-gradient(135deg, rgba(107, 114, 128, 0.08), rgba(75, 85, 99, 0.05));
      padding: 16px 20px;
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.3s ease;
    }

    .meta-summary:hover {
      background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(75, 85, 99, 0.08));
    }

    .meta-summary::after {
      content: '▼';
      font-size: 0.8rem;
      color: #6b7280;
      transition: transform 0.3s ease;
    }

    .meta-details[open] .meta-summary::after {
      transform: rotate(180deg);
    }

    .meta-details .meta-section {
      background: rgba(248, 250, 252, 0.8);
      border: none;
      border-radius: 0;
      margin: 0;
      padding: 20px;
    }

    .meta-grid {
      display: grid;
      gap: 12px;
    }

    .meta-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .meta-item:last-child {
      border-bottom: none;
    }

    .meta-label {
      font-weight: 600;
      color: #6b7280;
      font-size: 0.9rem;
    }

    .meta-value {
      color: #374151;
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
      font-size: 0.85rem;
      text-align: right;
      max-width: 60%;
      word-break: break-all;
    }

    /* Action buttons */
    .action-section {
      display: flex;
      gap: 12px;
      margin: 30px 0;
      flex-wrap: wrap;
    }

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

    .action-primary {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .action-secondary {
      background: rgba(107, 114, 128, 0.1);
      color: #374151;
      border: 2px solid rgba(107, 114, 128, 0.2);
    }

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

    .action-primary:hover {
      box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
    }

    .action-secondary:hover {
      background: rgba(107, 114, 128, 0.15);
      border-color: rgba(107, 114, 128, 0.3);
    }

    /* Footer */
    .footer {
      padding: 25px 30px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      background: linear-gradient(135deg, rgba(248, 250, 252, 0.8), rgba(241, 245, 249, 0.8));
      text-align: center;
      font-size: 0.9rem;
      color: #6b7280;
    }

    .footer-note {
      margin-bottom: 8px;
    }

    .footer-website {
      font-weight: 600;
      background: linear-gradient(135deg, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Priority indicator */
    .priority-high {
      position: absolute;
      top: 20px;
      right: 20px;
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }

    /* 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.8rem;
      }
      
      .action-section {
        flex-direction: column;
      }
      
      .action-button {
        min-width: auto;
      }
      
      .meta-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }
      
      .meta-value {
        max-width: 100%;
        text-align: left;
      }
    }
  </style>
</head>
<body>
  <div class="email-container">
    <div class="priority-high">New Submission</div>
    
    <!-- Header -->
    <div class="header">
      <h1>Contact Form Alert</h1>
      <div class="header-subtitle">New message received on 365DevNet</div>
    </div>
    
    <!-- Content -->
    <div class="content">
      <div class="alert-banner">
        A new contact form submission requires your attention
      </div>
      
      <!-- Professional Contact Display (Forward-Friendly) -->
      <div class="contact-display">
        <div class="contact-header">
          <h2 class="contact-title">New Contact from {{name}}</h2>
          <div class="contact-subtitle">{{email}} • {{time}}</div>
        </div>
        
        <div class="message-section">
          <div class="message-title">Message</div>
          <div class="message-content">{{message}}</div>
        </div>
        
        <div class="response-section">
          <div class="response-title">Response Notes</div>
          <div class="response-area">
            <p><em>Use this space to draft your response or add internal notes before replying...</em></p>
            <br><br><br>
          </div>
        </div>
      </div>
      
      <!-- Quick Actions -->
      <div class="action-section">
        <a href="mailto:{{email}}?subject=Re: Your message to 365DevNet&body=Hi {{name}},%0A%0AThank you for contacting 365DevNet. %0A%0A[Your response here]%0A%0ABest regards,%0ARichard Bergsma%0A365DevNet" class="action-button action-primary">Reply to {{name}}</a>
      </div>
      
      <!-- Technical Details (Collapsible) -->
      <details class="meta-details">
        <summary class="meta-summary">
          <span class="meta-title">Technical Information</span>
        </summary>
        <div class="meta-section">
          <div class="meta-grid">
            <div class="meta-item">
              <span class="meta-label">IP Address:</span>
              <span class="meta-value">{{ipAddress}}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">User Agent:</span>
              <span class="meta-value">{{userAgent}}</span>
            </div>
            <div class="meta-item">
              <span class="meta-label">Submission Time:</span>
              <span class="meta-value">{{time}}</span>
            </div>
          </div>
        </div>
      </details>
    </div>
    
    <!-- Footer -->
    <div class="footer">
      <div class="footer-note">This notification was sent from the contact form on</div>
      <div class="footer-website">{{websiteName}}</div>
    </div>
  </div>
</body>
</html>