<!-- ================= CONTACT SECTION ================= -->
<section class="pt-0 pb-12 sm:pt-24 sm:pb-16">

    <div class="mx-auto w-full px-5 sm:px-6 lg:px-20">

        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">

            <!-- IMAGE : Desktop only -->
            <div class="flex justify-center order-2 lg:order-1">
          <picture>
            <!-- Desktop -->
            <source media="(min-width: 1024px)" srcset="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/eggfirst-cup.jpg">
            <!-- Mobile default -->
            <img
              src="https://pub-d0247e56e5b842aa9e58b7d4adb01047.r2.dev/ef-about/CUPS.jpg"
              alt="Eggfirst Cups"
              class="w-full max-w-[320px] lg:max-w-full h-auto object-contain"
            />
          </picture>
        </div>

            <!-- RIGHT SIDE -->
            <div
                class="order-1 lg:order-2
                       flex flex-col gap-0 w-full
                       lg:justify-center
                       lg:min-h-[calc(100svh-180px)]
                       lg:py-10
                       lg:pl-[110px]">

                <!-- TITLE -->
                <div>
                    <h2
                        class="mt-4 sm:mt-0
           text-[26px] sm:text-[32px] lg:text-[40px]
           font-bold leading-tight mb-3">
                        Let's meet over
                        <br class="block sm:hidden">
                        a cup of coffee.
                    </h2>


                  
                </div>

                <!-- FORM -->
                <form wire:submit.prevent="submit"
      class="space-y-4 sm:space-y-5 lg:space-y-6"
      novalidate>

    <!-- Honeypot -->
    <input type="text" wire:model="website" class="hidden">

    <!-- Required -->
    <p class="text-xs text-black/50 mt-1">
        *Required fields
    </p>

    <!-- NAME -->
    <div>
        <input type="text"
            wire:model.defer="name"
            placeholder="Name*"
            class="w-full bg-transparent
                   placeholder:text-black/70
                   text-[14px] sm:text-[15px] font-medium
                   border border-black
                   px-3 sm:px-4 py-3
                   outline-none">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="mt-1 text-xs text-red-600"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <!-- PHONE -->
    <div>
        <input type="tel"
            wire:model.defer="phone"
            placeholder="Phone Number*"
            maxlength="10"
            inputmode="numeric"
            class="w-full bg-transparent
                   placeholder:text-black/70
                   text-[14px] sm:text-[15px] font-medium
                   border border-black
                   px-3 sm:px-4 py-3
                   outline-none">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['phone'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="mt-1 text-xs text-red-600"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <!-- EMAIL -->
    <div>
        <input type="email"
            wire:model.defer="email"
            placeholder="Email*"
            class="w-full bg-transparent
                   placeholder:text-black/70
                   text-[14px] sm:text-[15px] font-medium
                   border border-black
                   px-3 sm:px-4 py-3
                   outline-none">
        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="mt-1 text-xs text-red-600"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <!-- SERVICES -->
    <div class="relative">
        <select wire:model.defer="service"
            class="w-full bg-transparent
                   text-[14px] sm:text-[15px] font-medium
                   border border-black
                   px-3 sm:px-4 py-3 pr-10
                   appearance-none outline-none">
            <option value="">Choose Services*</option>
            <option>Strategy & Consulting</option>
            <option>Brand Building & Communication</option>
            <option>Digital & Experiential</option>
            <option>Digital Marketing</option>
            <option>Celebrity & Influencer Marketing</option>
        </select>

        <!-- Arrow -->
        <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
            <svg class="w-4 h-4 text-black" fill="none" stroke="currentColor" stroke-width="2"
                viewBox="0 0 24 24">
                <path d="M6 9l6 6 6-6" />
            </svg>
        </span>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['service'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
            <p class="mt-1 text-xs text-red-600"><?php echo e($message); ?></p>
        <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
    </div>

    <!-- MESSAGE -->
    <div>
        <textarea rows="4"
            wire:model.defer="message"
            placeholder="Message (Optional)"
            class="w-full bg-transparent
                   placeholder:text-black/70
                   text-[14px] sm:text-[15px] font-medium
                   border border-black
                   px-3 sm:px-4 py-3
                   outline-none resize-none"></textarea>
    </div>

    <!-- CONSENT -->
    <div class="flex items-start gap-3 text-xs sm:text-sm text-black/70">
        <input type="checkbox"
            wire:model.defer="consent"
            class="mt-1 shrink-0">

        <p class="leading-relaxed">
            I agree to allow Eggfirst to store and process my personal data.
            <br class="hidden sm:block">
            Rest assured, your confidential information stays safe with us.
        </p>
    </div>

    <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__errorArgs = ['consent'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
        <p class="text-xs text-red-600 -mt-2"><?php echo e($message); ?></p>
    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

    <!-- LOADER -->
    <div wire:loading wire:target="submit"
         class="text-sm text-black flex items-center gap-2">
        <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"
                fill="none" opacity="0.3" />
            <path d="M22 12a10 10 0 0 1-10 10"
                stroke="currentColor" stroke-width="3" fill="none" />
        </svg>
        Submitting...
    </div>

    <!-- SUBMIT -->
    <button type="submit"
        wire:loading.attr="disabled"
        class="w-full bg-black text-white
               py-3.5 text-sm font-semibold
               border border-black
               hover:bg-white hover:text-black
               transition">
        <span wire:loading.remove>Submit</span>
        <span wire:loading>Processing...</span>
    </button>

</form>


            </div>
        </div>
    </div>
</section>
<?php /**PATH /home1/eggfirst/public_html/resources/views/livewire/contact-form.blade.php ENDPATH**/ ?>