<?php
require_once __DIR__ . '/includes/functions.php';
$settings = getSettings();

$pageTitle = $settings['seo_about_title'];
$pageDesc = $settings['seo_about_desc'];

include __DIR__ . '/includes/header.php';
?>

<!-- Page Hero -->
<section class="page-hero">
    <div class="container">
        <span class="section-label">Our Story</span>
        <h1 class="section-title">About The Expo</h1>
        <nav class="breadcrumb-nav mt-2">
            <a href="<?php echo BASE_URL; ?>/index.php">Home</a>
            <span>/</span>
            About
        </nav>
    </div>
</section>

<!-- About Content -->
<section class="section">
    <div class="container">
        <div class="row g-4 align-items-start">
            <div class="col-lg-7 reveal">
                <h2 style="font-family:var(--font-heading);font-size:1.25rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1rem;">Ethiopia's Premier Food &amp; Beverage Exhibition</h2>
                <p style="font-size:0.95rem;color:var(--text-body);line-height:1.8;"><?php echo nl2br(e($settings['about_text'])); ?></p>
            </div>
            <div class="col-lg-5 reveal">
                <div class="section-card">
                    <h3 style="font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1.25rem;">Quick Facts</h3>
                    <div class="row g-3">
                        <div class="col-6">
                            <div class="stat-number" data-count-up="16">0</div>
                            <div class="stat-label">Editions Held</div>
                        </div>
                        <div class="col-6">
                            <div class="stat-number" data-count-up="500" data-suffix="+">0</div>
                            <div class="stat-label">Exhibitors</div>
                        </div>
                        <div class="col-6">
                            <div class="stat-number" data-count-up="40" data-suffix="+">0</div>
                            <div class="stat-label">Countries</div>
                        </div>
                        <div class="col-6">
                            <div class="stat-number" data-count-up="15000" data-suffix="+">0</div>
                            <div class="stat-label">Trade Visitors</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Event Details Cards -->
<section class="section-alt">
    <div class="container">
        <div class="row g-4 reveal">
            <div class="col-lg-3 col-md-6">
                <div class="section-card text-center">
                    <div style="font-size:2.5rem;margin-bottom:0.75rem;">📅</div>
                    <h4 style="font-family:var(--font-heading);font-size:0.9rem;text-transform:uppercase;">Date</h4>
                    <p style="font-size:0.88rem;color:var(--text-secondary);margin:0;">16–18 November 2026</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="section-card text-center">
                    <div style="font-size:2.5rem;margin-bottom:0.75rem;">📍</div>
                    <h4 style="font-family:var(--font-heading);font-size:0.9rem;text-transform:uppercase;">Venue</h4>
                    <p style="font-size:0.88rem;color:var(--text-secondary);margin:0;">Millennium Hall<br>Addis Ababa</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="section-card text-center">
                    <div style="font-size:2.5rem;margin-bottom:0.75rem;">🌍</div>
                    <h4 style="font-family:var(--font-heading);font-size:0.9rem;text-transform:uppercase;">Nations</h4>
                    <p style="font-size:0.88rem;color:var(--text-secondary);margin:0;">40+ Participating Countries</p>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="section-card text-center">
                    <div style="font-size:2.5rem;margin-bottom:0.75rem;">🏢</div>
                    <h4 style="font-family:var(--font-heading);font-size:0.9rem;text-transform:uppercase;">Organizer</h4>
                    <p style="font-size:0.88rem;color:var(--text-secondary);margin:0;">Prime Expo FZE<br>INEXPO GROUP</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Organiser Info -->
