<x-layouts.site>
    <x-slot:title>Our Story &amp; Method</x-slot:title>
    <x-slot:description>Money-Wise is Africa's financial confidence ecosystem, an approach to financial literacy rooted in your values and faith, built for African realities.</x-slot:description>

    {{-- Hero --}}
    <section class="relative overflow-hidden bg-mesh">
        <div class="blob -right-32 top-10 h-96 w-96 bg-wise-300/40" data-parallax="0.2" aria-hidden="true"></div>
        <div class="container-site relative py-14 md:py-20">
            <div class="grid items-center gap-12 lg:grid-cols-[1.25fr,1fr]">
                <div data-hero>
                    <p class="eyebrow" data-hero-item>Our story</p>
                    <h1 class="mt-3 font-display text-display-sm font-bold text-navy-900 md:text-display" data-hero-item>
                        We set people <span class="text-gradient">free from money bondage</span>
                    </h1>
                    <p class="mt-5 max-w-xl text-lg leading-relaxed text-navy-600" data-hero-item>
                        Debt that steals sleep. Jargon that locks people out. Advisors who serve themselves first.
                        Money-Wise was built to break all three, with education, tools and guidance that treat
                        you as a whole person, not a wallet.
                    </p>
                    <div class="mt-7 flex flex-wrap gap-3" data-hero-item>
                        <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent">Start your journey <x-icon name="arrow-right" class="h-4 w-4" /></a>
                        <a href="{{ route('consultation') }}" class="btn-ghost">Book a consultation</a>
                    </div>
                </div>

                <div class="relative hidden lg:block" data-hero-item>
                    <div class="card-arch h-[26rem] w-full">
                        <img src="{{ asset('images/stock/speaking.jpg') }}" alt="Money-Wise teaching financial confidence">
                    </div>
                    <div class="absolute -bottom-5 -left-6 rounded-2xl bg-white px-5 py-4 shadow-brand-lg ring-1 ring-navy-100">
                        <p class="font-display text-3xl font-extrabold text-navy-900">1,500<span class="text-wise-500">+</span></p>
                        <p class="text-xs font-semibold text-navy-400">people trained, and counting</p>
                    </div>
                    <div class="absolute -right-3 top-8 rotate-3 rounded-2xl bg-navy-900 px-4 py-3 text-center shadow-brand-lg">
                        <p class="font-display text-xl font-extrabold text-wise-300">18 yrs</p>
                        <p class="text-[11px] font-semibold text-navy-200">in finance</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- The method (relocated from home) --}}
    <section class="section bg-navy-50/50">
        <div class="container-site">
            <div class="mx-auto max-w-2xl text-center" data-gsap="fade-up">
                <p class="eyebrow justify-center">The Money-Wise method</p>
                <h2 class="section-title mt-3">Who you are, before what you earn</h2>
                <p class="mt-4 leading-relaxed text-navy-600">Three steps, always in this order. It's why the plans we build actually hold.</p>
            </div>
            <div class="mt-14 grid gap-8 md:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['img' => 'stock/learning.jpg', 'step' => '01', 'icon' => 'compass', 'title' => 'Know yourself', 'desc' => 'Assessments reveal your starting point and money DNA.'],
                    ['img' => 'stock/savings.jpg', 'step' => '02', 'icon' => 'sliders', 'title' => 'Fix the foundation', 'desc' => 'Budget, safety net, debt freedom, habits that hold.'],
                    ['img' => 'stock/investing.jpg', 'step' => '03', 'icon' => 'trending-up', 'title' => 'Grow with purpose', 'desc' => 'Invest towards your goals. Protect what you build.'],
                ] as $j => $step)
                    <div class="group text-center {{ $j === 1 ? 'md:mt-10' : '' }}">
                        <div class="card-arch relative mx-auto h-80 max-w-xs">
                            <img src="{{ asset('images/'.$step['img']) }}" alt="">
                            <span class="absolute left-1/2 top-5 -translate-x-1/2 rounded-full bg-navy-950/70 px-3.5 py-1 font-display text-xs font-extrabold tracking-widest text-wise-300 backdrop-blur">STEP {{ $step['step'] }}</span>
                        </div>
                        <span class="icon-tile relative z-10 mx-auto -mt-6 ring-4 ring-navy-50"><x-icon :name="$step['icon']" class="h-5 w-5" /></span>
                        <h3 class="mt-3 font-display text-lg font-bold text-navy-900">{{ $step['title'] }}</h3>
                        <p class="mx-auto mt-1.5 max-w-xs leading-relaxed text-navy-600">{{ $step['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="section bg-white">
        <div class="container-site">
            {{-- Mission/vision cards --}}
            <div class="grid gap-6 md:grid-cols-3" data-gsap-stagger>
                @foreach ([
                    ['icon' => 'globe', 'title' => 'The vision', 'desc' => 'An educated, empowered Africa, families financially free, making money decisions from understanding, not fear.'],
                    ['icon' => 'compass', 'title' => 'The method', 'desc' => 'Values first. We start with who you are and what matters to you, then build the budget, the plan and the portfolio around it.'],
                    ['icon' => 'heart', 'title' => 'The foundation', 'desc' => 'Stewardship rooted in faith. We believe money is a tool for purpose, managed with integrity, grown with patience, shared with generosity.'],
                ] as $card)
                    <div class="card-glow group p-8">
                        <span class="icon-tile h-14 w-14"><x-icon :name="$card['icon']" class="h-6 w-6" /></span>
                        <h2 class="mt-4 font-display text-lg font-bold text-navy-900">{{ $card['title'] }}</h2>
                        <p class="mt-2 leading-relaxed text-navy-600">{{ $card['desc'] }}</p>
                    </div>
                @endforeach
            </div>

            {{-- Numbers --}}
            <div class="relative mt-14 overflow-hidden rounded-brand bg-navy-900 bg-mesh-dark" data-gsap="zoom">
                <div class="grid gap-8 p-10 text-center sm:grid-cols-2 lg:grid-cols-4">
                    @foreach ([
                        ['icon' => 'award', 'value' => 18, 'suffix' => ' yrs', 'label' => 'In financial services'],
                        ['icon' => 'users', 'value' => 1500, 'suffix' => '+', 'label' => 'People trained'],
                        ['icon' => 'heart', 'value' => 18000, 'suffix' => '+', 'label' => 'Community members'],
                        ['icon' => 'video', 'value' => 400, 'suffix' => '+', 'label' => 'Educational videos'],
                    ] as $stat)
                        <div>
                            <span class="icon-tile-dark mx-auto"><x-icon :name="$stat['icon']" class="h-5 w-5" /></span>
                            <p class="mt-3 font-display text-4xl font-extrabold text-wise-300"><span data-countup="{{ $stat['value'] }}" data-suffix="{{ $stat['suffix'] }}">0</span></p>
                            <p class="mt-1 text-sm font-semibold text-navy-200">{{ $stat['label'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Founder --}}
            <div class="mt-14 grid items-center gap-12 lg:grid-cols-[1fr,1.4fr]">
                <div class="relative" data-gsap="fade-right">
                    <div class="absolute inset-x-6 bottom-0 top-12 rounded-[3rem] bg-gradient-to-tr from-wise-400/50 to-wise-200/30" aria-hidden="true"></div>
                    <img src="{{ asset('images/rina-portrait.png') }}" alt="Rina Hicks, founder of Money-Wise"
                         class="relative mx-auto max-h-[28rem] w-auto drop-shadow-2xl">
                    <div class="absolute -bottom-4 left-1/2 w-max -translate-x-1/2 rounded-2xl bg-white px-5 py-3 text-center shadow-brand-lg">
                        <p class="font-display font-extrabold text-navy-900">Rina Hicks</p>
                        <p class="text-xs font-semibold text-navy-400">Founder · Author · Investment Advisor</p>
                    </div>
                </div>
                <div data-gsap="fade-left">
                    <p class="eyebrow">Meet the founder</p>
                    <h2 class="mt-3 font-display text-2xl font-bold text-navy-900">"I'm not your typical investment banker."</h2>
                    <p class="mt-4 leading-relaxed text-navy-700">
                        Rina Hicks is an investment advisor, certified professional coach (ICF), and author of the
                        bestselling <em>Money-Wise: Create, Grow &amp; Preserve Wealth</em>. With nearly two decades in
                        capital markets, including board and committee roles across Kenya's investment industry, 
                        she's spent her career translating finance into language everyone can act on.
                    </p>
                    <p class="mt-3 leading-relaxed text-navy-700">
                        Money-Wise has grown beyond one voice into an ecosystem: a team of educators, coaches and
                        builders with one shared mission, your financial confidence.
                    </p>
                    <div class="mt-6 flex flex-wrap gap-2">
                        @foreach (['Author', 'ICF Certified Coach', 'Investment Advisor', 'Speaker', 'YouTube Educator'] as $tag)
                            <span class="chip">{{ $tag }}</span>
                        @endforeach
                    </div>
                </div>
            </div>

            {{-- Team --}}
            <div class="mt-16" data-gsap="fade-up">
                <div class="text-center">
                    <p class="eyebrow justify-center">The team</p>
                    <h2 class="section-title mt-3">The people behind the ecosystem</h2>
                </div>
                <div class="mt-10 grid gap-6 sm:grid-cols-3" data-gsap-stagger>
                    @foreach ([
                        ['img' => 'team/maina.png', 'name' => 'Maina Chege', 'role' => 'Production & Digital'],
                        ['img' => 'team/alice.png', 'name' => 'Alice Kamau', 'role' => 'Executive Assistant'],
                        ['img' => 'team/neema.png', 'name' => 'Neema Kamau', 'role' => 'Research'],
                    ] as $member)
                        <div class="card-glow group p-7 text-center">
                            <div class="mx-auto grid h-32 w-32 place-items-end overflow-hidden rounded-full bg-gradient-to-tr from-wise-100 to-navy-50 ring-4 ring-white shadow-brand">
                                <img src="{{ asset('images/'.$member['img']) }}" alt="{{ $member['name'] }}" class="h-28 w-auto object-contain transition-transform duration-500 group-hover:scale-110">
                            </div>
                            <h3 class="mt-4 font-display font-bold text-navy-900">{{ $member['name'] }}</h3>
                            <p class="text-sm font-semibold text-navy-400">{{ $member['role'] }}</p>
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Media + CTA --}}
            <div class="mt-16 text-center" data-gsap="fade-up">
                <p class="text-sm font-bold uppercase tracking-widest text-navy-400">A recognised voice on financial literacy</p>
                <div class="marquee mx-auto mt-6 max-w-3xl">
                    @for ($i = 0; $i < 2; $i++)
                        <div class="marquee-track" aria-hidden="{{ $i === 1 ? 'true' : 'false' }}">
                            @foreach (['ntv', 'nation', 'capitalfm', 'standard', 'switchtv', 'k24', 'ebru'] as $logo)
                                <img src="{{ asset("images/media/{$logo}.png") }}" alt="{{ strtoupper($logo) }}" class="h-10 w-auto opacity-60 grayscale transition hover:opacity-100 hover:grayscale-0">
                            @endforeach
                        </div>
                    @endfor
                </div>
                <div class="mt-10 flex flex-wrap justify-center gap-3">
                    <a href="{{ route('assessments.show', 'financial-health') }}" class="btn-accent btn-lg">Start your journey <x-icon name="arrow-right" class="h-5 w-5" /></a>
                    <a href="{{ route('contact') }}" class="btn-ghost btn-lg">Talk to us</a>
                </div>
            </div>
        </div>
    </section>
</x-layouts.site>
