<!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 <?php echo SITE_NAME; ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f4f6fa;
            line-height: 1.6;
            color: #212121;
        }
        
        .email-wrapper {
            max-width: 600px;
            margin: 20px auto;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        
        .email-header {
            background: linear-gradient(135deg, #6b03fc, #9f5eff);
            padding: 40px 30px;
            text-align: center;
        }
        
        .logo {
            color: white;
            font-size: 32px;
            font-weight: 800;
            margin-bottom: 10px;
        }
        
        .logo span {
            color: #ff7403;
        }
        
        .header-title {
            color: rgba(255,255,255,0.9);
            font-size: 18px;
        }
        
        .email-body {
            padding: 40px 30px;
        }
        
        .greeting {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 20px;
            color: #212121;
        }
        
        .greeting span {
            color: #6b03fc;
        }
        
        .message-box {
            background: #f8f5ff;
            border-left: 4px solid #6b03fc;
            padding: 20px;
            margin: 30px 0;
            border-radius: 10px;
        }
        
        .message-box p {
            color: #4a4a4a;
        }
        
        .details-card {
            background: #f4f6fa;
            border-radius: 15px;
            padding: 25px;
            margin: 30px 0;
        }
        
        .detail-row {
            display: flex;
            padding: 10px 0;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .detail-row:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            width: 100px;
            font-weight: 600;
            color: #6b03fc;
        }
        
        .detail-value {
            flex: 1;
            color: #212121;
        }
        
        .next-steps {
            margin: 30px 0;
        }
        
        .next-steps h3 {
            color: #212121;
            margin-bottom: 15px;
            font-size: 18px;
        }
        
        .next-steps ul {
            list-style: none;
        }
        
        .next-steps li {
            margin-bottom: 12px;
            padding-left: 25px;
            position: relative;
            color: #4a4a4a;
        }
        
        .next-steps li:before {
            content: "✓";
            color: #6b03fc;
            font-weight: bold;
            position: absolute;
            left: 0;
        }
        
        .cta-button {
            display: inline-block;
            background: #6b03fc;
            color: white;
            padding: 14px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            margin: 20px 0;
            box-shadow: 0 10px 20px rgba(107,3,252,0.3);
        }
        
        .social-links {
            margin: 30px 0;
            text-align: center;
        }
        
        .social-link {
            display: inline-block;
            width: 40px;
            height: 40px;
            background: #f4f6fa;
            border-radius: 50%;
            margin: 0 5px;
            line-height: 40px;
            text-align: center;
            color: #6b03fc;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .social-link:hover {
            background: #6b03fc;
            color: white;
        }
        
        .email-footer {
            background: #f4f6fa;
            padding: 30px;
            text-align: center;
            color: #5f5f6b;
            font-size: 14px;
            border-top: 1px solid #e0e0e0;
        }
        
        .footer-links {
            margin-bottom: 15px;
        }
        
        .footer-links a {
            color: #6b03fc;
            text-decoration: none;
            margin: 0 10px;
        }
        
        .footer-links a:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 600px) {
            .email-wrapper {
                margin: 10px;
                border-radius: 15px;
            }
            
            .email-header {
                padding: 30px 20px;
            }
            
            .email-body {
                padding: 30px 20px;
            }
            
            .detail-row {
                flex-direction: column;
            }
            
            .detail-label {
                width: 100%;
                margin-bottom: 5px;
            }
        }
    </style>
</head>
<body>
    <div class="email-wrapper">
        <!-- Header -->
        <div class="email-header">
            <div class="logo">elithalomso<span>.</span></div>
            <div class="header-title">Digital Transformation Partner</div>
        </div>
        
        <!-- Body -->
        <div class="email-body">
            <div class="greeting">
                Hello <span><?php echo htmlspecialchars($data['name']); ?></span>! 👋
            </div>
            
            <p>Thank you for reaching out to Elithalomso. We've received your inquiry and are excited to learn more about your project.</p>
            
            <div class="message-box">
                <p><strong>Your message:</strong></p>
                <p><?php echo nl2br(htmlspecialchars($data['message'])); ?></p>
            </div>
            
            <div class="details-card">
                <div class="detail-row">
                    <div class="detail-label">Name:</div>
                    <div class="detail-value"><?php echo htmlspecialchars($data['name']); ?></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Email:</div>
                    <div class="detail-value"><?php echo htmlspecialchars($data['email']); ?></div>
                </div>
                <?php if (!empty($data['phone'])): ?>
                <div class="detail-row">
                    <div class="detail-label">Phone:</div>
                    <div class="detail-value"><?php echo htmlspecialchars($data['phone']); ?></div>
                </div>
                <?php endif; ?>
                <div class="detail-row">
                    <div class="detail-label">Interest:</div>
                    <div class="detail-value"><?php echo htmlspecialchars($data['interest']); ?></div>
                </div>
                <div class="detail-row">
                    <div class="detail-label">Submitted:</div>
                    <div class="detail-value"><?php echo $data['date']; ?> at <?php echo $data['time']; ?></div>
                </div>
            </div>
            
            <div class="next-steps">
                <h3>What happens next?</h3>
                <ul>
                    <li>One of our digital transformation specialists will review your inquiry</li>
                    <li>We'll contact you within 24 hours to schedule a consultation</li>
                    <li>Together, we'll map out a strategy for your digital transformation</li>
                </ul>
            </div>
            
            <div style="text-align: center;">
                <a href="<?php echo SITE_URL; ?>" class="cta-button">Visit Our Website</a>
            </div>
            
            <div class="social-links">
                <a href="#" class="social-link">f</a>
                <a href="#" class="social-link">t</a>
                <a href="#" class="social-link">in</a>
                <a href="#" class="social-link">ig</a>
            </div>
        </div>
        
        <!-- Footer -->
        <div class="email-footer">
            <div class="footer-links">
                <a href="<?php echo SITE_URL; ?>">Home</a>
                <a href="<?php echo SITE_URL; ?>/#about">About</a>
                <a href="<?php echo SITE_URL; ?>/#services">Services</a>
                <a href="<?php echo SITE_URL; ?>/cookies.html">Privacy</a>
            </div>
            <p>&copy; <?php echo date('Y'); ?> <?php echo SITE_NAME; ?>. All rights reserved.</p>
            <p style="margin-top: 10px; font-size: 12px;">
                136 Fifth Street, Halfway Gardens, Midrand, 1686<br>
                South Africa
            </p>
        </div>
    </div>
</body>
</html>