@extends('website.layouts.app')

@section('content')
    @include('website.components.header')

    <main class="pt-20">
        <section class="bg-teal-deep text-white py-24 relative overflow-hidden">
            <div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_1px_1px,rgba(255,255,255,0.22)_1px,transparent_0)] [background-size:14px_14px]"></div>
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
                <h1 class="text-5xl md:text-6xl font-heading font-bold mb-6">About SaveSmart<span class="text-amber-gold">.lk</span></h1>
                <p class="text-xl text-teal-100 max-w-3xl mx-auto leading-relaxed">Sri Lanka's leading digital membership ecosystem, empowering consumers to save smarter.</p>
            </div>
        </section>

        <section class="py-24 bg-cream">
            <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-16 items-center">
                    <div>
                        <h2 class="text-4xl font-heading font-bold text-teal-deep mb-6">Our Story</h2>
                        <p class="text-gray-600 text-lg leading-relaxed mb-6">Founded in 2023, SaveSmart.lk began with a simple observation: Sri Lankan consumers were missing out on value, and businesses were struggling to build loyalty. We set out to bridge this gap.</p>
                        <p class="text-gray-600 text-lg leading-relaxed">Today, we've transformed everyday spending into a rewarding experience. By replacing bulky plastic cards with a sleek digital app, we've made savings accessible, instant, and eco-friendly for everyone across the island.</p>
                    </div>
                    <div class="relative h-80 bg-gradient-to-br from-teal-deep/10 to-amber-gold/10 rounded-2xl flex items-center justify-center border border-teal-deep/5">
                        <div class="bg-white p-6 rounded-full shadow-xl">
                            <i data-lucide="credit-card" class="w-16 h-16 text-teal-deep"></i>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="bg-cream rounded-2xl p-8 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-teal-deep rounded-lg flex items-center justify-center mb-6 text-white">
                            <i data-lucide="eye" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-2xl font-heading font-bold text-teal-deep mb-4">Our Vision</h3>
                        <p class="text-gray-600 leading-relaxed">To become Sri Lanka's leading digital membership ecosystem, empowering consumers to save smarter while helping businesses build loyal, long-term customer relationships.</p>
                    </div>
                    <div class="bg-cream rounded-2xl p-8 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                        <div class="w-12 h-12 bg-amber-gold rounded-lg flex items-center justify-center mb-6 text-white">
                            <i data-lucide="target" class="w-6 h-6"></i>
                        </div>
                        <h3 class="text-2xl font-heading font-bold text-teal-deep mb-4">Our Mission</h3>
                        <p class="text-gray-600 leading-relaxed">To connect value-conscious consumers with trusted businesses through seamless digital memberships, exclusive offers, and data-driven engagement.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-16 bg-amber-gold text-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
                    <div>
                        <div class="text-4xl md:text-5xl font-heading font-bold mb-2">500+</div>
                        <div class="text-amber-100 font-medium text-lg">Partners</div>
                    </div>
                    <div>
                        <div class="text-4xl md:text-5xl font-heading font-bold mb-2">100K+</div>
                        <div class="text-amber-100 font-medium text-lg">Members</div>
                    </div>
                    <div>
                        <div class="text-4xl md:text-5xl font-heading font-bold mb-2">6</div>
                        <div class="text-amber-100 font-medium text-lg">Categories</div>
                    </div>
                    <div>
                        <div class="text-4xl md:text-5xl font-heading font-bold mb-2">Rs.50M+</div>
                        <div class="text-amber-100 font-medium text-lg">Saved</div>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-24 bg-cream">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-heading font-bold text-teal-deep mb-4">Our Core Values</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">The principles that guide everything we do.</p>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center hover:shadow-lg transition-shadow">
                        <div class="w-16 h-16 bg-teal-deep/10 rounded-full flex items-center justify-center mx-auto mb-6 text-teal-deep">
                            <i data-lucide="shield" class="w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-3">Trust & Transparency</h3>
                        <p class="text-gray-600">We build relationships on honesty. No hidden fees, just clear savings.</p>
                    </div>
                    <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center hover:shadow-lg transition-shadow">
                        <div class="w-16 h-16 bg-teal-deep/10 rounded-full flex items-center justify-center mx-auto mb-6 text-teal-deep">
                            <i data-lucide="lightbulb" class="w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-3">Innovation</h3>
                        <p class="text-gray-600">Constantly evolving our digital platform to make saving easier.</p>
                    </div>
                    <div class="bg-white rounded-xl p-8 shadow-sm border border-gray-100 text-center hover:shadow-lg transition-shadow">
                        <div class="w-16 h-16 bg-teal-deep/10 rounded-full flex items-center justify-center mx-auto mb-6 text-teal-deep">
                            <i data-lucide="users" class="w-8 h-8"></i>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-3">Community First</h3>
                        <p class="text-gray-600">Empowering Sri Lankan consumers and businesses to grow together.</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-4xl font-heading font-bold text-teal-deep mb-4">Meet Our Team</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">The passionate people behind the platform.</p>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <div class="text-center group">
                        <div class="relative w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-cream group-hover:border-amber-gold transition-colors bg-gradient-to-br from-teal-deep/15 to-amber-gold/20 flex items-center justify-center">
                            <span class="text-3xl font-heading font-bold text-teal-deep">A</span>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-1">Ashan Fernando</h3>
                        <p class="text-amber-600 font-medium">CEO</p>
                    </div>
                    <div class="text-center group">
                        <div class="relative w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-cream group-hover:border-amber-gold transition-colors bg-gradient-to-br from-teal-deep/15 to-amber-gold/20 flex items-center justify-center">
                            <span class="text-3xl font-heading font-bold text-teal-deep">D</span>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-1">Dilini Perera</h3>
                        <p class="text-amber-600 font-medium">CTO</p>
                    </div>
                    <div class="text-center group">
                        <div class="relative w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-cream group-hover:border-amber-gold transition-colors bg-gradient-to-br from-teal-deep/15 to-amber-gold/20 flex items-center justify-center">
                            <span class="text-3xl font-heading font-bold text-teal-deep">K</span>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-1">Kasun Silva</h3>
                        <p class="text-amber-600 font-medium">Head of Partnerships</p>
                    </div>
                    <div class="text-center group">
                        <div class="relative w-40 h-40 mx-auto mb-6 rounded-full overflow-hidden border-4 border-cream group-hover:border-amber-gold transition-colors bg-gradient-to-br from-teal-deep/15 to-amber-gold/20 flex items-center justify-center">
                            <span class="text-3xl font-heading font-bold text-teal-deep">N</span>
                        </div>
                        <h3 class="text-xl font-bold text-teal-deep mb-1">Nethmi Jayawardena</h3>
                        <p class="text-amber-600 font-medium">Marketing Director</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    @include('website.components.footer')
@endsection
