<?php
/**
 * Tech interface hero (FINAL VERSION)
 * Static title with red highlighted part
 * Image column wider than content column
 * Negative margin-top on image (pulls image up)
 * Content pushed down with reduced size
 * Double stylish borders using :root variables
 * Added AOS animations
 */

$tech_query = new WP_Query([
    'post_type'      => 'tech_slides',
    'posts_per_page' => 1,
]);

$title = '';
$description = '';
$backgroundImg = '';

if ($tech_query->have_posts()) {
    $tech_query->the_post();

    $title        = get_the_title();
    $description  = get_the_excerpt();
    $backgroundImg = get_the_post_thumbnail_url(get_the_ID(), 'full');

    wp_reset_postdata();
}

// Split title into two parts: first word/phrase in red, rest normal
// You can customize this logic - here we make the first 40% of characters red
$title_length = strlen($title);
$red_part_length = ceil($title_length * 0.5); // First 40% of title is red
$red_title = substr($title, 0, $red_part_length);
$normal_title = substr($title, $red_part_length);
?>

<!-- AOS CSS and JS requirements - Add to your theme's functions.php or header/footer -->
<!-- 
Requirements to add to your theme:

1. Add to functions.php:
   function add_aos_scripts() {
       // AOS CSS
       wp_enqueue_style('aos-css', 'https://unpkg.com/aos@next/dist/aos.css', array(), '2.3.1');
       
       // AOS JavaScript
       wp_enqueue_script('aos-js', 'https://unpkg.com/aos@next/dist/aos.js', array(), '2.3.1', true);
       
       // Initialize AOS
       wp_add_inline_script('aos-js', 'document.addEventListener("DOMContentLoaded", function() { AOS.init({ duration: 800, easing: "ease-in-out", once: true, offset: 100 }); });');
   }
   add_action('wp_enqueue_scripts', 'add_aos_scripts');

2. OR add directly to your HTML head:
   <link href="https://unpkg.com/aos@next/dist/aos.css" rel="stylesheet" />
   <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
   <script>AOS.init({ duration: 800, easing: 'ease-in-out', once: true, offset: 100 });</script>
-->

<div class="tech-interface">

    <!-- ✅ BACKGROUND SVGs (network pattern) -->
    <div class="svg-background">
        <svg class="network-svg network-1" viewBox="0 0 300 300" data-aos="fade-in" data-aos-duration="1000">
            <circle cx="150" cy="150" r="100" stroke="currentColor" fill="none" stroke-width="2"/>
        </svg>

        <svg class="network-svg network-2" viewBox="0 0 300 300" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="200">
            <path d="M50 150 L150 50 L250 150 L150 250 Z" stroke="currentColor" fill="none" stroke-width="2"/>
        </svg>

        <svg class="network-svg network-3" viewBox="0 0 300 300" data-aos="fade-in" data-aos-duration="1000" data-aos-delay="400">
            <path d="M0 150 L300 150 M150 0 L150 300" stroke="currentColor" fill="none" stroke-width="2"/>
        </svg>
    </div>

    <div class="hero-inner">

        <!-- LEFT CONTENT - pushed down with margin-top, reduced size -->
        <div class="hero-left" 
             data-aos="fade-right" 
             data-aos-duration="800" 
             data-aos-offset="200" 
             data-aos-easing="ease-in-sine">
            <h1>
                <span class="title-red" data-aos="zoom-in" data-aos-duration="600" data-aos-delay="300"><?= esc_html($red_title) ?></span>
                <span class="title-normal" data-aos="zoom-in" data-aos-duration="600" data-aos-delay="500"><?= esc_html($normal_title) ?></span>
            </h1>

            <p data-aos="fade-up" data-aos-duration="700" data-aos-delay="600"><?= esc_html($description) ?></p>

            <div class="hero-buttons">
                <a href="<?php echo kipya_url_for_path('our-services'); ?>" 
                   class="btn primary"
                   data-aos="fade-up" 
                   data-aos-duration="600" 
                   data-aos-delay="700"
                   data-aos-offset="50">
                    How it works?
                </a>
                <a href="<?php echo kipya_url_for_path('about-us'); ?>" 
                   class="btn link"
                   data-aos="fade-up" 
                   data-aos-duration="600" 
                   data-aos-delay="800"
                   data-aos-offset="50">
                    Read full story
                </a>
            </div>
        </div>

        <!-- RIGHT MEDIA - WIDER COLUMN with DOUBLE STYLISH BORDERS -->
        <!-- Negative margin-top pulls image upward -->
        <div class="hero-right" 
             data-aos="fade-left" 
             data-aos-duration="900" 
             data-aos-offset="150" 
             data-aos-easing="ease-out-cubic">
            <div class="blob-media" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="200">
                <?php if ($backgroundImg): ?>
                    <img src="<?= esc_url($backgroundImg) ?>" alt="<?= esc_attr($title) ?>" >
                <?php else: ?>
                    <!-- Fallback placeholder with elegant gradient -->
                    <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Cdefs%3E%3ClinearGradient id='grad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23811411'/%3E%3Cstop offset='100%25' stop-color='%23c0392b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='800' height='600' fill='url(%23grad)'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='%23ffffff' font-size='32' font-family='montserrat'%3ETech Innovation%3C/text%3E%3C/svg%3E" alt="Tech placeholder" data-aos="flip-left" data-aos-duration="1200" data-aos-delay="400">
                <?php endif; ?>
            </div>
        </div>

    </div>
</div>