@extends('layouts.app')
@section('title', 'KiruDev Technologies — Engineering the Future')

@section('content')

{{-- ═══════════════ HERO ═══════════════ --}}
<section class="relative overflow-hidden" style="background: #fff; padding: 7rem 0 5rem;">

    {{-- Subtle dot-grid background --}}
    <div class="absolute inset-0 pointer-events-none" style="background-image: radial-gradient(circle, #e5e7eb 1px, transparent 1px); background-size: 28px 28px; opacity: 0.6;"></div>
    {{-- Blue accent block top-right --}}
    <div class="absolute top-0 right-0 w-1/3 h-full pointer-events-none hidden lg:block"
         style="background: linear-gradient(135deg, #eef0ff 0%, #fff 60%);"></div>

    <div class="relative max-w-7xl mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">

            {{-- Left content --}}
            <div class="lg:col-span-7">
                <div class="mb-6">
                    <div class="cac-badge mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-3 h-3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 0 1-1.043 3.296 3.745 3.745 0 0 1-3.296 1.043A3.745 3.745 0 0 1 12 21c-1.268 0-2.39-.63-3.068-1.593a3.745 3.745 0 0 1-3.296-1.043 3.745 3.745 0 0 1-1.043-3.296A3.745 3.745 0 0 1 3 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 0 1 1.043-3.296 3.745 3.745 0 0 1 3.296-1.043A3.745 3.745 0 0 1 12 3c1.268 0 2.39.63 3.068 1.593a3.745 3.745 0 0 1 3.296 1.043 3.745 3.745 0 0 1 1.043 3.296A3.745 3.745 0 0 1 21 12Z" />
                        </svg>
                        CAC Registered · Nigeria
                    </div>
                </div>

                <h1 style="font-family:'Fraunces',serif; font-size:clamp(2.6rem,5.5vw,4rem); font-weight:700; line-height:1.1; letter-spacing:-0.02em; color: #0f0f14; margin-bottom:1.5rem;">
                    We Build Digital<br>
                    Infrastructure <em style="font-style:italic; color: #2d3aff;">That Scales.</em>
                </h1>

                <p style="font-size:1.05rem; color:#6b6b7a; line-height:1.75; max-width:32rem; margin-bottom:2.5rem;">
                    KiruDev Technologies engineers high-performance web apps, fintech payment systems, USSD telecoms solutions, and enterprise cybersecurity — from Nigeria, for the world.
                </p>

                <div class="flex flex-wrap gap-3 mb-12">
                    <a href="#contact" class="btn btn-primary">
                        Start a Project
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3.5 h-3.5"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
                    </a>
                    <a href="{{ route('portfolio.index') }}" class="btn btn-outline">View Our Work</a>
                </div>

                {{-- Stats row --}}
                <div class="flex flex-wrap gap-8 pt-8" style="border-top: 1px solid #e5e7eb;">
                    @foreach([['9+','Team Members'],['4','Specializations'],['2','Domains'],['∞','Scale']] as [$n,$l])
                    <div>
                        <div style="font-family:'Fraunces',serif; font-size:1.8rem; font-weight:700; color:#0f0f14; line-height:1;">{{ $n }}</div>
                        <div style="font-size:0.72rem; color:#9ca3af; margin-top:0.2rem; font-weight:500; letter-spacing:0.04em;">{{ $l }}</div>
                    </div>
                    @endforeach
                </div>
            </div>

            {{-- Right: service cards stack --}}
            <div class="lg:col-span-5 hidden lg:grid grid-cols-2 gap-4">
                @foreach([
                    ['Web Dev','Custom applications built for scale.','#eef0ff','#2d3aff'],
                    ['Fintech','Payment integrations & KYC flows.','#e6f5f0','#1a7a5e'],
                    ['USSD / VTU','Telecoms automation & APIs.','#fdf8e8','#c9a227'],
                    ['Security','Pen testing & QA audits.','#fff0f0','#dc2626'],
                ] as $i => [$title,$desc,$bg,$clr])
                <div class="rounded-2xl p-5" style="background:{{ $bg }}; border:1px solid {{ $clr }}22;">
                    <div class="w-7 h-7 rounded-lg mb-3 flex items-center justify-center" style="background:{{ $clr }}22;">
                        <div class="w-2.5 h-2.5 rounded-sm" style="background:{{ $clr }};"></div>
                    </div>
                    <h3 style="font-family:'Fraunces',serif; font-size:0.95rem; font-weight:700; color:#0f0f14; margin-bottom:0.3rem;">{{ $title }}</h3>
                    <p style="font-size:0.75rem; color:#6b6b7a; line-height:1.5;">{{ $desc }}</p>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

