{% extends "base.html" %}

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

{% block content %}
<!-- Hero Section -->
<section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">About DirectLX</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                We're a team of passionate developers dedicated to building software that makes a difference.
            </p>
        </div>
    </div>
</section>

<!-- Our Story -->
<section class="py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Story</h2>
                <p class="text-gray-600 mb-4">
                    DirectLX was founded with a simple mission: to help businesses succeed through technology.
                    We believe that great software isn't just about code—it's about understanding problems
                    and crafting solutions that truly work.
                </p>
                <p class="text-gray-600 mb-4">
                    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 class="text-gray-600">
                    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 the future holds.
                </p>
            </div>
            <div class="bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl p-8 text-white">
                <h3 class="text-2xl font-bold mb-6">Our Values</h3>
                <ul class="space-y-4">
                    <li class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <div>
                            <strong class="block">Quality First</strong>
                            <span class="text-primary-100">We never compromise on quality, even under pressure.</span>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <div>
                            <strong class="block">Transparency</strong>
                            <span class="text-primary-100">Open communication and honest relationships with clients.</span>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <div>
                            <strong class="block">Continuous Learning</strong>
                            <span class="text-primary-100">Always evolving and improving our skills.</span>
                        </div>
                    </li>
                    <li class="flex items-start">
                        <svg class="w-6 h-6 mr-3 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                        <div>
                            <strong class="block">Client Success</strong>
                            <span class="text-primary-100">Your success is our success.</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- Team Section -->
<section class="bg-gray-100 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Meet Our Team</h2>
            <p class="text-gray-600 max-w-2xl mx-auto">
                A diverse group of talented individuals united by a shared passion for building great software.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="card text-center">
                <div class="w-24 h-24 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full mx-auto mb-4 flex items-center justify-center text-white text-2xl font-bold">
                    JH
                </div>
                <h3 class="text-xl font-semibold text-gray-900">Johannes</h3>
                <p class="text-accent-500 mb-3">Founder & CEO</p>
                <p class="text-gray-600 text-sm">
                    25+ years in software development. Passionate about clean code and scalable architectures.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Mission Section -->
<section class="py-20">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl font-bold text-gray-900 mb-6">Our Mission</h2>
        <p class="text-xl text-gray-600 mb-8">
            "To empower businesses with innovative software solutions that drive growth,
            improve efficiency, and create lasting value. We believe technology should
            be an enabler, not a barrier, and we're committed to making that a reality
            for every client we work with."
        </p>
        <a href="{{ url_for('contact') }}" class="btn btn-accent px-8 py-3 text-lg">
            Let's Work Together
        </a>
    </div>
</section>
{% endblock %}