import "./style.css";

type Product = {
  id: string;
  name: string;
  price: number;
  description: string;
  features: string[];
};

const products: Product[] = [
  {
    id: "exz-tweaks",
    name: "EXZ TWEAKS",
    price: 25,
    description: "Windows optimization focused on system responsiveness, latency and performance.",
    features: ["CPU & RAM", "Windows services", "Network tuning", "System optimization"]
  },
  {
    id: "exz-gaming",
    name: "EXZ GAMING",
    price: 25,
    description: "Gaming-focused optimization for FPS, input latency and competitive setups.",
    features: ["FPS optimization", "Input latency", "GPU tuning", "Gaming configuration"]
  }
];

const app = document.querySelector<HTMLDivElement>("#app")!;

function icon(name: string) {
  const icons: Record<string, string> = {
    discord: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M19.54 5.13A16.7 16.7 0 0 0 15.46 4l-.5 1.02a15.3 15.3 0 0 0-5.92 0L8.54 4a16.7 16.7 0 0 0-4.08 1.13C1.88 9.2 1.18 13.18 1.52 17.1a16.6 16.6 0 0 0 5 2.54l1.21-1.66c-.67-.25-1.3-.56-1.9-.92l.47-.36c3.67 1.7 8.71 1.7 12.34 0l.48.36c-.61.36-1.24.67-1.91.92l1.2 1.66a16.6 16.6 0 0 0 5-2.54c.4-4.55-.68-8.49-3.87-11.97ZM8.75 15.18c-1.1 0-2-.99-2-2.2s.88-2.2 2-2.2c1.12 0 2.02.99 2 2.2 0 1.21-.89 2.2-2 2.2Zm6.5 0c-1.1 0-2-.99-2-2.2s.88-2.2 2-2.2c1.12 0 2.02.99 2 2.2 0 1.21-.89 2.2-2 2.2Z"/></svg>',
    lock: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v9h14v-9a2 2 0 0 0-2-2Zm-7-2a2 2 0 0 1 4 0v2h-4V7Zm7 11H7v-7h10v7Z"/></svg>',
    arrow: '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h13m-5-5 5 5-5 5"/></svg>'
  };
  return icons[name] ?? "";
}

function layout(content: string) {
  return `
    <header class="nav">
      <a class="brand" href="#/">EXZ<span>OS</span> 11</a>
      <nav aria-label="Navigation">
        <a href="#/">Home</a>
        <a href="#/download">Download</a>
        <a href="#/docs">Documentation</a>
        <a href="#/about">About</a>
        <a href="#/donate">Donate</a>
      </nav>
      <a class="discord" href="https://discord.gg/Ku4MbDwvGxG" target="_blank" rel="noreferrer">${icon("discord")} Discord</a>
      <button class="mobile-menu" aria-label="Ouvrir le menu">☰</button>
    </header>
    <main>${content}</main>
    <footer class="footer">
      <div><strong>EXZOS 11</strong><span>Optimization without compromise.</span></div>
      <div class="footer-links">
        <a href="#/download">Download</a>
        <a href="#/docs">Documentation</a>
        <a href="#/donate">Donate</a>
        <a href="https://discord.gg/Ku4MbDwvGxG" target="_blank" rel="noreferrer">Discord</a>
        <span class="disabled-link">Telegram — Soon...</span>
      </div>
      <small>© 2026 EXZOS 11</small>
    </footer>
  `;
}

function home() {
  return layout(`
    <section class="hero">
      <div class="hero-copy">
        <div class="eyebrow"><i></i> EXZOS 11 PERFORMANCE SYSTEM</div>
        <h1>PUSH YOUR PC<br><span>BEYOND LIMITS.</span></h1>
        <p>Advanced Windows and gaming optimization tools built for performance, responsiveness and control.</p>
        <div class="actions">
          <a class="button primary" href="#/download">EXPLORE PANELS ${icon("arrow")}</a>
          <a class="button secondary" href="#/docs">DOCUMENTATION</a>
        </div>
      </div>
      <div class="hero-visual">
        <div class="grid"></div>
        <div class="performance-card">
          <div class="mini-label">SYSTEM PERFORMANCE</div>
          <div class="gauge"><span>97</span><small>%</small></div>
          <div class="meter"><i></i></div>
          <div class="perf-row"><span>CPU</span><b>OPTIMIZED</b></div>
          <div class="perf-row"><span>GPU</span><b>OPTIMIZED</b></div>
          <div class="perf-row"><span>LATENCY</span><b>LOW</b></div>
        </div>
      </div>
    </section>

    <section class="stats">
      <div><strong>02</strong><span>Optimization Panels</span></div>
      <div><strong>€50</strong><span>Complete Pack</span></div>
      <div><strong>24/7</strong><span>Documentation Access</span></div>
    </section>

    <section class="section">
      <div class="section-head"><div><span class="eyebrow">01 / PRODUCTS</span><h2>TOOLS BUILT FOR PERFORMANCE.</h2></div><a href="#/download">VIEW ALL →</a></div>
      <div class="product-grid">${products.map(productCard).join("")}</div>
    </section>

    <section class="community">
      <div><span class="eyebrow">02 / COMMUNITY</span><h2>JOIN THE EXZOS COMMUNITY.</h2><p>Get updates, support and access to the latest EXZ TWEAKS releases.</p></div>
      <a class="button primary" href="https://discord.gg/Ku4MbDwvGxG" target="_blank" rel="noreferrer">${icon("discord")} JOIN DISCORD</a>
    </section>
  `);
}

