{% extends "layouts/base.twig" %}

{% block title %}{{ __('index.contact_title') }} - {{ platformName }}{% endblock %}

{% block head %}
    <link href="{{ asset_url('css/landing-page.css') }}" rel="stylesheet">
    <style>
        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 0;
            margin-bottom: 50px;
        }
        .contact-info-card {
            transition: transform 0.3s;
        }
        .contact-info-card:hover {
            transform: translateY(-5px);
        }
        .icon-circle {
            width: 60px;
            height: 60px;
            background-color: #f8f9fa;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: #667eea;
            font-size: 24px;
        }
    </style>
{% endblock %}

{% block content %}
    <header class="page-header text-center">
        <div class="container">
            <h1 class="display-4 fw-bold">{{ __('index.contact.title') }}</h1>
            <p class="lead mb-0">{{ __('index.contact.subtitle') }}</p>
        </div>
    </header>

    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="card border-0 shadow-sm h-100 contact-info-card text-center py-4">
                        <div class="card-body">
                            <div class="icon-circle">
                                <i class="bi bi-geo-alt-fill"></i>
                            </div>
                            <h4 class="fw-bold mb-3">{{ __('index.contact.address_title') }}</h4>
                            <p class="text-muted mb-0">123 Street Name, City</p>
                            <p class="text-muted">Country, Zip Code</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="card border-0 shadow-sm h-100 contact-info-card text-center py-4">
                        <div class="card-body">
                            <div class="icon-circle">
                                <i class="bi bi-telephone-fill"></i>
                            </div>
                            <h4 class="fw-bold mb-3">{{ __('index.contact.phone_title') }}</h4>
                            <p class="text-muted mb-0">+1 (555) 123-4567</p>
                            <p class="text-muted">Mon-Fri, 9am-6pm</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="card border-0 shadow-sm h-100 contact-info-card text-center py-4">
                        <div class="card-body">
                            <div class="icon-circle">
                                <i class="bi bi-envelope-fill"></i>
                            </div>
                            <h4 class="fw-bold mb-3">{{ __('index.contact.email_title') }}</h4>
                            <p class="text-muted mb-0">info@syscms.com</p>
                            <p class="text-muted">support@syscms.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5 bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="card border-0 shadow">
                        <div class="card-body p-5">
                            <div class="text-center mb-4">
                                <h3 class="fw-bold">{{ __('index.contact.form_title') }}</h3>
                                <p class="text-muted">{{ __('index.contact.form_subtitle') }}</p>
                            </div>
                            <form>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="name" class="form-label">{{ __('index.contact.form_name') }}</label>
                                        <input type="text" class="form-control" id="name" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">{{ __('index.contact.form_email') }}</label>
                                        <input type="email" class="form-control" id="email" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="subject" class="form-label">{{ __('index.contact.form_subject') }}</label>
                                    <input type="text" class="form-control" id="subject" required>
                                </div>
                                <div class="mb-3">
                                    <label for="message" class="form-label">{{ __('index.contact.form_message') }}</label>
                                    <textarea class="form-control" id="message" rows="5" required>