docs/support.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Customer Support | Ask Farouk About Creative Thinking</title>
  <style>
    :root {
      --bg: #0f172a;
      --card-bg: #1e293b;
      --text: #f8fafc;
      --text-muted: #94a3b8;
      --accent: #38bdf8;
      --accent-hover: #0ea5e9;
      --border: #334155;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: var(--bg);
      color: var(--text);
      line-height: 1.7;
      padding: 40px 20px;
    }
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 40px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 8px;
      color: #ffffff;
    }
    .subtitle {
      color: var(--accent);
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .date {
      color: var(--text-muted);
      font-size: 0.9rem;
      margin-bottom: 32px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 16px;
    }
    h2 {
      font-size: 1.3rem;
      margin-top: 28px;
      margin-bottom: 12px;
      color: #e2e8f0;
    }
    p, ul {
      color: var(--text-muted);
      margin-bottom: 16px;
    }
    ul { padding-left: 24px; }
    li { margin-bottom: 8px; }
    a {
      color: var(--accent);
      text-decoration: none;
    }
    a:hover { text-decoration: underline; }
    .card {
      background: rgba(15, 23, 42, 0.6);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 20px;
    }
    .card h3 {
      color: #ffffff;
      font-size: 1.1rem;
      margin-bottom: 8px;
    }
    .nav {
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 20px;
      font-size: 0.95rem;
    }
    .badge {
      display: inline-block;
      background: rgba(56, 189, 248, 0.1);
      color: var(--accent);
      padding: 4px 12px;
      border-radius: 999px;
      font-size: 0.85rem;
      font-weight: 500;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <span class="badge">OpenAI Plugin Support</span>
    <h1>Customer Support & Help Center</h1>
    <div class="subtitle">Ask Farouk About Creative Thinking · «صنعة الإعلان» ("Ad Craftiness")</div>
    <div class="date">Developer Support & Community Assistance</div>

    <h2>How Can We Help You?</h2>
    <p>Welcome to the support center for <strong>Ask Farouk About Creative Thinking</strong>. Whether you need assistance installing the plugin, reporting an issue, or contributing to our creative knowledge base, we are here to help.</p>

    <div class="card">
      <h3>🚀 Quick Start & Installation Help</h3>
      <p>Need help getting started in ChatGPT or Codex? Check our comprehensive documentation on GitHub:</p>
      <ul>
        <li><a href="https://github.com/imMamdouhaboammar/ad-craftiness#readme" target="_blank" rel="noopener">Official Documentation & Setup Guide</a></li>
        <li><a href="https://github.com/imMamdouhaboammar/ad-craftiness/releases" target="_blank" rel="noopener">Latest Releases & Zip Downloads</a></li>
        <li><a href="https://github.com/imMamdouhaboammar/ad-craftiness/blob/main/docs/OPENAI_SUBMISSION.md" target="_blank" rel="noopener">OpenAI Directory Submission Dossier</a></li>
      </ul>
    </div>

    <div class="card">
      <h3>🐛 Bug Reports & Feature Requests</h3>
      <p>If you encounter an issue or have a suggestion, open an issue on our GitHub repository. We review community submissions regularly:</p>
      <p><a href="https://github.com/imMamdouhaboammar/ad-craftiness/issues" target="_blank" rel="noopener">👉 Open an Issue on GitHub</a></p>
    </div>

    <div class="card">
      <h3>📬 Direct Developer Contact</h3>
      <p>For urgent inquiries or partnership questions regarding the plugin implementation:</p>
      <ul>
        <li><strong>Developer:</strong> Mamdouh Aboammar</li>
        <li><strong>Email:</strong> <a href="mailto:mamdouhfces1997@gmail.com">mamdouhfces1997@gmail.com</a></li>
        <li><strong>GitHub Profile:</strong> <a href="https://github.com/imMamdouhaboammar" target="_blank" rel="noopener">@imMamdouhaboammar</a></li>
      </ul>
    </div>

    <div class="card">
      <h3>🎬 Content Creator Channels (Farouk Elkady)</h3>
      <p>To watch the original workshop and follow Farouk Elkady's creative work:</p>
      <ul>
        <li><a href="https://www.youtube.com/@faroukelkady5340" target="_blank" rel="noopener">YouTube Channel</a></li>
        <li><a href="https://www.youtube.com/watch?v=cPVcjkcq5Ic&t=28s" target="_blank" rel="noopener">Workshop: How to Come Up with an Ad Idea (20 Methods)</a></li>
        <li><a href="https://behance.net/Farouk_ELKady" target="_blank" rel="noopener">Behance Portfolio</a></li>
      </ul>
    </div>

    <div class="nav">
      <a href="./index.html">← Project Home</a>
      <a href="./privacy.html">Privacy Policy</a>
      <a href="./terms.html">Terms of Service</a>
    </div>
  </div>
</body>
</html>