<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Support — Infynix</title>
<link rel="icon" type="image/png" href="logo.png">

<style>
:root {
    --bg:#ffffff; --text:#1d1d1f; --accent:#0071e3;
    --border:#d2d2d7; --gray:#f5f5f7;
    --danger:#ff3b30; --green:#34c759;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;}
body{background:var(--bg);color:var(--text);overflow-x:hidden;min-height:100vh;}

/* -- NAVBAR -- */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 52px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 10000;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
}
.nav-container {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    font-size: 16px;
}
.nav-logo-small { height: 24px; width: auto; }
nav a {
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
    position: relative;
    padding: 5px 0;
    margin: 0 15px;
    transition: opacity 0.3s;
}
nav a:hover { opacity: 1; }
nav a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.7px;
    bottom: 0;
    left: 0;
    background-color: var(--text);
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
nav a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
nav a.nav-active {
    opacity: 1;
    font-weight: 600;
    color: var(--accent);
}
nav a.nav-active::after { display: none; }

#main-content { max-width: 1000px; margin: 0 auto; padding: 80px 20px 60px; }

/* -- OFFICIAL INFO BANNER -- */
.official-banner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;
    margin-bottom: 40px;
    margin-top: 32px;
    animation: fadeIn .25s ease;
}
.official-item {
    background: #fff;
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: background .12s;
}
.official-item:hover { background: #fafafa; }
.official-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #1d1d1f;
}
.official-item-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #86868b;
    margin-bottom: 5px;
}
.official-item-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
}
.official-item-value a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.official-item-value a:hover { text-decoration: underline; }

/* -- SECTION HEADER -- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    border-bottom: 2px solid #1d1d1f;
    padding-bottom: 14px;
}
.section-header h2 { font-size: 28px; font-weight: 700; letter-spacing: -1px; }

/* -- FAQ -- */
.faq-list { border-top: 1px solid var(--border); margin-bottom: 48px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 4px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    user-select: none;
    gap: 12px;
    transition: color .15s;
}
.faq-q:hover { color: var(--accent); }
.faq-arrow {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    transition: transform .25s, border-color .15s;
    color: #555;
}
.faq-q:hover .faq-arrow { border-color: var(--accent); color: var(--accent); }
.faq-item.open .faq-arrow { transform: rotate(90deg); }
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease;
    font-size: 14px;
    color: #555;
    line-height: 1.7;
    padding: 0 4px;
}
.faq-item.open .faq-a { max-height: 300px; padding: 0 4px 18px; }

/* -- CONTACT STRIP -- */
.contact-strip {
    background: #1d1d1f;
    color: #fff;
    padding: 32px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    border: 1px solid #1d1d1f;
}
.contact-strip-text strong {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -.3px;
}
.contact-strip-text span { font-size: 13px; color: #aaa; }
.btn-contact-strip {
    background: #fff;
    color: #1d1d1f;
    border: none;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background .2s;
    flex-shrink: 0;
}
.btn-contact-strip svg { width: 13px; height: 13px; flex-shrink: 0; }
.btn-contact-strip:hover { background: #e8e8e8; }

/* -- TOAST -- */
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(70px); background: #1d1d1f; color: #fff; padding: 11px 22px; font-size: 13px; font-weight: 600; transition: transform .28s cubic-bezier(.34,1.56,.64,1); z-index: 9999; pointer-events: none; white-space: nowrap; }
#toast.show { transform: translateX(-50%) translateY(0); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: translateY(0) } }
@media(max-width: 680px) {
    h1 { font-size: 40px; }
    .official-banner { grid-template-columns: 1fr; }
    .contact-strip { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>

<div id="toast"></div>

<h1 style="font-size: 60px; margin: 80px 0 20px 190px;">Support</h1>

<!-- -- NAVBAR -- -->
<nav>
    <div class="nav-container">
        <a href="index.html" class="nav-brand">
            <img src="logo.jpg" alt="" class="nav-logo-small">
        </a>
        <div style="display:flex; align-items:center;">
            <a href="forums.html">Forums</a>
            <a href="contact.html">Contact</a>
            <a href="tuto.html">Tutorials</a>
            <a href="support.html" class="nav-active">Support</a>
            <a href="about.html">About</a>
        </div>
    </div>
</nav>

<div id="main-content">

    <a style="color:var(--accent);text-decoration:none;font-size:14px;font-weight:500;" href="help.html">? Back to HelpCenter</a>

    <!-- OFFICIAL INFO -->
    <div class="official-banner">
        <div class="official-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <div>
                <div class="official-item-label">Official Email</div>
                <div class="official-item-value">
                    <a href="mailto:infynix-official@outlook.com">infynix-official@outlook.com</a>
                </div>
            </div>
        </div>
        <div class="official-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            <div>
                <div class="official-item-label">Hosted On</div>
                <div class="official-item-value">Netlify</div>
            </div>
        </div>
        <div class="official-item">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            <div>
                <div class="official-item-label">Official Download</div>
                <div class="official-item-value">
                    <a href="https://infynixskymarket.netlify.app" target="_blank">infynixskymarket.netlify.app</a>
                </div>
            </div>
        </div>
    </div>

    <!-- FAQ -->
    <div class="section-header">
        <h2>Frequently Asked Questions</h2>
        <span style="font-size:13px;color:#86868b;" id="faq-count"></span>
    </div>
    <div class="faq-list" id="faq-list"></div>

    <!-- CONTACT STRIP -->
    <div class="contact-strip">
        <div class="contact-strip-text">
            <strong>Still need help?</strong>
            <span>Our team typically replies within 24–48 hours on business days.</span>
        </div>
        <a href="contact.html" class="btn-contact-strip">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>
            Contact Us
        </a>
    </div>

</div>

<script>
const FAQ_DATA = [
    {
        q: "Why can't TaskSchool be installed on Windows 8?",
        a: "TaskSchool is not available due to complex dependencies that are incompatible with this edition and all editions prior to Windows 10."
    },
    {
        q: "How do I install TaskSchool?",
        a: "To install TaskSchool, go to the search bar and search for <strong>\"Video: Tutorial TaskSchool\"</strong> and watch the video."
    },
    {
        q: "How do I create a post on the forum?",
        a: "Click <strong>New Post</strong> then click <strong>Rules</strong> to read the community guidelines. For more information, search for <strong>\"Video: Use Forum\"</strong>."
    },
    {
        q: "How do I install PenCS?",
        a: "Go to <a href='https://infynixskymarket.netlify.app' target='_blank' style='color:#0071e3;font-weight:600;'>infynixskymarket.netlify.app</a>, choose PenCS and download it. Extract the ZIP and install the <strong>.appx</strong> files to set up the program."
    }
];

function buildFAQ() {
    const list = document.getElementById('faq-list');
    document.getElementById('faq-count').textContent = FAQ_DATA.length + ' questions';
    list.innerHTML = FAQ_DATA.map((item, i) => `
        <div class="faq-item" id="faq-${i}">
            <div class="faq-q" onclick="toggleFAQ(${i})">
                <span>${item.q}</span>
                <span class="faq-arrow">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                </span>
            </div>
            <div class="faq-a">${item.a}</div>
        </div>
    `).join('');
}

function toggleFAQ(i) {
    const item   = document.getElementById('faq-' + i);
    const isOpen = item.classList.contains('open');
    document.querySelectorAll('.faq-item.open').forEach(el => el.classList.remove('open'));
    if (!isOpen) item.classList.add('open');
}

function showToast(msg) {
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.add('show');
    setTimeout(() => t.classList.remove('show'), 3000);
}

buildFAQ();
</script>
</body>
</html>