{{-- ═══════════════ SERVICES ═══════════════ --}}
<section id="services" class="py-24" style="background: #f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        <div class="mb-14 reveal">
            <p class="eyebrow mb-3">What We Build</p>
            <h2 style="font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:700; color:#0f0f14; letter-spacing:-0.02em; max-width:24rem; line-height:1.15;">Core Specializations</h2>
            <div class="section-rule"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach([
                ['code-bracket-square','Web & Software Dev','We architect scalable web applications, SaaS platforms, and enterprise software tailored to your exact workflows.',['Laravel','React','REST APIs'],'#2d3aff'],
                ['credit-card','Fintech & Payments','Secure payment gateway integrations, intelligent form design, and financial automation for banks and fintechs.',['Paystack','Flutterwave','KYC'],'#1a7a5e'],
                ['signal','USSD & Telecom / VTU','Custom USSD menus, automated VTU APIs, and telecoms middleware that reach every mobile user — even offline.',['USSD','VTU','Telecoms'],'#c9a227'],
                ['shield-check','Cybersecurity & QA','Rigorous penetration testing, vulnerability assessments, and end-to-end QA to ensure your systems are bulletproof.',['Pen Testing','OWASP','QA'],'#dc2626'],
            ] as [$icon,$title,$desc,$tags,$clr])
            <div class="card p-7 reveal">
                <div class="w-10 h-10 rounded-xl flex items-center justify-center mb-5" style="background:{{ $clr }}15; border:1px solid {{ $clr }}30;">
                    @if($icon==='code-bracket-square')
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $clr }}" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z" /></svg>
                    @elseif($icon==='credit-card')
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $clr }}" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z" /></svg>
                    @elseif($icon==='signal')
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $clr }}" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9.348 14.652a3.75 3.75 0 0 1 0-5.304m5.304 0a3.75 3.75 0 0 1 0 5.304m-7.425 2.121a6.75 6.75 0 0 1 0-9.546m9.546 0a6.75 6.75 0 0 1 0 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12Z" /></svg>
                    @else
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="{{ $clr }}" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z" /></svg>
                    @endif
                </div>
                <h3 style="font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:#0f0f14; margin-bottom:0.6rem;">{{ $title }}</h3>
                <p style="font-size:0.82rem; color:#6b6b7a; line-height:1.7; margin-bottom:1rem;">{{ $desc }}</p>
                <div class="flex flex-wrap gap-1.5">
                    @foreach($tags as $tag)<span class="tag">{{ $tag }}</span>@endforeach
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ═══════════════ FEATURED PORTFOLIO ═══════════════ --}}
@if($featuredProjects->count())
<section class="py-24">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="flex items-end justify-between mb-14">
            <div class="reveal">
                <p class="eyebrow mb-3">What We've Shipped</p>
                <h2 style="font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:700; color:#0f0f14; letter-spacing:-0.02em; line-height:1.15;">Featured Projects</h2>
                <div class="section-rule"></div>
            </div>
            <a href="{{ route('portfolio.index') }}" class="btn btn-outline hidden md:inline-flex">View All</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($featuredProjects as $p)
            <article class="card reveal">
                <div class="aspect-video bg-gray-100 flex items-center justify-center" style="background: linear-gradient(135deg, #eef0ff, #e6f5f0);">
                    @if($p->cover_image)
                        <img src="{{ $p->cover_image }}" alt="{{ $p->title }}" class="w-full h-full object-cover">
                    @else
                        <span style="font-family:'Fraunces',serif; font-size:2rem; color:#2d3aff; opacity:0.3;">{{ substr($p->title,0,1) }}</span>
                    @endif
                </div>
                <div class="p-6">
                    <div class="flex items-center gap-2 mb-3">
                        <span class="tag-accent tag">{{ ucfirst($p->category) }}</span>
                        @if($p->completed_at)<span style="font-size:0.7rem; color:#9ca3af;">{{ $p->completed_at->format('M Y') }}</span>@endif
                    </div>
                    <h3 style="font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; color:#0f0f14; margin-bottom:0.5rem;">{{ $p->title }}</h3>
                    <p style="font-size:0.82rem; color:#6b6b7a; line-height:1.6; margin-bottom:1rem;">{{ Str::limit($p->summary, 100) }}</p>
                    <a href="{{ route('portfolio.show', $p) }}" style="font-size:0.8rem; font-weight:600; color:#2d3aff; text-decoration:none; display:inline-flex; align-items:center; gap:0.3rem;">
                        View Case Study
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" class="w-3 h-3"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>
                    </a>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════ TEAM PREVIEW ═══════════════ --}}
