<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#0B1220">
    <meta name="description" content="AXIOM — The Interactive Platform">
    <title>AXIOM</title>

    <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;800&display=swap" rel="stylesheet">

    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background: #0B1220;
            color: #e2e8f0;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
        }

        /* ═══ Canvas background ═══ */
        #particle-canvas {
            position: fixed;
            inset: 0;
            z-index: -2;
            display: block;
            width: 100%;
            height: 100%;
        }

        .ambient-glow {
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(ellipse at 50% 50%, rgba(26, 62, 111, 0.15) 0%, transparent 60%);
        }

        /* ═══ Hero ═══ */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            position: relative;
            z-index: 10;
        }

        .logo {
            font-size: 72px;
            font-weight: 700;
            margin-bottom: 50px;
            text-align: center;
            letter-spacing: 8px;
            animation: fadeIn 0.8s ease-out;
            user-select: none;
        }

        .logo-text {
            background: linear-gradient(135deg, #ffffff 0%, #93c5fd 50%, #4a9eff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
            text-shadow: 0 0 60px rgba(96, 165, 250, 0.3);
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .logo,
            .search-wrapper,
            .tagline,
            .entry-btn-wrapper {
                animation: none;
            }
        }

        /* ═══ Search Wrapper ═══ */
        .search-wrapper {
            width: 100%;
            max-width: 584px;
            position: relative;
            animation: fadeIn 0.8s ease-out 0.2s both;
            padding: 0 16px;
            box-sizing: border-box;
        }

        /* ═══ Search Box ═══ */
        .search-box {
            display: flex;
            align-items: center;
            background: rgba(26, 31, 46, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(74, 158, 255, 0.2);
            border-radius: 24px;
            padding: 8px 8px 8px 16px;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow:
                0 1px 6px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
            gap: 8px;
            min-height: 56px;
            box-sizing: border-box;
        }

        .search-box:hover {
            border-color: rgba(74, 158, 255, 0.35);
            box-shadow:
                0 2px 12px rgba(0, 0, 0, 0.4),
                0 0 30px rgba(74, 158, 255, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.03);
        }

        .search-box:focus-within {
            border-color: #4a9eff;
            box-shadow:
                0 2px 12px rgba(0, 0, 0, 0.4),
                0 0 40px rgba(74, 158, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* ═══ Search Icon ═══ */
        .search-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6b7280;
            transition: color 0.2s;
            flex-shrink: 0;
        }

        .search-icon svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            display: block;
        }

        .search-box:focus-within .search-icon {
            color: #4a9eff;
        }

        /* ═══ Search Input ═══ */
        .search-input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            outline: none;
            color: #e2e8f0;
            font-size: 16px;
            font-family: inherit;
            padding: 12px 4px;
            text-align: left;
            line-height: 1.4;
            -webkit-appearance: none;
            appearance: none;
            border-radius: 0;
        }

        .search-input::placeholder {
            color: #4b5563;
            transition: color 0.2s;
        }

        .search-box:focus-within .search-input::placeholder {
            color: #6b7280;
        }

        /* ═══ Search Button ═══ */
        .search-btn {
            padding: 12px 24px;
            background: linear-gradient(135deg, #1a3e6f, #2c5f8a);
            color: #ffffff;
            border: 1px solid rgba(74, 158, 255, 0.3);
            border-radius: 16px;
            font-size: 14px;
            font-weight: 600;
            font-family: inherit;
            cursor: pointer;
            transition: all 0.2s;
            white-space: nowrap;
            flex-shrink: 0;
            min-height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: transparent;
            touch-action: manipulation;
        }

        .search-btn:hover {
            background: linear-gradient(135deg, #2c5f8a, #4a9eff);
            border-color: #4a9eff;
        }

        .search-btn:active {
            transform: scale(0.97);
        }

        /* ═══ Tagline ═══ */
        .tagline {
            margin-top: 24px;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 3px;
            color: #6b7280;
            animation: fadeIn 0.8s ease-out 0.3s both;
            text-transform: uppercase;
            padding: 0 16px;
        }

        .tagline span { color: #93c5fd; transition: color 0.3s; }
        .tagline span:nth-child(1) { color: #ffffff; }
        .tagline span:nth-child(2) { color: #60a5fa; }
        .tagline span:nth-child(3) { color: #4a9eff; }

        /* ═══ Entry button ═══ */
        .entry-btn-wrapper {
            margin-top: 50px;
            width: 100%;
            max-width: 584px;
            animation: fadeIn 0.8s ease-out 0.4s both;
            padding: 0 16px;
            box-sizing: border-box;
        }

        .entry-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            width: 100%;
            padding: 20px 32px;
            background: linear-gradient(135deg, #1a3e6f 0%, #2c5f8a 50%, #1a3e6f 100%);
            background-size: 200% 200%;
            color: #ffffff;
            border: 1.5px solid rgba(74, 158, 255, 0.5);
            border-radius: 24px;
            font-size: 18px;
            font-weight: 600;
            font-family: inherit;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            box-shadow:
                0 4px 24px rgba(26, 62, 111, 0.5),
                0 0 0 1px rgba(74, 158, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
            letter-spacing: 0.5px;
            isolation: isolate;
        }

        .entry-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(147, 197, 253, 0.3) 50%, transparent 100%);
            transition: left 0.6s ease;
            z-index: -1;
        }

        .entry-btn:hover::before { left: 100%; }

        .entry-btn::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, #4a9eff, #60a5fa, #4a9eff);
            border-radius: 24px;
            opacity: 0;
            filter: blur(12px);
            transition: opacity 0.4s;
            z-index: -2;
        }

        .entry-btn:hover {
            transform: translateY(-3px) scale(1.02);
            background-position: 100% 100%;
            border-color: #4a9eff;
            box-shadow:
                0 8px 40px rgba(74, 158, 255, 0.6),
                0 0 0 1px rgba(74, 158, 255, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
        }

        .entry-btn:hover::after { opacity: 0.6; }
        .entry-btn:active { transform: translateY(-1px) scale(1.0); }

        .entry-btn-text { position: relative; z-index: 1; }

        .entry-btn-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            transition: transform 0.3s;
        }

        .entry-btn-arrow svg {
            width: 22px;
            height: 22px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .entry-btn:hover .entry-btn-arrow {
            transform: translateX(6px);
        }

        /* ═══ Footer ═══ */
        .footer {
            padding: 30px 24px;
            background: rgba(11, 18, 32, 0.7);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-top: 1px solid rgba(74, 158, 255, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 12px;
            color: #6b7280;
            position: relative;
            z-index: 10;
        }

        .footer-links {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-links a {
            color: #6b7280;
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover { color: #4a9eff; }

        /* ═══ Responsive — Tablet (≤768px) ═══ */
        @media (max-width: 768px) {
            .search-wrapper {
                padding: 0 12px;
                max-width: 100%;
            }

            .search-box {
                min-height: 52px;
                padding: 6px 6px 6px 14px;
                border-radius: 20px;
            }

            .search-input {
                font-size: 16px;
                padding: 10px 4px;
            }

            .search-btn {
                padding: 10px 18px;
                font-size: 14px;
                border-radius: 14px;
            }

            .entry-btn-wrapper {
                padding: 0 12px;
            }
        }

        /* ═══ Responsive — Mobile (≤640px) ═══ */
        @media (max-width: 640px) {
            .logo {
                font-size: 48px;
                margin-bottom: 36px;
                letter-spacing: 4px;
            }

            .search-wrapper {
                padding: 0 10px;
            }

            .search-box {
                min-height: 50px;
                padding: 5px 5px 5px 12px;
                border-radius: 18px;
                gap: 6px;
            }

            .search-icon svg {
                width: 18px;
                height: 18px;
            }

            .search-input {
                font-size: 16px;
                padding: 8px 2px;
            }

            .search-input::placeholder {
                font-size: 15px;
            }

            .search-btn {
                padding: 10px 14px;
                font-size: 13px;
                border-radius: 12px;
                min-height: 38px;
            }

            .tagline {
                font-size: 11px;
                letter-spacing: 2px;
                margin-top: 20px;
            }

            .entry-btn-wrapper {
                margin-top: 40px;
                padding: 0 10px;
            }

            .entry-btn {
                font-size: 16px;
                padding: 18px 24px;
                border-radius: 20px;
            }

            .entry-btn-arrow svg {
                width: 18px;
                height: 18px;
            }
        }

        /* ═══ Responsive — Small Mobile (≤360px) ═══ */
        @media (max-width: 360px) {
            .logo {
                font-size: 40px;
                letter-spacing: 3px;
                margin-bottom: 28px;
            }

            .search-wrapper {
                padding: 0 8px;
            }

            .search-box {
                padding: 4px 4px 4px 10px;
                min-height: 48px;
            }

            .search-input {
                font-size: 16px;
                padding: 8px 2px;
            }

            .search-input::placeholder {
                font-size: 14px;
            }

            .search-btn {
                padding: 8px 12px;
                font-size: 12px;
                min-height: 36px;
            }

            .entry-btn-wrapper {
                padding: 0 8px;
            }
        }

        /* ═══ Landscape orientation ═══ */
        @media (max-height: 500px) and (orientation: landscape) {
            .hero {
                padding: 20px 16px;
            }

            .logo {
                font-size: 48px;
                margin-bottom: 24px;
            }

            .tagline {
                margin-top: 16px;
            }

            .entry-btn-wrapper {
                margin-top: 24px;
            }

            .search-box {
                min-height: 48px;
            }

            .search-btn {
                padding: 10px 18px;
            }
        }

        /* ═══ High contrast (accessibility) ═══ */
        @media (prefers-contrast: high) {
            .search-box {
                border: 2px solid #4a9eff;
            }

            .search-input {
                color: #ffffff;
            }

            .search-input::placeholder {
                color: #94a3b8;
            }
        }

        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #0B1220; }
        ::-webkit-scrollbar-thumb { background: #2a3142; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #3a4356; }
    </style>
</head>
<body>

    <noscript>
        <div style="padding: 40px 20px; text-align: center; background: #fef2f2; color: #7f1d1d; border-bottom: 2px solid #dc2626;">
            <strong>JavaScript is required</strong> to use AXIOM. Please enable it in your browser.
        </div>
    </noscript>

    <canvas id="particle-canvas" aria-hidden="true"></canvas>
    <div class="ambient-glow" aria-hidden="true"></div>

    <section class="hero" aria-label="AXIOM home">
        <div class="logo">
            <span class="logo-text" aria-label="AXIOM">AXIOM</span>
        </div>

        <div class="search-wrapper">
            <form id="search-form" role="search">
                <div class="search-box">
                    <span class="search-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">
                            <circle cx="11" cy="11" r="7"></circle>
                            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                        </svg>
                    </span>
                    <input
                        type="text"
                        class="search-input"
                        id="search-input"
                        placeholder="Search for content..."
                        autocomplete="off"
                        aria-label="Search content"
                    >
                    <button type="submit" class="search-btn">Search</button>
                </div>
            </form>
        </div>

        <div class="tagline">
            <span>Discover</span>. <span>Understand</span>. <span>Create</span>.
        </div>

        <div class="entry-btn-wrapper">
            <a href="/faculties" class="entry-btn">
                <span class="entry-btn-text">Start Creating</span>
                <span class="entry-btn-arrow" aria-hidden="true">
                    <svg viewBox="0 0 24 24">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </span>
            </a>
        </div>
    </section>

    <div class="footer">
        <div class="footer-links">
            <a href="#">About</a>
            <a href="#">Privacy</a>
            <a href="#">Contact</a>
        </div>
    </div>

    <script src="config.js"></script>
    <script src="search-engine.js"></script>

    <script>
        (function () {
            'use strict';

            const CFG = window.AXIOM_CONFIG;
            const SETTINGS = (CFG && CFG.settings) || {};
            const DEBUG = SETTINGS.debug === true;
            const log  = (...a) => { if (DEBUG) console.log(...a); };
            const warn = (...a) => { if (DEBUG) console.warn(...a); };

            // ───────────────────────────────────────────
            // Helpers
            // ───────────────────────────────────────────
            function isSafeUrl(url) {
                if (window.AXIOMSecurity && window.AXIOMSecurity.isSafeUrl) {
                    return window.AXIOMSecurity.isSafeUrl(url);
                }
                if (!url || typeof url !== 'string') return false;
                const lower = url.trim().toLowerCase();
                if (lower.startsWith('javascript:') || lower.startsWith('vbscript:')) return false;
                if (lower.startsWith('#')) return true;
                if (lower.startsWith('/') || lower.startsWith('./') || lower.startsWith('../')) return true;
                return /^https?:\/\//i.test(lower);
            }

            function navigateTo(url) {
                if (!isSafeUrl(url)) {
                    warn('Unsafe URL blocked:', url);
                    return;
                }
                window.location.href = url;
            }

            // ═══════════════════════════════════════
            // PARTICLE SYSTEM
            // ═══════════════════════════════════════
            const canvas = document.getElementById('particle-canvas');
            const prefersReducedMotion = window.matchMedia &&
                window.matchMedia('(prefers-reduced-motion: reduce)').matches;

            let ctx = null;
            let width = 0;
            let height = 0;
            let particles = [];
            let mouse = { x: null, y: null };
            let running = false;
            let rafId = null;

            const P_CONFIG = {
                particleCount: 100,
                minParticles: 20,
                maxDistance: 140,
                particleSpeed: 0.35,
                particleSize: 1.5,
                mouseInfluenceRadius: 180,
                mouseInfluenceForce: 0.03
            };

            function initParticles() {
                if (!ctx) return;
                particles = [];
                const calculated = Math.floor((width * height) / 15000);
                const count = Math.max(
                    P_CONFIG.minParticles,
                    Math.min(P_CONFIG.particleCount, calculated)
                );
                for (let i = 0; i < count; i++) {
                    particles.push(new Particle());
                }
                log('Particles initialized:', count);
            }

            class Particle {
                constructor() {
                    this.x = Math.random() * width;
                    this.y = Math.random() * height;
                    this.vx = (Math.random() - 0.5) * P_CONFIG.particleSpeed;
                    this.vy = (Math.random() - 0.5) * P_CONFIG.particleSpeed;
                    this.size = Math.random() * P_CONFIG.particleSize + 0.5;
                    this.opacity = Math.random() * 0.5 + 0.3;
                }

                update() {
                    this.x += this.vx;
                    this.y += this.vy;

                    if (this.x < 0) this.x = width;
                    if (this.x > width) this.x = 0;
                    if (this.y < 0) this.y = height;
                    if (this.y > height) this.y = 0;

                    if (mouse.x !== null && mouse.y !== null) {
                        const dx = this.x - mouse.x;
                        const dy = this.y - mouse.y;
                        const dist = Math.sqrt(dx * dx + dy * dy);

                        if (dist < P_CONFIG.mouseInfluenceRadius) {
                            const force = (P_CONFIG.mouseInfluenceRadius - dist) / P_CONFIG.mouseInfluenceRadius;
                            const angle = Math.atan2(dy, dx);
                            this.x += Math.cos(angle) * force * P_CONFIG.mouseInfluenceForce * 50;
                            this.y += Math.sin(angle) * force * P_CONFIG.mouseInfluenceForce * 50;
                        }
                    }
                }

                draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(74, 158, 255, ' + (this.opacity * 0.15) + ')';
                    ctx.fill();

                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(147, 197, 253, ' + this.opacity + ')';
                    ctx.fill();
                }
            }

            function drawConnections() {
                for (let i = 0; i < particles.length; i++) {
                    for (let j = i + 1; j < particles.length; j++) {
                        const dx = particles[i].x - particles[j].x;
                        const dy = particles[i].y - particles[j].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);

                        if (distance < P_CONFIG.maxDistance) {
                            const opacity = (1 - distance / P_CONFIG.maxDistance) * 0.3;
                            ctx.strokeStyle = 'rgba(74, 158, 255, ' + opacity + ')';
                            ctx.lineWidth = 0.6;
                            ctx.beginPath();
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(particles[j].x, particles[j].y);
                            ctx.stroke();
                        }
                    }

                    if (mouse.x !== null && mouse.y !== null) {
                        const dx = particles[i].x - mouse.x;
                        const dy = particles[i].y - mouse.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);

                        if (distance < P_CONFIG.mouseInfluenceRadius) {
                            const opacity = (1 - distance / P_CONFIG.mouseInfluenceRadius) * 0.6;
                            ctx.strokeStyle = 'rgba(96, 165, 250, ' + opacity + ')';
                            ctx.lineWidth = 0.8;
                            ctx.beginPath();
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(mouse.x, mouse.y);
                            ctx.stroke();
                        }
                    }
                }
            }

            function animate() {
                if (!running) return;
                ctx.clearRect(0, 0, width, height);
                particles.forEach(p => { p.update(); p.draw(); });
                drawConnections();
                rafId = requestAnimationFrame(animate);
            }

            function startAnimation() {
                if (running) return;
                running = true;
                rafId = requestAnimationFrame(animate);
            }

            function stopAnimation() {
                running = false;
                if (rafId) { cancelAnimationFrame(rafId); rafId = null; }
            }

            function resizeCanvas() {
                if (!canvas) return;
                width = canvas.width = window.innerWidth;
                height = canvas.height = window.innerHeight;
                initParticles();
            }

            function onMouseMove(e) {
                mouse.x = e.clientX;
                mouse.y = e.clientY;
            }

            function onMouseLeave() {
                mouse.x = null;
                mouse.y = null;
            }

            function onTouchMove(e) {
                if (e.touches.length > 0) {
                    mouse.x = e.touches[0].clientX;
                    mouse.y = e.touches[0].clientY;
                }
            }

            function onTouchEnd() {
                mouse.x = null;
                mouse.y = null;
            }

            function onVisibilityChange() {
                if (document.hidden) {
                    stopAnimation();
                } else {
                    startAnimation();
                }
            }

            if (canvas && !prefersReducedMotion) {
                ctx = canvas.getContext('2d');
                resizeCanvas();

                let resizeTimer = null;
                window.addEventListener('resize', function () {
                    if (resizeTimer) clearTimeout(resizeTimer);
                    resizeTimer = setTimeout(resizeCanvas, 150);
                });

                window.addEventListener('mousemove', onMouseMove, { passive: true });
                window.addEventListener('mouseleave', onMouseLeave, { passive: true });
                window.addEventListener('touchmove', onTouchMove, { passive: true });
                window.addEventListener('touchend', onTouchEnd, { passive: true });
                document.addEventListener('visibilitychange', onVisibilityChange);

                startAnimation();
            } else if (canvas) {
                canvas.style.display = 'none';
            }

            // ═══════════════════════════════════════
            // SEARCH
            // ═══════════════════════════════════════
            const searchForm = document.getElementById('search-form');
            const searchInput = document.getElementById('search-input');

            const MAX_QUERY_LEN = 100;

            // ─── Submit handler (form) ───
            function handleSearch(e) {
                if (e) e.preventDefault();
                const query = searchInput.value.trim();

                if (!query) {
                    searchInput.focus();
                    return;
                }

                // Build clean URL: /content?q=...
                let url;
                if (CFG && typeof CFG.buildUrl === 'function') {
                    url = CFG.buildUrl('content', { q: query.substring(0, MAX_QUERY_LEN) });
                } else {
                    url = '/content?q=' + encodeURIComponent(query.substring(0, MAX_QUERY_LEN));
                }

                navigateTo(url);
            }

            searchForm.addEventListener('submit', handleSearch);
            window.handleSearch = handleSearch;

            log('AXIOM Home loaded');
        })();
    </script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('/sw.js')
                    .then(reg => console.log('SW registered:', reg.scope))
                    .catch(err => console.warn('SW failed:', err));
            });
        }
    </script>
</body>
    </html>
