<!-- 
  MODULE 4: COMPARISON TABLE
  
  INSTRUCTIONS FOR HUBSPOT:
  1. Go to Design Manager > Create > Module
  2. Name it "Package Comparison Table"
  3. Paste this code in the HTML + HubL section
  4. Save and use in your page
-->

<style>
.gfd-comparison-section {
    background: var(--gfd-gray-light);
    padding: 80px 0;
}

.gfd-comparison-section h2 {
    text-align: center;
    color: var(--gfd-purple);
    font-size: 2.5rem;
    margin-bottom: 50px;
}

.gfd-comparison-table-wrapper {
    background: var(--gfd-white);
    border-radius: 15px;
    overflow-x: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.gfd-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.gfd-comparison-table thead {
    background: linear-gradient(135deg, var(--gfd-purple) 0%, var(--gfd-purple-dark) 100%);
    color: var(--gfd-white);
}

.gfd-comparison-table th {
    padding: 20px 15px;
    text-align: left;
    font-weight: 600;
    border-right: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 1rem;
}

.gfd-comparison-table th:last-child {
    border-right: none;
}

.gfd-comparison-table th:first-child {
    border-radius: 15px 0 0 0;
    width: 25%;
}

.gfd-comparison-table th:last-child {
    border-radius: 0 15px 0 0;
}

.gfd-comparison-table tbody tr {
    border-bottom: 1px solid var(--gfd-gray-medium);
}

.gfd-comparison-table tbody tr:nth-child(even) {
    background: rgba(139, 58, 139, 0.03);
}

.gfd-comparison-table tbody tr:hover {
    background: rgba(139, 58, 139, 0.08);
}

.gfd-comparison-table td {
    padding: 18px 15px;
    border-right: 1px solid var(--gfd-gray-medium);
    vertical-align: top;
    line-height: 1.6;
}

.gfd-comparison-table td:last-child {
    border-right: none;
}

.gfd-comparison-table td:first-child {
    font-weight: 500;
    background: rgba(139, 58, 139, 0.02);
}

.gfd-check-icon {
    color: var(--gfd-orange);
    font-weight: 700;
    font-size: 1.2rem;
}

.gfd-cross-icon {
    color: #ccc;
}

@media (max-width: 768px) {
    .gfd-comparison-table {
        font-size: 0.85rem;
    }

    .gfd-comparison-table th,
    .gfd-comparison-table td {
        padding: 10px;
    }
}
</style>

<section class="gfd-comparison-section">
    <div class="gfd-container">
        <h2>Detailed Package Comparison</h2>
        
        <div class="gfd-comparison-table-wrapper">
            <table class="gfd-comparison-table">
                <thead>
                    <tr>
                        <th>Feature</th>
                        <th>Foundation</th>
                        <th>Momentum</th>
                        <th>Acceleration</th>
                        <th>Breakthrough</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><strong>Social Posts/Month</strong></td>
                        <td>8-12</td>
                        <td>12-16</td>
                        <td>12-16</td>
                        <td>12-16</td>
                    </tr>
                    <tr>
                        <td><strong>Platforms</strong></td>
                        <td>2</td>
                        <td>2-3</td>
                        <td>3-4</td>
                        <td>3-4</td>
                    </tr>
                    <tr>
                        <td><strong>Blog Posts/Month</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td>1</td>
                        <td>2</td>
                        <td>2+</td>
                    </tr>
                    <tr>
                        <td><strong>Email Marketing</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td>1/month</td>
                        <td>2-3/month</td>
                        <td>2-3+/month</td>
                    </tr>
                    <tr>
                        <td><strong>Community Management</strong></td>
                        <td>Basic (2x/week)</td>
                        <td>Active (daily)</td>
                        <td>Proactive (daily)</td>
                        <td>White-glove (daily+)</td>
                    </tr>
                    <tr>
                        <td><strong>Meta Ads</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td><span class="gfd-check-icon">✓</span> Included</td>
                        <td><span class="gfd-check-icon">✓</span> Included</td>
                    </tr>
                    <tr>
                        <td><strong>Google Ads</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td>Add-on</td>
                        <td>Add-on</td>
                        <td><span class="gfd-check-icon">✓</span> Included</td>
                    </tr>
                    <tr>
                        <td><strong>Strategy Calls</strong></td>
                        <td>Quarterly (30 min)</td>
                        <td>Monthly (45 min)</td>
                        <td>Bi-weekly (30 min)</td>
                        <td>Weekly (15-30 min)</td>
                    </tr>
                    <tr>
                        <td><strong>Competitor Analysis</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td>Quarterly</td>
                        <td>Ongoing</td>
                    </tr>
                    <tr>
                        <td><strong>Custom Projects</strong></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td><span class="gfd-cross-icon">—</span></td>
                        <td>5 hrs/month</td>
                    </tr>
                    <tr>
                        <td><strong>Support Response Time</strong></td>
                        <td>24-48 hours</td>
                        <td>24 hours</td>
                        <td>4-8 hours</td>
                        <td>2-4 hours</td>
                    </tr>
                    <tr>
                        <td><strong>Best For</strong></td>
                        <td>Establishing presence</td>
                        <td>Growing audience</td>
                        <td>Driving growth</td>
                        <td>Strategic partnership</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</section>