<?php

require APP_PATH . '/Views/public/layouts/header.php';

$eventName = $event['name']
    ?? '2nd Provincial Conference of Traditional Authorities, Government and Industry on Bridging the Digital Divide';

$eventTheme = $event['theme']
    ?? 'Empowering Communities for Self-Reliance in the Digital Age';

$startDate = $event['start_date'] ?? '2026-07-23';
$endDate = $event['end_date'] ?? '2026-07-24';
?>

<section class="hero" id="home">
    <div class="hero-overlay"></div>
    <div class="hero-pattern hero-pattern-one"></div>
    <div class="hero-pattern hero-pattern-two"></div>

    <div class="container hero-grid">
        <div class="hero-content">
            <div class="hero-kicker">
                <span class="hero-kicker-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M12 2 3 7v2h18V7zm-7 9v7H3v2h18v-2h-2v-7h-2v7h-3v-7h-4v7H7v-7z"/>
                    </svg>
                </span>

                Traditional Leadership · Government · Industry
            </div>

            <p class="hero-edition">
                2nd Limpopo Provincial Conference
            </p>

            <h1>
                Bridging the
                <span>Digital Divide</span>
            </h1>

            <p class="hero-description">
                <?= e($eventTheme) ?>
            </p>

            <div class="hero-meta">
                <div class="hero-meta-item">
                    <div class="hero-meta-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M19 4h-1V2h-2v2H8V2H6v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V9h14z"/>
                        </svg>
                    </div>

                    <div>
                        <span>Date</span>
                        <strong>
                            23–24 July 2026
                        </strong>
                    </div>
                </div>

                <div class="hero-meta-item">
                    <div class="hero-meta-icon">
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="M12 2a7 7 0 0 0-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z"/>
                        </svg>
                    </div>

                    <div>
                        <span>Venue</span>
                        <strong>
                            The Ranch Resort, Polokwane
                        </strong>
                    </div>
                </div>
            </div>

            <div class="hero-actions">
                <a
                    href="<?= e(base_url('/register')) ?>"
                    class="btn btn-primary"
                >
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M19 3h-4.2A3 3 0 0 0 12 1a3 3 0 0 0-2.8 2H5a2 2 0 0 0-2 2v16h18V5a2 2 0 0 0-2-2zm-7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm3 14H7v-2h8zm2-4H7v-2h10zm0-4H7V7h10z"/>
                    </svg>
                    Register to Attend
                </a>

                <a
                    href="#programme"
                    class="btn btn-secondary"
                >
                    View Programme

                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="m9 18 6-6-6-6"/>
                    </svg>
                </a>
            </div>
        </div>

        <aside class="hero-card">
            <div class="hero-card-emblem">
                <svg viewBox="0 0 100 100" aria-hidden="true">
                    <path d="M50 8 84 28v44L50 92 16 72V28z"/>
                    <path d="M50 22 71 34v25L50 72 29 59V34z"/>
                </svg>
            </div>

            <p class="hero-card-label">
                Conference theme
            </p>

            <h2>
                Empowering Communities for Self-Reliance
            </h2>

            <p>
                Building a digitally inclusive province through
                traditional leadership, infrastructure, skills,
                innovation and meaningful partnerships.
            </p>

            <div class="countdown" id="conferenceCountdown">
                <div class="countdown-item">
                    <strong data-countdown-days>00</strong>
                    <span>Days</span>
                </div>

                <div class="countdown-item">
                    <strong data-countdown-hours>00</strong>
                    <span>Hours</span>
                </div>

                <div class="countdown-item">
                    <strong data-countdown-minutes>00</strong>
                    <span>Minutes</span>
                </div>

                <div class="countdown-item">
                    <strong data-countdown-seconds>00</strong>
                    <span>Seconds</span>
                </div>
            </div>
        </aside>
    </div>

    <div class="hero-bottom-wave"></div>
</section>

