{% extends "base.html" %}

{% block title %}Contact Us | NailTech Nation{% endblock %}

{% block content %}
<!-- Contact Hero -->
<section class="contact-hero">
    <div class="container">
        <h1 class="page-title">Get In Touch</h1>
        <p class="page-subtitle">We'd love to hear from you</p>
    </div>
</section>

<!-- Contact Information -->
<section class="contact-section">
    <div class="container">
        <div class="contact-grid">
            <!-- Contact Methods -->
            <div class="contact-methods">
                <h2>Contact Information</h2>
                <p class="contact-intro">Reach out to us through any of these channels. We're here to help!</p>
                
                <div class="contact-cards">
                    <!-- Phone -->
                    <div class="contact-card">
                        <div class="contact-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <h3>Phone</h3>
                            <p>Call us for quick assistance</p>
                            <a href="tel:{{ contact_phone }}" class="contact-link">{{ contact_phone }}</a>
                        </div>
                    </div>
                    
                    <!-- WhatsApp -->
                    <div class="contact-card">
                        <div class="contact-icon whatsapp">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <h3>WhatsApp</h3>
                            <p>Chat with us anytime</p>
                            <a href="https://wa.me/{{ contact_whatsapp.replace(' ', '').replace('+', '') }}" target="_blank" class="contact-link">{{ contact_whatsapp }}</a>
                        </div>
                    </div>
                    
                    <!-- TikTok -->
                    <div class="contact-card">
                        <div class="contact-icon tiktok">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z"/>
                            </svg>
                        </div>
                        <div class="contact-details">
                            <h3>TikTok</h3>
                            <p>Follow us for nail inspiration</p>
                            <p class="contact-link">{{ contact_tiktok }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Map/Location Placeholder -->
            <div class="contact-map">
                <div class="map-placeholder">
                    <svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
                        <circle cx="12" cy="10" r="3"/>
                    </svg>
                    <h3>Visit Our Salon</h3>
                    <p>Nairobi, Kenya</p>
                    <p class="location-note">Exact location shared upon booking confirmation</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Business Hours -->
<section class="hours-section">
    <div class="container">
        <div class="hours-card">
            <h2>Business Hours</h2>
            <div class="hours-grid">
                <div class="hours-item">
                    <span class="hours-day">Monday - Friday</span>
                    <span class="hours-time">9:00 AM - 7:00 PM</span>
                </div>
                <div class="hours-item">
                    <span class="hours-day">Saturday</span>
                    <span class="hours-time">9:00 AM - 7:00 PM</span>
                </div>
                <div class="hours-item">
                    <span class="hours-day">Sunday</span>
                    <span class="hours-time">9:00 AM - 7:00 PM</span>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="faq-section">
    <div class="container">
        <h2 class="section-title">Frequently Asked Questions</h2>
        
        <div class="faq-grid">
            <div class="faq-item">
                <h3>How do I book an appointment?</h3>
                <p>Simply click the "Book Now" button, select your desired service, choose your preferred technician, and pick a time slot that works for you. It's that easy!</p>
            </div>
            
            <div class="faq-item">
                <h3>What if I need to cancel?</h3>
                <p>You can cancel your booking anytime through your account dashboard. We recommend canceling at least 2 hours before your appointment.</p>
            </div>
            
            <div class="faq-item">
                <h3>What happens if I'm late?</h3>
                <p>We offer a 30-minute grace period. If you're more than 30 minutes late, your booking will be automatically marked as a no-show and the slot will reopen.</p>
            </div>
            
            <div class="faq-item">
                <h3>Do you offer custom nail designs?</h3>
                <p>Absolutely! Our technicians are skilled in creating custom designs. Discuss your vision during your appointment or message us beforehand.</p>
            </div>
            
            <div class="faq-item">
                <h3>What payment methods do you accept?</h3>
                <p>We accept cash and mobile money (M-Pesa). Payment is made after your service is completed.</p>
            </div>
            
            <div class="faq-item">
                <h3>How long do services take?</h3>
                <p>All our services are allocated 2 hours 30 minutes to ensure quality work without rushing. This includes prep, application, and finishing touches.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA -->
<section class="contact-cta">
    <div class="container">
        <h2>Ready to Book Your Appointment?</h2>
        <p>Experience premium nail care today</p>
        <a href="{% if current_user.is_authenticated %}{{ url_for('client.select_service') }}{% else %}{{ url_for('auth.login') }}{% endif %}" class="btn btn-primary btn-lg">Book Now</a>
    </div>
</section>

<style>
.contact-hero {
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
    padding: 4rem 0 3rem;
    text-align: center;
}

.page-title {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.3rem;
    color: var(--light-text);
}

.contact-section {
    padding: 4rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.contact-methods h2 {
    margin-bottom: 1rem;
}

.contact-intro {
    color: var(--light-text);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.contact-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.contact-card:hover {
    box-shadow: var(--shadow-md);
}

.contact-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
    border-radius: var(--radius-md);
    color: var(--primary-pink);
    flex-shrink: 0;
}

.contact-icon.whatsapp {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.1) 0%, rgba(34, 193, 195, 0.1) 100%);
    color: #25D366;
}

.contact-icon.tiktok {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(254, 44, 85, 0.1) 100%);
    color: #000000;
}

.contact-details h3 {
    margin-bottom: 0.5rem;
}

.contact-details p {
    color: var(--light-text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.contact-link {
    display: inline-block;
    color: var(--primary-pink);
    font-weight: 600;
    font-size: 1.1rem;
}

.contact-map {
    display: flex;
    align-items: center;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-radius: var(--radius-lg);
    padding: 2rem;
    text-align: center;
}

.map-placeholder svg {
    color: var(--primary-pink);
    margin-bottom: 1rem;
}

.map-placeholder h3 {
    margin-bottom: 0.5rem;
}

.location-note {
    color: var(--light-text);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.hours-section {
    padding: 3rem 0;
    background: var(--bg-light);
}

.hours-card {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.hours-card h2 {
    text-align: center;
    margin-bottom: 2rem;
}

.hours-grid {
    display: grid;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

.hours-item {
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
}

.hours-day {
    font-weight: 600;
}

.hours-time {
    color: var(--primary-pink);
    font-weight: 600;
}

.faq-section {
    padding: 4rem 0;
}

.section-title {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.faq-item {
    padding: 2rem;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.faq-item h3 {
    color: var(--primary-pink);
    margin-bottom: 1rem;
}

.faq-item p {
    color: var(--light-text);
    line-height: 1.6;
}

.contact-cta {
    padding: 4rem 0;
    background: var(--bg-gradient);
    color: white;
    text-align: center;
}

.contact-cta h2 {
    color: white;
    margin-bottom: 1rem;
}

.contact-cta p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.contact-cta .btn-primary {
    background: white;
    color: var(--primary-pink);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .page-title {
        font-size: 2rem;
    }
}
</style>
{% endblock %}