@extends('layout.user')
@section('title', 'DEVELOPER')
@section('content')

    @php 
            $gs = \App\Models\GeneralSetting::first();
        // ডাটাবেসে ছবি থাকলে সেটা দেখাবে, না থাকলে এই প্রফেশনাল অ্যাভাটারটি দেখাবে
        $photoPath = $gs?->developer_photo ? (preg_match('/^https?:\/\//i', $gs->developer_photo) ? $gs->developer_photo : asset(ltrim($gs->developer_photo, '/'))) : 'https://cdn-icons-png.flaticon.com/512/6840/6840478.png'; 
    @endphp

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* এনিমেশন কি-ফ্রেম */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dev-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 80vh;
            padding: 20px 0;
        }

        .card {
            background: white;
            width: 95%;
            max-width: 400px;
            border-radius: 25px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            text-align: center;
            padding-bottom: 30px;
            animation: fadeInUp 0.8s ease-out;
        }

        .header-bg {
            height: 150px;
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            position: relative;
        }

        .profile-img-container {
            width: 120px;
            height: 120px;
            background: #fff;
            border-radius: 50%;
            border: 5px solid white;
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s ease;
            overflow: hidden;
        }

        .card:hover .profile-img-container {
            transform: translateX(-50%) scale(1.05);
        }

        .profile-img-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .content {
            margin-top: 70px;
            padding: 0 20px;
        }

        .content h1 {
            font-size: 24px;
            color: #1a1a1a;
            margin: 5px 0;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 800;
        }

        .content p.title {
            color: #666;
            font-size: 16px;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .info-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            color: #444;
            margin-bottom: 8px;
            font-size: 15px;
        }

        .info-row i {
            color: #007bff;
        }

        .btn-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 25px;
            padding: 0 10px;
        }

        .btn {
            text-decoration: none;
            padding: 12px;
            border-radius: 30px;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 14px;
            border: 2px solid #ddd;
            transition: all 0.3s ease;
        }

        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .whatsapp {
            color: #25D366;
            border-color: #25D366;
        }

        .whatsapp:hover {
            background: #25D366;
            color: white;
        }

        .telegram {
            color: #0088cc;
            border-color: #0088cc;
        }

        .telegram:hover {
            background: #0088cc;
            color: white;
        }

        .facebook {
            color: #1877F2;
            border-color: #1877F2;
        }

        .facebook:hover {
            background: #1877F2;
            color: white;
        }

        .youtube {
            color: #FF0000;
            border-color: #FF0000;
        }

        .youtube:hover {
            background: #FF0000;
            color: white;
        }

        .tiktok {
            color: #000;
            border-color: #000;
        }

        .tiktok:hover {
            background: #000;
            color: white;
        }
    </style>

    <div class="dev-container">
        <div class="card">
            <div class="header-bg">
                <div class="profile-img-container">
                    <img src="{{ $photoPath }}" alt="Developer ">
                </div>
            </div>

            <div class="content">
                <h1>DEVELOPER BY TASK EARNING</h1>
                <p class="title">Professional Web & App Developer</p>

                <div class="info-row">
                    <i class="fa-solid fa-location-dot"></i>
                    <span>Dhaka, Bangladesh</span>
                </div>
                <div class="info-row">
                    <i class="fa-solid fa-phone"></i>
                    <span>+8801897210197</span>
                </div>

                <div class="btn-grid">
                    <a href="https://wa.link/0sp1r1" class="btn whatsapp" target="_blank">
                        <i class="fab fa-whatsapp"></i> WhatsApp
                    </a>

                    <a href="https://t.me/DeveloperByAbiR" class="btn telegram" target="_blank">
                        <i class="fab fa-telegram"></i> Telegram
                    </a>

                    <a href="https://www.facebook.com/share/1EHg6cBNpw" class="btn facebook" target="_blank">
                        <i class="fab fa-facebook"></i> Facebook
                    </a>
                </div>
            </div>
        </div>
    </div>

@endsection
