{% extends "base.html" %}

{% block title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}

{% block description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}

{% block keywords %}{{ t('website design, web development, small business, Belgium, Brussels, professional websites, affordable web design') }}{% endblock %}

{% block og_title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}

{% block og_description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}

{% block twitter_title %}{{ t('Contact Kobelly | Web Design Brussels') }}{% endblock %}

{% block twitter_description %}{{ t('Contact Kobelly for professional website design in Brussels. Free consultation, transparent pricing, and ongoing support. Get your business online in 48 hours.') }}{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="contact-hero-section py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="contact-hero-content">
                    <h1 class="display-3 fw-bold mb-4">{{ t('Ready to Start Your Project?') }}</h1>
                    <p class="lead mb-4">{{ t('Let\'s discuss how I can help your business grow online. I offer a free consultation to understand your needs and provide a customized solution.') }}</p>
                </div>
            </div>
            <div class="col-lg-6 text-center">
                <div class="contact-hero-visual">
                    <div class="contact-icon-wrapper">
                        <i class="fas fa-envelope-open-text contact-main-icon"></i>
                        <div class="contact-icon-glow"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section class="py-5 contact-section">
    <div class="container">
        <div class="row g-5">
            <!-- Contact Form -->
            <div class="col-lg-8">
                <div class="card service-card fade-in-up contact-form-card">
                    <div class="card-body p-5">
                        <div class="contact-form-header text-center mb-5">
                            <div class="contact-form-icon-wrapper mb-3">
                                <i class="fas fa-paper-plane contact-form-icon"></i>
                            </div>
                            <h3 class="card-title fw-bold mb-3">{{ t('Send Me a Message') }}</h3>
                            <p class="text-muted">{{ t('Fill out the form below and I\'ll get back to you within 48 hours.') }}</p>
                        </div>
                        
                        <form class="contact-form">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="firstName" placeholder="{{ t('First Name') }}" required>
                                        <label for="firstName">{{ t('First Name') }} *</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="lastName" placeholder="{{ t('Last Name') }}" required>
                                        <label for="lastName">{{ t('Last Name') }} *</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="email" class="form-control" id="email" placeholder="{{ t('Email Address') }}" required>
                                        <label for="email">{{ t('Email Address') }} *</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <input type="tel" class="form-control" id="phone" placeholder="{{ t('Phone Number') }}">
                                        <label for="phone">{{ t('Phone Number') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <input type="text" class="form-control" id="company" placeholder="{{ t('Company Name') }}">
                                        <label for="company">{{ t('Company Name') }}</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <select class="form-select" id="service" required>
                                            <option value="">{{ t('Select a service...') }}</option>
                                            <option value="website">{{ t('Website Design') }}</option>
                                            <option value="ecommerce">{{ t('E-commerce Solutions') }}</option>
                                            <option value="maintenance">{{ t('Maintenance & Support') }}</option>
                                        </select>
                                        <label for="service">{{ t('Service Interested In') }} *</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-floating">
                                        <select class="form-select" id="budget">
                                            <option value="">{{ t('Select budget range...') }}</option>
                                            <option value="under-1000">{{ t('Under €1,000') }}</option>
                                            <option value="1000-3000">{{ t('€1,000 - €3,000') }}</option>
                                            <option value="3000-5000">{{ t('€3,000 - €5,000') }}</option>
                                            <option value="5000-10000">{{ t('€5,000 - €10,000') }}</option>
                                            <option value="over-10000">{{ t('Over €10,000') }}</option>
                                        </select>
                                        <label for="budget">{{ t('Project Budget') }}</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-floating">
                                        <textarea class="form-control" id="message" style="height: 120px" placeholder="{{ t('Tell me about your project, goals, and requirements...') }}" required></textarea>
                                        <label for="message">{{ t('Project Details') }} *</label>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="newsletter">
                                        <label class="form-check-label" for="newsletter">
                                            {{ t('Subscribe to my newsletter for web design tips and updates') }}
                                        </label>
                                    </div>
                                </div>
                                <div class="col-12 text-center">
                                    <button type="submit" class="btn btn-primary btn-lg px-5 py-3 fw-bold contact-submit-btn">
                                        <i class="fas fa-paper-plane me-2"></i>{{ t('Send Message') }}
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Contact Information -->
            <div class="col-lg-4">
                <div class="card service-card h-100 fade-in-up contact-info-card">
                    <div class="card-body p-5">
                        <div class="contact-info-header text-center mb-4">
                            <div class="contact-info-icon-wrapper mb-3">
                                <i class="fas fa-map-marker-alt contact-info-icon"></i>
                            </div>
                            <h3 class="card-title fw-bold mb-3">{{ t('Get in Touch') }}</h3>
                        </div>
                        
                        <div class="contact-info-item mb-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="contact-info-icon-small me-3">
                                    <i class="fas fa-envelope text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">{{ t('Email') }}</h6>
                                    <a href="mailto:info@kobelly.com" class="text-decoration-none">info@kobelly.com</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-info-item mb-4">
                            <div class="d-flex align-items-center mb-3">
                                <div class="contact-info-icon-small me-3">
                                    <i class="fas fa-phone text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">{{ t('Phone') }}</h6>
                                    <a href="tel:+32486210707" class="text-decoration-none">{{ t('+32 486 21 07 07') }}</a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="contact-info-item mb-4">
                            <div class="d-flex align-items-start mb-3">
                                <div class="contact-info-icon-small me-3 mt-1">
                                    <i class="fas fa-map-marker-alt text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="fw-bold mb-1">{{ t('Address') }}</h6>
                                    <a href="https://maps.google.com/?q=Blijkheerstraat+92,+1755+Pajottegem,+Belgium" target="_blank" class="text-decoration-none">
                                        <p class="mb-0">{{ t('Blijkheerstraat 92') }}<br>
                                        {{ t('1755 Pajottegem, Belgium') }}<br>
                                        {{ t('Vlaams-Brabant') }}</p>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="contact-info-item mb-4">
                            <h6 class="fw-bold mb-3">{{ t('Follow Us') }}</h6>
                            <div class="social-links d-flex gap-3">
                                <a href="#" class="social-link"><i class="fab fa-facebook"></i></a>
                                <a href="#" class="social-link"><i class="fab fa-twitter"></i></a>
                                <a href="#" class="social-link"><i class="fab fa-linkedin"></i></a>
                                <a href="#" class="social-link"><i class="fab fa-instagram"></i></a>
                            </div>
                        </div>

                        <div class="alert alert-info contact-alert">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>{{ t('Free Consultation') }}</strong><br>
                            {{ t('We offer a free 30-minute consultation to discuss your project requirements and provide a customized quote.') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
{{ testimonials.testimonials_section(
    title=t('What My Clients Say'),
    subtitle=t('Don\'t just take my word for it - hear from some of my satisfied clients.'),
    t=t
) }}

<!-- Map Section -->
<section class="py-5 map-section">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-3">{{ t('Find Us') }}</h2>
                <p class="lead text-muted">{{ t('Located in the heart of Brussels, serving clients across Belgium and Europe.') }}</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12">
                <div class="map-container fade-in-up">
                    <div id="map" style="width: 100%; height: 300px; border-radius: 15px;"></div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- FAQ Section -->
<section class="py-5 bg-light faq-section">
    <div class="container">
        <div class="row text-center mb-5">
            <div class="col-lg-8 mx-auto">
                <h2 class="display-5 fw-bold mb-3">{{ t('Frequently Asked Questions') }}</h2>
                <p class="lead text-muted">{{ t('Find answers to common questions about our services and process.') }}</p>
            </div>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card h-100 fade-in-up faq-card">
                    <div class="card-body p-4">
                        <div class="faq-icon-wrapper mb-3">
                            <i class="fas fa-clock text-primary faq-icon"></i>
                        </div>
                        <h5 class="card-title fw-bold mb-3">{{ t('How long does it take to build a website?') }}</h5>
                        <p class="card-text">{{ t('The timeline depends on the complexity of your project. A simple business website typically takes 2-4 weeks, while more complex e-commerce sites may take 6-8 weeks.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card h-100 fade-in-up faq-card">
                    <div class="card-body p-4">
                        <div class="faq-icon-wrapper mb-3">
                            <i class="fas fa-headset text-primary faq-icon"></i>
                        </div>
                        <h5 class="card-title fw-bold mb-3">{{ t('Do you provide ongoing support?') }}</h5>
                        <p class="card-text">{{ t('Yes! We offer various maintenance packages to keep your website secure, updated, and running smoothly. We also provide technical support and content updates.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card h-100 fade-in-up faq-card">
                    <div class="card-body p-4">
                        <div class="faq-icon-wrapper mb-3">
                            <i class="fas fa-euro-sign text-primary faq-icon"></i>
                        </div>
                        <h5 class="card-title fw-bold mb-3">{{ t('What is your pricing structure?') }}</h5>
                        <p class="card-text">{{ t('Our pricing is transparent and project-based. We provide detailed quotes after understanding your requirements. We offer flexible payment plans and competitive rates for small businesses.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card h-100 fade-in-up faq-card">
                    <div class="card-body p-4">
                        <div class="faq-icon-wrapper mb-3">
                            <i class="fas fa-building text-primary faq-icon"></i>
                        </div>
                        <h5 class="card-title fw-bold mb-3">{{ t('Do you work with small businesses?') }}</h5>
                        <p class="card-text">{{ t('Yes, we specialize in working with small businesses and entrepreneurs. We understand your unique needs and budget constraints.') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
{{ components.cta_section(
    title="Ready to Start Your Project?",
    description="Let's discuss how I can help your business grow online.",
    button_text="Get Free Consultation",
    button_url="contact",
    t=t
) }}
{% endblock %}