<?php $__env->startSection('title', 'Try Demo'); ?>

<?php $__env->startPush('styles'); ?>
<style>
    .demo-hero { padding: 3rem 0 1.25rem; text-align: center; }
    .demo-hero .section-lead { margin-left: auto; margin-right: auto; }
    .demo-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
        margin-top: 1.5rem;
        align-items: stretch;
    }
    .demo-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 1.5rem 1.4rem;
        display: flex;
        flex-direction: column;
    }
    .demo-card.organiser {
        background: linear-gradient(180deg, #EFF6FF 0%, #fff 42%);
        border-color: #BFDBFE;
    }
    .demo-card.visitor {
        background: linear-gradient(180deg, #F5F3FF 0%, #fff 42%);
        border-color: #DDD6FE;
    }
    .cred-box {
        margin: 1rem 0 1.15rem;
        padding: .9rem 1rem;
        border-radius: 12px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
        font-size: .86rem;
        line-height: 1.55;
    }
    .cred-box code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: .82rem;
        font-weight: 700;
        color: var(--ink);
    }
    .cred-row { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
    .cred-row span { color: var(--muted); }
    .demo-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: auto; }
    .demo-note {
        margin-top: 1.5rem;
        text-align: center;
        color: var(--muted);
        font-size: .9rem;
    }
    .limits-strip {
        margin-top: 2rem;
        padding: 1.15rem 1.25rem;
        border-radius: 16px;
        border: 1px solid var(--border);
        background: #fff;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .75rem;
        text-align: center;
    }
    .limits-strip strong { display: block; font-size: 1.05rem; margin-top: .15rem; }
    .limits-strip span { font-size: .75rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
    @media (max-width: 800px) {
        .demo-grid, .limits-strip { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 520px) {
        .limits-strip { grid-template-columns: 1fr; }
    }
</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<section class="demo-hero">
    <div class="container">
        <div class="section-kicker">Free demo</div>
        <h1 class="section-title">Try MeXCo with default demo accounts</h1>
        <p class="section-lead">
            Use the shared demo event to explore Organizer and participant experiences — no signup required.
            Event ID: <strong><?php echo e($accounts['event_id']); ?></strong>
        </p>
    </div>
</section>

<section class="section" style="padding-top:0">
    <div class="container">
        <div class="demo-grid">
            <article class="demo-card organiser">
                <div class="section-kicker">Organizer</div>
                <h2 class="section-title" style="font-size:1.3rem">Try MeXCo Organizer</h2>
                <p style="color:var(--muted);margin:.5rem 0 0;font-size:.9rem">
                    Manage participants, sessions, booths, attendance, and certificates for the demo event.
                </p>
                <div class="cred-box">
                    <div class="cred-row"><span>Username</span><code><?php echo e($accounts['organiser']['username']); ?></code></div>
                    <div class="cred-row"><span>Password</span><code><?php echo e($accounts['organiser']['password']); ?></code></div>
                </div>
                <div class="demo-actions">
                    <a href="<?php echo e(route('mexco.admin.login')); ?>" class="btn-purple" target="_blank" rel="noopener">Open Organizer</a>
                </div>
            </article>

            <article class="demo-card visitor">
                <div class="section-kicker">Participant</div>
                <h2 class="section-title" style="font-size:1.3rem">Try MeXCo Pass</h2>
                <p style="color:var(--muted);margin:.5rem 0 0;font-size:.9rem">
                    Sign in as a visitor to open the digital pass, join sessions, and collect stamps.
                </p>
                <?php if($visitor): ?>
                    <div class="cred-box">
                        <div class="cred-row"><span>Email</span><code><?php echo e($visitor['email']); ?></code></div>
                        <div class="cred-row"><span>IC / ID</span><code><?php echo e($visitor['ic']); ?></code></div>
                        <div class="cred-row"><span>Role</span><code><?php echo e($visitor['role']); ?></code></div>
                    </div>
                <?php endif; ?>
                <div class="demo-actions">
                    <a href="<?php echo e(url('/mexco')); ?>" class="btn-purple" target="_blank" rel="noopener">Open Visitor Pass</a>
                </div>
            </article>
        </div>

        <div class="limits-strip">
            <div><span>Duration</span><strong><?php echo e($limits['duration_days']); ?> days*</strong></div>
            <div><span>Participants</span><strong><?php echo e(number_format($limits['participants'] ?? 0)); ?></strong></div>
            <div><span>Sessions</span><strong><?php echo e($limits['sessions'] ?? '—'); ?></strong></div>
            <div><span>Booths</span><strong><?php echo e($limits['booths'] ?? '—'); ?></strong></div>
        </div>

        <p class="demo-note">
            * Shared sandbox stays available for product trials. Want your own organisation demo license?
            <a href="<?php echo e(route('mexco.register', ['plan' => 'demo'])); ?>" style="color:var(--mexco-primary);font-weight:700">Create a My MeXCo account</a>
        </p>
    </div>
</section>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('public.layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\laragon\www\myapp\resources\views/public/demo.blade.php ENDPATH**/ ?>