<!DOCTYPE html>
<html class="scroll-smooth">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>{% block title %}EC Architektur{% endblock %}</title>
        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">

        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
        <link rel="manifest" href="/site.webmanifest">

        {% block stylesheets %}
            <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
        {% endblock %}
    </head>
    <body class="min-h-screen flex flex-col">
        <!--
        <div>
            <span class="">default</span>
            <span class="invisible sm:visible">sm</span>
            <span class="invisible md:visible">md</span>
            <span class="invisible lg:visible">lg</span>
            <span class="invisible xl:visible">xl</span>
            <span class="invisible 2xl:visible">2xl</span>
        </div>
        -->

        {% block navigation %}
        {% set current_path = app.request.get('_route') %}
        <nav class="bg-white pt-16 pb-24">
            <div class="px-4 sm:px-8 md:px-16 lg:px-32 flex justify-between items-center h-16">
                <div class="flex-shrink-0">
                    <a href="{{ path('home') }}"><img class="max-w-25 md:max-w-50" src="{{ asset('images/logo.png') }}" alt="EC Logo"></a>
                </div>

                <!-- Desktop Links -->
                <!-- <div class="hidden md:flex space-x-1">
                    <span class="px-4 py-4 bg-white text-black">
                        <span class="py-1 {% if current_path == 'about_me'%}border-b-1 border-black{% endif %}">
                            <a href="{{ path('about_me') }}" class="font-thin">Über mich</a>
                        </span>
                    </span>
                    <span class="px-4 py-4 bg-white text-black">
                        <span class="py-1 {% if current_path == 'architecture'%}border-b-1 border-black{% endif %}">
                            <a href="{{ path('architecture') }}" class="font-thin">Architektur</a>
                        </span>
                    </span>
                    <span class="px-4 py-4 bg-white text-black">
                        <span class="py-1 {% if current_path == 'building_report'%}border-b-1 border-black{% endif %}">
                            <a href="{{ path('building_report') }}" class="font-thin">Gutachten</a>
                        </span>
                    </span>
                    <span class="px-4 py-4 bg-black text-white">
                        <span class="py-1 {% if current_path == 'contact'%}border-b-1 border-white{% endif %}">
                            <a href="{{ path('contact') }}" class="font-thin">Kontakt</a>
                        </span>
                    </span>
                </div> -->

                <!-- Hamburger -->
                <!-- <div class="md:hidden">
                    <button id="menu-btn" class="focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div> -->
            </div>

            <!-- Mobile Drawer -->
            <!-- <div id="mobile-menu" class="max-h-0 overflow-hidden md:hidden transition-all duration-300 ease-in-out">
                <span class="px-3 py-4 bg-white text-black">
                    <span class="py-1 {% if current_path == 'about_me'%}border-b-1 border-black{% endif %}">
                        <a href="{{ path('about_me') }}" class="font-thin">Über mich</a>
                    </span>
                </span>
                <span class="px-3 py-4 bg-white text-black">
                    <span class="py-1 {% if current_path == 'architecture'%}border-b-1 border-black{% endif %}">
                        <a href="{{ path('architecture') }}" class="font-thin">Architektur</a>
                    </span>
                </span>
                <span class="px-3 py-4 bg-white text-black">
                    <span class="py-1 {% if current_path == 'building_report'%}border-b-1 border-black{% endif %}">
                        <a href="{{ path('building_report') }}" class="font-thin">Gutachten</a>
                    </span>
                </span>
                <span class="px-3 py-4 bg-black text-white">
                    <span class="py-1 {% if current_path == 'contact'%}border-b-1 border-white{% endif %}">
                        <a href="{{ path('contact') }}" class="font-thin">Kontakt</a>
                    </span>
                </span>
            </div> -->

        </nav>
        {% endblock %}

        <main class="flex-grow">
            {% block body %}{% endblock %}
        </main>

        {% block footer %}
        <footer class="bg-black text-white">
            <div class="px-4 sm:px-8 md:px-16 lg:px-32 pb-16">
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-16 mb-8">
                    <div>
                        <p class="text-3xl"><span class="font-semibold">EC</span> <span class="font-thin text-base">ARCHITEKTUR</span></p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <p class="font-thin mb-4">Hebbelstraße 30</p>
                        <p class="font-thin mb-4">55127 Mainz, Deutschland</p>
                    </div>
                    <div>
                        <p class="font-thin mb-4">+49 178 8358358</p>
                        <p class="font-thin mb-4">info@ec-architektur.de</p>
                    </div>
                    <div>
                        <p class="font-thin mb-4"><a href="{{ path('imprint') }}" class="underline">Impressum</a></p>
                        <p class="font-thin mb-4"><a href="{{ path('data_privacy') }}" class="underline">Datenschutz</a></p>
                    </div>
                </div>
            </div>
            <!-- Neue Zeile: zentriert -->
            <div class="my-8 text-center">
                <p class="font-thin text-sm">
                    © {{ "now"|date("Y") }} Elvan Canalp-Özkorkmaz – Alle Rechte vorbehalten.
                </p>
            </div>
        </footer>
        {% endblock %}
    </body>

    {% block javascripts %}
        {% block importmap %}{{ importmap('app') }}{% endblock %}
    {% endblock %}
</html>
