@extends('layouts.app')
@section('head')
@endsection
@section('content')
    <!-- Hero Section -->
    <section class="position-relative min-vh-100 gradient-bg overflow-hidden">
        <!-- Floating Elements -->
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>
        <div class="floating-element"></div>

        <div class="container py-5 position-relative" style="z-index: 10;">
            <div class="row justify-content-center align-items-center min-vh-100">
                <div class="col-12 col-lg-10">
                    <div class="hero-card rounded-4 p-5 shadow-lg text-center">
                        <h1 class="font-playfair display-1 fw-bold text-dark mb-4">
                            Tentang <span class="gradient-text">Azelyn cake shop</span>
                        </h1>
                        <p class="lead text-muted mb-4 fs-3">
                            Menghadirkan kelezatan kue terbaik dengan cinta dan dedikasi sejak 2015
                        </p>
                        <div class="row justify-content-center g-4">
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2"
                                        style="width: 12px; height: 12px; background: var(--primary-color);"></div>
                                    <span class="text-muted">Premium Quality</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2"
                                        style="width: 12px; height: 12px; background: var(--secondary-color);"></div>
                                    <span class="text-muted">Handmade with Love</span>
                                </div>
                            </div>
                            <div class="col-auto">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle me-2"
                                        style="width: 12px; height: 12px; background: var(--accent-color);"></div>
                                    <span class="text-muted">Fresh Daily</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Story Section -->
    <section class="py-5 bg-white position-relative overflow-hidden">
        <div class="position-absolute top-0 start-0 w-100 h-100 opacity-50"
            style="background: linear-gradient(135deg, #fdf2f8 0%, #fff7ed 100%);"></div>
        <div class="container position-relative" style="z-index: 10;">
            <div class="row g-5 align-items-center">
                <div class="col-lg-6">
                    <div class="img-wrapper">
                        <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=600&h=400&fit=crop"
                            alt="Azelyn cake shop Story" class="img-fluid rounded-3 shadow-lg"
                            style="height: 400px; object-fit: cover; transition: all 0.5s ease;">
                    </div>
                </div>

                <div class="col-lg-6">
                    <div class="mb-4">
                        <h2 class="font-playfair display-3 fw-bold text-dark mb-3">Cerita Kami</h2>
                        <div class="divider mb-4"></div>
                    </div>

                    <div class="mb-4">
                        <p class="fs-5 text-muted lh-base mb-3">
                            Azelyn cake shop dimulai dari dapur rumah sederhana dengan mimpi besar untuk menghadirkan
                            kue-kue
                            berkualitas tinggi yang dibuat dengan penuh cinta. Sejak tahun 2015, kami telah melayani
                            ribuan
                            pelanggan dengan berbagai kreasi kue yang lezat dan menggugah selera.
                        </p>
                        <p class="fs-5 text-muted lh-base mb-3">
                            Dengan menggunakan bahan-bahan pilihan terbaik dan resep turun-temurun yang telah
                            disempurnakan,
                            kami berkomitmen untuk memberikan pengalaman kuliner yang tak terlupakan dalam setiap
                            gigitan.
                        </p>
                        <p class="fs-5 text-muted lh-base mb-4">
                            Kini, Azelyn cake shop telah berkembang menjadi toko kue terpercaya yang melayani pemesanan
                            online untuk
                            memudahkan pelanggan menikmati kue favorit mereka kapan saja.
                        </p>
                    </div>

                    <div class="d-flex align-items-center">
                        <div class="icon-circle me-3"
                            style="background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));">
                            <svg class="text-white" width="32" height="32" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <h4 class="fw-semibold text-dark mb-1">Dibuat dengan Cinta</h4>
                            <p class="text-muted mb-0">Setiap kue adalah karya seni yang penuh kasih sayang</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision & Mission Section -->
    <section class="py-5 gradient-bg-2">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="font-playfair display-3 fw-bold text-dark mb-3">Visi & Misi Kami</h2>
                <div class="divider mx-auto mb-4"></div>
                <p class="lead text-muted">Fondasi yang menuntun setiap langkah perjalanan kami</p>
            </div>

            <div class="row g-4">
                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-lg card-hover rounded-4 p-4">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-4">
                                <div class="icon-circle me-3"
                                    style="background: linear-gradient(90deg, var(--primary-color), #db2777);">
                                    <svg class="text-white" width="32" height="32" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                        </path>
                                    </svg>
                                </div>
                                <h3 class="font-playfair h2 fw-bold text-dark mb-0">Visi</h3>
                            </div>
                            <p class="text-muted fs-5 lh-base mb-0">
                                Menjadi toko kue online terdepan yang menghadirkan kue berkualitas premium dengan
                                pelayanan terbaik,
                                serta menjadi pilihan utama untuk setiap momen spesial pelanggan.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-lg card-hover rounded-4 p-4">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-4">
                                <div class="icon-circle me-3"
                                    style="background: linear-gradient(90deg, var(--secondary-color), #ea580c);">
                                    <svg class="text-white" width="32" height="32" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                                <h3 class="font-playfair h2 fw-bold text-dark mb-0">Misi</h3>
                            </div>
                            <p class="text-muted fs-5 lh-base mb-0">
                                Menyediakan kue-kue berkualitas tinggi dengan bahan terbaik, memberikan pelayanan yang
                                ramah dan
                                profesional, serta terus berinovasi untuk memenuhi kebutuhan dan ekspektasi pelanggan.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Values Section -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="font-playfair display-3 fw-bold text-dark mb-3">Nilai-Nilai Kami</h2>
                <div class="divider mx-auto mb-4"></div>
                <p class="lead text-muted">
                    Nilai-nilai yang menjadi fondasi dalam setiap langkah perjalanan Azelyn cake shop
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card value-card h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="icon-circle mx-auto mb-4"
                                style="background: linear-gradient(90deg, var(--primary-color), #db2777); width: 5rem; height: 5rem;">
                                <svg class="text-white" width="40" height="40" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                                    </path>
                                </svg>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-3">Cinta & Dedikasi</h3>
                            <p class="text-muted lh-base mb-0">
                                Setiap kue dibuat dengan penuh cinta dan dedikasi untuk memberikan yang terbaik
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card value-card orange h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="icon-circle mx-auto mb-4"
                                style="background: linear-gradient(90deg, var(--secondary-color), #ea580c); width: 5rem; height: 5rem;">
                                <svg class="text-white" width="40" height="40" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-3">Kualitas Terjamin</h3>
                            <p class="text-muted lh-base mb-0">
                                Menggunakan bahan-bahan pilihan terbaik dan proses pembuatan yang higienis
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card value-card blue h-100 rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="icon-circle mx-auto mb-4"
                                style="background: linear-gradient(90deg, #3b82f6, #2563eb); width: 5rem; height: 5rem;">
                                <svg class="text-white" width="40" height="40" fill="none"
                                    stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z">
                                    </path>
                                </svg>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-3">Kepuasan Pelanggan</h3>
                            <p class="text-muted lh-base mb-0">
                                Mengutamakan kepuasan pelanggan dengan pelayanan yang ramah dan responsif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-5 gradient-bg-2">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="font-playfair display-3 fw-bold text-dark mb-3">Tim Kami</h2>
                <div class="divider mx-auto mb-4"></div>
                <p class="lead text-muted">
                    Berkenalan dengan tim profesional yang berdedikasi tinggi di balik kesuksesan Azelyn cake shop
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card border-0 shadow-lg card-hover rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="position-relative d-inline-block mb-4">
                                <img src="https://images.unsplash.com/photo-1494790108755-2616b332b937?w=150&h=150&fit=crop&crop=face"
                                    alt="Sarah Johnson" class="team-img">
                                <div class="team-badge">
                                    <svg class="text-white" width="16" height="16" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-2">Sarah Johnson</h3>
                            <p class="fw-semibold mb-3" style="color: var(--primary-color);">Head Baker</p>
                            <p class="text-muted lh-base mb-0">
                                Dengan pengalaman 15 tahun di industri pastry, Sarah memimpin tim dalam menciptakan
                                kue-kue
                                berkualitas tinggi.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card border-0 shadow-lg card-hover rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="position-relative d-inline-block mb-4">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
                                    alt="Michael Chen" class="team-img" style="border-color: #fed7aa;">
                                <div class="team-badge" style="background: var(--secondary-color);">
                                    <svg class="text-white" width="16" height="16" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-2">Michael Chen</h3>
                            <p class="fw-semibold mb-3" style="color: var(--secondary-color);">Cake Designer</p>
                            <p class="text-muted lh-base mb-0">
                                Ahli dalam desain kue custom dengan kreativitas tinggi, Michael selalu menghadirkan
                                desain yang
                                memukau.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card border-0 shadow-lg card-hover rounded-4 p-4 text-center">
                        <div class="card-body">
                            <div class="position-relative d-inline-block mb-4">
                                <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face"
                                    alt="Lisa Wang" class="team-img" style="border-color: #dbeafe;">
                                <div class="team-badge" style="background: #3b82f6;">
                                    <svg class="text-white" width="16" height="16" fill="none"
                                        stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M5 13l4 4L19 7"></path>
                                    </svg>
                                </div>
                            </div>
                            <h3 class="font-playfair h3 fw-bold text-dark mb-2">Lisa Wang</h3>
                            <p class="fw-semibold mb-3" style="color: #3b82f6;">Customer Relations</p>
                            <p class="text-muted lh-base mb-0">
                                Berkomitmen memberikan pelayanan terbaik untuk setiap pelanggan Azelyn cake shop dengan
                                keramahan dan profesionalisme.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Achievement Section -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="font-playfair display-3 fw-bold text-dark mb-3">Pencapaian Kami</h2>
                <div class="divider mx-auto mb-4"></div>
                <p class="lead text-muted">
                    Prestasi yang telah kami raih berkat dukungan pelanggan setia
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-3">
                    <div class="text-center">
                        <div class="achievement-circle mx-auto mb-3"
                            style="background: linear-gradient(135deg, #fdf2f8, #fce7f3);">
                            <div class="text-center">
                                <div class="display-4 fw-bold" style="color: var(--primary-color);">1000+</div>
                                <small class="text-muted">Pelanggan</small>
                            </div>
                        </div>
                        <h4 class="font-playfair fw-bold text-dark mb-2">Pelanggan Puas</h4>
                        <p class="text-muted">Telah melayani ribuan pelanggan dengan kepuasan tinggi</p>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center">
                        <div class="achievement-circle mx-auto mb-3"
                            style="background: linear-gradient(135deg, #fff7ed, #ffedd5);">
                            <div class="text-center">
                                <div class="display-4 fw-bold" style="color: var(--secondary-color);">500+</div>
                                <small class="text-muted">Pesanan</small>
                            </div>
                        </div>
                        <h4 class="font-playfair fw-bold text-dark mb-2">Pesanan Selesai</h4>
                        <p class="text-muted">Berhasil menyelesaikan ratusan pesanan dengan sempurna</p>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center">
                        <div class="achievement-circle mx-auto mb-3"
                            style="background: linear-gradient(135deg, #fefce8, #fef3c7);">
                            <div class="text-center">
                                <div class="display-4 fw-bold" style="color: var(--accent-color);">50+</div>
                                <small class="text-muted">Varian</small>
                            </div>
                        </div>
                        <h4 class="font-playfair fw-bold text-dark mb-2">Varian Kue</h4>
                        <p class="text-muted">Menyediakan berbagai pilihan kue untuk setiap selera</p>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="text-center">
                        <div class="achievement-circle mx-auto mb-3"
                            style="background: linear-gradient(135deg, #eff6ff, #dbeafe);">
                            <div class="text-center">
                                <div class="display-4 fw-bold" style="color: #3b82f6;">9</div>
                                <small class="text-muted">Tahun</small>
                            </div>
                        </div>
                        <h4 class="font-playfair fw-bold text-dark mb-2">Pengalaman</h4>
                        <p class="text-muted">Berpengalaman dalam industri kue sejak tahun 2015</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 cta-section text-white position-relative">
        <div class="container position-relative" style="z-index: 10;">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center">
                    <h2 class="font-playfair display-3 fw-bold mb-4">Siap Memesan Kue Impian Anda?</h2>
                    <p class="lead mb-5 fs-4">
                        Jangan tunggu lagi! Hubungi kami sekarang dan buat momen spesial Anda menjadi lebih berkesan
                        dengan kue-kue lezat dari Azelyn cake shop.
                    </p>
                    <div class="d-flex flex-column flex-sm-row gap-3 justify-content-center">
                        <a href="#" class="btn btn-light btn-custom text-dark fs-5">
                            <svg class="me-2" width="20" height="20" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-1.5 6M7 13l-1.5-6m0 0L4 5H2m16 8v8a2 2 0 01-2 2H8a2 2 0 01-2-2v-8">
                                </path>
                            </svg>
                            Lihat Produk
                        </a>
                        <a href="#" class="btn btn-outline-light btn-custom fs-5">
                            <svg class="me-2" width="20" height="20" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z">
                                </path>
                            </svg>
                            Hubungi Kami
                        </a>
                    </div>
                </div>
            </div>

            <div class="row mt-5">
                <div class="col-md-4 mb-4">
                    <div class="contact-info rounded-4 p-4 text-center">
                        <div class="icon-circle mx-auto mb-3" style="background: rgba(255, 255, 255, 0.2);">
                            <svg class="text-white" width="32" height="32" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
                                </path>
                            </svg>
                        </div>
                        <h4 class="fw-bold mb-2">Telepon</h4>
                        <p class="mb-0">+62 123 456 7890</p>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="contact-info rounded-4 p-4 text-center">
                        <div class="icon-circle mx-auto mb-3" style="background: rgba(255, 255, 255, 0.2);">
                            <svg class="text-white" width="32" height="32" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                </path>
                            </svg>
                        </div>
                        <h4 class="fw-bold mb-2">Email</h4>
                        <p class="mb-0">info@sweetbakery.com</p>
                    </div>
                </div>

                <div class="col-md-4 mb-4">
                    <div class="contact-info rounded-4 p-4 text-center">
                        <div class="icon-circle mx-auto mb-3" style="background: rgba(255, 255, 255, 0.2);">
                            <svg class="text-white" width="32" height="32" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
                                </path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                            </svg>
                        </div>
                        <h4 class="fw-bold mb-2">Lokasi</h4>
                        <p class="mb-0">Jakarta, Indonesia</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->

    <!-- Scroll to Top Button -->
    <div class="scroll-top" id="scrollTop">
        <svg class="text-white" width="20" height="20" fill="none" stroke="currentColor"
            viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18">
            </path>
        </svg>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Scroll to top functionality
        const scrollTop = document.getElementById('scrollTop');

        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                scrollTop.classList.add('show');
            } else {
                scrollTop.classList.remove('show');
            }
        });

        scrollTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // Smooth scrolling for all anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // Add entrance animations
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.opacity = '1';
                    entry.target.style.transform = 'translateY(0)';
                }
            });
        }, observerOptions);

        // Apply animation to cards
        document.querySelectorAll('.card, .achievement-circle').forEach(el => {
            el.style.opacity = '0';
            el.style.transform = 'translateY(30px)';
            el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            observer.observe(el);
        });
    </script>
@endsection