@shashwatgtmalpha/gtm-alpha-mcp-server
Version:
Professional GTM consultation MCP server with EPIC framework
1,217 lines (1,067 loc) โข 60.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GTM Alpha Professional Consultation | Shashwat Ghosh - FIXED VERSION</title>
<meta name="description" content="Get professional GTM strategy consultation using EPIC framework. Free until September 1st, 2025. Expert analysis by Shashwat Ghosh, ranked #10 Product Marketing Creator in India.">
<meta name="keywords" content="GTM consulting, go-to-market strategy, EPIC framework, fractional CMO, B2B marketing, SaaS marketing, fintech marketing, Shashwat Ghosh">
<meta name="author" content="Shashwat Ghosh - GTM Alpha Consulting">
<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@300;400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--primary-navy: #0B1426;
--primary-blue: #1B365D;
--accent-coral: #FF6B5A;
--accent-gold: #F4B942;
--text-primary: #0B1426;
--text-secondary: #64748B;
--text-light: #94A3B8;
--bg-primary: #FFFFFF;
--bg-secondary: #F8FAFC;
--bg-accent: #F1F5F9;
--border-light: #E2E8F0;
--gradient-primary: linear-gradient(135deg, #1B365D 0%, #0B1426 100%);
--gradient-accent: linear-gradient(135deg, #FF6B5A 0%, #F4B942 100%);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-primary);
font-feature-settings: 'kern' 1;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Header - Same as homepage */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--border-light);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
}
.logo-container {
display: flex;
align-items: center;
gap: 12px;
}
.logo {
width: 52px;
height: 52px;
background: var(--gradient-accent);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 18px;
color: white;
letter-spacing: 1px;
font-family: 'Inter', sans-serif;
line-height: 1;
text-align: center;
}
.brand-text {
display: flex;
flex-direction: column;
}
.brand-name {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.5px;
line-height: 1.2;
}
.brand-tagline {
font-size: 12px;
color: var(--text-secondary);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-links {
display: flex;
list-style: none;
gap: 32px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text-secondary);
font-weight: 500;
font-size: 14px;
transition: all 0.2s ease;
position: relative;
}
.nav-links a:hover, .nav-links a.active {
color: var(--text-primary);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0;
height: 2px;
background: var(--accent-coral);
transition: width 0.2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after {
width: 100%;
}
.cta-nav {
background: var(--accent-coral);
color: white !important;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
transition: all 0.2s ease;
}
.cta-nav:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: white !important;
}
.cta-nav::after {
display: none;
}
/* Status Banner */
.status-banner {
background: linear-gradient(135deg, #10B981 0%, #059669 100%);
color: white;
padding: 12px 0;
text-align: center;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 80px;
}
.status-icon {
width: 8px;
height: 8px;
background: #34D399;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Hero Section */
.hero {
background: var(--gradient-primary);
color: white;
padding: 40px 0 30px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.5;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 8px 16px;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
margin-bottom: 20px;
backdrop-filter: blur(10px);
}
.hero-badge .badge-icon {
width: 16px;
height: 16px;
background: var(--accent-coral);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.hero h1 {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 20px;
letter-spacing: -1px;
}
.hero-subtitle {
font-size: 18px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
font-weight: 400;
line-height: 1.5;
}
/* Main Content */
.main-content {
background: white;
margin: 40px 0;
}
/* Form styling */
.form-section {
background: var(--bg-secondary);
padding: 60px 0;
}
.form-container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: var(--shadow-lg);
}
.form-header {
text-align: center;
margin-bottom: 30px;
}
.form-header h2 {
font-size: 32px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
}
.form-header p {
color: var(--text-secondary);
font-size: 16px;
line-height: 1.6;
}
.security-note {
background: #e8f5e8;
border: 1px solid #4caf50;
border-radius: 8px;
padding: 16px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #155724;
}
.security-note::before {
content: "๐";
font-size: 18px;
}
.debug-note {
background: #fff3cd;
border: 1px solid #ffc107;
border-radius: 8px;
padding: 16px;
margin: 20px 0;
display: flex;
align-items: center;
gap: 12px;
font-size: 14px;
color: #856404;
}
.debug-note::before {
content: "๐ง";
font-size: 18px;
}
.form-grid {
display: grid;
gap: 20px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group label {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
font-size: 14px;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 12px 16px;
border: 2px solid var(--border-light);
border-radius: 8px;
font-size: 15px;
transition: all 0.3s ease;
background: white;
font-family: 'Inter', sans-serif;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--accent-coral);
box-shadow: 0 0 0 3px rgba(255, 107, 90, 0.1);
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.required {
color: var(--accent-coral);
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 24px 0;
}
.checkbox-group input[type="checkbox"] {
margin-top: 4px;
width: 18px;
height: 18px;
accent-color: var(--accent-coral);
}
.checkbox-group label {
font-size: 14px;
line-height: 1.6;
color: var(--text-secondary);
}
.submit-btn {
width: 100%;
background: var(--gradient-accent);
color: white;
border: none;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
font-family: 'Inter', sans-serif;
}
.submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 107, 90, 0.3);
}
.submit-btn:disabled {
background: var(--text-light);
cursor: not-allowed;
transform: none;
}
/* Results section */
#result {
margin-top: 30px;
padding: 24px;
background: var(--bg-secondary);
border-radius: 8px;
display: none;
border: 1px solid var(--border-light);
}
.consultation-success {
color: #155724;
}
.consultation-success h2 {
color: #155724;
margin-bottom: 16px;
font-size: 24px;
}
.download-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
margin: 16px 0;
}
.download-btn {
background: var(--gradient-accent);
color: white;
text-decoration: none;
padding: 12px 20px;
border-radius: 6px;
text-align: center;
font-weight: 600;
transition: all 0.2s ease;
font-size: 14px;
}
.download-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 107, 90, 0.3);
}
/* Debug panel */
.debug-panel {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 20px;
margin: 20px 0;
font-family: monospace;
font-size: 12px;
max-height: 400px;
overflow-y: auto;
display: none;
}
.debug-panel.show {
display: block;
}
.debug-toggle {
background: #6c757d;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
margin: 10px 0;
}
.epic-scores-display {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin: 20px 0;
}
.epic-score-card {
background: white;
border: 2px solid var(--border-light);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
}
.epic-score-card.primary {
border-color: var(--accent-coral);
background: linear-gradient(135deg, #FFF5F5 0%, #FEF2F2 100%);
}
.epic-letter-display {
font-size: 36px;
font-weight: 800;
color: var(--primary-blue);
margin-bottom: 8px;
}
.epic-score-display {
font-size: 28px;
font-weight: 700;
color: var(--accent-coral);
margin-bottom: 8px;
}
.epic-name-display {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Footer - Same as homepage */
footer {
background: var(--primary-navy);
color: white;
padding: 40px 0 24px;
}
.footer-content {
text-align: center;
margin-bottom: 24px;
}
.footer-brand h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 12px;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin-bottom: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 24px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: var(--accent-coral);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 20px;
text-align: center;
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
}
.social-links {
display: flex;
gap: 12px;
justify-content: center;
margin-top: 16px;
}
.social-links a {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: all 0.2s ease;
font-size: 14px;
}
.social-links a:hover {
background: var(--accent-coral);
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 0 16px;
}
.nav-links {
display: none;
}
.hero h1 {
font-size: 36px;
}
.hero-subtitle {
font-size: 16px;
}
.form-row {
grid-template-columns: 1fr;
}
.epic-scores-display {
grid-template-columns: 1fr 1fr;
}
.footer-links {
flex-direction: column;
gap: 12px;
}
}
</style>
</head>
<body>
<header>
<nav class="container">
<div class="logo-container">
<div class="logo">
<span style="line-height: 1; display: block;">GTM<br><span style="font-size: 18px;">ฮฑ</span></span>
</div>
<div class="brand-text">
<div class="brand-name">GTM Alpha</div>
<div class="brand-tagline">MCP Server</div>
</div>
</div>
<!-- Desktop Navigation -->
<ul class="nav-links">
<li><a href="/#features">Features</a></li>
<li><a href="/#epic">EPIC Framework</a></li>
<li><a href="/#integration">Integration</a></li>
<li><a href="/pricing">Pricing</a></li>
<li><a href="/consultation" class="active">Consultation</a></li>
<li><a href="/#about">About</a></li>
<li><a href="https://gtmexpert.com/" class="cta-nav">GTMExpert.com</a></li>
</ul>
</nav>
</header>
<div class="status-banner">
<div class="status-icon"></div>
<span>๐ง FIXED VERSION: Professional GTM Consulting Active โข Debugging Enabled โข Integration Issues Resolved</span>
</div>
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<div class="badge-icon">โก</div>
<span>FIXED VERSION: Backend Integration Testing & Debugging</span>
</div>
<h1>Professional GTM Alpha Consultation</h1>
<p class="hero-subtitle">
Get comprehensive go-to-market strategy analysis with actionable recommendations using Shashwat Ghosh's proven EPIC framework.
<strong>Free until September 1st, 2025!</strong><br>
<em>This is the FIXED version with enhanced debugging and proper backend integration.</em>
</p>
</div>
</div>
</section>
<div class="container">
<div class="main-content">
<section class="form-section">
<div class="form-container">
<div class="form-header">
<h2>GTM Alpha Professional Consultation - FIXED</h2>
<p>This is the debugged and fixed version of the consultation form. All integration issues have been resolved and proper error handling has been implemented.</p>
</div>
<div class="security-note">
<span>Your data is processed securely and never stored permanently. Professional-grade analysis with enterprise-level insights.</span>
</div>
<div class="debug-note">
<span>DEBUGGING ENABLED: This version includes comprehensive error logging and backend integration testing. Check console for detailed information.</span>
</div>
<!-- Backend Test Button -->
<button id="testBackend" class="debug-toggle">๐งช Test Backend Connection</button>
<div id="backendTestResult" class="debug-panel"></div>
<form id="gtmForm">
<div class="form-grid">
<div class="form-row">
<div class="form-group">
<label for="client_name">Your Name <span class="required">*</span></label>
<input type="text" id="client_name" name="client_name" required
placeholder="e.g., Ali Ghodsi" value="Ali Ghodsi">
</div>
<div class="form-group">
<label for="client_designation">Your Role/Title <span class="required">*</span></label>
<input type="text" id="client_designation" name="client_designation" required
placeholder="e.g., CEO, CMO, Founder" value="Co-Founder & CEO">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="company_name">Company Name <span class="required">*</span></label>
<input type="text" id="company_name" name="company_name" required
placeholder="e.g., TechStart Solutions" value="Databricks">
</div>
<div class="form-group">
<label for="industry">Industry <span class="required">*</span></label>
<select id="industry" name="industry" required>
<option value="">Select Industry</option>
<option value="Technology" selected>Technology</option>
<option value="SaaS">SaaS</option>
<option value="E-commerce">E-commerce</option>
<option value="Healthcare">Healthcare</option>
<option value="Finance">Finance</option>
<option value="Education">Education</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Consulting">Consulting</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label for="company_description">Company Description <span class="required">*</span></label>
<textarea id="company_description" name="company_description" required
placeholder="Brief description of your company, products, and target market...">Databricks is a data and AI company with $62B valuation serving 10,000+ organizations. Pioneer of data lakehouse category with $3B+ revenue run rate.</textarea>
</div>
<div class="form-group">
<label for="gtm_challenge">Primary GTM Challenge <span class="required">*</span></label>
<textarea id="gtm_challenge" name="gtm_challenge" required
placeholder="Describe your main go-to-market challenges, pain points, or goals...">Preparing for IPO while maintaining 60%+ growth and competing with Snowflake and cloud giants in the data analytics market.</textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="business_stage">Business Stage <span class="required">*</span></label>
<select id="business_stage" name="business_stage" required>
<option value="">Select Business Stage</option>
<option value="bootstrapped-idea">Bootstrapped - Idea</option>
<option value="bootstrapped-pmf">Bootstrapped - PMF</option>
<option value="bootstrapped-seed-equivalent">Bootstrapped - Seed Equivalent</option>
<option value="bootstrapped-series-equivalent">Bootstrapped - Series Equivalent</option>
<option value="bootstrapped-ipo-equivalent">Bootstrapped - IPO Equivalent</option>
<option value="venture-pre-seed">Venture - Pre-seed</option>
<option value="venture-seed">Venture - Seed</option>
<option value="venture-series-a">Venture - Series A</option>
<option value="venture-series-b">Venture - Series B</option>
<option value="venture-series-c">Venture - Series C</option>
<option value="venture-series-d-plus">Venture - Series D+</option>
<option value="ipo-stage" selected>IPO Stage</option>
<option value="mid-sized-company">Mid-sized Company</option>
<option value="large-company">Large Company</option>
</select>
</div>
<div class="form-group">
<label for="current_team_size">Current Team Size <span class="required">*</span></label>
<select id="current_team_size" name="current_team_size" required>
<option value="">Select Team Size</option>
<option value="1-5">1-5</option>
<option value="6-15">6-15</option>
<option value="16-50">16-50</option>
<option value="51-200">51-200</option>
<option value="200+" selected>200+</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="budget_range">Budget Range for GTM <span class="required">*</span></label>
<select id="budget_range" name="budget_range" required>
<option value="">Select Budget Range</option>
<option value="<$10K"><$10K</option>
<option value="$10K-$50K">$10K-$50K</option>
<option value="$50K-$200K">$50K-$200K</option>
<option value="$200K-$500K">$200K-$500K</option>
<option value="$500K+" selected>$500K+</option>
</select>
</div>
<div class="form-group">
<label for="specific_focus">Specific Focus Area</label>
<input type="text" id="specific_focus" name="specific_focus"
placeholder="e.g., Lead generation, Enterprise sales, Market expansion" value="IPO readiness, international expansion">
</div>
</div>
<!-- Mandatory Digital URLs -->
<div class="form-row">
<div class="form-group">
<label for="website_url">Company Website <span class="required">*</span></label>
<input type="url" id="website_url" name="website_url" required
placeholder="https://yourcompany.com" value="https://www.databricks.com">
</div>
<div class="form-group">
<label for="linkedin_url">LinkedIn URL <span class="required">*</span></label>
<input type="url" id="linkedin_url" name="linkedin_url" required
placeholder="https://linkedin.com/company/yourcompany" value="https://linkedin.com/company/databricks">
</div>
</div>
<div class="form-group">
<label for="twitter_url">Twitter/X URL (Optional)</label>
<input type="url" id="twitter_url" name="twitter_url"
placeholder="https://twitter.com/yourcompany" value="https://twitter.com/databricks">
</div>
<div class="checkbox-group">
<input type="checkbox" id="confirm_consultation" name="confirm_consultation" required checked>
<label for="confirm_consultation">
I confirm I want a comprehensive GTM Alpha consultation analysis using the EPIC framework.
</label>
</div>
<button type="submit" class="submit-btn">๐ Generate Professional GTM Analysis (FIXED VERSION)</button>
</div>
</form>
<!-- Debug Panel -->
<button id="toggleDebug" class="debug-toggle">๐ Toggle Debug Console</button>
<div id="debugPanel" class="debug-panel">
<h4>Debug Console:</h4>
<div id="debugLog"></div>
</div>
<div id="result"></div>
</div>
</section>
</div>
</div>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h3>GTM Alpha MCP Server - FIXED VERSION</h3>
<p>
This is the debugged and corrected version of the GTM Alpha consultation system.
All backend integration issues have been resolved with comprehensive error handling and logging.
</p>
</div>
<div class="footer-links">
<a href="/#features">Features</a>
<a href="/#epic">EPIC Framework</a>
<a href="/#integration">Integration</a>
<a href="/pricing">Pricing</a>
<a href="/consultation">Consultation</a>
<a href="/#about">About Shashwat</a>
<a href="https://gtmexpert.com/">GTMExpert.com</a>
<a href="https://calendly.com/shashwat-gtmhelix/45min">Book Call</a>
<a href="mailto:shashwat@hyperplays.in">Contact</a>
</div>
<div class="social-links">
<a href="https://www.linkedin.com/in/shashwatghosh/" aria-label="LinkedIn">in</a>
<a href="https://x.com/Shashwat_Ghosh" aria-label="Twitter">tw</a>
<a href="https://gtmexpert.com/" aria-label="Website">๐</a>
<a href="https://gtmexpert.substack.com/" aria-label="Substack">S</a>
</div>
</div>
<div class="footer-bottom">
<div>© 2025 GTM Alpha MCP Server by Shashwat Ghosh - FIXED VERSION | Best AI GTM & Fractional CMO | #10 India | #52 Worldwide</div>
</div>
</div>
</footer>
<script>
// Enhanced GTM Alpha Consultation Form - FIXED VERSION with comprehensive debugging
document.addEventListener('DOMContentLoaded', function() {
console.log('๐ GTM Alpha FIXED consultation form loaded');
const form = document.getElementById('gtmForm');
const resultDiv = document.getElementById('result');
const debugPanel = document.getElementById('debugPanel');
const debugLogElement = document.getElementById('debugLog');
const backendTestResult = document.getElementById('backendTestResult');
// Determine the correct Netlify function URL
const baseUrl = window.location.origin;
const netlifyUrl = `${baseUrl}/.netlify/functions/analyze`;
console.log('๐ Base URL:', baseUrl);
console.log('๐ก Netlify function URL:', netlifyUrl);
// Debug logging function
function debugLog(message, data = null) {
const timestamp = new Date().toLocaleTimeString();
const logEntry = `[${timestamp}] ${message}`;
console.log(logEntry, data || '');
if (debugLogElement) {
const logElement = document.createElement('div');
logElement.style.marginBottom = '8px';
logElement.style.padding = '4px 8px';
logElement.style.backgroundColor = '#f8f9fa';
logElement.style.border = '1px solid #dee2e6';
logElement.style.borderRadius = '4px';
logElement.style.fontSize = '11px';
logElement.innerHTML = `<strong>${logEntry}</strong>`;
if (data) {
const dataElement = document.createElement('pre');
dataElement.style.margin = '4px 0 0 0';
dataElement.style.fontSize = '10px';
dataElement.style.color = '#6c757d';
dataElement.textContent = JSON.stringify(data, null, 2);
logElement.appendChild(dataElement);
}
debugLogElement.insertBefore(logElement, debugLogElement.firstChild);
}
}
// Debug panel toggle
document.getElementById('toggleDebug').addEventListener('click', function() {
debugPanel.classList.toggle('show');
});
// Backend test function
document.getElementById('testBackend').addEventListener('click', async function() {
debugLog('๐งช Testing backend connection...');
backendTestResult.classList.add('show');
backendTestResult.innerHTML = '<h4>Backend Connection Test:</h4><div>Testing...</div>';
try {
const testData = {
client_name: "Test User",
company_name: "Test Company",
industry: "Technology",
business_stage: "venture-series-a",
gtm_challenge: "Test challenge for backend connectivity",
website_url: "https://example.com",
linkedin_url: "https://linkedin.com/company/example"
};
debugLog('๐ค Sending test request to backend', testData);
const response = await fetch(netlifyUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(testData)
});
debugLog('๐ฅ Backend response received', {
status: response.status,
statusText: response.statusText,
headers: Object.fromEntries(response.headers.entries())
});
const responseText = await response.text();
debugLog('๐ Backend response text', responseText.substring(0, 500) + '...');
let result;
try {
result = JSON.parse(responseText);
debugLog('โ
Backend JSON parsed successfully', result);
if (result.success && result.analysis && result.analysis.market_insights) {
const epicScores = result.analysis.market_insights.epic_scores;
debugLog('๐ฏ EPIC Scores extracted', epicScores);
backendTestResult.innerHTML = `
<h4>โ
Backend Connection Test: SUCCESS</h4>
<div style="background: #d4edda; padding: 12px; border-radius: 6px; margin: 10px 0;">
<strong>Backend is working correctly!</strong><br>
EPIC Scores: E:${epicScores.E}, P:${epicScores.P}, I:${epicScores.I}, C:${epicScores.C}<br>
Primary Focus: ${result.analysis.market_insights.primary_focus}<br>
Response Status: ${response.status} ${response.statusText}
</div>
<details style="margin-top: 12px;">
<summary>View Full Response</summary>
<pre style="font-size: 10px; max-height: 300px; overflow-y: auto; background: #f8f9fa; padding: 12px; border-radius: 4px; margin-top: 8px;">${JSON.stringify(result, null, 2)}</pre>
</details>
`;
} else {
throw new Error('Backend response structure is incorrect');
}
} catch (parseError) {
debugLog('โ Backend JSON parse error', parseError);
throw new Error(`JSON Parse Error: ${parseError.message}`);
}
} catch (error) {
debugLog('๐ฅ Backend test failed', error);
backendTestResult.innerHTML = `
<h4>โ Backend Connection Test: FAILED</h4>
<div style="background: #f8d7da; padding: 12px; border-radius: 6px; margin: 10px 0;">
<strong>Error:</strong> ${error.message}<br>
<strong>URL:</strong> ${netlifyUrl}
</div>
<div style="margin-top: 12px; font-size: 12px; color: #6c757d;">
Check the browser console for detailed error information.
</div>
`;
}
});
if (form) {
form.addEventListener('submit', async function(e) {
e.preventDefault();
debugLog('๐ GTM Alpha FIXED consultation form submitted');
const submitBtn = document.querySelector('button[type="submit"]');
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = 'Generating Professional GTM Report...';
}
try {
const formData = new FormData(form);
// Build the consultation data object
const consultationData = {
client_name: formData.get('client_name'),
client_designation: formData.get('client_designation'),
company_name: formData.get('company_name'),
company_description: formData.get('company_description'),
gtm_challenge: formData.get('gtm_challenge'),
business_stage: formData.get('business_stage'),
industry: formData.get('industry'),
current_team_size: formData.get('current_team_size'),
budget_range: formData.get('budget_range'),
specific_focus: formData.get('specific_focus'),
website_url: formData.get('website_url'),
linkedin_url: formData.get('linkedin_url'),
twitter_url: formData.get('twitter_url'),
confirm_new_consultation: true
};
debugLog('๐ Sending consultation data to GTM Alpha backend', consultationData);
const response = await fetch(netlifyUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(consultationData)
});
debugLog('๐ก GTM Alpha response received', {
status: response.status,
statusText: response.statusText,
headers: Object.fromEntries(response.headers.entries())
});
const responseText = await response.text();
debugLog('๐ Raw response text (first 500 chars)', responseText.substring(0, 500) + '...');
let result;
try {
result = JSON.parse(responseText);
debugLog('๐ GTM Alpha response parsed', result);
} catch (parseError) {
debugLog('โ JSON Parse Error', parseError);
throw new Error(`Invalid JSON response: ${parseError.message}. Response: ${responseText.substring(0, 200)}...`);
}
if (response.ok && result.success !== false) {
debugLog('โ
Response successful, displaying results');
displaySuccessResult(result);
} else {
debugLog('โ Response indicated failure', result);
displayErrorResult({
success: false,
message: result.message || `HTTP ${response.status}: ${response.statusText}`,
error: result.error || responseText.substring(0, 500)
});
}
} catch (error) {
debugLog('๐ฅ GTM Alpha network/processing error', error);
displayErrorResult({
success: false,
message: 'Network or processing error',
error: error.message,
details: error.stack
});
} finally {
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = '๐ Generate Professional GTM Analysis (FIXED VERSION)';
}
}
});
}
function displaySuccessResult(result) {
debugLog('โ
GTM Alpha Success! Processing result for display', result);
// Enhanced data extraction with multiple fallback paths
const analysis = result.analysis || result.data || result;
let epicScores = {};
let htmlReport = '';
let primaryFocus = '';
// Try multiple paths to find EPIC scores
if (analysis.market_insights && analysis.market_insights.epic_scores) {
epicScores = analysis.market_insights.epic_scores;
debugLog('๐ EPIC scores found in market_insights', epicScores);
} else if (analysis.epic_scores) {
epicScores = analysis.epic_scores;
debugLog('๐ EPIC scores found in analysis.epic_scores', epicScores);
} else if (result.data && result.data.epic_scores) {
epicScores = result.data.epic_scores;
debugLog('๐ EPIC scores found in result.data', epicScores);
} else {
debugLog('โ ๏ธ EPIC scores not found, using fallback');
epicScores = { E: 'N/A', P: 'N/A', I: 'N/A', C: 'N/A' };
}
// Try multiple paths to find HTML report
htmlReport = analysis.html_report || result.data?.html_report || result.html_report || '';
// Try multiple paths to find primary focus
primaryFocus = analysis.market_insights?.primary_focus ||
analysis.primary_focus ||
result.data?.primary_focus ||
'Strategic optimization';
debugLog('๐ Final extracted data', {
epicScores,
primaryFocus,
hasHtmlReport: !!htmlReport
});
const resultDiv = document.getElementById('result');
if (resultDiv) {
resultDiv.innerHTML = `
<div class="consultation-success">
<h2>โ
Professional GTM Alpha Consultation Generated Successfully!</h2>
<div style="background: white; padding: 24px; border-radius: 12px; margin: 20px 0; border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);">
<h3>๐ Consultation Summary</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 16px 0;">
<div><strong>Report ID:</strong> ${result.runId || analysis.consultation_id || 'GTM-' + Date.now()}</div>
<div><strong>Primary Focus:</strong> ${primaryFocus}</div>
<div><strong>Generated:</strong> ${new Date().toLocaleDateString()} ${new Date().toLocaleTimeString()}</div>
<div><strong>Type:</strong> Professional GTM Analysis</div>
</div>
</div>
<div style="background: white; padding: 24px;