<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Killa Records - License Agreement</title>
    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            margin: 0;
            padding: 10px;
            background: rgba(18, 18, 18, 0.9);
            backdrop-filter: blur(8px);
            color: #ffffff;
            text-align: center;
        }
        h2 {
            color: #e63946;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(230, 57, 70, 0.8);
            font-size: 1.2em;
        }
        .agreement {
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 10px;
            max-height: 150px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            font-size: 0.9em;
        }
        .form-group {
            margin: 5px 0;
        }
        .form-group label {
            display: block;
            margin-bottom: 3px;
            color: #e63946;
            font-size: 0.9em;
        }
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-size: 0.9em;
        }
        button {
            padding: 8px 12px;
            background-color: #e63946;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.9em;
        }
    </style>
</head>
<body>

<h2>Killa Records - License Agreement</h2>

<div class="agreement" id="licenseContent">
    <!-- License agreement content will load here -->
</div>

<form id="agreementForm">
    <div class="form-group">
        <label for="name">Your Legal Name</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div class="form-group">
        <label for="email">Your Email</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div class="form-group">
        <label for="artistName">Artist Name</label>
        <input type="text" id="artistName" name="artistName" required>
    </div>
    <div class="form-group">
        <label for="spotifyLink">Spotify Link</label>
        <input type="text" id="spotifyLink" name="spotifyLink" required>
    </div>
    <div class="form-group">
        <label for="appleMusicLink">Apple Music Link (Optional)</label>
        <input type="text" id="appleMusicLink" name="appleMusicLink">
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox" id="ageCheck" checked="true"> I am 18 or older
        </label>
    </div>
    <div class="form-group" id="guardianGroup" style="display: none;">
        <label for="guardian">Legal Parent/Guardian Name</label>
        <input type="text" id="guardian" name="guardian">
    </div>
    <div class="form-group">
        <label>
            <input type="checkbox" id="accept" required> I agree to the terms and conditions
        </label>
    </div>
    <button type="submit" id="submitBtn" disabled>Sign</button>
</form>

<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
<script>
    (function() {
        emailjs.init("I6K0nnjqREZLhZTwF");
    })();

    document.getElementById('ageCheck').addEventListener('change', function() {
        const guardianGroup = document.getElementById('guardianGroup');
        const guardianInput = document.getElementById('guardian');
        if (this.checked) {
            guardianGroup.style.display = 'none';
            guardianInput.removeAttribute('required');
            guardianInput.value = "";
        } else {
            guardianGroup.style.display = 'block';
            guardianInput.setAttribute('required', 'required');
        }
    });

    document.getElementById('accept').addEventListener('change', function() {
        document.getElementById('submitBtn').disabled = !this.checked;
    });

    async function loadLicenseContent() {
        const response = await fetch('krlicense.txt');
        if (response.ok) {
            const text = await response.text();
            document.getElementById('licenseContent').innerText = text;
        } else {
            document.getElementById('licenseContent').innerText = "Failed to load license agreement.";
        }
    }
    loadLicenseContent();

    document.getElementById('agreementForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const artistName = document.getElementById('artistName').value;
        const spotifyLink = document.getElementById('spotifyLink').value;
        const appleMusicLink = document.getElementById('appleMusicLink').value || "N/A";
        const guardian = document.getElementById('ageCheck').checked ? "" : document.getElementById('guardian').value;

        const templateParams = {
            to_email: 'prodkillacontact@gmail.com',
            user_name: name,
            user_email: email,
            artist_name: artistName,
            spotify_link: spotifyLink,
            apple_music_link: appleMusicLink,
            guardian_name: guardian || "N/A"
        };

        emailjs.send("service_zmqx4ta", "template_btupo3r", templateParams)
            .then(() => {
                alert('Thank you for accepting the agreement. Your response has been recorded.');
                document.getElementById('agreementForm').reset();
                document.getElementById('submitBtn').disabled = true;
            }, error => {
                console.error('Email sending error:', error);
                alert('There was an error sending your acceptance. Please try again later.');
            });
    });
</script>

</body>
</html>
