@extends('layouts.master')
@section('title', 'Profile Edit')
  <div class="flex min-h-screen">
    @include('layouts.navbar')

    <!-- MAIN -->
    <main class="flex-1 p-8">

      <!-- HEADER -->
      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-5 mb-8">

        <div>

          <h2 class="text-5xl font-bold text-slate-900">
            Store Profile
          </h2>

          <p class="text-slate-500 mt-2 text-lg">
            Manage your store information and branding.
          </p>

        </div>

        <button
          class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-4 rounded-2xl shadow-md transition flex items-center gap-3 w-fit">

          <i class="fa-solid fa-floppy-disk"></i>
          Save Changes

        </button>

      </div>

      <!-- GRID -->
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">

        <!-- LEFT -->
        <div class="xl:col-span-2 space-y-6">

          <!-- STORE INFO -->
          <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8">

            <div class="flex items-center justify-between mb-8">

              <div>

                <h3 class="text-3xl font-bold text-slate-900">
                  Store Information
                </h3>

                <p class="text-slate-500 mt-1">
                  Basic information about your store.
                </p>

              </div>

              <div
                class="w-14 h-14 rounded-2xl bg-blue-100 flex items-center justify-center text-blue-600 text-xl">

                <i class="fa-solid fa-store"></i>

              </div>

            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

              <!-- STORE NAME -->
              <div>

                <label class="block text-sm font-semibold text-slate-600 mb-3">
                  Store Name
                </label>

                <input
                  type="text"
                  value="StreamSell Official"
                  class="w-full h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition"
                />

              </div>

              <!-- PHONE -->
              <div>

                <label class="block text-sm font-semibold text-slate-600 mb-3">
                  Phone Number
                </label>

                <input
                  type="text"
                  value="+62 812 3456 7890"
                  class="w-full h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition"
                />

              </div>

              <!-- EMAIL -->
              <div class="md:col-span-2">

                <label class="block text-sm font-semibold text-slate-600 mb-3">
                  Email Address
                </label>

                <input
                  type="email"
                  value="store@streamsell.com"
                  class="w-full h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition"
                />

              </div>

              <!-- DESCRIPTION -->
              <div class="md:col-span-2">

                <label class="block text-sm font-semibold text-slate-600 mb-3">
                  Store Description
                </label>

                <textarea
                  rows="5"
                  class="w-full p-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none resize-none focus:ring-4 focus:ring-blue-100 focus:border-blue-500 transition">Your trusted destination for premium gadgets, gaming setups, and live shopping experiences.</textarea>

              </div>

            </div>

          </div>

          <!-- SOCIAL LINKS -->
          <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-8">

            <div class="flex items-center justify-between mb-8">

              <div>

                <h3 class="text-3xl font-bold text-slate-900">
                  Social Media
                </h3>

                <p class="text-slate-500 mt-1">
                  Connect your social media accounts.
                </p>

              </div>

              <div
                class="w-14 h-14 rounded-2xl bg-purple-100 flex items-center justify-center text-purple-600 text-xl">

                <i class="fa-solid fa-share-nodes"></i>

              </div>

            </div>

            <div class="space-y-5">

              <!-- INSTAGRAM -->
              <div class="flex items-center gap-4">

                <div
                  class="w-14 h-14 rounded-2xl bg-pink-100 text-pink-600 flex items-center justify-center text-xl shrink-0">

                  <i class="fa-brands fa-instagram"></i>

                </div>

                <input
                  type="text"
                  value="instagram.com/streamsell"
                  class="flex-1 h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-pink-100"
                />

              </div>

              <!-- TIKTOK -->
              <div class="flex items-center gap-4">

                <div
                  class="w-14 h-14 rounded-2xl bg-slate-100 text-slate-700 flex items-center justify-center text-xl shrink-0">

                  <i class="fa-brands fa-tiktok"></i>

                </div>

                <input
                  type="text"
                  value="tiktok.com/@streamsell"
                  class="flex-1 h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-slate-200"
                />

              </div>

              <!-- YOUTUBE -->
              <div class="flex items-center gap-4">

                <div
                  class="w-14 h-14 rounded-2xl bg-red-100 text-red-600 flex items-center justify-center text-xl shrink-0">

                  <i class="fa-brands fa-youtube"></i>

                </div>

                <input
                  type="text"
                  value="youtube.com/@streamsell"
                  class="flex-1 h-14 px-5 rounded-2xl border border-slate-200 bg-slate-50 outline-none focus:ring-4 focus:ring-red-100"
                />

              </div>

            </div>

          </div>

        </div>

        <!-- RIGHT -->
        <div class="space-y-6">

          <!-- PROFILE CARD -->
          <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">

            <!-- COVER -->
            <div
              class="h-40 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 relative">

              <button
                class="absolute top-4 right-4 w-10 h-10 rounded-xl bg-white/20 backdrop-blur-md text-white hover:bg-white/30 transition">

                <i class="fa-solid fa-camera"></i>

              </button>

            </div>

            <!-- PROFILE -->
            <div class="px-6 pb-6">

              <div class="-mt-16 flex flex-col items-center">

                <div class="relative">

                  <img
                    src="https://i.pravatar.cc/150?img=12"
                    class="w-32 h-32 rounded-3xl border-4 border-white object-cover shadow-lg"
                  />

                  <button
                    class="absolute bottom-2 right-2 w-10 h-10 rounded-xl bg-blue-600 text-white shadow-lg hover:bg-blue-700 transition">

                    <i class="fa-solid fa-pen"></i>

                  </button>

                </div>

                <h3 class="text-3xl font-bold text-slate-900 mt-5">
                  StreamSell Official
                </h3>

                <p class="text-slate-500 mt-1">
                  Electronics & Gaming
                </p>

                <!-- STATS -->
                <div class="grid grid-cols-3 gap-4 w-full mt-8">

                  <div class="bg-slate-50 rounded-2xl p-4 text-center">

                    <h4 class="text-2xl font-bold text-slate-900">
                      24
                    </h4>

                    <p class="text-slate-500 text-sm mt-1">
                      Live Sessions
                    </p>

                  </div>

                  <div class="bg-slate-50 rounded-2xl p-4 text-center">

                    <h4 class="text-2xl font-bold text-slate-900">
                      186
                    </h4>

                    <p class="text-slate-500 text-sm mt-1">
                      Orders
                    </p>

                  </div>

                  <div class="bg-slate-50 rounded-2xl p-4 text-center">

                    <h4 class="text-2xl font-bold text-slate-900">
                      4.9
                    </h4>

                    <p class="text-slate-500 text-sm mt-1">
                      Rating
                    </p>

                  </div>

                </div>

              </div>

            </div>

          </div>

          <!-- STORE SETTINGS -->
          <div class="bg-white rounded-3xl border border-slate-200 shadow-sm p-6">

            <div class="flex items-center justify-between mb-6">

              <div>

                <h3 class="text-2xl font-bold text-slate-900">
                  Store Settings
                </h3>

                <p class="text-slate-500 text-sm mt-1">
                  Configure store options.
                </p>

              </div>

              <div
                class="w-12 h-12 rounded-2xl bg-green-100 text-green-600 flex items-center justify-center">

                <i class="fa-solid fa-gear"></i>

              </div>

            </div>

            <div class="space-y-5">

              <!-- SWITCH -->
              <div class="flex items-center justify-between">

                <div>

                  <h4 class="font-semibold text-slate-800">
                    Public Store
                  </h4>

                  <p class="text-sm text-slate-500 mt-1">
                    Make your store visible to everyone.
                  </p>

                </div>

                <button
                  class="w-14 h-8 bg-blue-600 rounded-full relative">

                  <span
                    class="absolute right-1 top-1 w-6 h-6 rounded-full bg-white">
                  </span>

                </button>

              </div>

              <!-- SWITCH -->
              <div class="flex items-center justify-between">

                <div>

                  <h4 class="font-semibold text-slate-800">
                    Notifications
                  </h4>

                  <p class="text-sm text-slate-500 mt-1">
                    Receive live session alerts.
                  </p>

                </div>

                <button
                  class="w-14 h-8 bg-blue-600 rounded-full relative">

                  <span
                    class="absolute right-1 top-1 w-6 h-6 rounded-full bg-white">
                  </span>

                </button>

              </div>

              <!-- SWITCH -->
              
            </div>

          </div>

        </div>

      </div>

    </main>

  </div>