<section class="conference-strip">
    <div class="container conference-strip-grid">
        <article>
            <span class="strip-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M16 11c1.7 0 3-1.3 3-3s-1.3-3-3-3-3 1.3-3 3 1.3 3 3 3zM8 11c1.7 0 3-1.3 3-3S9.7 5 8 5 5 6.3 5 8s1.3 3 3 3zm8 2c-2 0-6 1-6 3v3h12v-3c0-2-4-3-6-3zM8 13c-2.3 0-6 1.2-6 3.5V19h6v-3c0-.9.3-1.7.9-2.4A7.8 7.8 0 0 0 8 13z"/>
                </svg>
            </span>

            <div>
                <strong>Traditional Authorities</strong>
                <span>Leading community participation</span>
            </div>
        </article>

        <article>
            <span class="strip-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M2 20h20v2H2zm2-2h3V9H4zm5 0h3V9H9zm5 0h3V9h-3zm5 0h2V9h-2zM2 7l10-5 10 5v2H2z"/>
                </svg>
            </span>

            <div>
                <strong>Government</strong>
                <span>Creating enabling policy and infrastructure</span>
            </div>
        </article>

        <article>
            <span class="strip-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M3 21V3h8v5h10v13zm4-4h2v-2H7zm0-4h2v-2H7zm0-4h2V7H7zm8 8h2v-2h-2zm0-4h2v-2h-2z"/>
                </svg>
            </span>

            <div>
                <strong>Industry & Academia</strong>
                <span>Driving investment and innovation</span>
            </div>
        </article>
    </div>
</section>

<section class="section about-section" id="about">
    <div class="container about-grid">
        <div class="about-visual">
            <div class="traditional-frame">
                <div class="traditional-pattern"></div>

                <img
                    src="<?= e(asset('images/programme.jpg')) ?>"
                    alt="Traditional Authorities Conference programme"
                >

                <div class="about-visual-badge">
                    <strong>2nd</strong>
                    <span>Provincial Conference</span>
                </div>
            </div>
        </div>

        <div class="section-content">
            <div class="section-kicker">
                About the Conference
            </div>

            <h2 class="section-title">
                Traditional leadership at the centre of
                <span>digital inclusion</span>
            </h2>

            <p class="section-lead">
                Rural communities continue to face challenges caused by
                limited connectivity, insufficient infrastructure, low
                digital literacy and limited access to technology-enabled
                opportunities.
            </p>

            <p>
                The conference creates a platform for traditional leaders,
                government, industry, academia and development partners to
                identify practical solutions and partnerships that ensure
                rural communities participate fully in the digital society.
            </p>

            <div class="about-points">
                <div class="about-point">
                    <span>
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m9 16.2-4.2-4.2L3.4 13.4 9 19 21 7l-1.4-1.4z"/>
                        </svg>
                    </span>

                    <div>
                        <strong>Community-led solutions</strong>
                        <p>
                            Local innovation shaped by the needs of
                            traditional communities.
                        </p>
                    </div>
                </div>

                <div class="about-point">
                    <span>
                        <svg viewBox="0 0 24 24" aria-hidden="true">
                            <path d="m9 16.2-4.2-4.2L3.4 13.4 9 19 21 7l-1.4-1.4z"/>
                        </svg>
                    </span>

                    <div>
                        <strong>Strategic partnerships</strong>
                        <p>
                            Collaboration between government, business,
                            institutions and traditional authorities.
                        </p>
                    </div>
                </div>
            </div>

            <a
                href="<?= e(base_url('/register')) ?>"
                class="text-link"
            >
                Secure your participation

                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <path d="m9 18 6-6-6-6"/>
                </svg>
            </a>
        </div>
    </div>
</section>

