<?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">Our Legacy</span>
            <h1 class="text-4xl md:text-6xl font-black text-slate-900 tracking-tighter leading-none mb-8">
                Truth <span class="text-brand-blue italic">First.</span><br>
                People Always.
            </h1>
            <p class="text-slate-600 text-lg md:text-xl font-medium leading-relaxed mb-8 font-odia">
                ଓଡ଼ିଶାର ଏକମାତ୍ର ନିର୍ଭୀକ ଓ ନିରପେକ୍ଷ ନ୍ୟୁଜ୍ ପୋର୍ଟାଲ୍। ଆମେ କେବଳ ଖବର ପରିବେଷଣ କରୁନାହୁଁ, ବରଂ ପ୍ରତ୍ୟେକ ଘଟଣାର ସଠିକ୍ ବିଶ୍ଳେଷଣ କରି ଆପଣଙ୍କ ପାଖରେ ପହଞ୍ଚାଇଥାଉ।
            </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">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">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">"ସତ୍ୟର ସନ୍ଧାନରେ ସଦା ସର୍ବଦା ଆମେ ଆପଣଙ୍କ ସହ।"</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">The Editor</p>
                        <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">Founder & Editor</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">Our Core <span class="text-brand-red">Pillars</span></h2>
            <p class="text-slate-400 font-bold font-odia text-lg max-w-2xl mx-auto">
                ଆମର ଲକ୍ଷ୍ୟ ହେଉଛି ଓଡ଼ିଶାର ପ୍ରତ୍ୟେକ କୋଣରୁ ଗୁରୁତ୍ୱପୂର୍ଣ୍ଣ ଘଟଣାକୁ ଲୋକଲୋଚନକୁ ଆଣିବା।
            </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">ଶୀଘ୍ର ଓ ସଠିକ୍</h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold">ଖବର ପହଞ୍ଚାଇବା ପୂର୍ବରୁ ଆମେ ପ୍ରତ୍ୟେକ ତଥ୍ୟକୁ ସଠିକ୍ ଭାବେ ଯାଞ୍ଚ କରିଥାଉ।</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">ନିରପେକ୍ଷତା</h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold">କୌଣସି ପକ୍ଷ ନନେଇ ଆମେ ସବୁବେଳେ ସତ୍ୟର ସପକ୍ଷରେ ରହିଥାଉ।</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">ଲୋକଙ୍କ ସ୍ୱର</h3>
                <p class="text-slate-400 text-sm leading-relaxed font-odia font-bold">ସାଧାରଣ ଜନତାଙ୍କ ସମସ୍ୟାକୁ ସରକାରଙ୍କ ପାଖରେ ପହଞ୍ଚାଇବା ଆମର ମୁଖ୍ୟ ଦାୟିତ୍ୱ।</p>
            </div>
        </div>
    </div>
</main>