{{> header}}

<style>
  :root {
    --primary: #10b981;
    --primary-dark: #059669;
    --secondary: #6366f1;
    --dark: #0f172a;
    --darker: #020617;
    --light: #f8fafc;
    --gray: #64748b;
  }
  .wp-hero {
    background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
    min-height: 90vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .wp-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(ellipse, rgba(16, 185, 129, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }
  .wp-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 60%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(99, 102, 241, 0.1) 0%, transparent 60%);
    pointer-events: none;
  }
  .wp-hero-content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .wp-hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.1;
    margin-bottom: 1.5rem;
  }
  .wp-hero-text h1 span {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .wp-hero-text p {
    font-size: 1.25rem;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 2rem;
  }
  .wp-hero-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .wp-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 14px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .wp-btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
  }
  .wp-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.5);
  }
  .wp-btn-outline {
    border: 2px solid var(--gray);
    color: white;
    background: transparent;
  }
  .wp-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  .wp-hero-visual {
    position: relative;
  }
  .wp-logo-container {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(10px);
  }
  .wp-logo-img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
  }
  .wp-tech-stack {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
  }
  .wp-tech-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 50px;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
  }
  .wp-features {
    background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
    padding: 100px 40px;
    position: relative;
  }
  .wp-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
  }
  .wp-section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
  }
  .wp-section-header p {
    font-size: 1.1rem;
    color: #94a3b8;
  }
  .wp-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .wp-feature-card {
    background: rgba(30, 41, 59, 0.8);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .wp-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .wp-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(16, 185, 129, 0.3);
  }
  .wp-feature-card:hover::before {
    opacity: 1;
  }
  .wp-feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
  }
  .wp-feature-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.75rem;
  }
  .wp-feature-card p {
    color: #94a3b8;
    line-height: 1.7;
    margin: 0 0 1rem 0;
  }
  .wp-feature-expand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary);
    font-weight: 500;
    font-size: 0.9rem;
    transition: gap 0.2s ease;
  }
  .wp-feature-card:hover .wp-feature-expand {
    gap: 0.75rem;
  }
  /* Feature Modal */
  .feature-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.95);
    z-index: 9999;
    display: none;
    overflow-y: auto;
    backdrop-filter: blur(10px);
  }
  .feature-modal-overlay.active {
    display: block;
  }
  .feature-modal {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 40px 60px;
    animation: modalSlideIn 0.3s ease;
  }
  @keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .feature-modal-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .feature-modal-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    flex-shrink: 0;
  }
  .feature-modal-title h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: 0.5rem;
  }
  .feature-modal-title p {
    color: #94a3b8;
    margin: 0;
  }
  .feature-modal-content h3 {
    color: var(--primary);
    font-size: 1.25rem;
    margin: 2rem 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .feature-modal-content p {
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 1rem;
  }
  .feature-modal-content ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
  }
  .feature-modal-content li {
    color: #cbd5e1;
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .feature-modal-content li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary);
    font-weight: bold;
  }
  .feature-modal-content code {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Fira Code', monospace;
    font-size: 0.9em;
  }
  .feature-modal-content pre {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    overflow-x: auto;
    margin: 1rem 0;
  }
  .feature-modal-content pre code {
    background: none;
    padding: 0;
    color: #e2e8f0;
  }
  .btn-back-home {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 2rem;
  }
  .btn-back-home:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
  }
  .wp-architecture {
    background: var(--dark);
    padding: 100px 40px;
  }
  .wp-architecture .wp-section-header h2,
  .wp-architecture .wp-section-header p {
    color: white;
  }
  .wp-architecture .wp-section-header p {
    opacity: 0.7;
  }
  .wp-arch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .wp-arch-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
  }
  .wp-arch-card h4 {
    color: var(--primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
  }
  .wp-arch-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .wp-arch-card li {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .wp-arch-card li:last-child {
    border-bottom: none;
  }
  .wp-cta {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 100px 40px;
    text-align: center;
  }
  .wp-cta h2 {
    font-size: 2.5rem;
    color: white;
    font-weight: 700;
    margin-bottom: 1rem;
  }
  .wp-cta p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
  .wp-cta .wp-btn-primary {
    background: white;
    color: var(--dark);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  }
  .wp-cta .wp-btn-primary:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  }
  /* User Access Section - Dark Theme */
  .wp-user-access {
    background: linear-gradient(135deg, #1e293b 0%, var(--dark) 100%);
    padding: 100px 40px;
  }
  .wp-user-access .wp-section-header h2 {
    color: white;
  }
  .wp-user-access .wp-section-header p {
    color: #94a3b8;
  }
  .wp-access-content {
    max-width: 1000px;
    margin: 0 auto;
  }
  .wp-user-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
  }
  .wp-dashboard-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
  }
  .wp-dashboard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: var(--primary);
  }
  .wp-dashboard-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  .wp-dashboard-card h3 {
    color: white;
    margin-bottom: 0.5rem;
  }
  .wp-dashboard-card p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.9rem;
  }
  .wp-auth-forms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
  }
  .wp-auth-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
  }
  .wp-auth-card h3 {
    color: white;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
  }
  .wp-form-group {
    margin-bottom: 1rem;
  }
  .wp-input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 1rem;
    color: white;
    transition: border-color 0.3s;
  }
  .wp-input::placeholder {
    color: #64748b;
  }
  .wp-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(15, 23, 42, 0.8);
  }
  .wp-btn-block {
    width: 100%;
    justify-content: center;
  }
  .wp-btn-secondary {
    background: linear-gradient(135deg, var(--secondary) 0%, #4f46e5 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
  }
  .wp-btn-sm {
    padding: 10px 20px;
    font-size: 0.9rem;
  }
  .wp-auth-link {
    text-align: center;
    margin-top: 1.5rem;
    color: #94a3b8;
  }
  .wp-auth-link a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
  }
  /* Courses Section */
  .wp-courses, .wp-posts, .wp-navigation {
    padding: 100px 40px;
  }
  .wp-courses {
    background: var(--dark);
  }
  .wp-courses .wp-section-header h2,
  .wp-courses .wp-section-header p {
    color: white;
  }
  .wp-courses .wp-section-header p {
    opacity: 0.7;
  }
  .wp-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .wp-course-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .wp-course-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
  }
  .wp-course-image {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .wp-course-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0,0,0,0.2);
  }
  .wp-course-placeholder {
    font-size: 3rem;
  }
  .wp-course-price {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--dark);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .wp-course-price.wp-free {
    background: var(--primary);
  }
  .wp-course-body {
    padding: 1.5rem;
  }
  .wp-course-body h3 {
    color: white;
    margin-bottom: 0.5rem;
  }
  .wp-course-body p {
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    margin-bottom: 1rem;
  }
  .wp-course-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .wp-badge {
    background: rgba(255,255,255,0.1);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
  }
  .wp-course-meta span {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
  }
  /* Posts Section - Dark Theme */
  .wp-posts {
    background: linear-gradient(135deg, #1e293b 0%, var(--dark) 100%);
    padding: 100px 40px;
  }
  .wp-posts .wp-section-header h2 {
    color: white;
  }
  .wp-posts .wp-section-header p {
    color: #94a3b8;
  }
  .wp-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  .wp-post-card {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .wp-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border-color: var(--primary);
  }
  .wp-post-image {
    height: 180px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .wp-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .wp-post-placeholder {
    font-size: 3rem;
    opacity: 0.5;
  }
  .wp-post-body {
    padding: 1.5rem;
  }
  .wp-post-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
    color: #94a3b8;
  }
  .wp-post-body h3 {
    margin-bottom: 0.5rem;
  }
  .wp-post-body h3 a {
    color: white;
    text-decoration: none;
  }
  .wp-post-body h3 a:hover {
    color: var(--primary);
  }
  .wp-post-body p {
    color: #94a3b8;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
  }
  .wp-read-more {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
  }
  .wp-section-footer {
    text-align: center;
    margin-top: 3rem;
  }
  /* Navigation Section */
  .wp-navigation {
    background: var(--dark);
  }
  .wp-navigation .wp-section-header h2,
  .wp-navigation .wp-section-header p {
    color: white;
  }
  .wp-navigation .wp-section-header p {
    opacity: 0.7;
  }
  .wp-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .wp-nav-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
  }
  .wp-nav-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    background: rgba(255,255,255,0.05);
  }
  .wp-nav-card.wp-nav-highlight {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.1);
  }
  .wp-nav-icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
  }
  .wp-nav-card h3 {
    color: white;
    margin-bottom: 0.5rem;
  }
  .wp-nav-card p {
    color: rgba(255,255,255,0.6);
    margin: 0;
    font-size: 0.9rem;
  }
  /* Tablet Styles */
  @media (max-width: 900px) {
    .wp-hero-content {
      grid-template-columns: 1fr;
      text-align: center;
      padding: 0 20px;
    }
    .wp-hero-text h1 {
      font-size: 2.5rem;
    }
    .wp-hero-buttons {
      justify-content: center;
    }
    .wp-hero-visual {
      display: none;
    }
    .wp-arch-grid {
      grid-template-columns: 1fr;
    }
    .wp-auth-forms {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .wp-auth-card {
      padding: 1.75rem;
    }
    .wp-features {
      padding: 60px 20px;
    }
    .wp-section-header {
      margin-bottom: 2.5rem;
    }
    .wp-section-header h2 {
      font-size: 2rem;
    }
    .wp-features-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .wp-architecture {
      padding: 60px 20px;
    }
    .wp-user-access {
      padding: 60px 20px;
    }
    .wp-access-grid {
      grid-template-columns: 1fr;
    }
    .wp-courses, .wp-posts, .wp-navigation {
      padding: 60px 20px;
    }
    .wp-courses-grid, .wp-posts-grid {
      grid-template-columns: 1fr;
    }
    .wp-nav-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .feature-modal {
      width: 95%;
      max-height: 90vh;
      margin: 20px;
    }
    .feature-modal-content {
      padding: 1.5rem;
    }
  }

  /* Mobile Styles */
  @media (max-width: 600px) {
    .wp-hero {
      min-height: auto;
      padding: 40px 0 60px;
    }
    .wp-hero-content {
      padding: 0 15px;
      gap: 30px;
    }
    .wp-hero-text h1 {
      font-size: 1.75rem;
      line-height: 1.2;
    }
    .wp-hero-text p {
      font-size: 1rem;
    }
    .wp-hero-buttons {
      flex-direction: column;
      width: 100%;
    }
    .wp-btn {
      width: 100%;
      justify-content: center;
      padding: 14px 20px;
    }
    .wp-section-header h2 {
      font-size: 1.5rem;
    }
    .wp-section-header p {
      font-size: 1rem;
    }
    .wp-feature-card {
      padding: 1.5rem;
    }
    .wp-feature-icon {
      width: 56px;
      height: 56px;
      font-size: 1.5rem;
    }
    .wp-feature-card h3 {
      font-size: 1.15rem;
    }
    .wp-arch-card {
      padding: 1.5rem;
    }
    .wp-nav-grid {
      grid-template-columns: 1fr;
    }
    .wp-course-card, .wp-post-card {
      min-width: 100%;
    }
    .wp-access-card {
      padding: 2rem;
    }
    .wp-access-card h3 {
      font-size: 1.25rem;
    }
    .wp-auth-forms {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }
    .wp-auth-card {
      padding: 1.5rem;
    }
    .wp-auth-card h3 {
      font-size: 1.25rem;
      margin-bottom: 1rem;
    }
    .wp-input {
      padding: 0.875rem 1rem;
      font-size: 16px; /* Prevents iOS zoom on focus */
    }
  }
</style>

<!-- Hero Section -->
<section class="wp-hero">
  <div class="wp-hero-content">
    <div class="wp-hero-text">
      <h1>The Modern <span>WordPress Alternative</span> Built with Node.js</h1>
      <p>A blazing-fast, enterprise-grade CMS built with NestJS, React, Prisma, and PostgreSQL. Full LMS, eCommerce, analytics, and plugin ecosystem out of the box.</p>
      <div class="wp-hero-buttons">
        <a href="https://github.com/syntex82/WordPress-Node" target="_blank" class="wp-btn wp-btn-primary">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
          Download on GitHub
        </a>
        <a href="#features" class="wp-btn wp-btn-outline">Learn More</a>
      </div>
    </div>
    <div class="wp-hero-visual">
      <div class="wp-logo-container">
        <svg class="wp-logo-img" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
          <!-- Node.js Hexagon -->
          <polygon points="200,30 280,70 280,150 200,190 120,150 120,70" fill="none" stroke="#10b981" stroke-width="3"/>
          <text x="200" y="140" text-anchor="middle" fill="white" font-size="32" font-weight="bold">WP</text>
          <text x="200" y="170" text-anchor="middle" fill="#10b981" font-size="16" font-weight="600">NODE</text>
          <!-- Decorative elements -->
          <circle cx="120" cy="70" r="6" fill="#10b981"/>
          <circle cx="280" cy="70" r="6" fill="#6366f1"/>
          <circle cx="280" cy="150" r="6" fill="#10b981"/>
          <circle cx="120" cy="150" r="6" fill="#6366f1"/>
          <circle cx="200" cy="30" r="6" fill="#10b981"/>
          <circle cx="200" cy="190" r="6" fill="#6366f1"/>
          <!-- Tagline -->
          <text x="200" y="240" text-anchor="middle" fill="#64748b" font-size="14">Modern CMS • Enterprise Ready</text>
          <text x="200" y="260" text-anchor="middle" fill="#64748b" font-size="12">v1.0.0</text>
        </svg>
        <div class="wp-tech-stack">
          <span class="wp-tech-badge">🟢 Node.js</span>
          <span class="wp-tech-badge">⚛️ React</span>
          <span class="wp-tech-badge">🐘 PostgreSQL</span>
          <span class="wp-tech-badge">📦 Prisma</span>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Features Section -->
<section class="wp-features" id="features">
  <div class="wp-section-header">
    <h2>Everything You Need, Built In</h2>
    <p>A complete content management ecosystem with powerful features. Click any card to learn more.</p>
  </div>
  <div class="wp-features-grid" id="featuresGrid">
    <div class="wp-feature-card" data-feature="lms">
      <div class="wp-feature-icon">📚</div>
      <h3>Learning Management System</h3>
      <p>Complete LMS with courses, lessons, quizzes, certificates, and student progress tracking.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="ecommerce">
      <div class="wp-feature-icon">🛒</div>
      <h3>eCommerce Ready</h3>
      <p>Full shopping experience with cart, checkout, orders, inventory, and payment processing.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="analytics">
      <div class="wp-feature-icon">📊</div>
      <h3>Advanced Analytics</h3>
      <p>GDPR-compliant analytics with real-time tracking, pageviews, sessions, and conversion metrics.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="themes">
      <div class="wp-feature-icon">🎨</div>
      <h3>Theme System</h3>
      <p>Handlebars-based themes with live customization, multiple layouts, and custom CSS support.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="plugins">
      <div class="wp-feature-icon">🔌</div>
      <h3>Plugin Architecture</h3>
      <p>Extensible plugin system with lifecycle hooks, custom routes, and marketplace support.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="recommendations">
      <div class="wp-feature-icon">🤖</div>
      <h3>AI Recommendations</h3>
      <p>Smart content recommendations with collaborative filtering, trending, and personalization.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="security">
      <div class="wp-feature-icon">🔐</div>
      <h3>Enterprise Security</h3>
      <p>JWT auth, RBAC, rate limiting, IP blocking, CSRF protection, and security headers.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="email">
      <div class="wp-feature-icon">📧</div>
      <h3>Email & Notifications</h3>
      <p>Transactional emails, push notifications, and real-time messaging built-in.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
    <div class="wp-feature-card" data-feature="seo">
      <div class="wp-feature-icon">🔍</div>
      <h3>SEO Optimized</h3>
      <p>Meta tags, sitemaps, schema markup, and search engine optimization tools.</p>
      <span class="wp-feature-expand">Learn more →</span>
    </div>
  </div>
</section>

<!-- Architecture Section -->
<section class="wp-architecture">
  <div class="wp-section-header">
    <h2>Modern Tech Stack</h2>
    <p>Built with industry-leading technologies for performance, scalability, and developer experience.</p>
  </div>
  <div class="wp-arch-grid">
    <div class="wp-arch-card">
      <h4>Backend</h4>
      <ul>
        <li>NestJS Framework</li>
        <li>TypeScript</li>
        <li>Prisma ORM</li>
        <li>PostgreSQL</li>
        <li>Redis Caching</li>
        <li>Bull Queue</li>
      </ul>
    </div>
    <div class="wp-arch-card">
      <h4>Frontend</h4>
      <ul>
        <li>React 18</li>
        <li>Tailwind CSS</li>
        <li>Vite Build</li>
        <li>Handlebars Templates</li>
        <li>Chart.js</li>
        <li>Socket.io</li>
      </ul>
    </div>
    <div class="wp-arch-card">
      <h4>DevOps</h4>
      <ul>
        <li>Docker Ready</li>
        <li>CI/CD Pipelines</li>
        <li>Health Checks</li>
        <li>Backup System</li>
        <li>Horizontal Scaling</li>
        <li>Logging & Monitoring</li>
      </ul>
    </div>
  </div>
</section>

<!-- User Access Section -->
<section class="wp-user-access" id="get-started">
  <div class="wp-section-header">
    {{#if user}}
    <h2>Welcome back, {{user.name}}!</h2>
    <p>Continue your journey or manage your content.</p>
    {{else}}
    <h2>Get Started Today</h2>
    <p>Create an account to access courses, manage content, and explore all features.</p>
    {{/if}}
  </div>
  <div class="wp-access-content">
    {{#if user}}
    <div class="wp-user-dashboard">
      <a href="/admin" class="wp-dashboard-card">
        <div class="wp-dashboard-icon">⚙️</div>
        <h3>Admin Panel</h3>
        <p>Manage your site</p>
      </a>
      <a href="/my-courses" class="wp-dashboard-card">
        <div class="wp-dashboard-icon">📚</div>
        <h3>My Courses</h3>
        <p>Continue learning</p>
      </a>
      <a href="/my-account" class="wp-dashboard-card">
        <div class="wp-dashboard-icon">👤</div>
        <h3>My Account</h3>
        <p>View profile</p>
      </a>
      <a href="/shop" class="wp-dashboard-card">
        <div class="wp-dashboard-icon">🛒</div>
        <h3>Shop</h3>
        <p>Browse products</p>
      </a>
    </div>
    {{else}}
    <div class="wp-auth-forms">
      <div class="wp-auth-card wp-login-card">
        <h3>Sign In</h3>
        <form method="POST" action="/login">
          <div class="wp-form-group">
            <input type="email" name="email" placeholder="Email address" required class="wp-input">
          </div>
          <div class="wp-form-group">
            <input type="password" name="password" placeholder="Password" required class="wp-input">
          </div>
          <button type="submit" class="wp-btn wp-btn-primary wp-btn-block">Sign In</button>
        </form>
        <p class="wp-auth-link">New here? <a href="/register">Create account</a></p>
      </div>
      <div class="wp-auth-card wp-register-card">
        <h3>Create Account</h3>
        <form method="POST" action="/register">
          <div class="wp-form-group">
            <input type="text" name="name" placeholder="Full name" required class="wp-input">
          </div>
          <div class="wp-form-group">
            <input type="email" name="email" placeholder="Email address" required class="wp-input">
          </div>
          <div class="wp-form-group">
            <input type="password" name="password" placeholder="Password (min 8 chars)" required minlength="8" class="wp-input">
          </div>
          <button type="submit" class="wp-btn wp-btn-secondary wp-btn-block">Create Account</button>
        </form>
        <p class="wp-auth-link">Have an account? <a href="/login">Sign in</a></p>
      </div>
    </div>
    {{/if}}
  </div>
</section>

<!-- Featured Courses Section -->
{{#if featuredCourses.length}}
<section class="wp-courses" id="courses">
  <div class="wp-section-header">
    <h2>📚 Featured Courses</h2>
    <p>Start learning with our most popular courses. Enroll now and boost your skills.</p>
  </div>
  <div class="wp-courses-grid">
    {{#each featuredCourses}}
    <div class="wp-course-card">
      <div class="wp-course-image">
        {{#if featuredImage}}
        <img src="{{featuredImage}}" alt="{{title}}">
        {{else}}
        <div class="wp-course-placeholder">📚</div>
        {{/if}}
        {{#if price}}
        <span class="wp-course-price">${{price}}</span>
        {{else}}
        <span class="wp-course-price wp-free">Free</span>
        {{/if}}
      </div>
      <div class="wp-course-body">
        <h3>{{title}}</h3>
        <p>{{shortDescription}}</p>
        <div class="wp-course-meta">
          {{#if level}}<span class="wp-badge">{{level}}</span>{{/if}}
          {{#if _count.lessons}}<span>{{_count.lessons}} lessons</span>{{/if}}
        </div>
        <a href="/courses/{{slug}}" class="wp-btn wp-btn-outline wp-btn-sm">View Course</a>
      </div>
    </div>
    {{/each}}
  </div>
  <div class="wp-section-footer">
    <a href="/courses" class="wp-btn wp-btn-outline">Browse All Courses →</a>
  </div>
</section>
{{/if}}

<!-- Latest Blog Posts Section -->
{{#if posts.length}}
<section class="wp-posts" id="blog">
  <div class="wp-section-header">
    <h2>📝 Latest from the Blog</h2>
    <p>Stay updated with the latest news, tutorials, and insights.</p>
  </div>
  <div class="wp-posts-grid">
    {{#each posts}}
    <article class="wp-post-card">
      <div class="wp-post-image">
        {{#if featuredImage}}
        <img src="{{featuredImage}}" alt="{{title}}">
        {{else}}
        <div class="wp-post-placeholder">📝</div>
        {{/if}}
      </div>
      <div class="wp-post-body">
        <div class="wp-post-meta">
          <span>{{formatDate createdAt}}</span>
          {{#if author}}<span>by {{author.name}}</span>{{/if}}
        </div>
        <h3><a href="/post/{{slug}}">{{title}}</a></h3>
        <p>{{excerpt content 120}}</p>
        <a href="/post/{{slug}}" class="wp-read-more">Read More →</a>
      </div>
    </article>
    {{/each}}
  </div>
  <div class="wp-section-footer">
    <a href="/blog" class="wp-btn wp-btn-outline">View All Posts →</a>
  </div>
</section>
{{/if}}

<!-- Quick Navigation Section -->
<section class="wp-navigation">
  <div class="wp-section-header">
    <h2>🧭 Explore</h2>
    <p>Navigate to different areas of the platform.</p>
  </div>
  <div class="wp-nav-grid">
    <a href="/courses" class="wp-nav-card">
      <span class="wp-nav-icon">🎓</span>
      <h3>Courses</h3>
      <p>Browse all available courses</p>
    </a>
    <a href="/shop" class="wp-nav-card">
      <span class="wp-nav-icon">🛍️</span>
      <h3>Shop</h3>
      <p>Browse products and merchandise</p>
    </a>
    <a href="/blog" class="wp-nav-card">
      <span class="wp-nav-icon">📰</span>
      <h3>Blog</h3>
      <p>Read articles and tutorials</p>
    </a>
    {{#unless user}}
    <a href="/register" class="wp-nav-card wp-nav-highlight">
      <span class="wp-nav-icon">🚀</span>
      <h3>Get Started</h3>
      <p>Create your free account</p>
    </a>
    {{/unless}}
    {{#if user}}
    <a href="/admin" class="wp-nav-card wp-nav-highlight">
      <span class="wp-nav-icon">⚙️</span>
      <h3>Admin Panel</h3>
      <p>Manage your content</p>
    </a>
    {{/if}}
  </div>
</section>

<!-- CTA Section -->
<section class="wp-cta">
  <h2>Ready to Build Something Amazing?</h2>
  <p>Get started with WordPress Node in minutes. Clone the repo, run the setup, and start building.</p>
  <a href="https://github.com/syntex82/WordPress-Node" target="_blank" class="wp-btn wp-btn-primary">
    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/></svg>
    Clone Repository
  </a>
</section>

<!-- Feature Modal Overlay -->
<div class="feature-modal-overlay" id="featureModal">
  <div class="feature-modal">
    <button class="btn-back-home" id="closeModalBtn">
      <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
      Back to Home
    </button>
    <div class="feature-modal-header">
      <div class="feature-modal-icon" id="modalIcon"></div>
      <div class="feature-modal-title">
        <h2 id="modalTitle"></h2>
        <p id="modalSubtitle"></p>
      </div>
    </div>
    <div class="feature-modal-content" id="modalContent"></div>
  </div>
</div>

<script>
var featureData = {
  lms: {
    icon: '📚',
    title: 'Learning Management System',
    subtitle: 'Complete course creation and student management platform',
    content: `
      <h3>📖 Overview</h3>
      <p>WordPress Node includes a full-featured Learning Management System that rivals dedicated platforms like Teachable, Thinkific, or LearnDash. Create, sell, and manage online courses with ease.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Course Builder</strong> - Drag-and-drop course creation with modules, lessons, and sections</li>
        <li><strong>Video Hosting</strong> - Support for self-hosted videos, YouTube, Vimeo, and Wistia</li>
        <li><strong>Quizzes & Assessments</strong> - Multiple choice, true/false, essay questions with auto-grading</li>
        <li><strong>Certificates</strong> - Customizable PDF certificates with dynamic fields</li>
        <li><strong>Progress Tracking</strong> - Real-time student progress with completion percentages</li>
        <li><strong>Drip Content</strong> - Schedule lesson releases over time</li>
        <li><strong>Prerequisites</strong> - Require course/lesson completion before advancing</li>
        <li><strong>Discussion Forums</strong> - Per-lesson discussion threads for student engagement</li>
      </ul>

      <h3>🔌 API Endpoints</h3>
      <pre><code>GET  /api/courses              # List all courses
POST /api/courses              # Create a course
GET  /api/courses/:id          # Get course details
POST /api/courses/:id/enroll   # Enroll in a course
GET  /api/learning/my-courses  # Get enrolled courses
POST /api/learning/progress    # Update lesson progress</code></pre>

      <h3>💡 Use Cases</h3>
      <ul>
        <li>Online course platforms and academies</li>
        <li>Corporate training and onboarding</li>
        <li>Membership sites with educational content</li>
        <li>Certification programs</li>
      </ul>
    `
  },
  ecommerce: {
    icon: '🛒',
    title: 'eCommerce Ready',
    subtitle: 'Full-featured online store with payment processing',
    content: `
      <h3>📖 Overview</h3>
      <p>Built-in eCommerce functionality that handles everything from product management to order fulfillment. No need for WooCommerce or external plugins.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Product Management</strong> - Physical, digital, and subscription products</li>
        <li><strong>Inventory Tracking</strong> - Stock levels, low stock alerts, backorders</li>
        <li><strong>Shopping Cart</strong> - Persistent cart with guest checkout support</li>
        <li><strong>Checkout Flow</strong> - Multi-step checkout with address validation</li>
        <li><strong>Payment Gateways</strong> - Stripe, PayPal, and custom gateway support</li>
        <li><strong>Order Management</strong> - Order status, tracking, refunds, and notes</li>
        <li><strong>Coupons & Discounts</strong> - Percentage, fixed, and free shipping coupons</li>
        <li><strong>Tax Calculation</strong> - Automatic tax rates by region</li>
      </ul>

      <h3>🔌 API Endpoints</h3>
      <pre><code>GET  /api/products           # List products
POST /api/cart/add           # Add to cart
GET  /api/cart               # Get cart contents
POST /api/checkout           # Process checkout
GET  /api/orders             # List orders
GET  /api/orders/:id         # Order details</code></pre>

      <h3>💡 Use Cases</h3>
      <ul>
        <li>Online stores and marketplaces</li>
        <li>Digital product sales (ebooks, software)</li>
        <li>Subscription boxes and memberships</li>
        <li>Course + product bundles</li>
      </ul>
    `
  },
  analytics: {
    icon: '📊',
    title: 'Advanced Analytics',
    subtitle: 'GDPR-compliant tracking and insights dashboard',
    content: `
      <h3>📖 Overview</h3>
      <p>Privacy-first analytics that gives you deep insights into your audience without relying on third-party services like Google Analytics. All data stays on your server.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Pageview Tracking</strong> - Real-time pageview and session tracking</li>
        <li><strong>Visitor Analytics</strong> - Unique visitors, returning visitors, bounce rate</li>
        <li><strong>Traffic Sources</strong> - Referrers, UTM parameters, campaign tracking</li>
        <li><strong>Geographic Data</strong> - Country, city, and region breakdown</li>
        <li><strong>Device Analytics</strong> - Browser, OS, and device type stats</li>
        <li><strong>Event Tracking</strong> - Custom events for buttons, forms, downloads</li>
        <li><strong>GDPR Compliance</strong> - IP anonymization, cookie consent, data retention</li>
        <li><strong>Real-time Dashboard</strong> - Live visitor count and activity feed</li>
      </ul>

      <h3>🔌 API Endpoints</h3>
      <pre><code>POST /api/analytics/track     # Track pageview/event
GET  /api/analytics/stats     # Get analytics summary
GET  /api/analytics/realtime  # Real-time visitors
GET  /api/analytics/pages     # Top pages report
GET  /api/analytics/sources   # Traffic sources</code></pre>

      <h3>💡 Privacy Features</h3>
      <ul>
        <li>No cookies required for basic tracking</li>
        <li>IP addresses anonymized by default</li>
        <li>Configurable data retention periods</li>
        <li>GDPR consent banner integration</li>
      </ul>
    `
  },
  themes: {
    icon: '🎨',
    title: 'Theme System',
    subtitle: 'Handlebars-based theming with live customization',
    content: `
      <h3>📖 Overview</h3>
      <p>A powerful theming system that lets you create beautiful, responsive websites without touching the backend. Themes use Handlebars templates with full access to site data.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Handlebars Templates</strong> - Clean, logic-less templates with helpers</li>
        <li><strong>Theme Customizer</strong> - Live preview of colors, fonts, and layouts</li>
        <li><strong>Multiple Layouts</strong> - Different layouts for pages, posts, products</li>
        <li><strong>Partial System</strong> - Reusable header, footer, sidebar components</li>
        <li><strong>Custom CSS</strong> - Add custom styles without editing theme files</li>
        <li><strong>Theme Presets</strong> - One-click theme style presets</li>
        <li><strong>Export/Import</strong> - Share theme customizations</li>
        <li><strong>Child Themes</strong> - Extend themes without modifying originals</li>
      </ul>

      <h3>📁 Theme Structure</h3>
      <pre><code>themes/my-theme/
├── theme.json          # Theme metadata
├── templates/
│   ├── home.hbs        # Homepage template
│   ├── single.hbs      # Single post template
│   ├── page.hbs        # Page template
│   ├── header.hbs      # Header partial
│   └── footer.hbs      # Footer partial
└── assets/
    ├── css/
    └── js/</code></pre>

      <h3>💡 Template Helpers</h3>
      <ul>
        <li><code>&#123;&#123;formatDate date&#125;&#125;</code> - Format dates</li>
        <li><code>&#123;&#123;excerpt content 150&#125;&#125;</code> - Truncate text</li>
        <li><code>&#123;&#123;#if user&#125;&#125;</code> - Conditional rendering</li>
        <li><code>&#123;&#123;#each posts&#125;&#125;</code> - Loop through data</li>
      </ul>
    `
  },
  plugins: {
    icon: '🔌',
    title: 'Plugin Architecture',
    subtitle: 'Extend functionality with modular plugins',
    content: `
      <h3>📖 Overview</h3>
      <p>A robust plugin system that lets you extend WordPress Node without modifying core code. Plugins can add routes, hooks, admin pages, and more.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Lifecycle Hooks</strong> - onInstall, onActivate, onDeactivate, onUninstall</li>
        <li><strong>Custom Routes</strong> - Add API endpoints and public routes</li>
        <li><strong>Admin Pages</strong> - Create custom admin panel sections</li>
        <li><strong>Database Access</strong> - Full Prisma client access</li>
        <li><strong>Event System</strong> - Subscribe to and emit custom events</li>
        <li><strong>Settings API</strong> - Store and retrieve plugin settings</li>
        <li><strong>Asset Loading</strong> - Include CSS/JS in themes</li>
        <li><strong>Marketplace</strong> - Browse and install community plugins</li>
      </ul>

      <h3>📁 Plugin Structure</h3>
      <pre><code>plugins/my-plugin/
├── plugin.json         # Plugin metadata
├── index.ts            # Main entry point
├── routes/             # Custom routes
├── services/           # Business logic
└── assets/             # Static files</code></pre>

      <h3>🔌 Plugin API</h3>
      <pre><code>// plugin.json
{
  "name": "My Plugin",
  "version": "1.0.0",
  "hooks": ["onActivate", "onDeactivate"],
  "routes": ["/api/my-plugin/*"]
}

// index.ts
export function onActivate(context) {
  console.log('Plugin activated!');
}</code></pre>
    `
  },
  recommendations: {
    icon: '🤖',
    title: 'AI Recommendations',
    subtitle: 'Smart content suggestions powered by machine learning',
    content: `
      <h3>📖 Overview</h3>
      <p>Intelligent recommendation engine that suggests relevant content, products, and courses to users based on their behavior and preferences.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Collaborative Filtering</strong> - "Users who liked X also liked Y"</li>
        <li><strong>Content-Based</strong> - Recommendations based on item attributes</li>
        <li><strong>Trending Content</strong> - Popular items based on recent activity</li>
        <li><strong>Personalization</strong> - User-specific recommendations</li>
        <li><strong>Similar Items</strong> - Find related posts, products, courses</li>
        <li><strong>Recently Viewed</strong> - Track and display browsing history</li>
        <li><strong>A/B Testing</strong> - Test different recommendation strategies</li>
        <li><strong>Analytics</strong> - Track recommendation performance</li>
      </ul>

      <h3>🔌 API Endpoints</h3>
      <pre><code>GET /api/recommendations/posts      # Recommended posts
GET /api/recommendations/products   # Recommended products
GET /api/recommendations/courses    # Recommended courses
GET /api/recommendations/similar/:id # Similar items
GET /api/recommendations/trending   # Trending content</code></pre>

      <h3>💡 Configuration</h3>
      <ul>
        <li>Adjustable algorithm weights</li>
        <li>Content type filtering</li>
        <li>Freshness decay settings</li>
        <li>Minimum interaction thresholds</li>
      </ul>
    `
  },
  security: {
    icon: '🔐',
    title: 'Enterprise Security',
    subtitle: 'Bank-grade security features built-in',
    content: `
      <h3>📖 Overview</h3>
      <p>Comprehensive security features that protect your site from common attacks and ensure compliance with security best practices.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>JWT Authentication</strong> - Secure token-based auth with refresh tokens</li>
        <li><strong>Two-Factor Auth</strong> - TOTP-based 2FA with authenticator apps</li>
        <li><strong>Role-Based Access</strong> - Granular permissions (Admin, Editor, Author, User)</li>
        <li><strong>Rate Limiting</strong> - Protect against brute force and DDoS</li>
        <li><strong>IP Blocking</strong> - Block malicious IPs automatically</li>
        <li><strong>CSRF Protection</strong> - Token-based form protection</li>
        <li><strong>Security Headers</strong> - CSP, HSTS, X-Frame-Options, etc.</li>
        <li><strong>Audit Logging</strong> - Track all admin actions</li>
      </ul>

      <h3>🔒 Security Headers</h3>
      <pre><code>Content-Security-Policy: default-src 'self'
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Strict-Transport-Security: max-age=31536000
X-XSS-Protection: 1; mode=block</code></pre>

      <h3>💡 Best Practices</h3>
      <ul>
        <li>Passwords hashed with bcrypt (12 rounds)</li>
        <li>Sensitive data encrypted at rest</li>
        <li>SQL injection prevention via Prisma</li>
        <li>XSS prevention with output encoding</li>
      </ul>
    `
  },
  email: {
    icon: '📧',
    title: 'Email & Notifications',
    subtitle: 'Transactional emails and real-time notifications',
    content: `
      <h3>📖 Overview</h3>
      <p>Built-in email system for transactional emails, newsletters, and real-time notifications. Supports multiple email providers and templates.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Email Templates</strong> - Handlebars-based email templates</li>
        <li><strong>SMTP Support</strong> - Works with any SMTP provider</li>
        <li><strong>Provider Integration</strong> - SendGrid, Mailgun, AWS SES, Postmark</li>
        <li><strong>Queue System</strong> - Background email processing with Bull</li>
        <li><strong>Email Tracking</strong> - Open and click tracking</li>
        <li><strong>Push Notifications</strong> - Web push notification support</li>
        <li><strong>In-App Notifications</strong> - Real-time notification center</li>
        <li><strong>Notification Preferences</strong> - User-configurable settings</li>
      </ul>

      <h3>📧 Email Types</h3>
      <pre><code>- Welcome email (on registration)
- Password reset
- Order confirmation
- Shipping notification
- Course enrollment
- Certificate issued
- Comment notifications
- Newsletter campaigns</code></pre>

      <h3>💡 Configuration</h3>
      <ul>
        <li>SMTP or API-based sending</li>
        <li>HTML and plain text versions</li>
        <li>Attachment support</li>
        <li>Retry logic for failed sends</li>
      </ul>
    `
  },
  seo: {
    icon: '🔍',
    title: 'SEO Optimized',
    subtitle: 'Search engine optimization tools built-in',
    content: `
      <h3>📖 Overview</h3>
      <p>Comprehensive SEO tools that help your content rank higher in search engines. No need for Yoast or other SEO plugins.</p>

      <h3>✨ Key Features</h3>
      <ul>
        <li><strong>Meta Tags</strong> - Custom title, description, keywords per page</li>
        <li><strong>Open Graph</strong> - Facebook and social media meta tags</li>
        <li><strong>Twitter Cards</strong> - Rich Twitter preview cards</li>
        <li><strong>XML Sitemap</strong> - Auto-generated sitemap.xml</li>
        <li><strong>Robots.txt</strong> - Configurable robots.txt</li>
        <li><strong>Schema Markup</strong> - JSON-LD structured data</li>
        <li><strong>Canonical URLs</strong> - Prevent duplicate content issues</li>
        <li><strong>Breadcrumbs</strong> - SEO-friendly navigation</li>
      </ul>

      <h3>📊 Schema Types</h3>
      <pre><code>- Article (blog posts)
- Product (ecommerce)
- Course (LMS)
- Organization
- BreadcrumbList
- FAQPage
- HowTo</code></pre>

      <h3>💡 Best Practices</h3>
      <ul>
        <li>Clean, semantic URLs</li>
        <li>Automatic image alt text</li>
        <li>Mobile-first responsive design</li>
        <li>Fast page load times</li>
        <li>Core Web Vitals optimized</li>
      </ul>
    `
  }
};

function openFeatureModal(featureId) {
  var feature = featureData[featureId];
  if (!feature) return;

  document.getElementById('modalIcon').textContent = feature.icon;
  document.getElementById('modalTitle').textContent = feature.title;
  document.getElementById('modalSubtitle').textContent = feature.subtitle;
  document.getElementById('modalContent').innerHTML = feature.content;
  document.getElementById('featureModal').classList.add('active');
  document.body.style.overflow = 'hidden';
}

function closeFeatureModal() {
  document.getElementById('featureModal').classList.remove('active');
  document.body.style.overflow = '';
}

// Event delegation for feature cards (CSP-compliant)
var featuresGrid = document.getElementById('featuresGrid');
if (featuresGrid) {
  featuresGrid.addEventListener('click', function(e) {
    var card = e.target.closest('.wp-feature-card');
    if (card && card.dataset.feature) {
      openFeatureModal(card.dataset.feature);
    }
  });
}

// Close modal button
var closeModalBtn = document.getElementById('closeModalBtn');
if (closeModalBtn) {
  closeModalBtn.addEventListener('click', closeFeatureModal);
}

// Close modal on overlay click
document.getElementById('featureModal').addEventListener('click', function(e) {
  if (e.target === this) closeFeatureModal();
});

// Close modal on Escape key
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeFeatureModal();
});
</script>

{{!-- Pricing Section - Show available plans --}}
{{#if plans.length}}
{{> pricing-table}}
{{/if}}

{{!-- Floating upgrade CTA for free users --}}
{{> subscription-cta style="floating"}}

{{> footer}}

