{{ block styles }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { background: #f4f4f8 !important; color: #111118; font-family: 'DM Sans', sans-serif; }
.container { max-width: 660px !important; }
</style>
{{ endblock }}

{{ block content }}

<div class="consent-page">

    <div class="page-header">
        <p class="page-label">Welcome</p>
        <h1 class="page-title">Decision Articulation Study</h1>
        <p class="page-subtitle">Emory University Goizueta Business School</p>
    </div>

    <!-- Study details -->
    <div class="info-card">
        <div class="info-card-eyebrow">Study details</div>
        <div class="detail-rows">
            <div class="detail-row">
                <span class="detail-label">Duration</span>
                <span class="detail-value">Approximately 10 minutes</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Format</span>
                <span class="detail-value">Voice recordings</span>
            </div>
        </div>
    </div>

    <!-- Privacy -->
    <div class="info-card">
        <div class="info-card-eyebrow">Privacy</div>
        <p>Your privacy is important to us. Since this study involves voice recordings, please read the
            <a class="privacy-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvasGDPR" style="cursor: pointer;">
                privacy policy
            </a>
            carefully before proceeding.
        </p>
        <label class="checkbox-row">
            <input type="checkbox" id="GDPR" required>
            <span>I have read and agree to the privacy policy, including the pseudonymous processing of my voice recordings for scientific research.</span>
        </label>
    </div>

    <div class="begin-row">
        <button type="submit" class="begin-btn" id="submitButton">Proceed to study &rarr;</button>
    </div>

</div>

<!-- GDPR Offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasGDPR" aria-labelledby="offcanvasGDPRLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasGDPRLabel">Privacy Policy</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        {{ include C.PRIVACY_TEMPLATE }}
    </div>
</div>

<style>
.consent-page { padding: 32px 0 60px; }

.page-header { margin-bottom: 28px; }
.page-label {
    font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #a0a0b8; margin-bottom: 6px;
}
.page-title   { font-size: 32px; font-weight: 700; color: #111118; margin: 0 0 4px; }
.page-subtitle { font-size: 15px; color: #7070888; color: #8080a0; margin: 0; }

.info-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.info-card-eyebrow {
    font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
    text-transform: uppercase; color: #a0a0b8; margin-bottom: 14px;
}

.info-card p { color: #4a4a60; line-height: 1.65; margin: 0 0 16px; }

/* Detail rows */
.detail-rows { display: flex; flex-direction: column; gap: 10px; }
.detail-row  { display: flex; justify-content: space-between; align-items: center; }
.detail-label { font-size: 14px; font-weight: 600; color: #111118; }
.detail-value { font-size: 14px; color: #6060788; color: #6a6a80; }

/* Privacy link */
.privacy-link {
    color: #111118;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.privacy-link:hover { color: #3a3a50; }

/* Checkbox */
.checkbox-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
    margin-top: 4px;
}
.checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px; height: 16px;
    margin-top: 3px;
    cursor: pointer;
    accent-color: #111118;
}
.checkbox-row span { font-size: 14px; color: #4a4a60; line-height: 1.55; }

/* Begin button */
.begin-row { display: flex; justify-content: flex-end; margin-top: 28px; }
.begin-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 600;
    background: #111118; color: #ffffff;
    border: none; border-radius: 8px;
    padding: 12px 28px; cursor: pointer;
    transition: background 0.15s ease, transform 0.12s ease;
}
.begin-btn:hover  { background: #2a2a38; transform: translateY(-1px); }
.begin-btn:active { transform: translateY(0); }
</style>

{{ endblock }}