@extends('public.layout')

@section('title', 'MeXCo')

@push('styles')
<style>
    .hero-carousel {
        position: relative;
        overflow: hidden;
        background: #0F172A;
        min-height: min(72vh, 560px);
    }
    .hero-track {
        position: relative;
        min-height: min(72vh, 560px);
    }
    .hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .7s ease, visibility .7s ease;
        display: flex;
        align-items: flex-end;
        background-size: cover;
        background-position: center;
    }
    .hero-slide.is-active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: 1;
    }
    .hero-slide::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(15,23,42,.82) 0%, rgba(15,23,42,.45) 48%, rgba(15,23,42,.2) 100%);
    }
    .hero-slide-inner {
        position: relative;
        z-index: 1;
        width: min(1120px, calc(100% - 2rem));
        margin: 0 auto;
        padding: 4.5rem 0 5.5rem;
        color: #fff;
        max-width: 560px;
        margin-left: max(1rem, calc((100% - 1120px) / 2 + 1rem));
        animation: heroCopyIn .65s ease both;
    }
    .hero-slide.is-active .hero-slide-inner {
        animation: heroCopyIn .65s ease both;
    }
    @keyframes heroCopyIn {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .hero-kicker {
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #C4B5FD;
        margin-bottom: .75rem;
    }
    .hero-title {
        font-size: clamp(1.85rem, 4.5vw, 2.75rem);
        font-weight: 800;
        letter-spacing: -.03em;
        margin: 0 0 .85rem;
        line-height: 1.15;
        color: #fff;
    }
    .hero-lead {
        margin: 0 0 1.5rem;
        color: rgba(255,255,255,.88);
        font-size: 1.05rem;
        max-width: 440px;
        line-height: 1.55;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
    .hero-actions .btn-outline {
        color: #fff;
        border-color: rgba(255,255,255,.45);
        background: transparent;
    }
    .hero-actions .btn-outline:hover {
        background: rgba(255,255,255,.12);
        color: #fff;
    }
    .hero-nav {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1rem;
    }
    .hero-nav button {
        pointer-events: auto;
        width: 42px;
        height: 42px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.35);
        background: rgba(15,23,42,.45);
        color: #fff;
        font-size: 1.25rem;
        cursor: pointer;
        backdrop-filter: blur(6px);
        transition: background .2s ease, transform .2s ease;
    }
    .hero-nav button:hover {
        background: rgba(124,58,237,.75);
        transform: scale(1.05);
    }
    .hero-dots {
        position: absolute;
        left: 50%;
        bottom: 1.35rem;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        gap: .45rem;
    }
    .hero-dots button {
        width: 9px;
        height: 9px;
        border-radius: 999px;
        border: 0;
        padding: 0;
        background: rgba(255,255,255,.4);
        cursor: pointer;
        transition: width .25s ease, background .25s ease;
    }
    .hero-dots button.is-active {
        width: 26px;
        background: #fff;
    }

    .section-center {
        text-align: center;
    }
    .section-center .container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .section-center .section-kicker,
    .section-center .section-title {
        text-align: center;
        width: 100%;
    }
    .section-center .section-lead {
        margin: 0 auto;
        max-width: 560px;
        text-align: center;
    }
    #what .section-title {
        max-width: 42rem;
        margin-left: auto;
        margin-right: auto;
        font-size: clamp(1.25rem, 2.4vw, 1.65rem);
        line-height: 1.35;
        font-weight: 700;
    }
    #what .section-lead {
        max-width: 40rem;
        margin-top: .85rem;
    }
    .section-center .section-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .65rem;
        justify-content: center;
        margin-top: 1.25rem;
        width: 100%;
    }
    .section-center .feature-grid,
    .section-center .plan-preview {
        width: 100%;
        justify-content: center;
        justify-items: center;
    }
    .section-center .tile {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 100%;
    }
    .section-center .faq-list {
        margin: 1.5rem auto 0;
        max-width: 720px;
        width: 100%;
        text-align: left;
    }
    .section-center .cta-band {
        width: 100%;
    }
    .plan-preview {
        align-items: stretch;
    }
    .section-center .plan-preview .tile {
        align-items: stretch;
        text-align: center;
    }
    .plan-limits-list {
        margin: .75rem 0 1rem;
        padding: 0;
        list-style: none;
        font-size: .78rem;
        color: var(--muted);
        line-height: 1.55;
        text-align: center;
    }
    .feature-grid, .plan-preview {
        display: grid; gap: 1rem; margin-top: 2rem;
    }
    .feature-grid { grid-template-columns: repeat(4, 1fr); }
    .plan-preview { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .tile {
        background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
        padding: 1.25rem; box-shadow: var(--shadow);
    }
    .tile h3 { margin: 0 0 .35rem; font-size: 1rem; font-weight: 800; }
    .tile p { margin: 0; font-size: .88rem; color: var(--muted); }

    /* Home commercial plans */
    #plans.home-plans {
        position: relative;
        overflow: hidden;
        background:
            radial-gradient(ellipse 55% 50% at 8% 12%, rgba(6, 182, 212, .1), transparent 55%),
            radial-gradient(ellipse 50% 45% at 92% 88%, rgba(124, 58, 237, .12), transparent 55%),
            linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 48%, #F8FAFC 100%);
    }
    #plans.home-plans::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px);
        background-size: 22px 22px;
        mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
        pointer-events: none;
    }
    #plans .container { position: relative; z-index: 1; }
    #plans .section-lead { max-width: 34rem; }
    .home-plan-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.15rem;
        width: 100%;
        max-width: 980px;
        margin: 2rem auto 0;
        align-items: stretch;
    }
    .home-plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        text-align: left;
        padding: 1.45rem 1.35rem 1.35rem;
        border-radius: 20px;
        background: rgba(255, 255, 255, .92);
        border: 1px solid rgba(226, 232, 240, .95);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px rgba(15, 23, 42, .06);
        backdrop-filter: blur(8px);
        transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
        animation: homePlanIn .55s ease both;
    }
    .home-plan-card:nth-child(1) { animation-delay: .05s; }
    .home-plan-card:nth-child(2) { animation-delay: .14s; }
    .home-plan-card:nth-child(3) { animation-delay: .23s; }
    .home-plan-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 18px 44px rgba(15, 23, 42, .1);
        border-color: #C7D2FE;
    }
    .home-plan-card.is-featured {
        background: linear-gradient(165deg, #FFFFFF 0%, #FAF8FF 55%, #F5F3FF 100%);
        border-color: #C4B5FD;
        box-shadow: 0 2px 4px rgba(124, 58, 237, .06), 0 22px 48px rgba(91, 33, 182, .12);
        transform: translateY(-4px);
    }
    .home-plan-card.is-featured:hover {
        transform: translateY(-8px);
        box-shadow: 0 26px 52px rgba(91, 33, 182, .16);
    }
    .home-plan-card.is-featured::before {
        content: '';
        position: absolute;
        left: 1.35rem;
        right: 1.35rem;
        top: 0;
        height: 3px;
        border-radius: 0 0 4px 4px;
        background: linear-gradient(90deg, #7C3AED, #06B6D4);
    }
    .home-plan-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: 1rem;
    }
    .home-plan-name {
        margin: 0;
        font-size: .78rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: #475569;
    }
    .home-plan-card.is-featured .home-plan-name { color: var(--mexco-primary-dark); }
    .home-plan-note {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #0E7490;
        background: #ECFEFF;
        border: 1px solid #A5F3FC;
        border-radius: 999px;
        padding: .2rem .55rem;
    }
    .home-plan-price {
        margin: 0 0 .35rem;
        font-size: clamp(1.65rem, 3vw, 1.95rem);
        font-weight: 800;
        letter-spacing: -.03em;
        color: var(--ink);
        line-height: 1.1;
    }
    .home-plan-price span {
        font-size: .82rem;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0;
    }
    .home-plan-desc {
        margin: 0 0 1.15rem;
        font-size: .9rem;
        color: var(--muted);
        line-height: 1.45;
        min-height: 2.7em;
    }
    .home-plan-metrics {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .55rem;
        margin: 0 0 1.25rem;
        padding: .85rem .7rem;
        border-radius: 14px;
        background: #F8FAFC;
        border: 1px solid #E2E8F0;
    }
    .home-plan-card.is-featured .home-plan-metrics {
        background: rgba(245, 243, 255, .9);
        border-color: #E9E5FF;
    }
    .home-plan-metric {
        text-align: center;
        min-width: 0;
    }
    .home-plan-metric strong {
        display: block;
        font-size: 1.05rem;
        font-weight: 800;
        color: var(--ink);
        letter-spacing: -.02em;
        line-height: 1.15;
    }
    .home-plan-metric span {
        display: block;
        margin-top: .2rem;
        font-size: .68rem;
        font-weight: 600;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .home-plan-card .btn-purple,
    .home-plan-card .btn-outline {
        width: 100%;
        margin-top: auto;
    }
    .home-plans-actions {
        margin-top: 1.5rem;
    }
    @keyframes homePlanIn {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
        .home-plan-card { animation: none; }
        .home-plan-card:hover,
        .home-plan-card.is-featured,
        .home-plan-card.is-featured:hover { transform: none; }
    }
    #usecases {
        background: #fff;
    }
    #usecases .section-title {
        max-width: 28rem;
        margin-left: auto;
        margin-right: auto;
    }
    #usecases .section-lead {
        max-width: 40rem;
        margin-top: .75rem;
    }
    .use-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
        width: 100%;
        max-width: 860px;
        margin: 2rem auto 0;
        border: 1px solid var(--border);
        border-radius: 16px;
        overflow: hidden;
        background: #fff;
    }
    .use-item {
        display: flex;
        align-items: flex-start;
        gap: .9rem;
        padding: 1.15rem 1.25rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
        background: #fff;
        transition: background .15s ease;
    }
    .use-item:nth-child(odd) {
        border-right: 1px solid var(--border);
    }
    .use-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }
    .use-item:hover {
        background: #F8FAFC;
    }
    .use-item-icon {
        flex: none;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: grid;
        place-items: center;
        background: #F1F5F9;
        color: #475569;
    }
    .use-item-icon svg {
        width: 20px;
        height: 20px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .use-item-body { min-width: 0; }
    .use-item h3 {
        margin: 0 0 .25rem;
        font-size: .95rem;
        font-weight: 700;
        letter-spacing: -.01em;
        color: var(--ink);
        text-transform: none;
    }
    .use-item p {
        margin: 0;
        font-size: .84rem;
        color: var(--muted);
        line-height: 1.4;
    }
    .use-cta {
        width: min(640px, 100%);
        margin: 2rem auto 0;
        padding: 0;
        border: 0;
        background: transparent;
        text-align: center;
    }
    .use-cta h3 {
        margin: 0 0 .4rem;
        font-size: 1.15rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--ink);
    }
    .use-cta p {
        margin: 0 auto 1rem;
        max-width: 30rem;
        color: var(--muted);
        font-size: .92rem;
        line-height: 1.5;
    }
    .faq details {
        background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.15rem; margin-bottom: .65rem;
    }
    .faq summary { font-weight: 700; cursor: pointer; }
    .faq p { margin: .65rem 0 0; color: var(--muted); font-size: .9rem; }
    .cta-band {
        background: linear-gradient(135deg, var(--mexco-primary), var(--mexco-primary-dark));
        color: #fff; border-radius: 20px; padding: 2.5rem; text-align: center;
    }
    .cta-band h2 { margin: 0 0 .5rem; font-size: 1.75rem; font-weight: 800; }
    .cta-band p { margin: 0 0 1.25rem; opacity: .9; }
    .cta-band .btn-purple { background: #fff; color: var(--mexco-primary-dark); }
    .cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
    .cta-band .btn-outline:hover { background: rgba(255,255,255,.1); color: #fff; }

    @media (max-width: 900px) {
        .feature-grid { grid-template-columns: 1fr 1fr; }
        .use-grid { grid-template-columns: 1fr; }
        .use-item:nth-child(odd) { border-right: 0; }
        .use-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
        .use-item:last-child { border-bottom: 0; }
        .home-plan-grid { grid-template-columns: 1fr; max-width: 420px; }
        .home-plan-card.is-featured { transform: none; }
        .home-plan-card.is-featured:hover { transform: translateY(-6px); }
        .hero-slide::before {
            background: linear-gradient(180deg, rgba(15,23,42,.55) 0%, rgba(15,23,42,.85) 100%);
        }
        .hero-slide-inner {
            margin-left: auto;
            margin-right: auto;
            max-width: 100%;
            padding: 3.5rem 0 5rem;
        }
    }
    @media (max-width: 640px) {
        .feature-grid { grid-template-columns: 1fr; }
        .home-plan-metrics { gap: .35rem; padding: .75rem .45rem; }
        .home-plan-metric strong { font-size: .95rem; }
        .hero-carousel, .hero-track { min-height: min(78vh, 520px); }
    }
</style>
@endpush

@section('content')
<section class="hero-carousel" id="heroCarousel" aria-roledescription="carousel" aria-label="MeXCo highlights">
    <div class="hero-track">
        <article class="hero-slide is-active" style="background-image:url('{{ asset('images/banner-meet.jpg') }}')" data-slide="0" aria-hidden="false">
            <div class="hero-slide-inner">
                <div class="hero-kicker">Meet</div>
                <h1 class="hero-title">Your Digital Event Experience Platform</h1>
                <p class="hero-lead">Bring people together with digital passes, sessions, and a seamless check-in experience, licensed per event.</p>
                <div class="hero-actions">
                    <a href="{{ route('mexco.plans') }}" class="btn-purple btn-lg">Create your event</a>
                    <a href="{{ route('mexco.demo') }}" class="btn-outline btn-lg">Try Demo</a>
                </div>
            </div>
        </article>
        <article class="hero-slide" style="background-image:url('{{ asset('images/banner-experience.jpg') }}')" data-slide="1" aria-hidden="true">
            <div class="hero-slide-inner">
                <div class="hero-kicker">Experience</div>
                <h2 class="hero-title">Run every moment on one platform</h2>
                <p class="hero-lead">Attendance, booths, stamps, certificates, and engagement tools for organisers and participants.</p>
                <div class="hero-actions">
                    <a href="{{ route('mexco.features') }}" class="btn-purple btn-lg">Explore features</a>
                    <a href="{{ route('mexco.how') }}" class="btn-outline btn-lg">How it works</a>
                </div>
            </div>
        </article>
        <article class="hero-slide" style="background-image:url('{{ asset('images/banner-connect.jpg') }}')" data-slide="2" aria-hidden="true">
            <div class="hero-slide-inner">
                <div class="hero-kicker">Connect</div>
                <h2 class="hero-title">From registration to lasting connections</h2>
                <p class="hero-lead">Help visitors, exhibitors, and presenters connect, while committees manage the event with confidence.</p>
                <div class="hero-actions">
                    <a href="{{ route('mexco.register') }}" class="btn-purple btn-lg">Sign up</a>
                    <a href="{{ route('mexco.plans') }}" class="btn-outline btn-lg">View plans</a>
                </div>
            </div>
        </article>
    </div>
    <div class="hero-nav">
        <button type="button" data-hero-prev aria-label="Previous slide">‹</button>
        <button type="button" data-hero-next aria-label="Next slide">›</button>
    </div>
    <div class="hero-dots" role="tablist" aria-label="Carousel slides">
        <button type="button" class="is-active" data-hero-dot="0" aria-label="Slide 1" aria-selected="true"></button>
        <button type="button" data-hero-dot="1" aria-label="Slide 2" aria-selected="false"></button>
        <button type="button" data-hero-dot="2" aria-label="Slide 3" aria-selected="false"></button>
    </div>
</section>

<section class="section section-alt section-center" id="what">
    <div class="container">
        <div class="section-kicker">What is MeXCo?</div>
        <h2 class="section-title">MeXCo is a digital event experience platform that turns programmes, exhibitions and activities into connected, measurable experiences.</h2>
        <p class="section-lead">
            Whether you're running a conference, exhibition, innovation competition, poster presentation, treasure hunt, workshop or campus programme, MeXCo connects the people, activities and experiences in one platform.
        </p>
    </div>
</section>

<section class="section section-center" id="features">
    <div class="container">
        <div class="section-kicker">Features</div>
        <h2 class="section-title">Built for modern event operations</h2>
        <div class="feature-grid">
            <div class="tile"><h3>Digital Pass</h3><p>QR-ready participant passes for every attendee.</p></div>
            <div class="tile"><h3>QR Attendance</h3><p>Scan and verify with MeXCo Attend.</p></div>
            <div class="tile"><h3>Sessions & booths</h3><p>Programme management with capacity limits.</p></div>
            <div class="tile"><h3>Certificates</h3><p>Issue digital certificates after the event.</p></div>
        </div>
        <div class="section-actions">
            <a href="{{ route('mexco.features') }}" class="btn-outline">Explore all features</a>
        </div>
    </div>
</section>

<section class="section section-center home-plans" id="plans">
    <div class="container">
        <div class="section-kicker">Commercial plans</div>
        <h2 class="section-title">Transparent per-event pricing</h2>
        <p class="section-lead">Starter, Plus, and Pro, priced per event license. Pick the capacity that fits your programme.</p>

        <div class="home-plan-grid">
            @foreach($commercialPlans as $plan)
                @php
                    $featured = $plan->code === 'pro';
                    $note = match ($plan->code) {
                        'starter' => 'Essentials',
                        'plus' => 'Growing events',
                        'pro' => 'Best value',
                        default => null,
                    };
                @endphp
                <article class="home-plan-card {{ $featured ? 'is-featured' : '' }}">
                    <div class="home-plan-top">
                        <h3 class="home-plan-name">{{ $plan->name }}</h3>
                        @if($note)
                            <span class="home-plan-note">{{ $note }}</span>
                        @endif
                    </div>
                    <p class="home-plan-price">
                        {{ $plan->formattedPrice() }}
                        <span>/ event</span>
                    </p>
                    <p class="home-plan-desc">{{ $plan->description }}</p>
                    <div class="home-plan-metrics" aria-label="{{ $plan->name }} limits">
                        <div class="home-plan-metric">
                            <strong>
                                @if($plan->participant_limit)
                                    {{ number_format($plan->participant_limit) }}
                                @else
                                    Custom
                                @endif
                            </strong>
                            <span>Participants</span>
                        </div>
                        <div class="home-plan-metric">
                            <strong>{{ $plan->session_limit ?: '-' }}</strong>
                            <span>Sessions</span>
                        </div>
                        <div class="home-plan-metric">
                            <strong>{{ $plan->booth_limit ?: '-' }}</strong>
                            <span>Booths</span>
                        </div>
                    </div>
                    <a
                        href="{{ route('mexco.plans.choose', $plan->code) }}"
                        class="{{ $featured ? 'btn-purple' : 'btn-outline' }}"
                    >
                        Choose {{ $plan->name }}
                    </a>
                </article>
            @endforeach
        </div>

        <div class="section-actions home-plans-actions">
            <a href="{{ route('mexco.plans') }}" class="btn-purple">Details &amp; comparison</a>
            <a href="{{ route('mexco.demo') }}" class="btn-outline">Try Demo</a>
            <a href="{{ route('mexco.enterprise') }}" class="btn-outline">Custom Plan</a>
        </div>
    </div>
</section>

<section class="section section-center" id="usecases">
    <div class="container">
        <div class="section-kicker">Who needs MeXCo?</div>
        <h2 class="section-title">Built for more than just conferences.</h2>
        <p class="section-lead">
            MeXCo adapts to your programme, whether you're connecting people, showcasing innovation, driving booth visits, running competitions or creating an interactive event journey.
        </p>

        @php
            $useCases = [
                [
                    'title' => 'Conference',
                    'text' => 'Sessions, attendance, and certificates',
                    'icon' => '<path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/>',
                ],
                [
                    'title' => 'Exhibition',
                    'text' => 'Booths, visitors, and engagement',
                    'icon' => '<rect x="4" y="3" width="16" height="18" rx="2"/><path d="M9 21V9h6v12"/><path d="M9 13h6"/>',
                ],
                [
                    'title' => 'Innovation',
                    'text' => 'Competition, voting, and stamps',
                    'icon' => '<path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z"/>',
                ],
                [
                    'title' => 'Poster',
                    'text' => 'Explore, vote, and interact',
                    'icon' => '<rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="9.5" cy="9.5" r="1.5"/><path d="m21 15-3.5-3.5L8 21"/>',
                ],
                [
                    'title' => 'Treasure Hunt',
                    'text' => 'Checkpoints, challenges, and rewards',
                    'icon' => '<polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/>',
                ],
                [
                    'title' => 'Workshop',
                    'text' => 'Sessions, activities, and completion',
                    'icon' => '<path d="M22 10 12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1 2.5 3 6 3s6-2 6-3v-5"/>',
                ],
                [
                    'title' => 'Campus event',
                    'text' => 'Activities, engagement, and digital pass',
                    'icon' => '<path d="M3 21h18"/><path d="M5 21V8l7-4 7 4v13"/><path d="M9 21v-6h6v6"/>',
                ],
                [
                    'title' => 'And more',
                    'text' => 'Your event, your experience',
                    'icon' => '<circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/>',
                ],
            ];
        @endphp

        <div class="use-grid">
            @foreach($useCases as $case)
                <article class="use-item">
                    <div class="use-item-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24">{!! $case['icon'] !!}</svg>
                    </div>
                    <div class="use-item-body">
                        <h3>{{ $case['title'] }}</h3>
                        <p>{{ $case['text'] }}</p>
                    </div>
                </article>
            @endforeach
        </div>

        <div class="use-cta">
            <h3>Have a unique event?</h3>
            <p>Tell us what you're planning. We'll show you how MeXCo can power it.</p>
            <a href="{{ route('mexco.features') }}" class="btn-purple">Explore MeXCo</a>
        </div>
    </div>
</section>

<section class="section section-center" id="faq">
    <div class="container faq">
        <div class="section-kicker">FAQ</div>
        <h2 class="section-title">Common questions</h2>
        <div class="faq-list">
            <details open>
                <summary>Is pricing per organisation or per event?</summary>
                <p>Per event. An organisation can run multiple events, each with its own plan and license.</p>
            </details>
            <details>
                <summary>What is MeXCo Campus?</summary>
                <p>A sponsored license for eligible student events with full features and a 30-day retention window after the event ends.</p>
            </details>
            <details>
                <summary>Where do I manage the live event?</summary>
                <p>My MeXCo is your account portal. MeXCo Organizer is where you run participants, sessions, booths, and certificates.</p>
            </details>
        </div>
    </div>
</section>

<section class="section section-center">
    <div class="container">
        <div class="cta-band">
            <h2>Ready to create your event?</h2>
            <p>Choose a plan and set up your organisation in minutes.</p>
            <div class="hero-actions" style="justify-content:center">
                <a href="{{ route('mexco.plans') }}" class="btn-purple btn-lg">Create your event</a>
                <a href="{{ route('mexco.enterprise') }}" class="btn-outline btn-lg">Request Enterprise quote</a>
            </div>
        </div>
    </div>
</section>

<section class="section section-alt section-center" id="contact">
    <div class="container">
        <div class="section-kicker">Contact</div>
        <h2 class="section-title">Talk to the MeXCo team</h2>
        <p class="section-lead">Questions about plans, Campus sponsorship, or Enterprise? Reach out and we’ll help you choose the right path.</p>
        <div class="section-actions">
            <a href="{{ route('mexco.contact') }}" class="btn-outline">Contact us</a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
(function () {
    const root = document.getElementById('heroCarousel');
    if (!root) return;

    const slides = Array.from(root.querySelectorAll('.hero-slide'));
    const dots = Array.from(root.querySelectorAll('[data-hero-dot]'));
    let index = 0;
    let timer = null;

    function go(to) {
        index = (to + slides.length) % slides.length;
        slides.forEach((slide, i) => {
            const active = i === index;
            slide.classList.toggle('is-active', active);
            slide.setAttribute('aria-hidden', active ? 'false' : 'true');
        });
        dots.forEach((dot, i) => {
            const active = i === index;
            dot.classList.toggle('is-active', active);
            dot.setAttribute('aria-selected', active ? 'true' : 'false');
        });
    }

    function next() { go(index + 1); }
    function prev() { go(index - 1); }

    function start() {
        stop();
        timer = setInterval(next, 6000);
    }
    function stop() {
        if (timer) clearInterval(timer);
        timer = null;
    }

    root.querySelector('[data-hero-next]')?.addEventListener('click', () => { next(); start(); });
    root.querySelector('[data-hero-prev]')?.addEventListener('click', () => { prev(); start(); });
    dots.forEach((dot) => {
        dot.addEventListener('click', () => {
            go(Number(dot.getAttribute('data-hero-dot')) || 0);
            start();
        });
    });

    root.addEventListener('mouseenter', stop);
    root.addEventListener('mouseleave', start);
    go(0);
    start();
})();
</script>
@endpush
