<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HyperDrop - Private P2P File Transfer</title>
    <meta name="description" content="Privacy-first peer-to-peer file transfer directly in your browser. No servers, no tracking, no data collection.">
    <meta name="theme-color" content="#8b5cf6">
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
    <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@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="page-wrapper">
        <!-- Hero Section -->
        <header class="hero">
            <div class="hero-content">
                <div class="logo-badge">
                    <span class="logo-icon">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
                        </svg>
                    </span>
                    <span class="logo-text">hyperdrop</span>
                </div>

                <h1 class="hero-title">Send files directly.<br><span class="gradient-text">No middleman.</span></h1>

                <p class="hero-subtitle">Your files go straight from your device to theirs. End-to-end encrypted. We never see your data.</p>

                <div class="trust-badges">
                    <div class="trust-badge">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                        </svg>
                        <span>End-to-end encrypted</span>
                    </div>
                    <div class="trust-badge">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="12" cy="12" r="10"/>
                            <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                        </svg>
                        <span>No server storage</span>
                    </div>
                    <div class="trust-badge">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                            <circle cx="9" cy="7" r="4"/>
                            <line x1="23" y1="11" x2="17" y2="11"/>
                        </svg>
                        <span>No account needed</span>
                    </div>
                </div>
            </div>
        </header>

        <!-- Main App Card -->
        <main class="app-container">
            <div class="app-card">
                <nav class="mode-nav">
                    <button id="sendBtn" class="mode-btn active" data-mode="send">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="17 8 12 3 7 8"/>
                            <line x1="12" y1="3" x2="12" y2="15"/>
                        </svg>
                        Send
                    </button>
                    <button id="receiveBtn" class="mode-btn" data-mode="receive">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                            <polyline points="7 10 12 15 17 10"/>
                            <line x1="12" y1="15" x2="12" y2="3"/>
                        </svg>
                        Receive
                    </button>
                </nav>

                <!-- Send Mode -->
                <section id="sendMode" class="mode-section">
                    <div class="drop-zone" id="dropZone">
                        <input type="file" id="fileInput" multiple class="file-input">
                        <div class="drop-content">
                            <div class="drop-icon">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
                                </svg>
                            </div>
                            <p class="drop-text">Select files or <span class="drop-link">browse</span></p>
                            <div class="no-upload-badge">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                                </svg>
                                Files never touch our servers
                            </div>
                        </div>
                    </div>

                    <div id="fileList" class="file-list hidden"></div>

                    <button id="generateCodeBtn" class="primary-btn hidden">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                        </svg>
                        Create Transfer Link
                    </button>

                    <div id="transferCode" class="share-section hidden">
                        <label class="field-label">Share this link</label>
                        <div class="url-container">
                            <input type="text" id="codeDisplay" class="url-input" readonly>
                            <button class="copy-btn" id="copyBtn">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
                                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
                                </svg>
                                Copy
                            </button>
                        </div>
                        <p class="share-hint">Waiting for recipient to connect...</p>
                    </div>

                    <div id="connectionStatus" class="status-message"></div>

                    <!-- State Indicator -->
                    <div id="stateIndicatorSend" class="state-indicator hidden">
                        <div class="state-badge">
                            <span class="state-dot"></span>
                            <span class="state-text">Connecting</span>
                        </div>
                        <div class="state-actions hidden">
                            <button id="retryBtnSend" class="action-btn retry-btn hidden">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
                                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                                </svg>
                                Retry
                            </button>
                            <button id="cancelBtnSend" class="action-btn cancel-btn hidden">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
                                </svg>
                                Cancel
                            </button>
                        </div>
                    </div>

                    <div id="fingerprintIndicatorSend" class="fingerprint-indicator hidden">
                        <span class="fingerprint-lock">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                            </svg>
                        </span>
                        <span class="fingerprint-emojis" id="fingerprintEmojisSend"></span>
                        <span class="fingerprint-info" title="Security fingerprint - compare with your partner to verify connection">?</span>
                    </div>

                    <div id="transferProgress" class="progress-section hidden">
                        <div class="progress-header">
                            <span class="progress-label">Sending</span>
                            <span id="progressText" class="progress-value">0%</span>
                        </div>
                        <div class="progress-track">
                            <div id="progressFill" class="progress-fill"></div>
                        </div>
                    </div>
                </section>

                <!-- Receive Mode -->
                <section id="receiveMode" class="mode-section hidden">
                    <div class="receive-hero">
                        <div class="receive-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="7 10 12 15 17 10"/>
                                <line x1="12" y1="15" x2="12" y2="3"/>
                            </svg>
                        </div>
                        <p class="receive-title">Enter the code from your sender</p>
                        <div class="no-upload-badge">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                            </svg>
                            Direct & encrypted — no server in between
                        </div>
                    </div>

                    <div class="input-section">
                        <div class="input-group">
                            <input type="text" id="codeInput" class="text-input" placeholder="e.g. apple-beach-castle-dawn">
                            <button id="connectBtn" class="primary-btn">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M5 12h14"/>
                                    <path d="M12 5l7 7-7 7"/>
                                </svg>
                                Connect
                            </button>
                        </div>
                    </div>

                    <div id="receiveStatus" class="status-message"></div>

                    <!-- State Indicator -->
                    <div id="stateIndicatorReceive" class="state-indicator hidden">
                        <div class="state-badge">
                            <span class="state-dot"></span>
                            <span class="state-text">Connecting</span>
                        </div>
                        <div class="state-actions hidden">
                            <button id="retryBtnReceive" class="action-btn retry-btn hidden">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M23 4v6h-6"/><path d="M1 20v-6h6"/>
                                    <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                                </svg>
                                Retry
                            </button>
                            <button id="cancelBtnReceive" class="action-btn cancel-btn hidden">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
                                </svg>
                                Cancel
                            </button>
                        </div>
                    </div>

                    <div id="fingerprintIndicatorReceive" class="fingerprint-indicator hidden">
                        <span class="fingerprint-lock">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
                                <path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                            </svg>
                        </span>
                        <span class="fingerprint-emojis" id="fingerprintEmojisReceive"></span>
                        <span class="fingerprint-info" title="Security fingerprint - compare with your partner to verify connection">?</span>
                    </div>

                    <div id="incomingFiles" class="incoming-section hidden">
                        <div class="incoming-header">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                                <polyline points="7 10 12 15 17 10"/>
                                <line x1="12" y1="15" x2="12" y2="3"/>
                            </svg>
                            <h3>Incoming Files</h3>
                        </div>
                        <div id="incomingFilesList" class="file-list"></div>
                        <div class="action-group">
                            <button id="acceptBtn" class="primary-btn">Accept & Download</button>
                            <button id="rejectBtn" class="secondary-btn">Decline</button>
                        </div>
                    </div>

                    <div id="downloadProgress" class="progress-section hidden">
                        <div class="progress-header">
                            <span class="progress-label">Receiving</span>
                            <span id="downloadProgressText" class="progress-value">0%</span>
                        </div>
                        <div class="progress-track">
                            <div id="downloadProgressFill" class="progress-fill"></div>
                        </div>
                    </div>

                    <div id="downloadStatus" class="status-message"></div>
                </section>
            </div>
        </main>

        <!-- Footer -->
        <footer class="footer">
            <a href="/learn-more" class="footer-link">How it works</a>
            <span class="footer-dot">·</span>
            <span class="footer-text">Open source</span>
            <span class="footer-dot">·</span>
            <span class="footer-text">WebRTC powered</span>
        </footer>
    </div>

    <!-- Scripts -->
    <script type="module" src="/src/hyperdrop-modules.js"></script>
    <script src="/src/modules/secure-reconnection.js?v=4.0"></script>
    <script src="/src/modules/emoji-fingerprint.js?v=1.0"></script>
    <script src="/app-simple.js?v=4.0"></script>
</body>
</html>
