{% extends "base.html" %}

{% block title %}Home{% endblock %}

{% block content %}

<!-- Hero Section -->
<section class="relative overflow-hidden" style="min-height: 88vh; display: flex; align-items: center;">
    <!-- Background glow orbs -->
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-[-100px] left-1/2 -translate-x-1/2 w-[700px] h-[500px] rounded-full"
             style="background: radial-gradient(ellipse, rgba(92,184,44,0.12) 0%, transparent 70%); filter: blur(40px);"></div>
        <div class="absolute bottom-[-50px] right-[-100px] w-[400px] h-[400px] rounded-full"
             style="background: radial-gradient(ellipse, rgba(247,147,30,0.06) 0%, transparent 70%); filter: blur(40px);"></div>
        <div class="absolute top-1/3 left-[-50px] w-[300px] h-[300px] rounded-full"
             style="background: radial-gradient(ellipse, rgba(92,184,44,0.07) 0%, transparent 70%); filter: blur(30px);"></div>
    </div>
    <!-- Dot grid -->
    <div class="absolute inset-0 dot-grid opacity-40 pointer-events-none"></div>

    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
        <!-- Pre-heading badge -->
        <div class="inline-flex items-center gap-2 badge badge-primary mb-8">
            <svg class="w-3 h-3 text-primary-400" fill="currentColor" viewBox="0 0 8 8">
                <circle cx="4" cy="4" r="3"/>
            </svg>
            Software Engineering &amp; Consulting
        </div>

        <h1 class="font-display text-5xl md:text-7xl font-extrabold leading-[1.05] tracking-tight mb-7"
            style="font-family: 'Syne', sans-serif;">
            Build Better Software,<br>
            <span class="gradient-text">Faster.</span>
        </h1>

        <p class="text-lg md:text-xl max-w-2xl mx-auto mb-10" style="color: #8b8ca8; line-height: 1.7;">
            We transform ideas into powerful, scalable software.
            From concept to deployment — your trusted development partner.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ url_for('contact') }}" class="btn btn-primary px-8 py-3.5 text-base">
                Get Started
                <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
            <a href="{{ url_for('services') }}" class="btn btn-outline px-8 py-3.5 text-base">
                Our Services
            </a>
        </div>

        <!-- Social proof strip -->
        <div class="mt-16 flex flex-wrap items-center justify-center gap-x-10 gap-y-4">
            <div class="text-center">
                <div class="text-3xl font-bold gradient-text-violet" style="font-family: 'Syne', sans-serif;">50+</div>
                <div class="text-xs mt-1" style="color: #6b6b8a;">Projects Shipped</div>
            </div>
            <div class="w-px h-8 hidden sm:block" style="background: rgba(255,255,255,0.08);"></div>
            <div class="text-center">
                <div class="text-3xl font-bold gradient-text-violet" style="font-family: 'Syne', sans-serif;">30+</div>
                <div class="text-xs mt-1" style="color: #6b6b8a;">Happy Clients</div>
            </div>
            <div class="w-px h-8 hidden sm:block" style="background: rgba(255,255,255,0.08);"></div>
            <div class="text-center">
                <div class="text-3xl font-bold gradient-text-violet" style="font-family: 'Syne', sans-serif;">5+</div>
                <div class="text-xs mt-1" style="color: #6b6b8a;">Years Experience</div>
            </div>
            <div class="w-px h-8 hidden sm:block" style="background: rgba(255,255,255,0.08);"></div>
            <div class="text-center">
                <div class="text-3xl font-bold gradient-text-violet" style="font-family: 'Syne', sans-serif;">99%</div>
                <div class="text-xs mt-1" style="color: #6b6b8a;">Satisfaction Rate</div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="py-24 relative">
    <div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <div class="badge badge-primary mb-5">Why DirectLX</div>
            <h2 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
                Engineering excellence,<br><span class="gradient-text">by design</span>
            </h2>
            <p class="max-w-xl mx-auto text-base" style="color: #8b8ca8;">
                We combine deep technical expertise with a genuine understanding of business needs to deliver solutions that make a real difference.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Card 1 -->
            <div class="card-hover group p-8">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-6"
                     style="background: rgba(92,184,44,0.12); border: 1px solid rgba(92,184,44,0.25);">
                    <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Fast Delivery</h3>
                <p class="text-sm leading-relaxed" style="color: #8b8ca8;">
                    Agile methodology and modern tooling ensure rapid iteration without sacrificing quality or reliability.
                </p>
            </div>

            <!-- Card 2 -->
            <div class="card-hover group p-8">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-6"
                     style="background: rgba(247,147,30,0.08); border: 1px solid rgba(247,147,30,0.2);">
                    <svg class="w-6 h-6 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Secure &amp; Reliable</h3>
                <p class="text-sm leading-relaxed" style="color: #8b8ca8;">
                    Security-first architecture with industry best practices and thorough testing at every stage.
                </p>
            </div>

            <!-- Card 3 -->
            <div class="card-hover group p-8">
                <div class="w-12 h-12 rounded-xl flex items-center justify-center mb-6"
                     style="background: rgba(92,184,44,0.12); border: 1px solid rgba(92,184,44,0.25);">
                    <svg class="w-6 h-6 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Expert Team</h3>
                <p class="text-sm leading-relaxed" style="color: #8b8ca8;">
                    Seasoned engineers passionate about clean code, scalable architecture, and exceptional outcomes.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Latest Blog Posts -->
