<?php
use Livewire\Component;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10 font-odia">
    <!-- About Hero -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-24">
        <div>
            <span class="inline-block bg-brand-blue text-white text-[10px] font-bold uppercase tracking-wider px-3 py-1 rounded-sm mb-6"><?php echo e(__('about.legacy_badge')); ?></span>
            <h1 class="text-4xl md:text-6xl font-black text-slate-900 tracking-tighter leading-none mb-8">
                <?php echo __('about.headline'); ?>

            </h1>
            <p class="text-slate-600 text-lg md:text-xl font-medium leading-relaxed mb-8 font-odia">
                <?php echo e(__('about.body')); ?>

            </p>
            <div class="flex gap-12 border-t border-slate-100 pt-8">
                <div>
                    <h4 class="text-3xl font-black text-slate-900">10M+</h4>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-2"><?php echo e(__('about.monthly_readers')); ?></p>
                </div>
                <div>
                    <h4 class="text-3xl font-black text-slate-900">25+</h4>
                    <p class="text-[10px] font-bold uppercase tracking-widest text-slate-400 mt-2"><?php echo e(__('about.expert_reporters')); ?></p>
                </div>
            </div>
        </div>
        <div class="relative">
            <div class="relative rounded-lg overflow-hidden border border-slate-200 aspect-square bg-slate-100">
                <img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?auto=format&fit=crop&q=80&w=1200" class="w-full h-full object-cover">
            </div>
            <div class="absolute -bottom-6 -left-6 bg-white p-6 rounded-md shadow-md border border-slate-200 hidden md:block max-w-xs">
                <p class="text-sm font-bold text-slate-900 font-odia leading-snug"><?php echo e(__('about.editor_quote')); ?></p>
                <div class="flex items-center gap-3 mt-4">
                    <div class="w-8 h-8 bg-brand-blue rounded-sm"></div>
                    <div>
                        <p class="text-[10px] font-black text-slate-900 uppercase tracking-widest"><?php echo e(__('about.editor_title')); ?></p>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest"><?php echo e(__('about.editor_role')); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Core Values -->
    <div class="bg-slate-900 p-10 md:p-16 rounded-lg text-white shadow-md mb-24">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-5xl font-black tracking-tight mb-4 uppercase"><?php echo e(__('about.core_pillars')); ?> <span class="text-brand-red"><?php echo e(__('about.core_pillars_highlight')); ?></span></h2>
            <p class="text-slate-400 font-bold font-odia text-lg max-w-2xl mx-auto">
                <?php echo e(__('about.core_subtitle')); ?>

            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
            <div class="group">
                <div class="w-12 h-12 bg-white/10 rounded-md flex items-center justify-center mb-6 border border-white/10 group-hover:bg-brand-blue transition-colors">
                    <i class="fa-solid fa-bolt text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 font-odia"><?php echo e(__('about.pillar1_title')); ?></h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold"><?php echo e(__('about.pillar1_desc')); ?></p>
            </div>
            <div class="group">
                <div class="w-12 h-12 bg-white/10 rounded-md flex items-center justify-center mb-6 border border-white/10 group-hover:bg-brand-red transition-colors">
                    <i class="fa-solid fa-shield-halved text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 font-odia"><?php echo e(__('about.pillar2_title')); ?></h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold"><?php echo e(__('about.pillar2_desc')); ?></p>
            </div>
            <div class="group">
                <div class="w-12 h-12 bg-white/10 rounded-md flex items-center justify-center mb-6 border border-white/10 group-hover:bg-slate-700 transition-colors">
                    <i class="fa-solid fa-users text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-3 font-odia"><?php echo e(__('about.pillar3_title')); ?></h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold"><?php echo e(__('about.pillar3_desc')); ?></p>
            </div>
        </div>
    </div>

    <!-- Contact & Map Section -->
    <div class="mb-24">
        <div class="text-center mb-12">
            <h2 class="text-3xl md:text-5xl font-black tracking-tight mb-4 uppercase"><?php echo e(__('about.contact_headline')); ?></h2>
            <p class="text-slate-600 font-bold font-odia text-lg max-w-2xl mx-auto">
                <?php echo e(__('about.contact_subtitle')); ?>

            </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-10 bg-white p-6 md:p-10 rounded-lg border border-slate-200 shadow-sm">
            <div class="space-y-10">
                <div class="flex items-start gap-6">
                    <div class="w-12 h-12 bg-brand-blue/10 rounded-md flex items-center justify-center shrink-0 border border-brand-blue/20">
                        <i class="fa-solid fa-location-dot text-brand-blue text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black text-slate-900 mb-2 uppercase tracking-tight"><?php echo e(__('about.office_address')); ?></h3>
                        <p class="text-slate-600 font-odia font-medium text-lg leading-relaxed">
                            <?php echo e(__('about.address_line')); ?>

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

                <div class="flex items-start gap-6">
                    <div class="w-12 h-12 bg-brand-red/10 rounded-md flex items-center justify-center shrink-0 border border-brand-red/20">
                        <i class="fa-solid fa-phone-volume text-brand-red text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-black text-slate-900 mb-2 uppercase tracking-tight"><?php echo e(__('about.phone_number')); ?></h3>
                        <a href="tel:+917978764788" class="text-slate-600 font-bold text-2xl hover:text-brand-red transition-colors">
                            +91 79 7876 4788
                        </a>
                    </div>
                </div>

                <div class="p-6 bg-slate-50 rounded-lg border border-slate-100">
                    <h4 class="text-sm font-black text-slate-900 mb-4 uppercase tracking-widest"><?php echo e(__('about.find_us_on_map')); ?></h4>
                    <div class="rounded-md overflow-hidden border border-slate-200 h-64 bg-slate-200">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3740.6416625890533!2d85.8202!3d20.301!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a1909873f2c5101%3A0x86770284e318d184!2sRaghunathpur%2C%20Bhubaneswar%2C%20Odisha!5e0!3m2!1sen!2sin!4v1712123456789!5m2!1sen!2sin"
                            width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                    </div>
                </div>
            </div>

            <div class="relative rounded-lg overflow-hidden border border-slate-200 h-full min-h-[400px]">
                <img src="https://images.unsplash.com/photo-1423666639041-f56000c27a9a?auto=format&fit=crop&q=80&w=1200" class="w-full h-full object-cover" alt="Contact Us">
                <div class="absolute inset-0 bg-gradient-to-t from-slate-900/80 to-transparent flex items-end p-8">
                    <div class="text-white">
                        <p class="text-sm font-bold uppercase tracking-widest mb-2 opacity-80"><?php echo e(__('nav.contact_us')); ?></p>
                        <h3 class="text-2xl font-black font-odia leading-tight">
                            ଆମ ସହ ଯୋଗାଯୋଗ କରନ୍ତୁ ଏବଂ ଆପଣଙ୍କ ମତାମତ ଦିଅନ୍ତୁ।
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main><?php /**PATH D:\02-my freelance\00-DR_Padhi\DR_PADHI\storage\framework/views/livewire/views/ab1fdbd7.blade.php ENDPATH**/ ?>