<?php
/**
 * Template Name: Domain Registration Page
 * Description: Template for displaying domain registration and pricing with AOS animations and security tokens
 */

get_header();
include get_template_directory() . '/inc/menus/menu.php';
?>
<main role="main">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    
    <section class="kpy-hero hosting-hero <?php echo esc_attr(get_post_type()); ?>-hero" 
             data-aos="fade-in" 
             data-aos-duration="1000" 
             data-aos-offset="0">
        <div class="kpy-hero-black-bg"></div>
        <canvas class="kpy-wave-canvas" id="kpyWaveCanvas"></canvas>
        <div class="kpy-grid-lines"></div>
        <div class="kpy-hero-overlay">
            <div class="container">
                <div class="columns is-vcentered">
                    <div class="column is-6">
                        <div class="kpy-hero-badge" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
                            <i class="bi bi-star-fill"></i>
                            <?php echo esc_html(get_post_meta(get_the_ID(), 'hero_eyebrow', true) ?: 'LWEGATECH LIMITED'); ?>
                        </div>
                        <h1 class="kpy-hero-title" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200"><?php the_title(); ?></h1>
                        <p class="kpy-hero-subtitle" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
                            <?php echo esc_html(has_excerpt() ? wp_trim_words(get_the_excerpt(), 20, '...') : wp_trim_words(get_the_content(), 20, '...')); ?>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Domain Extensions Section -->
    <section class="domains-section">
        <div class="container">
            <div class="kpy-sg-header" data-aos="fade-up" data-aos-duration="800" data-aos-offset="100">
                <div class="kpy-sg-title-container">
                    <div class="kpy-sg-title-bg" aria-hidden="true">Domain Extensions</div>
                    <h2 class="kpy-sg-title">
                        <span class="kpy-sg-title-red">Our</span>
                        <span class="kpy-sg-title-white">Best Selection</span>
                    </h2>
                </div>
                <p class="section-description" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">Choose a domain name that will represent you or that your customers will be proud of! By registering a domain name, you are establishing exclusive ownership of a particular name, meaning nobody else can use it while registered. Domain names can be used for both Web sites and email, allowing your visitors to more easily locate your site.</p>
            </div>
            
            <div class="domains-grid">
                <?php 
                $domains = [
                    ['icon' => 'bi bi-globe2', 'ext' => '.com', 'desc' => 'Most popular top-level domain extension for businesses', 'price' => 95000],
                    ['icon' => 'bi bi-building', 'ext' => '.org', 'desc' => 'Used by non-profit, educational, and public-interest organizations.', 'price' => 95000],
                    ['icon' => 'bi bi-wifi', 'ext' => '.net', 'desc' => 'Widely used for technology-related ventures and networks', 'price' => 95000],
                    ['icon' => 'bi bi-briefcase', 'ext' => '.biz', 'desc' => 'For commercial, business-oriented websites and online ventures.', 'price' => 95000],
                    ['icon' => 'bi bi-info-circle', 'ext' => '.info', 'desc' => 'informative top-level domain ideal for informational websites.', 'price' => 95000],
                    ['icon' => 'bi bi-flag', 'ext' => '.ug', 'desc' => 'Very short and ideal for businesses established in Uganda.', 'price' => 265000],
                    ['icon' => 'bi bi-building', 'ext' => '.co.ug', 'desc' => 'An alternative on .ug and very good for businesses in Uganda', 'price' => 265000],
                    ['icon' => 'bi bi-heart', 'ext' => '.org.ug', 'desc' => 'Mainly dedicated to non-profit organizations', 'price' => 265000],
                    ['icon' => 'bi bi-heart-fill', 'ext' => '.or.ug', 'desc' => 'For Non-profit organizations in Uganda', 'price' => 95000],
                    ['icon' => 'bi bi-bank2', 'ext' => '.go.ug', 'desc' => 'Best recommended for Uganda government bodies & ministries', 'price' => 425000],
                    ['icon' => 'bi bi-briefcase', 'ext' => '.co', 'desc' => 'Ideal alternative to .com for businesses', 'price' => 160000],
                    ['icon' => 'bi bi-flag-fill', 'ext' => '.us', 'desc' => 'Recommended for US based firms. Go for a .us domain.', 'price' => 160000],
                ];
                
                foreach ($domains as $index => $domain):
                    $delay = min(100 + ($index * 50), 600);
                    $domain_token = bin2hex(random_bytes(24));
                    $clean_ext = str_replace('.', '', $domain['ext']);
                ?>
                <div class="domain-card" 
                     data-aos="fade-up" 
                     data-aos-duration="600" 
                     data-aos-delay="<?php echo $delay; ?>" 
                     data-aos-offset="80"
                     data-aos-easing="ease-out">
                    <div class="domain-icon"><i class="<?php echo $domain['icon']; ?>"></i></div>
                    <div class="domain-extension"><?php echo $domain['ext']; ?></div>
                    <div class="domain-description"><?php echo $domain['desc']; ?></div>
                    <div class="domain-price"><?php echo format_currency($domain['price']); ?><span>/yr</span></div>
                   
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- FAQs Section with Schema -->
    <section class="faqs-section">
        <div class="container">
            <div class="kpy-sg-header" data-aos="fade-up" data-aos-duration="800" data-aos-offset="100">
                <div class="kpy-sg-title-container">
                    <div class="kpy-sg-title-bg" aria-hidden="true">Domain Registration</div>
                    <h2 class="kpy-sg-title">
                        <span class="kpy-sg-title-red">About Domain </span>
                        <span class="kpy-sg-title-white">FAQs</span>
                    </h2>
                </div>
            </div>
            
            <div class="faqs-grid" itemscope itemtype="https://schema.org/FAQPage">
                <?php 
                $faqs = [
                    ['question' => 'What is a domain name?', 'answer' => 'A domain name is your website\'s unique address on the internet (like yourbusiness.com). It helps people find your website easily and establishes your brand online. Domain names are registered on a first-come, first-served basis and are renewed annually.'],
                    ['question' => 'How do I register a domain name?', 'answer' => 'Simply search for your desired domain name using our domain search tool above. If available, you can register it instantly. If not, we\'ll suggest alternative options. Registration is quick and you\'ll have ownership as long as you renew it annually.'],
                    ['question' => 'What\'s included with my domain registration?', 'answer' => 'Each domain registration includes free DNS management, domain forwarding, email forwarding, and a free SSL certificate when hosted with Lwegatech. You also get 24/7 support and an easy-to-use control panel to manage your domain settings.'],
                    ['question' => 'Can I transfer my existing domain to Lwegatech?', 'answer' => 'Yes! You can transfer your existing domain to Lwegatech at any time. We offer free domain transfers with hosting purchase. The process is simple - just unlock your domain, get the authorization code from your current registrar, and initiate the transfer with us.'],
                    ['question' => 'What is the difference between .com, .ug, and other extensions?', 'answer' => 'Domain extensions (TLDs) indicate your website\'s purpose or location. .com is global and business-focused, .org is for organizations, .ug is specific to Uganda, .co.ug for Ugandan businesses, .go.ug for government entities. Choose based on your target audience and business type.'],
                    ['question' => 'How long does domain registration take?', 'answer' => 'Domain registration is instant for most extensions. Once you complete the registration process and payment, your domain is immediately registered in your name and available for use. Some country-specific domains like .ug may take 24-48 hours for registration to complete.'],
                    ['question' => 'Can I get a refund if I change my mind?', 'answer' => 'Domain registrations are final sales due to ICANN regulations. However, we offer a 5-day grace period during which you may request a refund for certain extensions. We recommend carefully selecting your domain name before purchase.'],
                    ['question' => 'Do I need hosting to register a domain?', 'answer' => 'No, you can register a domain without hosting. You can park your domain with us until you\'re ready to build your website. When you\'re ready, you can easily add hosting to make your website live.'],
                ];
                
                foreach ($faqs as $index => $faq):
                    $delay = min(100 + ($index * 50), 500);
                ?>
                <div class="faq-item" 
                     data-aos="fade-up" 
                     data-aos-duration="600" 
                     data-aos-delay="<?php echo $delay; ?>" 
                     data-aos-offset="50"
                     itemscope itemprop="mainEntity" 
                     itemtype="https://schema.org/Question">
                    <div class="faq-question" itemprop="name">
                        <i class="bi bi-question-circle-fill"></i>
                        <span><?php echo $faq['question']; ?></span>
                        <i class="bi bi-chevron-down faq-toggle"></i>
                    </div>
                    <div class="faq-answer" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
                        <div itemprop="text">
                            <p><?php echo $faq['answer']; ?></p>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>
    
    <?php endwhile; endif; ?>