function productCard(product: Product) {
  return `
    <article class="product-card">
      <div class="product-shot">
        <div class="lock">${icon("lock")}</div>
        <span>SCREENSHOT</span>
        <div class="fake-panel"><b>${product.name}</b><i></i><i></i><i></i></div>
      </div>
      <div class="product-info">
        <div><h3>${product.name}</h3><span class="price">${product.price} €</span></div>
        <p>${product.description}</p>
        <ul>${product.features.map(feature => `<li>✓ ${feature}</li>`).join("")}</ul>
        <button class="button primary add-cart" data-product="${product.id}">${icon("lock")} ADD TO CART</button>
      </div>
    </article>
  `;
}

function download() {
  return layout(`
    <section class="page-hero"><span class="eyebrow">EXZOS 11 / DOWNLOAD</span><h1>CHOOSE YOUR<br><span>OPTIMIZATION.</span></h1><p>Both panels are protected. A valid purchase license is required before download.</p></section>
    <section class="section"><div class="product-grid">${products.map(productCard).join("")}</div>
      <div class="pack">
        <div><span class="eyebrow">COMPLETE PACK</span><h2>EXZOS 11 COMPLETE</h2><p>Get EXZ TWEAKS and EXZ GAMING together.</p></div>
        <div class="pack-buy"><strong>50 €</strong><button class="button primary add-pack">GET THE COMPLETE PACK ${icon("arrow")}</button></div>
      </div>
    </section>
    <section class="license-box"><div>${icon("lock")}</div><div><h3>DOWNLOADS ARE LOCKED</h3><p>After payment, your license code unlocks the products included in your order. Files are delivered through a protected server endpoint.</p></div></section>
  `);
}

function docs() {
  const topics = [
    ["Introduction", "introduction"],
    ["Installation", "installation"],
    ["CPU Optimization", "cpu"],
    ["GPU Optimization", "gpu"],
    ["RAM Optimization", "ram"],
    ["Windows Optimization", "windows"],
    ["Network Optimization", "network"],
    ["Gaming & FPS", "gaming"],
    ["Troubleshooting", "troubleshooting"]
  ];
  return layout(`
    <section class="docs">
      <aside class="docs-side"><span class="eyebrow">DOCUMENTATION</span><h3>EXZ TWEAKS</h3>${topics.map(([name, slug], i) => `<a class="${i === 0 ? "active" : ""}" href="#/docs/${slug}">${name}</a>`).join("")}</aside>
      <article class="docs-content"><span class="eyebrow">GETTING STARTED</span><h1>EXZ TWEAKS<br><span>DOCUMENTATION.</span></h1><p class="lead">Everything you need to understand, install and configure the EXZOS 11 optimization tools.</p><hr><h2>Introduction</h2><p>EXZ TWEAKS is designed to provide a controlled set of Windows and gaming optimization options. Use the documentation to understand each category before applying changes.</p><div class="callout"><b>Before you start</b><span>Create a restore point and read the relevant section before applying system changes.</span></div><h2>Optimization categories</h2><div class="doc-grid">${topics.slice(1,7).map(([name, slug]) => `<a href="#/docs/${slug}"><b>${name}</b><span>Read the guide →</span></a>`).join("")}</div></article>
    </section>
  `);
}

