{% extends "base.html" %}

{% block title %}Contact T & S Contractors Ltd — Request a Quote{% endblock %}
{% block description %}Get in touch with T & S Contractors Ltd to discuss your construction project or request a free BoQ and quotation.{% endblock %}

{% block content %}
<section class="hero" style="padding-top: 8rem; padding-bottom: 4rem;">
    <div class="container">
        <h1>Contact Us</h1>
        <p>Get in touch with our team to discuss your project or request a free quote.</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="contact-grid">
            <div class="contact-info">
                <h3>Reach Out Directly</h3>
                <div class="contact-block">
                    <h4>Phone &amp; WhatsApp</h4>
                    <a href="tel:+254727387139">+254 727 387 139</a>
                    <p style="font-size: 0.85rem;">Available for calls and WhatsApp messages</p>
                </div>
                <div class="contact-block">
                    <h4>Email</h4>
                    <a href="mailto:tumboandsonscontractorsltd@gmail.com">tumboandsonscontractorsltd@gmail.com</a>
                </div>
                <div class="contact-block">
                    <h4>Address</h4>
                    <p>P.O Box 325, Moi's Bridge, Kenya</p>
                </div>

                <h3 style="margin-top: 2.5rem;">Payment Methods</h3>
                <p style="color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem;">We accept payments through the following convenient methods.</p>
                <div class="card-grid" style="grid-template-columns: 1fr 1fr; gap: 1rem;">
                    <div class="card" style="padding: 1.25rem;">
                        <h3 style="margin-bottom: 0.15rem;">Equity Bank</h3>
                        <p style="font-size: 0.8rem; color: var(--accent); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">Bank Transfer</p>
                        <div style="margin-bottom: 0.6rem;">
                            <p style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.1rem;">Account Number</p>
                            <p style="font-size: 1rem; color: #fff; font-weight: 600; font-family: monospace;">0650199304704</p>
                        </div>
                        <div>
                            <p style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.1rem;">Account Name</p>
                            <p style="font-size: 1rem; color: #fff; font-weight: 600;">ERIC WANYAMA</p>
                        </div>
                    </div>
                    <div class="card" style="padding: 1.25rem;">
                        <h3 style="margin-bottom: 0.15rem;">M-PESA</h3>
                        <p style="font-size: 0.8rem; color: var(--accent); margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px;">Mobile Money</p>
                        <div style="margin-bottom: 0.6rem;">
                            <p style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.1rem;">M-PESA Number</p>
                            <p style="font-size: 1rem; color: #fff; font-weight: 600; font-family: monospace;">0727 387 139</p>
                        </div>
                        <div>
                            <p style="font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.1rem;">Name</p>
                            <p style="font-size: 1rem; color: #fff; font-weight: 600;">ERIC TUMBO</p>
                        </div>
                    </div>
                </div>
                <p style="color: var(--text-muted); font-size: 0.85rem; margin-top: 1rem;">For architectural drawings, we request 50% deposit upfront with the balance due upon delivery.</p>
            </div>

            <div>
                <h3 style="color: #fff; margin-bottom: 1.5rem;">Initiate a Project — BoQ / Quotation</h3>
                <p style="color: var(--text-muted); margin-bottom: 1.5rem;">Tell us about your site. We respond within one business day.</p>

                {% if submitted %}
                <div class="alert alert-success">
                    Thank you! We have received your message and will respond within one business day.
                    {% if email_sent is defined and not email_sent %}
                    <br><small>(Email notification could not be sent — we will still follow up.)</small>
                    {% endif %}
                </div>
                {% endif %}

                <form method="post" action="/contact">
                    <div class="form-group">
                        <label for="name">Full Name</label>
                        <input type="text" id="name" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">Phone Number</label>
                        <input type="tel" id="phone" name="phone">
                    </div>
                    <div class="form-group">
                        <label for="message">Project Details</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Send Message</button>
                </form>

                <div style="margin-top: 2rem;">
                    <a href="https://wa.me/254727387139?text=Hello%2C%20I%20am%20interested%20in%20a%20construction%20project%20with%20TUMBO%20AND%20SON'S%20CONTRACTOR'S%20LTD." target="_blank" rel="noopener" class="btn btn-outline" style="width: 100%; justify-content: center;">WhatsApp Us</a>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}