</main>

<?php get_footer(); ?>



<script>
// FAQ Accordion Functionality
document.addEventListener('DOMContentLoaded', function() {
    const faqItems = document.querySelectorAll('.faq-item');
    faqItems.forEach(item => {
        const question = item.querySelector('.faq-question');
        if (question) {
            question.addEventListener('click', () => {
                item.classList.toggle('active');
            });
        }
    });
    
    // Initialize AOS
    if (typeof AOS !== 'undefined') {
        AOS.init({
            duration: 800,
            offset: 100,
            easing: 'ease-in-out',
            once: true,
            mirror: false,
            disable: window.innerWidth < 768 ? 'phone' : false
        });
    }
});

// Refresh AOS on resize
let aosResizeTimer;
window.addEventListener('resize', function() {
    clearTimeout(aosResizeTimer);
    aosResizeTimer = setTimeout(function() {
        if (typeof AOS !== 'undefined') {
            AOS.refresh();
        }
    }, 250);
});

// Wave Canvas Animation
(function() {
    var canvas = document.getElementById('kpyWaveCanvas');
    if (!canvas) return;
    var ctx = canvas.getContext('2d');

    function resize() {
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }
    resize();
    window.addEventListener('resize', resize);

    var RIBBONS = 9;
    var WAVES = 3;
    var t = 0;
    var ribbons = [];

    for (var r = 0; r < RIBBONS; r++) {
        var isGhost = r >= 6;
        ribbons.push({
            yBase: 0.08 + (r / (RIBBONS - 1)) * 0.84,
            amp: isGhost ? (0.03 + Math.random() * 0.05) : (0.07 + Math.random() * 0.13),
            freq: 0.5 + Math.random() * 1.0,
            speed: 0.003 + Math.random() * 0.007,
            phase: Math.random() * Math.PI * 2,
            thickness: isGhost ? (0.4 + Math.random() * 0.8) : (0.8 + Math.random() * 3.0),
            opacity: isGhost ? (0.06 + Math.random() * 0.10) : (0.15 + Math.random() * 0.35),
            lum: isGhost ? 30 : (35 + Math.floor(Math.random() * 25)),
            sat: 85 + Math.floor(Math.random() * 15)
        });
    }

    function drawRibbon(rb, t) {
        var W = canvas.width;
        var H = canvas.height;
        ctx.beginPath();
        var steps = 250;
        for (var i = 0; i <= steps; i++) {
            var xRatio = i / steps;
            var x = xRatio * W;
            var y = rb.yBase * H;
            for (var w = 0; w < WAVES; w++) {
                var wFreq = rb.freq * (w + 1) * 0.55;
                var wAmp = rb.amp * H / (w + 1);
                var wSpeed = rb.speed * (w % 2 === 0 ? 1 : -0.65);
                y += Math.sin(xRatio * wFreq * Math.PI * 2 + t * wSpeed * 60 + rb.phase + w * 1.4) * wAmp;
            }
            if (i === 0) ctx.moveTo(x, y);
            else ctx.lineTo(x, y);
        }
        var grad = ctx.createLinearGradient(0, 0, W, 0);
        grad.addColorStop(0, 'hsla(0,' + rb.sat + '%,' + rb.lum + '%,0)');
        grad.addColorStop(0.12, 'hsla(0,' + rb.sat + '%,' + rb.lum + '%,' + (rb.opacity * 0.5) + ')');
        grad.addColorStop(0.45, 'hsla(0,' + rb.sat + '%,' + (rb.lum + 18) + '%,' + rb.opacity + ')');
        grad.addColorStop(0.72, 'hsla(0,' + rb.sat + '%,' + (rb.lum + 22) + '%,' + (rb.opacity * 1.15) + ')');
        grad.addColorStop(0.88, 'hsla(0,' + rb.sat + '%,' + rb.lum + '%,' + (rb.opacity * 0.6) + ')');
        grad.addColorStop(1, 'hsla(0,' + rb.sat + '%,' + rb.lum + '%,0)');
        ctx.strokeStyle = grad;
        ctx.lineWidth = rb.thickness;
        ctx.shadowColor = 'rgba(200, 0, 12, 0.55)';
        ctx.shadowBlur = rb.thickness > 1.5 ? 22 : 8;
        ctx.stroke();
        ctx.shadowBlur = 0;
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        t += 0.016;
        for (var i = 0; i < ribbons.length; i++) {
            drawRibbon(ribbons[i], t);
        }
        requestAnimationFrame(draw);
    }
    draw();
})();
</script>