<!-- Audio Transcription Service -->
<div data-section-id="transcription-service">
    <!-- The transcription service will be injected here -->
</div>

<!-- Include the integration script -->
<script src="https://web-transcribe-tselotkifle.replit.app/static/js/squarespace-integration.js"></script>

<!-- Transcription Service Script -->
<script>
    document.addEventListener('DOMContentLoaded', () => {
        setTimeout(() => {
            if (typeof TranscriptionService !== 'undefined') {
                const serviceUrl = 'https://web-transcribe-tselotkifle.replit.app';
                new TranscriptionService(serviceUrl);
            } else {
                console.error('TranscriptionService is not defined. Check script loading order.');
            }
        }, 500);
    });
</script>

<style>
    /* Custom styles for the transcription service */
    .transcription-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        max-width: 600px;
        margin: 2rem auto;
        padding: 1rem;
    }

    .upload-area {
        border: 2px dashed #ccc;
        border-radius: 4px;
        padding: 2rem;
        text-align: center;
        margin-bottom: 1rem;
        transition: border-color 0.3s ease;
    }

    .upload-area:hover {
        border-color: #000;
    }

    .progress {
        height: 4px;
        background: #eee;
        margin: 1rem 0;
        border-radius: 2px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        background: #000;
        transition: width 0.3s ease;
    }

    .copy-btn {
        display: inline-block;
        padding: 0.5rem 1rem;
        background: #000;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s ease;
    }

    .copy-btn:hover {
        background: #333;
    }

    .transcription {
        background: #f9f9f9;
        padding: 1rem;
        border-radius: 4px;
        margin-bottom: 1rem;
        white-space: pre-wrap;
    }
</style>