<section class="section" id="organiser">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-7 reveal">
                <span class="section-label">Organizer</span>
                <h2 class="section-title">INEXPO GROUP</h2>
                <p style="font-size:0.95rem;color:var(--text-body);line-height:1.8;">
                    INEXPO GROUP is a leading international exhibition organizer with over two decades of experience in developing trade shows across emerging markets. Headquartered in Dubai, UAE, the group operates through its subsidiaries including Prime Expo FZE and IN Exhibition ORG and Mgmt LLC.
                </p>
                <p style="font-size:0.95rem;color:var(--text-body);line-height:1.8;">
                    With a portfolio spanning food, agriculture, hospitality, and industrial sectors, INEXPO GROUP has successfully organized exhibitions in Kenya, Ethiopia, Tanzania, Ghana, and other key African markets, connecting international suppliers with local buyers and decision-makers.
                </p>
                <p style="font-size:0.95rem;color:var(--text-body);line-height:1.8;">
                    The Ethiopia Food Expo is the group's flagship event in the Horn of Africa, consistently attracting hundreds of exhibitors and thousands of trade visitors each edition.
                </p>
            </div>
            <div class="col-lg-5 reveal">
                <div class="section-card">
                    <h3 style="font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1.25rem;">Contact Information</h3>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        <span><?php echo e($settings['address']); ?></span>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                        <a href="tel:<?php echo e(preg_replace('/[^0-9+]/','',$settings['phone'])); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['phone']); ?></a>
                    </div>
                    <div class="footer-contact-item" style="color:var(--text-body);">
                        <svg width="16" height="16" fill="none" stroke="var(--green)" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
                        <a href="mailto:<?php echo e($settings['email']); ?>" style="color:var(--text-body);text-decoration:none;"><?php echo e($settings['email']); ?></a>
                    </div>
                    <div class="d-flex gap-3 mt-3">
                        <?php if(!empty($settings['facebook'])): ?><a href="<?php echo e($settings['facebook']); ?>" target="_blank" style="color:var(--text-secondary);"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a><?php endif; ?>
                        <?php if(!empty($settings['linkedin'])): ?><a href="<?php echo e($settings['linkedin']); ?>" target="_blank" style="color:var(--text-secondary);"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg></a><?php endif; ?>
                        <?php if(!empty($settings['youtube'])): ?><a href="<?php echo e($settings['youtube']); ?>" target="_blank" style="color:var(--text-secondary);"><svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19.13C5.12 19.56 12 19.56 12 19.56s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.43z"/><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"/></svg></a><?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Venue Highlights -->
<section class="section-alt" id="venue">
    <div class="container">
        <div class="text-center mb-4 reveal">
            <span class="section-label">The Venue</span>
            <h2 class="section-title">Millennium Hall</h2>
            <p class="section-subtitle mx-auto">Addis Ababa's premier exhibition and conference centre</p>
        </div>
        <div class="row g-4 mb-4">
            <div class="col-md-3 col-6 reveal">
                <div class="venue-stat">
                    <div class="stat-number" data-count-up="87000" data-suffix="">0</div>
                    <div class="stat-label">Sqm Total Grounds</div>
                </div>
            </div>
            <div class="col-md-3 col-6 reveal">
                <div class="venue-stat">
                    <div class="stat-number" data-count-up="19000" data-suffix="">0</div>
                    <div class="stat-label">Sqm Indoor Space</div>
                </div>
            </div>
            <div class="col-md-3 col-6 reveal">
                <div class="venue-stat">
                    <div class="stat-number" data-count-up="6">0</div>
                    <div class="stat-label">Conference Rooms</div>
                </div>
            </div>
            <div class="col-md-3 col-6 reveal">
                <div class="venue-stat">
                    <div class="stat-number" data-count-up="15" data-suffix=" min">0</div>
                    <div class="stat-label">From Airport</div>
                </div>
            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-6 reveal">
                <div class="section-card">
                    <h3 style="font-family:var(--font-heading);font-size:1rem;text-transform:uppercase;color:var(--text-dark);margin-bottom:1rem;">Location</h3>
                    <p style="font-size:0.9rem;color:var(--text-body);line-height:1.7;margin:0;">
                        Millennium Hall is located in the Akaki-Kality sub-city of Addis Ababa, just 15 minutes from Bole International Airport. The venue offers extensive parking, modern conference facilities, and is easily accessible from the city centre and major hotels.
                    </p>
                </div>
            </div>
            <div class="col-lg-6 reveal">
                <div style="border-radius:6px;overflow:hidden;height:100%;min-height:220px;">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3941.2!2d38.7888!3d9.0054!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zOcKwMDAnMTkuNCJOIDM4wrA0NycxOS43IkU!5e0!3m2!1sen!2s!4v1"
                        width="100%" height="100%" style="border:0;min-height:220px;"
                        allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Banner -->
<section class="cta-banner">
    <div class="container reveal">
        <span class="section-label" style="color:rgba(255,255,255,0.7);border-left-color:rgba(255,255,255,0.4);">Join Us</span>
        <h2 class="cta-title">Be Part of Ethiopia Food Expo 2026</h2>
        <p class="cta-sub">Book your stand today and showcase your products to East Africa's most important food and beverage buyers.</p>
        <div>
            <a href="<?php echo BASE_URL; ?>/register.php" class="btn-white me-2 mb-2">Book a Stand</a>
            <a href="<?php echo BASE_URL; ?>/contact.php" class="btn-red-outline mb-2">Contact Us</a>
        </div>
    </div>
</section>

<?php include __DIR__ . '/includes/footer.php'; ?>