<section class="py-24" style="background: #0a0a14;">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-end mb-12">
            <div>
                <div class="badge badge-primary mb-4">From the Blog</div>
                <h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Latest insights</h2>
            </div>
            <a href="{{ url_for('blog_index') }}" class="text-sm font-medium text-primary-400 hover:text-primary-300 transition-colors hidden sm:flex items-center gap-1">
                All posts
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
            </a>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            {% if latest_posts %}
                {% for post in latest_posts %}
                <article class="card-hover group flex flex-col p-7">
                    <div class="text-xs mb-4 font-medium tracking-wide" style="color: #6b6b8a;">{{ post.created_at.strftime('%B %d, %Y') }}</div>
                    <h3 class="text-lg font-bold mb-3 leading-snug" style="font-family: 'Syne', sans-serif;">
                        <a href="{{ url_for('blog_post', slug=post.slug) }}" class="text-gray-100 hover:text-primary-300 transition-colors">
                            {{ post.title }}
                        </a>
                    </h3>
                    <p class="text-sm leading-relaxed mb-6 flex-grow" style="color: #8b8ca8;">
                        {{ post.excerpt or post.content[:140] }}…
                    </p>
                    <a href="{{ url_for('blog_post', slug=post.slug) }}" class="text-sm font-semibold text-primary-400 hover:text-primary-300 flex items-center gap-1 transition-colors">
                        Read more
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                        </svg>
                    </a>
                </article>
                {% endfor %}
            {% else %}
                <div class="col-span-3 text-center py-12" style="color: #6b6b8a;">
                    <p>No posts yet — check back soon.</p>
                </div>
            {% endif %}
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-24 relative overflow-hidden">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute inset-0 dot-grid opacity-30"></div>
        <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px]"
             style="background: radial-gradient(ellipse, rgba(92,184,44,0.15) 0%, transparent 70%); filter: blur(30px);"></div>
    </div>
    <div class="relative max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="inline-block p-px rounded-2xl mb-10"
             style="background: linear-gradient(135deg, rgba(92,184,44,0.4), rgba(247,147,30,0.2));">
            <div class="rounded-2xl px-10 py-12" style="background: #0f0f1a;">
                <h2 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
                    Ready to start<br><span class="gradient-text">your project?</span>
                </h2>
                <p class="text-base mb-8" style="color: #8b8ca8;">
                    Let's discuss how we can help bring your vision to life. Free consultation, no strings attached.
                </p>
                <a href="{{ url_for('contact') }}" class="btn btn-primary px-10 py-3.5 text-base">
                    Get in Touch
                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>

{% endblock %}