{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto px-6 py-12 md:py-24">
    <div class="space-y-12">
        <header class="space-y-4">
            <h1 class="text-4xl md:text-6xl font-light text-stone-900 tracking-tight">
                About <span class="font-serif italic text-emerald-800">Madplaner.</span>
            </h1>
            <p class="text-xl text-stone-500 font-light leading-relaxed">
                Intentional eating through artificial intelligence.
            </p>
        </header>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-12 border-t border-stone-100 pt-12">
            <div class="space-y-6 text-stone-600 leading-relaxed font-light">
                <p>
                    Madplaner was born out of a simple frustration: the "mental load" of deciding what to eat every single night. 
                    Traditional meal planning is often rigid, boring, and leads to forgotten vegetables at the back of the fridge.
                </p>
                <p>
                    Our mission is to apply **minimalist principles** to your kitchen. By focusing on what you already have and 
                    intelligently bridging the gap with AI, we reduce decision fatigue and food waste simultaneously.
                </p>
            </div>

            <div class="p-8 rounded-3xl border border-white/40 bg-white/30 backdrop-blur-md shadow-xl ring-1 ring-stone-900/5">
                <h3 class="text-stone-900 font-semibold mb-4">The Logic</h3>
                <ul class="space-y-4 text-sm text-stone-600">
                    <li class="flex gap-3">
                        <span class="text-emerald-700">●</span>
                        <span><strong>Fridge-First:</strong> We prioritize ingredients you already own to lower your grocery bill.</span>
                    </li>
                    <li class="flex gap-3">
                        <span class="text-emerald-700">●</span>
                        <span><strong>Smart Reuse:</strong> Our AI looks for ways to use that bunch of cilantro across multiple meals.</span>
                    </li>
                    <li class="flex gap-3">
                        <span class="text-emerald-700">●</span>
                        <span><strong>Zero Clutter:</strong> No complex features—just a clear path from ingredients to dinner.</span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="pt-8">
            <a href="/" class="text-stone-400 hover:text-stone-900 transition-colors flex items-center gap-2 text-sm font-medium">
                ← Back to Home
            </a>
        </div>
    </div>
</div>
{% endblock %}