<section class="section objectives-section" id="objectives">
    <div class="traditional-divider"></div>

    <div class="container">
        <div class="section-heading centred">
            <div class="section-kicker">
                Conference Objectives
            </div>

            <h2 class="section-title">
                Building an inclusive
                <span>digital future</span>
            </h2>

            <p>
                From dialogue to implementation: practical outcomes that
                support infrastructure, skills, investment and sustainable
                participation.
            </p>
        </div>

        <div class="objectives-grid">
            <article class="objective-card">
                <span class="objective-number">01</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M3 3h2v18H3zm4 12h3v6H7zm5-5h3v11h-3zm5-4h3v15h-3z"/>
                    </svg>
                </div>

                <h3>Assess Progress</h3>

                <p>
                    Review advances made since the inaugural conference
                    and identify remaining barriers to digital inclusion.
                </p>
            </article>

            <article class="objective-card">
                <span class="objective-number">02</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M7 2h10v2h2a2 2 0 0 1 2 2v14H3V6a2 2 0 0 1 2-2h2zm2 2v2h6V4zm-2 7h10V9H7zm0 4h10v-2H7z"/>
                    </svg>
                </div>

                <h3>Share Solutions</h3>

                <p>
                    Showcase community-driven digital initiatives,
                    technologies, case studies and scalable innovations.
                </p>
            </article>

            <article class="objective-card">
                <span class="objective-number">03</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M12 3 1 9l11 6 9-4.9V17h2V9zm-7 9.2V17l7 4 7-4v-4.8L12 16z"/>
                    </svg>
                </div>

                <h3>Build Skills</h3>

                <p>
                    Strengthen digital literacy, local innovation,
                    entrepreneurship and access to future-ready skills.
                </p>
            </article>

            <article class="objective-card">
                <span class="objective-number">04</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M7.5 13a4.5 4.5 0 1 1 4.1-6.3L14 9.1l2.4-2.4A4.5 4.5 0 1 1 22.8 13l-8.1 8.1a1 1 0 0 1-1.4 0L5.2 13A4.5 4.5 0 0 1 7.5 13z"/>
                    </svg>
                </div>

                <h3>Strengthen Partnerships</h3>

                <p>
                    Connect traditional authorities with government,
                    business, academia, investors and development agencies.
                </p>
            </article>

            <article class="objective-card">
                <span class="objective-number">05</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M4 4h16v2H4zm0 14h16v2H4zm2-9h12v6H6zm2 2v2h8v-2z"/>
                    </svg>
                </div>

                <h3>Mobilise Investment</h3>

                <p>
                    Explore investment opportunities in broadband,
                    towers, Wi-Fi hubs and community digital infrastructure.
                </p>
            </article>

            <article class="objective-card">
                <span class="objective-number">06</span>

                <div class="objective-icon">
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M6 2h9l5 5v15H4V2zm8 1.5V8h4.5zM7 12h10v-2H7zm0 4h10v-2H7zm0 4h7v-2H7z"/>
                    </svg>
                </div>

                <h3>Provincial Roadmap</h3>

                <p>
                    Co-create resolutions and an implementation roadmap
                    for digitally inclusive traditional communities.
                </p>
            </article>
        </div>
    </div>
</section>

<section class="section outcomes-section">
    <div class="container outcomes-grid">
        <div class="outcomes-content">
            <div class="section-kicker light">
                Expected Outcomes
            </div>

            <h2>
                Turning conference dialogue into
                <span>measurable commitments</span>
            </h2>

            <p>
                The conference is designed to conclude with tangible
                commitments and an implementation-focused programme.
            </p>
        </div>

        <div class="outcomes-list">
            <article>
                <span>01</span>
                <div>
                    <strong>Implementation strategy</strong>
                    <p>
                        A clear five-to-ten-year digital inclusion roadmap.
                    </p>
                </div>
            </article>

            <article>
                <span>02</span>
                <div>
                    <strong>Investment commitments</strong>
                    <p>
                        Pledges, partnerships and infrastructure agreements.
                    </p>
                </div>
            </article>

            <article>
                <span>03</span>
                <div>
                    <strong>Pilot initiatives</strong>
                    <p>
                        Launch of targeted projects in selected communities.
                    </p>
                </div>
            </article>
        </div>
    </div>
</section>

