<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thank You for Contacting GNX</title>
    <style>
        * {
            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.7;
            color: #2c3e50;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin: 0;
            padding: 40px 20px;
        }
        
        .email-wrapper {
            max-width: 650px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
        }
        
        .email-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #8b5cf6 100%);
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        .email-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            animation: pulse 8s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.1); opacity: 0.8; }
        }
        
        .email-header h1 {
            color: #ffffff;
            font-size: 32px;
            font-weight: 700;
            margin: 0;
            position: relative;
            z-index: 2;
            letter-spacing: -0.5px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .email-header .subtitle {
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            margin-top: 12px;
            font-weight: 300;
            position: relative;
            z-index: 2;
        }
        
        .email-body {
            padding: 50px 40px;
            background: #ffffff;
        }
        
        .greeting {
            font-size: 20px;
            color: #1e293b;
            margin-bottom: 30px;
            font-weight: 600;
        }
        
        .intro-text {
            font-size: 16px;
            color: #475569;
            line-height: 1.9;
            margin-bottom: 40px;
        }
        
        .thank-you-box {
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(102, 126, 234, 0.03) 100%);
            border: 2px solid rgba(102, 126, 234, 0.2);
            border-left: 5px solid #667eea;
            padding: 30px;
            margin: 35px 0;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(102, 126, 234, 0.1);
        }
        
        .thank-you-box .icon {
            font-size: 48px;
            margin-bottom: 15px;
        }
        
        .thank-you-box h2 {
            color: #1e293b;
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .thank-you-box p {
            color: #475569;
            font-size: 15px;
            line-height: 1.7;
            margin: 0;
        }
        
        .details-box {
            background: linear-gradient(135deg, rgba(218, 165, 32, 0.08) 0%, rgba(218, 165, 32, 0.03) 100%);
            border: 2px solid rgba(218, 165, 32, 0.2);
            border-left: 5px solid #daa520;
            padding: 30px;
            margin: 35px 0;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(218, 165, 32, 0.1);
        }
        
        .details-box h3 {
            font-size: 18px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 25px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(218, 165, 32, 0.2);
        }
        
        .details-list {
            list-style: none;
            padding: 0;
        }
        
        .details-list li {
            padding: 15px 0;
            border-bottom: 1px solid rgba(218, 165, 32, 0.1);
            display: flex;
            align-items: flex-start;
        }
        
        .details-list li:last-child {
            border-bottom: none;
        }
        
        .details-list strong {
            color: #475569;
            min-width: 140px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .details-list span {
            color: #1e293b;
            font-size: 15px;
            font-weight: 500;
            flex: 1;
        }
        
        .next-steps {
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border-left: 4px solid #667eea;
            padding: 30px;
            border-radius: 12px;
            margin-top: 40px;
        }
        
        .next-steps h3 {
            color: #0f172a;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .next-steps h3::before {
            content: '⏰';
            margin-right: 10px;
            font-size: 24px;
        }
        
        .next-steps p {
            color: #475569;
            font-size: 15px;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        .next-steps p:last-child {
            margin-bottom: 0;
        }
        
        .contact-info {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
            border-left: 4px solid #3b82f6;
            padding: 25px;
            border-radius: 8px;
            margin-top: 35px;
        }
        
        .contact-info strong {
            color: #1e40af;
            font-size: 15px;
            display: block;
            margin-bottom: 10px;
        }
        
        .contact-info p {
            color: #1e3a8a;
            font-size: 14px;
            margin: 5px 0;
            line-height: 1.7;
        }
        
        .closing {
            margin-top: 40px;
            font-size: 16px;
            color: #1e293b;
            line-height: 1.8;
        }
        
        .closing strong {
            color: #0f172a;
            font-size: 17px;
        }
        
        .email-footer {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            padding: 40px;
            text-align: center;
            color: rgba(255, 255, 255, 0.9);
        }
        
        .footer-company {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 8px;
        }
        
        .footer-tagline {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 25px;
        }
        
        .footer-links {
            margin: 25px 0;
            padding-top: 25px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-links a {
            color: #daa520;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            margin: 0 15px;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        .footer-note {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            margin-top: 25px;
            line-height: 1.6;
        }
        
        @media (max-width: 600px) {
            body {
                padding: 20px 10px;
            }
            
            .email-header {
                padding: 40px 25px;
            }
            
            .email-header h1 {
                font-size: 26px;
            }
            
            .email-body {
                padding: 35px 25px;
            }
            
            .details-list li {
                flex-direction: column;
            }
            
            .details-list strong {
                min-width: auto;
                margin-bottom: 6px;
            }
        }
    </style>
</head>
<body>
    <div class="email-wrapper">
        <div class="email-header">
            <h1>Thank You for Contacting Us!</h1>
            <div class="subtitle">GNX Software Solutions</div>
        </div>
        
        <div class="email-body">
            <div class="greeting">Dear {{ submission.full_name }},</div>
            
            <div class="intro-text">
                Thank you for reaching out to GNX Software Solutions! We have received your inquiry and our team is excited to learn more about your project. We appreciate you taking the time to contact us.
            </div>
            
            <div class="thank-you-box">
                <div class="icon">✨</div>
                <h2>We've Received Your Submission</h2>
                <p>Your message has been successfully delivered to our team. We'll review your inquiry carefully and get back to you soon.</p>
            </div>
            
            <div class="details-box">
                <h3>Your Submission Details</h3>
                <ul class="details-list">
                    <li>
                        <strong>Submission ID:</strong>
                        <span>#{{ submission.id }}</span>
                    </li>
                    <li>
                        <strong>Company:</strong>
                        <span>{{ submission.company }}</span>
                    </li>
                    {% if submission.project_type %}
                    <li>
                        <strong>Project Type:</strong>
                        <span>{{ submission.get_project_type_display }}</span>
                    </li>
                    {% else %}
                    <li>
                        <strong>Project Type:</strong>
                        <span>Not specified</span>
                    </li>
                    {% endif %}
                    {% if submission.timeline %}
                    <li>
                        <strong>Timeline:</strong>
                        <span>{{ submission.get_timeline_display }}</span>
                    </li>
                    {% else %}
                    <li>
                        <strong>Timeline:</strong>
                        <span>Not specified</span>
                    </li>
                    {% endif %}
                </ul>
            </div>
            
            <div class="next-steps">
                <h3>What Happens Next?</h3>
                <p>Our team will contact you within <strong>24 hours</strong> to discuss your project requirements and how we can help you achieve your goals. We'll review your submission and prepare a tailored response based on your needs.</p>
                <p>If you have any urgent questions or need immediate assistance, please don't hesitate to contact us directly using the information below.</p>
            </div>
            
            <div class="contact-info">
                <strong>Need Immediate Assistance?</strong>
                <p>📧 Email: support@gnxsoft.com</p>
                <p>🌐 Website: <a href="{{ site_url }}" style="color: #1e40af; text-decoration: none;">{{ site_url }}</a></p>
            </div>
            
            <div class="closing">
                We look forward to working with you!<br><br>
                <strong>Best regards,<br>The GNX Team</strong>
            </div>
        </div>
        
        <div class="email-footer">
            <div class="footer-company">GNX Software Solutions</div>
            <div class="footer-tagline">Transforming Ideas into Digital Excellence</div>
            
            <div class="footer-links">
                <a href="{{ site_url }}">Visit Our Website</a>
            </div>
            
            <div class="footer-note">
                This is an automated confirmation email. Please do not reply directly to this message.<br>
                For inquiries, please contact us through our website or email.
            </div>
        </div>
    </div>
</body>
</html>

