@extends('layouts.admin', ['heading' => 'Developer Info', 'subheading' => 'Technology and build credits'])

@section('content')
    <style>
        .dev-shell { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(148,163,184,.35); background: linear-gradient(125deg,#020617,#0f172a 45%,#1d4ed8); padding: 28px; color: #e2e8f0; box-shadow: 0 30px 70px rgba(2,6,23,.45); }
        .dev-shell::before, .dev-shell::after { content: ""; position: absolute; border-radius: 999px; filter: blur(2px); opacity: .35; }
        .dev-shell::before { width: 280px; height: 280px; top: -120px; right: -70px; background: radial-gradient(circle, #22d3ee 0%, transparent 65%); animation: dev-float-a 8s ease-in-out infinite; }
        .dev-shell::after { width: 260px; height: 260px; bottom: -110px; left: -60px; background: radial-gradient(circle, #a78bfa 0%, transparent 65%); animation: dev-float-b 10s ease-in-out infinite; }
        .dev-content { position: relative; z-index: 2; }
        .dev-kicker { display: inline-block; border-radius: 999px; border: 1px solid rgba(148,163,184,.35); background: rgba(15,23,42,.55); padding: 7px 12px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
        .dev-title { margin-top: 14px; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.2; }
        .dev-grid { margin-top: 20px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
        .dev-card { border-radius: 16px; border: 1px solid rgba(148,163,184,.25); background: rgba(2,6,23,.35); padding: 16px; backdrop-filter: blur(6px); transition: transform .25s ease, border-color .25s ease; }
        .dev-card:hover { transform: translateY(-3px); border-color: rgba(56,189,248,.55); }
        .dev-label { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: #93c5fd; }
        .dev-value { margin-top: 7px; font-size: 1.05rem; font-weight: 600; color: #f8fafc; word-break: break-word; }
        .dev-link { color: #67e8f9; text-decoration: none; font-weight: 600; }
        .dev-link:hover { text-decoration: underline; }
        @keyframes dev-float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
        @keyframes dev-float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
    </style>

    <section class="dev-shell">
        <div class="dev-content">
            <span class="dev-kicker">Developer Credits</span>
            <h2 class="dev-title">Made By AKRS WORLD</h2>
            <p class="mt-2 max-w-2xl text-slate-300">
                Powered By AKRSera Technologies Pvt. Ltd.
            </p>
            <p class="mt-1 max-w-2xl text-sm text-cyan-200/90">
                Made By AKRS WORLD | Powered By AKRSera Technologies Pvt. Ltd. | 820-768-8259 | dev@akrsera.in
            </p>

            <div class="dev-grid">
                <article class="dev-card">
                    <div class="dev-label">Build Partner</div>
                    <div class="dev-value">AKRS WORLD</div>
                </article>
                <article class="dev-card">
                    <div class="dev-label">Technology Company</div>
                    <div class="dev-value">AKRSera Technologies Pvt. Ltd.</div>
                </article>
                <article class="dev-card">
                    <div class="dev-label">Phone</div>
                    <div class="dev-value">820-768-8259</div>
                </article>
                <article class="dev-card">
                    <div class="dev-label">Email</div>
                    <div class="dev-value">dev@akrsera.in</div>
                </article>
                <article class="dev-card">
                    <div class="dev-label">Website 1</div>
                    <div class="dev-value">
                        <a class="dev-link" href="https://akrsworld.in" target="_blank" rel="noopener noreferrer">akrsworld.in</a>
                    </div>
                </article>
                <article class="dev-card">
                    <div class="dev-label">Website 2</div>
                    <div class="dev-value">
                        <a class="dev-link" href="https://akrsera.in" target="_blank" rel="noopener noreferrer">akrsera.in</a>
                    </div>
                </article>
            </div>
        </div>
    </section>
@endsection