<section class="section programme-section" id="programme">
    <div class="container">
        <div class="section-heading programme-heading">
            <div>
                <div class="section-kicker">
                    Conference Programme
                </div>

                <h2 class="section-title">
                    Dialogue, commitments and
                    <span>practical action</span>
                </h2>
            </div>

            <a
                href="<?= e(asset('images/programme.jpg')) ?>"
                target="_blank"
                class="btn btn-outline"
            >
                View Full Programme
            </a>
        </div>

        <div class="programme-layout">
            <div class="programme-timeline">

                <?php if (!empty($programme)): ?>

                    <?php foreach ($programme as $item): ?>
                        <article class="programme-item">
                            <div class="programme-time">
                                <?= e(format_time($item['start_time'])) ?>

                                <?php if (!empty($item['end_time'])): ?>
                                    <span>
                                        –
                                        <?= e(format_time($item['end_time'])) ?>
                                    </span>
                                <?php endif; ?>
                            </div>

                            <div class="programme-marker"></div>

                            <div class="programme-details">
                                <span class="programme-type">
                                    <?= e(
                                        ucfirst(
                                            str_replace(
                                                '_',
                                                ' ',
                                                $item['session_type']
                                            )
                                        )
                                    ) ?>
                                </span>

                                <h3>
                                    <?= e($item['title']) ?>
                                </h3>

                                <?php if (!empty($item['speaker_name'])): ?>
                                    <p>
                                        <?= e($item['speaker_name']) ?>
                                    </p>
                                <?php endif; ?>
                            </div>
                        </article>
                    <?php endforeach; ?>

                <?php else: ?>

                    <?php
                    $defaultProgramme = [
                        [
                            'time' => '08:30',
                            'end' => '09:00',
                            'type' => 'Opening',
                            'title' => 'Opening and Programme Introduction',
                            'speaker' => 'Programme Directors',
                        ],
                        [
                            'time' => '09:00',
                            'end' => '09:15',
                            'type' => 'Ceremonial',
                            'title' => 'Opening Prayer',
                            'speaker' => '',
                        ],
                        [
                            'time' => '09:15',
                            'end' => '09:30',
                            'type' => 'Welcome',
                            'title' => 'Acknowledgement of Guests and Purpose',
                            'speaker' => 'Linkage SA Group',
                        ],
                        [
                            'time' => '09:30',
                            'end' => '09:50',
                            'type' => 'Remarks',
                            'title' => 'Remarks and Introduction of Guest Speaker',
                            'speaker' => 'Premier',
                        ],
                        [
                            'time' => '09:50',
                            'end' => '10:35',
                            'type' => 'Keynote',
                            'title' => 'Keynote Address',
                            'speaker' => 'Deputy President',
                        ],
                        [
                            'time' => '10:35',
                            'end' => '11:35',
                            'type' => 'Panel',
                            'title' => 'Digital Inclusion Panel Discussion',
                            'speaker' => 'ICASA, DBSA, LCX, UJ, Vodacom',
                        ],
                    ];
                    ?>

                    <?php foreach ($defaultProgramme as $item): ?>
                        <article class="programme-item">
                            <div class="programme-time">
                                <?= e($item['time']) ?>
                                <span>– <?= e($item['end']) ?></span>
                            </div>

                            <div class="programme-marker"></div>

                            <div class="programme-details">
                                <span class="programme-type">
                                    <?= e($item['type']) ?>
                                </span>

                                <h3><?= e($item['title']) ?></h3>

                                <?php if ($item['speaker'] !== ''): ?>
                                    <p><?= e($item['speaker']) ?></p>
                                <?php endif; ?>
                            </div>
                        </article>
                    <?php endforeach; ?>

                <?php endif; ?>

            </div>

            <aside class="programme-poster">
                <img
                    src="<?= e(asset('images/programme.jpg')) ?>"
                    alt="Draft conference programme"
                >

                <div class="programme-poster-overlay">
                    <span>Official Programme</span>
                    <strong>23–24 July 2026</strong>
                </div>
            </aside>
        </div>
    </div>
</section>

