<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Otomotif SMKN 1 Cirebon | Excellence in Motion</title>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Outfit:wght@400;700;900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --bg-dark: #0f0d0c;
            --bg-card: #1c1816;
            --primary: #c98a4b;
            /* Gold/Light Brown */
            --primary-hover: #e0a365;
            --text-main: #f5f0ec;
            --text-muted: #a89f96;
            --accent: #ff4500;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            line-height: 1.6;
            overflow-x: hidden;
            margin-top: 4rem;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: 'Outfit', sans-serif;
        }

        /* Utilities */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-title {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 1.5rem;
            background: linear-gradient(to right, var(--primary), #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }

        .section-subtitle {
            text-align: center  ;
            color: var(--text-muted);
            max-width: 800px;
            margin: 0 auto 4rem auto;
            font-size: 1.1rem;
        }

        section {
            padding: 100px 0;
        }

        .placeholder-img {
            background-color: #2a2420;
            border: 2px dashed #4a3e35;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-weight: 600;
            width: 100%;
            height: 100%;
            min-height: 300px;
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .placeholder-img:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        /* Navbar */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            padding: 20px 0;
            background: rgba(15, 13, 12, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid rgba(201, 138, 75, 0.1);
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: 'Outfit', sans-serif;
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
            text-decoration: none;
            letter-spacing: 1px;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--text-main);
            text-decoration: none;
            font-weight: 600;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: var(--primary);
        }

        .menu-toggle {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 6px;
        }

        .menu-toggle .bar {
            width: 25px;
            height: 3px;
            background-color: var(--text-main);
            transition: all 0.3s ease;
            border-radius: 3px;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding-top: 80px;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 70% 50%, rgba(201, 138, 75, 0.15) 0%, rgba(15, 13, 12, 1) 60%);
            z-index: -1;
        }

        .hero-content {
            max-width: 800px;
            z-index: 1;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 1s forwards ease-out;
        }

        .hero-tag {
            display: inline-block;
            padding: 8px 16px;
            background: rgba(201, 138, 75, 0.1);
            color: var(--primary);
            border: 1px solid rgba(201, 138, 75, 0.3);
            border-radius: 50px;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .hero h1 {
            font-size: 4.5rem;
            line-height: 1.1;
            margin-bottom: 1.5rem;
        }

        .hero p {
            font-size: 1.25rem;
            color: var(--text-muted);
            margin-bottom: 2.5rem;
            max-width: 600px;
        }

        .btn {
            display: inline-block;
            padding: 16px 32px;
            background: var(--primary);
            color: var(--bg-dark);
            text-decoration: none;
            font-weight: 800;
            font-family: 'Outfit', sans-serif;
            border-radius: 8px;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }

        .btn:hover {
            background: var(--primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(201, 138, 75, 0.2);
        }

        /* Profile Section */
        .profile-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .profile-text p {
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
            color: var(--text-muted);
            text-align: justify;
        }

        .profile-text p:first-of-type {
            font-size: 1.25rem;
            color: var(--text-main);
            font-weight: 300;
        }

        /* Comparison Section */
        .comparison-section {
            background: #151211;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .comparison-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            perspective: 1000px;
        }

        .card {
            background: var(--bg-card);
            padding: 3rem;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
            position: relative;
            overflow: hidden;
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: var(--primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s ease;
        }

        .card:hover {
            transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
            box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5);
            border-color: rgba(201, 138, 75, 0.3);
        }

        .card:hover::before {
            transform: scaleX(1);
        }

        .card h3 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: var(--primary);
        }

        .card .full-name {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 2rem;
            color: var(--text-main);
        }

        .card p {
            color: var(--text-muted);
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .feature-list {
            list-style: none;
            margin-top: 2rem;
        }

        .feature-list li {
            position: relative;
            padding-left: 1.5rem;
            margin-bottom: 1rem;
            color: var(--text-muted);
        }

        .feature-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: var(--primary);
            font-weight: bold;
        }

        /* Partnerships */
        .partnerships {
            position: relative;
        }

        .partner-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .partner-card {
            background: var(--bg-card);
            padding: 2rem;
            border-radius: 12px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .partner-card:hover {
            border-color: var(--primary);
            background: #221d1a;
        }

        .partner-logo-box {
            height: 120px;
            margin-bottom: 1.5rem;
        }

        /* Awards */
        .awards-section {
            background: #151211;
        }

        .timeline {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 2px;
            height: 100%;
            background: rgba(201, 138, 75, 0.2);
            transform: translateX(-50%);
        }

        .timeline-item {
            display: flex;
            justify-content: flex-end;
            padding-right: 50%;
            position: relative;
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease;
        }

        .timeline-item.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .timeline-item:nth-child(even) {
            justify-content: flex-start;
            padding-right: 0;
            padding-left: 50%;
        }

        .timeline-content {
            background: var(--bg-card);
            padding: 2rem;
            border-radius: 12px;
            width: 90%;
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .timeline-item:nth-child(odd) .timeline-content {
            margin-right: 2rem;
        }

        .timeline-item:nth-child(even) .timeline-content {
            margin-left: 2rem;
        }

        .timeline-dot {
            position: absolute;
            top: 20px;
            width: 20px;
            height: 20px;
            background: var(--primary);
            border-radius: 50%;
            box-shadow: 0 0 0 4px var(--bg-dark), 0 0 0 8px rgba(201, 138, 75, 0.2);
        }

        .timeline-item:nth-child(odd) .timeline-dot {
            right: -10px;
        }

        .timeline-item:nth-child(even) .timeline-dot {
            left: -10px;
        }

        .timeline-year {
            color: var(--primary);
            font-weight: 800;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
        }

        /* Gallery */
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
        }

        .gallery-item {
            height: 250px;
        }

        /* Footer */
        footer {
            background: #0a0808;
            padding: 60px 0 20px;
            border-top: 1px solid rgba(201, 138, 75, 0.2);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 4rem;
            margin-bottom: 4rem;
        }

        .footer-col h4 {
            color: var(--primary);
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .footer-col p {
            color: var(--text-muted);
            margin-bottom: 1rem;
        }

        .footer-bottom {
            text-align: center;
            color: var(--text-muted);
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Animations */
        @keyframes fadeUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Reveal on scroll */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Responsive */
        @media (max-width: 992px) {
            .profile-grid,
            .comparison-cards {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }

            .hero h1 {
                font-size: 3.5rem;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-item {
                justify-content: flex-start;
                padding-right: 0;
                padding-left: 40px;
            }

            .timeline-item:nth-child(even) {
                padding-left: 40px;
            }

            .timeline-item:nth-child(odd) .timeline-content,
            .timeline-item:nth-child(even) .timeline-content {
                margin: 0 0 0 2rem;
                width: 100%;
            }

            .timeline-item:nth-child(odd) .timeline-dot,
            .timeline-item:nth-child(even) .timeline-dot {
                left: 10px;
                right: auto;
            }

            .gallery-grid {
                grid-template-columns: 1fr 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
            }
        }

        @media (max-width: 768px) {
            section {
                padding: 60px 0;
            }

            .hero {
                min-height: 100vh;
                height: auto;
                padding: 120px 0 60px 0;
                display: flex;
                align-items: center;
            }

            .menu-toggle {
                display: flex;
            }

            .nav-links {
                position: fixed;
                top: 70px;
                right: -100%;
                width: 100%;
                height: calc(100vh - 70px);
                background: rgba(15, 13, 12, 0.98);
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transition: right 0.4s ease;
                gap: 2rem;
                overflow-y: auto;
                padding: 40px 0;
            }

            .nav-links.active {
                right: 0;
            }

            .nav-links a {
                font-size: 1.25rem;
            }

            /* Hamburger Animation */
            .menu-toggle.is-active .bar:nth-child(2) {
                opacity: 0;
            }

            .menu-toggle.is-active .bar:nth-child(1) {
                transform: translateY(9px) rotate(45deg);
            }

            .menu-toggle.is-active .bar:nth-child(3) {
                transform: translateY(-9px) rotate(-45deg);
            }
        }

        @media (max-width: 576px) {
            .hero h1 {
                font-size: 2.5rem;
            }

            .gallery-grid {
                grid-template-columns: 1fr;
            }

            .section-title {
                font-size: 2.2rem;
            }

            .section-subtitle {
                font-size: 0.95rem;
                margin-bottom: 2.5rem;
            }

            .card {
                padding: 2.5rem 1.5rem;
            }

            .card h3 {
                font-size: 2rem;
            }
        }

        @media (max-width: 400px) {
            .hero h1 {
                font-size: 2rem;
            }

            .hero p {
                font-size: 0.95rem;
            }

            .btn {
                padding: 12px 24px;
                font-size: 0.9rem;
            }
        }
    </style>
</head>

<body>

    <!-- Navbar -->
    <nav>
        <div class="container nav-container">
            <a href="#" class="logo">SMKN 1 CIREBON</a>
            <div class="nav-links">
                <a href="#pengumuman">Pengumuman</a>
                <a href="#profil">Profil</a>
                <a href="#program">Program Keahlian</a>
                <a href="#kerjasama">Kerja Sama</a>
                <a href="#penghargaan">Penghargaan</a>
                <a href="#guru">Guru</a>
                <a href="#galeri">Galeri</a>
            </div>
            <div class="menu-toggle" id="mobile-menu">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero">
        <div class="container">
            <div class="hero-content">
                <span class="hero-tag">Sekolah Menengah Kejuruan</span>
                <h1>Excellence in <br><span style="color: var(--primary);">Automotive</span> Engineering</h1>
                <p>Mencetak mekanik handal dan teknisi ahli masa depan. Kami memadukan teori mendalam dengan praktek
                    industri nyata untuk memastikan setiap lulusan siap kerja, kompeten, dan profesional.</p>
                <a href="#profil" class="btn">Jelajahi Jurusan</a>
            </div>
        </div>
    </section>

    <!-- Pengumuman Section -->
    <section id="pengumuman" class="container reveal" style="padding-top: 60px; padding-bottom: 40px;">
        <?php $__empty_1 = true; $__currentLoopData = $pengumumanList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
            <div style="background: rgba(201, 138, 75, 0.1); border: 1px solid rgba(201, 138, 75, 0.3); border-left: 4px solid var(--primary); padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); margin-bottom: 20px;">
                <div style="display: flex; align-items: center; margin-bottom: 1rem;">
                    <span style="font-size: 1.8rem; margin-right: 1rem; color: var(--primary);"><i class="fa-solid fa-bullhorn"></i></span>
                    <h2 style="font-family: 'Outfit', sans-serif; color: var(--primary); margin: 0; font-size: 1.8rem;">Pengumuman Penting</h2>
                    <small style="margin-left: auto; color: var(--text-muted); font-weight: 600;"><?php echo e(date('d M Y', strtotime($item->tanggal))); ?></small>
                </div>
                <div style="color: var(--text-main);">
                    <p style="margin-bottom: 0.5rem; font-size: 1.1rem; font-weight: 600;"><?php echo e($item->judul); ?></p>
                    <p style="color: var(--text-muted); line-height: 1.6;"><?php echo e($item->isi); ?></p>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
            <div style="background: rgba(255, 255, 255, 0.02); border: 1px dashed rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 12px; text-align: center; color: var(--text-muted);">
                <i class="fa-solid fa-bullhorn" style="font-size: 2rem; margin-bottom: 10px; display: block; opacity: 0.5;"></i>
                Belum ada pengumuman terbaru saat ini.
            </div>
        <?php endif; ?>
    </section>

    <!-- Profil Section -->
    <section id="profil" class="container reveal">
        <h2 class="section-title">Profil Jurusan</h2>
        <p class="section-subtitle">Mengenal lebih dekat dedikasi kami dalam membangun generasi otomotif terbaik.</p>

        <div class="profile-grid">
            <div class="profile-text">
                <p>Departemen Teknik Otomotif SMKN 1 Cirebon berdiri dengan visi untuk menjadi pusat pendidikan dan
                    pelatihan kejuruan terdepan yang menghasilkan sumber daya manusia berkualitas tinggi di bidang
                    teknologi otomotif di wilayah Cirebon dan sekitarnya.</p>

                <p>Di era modern ini, perkembangan industri otomotif melesat sangat cepat. Mobil konvensional, kendaraan
                    hybrid, hingga kendaraan listrik (EV) membutuhkan teknisi yang tidak hanya paham dasar mekanika,
                    tetapi juga cerdas dalam mendiagnosis masalah elektronik dan komputerisasi kendaraan. Oleh karena
                    itu, kurikulum kami dirancang secara dinamis, menyesuaikan dengan standar industri global terkini.
                </p>

                <p>Pembelajaran di bengkel kami mereplikasi kondisi sesungguhnya di industri otomotif. Dengan
                    kedisiplinan yang tinggi, etos kerja standar industri (5S/5R), dan pengajar yang merupakan praktisi
                    ahli bersertifikat, siswa ditempa untuk bukan sekadar menjadi "tukang bengkel", melainkan teknisi
                    profesional yang mampu bersaing di kancah nasional maupun internasional.</p>
            </div>
            <div class="profile-image" style="display: flex; justify-content: center; align-items: center;">
                <img src="logo/logosmk.png" alt="Profil Jurusan Otomotif" style="max-width: 100%; max-height: 400px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(201, 138, 75, 0.3)); transition: transform 0.5s ease;" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
            </div>
        </div>
    </section>

    <!-- Program Keahlian Section -->
    <section id="program" class="comparison-section">
        <div class="container reveal">
            <h2 class="section-title">Program Keahlian Utama</h2>
            <p class="section-subtitle">Pilih jalur keahlianmu. Kami menyediakan spesialisasi mendalam di dua bidang
                utama otomotif.</p>

            <div class="comparison-cards">
                <!-- TKR Card -->
                <div class="card">
                    <h3>TKR</h3>
                    <div class="full-name">Teknik Kendaraan Ringan</div>
                    <div class="placeholder-img" style="height: 200px; margin-bottom: 2rem;">
                        [ Tambahkan Foto Praktik Mesin / Engine Stand ]
                    </div>
                    <p>Di program TKR, kita bakal ngulik abis soal "jantung dan otaknya" mobil. Anak-anak TKR diajak buat bener-bener paham seluk beluk mesin, cara tenaga disalurin ke roda (powertrain), urusan sasis dan suspensi, sampai sistem kelistrikan mobil yang super menantang buat dipecahin.</p>
                    <p>Lulus dari sini, kamu udah siap banget jadi mekanik jagoan. Nggak cuma sekadar bisa tune-up atau turun mesin, tapi kamu juga bakal mahir pakai alat scanner canggih kekinian buat nge-diagnosa kerusakan mobil secara presisi.</p>
                    <ul class="feature-list">
                        <li>Engine Maintenance & Overhaul</li>
                        <li>Sistem Injeksi & Manajemen Mesin Modern (EFI)</li>
                        <li>Sasis, Suspensi & Sistem Kemudi</li>
                        <li>Sistem Kelistrikan Bodi & Engine (Wiring)</li>
                        <li>Diagnosis Kerusakan dengan Alat Scanner Digital</li>
                    </ul>
                </div>
 
                <!-- TBKR Card -->
                <div class="card">
                    <h3>TBKR</h3>
                    <div class="full-name">Teknik Bodi Kendaraan Ringan</div>
                    <div class="placeholder-img" style="height: 200px; margin-bottom: 2rem;">
                        [ Tambahkan Foto Pengecatan / Perbaikan Bodi ]
                    </div>
                    <p>Nah, kalau TBKR ini urusannya sama "tampang dan body" mobil. Mesin gahar percuma dong kalau bodinya penyok-penyok? Di sini, anak-anak TBKR dicetak buat jadi seniman otomotif sejati yang peduli banget sama estetika kendaraan.</p>
                    <p>Kamu bakal diajarin gimana caranya nyulap bodi penyok jadi mulus lagi (body repair), jago ngelas, pinter ngeracik warna cat (color matching), sampai teknik auto detailing yang bisa bikin mobil kinclong kayak baru keluar dari dealer.</p>
                    <ul class="feature-list">
                        <li>Teknik Ketok Magic & Perbaikan Panel Bodi (Body Repair)</li>
                        <li>Pengelasan Otomotif (MIG, TIG, Spot Welding)</li>
                        <li>Persiapan Permukaan & Teknik Pengecatan (Painting)</li>
                        <li>Pencampuran Warna (Color Matching Technology)</li>
                        <li>Auto Detailing, Poles & Perlindungan Cat (Coating)</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Kerja Sama Industri -->
    <section id="kerjasama" class="partnerships container reveal">
        <h2 class="section-title">Kerja Sama Industri</h2>
        <p class="section-subtitle">Kami tidak bekerja sendiri. Link and Match dengan dunia industri adalah kunci utama
            agar lulusan kami langsung terserap ke dunia kerja.</p>

        <div class="partner-grid">
            <div class="partner-card">
                <div class="partner-logo-box placeholder-img">
                    <img src="img/kelas_industri.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <h4>Program Kelas Industri</h4>
                <p>Kurikulum yang diselaraskan langsung dengan standar perusahaan perakitan mobil terkemuka. Siswa
                    diajarkan SOP resmi dari bengkel pabrikan.</p>
            </div>
            <div class="partner-card">
                <div class="partner-logo-box placeholder-img">
                    <img src="img/pkl.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <h4>Praktek Kerja Lapangan (PKL)</h4>
                <p>Penempatan siswa di bengkel-bengkel resmi dan bengkel umum bonafit selama 6 bulan untuk merasakan
                    tekanan dan ritme kerja profesional secara langsung.</p>
            </div>
            <div class="partner-card">
                <div class="partner-logo-box placeholder-img">
                    <img src="img/murid.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <h4>Rekrutmen Langsung</h4>
                <p>Bursa Kerja Khusus (BKK) kami memiliki MoU rekrutmen. Banyak siswa kami yang telah direkrut sebelum
                    mereka secara resmi lulus sekolah.</p>
            </div>
        </div>
    </section>

    <!-- Penghargaan -->
    <section id="penghargaan" class="awards-section">
        <div class="container reveal">
            <h2 class="section-title">Penghargaan & Prestasi</h2>
            <p class="section-subtitle">Bukti nyata dari komitmen kami terhadap keunggulan pendidikan otomotif.</p>

            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2024</div>
                        <h3>Juara 1 LKS Tingkat Provinsi</h3>
                        <p>Siswa perwakilan jurusan otomotif berhasil meraih medali emas pada Lomba Kompetensi Siswa
                            (LKS) bidang Automobile Technology berkat akurasi diagnosis mesin.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2023</div>
                        <h3>Penghargaan Bengkel Tefa Terbaik</h3>
                        <p>Bengkel sekolah dianugerahi predikat Teaching Factory (Tefa) grade A, melayani perbaikan
                            mobil masyarakat dengan standar dan kualitas bengkel resmi.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2022</div>
                        <h3>Juara Nasional Body Repair Competition</h3>
                        <p>Tim TBKR kami memenangkan kompetisi pengecatan dan perbaikan bodi tingkat nasional yang
                            diselenggarakan oleh produsen cat otomotif terkemuka.</p>
                    </div>
                </div>
                <div class="timeline-item">
                    <div class="timeline-dot"></div>
                    <div class="timeline-content">
                        <div class="timeline-year">Tahun 2021</div>
                        <h3>Center of Excellence (CoE)</h3>
                        <p>Ditunjuk langsung oleh Kemendikbud sebagai SMK Pusat Keunggulan di sektor pemesinan dan
                            otomotif, menjadi percontohan bagi sekolah lainnya.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>    <!-- Guru / Pengajar Section -->
    <section id="guru" class="container reveal" style="padding-top: 60px; padding-bottom: 40px;">
        <h2 class="section-title">Tenaga Pendidik / Guru</h2>
        <p class="section-subtitle">Didukung oleh guru-guru produktif yang ahli dan tersertifikasi industri.</p>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 40px;">
            <?php $__empty_1 = true; $__currentLoopData = $guruList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $teacher): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div style="background: rgba(22, 26, 34, 0.65); border: 1px solid rgba(201, 138, 75, 0.15); border-radius: 16px; padding: 25px; text-align: center; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(0,0,0,0.3); border-top: 3px solid var(--primary); display: flex; flex-direction: column; justify-content: space-between; height: 100%;" onmouseover="this.style.transform='translateY(-5px)'; this.style.borderColor='var(--primary)';" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='rgba(201, 138, 75, 0.15)';">
                    <div>
                        <div style="width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 18px; overflow: hidden; border: 3px solid var(--primary); box-shadow: 0 0 15px rgba(201, 138, 75, 0.2);">
                            <?php if($teacher->foto && $teacher->foto !== 'default_guru.jpg' && file_exists(public_path($teacher->foto))): ?>
                                <img src="<?php echo e(asset($teacher->foto)); ?>" alt="<?php echo e($teacher->nama_guru); ?>" style="width: 100%; height: 100%; object-fit: cover;">
                            <?php else: ?>
                                <div style="width: 100%; height: 100%; background: #111; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary); font-weight: bold;">
                                    <?php echo e(substr($teacher->nama_guru, 0, 1)); ?>

                                </div>
                            <?php endif; ?>
                        </div>
                        <h3 style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 700; color: #ffffff; margin-bottom: 5px;"><?php echo e($teacher->nama_guru); ?></h3>
                        <div style="font-size: 0.85rem; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;"><?php echo e($teacher->jabatan); ?></div>
                    </div>
                    <div style="font-size: 0.88rem; color: var(--text-muted); border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px;">
                        Mengajar: <strong style="color: #ffffff;"><?php echo e($teacher->mapel); ?></strong>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div style="grid-column: 1 / -1; text-align: center; color: var(--text-muted); padding: 40px; background: rgba(255,255,255,0.01); border: 1px dashed rgba(255,255,255,0.05); border-radius: 16px;">
                    <i class="fa-solid fa-chalkboard-user" style="font-size: 2.5rem; margin-bottom: 12px; opacity: 0.5;"></i>
                    <p>Roster guru pengajar sedang diperbarui.</p>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Galeri / Fasilitas -->
    <section id="galeri" class="container reveal">
        <h2 class="section-title">Galeri & Fasilitas</h2>
        <p class="section-subtitle">Didukung oleh fasilitas modern dan peralatan berstandar industri.</p>

        <div class="gallery-grid">
            <?php $__empty_1 = true; $__currentLoopData = $galeriList; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="gallery-item placeholder-img" style="position: relative; overflow: hidden; border-radius: 8px; height: 240px; cursor: pointer;" onmouseover="this.querySelector('.galeri-desc').style.bottom='0';" onmouseout="this.querySelector('.galeri-desc').style.bottom='-100%';">
                    <?php if($item->foto && file_exists(public_path($item->foto))): ?>
                        <img src="<?php echo e(asset($item->foto)); ?>" alt="<?php echo e($item->judul); ?>" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: #111; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary);">
                            <i class="fa-solid fa-image"></i>
                        </div>
                    <?php endif; ?>
                    <div class="galeri-desc" style="position: absolute; bottom: -100%; left: 0; right: 0; background: rgba(8, 9, 12, 0.95); padding: 15px; border-top: 2px solid var(--primary); transition: bottom 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; flex-direction: column; gap: 4px; z-index: 10;">
                        <h4 style="font-size: 0.95rem; font-weight: 700; color: #ffffff; margin: 0;"><?php echo e($item->judul); ?></h4>
                        <p style="font-size: 0.8rem; color: var(--text-muted); margin: 0; line-height: 1.4;"><?php echo e($item->deskripsi); ?></p>
                        <small style="font-size: 0.72rem; color: var(--primary); font-weight: 600; margin-top: 4px;"><?php echo e(date('d M Y', strtotime($item->tanggal_kegiatan))); ?></small>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="gallery-item placeholder-img">
                    <img src="img/piala.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <div class="gallery-item placeholder-img">
                    <img src="img/piala2.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <div class="gallery-item placeholder-img">
                    <img src="img/kelas_industri.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <div class="gallery-item placeholder-img">
                    <img src="img/mobil.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <div class="gallery-item placeholder-img">
                    <img src="img/murid.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
                <div class="gallery-item placeholder-img">
                    <img src="img/pkl.jpeg" alt="" style="object-fit: cover; width: 100%; height: 100%; border-radius: 8px;">
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- Footer -->
    <footer>
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h4 style="font-family: 'Outfit', sans-serif;">OTOMOTIF - SMKN 1 CIREBON</h4>
                    <p>Mencetak teknisi handal, berkarakter, dan siap menghadapi tantangan global di industri otomotif
                        masa depan.</p>
                </div>
                <div class="footer-col">
                    <h4>Tautan Cepat</h4>
                    <p><a href="#pengumuman" style="color: var(--text-muted); text-decoration: none;">Pengumuman Terbaru</a></p>
                    <p><a href="#profil" style="color: var(--text-muted); text-decoration: none;">Profil Jurusan</a></p>
                    <p><a href="#program" style="color: var(--text-muted); text-decoration: none;">TKR vs TBKR</a></p>
                    <p><a href="#kerjasama" style="color: var(--text-muted); text-decoration: none;">Info Kerja Sama</a>
                    </p>
                    <p><a href="#penghargaan" style="color: var(--text-muted); text-decoration: none;">Prestasi Kami</a>
                    </p>
                </div>
                <div class="footer-col">
                    <h4>Hubungi Kami</h4>
                    <p><i class="fa-solid fa-map-marker-alt" style="color: var(--primary); margin-right: 8px; width: 20px; text-align: center;"></i> Jl. Perjuangan, Kel. Sunyaragi, Kab. Cirebon</p>
                    <p><i class="fa-solid fa-phone" style="color: var(--primary); margin-right: 8px; width: 20px; text-align: center;"></i> (0231) 480202</p>
                    <p><i class="fa-solid fa-envelope" style="color: var(--primary); margin-right: 8px; width: 20px; text-align: center;"></i> info@smkn1-cirebon.sch.id</p>
                    <p><i class="fa-brands fa-instagram" style="color: var(--primary); margin-right: 8px; width: 20px; text-align: center;"></i> @otomotif_smkn1cirebon</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2026 Jurusan Otomotif SMKN 1 Cirebon. Hak Cipta Dilindungi.</p>
            </div>
        </div>
    </footer>

    <!-- Scripts -->
    <script>
        // Scroll Reveal Animation
        function reveal() {
            var reveals = document.querySelectorAll(".reveal, .timeline-item");
            for (var i = 0; i < reveals.length; i++) {
                var windowHeight = window.innerHeight;
                var elementTop = reveals[i].getBoundingClientRect().top;
                var elementVisible = 100;

                if (elementTop < windowHeight - elementVisible) {
                    reveals[i].classList.add("active");
                    if (reveals[i].classList.contains('timeline-item')) {
                        reveals[i].classList.add("visible");
                    }
                }
            }
        }

        window.addEventListener("scroll", reveal);
        reveal(); // Trigger on load

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

        // Mobile Menu Toggle
        const mobileMenu = document.querySelector('#mobile-menu');
        const navLinksContainer = document.querySelector('.nav-links');
        const navLinks = document.querySelectorAll('.nav-links a');

        mobileMenu.addEventListener('click', function () {
            mobileMenu.classList.toggle('is-active');
            navLinksContainer.classList.toggle('active');
        });

        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                mobileMenu.classList.remove('is-active');
                navLinksContainer.classList.remove('active');
            });
        });

        // 3D Tilt Effect on Cards (for desktop)
        const cards = document.querySelectorAll('.card');

        cards.forEach(card => {
            card.addEventListener('mousemove', e => {
                const rect = card.getBoundingClientRect();
                const x = e.clientX - rect.left; // x position within the element.
                const y = e.clientY - rect.top;  // y position within the element.

                const centerX = rect.width / 2;
                const centerY = rect.height / 2;

                const rotateX = ((y - centerY) / centerY) * -5; // Max rotation
                const rotateY = ((x - centerX) / centerX) * 5;

                card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`;
            });

            card.addEventListener('mouseleave', () => {
                card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`;
            });
        });
    </script>
</body>

</html><?php /**PATH D:\laragon\www\Otomotif_by_PPLG\resources\views/welcome.blade.php ENDPATH**/ ?>