@extends('layouts.app')

@section('title', 'About Us')

@section('content')
<div class="container mx-auto px-4 py-12">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'About']
    ]" />
    <div class="max-w-4xl mx-auto">
        <h1 class="text-5xl font-serif font-bold mb-12 text-center text-[#524438]">About Us</h1>
        
        <div class="space-y-10">
            <section class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
                <h2 class="text-3xl font-serif font-bold mb-4 text-[#524438]">Our Story</h2>
                <p class="text-[#645443] leading-relaxed text-lg">
                    Sweet Delights Bakery was founded with a passion for creating artisanal baked goods that bring joy to every occasion. 
                    What started as a small family kitchen has grown into a beloved local bakery, serving our community with freshly baked treats made with love, every single day. 
                    We use only the finest ingredients and traditional techniques to create unforgettable flavors.
                </p>
            </section>
            
            <section class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
                <h2 class="text-3xl font-serif font-bold mb-4 text-[#524438]">Our Mission</h2>
                <p class="text-[#645443] leading-relaxed text-lg">
                    Our mission is to craft exceptional baked goods that celebrate life's sweetest moments. We are committed to using premium, 
                    locally-sourced ingredients whenever possible, and we take pride in every loaf, pastry, and cake that leaves our bakery. 
                    We believe that great food brings people together and creates lasting memories.
                </p>
            </section>
            
            <section class="bg-white p-8 rounded-2xl shadow-md border border-[#e8ddd0]">
                <h2 class="text-3xl font-serif font-bold mb-4 text-[#524438]">Our Vision</h2>
                <p class="text-[#645443] leading-relaxed text-lg">
                    We envision Sweet Delights becoming the heart of our community—a place where neighbors gather, celebrations are made sweeter, 
                    and every visit feels like coming home. We're committed to preserving the art of traditional baking while embracing innovation 
                    and continuously expanding our offerings to delight every palate.
                </p>
            </section>
        </div>
        
        <div class="mt-12 text-center">
            <a href="{{ route('products.index') }}" class="bg-[#7d6a52] text-white px-10 py-4 rounded-full font-semibold hover:bg-[#9d8566] transition-all shadow-lg hover:shadow-xl transform hover:scale-105 inline-block">
                Browse Our Products
            </a>
        </div>
    </div>
</div>
@endsection