<footer class="space-y-4 lg:space-y-6 p-4">
<div class="flex flex-col gap-6 md:gap-8">
<!-- TOP SECTION -->
<div class="flex flex-col md:flex-row justify-between w-full items-start gap-4">
<a href="#" class="focus:outline-none focus:ring-2 focus:ring-blue-600 rounded">
<img src={illustrasiImage} class="w-36" />
</a>
<!-- Social – desktop -->
<div class="hidden md:flex flex-row gap-4">
<button
type="button"
class="ina-button ina-button--link ina-button--sm text-neutral-900 hover:text-blue-600 focus:text-blue-600 transition-colors"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"
></path><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path
d="M16.5 7.5l0 .01"></path></svg
>
</span>
<span class="ina-button__text">Instagram</span>
</button>
<button
type="button"
class="ina-button ina-button--link ina-button--sm text-neutral-900 hover:text-blue-600 focus:text-blue-600 transition-colors"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path><path d="M8 11l0 5"></path><path d="M8 8l0 .01"></path><path d="M12 16l0 -5"
></path><path d="M16 16v-3a2 2 0 0 0 -4 0"></path></svg
>
</span>
<span class="ina-button__text">LinkedIn</span>
</button>
</div>
</div>
<!-- MIDDLE SECTION -->
<div class="flex flex-col md:flex-row gap-6 md:gap-8">
<div class="flex flex-col gap-2 md:gap-4">
<h5 class="text-xs font-semibold text-neutral-900">Perusahaan</h5>
<div class="flex flex-col gap-2 w-fit">
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>Tentang</a
>
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>Karier</a
>
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>Narahubung</a
>
</div>
</div>
<div class="flex flex-col gap-2 md:gap-4">
<h5 class="text-xs font-semibold text-neutral-900">Layanan</h5>
<div class="flex flex-col gap-2 w-fit">
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>Beranda</a
>
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>Panduan</a
>
<a
href="#"
class="text-sm font-medium text-neutral-700 hover:text-blue-600 focus:text-blue-600 focus:outline-none transition-colors"
>FAQ</a
>
</div>
</div>
</div>
</div>
<!-- BOTTOM SECTION -->
<div>
<div class="flex flex-col items-start gap-6 md:gap-8">
<!-- Social -->
<div class="flex md:hidden flex-col gap-4">
<button
type="button"
class="ina-button ina-button--link ina-button--sm text-neutral-900 hover:text-blue-600 focus:text-blue-600 transition-colors justify-start"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z"
></path><path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path><path
d="M16.5 7.5l0 .01"></path></svg
>
</span>
<span class="ina-button__text">Instagram</span>
</button>
<button
type="button"
class="ina-button ina-button--link ina-button--sm text-neutral-900 hover:text-blue-600 focus:text-blue-600 transition-colors justify-start"
>
<span class="ina-button__icon ina-button__icon--prefix">
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
></path><path d="M8 11l0 5"></path><path d="M8 8l0 .01"></path><path d="M12 16l0 -5"
></path><path d="M16 16v-3a2 2 0 0 0 -4 0"></path></svg
>
</span>
<span class="ina-button__text">LinkedIn</span>
</button>
</div>
<hr class="w-full border-neutral-200" />
<div class="flex flex-col md:flex-row justify-between items-center w-full gap-2">
<a href="#" class="focus:outline-none focus:ring-2 focus:ring-blue-600 rounded">
<img src={illustrasiImage} class="w-20" />
</a>
<div class="text-xs">© 2026 Your Company. All rights reserved.</div>
</div>
</div>
</div>
</footer>
