@extends('layouts.web')

@section('content')

<div class="max-w-7xl mx-auto px-4 mt-14 md:px-8 pt-10 pb-20">

    <!-- 1️⃣ HERO -->
    <div class="bg-gradient-to-b from-[#E8F0F8] to-white pt-20 px-4 md:px-12 rounded-[3rem] md:rounded-[4rem] relative overflow-hidden mb-28 shadow-sm border border-slate-100">
        <div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center relative z-10 pb-24 md:pb-32">

            <!-- left: title block -->
            <div class="md:w-1/2 text-center md:text-left">
                <h1 class="font-sans text-5xl md:text-7xl lg:text-[5.5rem] font-bold text-slate-900 leading-[1.05] tracking-tight mb-6">
                    {{ $about->hero_title_line1 ?? 'Empowering' }}<br/>
                    {{ $about->hero_title_line2 ?? 'Justice' }}<br/>
                    {{ $about->hero_title_line3 ?? 'Everywhere' }}
                </h1>
            </div>

            <!-- right: illustration with card -->
            <div class="md:w-1/2 mt-12 md:mt-0 flex flex-col items-center justify-center relative">
                <div class="w-[300px] h-[380px] bg-blue-200/50 rounded-t-[10rem] rounded-b-[2rem] overflow-hidden relative border-8 border-white/50 backdrop-blur-md shadow-2xl flex flex-col items-center justify-center">
                    <div class="absolute inset-0 bg-gradient-to-tr from-[#7D26C2]/20 to-transparent mix-blend-multiply"></div>

                    <!-- scale icon -->
  <svg class="w-24 h-24 text-blue-500/50 relative z-10" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3"></path>
                        </svg>
                </div>



                <!-- floating card -->
                <div class="mt-8 text-center max-w-sm relative z-20 bg-white/80 backdrop-blur-md p-4 rounded-2xl shadow-lg border border-white">
                    <p class="text-slate-700 text-sm font-medium leading-relaxed">
                        {{ $about->hero_card_text ?? '' }}
                    </p>

                    @php
                        $btnText = $about->hero_button_text ?? 'Explore Opportunities';
                        $btnUrl  = $about->hero_button_url ?? null;
                    @endphp

                    @if($btnUrl)
                        <a href="{{ $btnUrl }}"
                           class="inline-block mt-4 bg-slate-900 text-white text-xs font-bold px-6 py-2.5 rounded-full hover:bg-[#7D26C2] transition-colors">
                            {{ $btnText }}
                        </a>
                    @else
                        <button type="button"
                                class="mt-4 bg-slate-900 text-white text-xs font-bold px-6 py-2.5 rounded-full hover:bg-[#7D26C2] transition-colors">
                            {{ $btnText }}
                        </button>
                    @endif
                </div>
            </div>
        </div>

        <!-- watermark -->
        <div class="absolute bottom-[-2%] md:bottom-[-6%] left-0 right-0 text-center pointer-events-none">
            <h2 class="text-[100px] md:text-[220px] font-bold text-slate-900 tracking-tighter leading-none mix-blend-overlay opacity-[0.03]">
                About Us
            </h2>
        </div>
    </div>

    <!-- 2️⃣ HOW TO GET LEGAL HELP -->
    <div class="text-center mb-28">
        <h2 class="font-sans text-3xl md:text-5xl font-bold text-slate-900 mb-16 tracking-tight">
            {{ $about->how_to_title ?? 'How to get legal help' }}
        </h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-10 max-w-6xl mx-auto px-4">

            <!-- Step 1 -->
            <div class="flex flex-col items-center group">
                <div class="w-16 h-16 bg-slate-100 text-blue-400 rounded-[1.2rem] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    </svg>
                </div>
                <h4 class="font-bold text-slate-900 mb-3 text-lg">{{ $about->step1_title ?? '' }}</h4>
                <p class="text-slate-500 text-sm leading-relaxed max-w-[200px]">{{ $about->step1_description ?? '' }}</p>
            </div>

            <!-- Step 2 -->
            <div class="flex flex-col items-center group">
                <div class="w-16 h-16 bg-slate-100 text-emerald-400 rounded-[1.2rem] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                    </svg>
                </div>
                <h4 class="font-bold text-slate-900 mb-3 text-lg">{{ $about->step2_title ?? '' }}</h4>
                <p class="text-slate-500 text-sm leading-relaxed max-w-[200px]">{{ $about->step2_description ?? '' }}</p>
            </div>

            <!-- Step 3 -->
            <div class="flex flex-col items-center group">
                <div class="w-16 h-16 bg-slate-100 text-[#7D26C2] rounded-[1.2rem] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
                <h4 class="font-bold text-slate-900 mb-3 text-lg">{{ $about->step3_title ?? '' }}</h4>
                <p class="text-slate-500 text-sm leading-relaxed max-w-[200px]">{{ $about->step3_description ?? '' }}</p>
            </div>

            <!-- Step 4 -->
            <div class="flex flex-col items-center group">
                <div class="w-16 h-16 bg-slate-100 text-amber-400 rounded-[1.2rem] flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                </div>
                <h4 class="font-bold text-slate-900 mb-3 text-lg">{{ $about->step4_title ?? '' }}</h4>
                <p class="text-slate-500 text-sm leading-relaxed max-w-[200px]">{{ $about->step4_description ?? '' }}</p>
            </div>

        </div>
    </div>

    <!-- 3️⃣ STORY + TABS + STATS -->
    <div class="flex flex-col lg:flex-row gap-16 items-start max-w-6xl mx-auto">

        <!-- left column -->
        <div class="lg:w-1/2">
            <h2 class="font-sans text-3xl md:text-5xl font-bold text-slate-900 mb-8 tracking-tight">
                {{ $about->story_title ?? 'What is the story of AlephoraX communication?' }}
            </h2>

            <!-- Tabs -->
            <div class="flex gap-2 mb-8" id="tabContainer">
                <button data-tab="mission" class="tab-btn px-5 py-2 bg-blue-50 text-blue-600 rounded-full text-xs font-bold border border-blue-100 shadow-sm">Mission</button>
                <button data-tab="vision" class="tab-btn px-5 py-2 bg-[#FAFAF9] text-slate-600 rounded-full text-xs font-bold border border-slate-200">Vision</button>
                <button data-tab="partners" class="tab-btn px-5 py-2 bg-[#FAFAF9] text-slate-600 rounded-full text-xs font-bold border border-slate-200">Partners</button>
            </div>

            <!-- Mission -->
            <div id="missionContent" class="tab-content block">
                <p class="text-slate-600 text-lg leading-relaxed mb-6 font-medium">
                    {{ $about->mission_lead ?? '' }}
                </p>
                <p class="text-slate-500 leading-relaxed">
                    {{ $about->mission_body ?? '' }}
                </p>
            </div>

            <!-- Vision -->
            <div id="visionContent" class="tab-content hidden">
                <p class="text-slate-600 text-lg leading-relaxed mb-6 font-medium">
                    {{ $about->vision_lead ?? '' }}
                </p>
                <p class="text-slate-500 leading-relaxed">
                    {{ $about->vision_body ?? '' }}
                </p>
            </div>

            <!-- Partners -->
            <div id="partnersContent" class="tab-content hidden">
                <p class="text-slate-600 text-lg leading-relaxed mb-6 font-medium">
                    {{ $about->partners_lead ?? '' }}
                </p>
                <p class="text-slate-500 leading-relaxed">
                    {{ $about->partners_body ?? '' }}
                </p>
            </div>
        </div>

        <!-- right column: stats -->
        <div class="lg:w-1/2 w-full">
            <div class="bg-[#FAFAF9] rounded-[2.5rem] p-8 md:p-12 border border-slate-100 shadow-sm relative overflow-hidden">
                <div class="grid grid-cols-2 gap-x-8 gap-y-12">

                    <div>
                        <p class="text-slate-500 text-xs font-bold mb-2 uppercase tracking-wide">
                            {{ $about->stat1_label ?? '' }}
                        </p>
                        <h4 class="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
                            {{ $about->stat1_value ?? '' }}
                        </h4>
                        <p class="text-slate-500 text-xs leading-relaxed">
                            {{ $about->stat1_description ?? '' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-slate-500 text-xs font-bold mb-2 uppercase tracking-wide">
                            {{ $about->stat2_label ?? '' }}
                        </p>
                        <h4 class="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
                            {{ $about->stat2_value ?? '' }}
                        </h4>
                        <p class="text-slate-500 text-xs leading-relaxed">
                            {{ $about->stat2_description ?? '' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-slate-500 text-xs font-bold mb-2 uppercase tracking-wide">
                            {{ $about->stat3_label ?? '' }}
                        </p>
                        <h4 class="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
                            {{ $about->stat3_value ?? '' }}
                        </h4>
                        <p class="text-slate-500 text-xs leading-relaxed">
                            {{ $about->stat3_description ?? '' }}
                        </p>
                    </div>

                    <div>
                        <p class="text-slate-500 text-xs font-bold mb-2 uppercase tracking-wide">
                            {{ $about->stat4_label ?? '' }}
                        </p>
                        <h4 class="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
                            {{ $about->stat4_value ?? '' }}
                        </h4>
                        <p class="text-slate-500 text-xs leading-relaxed">
                            {{ $about->stat4_description ?? '' }}
                        </p>
                    </div>

                </div>
            </div>
        </div>

    </div>

    <div class="mt-16"></div>
</div>

<!-- Tabs JS (same) -->
<script>
    (function() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const contents = {
            mission: document.getElementById('missionContent'),
            vision: document.getElementById('visionContent'),
            partners: document.getElementById('partnersContent')
        };

        function setActiveTab(tabId) {
            tabButtons.forEach(btn => {
                const btnTab = btn.getAttribute('data-tab');
                if (btnTab === tabId) {
                    btn.classList.remove('bg-[#FAFAF9]', 'text-slate-600', 'border-slate-200');
                    btn.classList.add('bg-blue-50', 'text-blue-600', 'border-blue-100');
                } else {
                    btn.classList.remove('bg-blue-50', 'text-blue-600', 'border-blue-100');
                    btn.classList.add('bg-[#FAFAF9]', 'text-slate-600', 'border-slate-200');
                }
            });

            Object.keys(contents).forEach(key => {
                if (key === tabId) {
                    contents[key].classList.remove('hidden');
                } else {
                    contents[key].classList.add('hidden');
                }
            });
        }

        tabButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                setActiveTab(btn.getAttribute('data-tab'));
            });
        });

        setActiveTab('mission');
    })();
</script>

@endsection