<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Milov Patel</title>
    <style>
        html{
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: black;
            color: white;
            height: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        header {
            text-align: left;

            padding: 40px;
            position: relative;
            z-index: 10;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        h1 {
            font-size: 1.5em;
            font-weight: 700;
            top: 40px;
            left: 32px;
            margin-bottom: 1.25em;
        }
        h2 {
            font-size: 1.5em;
            font-weight: 400;
            margin-top: 0;
            margin-bottom: 1em;
            max-width: 600px;
            line-height: 1.25;
        }
        .contact-btn {
            display: inline-block;
            padding: 10px 30px;
            background-color: transparent;
            color: white;
            text-decoration: none;
            font-weight: bold;
            border: 1px solid white;
            border-radius: 5px;
            transition: background-color 0.3s, color 0.3s;
            align-self: flex-start;
        }
        .contact-btn:hover {
            background-color: white;
            color: black;
        }
        #logo-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden;
            z-index: 1;
        }
        .logo {
            position: absolute;
            cursor: move;
            transition: width 0.3s, height 0.3s;
        }
        .logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <header>
        <h1>Milov Patel</h1>
        <h2>I build brands that focus on strong communities, user-first business decisions, and delightful experiences.</h2>
        <a href="mailto:milov@milovpatel.com" class="contact-btn">Contact Me</a>
    </header>
    <div id="logo-container"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/interact.js/1.10.11/interact.min.js"></script>
    <script>
        const logoContainer = document.getElementById('logo-container');
        const logos = [];
        let containerRect;

        // Specify your logo files here
        const logoFiles = [
            'logos/logo1.png',
            'logos/logo2.png',
            'logos/logo3.png',
            'logos/logo4.png',
            'logos/logo5.png'
        ];

        class Logo {
            constructor(element, x, y) {
                this.element = element;
                this.x = x;
                this.y = y;
                this.vx = 0;
                this.vy = 0;
                this.ax = 0;
                this.ay = 0.5; // Gravity
                this.width = 100;  // Default width, will be updated after image loads
                this.height = 100; // Default height, will be updated after image loads
            }

            update() {
                this.vx += this.ax;
                this.vy += this.ay;
                this.x += this.vx;
                this.y += this.vy;

                // Boundary checks
                if (this.x < 0 || this.x + this.width > containerRect.width) {
                    this.vx *= -0.8; // Bounce off sides with dampening
                    this.x = Math.max(0, Math.min(this.x, containerRect.width - this.width));
                }
                if (this.y + this.height > containerRect.height) {
                    this.vy *= -0.8; // Bounce off bottom with dampening
                    this.y = containerRect.height - this.height; // Ensure logo is fully visible
                }

                // Apply friction
                this.vx *= 0.99;
                this.vy *= 0.99;

                this.element.style.left = `${this.x}px`;
                this.element.style.top = `${this.y}px`;
            }

            resize() {
                const rect = this.element.getBoundingClientRect();
                this.width = rect.width;
                this.height = rect.height;
                // Ensure logo is within bounds
                this.x = Math.max(0, Math.min(this.x, containerRect.width - this.width));
                this.y = Math.min(this.y, containerRect.height - this.height);
            }
        }

        function updateContainerRect() {
            containerRect = logoContainer.getBoundingClientRect();
        }

        function createLogos() {
            logoContainer.innerHTML = ''; // Clear existing logos
            logos.length = 0; // Clear logos array

            updateContainerRect();

            const baseSize = window.innerWidth <= 480 ? 60 : window.innerWidth <= 768 ? 80 : 100;

            logoFiles.forEach((file, i) => {
                const logo = document.createElement('div');
                logo.className = 'logo';
                const img = document.createElement('img');
                img.src = file;
                img.alt = `Logo ${i + 1}`;
                logo.appendChild(img);
                logoContainer.appendChild(logo);

                // Random initial position
                const x = Math.random() * (containerRect.width - baseSize);
                const y = Math.random() * (containerRect.height - baseSize);

                const logoInstance = new Logo(logo, x, y);
                logos.push(logoInstance);

                // Update logo size after image loads
                img.onload = () => {
                    const aspectRatio = img.naturalWidth / img.naturalHeight;
                    if (aspectRatio > 1) {
                        logo.style.width = `${baseSize}px`;
                        logo.style.height = `${baseSize / aspectRatio}px`;
                    } else {
                        logo.style.width = `${baseSize * aspectRatio}px`;
                        logo.style.height = `${baseSize}px`;
                    }
                    logoInstance.resize();
                    logoInstance.update();
                };
            });
        }

        function animate() {
            logos.forEach(logo => logo.update());
            requestAnimationFrame(animate);
        }

        function handleResize() {
            updateContainerRect();
            logos.forEach(logo => logo.resize());
        }

        // Initial setup
        createLogos();
        animate();

        // Handle various events that might change the viewport
        window.addEventListener('resize', handleResize);
        window.addEventListener('orientationchange', createLogos);
        window.visualViewport.addEventListener('resize', handleResize);

        // Make logos draggable
        interact('.logo').draggable({
            listeners: {
                move(event) {
                    const target = logos.find(logo => logo.element === event.target);
                    target.x += event.dx;
                    target.y += event.dy;
                    target.vx = event.dx;
                    target.vy = event.dy;
                }
            }
        });

        // Add bounce effect on mouse proximity
        document.addEventListener('mousemove', function(e) {
            logos.forEach(logo => {
                const dx = (logo.x + logo.width/2) - e.clientX;
                const dy = (logo.y + logo.height/2) - e.clientY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                if (distance < 150) {
                    const force = (150 - distance) / 10;
                    logo.vx += (dx / distance) * force;
                    logo.vy += (dy / distance) * force;
                }
            });
        });

        document.querySelectorAll('.trigger').forEach(span => {
            span.addEventListener('click', function() {
                const logoId = this.getAttribute('data-logo');
                const logoIndex = parseInt(logoId.replace('logo', '')) - 1;
                const logo = logos[logoIndex];

                // Get the position of the clicked word
                const rect = this.getBoundingClientRect();
                const x = rect.left + window.scrollX;
                const y = rect.top + window.scrollY;

                // Set the logo's initial position to the word's position
                logo.x = x;
                logo.y = y;
                logo.vx = 0;
                logo.vy = 0;
                logo.ax = 0;
                logo.ay = 0.5; // Gravity

                // Update the logo's position
                logo.update();
            });
        });
    </script>
</body>
</html>