<section id="team" class="py-24" style="background: #f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="flex items-end justify-between mb-14">
            <div class="reveal">
                <p class="eyebrow mb-3">The People</p>
                <h2 style="font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:700; color:#0f0f14; letter-spacing:-0.02em; line-height:1.15;">Meet the Team</h2>
                <div class="section-rule"></div>
            </div>
            <a href="{{ route('team.index') }}" class="btn btn-outline hidden md:inline-flex">Full Profiles</a>
        </div>

        @php
        $deptColors = ['executive'=>'indigo','technical'=>'blue','marketing'=>'emerald','support'=>'amber'];
        $deptLabels = ['executive'=>'Executive Management','technical'=>'Technical & Security','marketing'=>'Marketing & Growth','support'=>'Customer Care & Support'];
        @endphp

        @foreach($team as $dept => $members)
        <div class="mb-12 reveal">
            <h3 style="font-size:0.78rem; font-weight:600; color:#9ca3af; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem;">
                <span style="width:20px; height:1px; background:#e5e7eb; display:inline-block;"></span>
                {{ $deptLabels[$dept] ?? ucfirst($dept) }}
            </h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                @foreach($members as $m)
                <a href="{{ route('team.show', $m) }}" class="card p-5 flex items-start gap-4 group" style="text-decoration:none;">
                    @if($m->photo)
                        <img src="{{ $m->photo }}" alt="{{ $m->name }}" class="w-12 h-12 rounded-xl object-cover flex-shrink-0">
                    @else
                        <div class="avatar avatar-{{ $deptColors[$m->department] ?? 'slate' }}">{{ $m->initials ?? substr($m->name,0,2) }}</div>
                    @endif
                    <div class="min-w-0">
                        <h4 style="font-family:'Fraunces',serif; font-size:0.9rem; font-weight:700; color:#0f0f14; line-height:1.2; margin-bottom:0.2rem; transition:color 0.2s;" class="group-hover:text-blue-600">{{ $m->name }}</h4>
                        <p style="font-size:0.72rem; color:#6b6b7a; line-height:1.35;">{{ $m->role }}</p>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>
</section>

