<div class="mb-6"><h1 class="text-2xl font-bold text-gray-900">Integrations</h1><p class="text-sm text-gray-500 mt-1">Connect your favorite tools and services</p></div>

<?php
$categories = [
    'Payments' => [
        ['csg_forte','CSG Forte','Payment processing for rent collection','💳'],
        ['stripe','Stripe','Credit card and ACH payments','💳'],
        ['plaid','Plaid','Bank account verification and payments','🏦'],
        ['authorize_net','Authorize.net','Payment gateway','💳'],
        ['dwolla','Dwolla','ACH bank transfers','🏦'],
    ],
    'Accounting' => [
        ['quickbooks','QuickBooks','Sync transactions and chart of accounts','📊'],
    ],
    'Communication' => [
        ['twilio','Twilio','SMS and voice messaging','📱'],
        ['ringcentral','RingCentral','Business phone and SMS','📞'],
        ['sendgrid','SendGrid','Transactional email delivery','✉️'],
        ['mailgun','Mailgun','Email delivery service','✉️'],
        ['gmail','Gmail','Email integration','✉️'],
        ['outlook','Outlook','Email and calendar','📧'],
        ['slack','Slack','Team notifications','💬'],
        ['microsoft_teams','Microsoft Teams','Team collaboration','💬'],
    ],
    'Listings' => [
        ['zillow','Zillow','Rental listing syndication','🏠'],
        ['apartments_com','Apartments.com','Rental listing syndication','🏠'],
    ],
    'AI & Analytics' => [
        ['openai','OpenAI','GPT-powered AI features','🤖'],
        ['claude','Claude','Anthropic AI assistant','🤖'],
        ['databox','Databox','Business analytics dashboard','📈'],
        ['power_bi','Power BI','Business intelligence reporting','📊'],
        ['tableau','Tableau','Data visualization','📊'],
    ],
    'Productivity' => [
        ['google_calendar','Google Calendar','Calendar sync','📅'],
        ['google_maps','Google Maps','Property mapping','🗺️'],
        ['google_drive','Google Drive','Cloud file storage','📁'],
        ['dropbox','Dropbox','File storage and sharing','📁'],
        ['aws_s3','AWS S3','Cloud file storage','☁️'],
        ['docusign','DocuSign','Electronic signatures','✍️'],
        ['zapier','Zapier','Workflow automation','⚡'],
        ['make','Make','Advanced automation','⚡'],
    ],
    'CRM' => [
        ['salesforce','Salesforce','CRM integration','🔗'],
        ['hubspot','HubSpot','Marketing and CRM','🔗'],
    ],
];
foreach ($categories as $catName => $integrations):
?>
<div class="mb-8">
    <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3"><?= $catName ?></h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
        <?php foreach ($integrations as [$provider, $name, $desc, $icon]):
            $conn = $connectedMap[$provider] ?? null; $isActive = $conn && ($conn['status'] ?? '') === 'active';
        ?>
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 flex items-start gap-3 hover:shadow-md transition">
            <div class="text-2xl"><?= $icon ?></div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2"><h3 class="font-semibold text-gray-900 text-sm"><?= $name ?></h3>
                    <?php if ($isActive): ?><span class="inline-flex w-2 h-2 rounded-full bg-green-500"></span><?php endif; ?></div>
                <p class="text-xs text-gray-500 mt-0.5"><?= $desc ?></p>
            </div>
            <a href="?page=integrations&action=configure&provider=<?= $provider ?>" class="shrink-0 px-3 py-1.5 text-xs font-medium rounded-lg <?= $isActive ? 'bg-gray-100 text-gray-700 hover:bg-gray-200' : 'bg-indigo-50 text-indigo-700 hover:bg-indigo-100' ?> transition"><?= $isActive ? 'Settings' : 'Connect' ?></a>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endforeach; ?>
