<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}SmartTools{% endblock %} - Build Custom AI Commands</title>

    <!-- Meta tags -->
    <meta name="description" content="{% block meta_description %}Create Unix-style pipeable tools that work with any AI provider. Provider-agnostic, composable, and community-driven.{% endblock %}">
    {% block meta_extra %}{% endblock %}

    <!-- Open Graph -->
    <meta property="og:title" content="{% block og_title %}SmartTools{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Build custom AI commands in YAML{% endblock %}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.url }}">
    {% block og_extra %}{% endblock %}

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{% block twitter_title %}SmartTools{% endblock %}">
    <meta name="twitter:description" content="{% block twitter_description %}Build custom AI commands in YAML{% endblock %}">
    {% block twitter_extra %}{% endblock %}

    <!-- Canonical URL -->
    <link rel="canonical" href="{% block canonical %}{{ request.url }}{% endblock %}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="{{ url_for('web.static', filename='css/main.css') }}">
    {% block styles %}{% endblock %}

    <!-- Schema.org -->
    {% block schema %}
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Organization",
        "name": "SmartTools",
        "url": "{{ request.host_url }}",
        "description": "Build custom AI commands in YAML"
    }
    </script>
    {% endblock %}
</head>
<body class="min-h-screen bg-gray-50 text-gray-900 font-sans antialiased">
    <!-- Skip to content link for accessibility -->
    <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-indigo-600 text-white px-4 py-2 rounded-md z-50">
        Skip to content
    </a>

    <!-- Header -->
    {% include "components/header.html" %}

    <!-- Main content -->
    <main id="main-content" class="{% block main_class %}{% endblock %}">
        {% block content %}{% endblock %}
    </main>

    <!-- Footer -->
    {% include "components/footer.html" %}

    <!-- Cookie consent banner (if not consented) -->
    {% if not session.get('consent_given') %}
    {% include "components/consent_banner.html" %}
    {% endif %}

    <!-- Scripts -->
    <script src="{{ url_for('web.static', filename='js/main.js') }}" defer></script>
    {% block scripts %}{% endblock %}
</body>
</html>
