{% extends "base.html" %}

{% block head_extra %}
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "{{ site_name }}",
    "url": "{{ site_url }}",
    "description": "{{ site_description }}",
    "potentialAction": {
        "@type": "SearchAction",
        "target": "{{ site_url }}/?q={search_term_string}",
        "query-input": "required name=search_term_string"
    }
}
</script>
{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="hero" id="hero">
    <div class="hero-bg"></div>
    <div class="container hero-content">
        <h1 class="hero-title">
            Discover <span class="gradient-text">Free &amp; Open APIs</span>
        </h1>
        <p class="hero-subtitle">
            Browse <strong>{{ total_apis }}+</strong> curated APIs across
            <strong>{{ total_categories }}</strong> categories.
            Always free. Always up-to-date.
        </p>

        <!-- Search Bar -->
        <div class="search-wrapper" id="search-wrapper">
            <div class="search-bar">
                <span class="search-icon">🔍</span>
                <input type="search" id="hero-search" class="search-input"
                    placeholder="Search APIs... (e.g. weather, music, finance)" autocomplete="off"
                    aria-label="Search APIs">
            </div>
        </div>

        <!-- Stats -->
        <div class="stats-row">
            <div class="stat-item">
                <span class="stat-number" id="stat-apis">{{ total_apis }}</span>
                <span class="stat-label">Free APIs</span>
            </div>
            <div class="stat-item">
                <span class="stat-number" id="stat-categories">{{ total_categories }}</span>
                <span class="stat-label">Categories</span>
            </div>
            <div class="stat-item">
                <span class="stat-number">100%</span>
                <span class="stat-label">Free</span>
            </div>
        </div>
    </div>
</section>

<!-- Category Cards -->
<section class="categories-section" id="categories">
    <div class="container">
        <h2 class="section-title">Browse by Category</h2>
        <p class="section-subtitle">Find the perfect API for your next project</p>

        <div class="category-grid" id="category-grid">
            {% for cat in categories %}
            <a href="/category/{{ cat.slug }}.html" class="category-card" id="cat-{{ cat.slug }}">
                <div class="category-card-inner">
                    <h3 class="category-name">{{ cat.name }}</h3>
                    <span class="category-count">{{ cat.count }} API{{ 's' if cat.count != 1 }}</span>
                </div>
                <span class="category-arrow">→</span>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Featured APIs -->
<section class="featured-section" id="featured">
    <div class="container">
        <h2 class="section-title">Featured APIs</h2>
        <p class="section-subtitle">Popular and trending APIs to get you started</p>

        <div class="items-grid" id="featured-grid">
            {% for item in featured_items %}
            <a href="/item/{{ item.slug }}.html" class="item-card" id="item-{{ item.slug }}">
                <div class="item-card-header">
                    <h3 class="item-title">{{ item.title }}</h3>
                    <span class="item-category-badge">{{ item.category }}</span>
                </div>
                <p class="item-desc">{{ item.description | truncate_text }}</p>
                <div class="item-meta">
                    <span class="meta-badge {% if item.auth == 'None' %}badge-free{% else %}badge-auth{% endif %}">
                        {{ '🔓 No Auth' if item.auth == 'None' else '🔐 ' + item.auth }}
                    </span>
                    <span class="meta-badge {% if item.https %}badge-https{% else %}badge-http{% endif %}">
                        {{ '🔒 HTTPS' if item.https else '⚠️ HTTP' }}
                    </span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Ad Section -->
{% if enable_adsense and adsense_publisher_id != 'ca-pub-XXXXXXXXXX' %}
<section class="ad-section">
    <div class="container" style="max-width: 800px; margin: 0 auto; text-align: center;">
        <span style="font-size: 0.75rem; color: #a1a1aa; text-transform: uppercase; letter-spacing: 1px;">Advertisement</span>
        <ins class="adsbygoogle" style="display:block" data-ad-client="{{ adsense_publisher_id }}"
            data-ad-slot="XXXXXXXXXX" data-ad-format="auto" data-full-width-responsive="true"></ins>
        <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
    </div>
</section>
{% elif enable_adsense %}
<section class="ad-section">
    <div class="container" style="max-width: 800px; margin: 0 auto; text-align: center;">
        <div class="ad-placeholder" style="padding: 2rem; border: 1px dashed #555; border-radius: 8px;">
            <span class="ad-placeholder-text">📢 Ad Space — <a href="/docs/SETUP_GUIDE.html">Configure AdSense</a></span>
        </div>
    </div>
</section>
{% endif %}

<!-- Educational Content Section -->
<section class="educational-section" id="guide" style="padding: 4rem 1rem; background: var(--surface);">
    <div class="container" style="max-width: 800px; margin: 0 auto; line-height: 1.8;">
        <h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; background: var(--primary-gradient); -webkit-background-clip: text; color: transparent;">How to Effectively Use Open APIs</h2>
        
        <p style="font-size: 1.1rem; color: var(--text-muted); margin-bottom: 2rem;">
            Application Programming Interfaces (APIs) serve as the fundamental backbone of modern software architecture. Whether you are building a small hobby application, a hackathon project, or a massive scalable enterprise system, integrating public APIs allows developers to borrow sophisticated functionalities without reinventing the wheel.
        </p>

        <h3 style="font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--text);">1. No Authentication Required</h3>
        <p style="color: var(--text-muted); margin-bottom: 1.5rem;">
            Many APIs featured within our directory explicitly bypass robust authentication barriers like OAuth2 or API Key generation mechanisms. This allows rapid prototyping. To utilize a "No Auth" API, you simply execute a standard <code>GET</code> request via JavaScript's native <code>fetch()</code> library directly to the endpoint URL.
        </p>

        <h3 style="font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; color: var(--text);">2. Understanding Rate Limits</h3>
        <p style="color: var(--text-muted); margin-bottom: 1.5rem;">
            While an API may be entirely open and free (freemium), they almost universally enforce rate limiting to shield backend server infrastructure against DDoS attacks or accidental recursive loops. Always inspect the <code>X-RateLimit-Remaining</code> HTTP headers returned in your response payload to ensure you do not get temporarily IP banned!
        </p>
    </div>
</section>

<!-- FAQ Schema Section -->
<section class="faq-section" id="faq" style="padding: 4rem 1rem;">
    <div class="container" style="max-width: 800px; margin: 0 auto;">
        <h2 style="font-size: 2rem; margin-bottom: 2rem; text-align: center;">Frequently Asked Questions</h2>
        
        <div style="border-bottom: 1px solid #333; padding: 1.5rem 0;">
            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">What exactly is a RESTful API?</h3>
            <p style="color: var(--text-muted);">A RESTful API represents Representational State Transfer, communicating strictly via HTTP verbs (GET, POST, PUT, DELETE). It transmits serialized JSON payloads seamlessly across networks without managing session states locally.</p>
        </div>
        
        <div style="border-bottom: 1px solid #333; padding: 1.5rem 0;">
            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">What does CORS mean?</h3>
            <p style="color: var(--text-muted);">Cross-Origin Resource Sharing (CORS) is a strict browser-level security standard enforcing domain whitelists. If an API isn't correctly returning CORS headers allowing your domain, your frontend browser will strictly block the payload from reading!</p>
        </div>
        
        <div style="padding: 1.5rem 0;">
            <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem;">Are these open APIs secure?</h3>
            <p style="color: var(--text-muted);">Yes, the entire QuickUtils public directory is thoroughly curated. We enforce a secure HTTPS-only mapping policy globally, meaning all requested packets intercepting over Wi-Fi are fully TLS encrypted end-to-end.</p>
        </div>
    </div>
</section>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "What exactly is a RESTful API?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "A RESTful API represents Representational State Transfer, communicating strictly via HTTP verbs."
    }
  }, {
    "@type": "Question",
    "name": "What does CORS mean?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Cross-Origin Resource Sharing (CORS) is a strict browser-level security standard enforcing domain whitelists."
    }
  }, {
    "@type": "Question",
    "name": "Are these open APIs secure?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Yes, we organically enforce a secure HTTPS-only mapping policy globally."
    }
  }]
}
</script>

        <!-- Fuse.js -->
        <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2"></script>
        <script>
            document.addEventListener("DOMContentLoaded", () => {
                const searchInput = document.getElementById('hero-search');
                if (!searchInput) return;

                let fuse;
                let originalGridHtml = "";
                const grid = document.getElementById('featured-grid');
                if (grid) originalGridHtml = grid.innerHTML;

                // Fetch search index
                fetch('/search.json')
                    .then(res => res.json())
                    .then(data => {
                        fuse = new Fuse(data, {
                            keys: ['title', 'description', 'category'],
                            threshold: 0.3
                        });
                    });

                searchInput.addEventListener('input', function (e) {
                    if (!fuse || !grid) return;
                    const query = e.target.value.trim();

                    if (!query) {
                        grid.innerHTML = originalGridHtml;
                        return;
                    }

                    const results = fuse.search(query);
                    if (results.length === 0) {
                        grid.innerHTML = '<p style="color:white;text-align:center;grid-column:1/-1;">No results found.</p>';
                        return;
                    }

                    // Render results
                    let html = "";
                    results.slice(0, 12).forEach(res => {
                        const item = res.item;
                        html += `
                <a href="${item.url}" class="item-card">
                    <div class="item-card-header">
                        <h3 class="item-title">${item.title}</h3>
                        <span class="item-category-badge">${item.category || 'Directory'}</span>
                    </div>
                    <p class="item-desc">${item.description.substring(0, 100)}...</p>
                </a>`;
                    });
                    grid.innerHTML = html;
                });
            });
        </script>

        {% endblock %}