function docPage(slug: string) {
  const titles: Record<string, [string, string]> = {
    installation: ["Installation", "Install EXZ TWEAKS and prepare your system."],
    cpu: ["CPU Optimization", "System-level CPU configuration and responsiveness."],
    gpu: ["GPU Optimization", "Graphics configuration for consistent gaming performance."],
    ram: ["RAM Optimization", "Memory usage, background processes and responsiveness."],
    windows: ["Windows Optimization", "Windows services, startup and system configuration."],
    network: ["Network Optimization", "Latency-oriented network configuration."],
    gaming: ["Gaming & FPS", "Gaming-focused configuration and performance checks."],
    troubleshooting: ["Troubleshooting", "Common installation and panel issues."]
  };
  const [title, intro] = titles[slug] ?? ["Documentation", "EXZ TWEAKS documentation."];
  return layout(`
    <section class="docs"><aside class="docs-side"><span class="eyebrow">EXZ TWEAKS</span><h3>DOCUMENTATION</h3><a href="#/docs">← Back to docs</a></aside>
    <article class="docs-content"><span class="eyebrow">EXZ TWEAKS / ${title.toUpperCase()}</span><h1>${title.toUpperCase()}</h1><p class="lead">${intro}</p><hr><h2>Overview</h2><p>This section will contain the final EXZ TWEAKS instructions, screenshots and configuration details for this module.</p><div class="callout"><b>EXZOS 11</b><span>Apply only the changes you understand and keep a restore path available.</span></div></article></section>
  `);
}

function about() {
  return layout(`<section class="page-hero"><span class="eyebrow">EXZOS 11 / ABOUT</span><h1>OPTIMIZATION<br><span>WITHOUT COMPROMISE.</span></h1><p>EXZOS 11 develops focused tools for Windows and gaming optimization, with clear documentation and controlled configuration.</p></section><section class="section two-col"><div><span class="eyebrow">OUR APPROACH</span><h2>SIMPLE. CONTROLLED. PERFORMANCE-FOCUSED.</h2></div><p>EXZ TWEAKS is built around understandable optimization categories instead of a collection of unexplained switches. The website provides product information, documentation, community support and secure product delivery.</p></section>`);
}

function donate() {
  return layout(`<section class="donate"><span class="eyebrow">EXZOS 11 / SUPPORT</span><h1>SUPPORT<br><span>THE PROJECT.</span></h1><p>Your support helps fund development, infrastructure and future EXZOS 11 tools.</p><a class="button primary" href="#" id="paypal-button">DONATE WITH PAYPAL</a><small>PayPal link will be connected here when you provide it.</small></section>`);
}

function cartPanel() {
  const cart = JSON.parse(localStorage.getItem("exz-cart") || "[]") as string[];
  const items = cart.map(id => products.find(p => p.id === id)).filter(Boolean) as Product[];
  const total = items.reduce((sum, item) => sum + item.price, 0);
  document.body.insertAdjacentHTML("beforeend", `
    <div class="modal-backdrop" id="cart-modal">
      <div class="cart-modal" role="dialog" aria-modal="true" aria-label="Panier">
        <button class="close-cart" aria-label="Fermer">×</button>
        <span class="eyebrow">YOUR CART</span><h2>CHECKOUT</h2>
        ${items.length ? items.map(item => `<div class="cart-line"><span>${item.name}</span><b>${item.price} €</b></div>`).join("") : `<p>Your cart is empty.</p>`}
        <div class="cart-total"><span>Total</span><strong>${total} €</strong></div>
        <button class="button primary checkout" ${items.length ? "" : "disabled"}>CHECKOUT</button>
        <small>Stripe Checkout will be connected after your Stripe keys are configured.</small>
      </div>
    </div>
  `);
  document.querySelector(".close-cart")?.addEventListener("click", () => document.querySelector("#cart-modal")?.remove());
  document.querySelector(".checkout")?.addEventListener("click", () => alert("Stripe checkout is prepared for integration. Add your Stripe keys to enable live payments."));
}

function addToCart(id: string) {
  const cart = JSON.parse(localStorage.getItem("exz-cart") || "[]") as string[];
  if (!cart.includes(id)) cart.push(id);
  localStorage.setItem("exz-cart", JSON.stringify(cart));
  cartPanel();
}

function render() {
  const path = location.hash.replace(/^#/, "") || "/";
  let content = path === "/" ? home() : path === "/download" ? download() : path === "/docs" ? docs() : path.startsWith("/docs/") ? docPage(path.split("/")[2]) : path === "/about" ? about() : path === "/donate" ? donate() : home();
  app.innerHTML = content;
  document.querySelectorAll<HTMLButtonElement>(".add-cart").forEach(button => button.addEventListener("click", () => addToCart(button.dataset.product!)));
  document.querySelector<HTMLButtonElement>(".add-pack")?.addEventListener("click", () => {
    localStorage.setItem("exz-cart", JSON.stringify(products.map(p => p.id)));
    cartPanel();
  });
  document.querySelector(".mobile-menu")?.addEventListener("click", () => document.querySelector(".nav nav")?.classList.toggle("open"));
  window.scrollTo({ top: 0, behavior: "instant" });
}

window.addEventListener("hashchange", render);
render();