{{-- ═══════════════ LATEST BLOG ═══════════════ --}}
@if($latestPosts->count())
<section class="py-24">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="flex items-end justify-between mb-14">
            <div class="reveal">
                <p class="eyebrow mb-3">Insights & Updates</p>
                <h2 style="font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:700; color:#0f0f14; letter-spacing:-0.02em; line-height:1.15;">Latest from the Blog</h2>
                <div class="section-rule"></div>
            </div>
            <a href="{{ route('blog.index') }}" class="btn btn-outline hidden md:inline-flex">All Posts</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($latestPosts as $post)
            <article class="card reveal" style="display:flex; flex-direction:column;">
                @if($post->cover_image)
                <div class="aspect-video overflow-hidden">
                    <img src="{{ $post->cover_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover">
                </div>
                @endif
                <div class="p-6 flex flex-col flex-1">
                    <div class="flex items-center gap-2 mb-3">
                        @if($post->category)<span class="tag-accent tag">{{ $post->category }}</span>@endif
                        <span style="font-size:0.7rem;color:#9ca3af;">{{ $post->read_time }} min read</span>
                    </div>
                    <h3 style="font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:#0f0f14; margin-bottom:0.5rem; line-height:1.35;">{{ $post->title }}</h3>
                    <p style="font-size:0.82rem; color:#6b6b7a; line-height:1.6; flex:1; margin-bottom:1rem;">{{ Str::limit($post->excerpt, 100) }}</p>
                    <div class="flex items-center justify-between mt-auto pt-4" style="border-top:1px solid #f3f4f6;">
                        @if($post->author)
                        <span style="font-size:0.75rem;color:#9ca3af;">By {{ $post->author->name }}</span>
                        @endif
                        <a href="{{ route('blog.show', $post) }}" style="font-size:0.78rem; font-weight:600; color:#2d3aff; text-decoration:none;">Read →</a>
                    </div>
                </div>
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ═══════════════ CONTACT ═══════════════ --}}
<section id="contact" class="py-24" style="background: #f8f8fa;">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">

            <div class="reveal">
                <p class="eyebrow mb-3">Get in Touch</p>
                <h2 style="font-family:'Fraunces',serif; font-size:clamp(1.8rem,3.5vw,2.5rem); font-weight:700; color:#0f0f14; letter-spacing:-0.02em; line-height:1.15; margin-bottom:1rem;">
                    Let's Build Something <em style="color:#2d3aff; font-style:italic;">Extraordinary.</em>
                </h2>
                <div class="section-rule"></div>
                <p style="font-size:0.9rem; color:#6b6b7a; line-height:1.75; margin-top:1rem; margin-bottom:2rem; max-width:30rem;">
                    Share your project brief and our technical team will respond within 24 hours with a tailored proposal.
                </p>
                <div class="space-y-4">
                    @foreach([['🌐','Corporate','kirudevtechnologies.com'],['⚙️','Infrastructure','kirudev.net.ng (ops/API)'],['✅','Status','CAC Registered · Nigeria']] as [$ico,$label,$val])
                    <div class="flex items-center gap-4">
                        <span style="font-size:1.1rem; width:2rem; text-align:center;">{{ $ico }}</span>
                        <div>
                            <p style="font-size:0.68rem; text-transform:uppercase; letter-spacing:0.1em; color:#9ca3af; font-weight:600;">{{ $label }}</p>
                            <p style="font-size:0.875rem; color:#2a2a35; font-weight:500;">{{ $val }}</p>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            <div class="reveal">
                @if(session('success'))
                <div role="alert" style="background:#e6f5f0; border:1px solid #b3ddd3; border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.5rem; display:flex; gap:0.75rem; align-items:flex-start;">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="#1a7a5e" class="w-5 h-5 flex-shrink-0 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /></svg>
                    <p style="font-size:0.875rem; color:#1a7a5e;">{{ session('success') }}</p>
                </div>
                @endif

                @if($errors->any())
                <div role="alert" style="background:#fff5f5; border:1px solid #fecaca; border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.5rem;">
                    <p style="font-size:0.8rem; font-weight:600; color:#dc2626; margin-bottom:0.5rem;">Please fix the following:</p>
                    <ul style="padding-left:1rem; list-style:disc;">
                        @foreach($errors->all() as $err)
                        <li style="font-size:0.78rem; color:#dc2626;">{{ $err }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('contact.submit') }}" method="POST" style="background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:2rem;" novalidate>
                    @csrf
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                        <div class="sm:col-span-2">
                            <label for="name" class="form-label">Full Name <span style="color:#dc2626;">*</span></label>
                            <input type="text" id="name" name="name" value="{{ old('name') }}" placeholder="e.g. Aminu Ibrahim" class="form-field @error('name') border-red-400 @enderror" required autocomplete="name">
                            @error('name')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="email" class="form-label">Email <span style="color:#dc2626;">*</span></label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" placeholder="you@company.com" class="form-field @error('email') border-red-400 @enderror" required autocomplete="email">
                            @error('email')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="phone" class="form-label">Phone</label>
                            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}" placeholder="+234 800 000 0000" class="form-field" autocomplete="tel">
                        </div>
                        <div>
                            <label for="service" class="form-label">Service <span style="color:#dc2626;">*</span></label>
                            <select id="service" name="service" class="form-field @error('service') border-red-400 @enderror" required>
                                <option value="" disabled {{ !old('service') ? 'selected' : '' }}>Select…</option>
                                <option value="web"          {{ old('service')=='web'?'selected':'' }}>Web & Software Dev</option>
                                <option value="fintech"      {{ old('service')=='fintech'?'selected':'' }}>Fintech & Payments</option>
                                <option value="ussd"         {{ old('service')=='ussd'?'selected':'' }}>USSD & Telecoms</option>
                                <option value="cybersecurity"{{ old('service')=='cybersecurity'?'selected':'' }}>Cybersecurity & QA</option>
                                <option value="other"        {{ old('service')=='other'?'selected':'' }}>Other</option>
                            </select>
                            @error('service')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label for="budget" class="form-label">Budget (NGN)</label>
                            <select id="budget" name="budget" class="form-field">
                                <option value="">Select range…</option>
                                <option value="under_500k" {{ old('budget')=='under_500k'?'selected':'' }}>Below ₦500,000</option>
                                <option value="500k_2m"    {{ old('budget')=='500k_2m'?'selected':'' }}>₦500k – ₦2M</option>
                                <option value="2m_10m"     {{ old('budget')=='2m_10m'?'selected':'' }}>₦2M – ₦10M</option>
                                <option value="above_10m"  {{ old('budget')=='above_10m'?'selected':'' }}>Above ₦10M</option>
                            </select>
                        </div>
                        <div class="sm:col-span-2">
                            <label for="message" class="form-label">Project Description <span style="color:#dc2626;">*</span></label>
                            <textarea id="message" name="message" rows="5" placeholder="Describe your project goals, timeline, and requirements…" class="form-field @error('message') border-red-400 @enderror" required>{{ old('message') }}</textarea>
                            @error('message')<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div class="mt-5 flex items-center gap-4">
                        <button type="submit" class="btn btn-primary">
                            Send Inquiry
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" /></svg>
                        </button>
                        <p style="font-size:0.7rem; color:#9ca3af;">CSRF protected · 24hr response</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>

@endsection