{% extends "base.html" %}

{% block title %}About Us{% endblock %}

{% block content %}

<!-- Hero -->
<section class="relative py-28 overflow-hidden">
    <div class="absolute inset-0 dot-grid opacity-30 pointer-events-none"></div>
    <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] pointer-events-none"
         style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>

    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <div class="badge badge-primary mb-6">Our Story</div>
        <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
            About <span class="gradient-text">DirectLX</span>
        </h1>
        <p class="text-lg max-w-2xl mx-auto" style="color: #8b8ca8;">
            A team of passionate engineers dedicated to building software that genuinely makes a difference.
        </p>
    </div>
</section>

<!-- Story + Values -->
<section class="py-20" style="background: #0a0a14;">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">
            <div>
                <h2 class="text-3xl font-bold mb-6" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Our Story</h2>
                <div class="space-y-4 text-base leading-relaxed" style="color: #8b8ca8;">
                    <p>
                        DirectLX was founded with a simple mission: help businesses succeed through technology. We believe great software isn't just about code — it's about understanding problems and crafting solutions that truly work.
                    </p>
                    <p>
                        Over the years, we've had the privilege of working with startups, growing businesses, and established enterprises across various industries. Each project has taught us something new and reinforced our commitment to excellence.
                    </p>
                    <p>
                        Today, we continue to push boundaries, embrace new technologies, and deliver solutions that exceed expectations. Our journey is far from over — and we're excited about what comes next.
                    </p>
                </div>
            </div>

            <!-- Values card -->
            <div class="card p-8" style="border: 1px solid rgba(92,184,44,0.25);">
                <h3 class="text-xl font-bold mb-7" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Our Values</h3>
                <ul class="space-y-5">
                    {% set values = [
                        ('Quality First', 'We never compromise on quality, even under pressure.'),
                        ('Transparency', 'Open communication and honest relationships with every client.'),
                        ('Continuous Learning', 'Always evolving — embracing new tools, patterns, and ideas.'),
                        ('Client Success', 'Your success is our success. Full stop.'),
                    ] %}
                    {% for title, desc in values %}
                    <li class="flex items-start gap-4">
                        <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                             style="background: rgba(92,184,44,0.15); border: 1px solid rgba(92,184,44,0.3);">
                            <svg class="w-3.5 h-3.5 text-primary-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                        <div>
                            <div class="font-semibold text-sm mb-0.5" style="color: #e8e6f0; font-family: 'Syne', sans-serif;">{{ title }}</div>
                            <div class="text-sm" style="color: #8b8ca8;">{{ desc }}</div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Team -->
<section class="py-20 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-14">
            <div class="badge badge-primary mb-5">The Team</div>
            <h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Meet the people<br><span class="gradient-text">behind the code</span></h2>
        </div>

        <div class="flex justify-center">
            <div class="card-hover p-8 text-center max-w-xs w-full">
                <div class="w-20 h-20 avatar text-2xl font-bold mx-auto mb-5">JH</div>
                <h3 class="text-lg font-bold mb-1" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Johannes</h3>
                <p class="text-sm font-medium mb-4 gradient-text">Founder &amp; CEO</p>
                <p class="text-sm leading-relaxed" style="color: #8b8ca8;">
                    25+ years in software development. Passionate about clean code and scalable architectures.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Mission -->
<section class="py-24" style="background: #0a0a14;">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <!-- Quote card -->
        <div class="inline-block p-px rounded-2xl w-full"
             style="background: linear-gradient(135deg, rgba(92,184,44,0.35), rgba(247,147,30,0.15));">
            <div class="rounded-2xl px-10 py-14" style="background: #0f0f1a;">
                <div class="text-4xl mb-6 gradient-text" style="font-family: 'Syne', sans-serif;">&ldquo;</div>
                <p class="text-lg md:text-xl leading-relaxed mb-8" style="color: #c4c2d4;">
                    To empower businesses with innovative software solutions that drive growth, improve efficiency, and create lasting value. Technology should be an enabler — not a barrier.
                </p>
                <a href="{{ url_for('contact') }}" class="btn btn-primary px-8 py-3.5">
                    Let's Work Together
                    <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 %}