{% extends 'layout.html' %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section">
    <div class="hero-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1 class="display-4 fw-bold text-white">{{ _('Sell Your Car in Germany') }}</h1>
                    <p class="lead text-light">{{ _('The easiest way to list and sell your vehicle to German buyers.') }}</p>
                    <a href="#car-form" class="btn btn-primary btn-lg">{{ _('List Your Car Now') }}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Features Section -->
<section class="py-5">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2>{{ _('Why Choose Our Platform?') }}</h2>
                <p class="lead">{{ _('The smart choice for selling your car in Germany') }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-globe fa-3x text-primary mb-3"></i>
                        <h5 class="card-title">{{ _('Nationwide Reach') }}</h5>
                        <p class="card-text">{{ _('Connect with buyers from all over Germany.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-check-circle fa-3x text-primary mb-3"></i>
                        <h5 class="card-title">{{ _('Verified Buyers') }}</h5>
                        <p class="card-text">{{ _('Our platform ensures serious inquiries only.') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-body text-center">
                        <i class="fas fa-euro-sign fa-3x text-primary mb-3"></i>
                        <h5 class="card-title">{{ _('Best Price') }}</h5>
                        <p class="card-text">{{ _('Get the best market value for your vehicle.') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Car Showcase Section -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center mb-5">
                <h2>{{ _('Premium Cars Recently Listed') }}</h2>
                <p class="lead">{{ _('Browse through our selection of quality vehicles') }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class="card car-card">
                    <img src="https://images.unsplash.com/photo-1618418721668-0d1f72aa4bab" class="card-img-top" alt="Luxury Car">
                    <div class="card-body">
                        <h5 class="card-title">Mercedes-Benz S-Class</h5>
                        <p class="card-text">{{ _('Premium condition, 2020 model with all features') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card car-card">
                    <img src="https://images.unsplash.com/photo-1581814706561-f5bbfa7d984a" class="card-img-top" alt="BMW">
                    <div class="card-body">
                        <h5 class="card-title">BMW 5 Series</h5>
                        <p class="card-text">{{ _('Excellent condition, 2019 model with premium package') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class="card car-card">
                    <img src="https://images.unsplash.com/photo-1553440569-bcc63803a83d" class="card-img-top" alt="Audi">
                    <div class="card-body">
                        <h5 class="card-title">Audi A6</h5>
                        <p class="card-text">{{ _('Like new, 2021 model with full service history') }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6 mb-4 mb-md-0">
                <img src="https://images.unsplash.com/photo-1574023240744-64c47c8c0676" class="img-fluid rounded shadow" alt="Car Dealership">
            </div>
            <div class="col-md-6">
                <h2>{{ _('About Auto Verkauf Deutschland') }}</h2>
                <p class="lead">{{ _('Your trusted partner for car sales in Germany since 2010.') }}</p>
                <p>{{ _('We provide a seamless platform connecting car sellers with genuine buyers across Germany. Our mission is to make car selling an easy, transparent, and rewarding experience.') }}</p>
                <p>{{ _('With our extensive network and expertise in the German automotive market, we ensure you get the best value for your vehicle.') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- Car Selling Form Section -->
<section id="car-form" class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h3 class="m-0">{{ _('List Your Car For Sale') }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="carListingForm">
                            <!-- Seller Information Section -->
                            <h4 class="mb-3">{{ _('Seller Information') }}</h4>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label for="sellerName" class="form-label">{{ _('Full Name') }} *</label>
                                    <input type="text" class="form-control" id="sellerName" name="sellerName" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="sellerEmail" class="form-label">{{ _('Email') }} *</label>
                                    <input type="email" class="form-control" id="sellerEmail" name="sellerEmail" required>
                                </div>
                                <div class="col-md-4">
                                    <label for="sellerPhone" class="form-label">{{ _('Phone Number') }} *</label>
                                    <input type="tel" class="form-control" id="sellerPhone" name="sellerPhone" required>
                                </div>
                            </div>

                            <!-- Car Details Section -->
                            <h4 class="mb-3">{{ _('Car Details') }}</h4>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="carBrand" class="form-label">{{ _('Brand') }} *</label>
                                    <select class="form-select" id="carBrand" name="carBrand" required>
                                        <option value="">{{ _('Select Brand') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="carModel" class="form-label">{{ _('Model') }} *</label>
                                    <select class="form-select" id="carModel" name="carModel" required>
                                        <option value="">{{ _('Select Model') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label for="carYear" class="form-label">{{ _('Year of Manufacture') }} *</label>
                                    <select class="form-select" id="carYear" name="carYear" required>
                                        <option value="">{{ _('Select Year') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="engineType" class="form-label">{{ _('Engine Type') }} *</label>
                                    <select class="form-select" id="engineType" name="engineType" required>
                                        <option value="">{{ _('Select Engine Type') }}</option>
                                        <option value="4-cylinder">{{ _('4-cylinder') }}</option>
                                        <option value="6-cylinder">{{ _('6-cylinder') }}</option>
                                        <option value="8-cylinder">{{ _('8-cylinder') }}</option>
                                        <option value="12-cylinder">{{ _('12-cylinder') }}</option>
                                        <option value="electric">{{ _('Electric') }}</option>
                                        <option value="hybrid">{{ _('Hybrid') }}</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="fuelType" class="form-label">{{ _('Fuel Type') }} *</label>
                                    <select class="form-select" id="fuelType" name="fuelType" required>
                                        <option value="">{{ _('Select Fuel Type') }}</option>
                                        <option value="petrol">{{ _('Petrol (Benzin)') }}</option>
                                        <option value="diesel">{{ _('Diesel') }}</option>
                                        <option value="electric">{{ _('Electric') }}</option>
                                        <option value="hybrid">{{ _('Hybrid') }}</option>
                                        <option value="lpg">{{ _('LPG/Autogas') }}</option>
                                        <option value="cng">{{ _('CNG') }}</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label for="carColor" class="form-label">{{ _('Color') }}</label>
                                    <select class="form-select" id="carColor" name="carColor">
                                        <option value="">{{ _('Select Color') }}</option>
                                        <option value="black">{{ _('Black') }}</option>
                                        <option value="white">{{ _('White') }}</option>
                                        <option value="silver">{{ _('Silver') }}</option>
                                        <option value="gray">{{ _('Gray') }}</option>
                                        <option value="darkGray">{{ _('Dark Gray') }}</option>
                                        <option value="lightGray">{{ _('Light Gray') }}</option>
                                        <option value="blue">{{ _('Blue') }}</option>
                                        <option value="darkBlue">{{ _('Dark Blue') }}</option>
                                        <option value="lightBlue">{{ _('Light Blue') }}</option>
                                        <option value="red">{{ _('Red') }}</option>
                                        <option value="burgundy">{{ _('Burgundy') }}</option>
                                        <option value="green">{{ _('Green') }}</option>
                                        <option value="darkGreen">{{ _('Dark Green') }}</option>
                                        <option value="yellow">{{ _('Yellow') }}</option>
                                        <option value="orange">{{ _('Orange') }}</option>
                                        <option value="brown">{{ _('Brown') }}</option>
                                        <option value="beige">{{ _('Beige') }}</option>
                                        <option value="gold">{{ _('Gold') }}</option>
                                        <option value="bronze">{{ _('Bronze') }}</option>
                                        <option value="purple">{{ _('Purple') }}</option>
                                        <option value="pink">{{ _('Pink') }}</option>
                                        <option value="turquoise">{{ _('Turquoise') }}</option>
                                        <option value="multicolor">{{ _('Multicolor') }}</option>
                                        <option value="matte">{{ _('Matte Black') }}</option>
                                        <option value="metallic">{{ _('Metallic') }}</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="bodyStyle" class="form-label">{{ _('Body Style') }}</label>
                                    <select class="form-select" id="bodyStyle" name="bodyStyle">
                                        <option value="">{{ _('Select Body Style') }}</option>
                                        <option value="sedan">{{ _('Sedan') }}</option>
                                        <option value="suv">{{ _('SUV / Crossover') }}</option>
                                        <option value="hatchback">{{ _('Hatchback') }}</option>
                                        <option value="station-wagon">{{ _('Station Wagon / Estate') }}</option>
                                        <option value="coupe">{{ _('Coupe') }}</option>
                                        <option value="convertible">{{ _('Convertible / Cabriolet') }}</option>
                                        <option value="van">{{ _('Van / Minivan') }}</option>
                                        <option value="pickup">{{ _('Pickup') }}</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label for="mileage" class="form-label">{{ _('Mileage (km)') }} *</label>
                                    <input type="number" class="form-control" id="mileage" name="mileage" required min="0">
                                </div>
                            </div>

                            <!-- Additional Specifications -->
                            <h4 class="mb-3">{{ _('Additional Specifications') }}</h4>
                            <div class="row g-3 mb-4">
                                <div class="col-md-3">
                                    <label for="modelVariant" class="form-label">{{ _('Model Variant') }}</label>
                                    <input type="text" class="form-control" id="modelVariant" name="modelVariant" placeholder="{{ _('e.g. Sport, Avantgarde, AMG Line') }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="kw" class="form-label">{{ _('Power (KW)') }}</label>
                                    <input type="number" class="form-control" id="kw" name="kw" min="0" placeholder="{{ _('e.g. 110') }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="ps" class="form-label">{{ _('Power (PS)') }}</label>
                                    <input type="number" class="form-control" id="ps" name="ps" min="0" placeholder="{{ _('e.g. 150') }}">
                                </div>
                                <div class="col-md-3">
                                    <label for="doors" class="form-label">{{ _('Number of Doors') }}</label>
                                    <select class="form-select" id="doors" name="doors">
                                        <option value="">{{ _('Select Number') }}</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="transmission" class="form-label">{{ _('Transmission') }}</label>
                                    <select class="form-select" id="transmission" name="transmission">
                                        <option value="">{{ _('Select Transmission') }}</option>
                                        <option value="manual">{{ _('Manual') }}</option>
                                        <option value="automatic">{{ _('Automatic') }}</option>
                                        <option value="semi-automatic">{{ _('Semi-Automatic') }}</option>
                                        <option value="cvt">{{ _('CVT') }}</option>
                                        <option value="dct">{{ _('DCT (Dual Clutch)') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="carImages" class="form-label">{{ _('Car Images') }}</label>
                                    <input class="form-control" type="file" id="carImages" name="carImages" multiple accept="image/*">
                                    <div class="form-text">{{ _('Upload up to 10 images of your car (max 5MB each)') }}</div>
                                    <div id="imagePreviewContainer" class="mt-2 d-flex flex-wrap"></div>
                                </div>
                            </div>

                            <!-- Location Section -->
                            <h4 class="mb-3">{{ _('Location') }}</h4>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label for="cityLocation" class="form-label">{{ _('City') }} *</label>
                                    <select class="form-select" id="cityLocation" name="cityLocation" required>
                                        <option value="">{{ _('Select City') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="postalCode" class="form-label">{{ _('Postal Code') }}</label>
                                    <input type="text" class="form-control" id="postalCode" name="postalCode" readonly>
                                </div>
                            </div>

                            <!-- Additional Information Section -->
                            <h4 class="mb-3">{{ _('Additional Information') }}</h4>
                            <div class="row g-3 mb-4">
                                <div class="col-12">
                                    <label for="additionalInfo" class="form-label">{{ _('Message / Description') }}</label>
                                    <textarea class="form-control" id="additionalInfo" name="additionalInfo" rows="4"></textarea>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="d-grid">
                                        <button type="submit" class="btn btn-primary btn-lg">{{ _('Submit Car Listing') }}</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-5">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8 text-center">
                <h2>{{ _('Contact Us') }}</h2>
                <p class="lead">{{ _('Have questions? Our team is here to help.') }}</p>
                <div class="row mt-4">
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-envelope fa-2x text-primary mb-3"></i>
                                <h5>{{ _('Email') }}</h5>
                                <p>info@autoverkauf.de</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-phone fa-2x text-primary mb-3"></i>
                                <h5>{{ _('Phone') }}</h5>
                                <p>+49 123 456789</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <i class="fas fa-map-marker-alt fa-2x text-primary mb-3"></i>
                                <h5>{{ _('Address') }}</h5>
                                <p>{{ _('Berlin, Germany') }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Contact Form -->
        <div class="row justify-content-center mt-5">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white">
                        <h3 class="m-0">{{ _('Send Us a Message') }}</h3>
                    </div>
                    <div class="card-body">
                        <form id="contactForm">
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="contactName" class="form-label">{{ _('Full Name') }} *</label>
                                    <input type="text" class="form-control" id="contactName" name="contactName" required>
                                </div>
                                <div class="col-md-6">
                                    <label for="contactEmail" class="form-label">{{ _('Email') }} *</label>
                                    <input type="email" class="form-control" id="contactEmail" name="contactEmail" required>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label for="contactPhone" class="form-label">{{ _('Phone Number') }}</label>
                                    <input type="tel" class="form-control" id="contactPhone" name="contactPhone">
                                </div>
                                <div class="col-md-6">
                                    <label for="contactSubject" class="form-label">{{ _('Subject') }} *</label>
                                    <select class="form-select" id="contactSubject" name="contactSubject" required>
                                        <option value="">{{ _('Select Subject') }}</option>
                                        <option value="general">{{ _('General Inquiry') }}</option>
                                        <option value="support">{{ _('Customer Support') }}</option>
                                        <option value="partnership">{{ _('Business Partnership') }}</option>
                                        <option value="feedback">{{ _('Feedback') }}</option>
                                        <option value="other">{{ _('Other') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="contactMessage" class="form-label">{{ _('Message') }} *</label>
                                <textarea class="form-control" id="contactMessage" name="contactMessage" rows="5" required></textarea>
                            </div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">{{ _('Send Message') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Car Listing Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1" aria-labelledby="successModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="successModalLabel">{{ _('Success!') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{{ _('Your car listing has been successfully submitted. We will contact you soon.') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ _('Close') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Contact Form Success Modal -->
<div class="modal fade" id="contactSuccessModal" tabindex="-1" aria-labelledby="contactSuccessModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="contactSuccessModalLabel">{{ _('Message Sent!') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{{ _('Your message has been successfully sent. Our team will get back to you shortly.') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ _('Close') }}</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}