<section class="section participants-section">
    <div class="container">
        <div class="section-heading centred">
            <div class="section-kicker">
                Who Should Attend
            </div>

            <h2 class="section-title">
                A platform for
                <span>cross-sector collaboration</span>
            </h2>
        </div>

        <div class="participants-grid">
            <article>
                <span>
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M12 2 3 7v2h18V7zm-7 9v7H3v2h18v-2h-2v-7h-2v7h-3v-7h-4v7H7v-7z"/>
                    </svg>
                </span>

                <h3>Traditional Leaders</h3>
                <p>
                    Traditional councils, district houses and the Limpopo
                    House of Traditional Leaders.
                </p>
            </article>

            <article>
                <span>
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M2 20h20v2H2zm2-2h3V9H4zm5 0h3V9H9zm5 0h3V9h-3zm5 0h2V9h-2zM2 7l10-5 10 5v2H2z"/>
                    </svg>
                </span>

                <h3>Government</h3>
                <p>
                    National, provincial, district and local government
                    departments and institutions.
                </p>
            </article>

            <article>
                <span>
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="M3 21V3h8v5h10v13zm4-4h2v-2H7zm0-4h2v-2H7zm0-4h2V7H7zm8 8h2v-2h-2zm0-4h2v-2h-2z"/>
                    </svg>
                </span>

                <h3>Industry</h3>
                <p>
                    ICT companies, mobile network operators, tower
                    companies, investors and technology providers.
                </p>
            </article>

            <article>
                <span>
                    <svg viewBox="0 0 24 24" aria-hidden="true">
                        <path d="m12 3 10 5-10 5L2 8zm-7 9.5 7 3.5 7-3.5V17l-7 4-7-4z"/>
                    </svg>
                </span>

                <h3>Academia</h3>
                <p>
                    Universities, research institutions, SETAs and skills
                    development organisations.
                </p>
            </article>
        </div>
    </div>
</section>

<section class="section partners-section" id="partners">
    <div class="container">
        <div class="section-heading centred">
            <div class="section-kicker">
                Hosts and Strategic Partners
            </div>

            <h2 class="section-title">
                Working together for
                <span>inclusive development</span>
            </h2>
        </div>

        <div class="partners-grid">

            <?php if (!empty($partners)): ?>

                <?php foreach ($partners as $partner): ?>
                    <article class="partner-card">
                        <?php if (!empty($partner['logo'])): ?>
                            <img
                                src="<?= e(upload_url($partner['logo'])) ?>"
                                alt="<?= e($partner['name']) ?>"
                            >
                        <?php else: ?>
                            <div class="partner-placeholder">
                                <?= e(
                                    mb_strtoupper(
                                        mb_substr($partner['name'], 0, 2)
                                    )
                                ) ?>
                            </div>
                        <?php endif; ?>

                        <strong><?= e($partner['name']) ?></strong>

                        <span>
                            <?= e(
                                ucwords(
                                    str_replace(
                                        '_',
                                        ' ',
                                        $partner['partner_type']
                                    )
                                )
                            ) ?>
                        </span>
                    </article>
                <?php endforeach; ?>

            <?php else: ?>

                <?php
                $defaultPartners = [
                    'Linkage SA Group',
                    'Limpopo Provincial Government',
                    'Limpopo Connexion',
                    'COGHSTA',
                ];
                ?>

                <?php foreach ($defaultPartners as $partner): ?>
                    <article class="partner-card">
                        <div class="partner-placeholder">
                            <?= e(
                                mb_strtoupper(
                                    mb_substr($partner, 0, 2)
                                )
                            ) ?>
                        </div>

                        <strong><?= e($partner) ?></strong>
                        <span>Strategic Partner</span>
                    </article>
                <?php endforeach; ?>

            <?php endif; ?>

        </div>
    </div>
</section>

<section class="registration-cta">
    <div class="registration-cta-pattern"></div>

    <div class="container registration-cta-inner">
        <div>
            <span class="cta-kicker">
                Registration is open
            </span>

            <h2>
                Join the conversation shaping rural
                digital transformation.
            </h2>

            <p>
                Register to participate in the 2nd Provincial Conference
                of Traditional Authorities, Government and Industry.
            </p>
        </div>

        <a
            href="<?= e(base_url('/register')) ?>"
            class="btn btn-light"
        >
            Register Now

            <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="m9 18 6-6-6-6"/>
            </svg>
        </a>
    </div>
</section>

<?php require APP_PATH . '/Views/public/layouts/footer.php'; ?>