<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>SIPDAM - Sistem Penggajian Tenaga Kerja Lepas | PERUMDA Tirta Sanjiwani</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">

    <style>
        :root {
            --green-dark: #1a5c2a;
            --green-mid: #2d7a3e;
            --green-main: #3a9e52;
            --green-light: #e8f5eb;
            --green-pale: #f2faf4;
            --blue-water: #1e6fa8;
            --blue-light: #e8f4fd;
            --accent: #f0a500;
            --text-dark: #1a2e1c;
            --text-mid: #3d5c42;
            --text-muted: #6b8c72;
            --white: #ffffff;
            --shadow-green: rgba(42, 120, 60, 0.15);
        }

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

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--green-pale);
            min-height: 100vh;
            overflow-x: hidden;
            color: var(--text-dark);
        }

        /* ── BACKGROUND ── */
        .bg-wrapper {
            position: fixed;
            inset: 0;
            z-index: 0;
            background: linear-gradient(160deg, #e8f5eb 0%, #f2faf4 40%, #e4f3f8 100%);
            overflow: hidden;
        }
        .bg-wrapper::before {
            content: '';
            position: absolute;
            top: -120px; right: -120px;
            width: 600px; height: 600px;
            background: radial-gradient(circle, rgba(42,120,60,0.12) 0%, transparent 70%);
            border-radius: 50%;
        }
        .bg-wrapper::after {
            content: '';
            position: absolute;
            bottom: -100px; left: -100px;
            width: 500px; height: 500px;
            background: radial-gradient(circle, rgba(30,111,168,0.1) 0%, transparent 70%);
            border-radius: 50%;
        }
        .wave-svg {
            position: absolute;
            bottom: 0; left: 0; right: 0;
            opacity: 0.15;
        }

        /* ── TOP BAR ── */
        .topbar {
            position: relative; z-index: 10;
            background: var(--green-dark);
            color: #fff;
            padding: 8px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            letter-spacing: 0.3px;
        }
        .topbar-left { display: flex; gap: 24px; align-items: center; }
        .topbar-left span { display: flex; align-items: center; gap: 6px; opacity: 0.9; }
        .topbar-right { display: flex; gap: 12px; }
        .topbar-right a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            font-weight: 600;
            font-size: 13px;
            padding: 4px 14px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.3);
            transition: all 0.2s;
        }
        .topbar-right a:hover { background: rgba(255,255,255,0.15); color: #fff; }
        .topbar-right a.btn-login {
            background: var(--accent);
            border-color: var(--accent);
            color: var(--green-dark);
        }
        .topbar-right a.btn-login:hover { background: #e09600; }

        /* ── NAVBAR ── */
        .navbar {
            position: relative; z-index: 10;
            background: #fff;
            padding: 16px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 2px 20px var(--shadow-green);
        }
        .logo-area { display: flex; align-items: center; gap: 16px; }
        .logo-icon {
            width: 64px; height: 64px;
            background: linear-gradient(135deg, var(--green-dark), var(--blue-water));
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 16px var(--shadow-green);
            flex-shrink: 0;
        }
        .logo-icon svg { width: 36px; height: 36px; }
        .logo-text { line-height: 1.2; }
        .logo-text .company-name {
            font-family: 'Playfair Display', serif;
            font-size: 18px;
            font-weight: 700;
            color: var(--green-dark);
            letter-spacing: 0.5px;
        }
        .logo-text .company-sub {
            font-size: 11px;
            color: var(--blue-water);
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            margin-top: 2px;
        }
        .logo-text .company-region {
            font-size: 11px;
            color: var(--text-muted);
            font-weight: 500;
            margin-top: 1px;
        }

        .system-badge {
            display: flex; align-items: center; gap: 10px;
            background: var(--green-light);
            border: 1px solid rgba(42,120,60,0.2);
            border-radius: 12px;
            padding: 8px 16px;
        }
        .system-badge .badge-icon {
            width: 36px; height: 36px;
            background: var(--green-main);
            border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
        }
        .system-badge .badge-icon svg { width: 20px; height: 20px; }
        .system-badge .badge-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--green-dark);
            letter-spacing: 0.5px;
        }
        .system-badge .badge-full {
            font-size: 10px;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* ── DIVIDER ── */
        .nav-divider {
            position: relative; z-index: 10;
            background: var(--green-main);
            height: 4px;
        }

        /* ── HERO ── */
        .hero {
            position: relative; z-index: 5;
            max-width: 1200px;
            margin: 0 auto;
            padding: 70px 40px 60px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        .hero-left { animation: fadeInUp 0.7s ease both; }
        .hero-tag {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--green-light);
            border: 1px solid rgba(42,120,60,0.25);
            border-radius: 20px;
            padding: 6px 16px;
            font-size: 12px;
            font-weight: 600;
            color: var(--green-mid);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;
        }
        .hero-tag .dot {
            width: 7px; height: 7px;
            background: var(--green-main);
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        .hero-title {
            font-family: 'Playfair Display', serif;
            font-size: 46px;
            font-weight: 700;
            color: var(--green-dark);
            line-height: 1.15;
            margin-bottom: 20px;
        }
        .hero-title span { color: var(--green-main); }
        .hero-desc {
            font-size: 16px;
            color: var(--text-mid);
            line-height: 1.7;
            margin-bottom: 36px;
            max-width: 460px;
        }
        .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
        .btn-primary {
            display: inline-flex; align-items: center; gap: 8px;
            background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
            color: #fff;
            text-decoration: none;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            box-shadow: 0 6px 20px rgba(42,120,60,0.35);
            transition: all 0.25s;
            letter-spacing: 0.3px;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 28px rgba(42,120,60,0.4);
        }
        .btn-secondary {
            display: inline-flex; align-items: center; gap: 8px;
            background: #fff;
            color: var(--green-dark);
            text-decoration: none;
            padding: 14px 28px;
            border-radius: 12px;
            font-size: 15px;
            font-weight: 600;
            border: 2px solid var(--green-main);
            transition: all 0.25s;
        }
        .btn-secondary:hover {
            background: var(--green-light);
            transform: translateY(-2px);
        }

        /* ── HERO RIGHT: Stats Card ── */
        .hero-right {
            animation: fadeInUp 0.7s 0.2s ease both;
        }
        .stats-card {
            background: #fff;
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 8px 40px var(--shadow-green);
            border: 1px solid rgba(42,120,60,0.1);
        }
        .stats-card-header {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--green-light);
        }
        .stats-card-header .avatar {
            width: 44px; height: 44px;
            background: linear-gradient(135deg, var(--green-main), var(--blue-water));
            border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
        }
        .stats-card-header .avatar svg { width: 24px; height: 24px; }
        .stats-card-header h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); }
        .stats-card-header p { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
        .stat-item {
            background: var(--green-pale);
            border-radius: 14px;
            padding: 16px;
            border: 1px solid rgba(42,120,60,0.08);
            transition: transform 0.2s;
        }
        .stat-item:hover { transform: translateY(-2px); }
        .stat-item .stat-icon {
            width: 36px; height: 36px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 10px;
        }
        .stat-item .stat-icon svg { width: 20px; height: 20px; }
        .stat-item .stat-num { font-size: 26px; font-weight: 800; color: var(--green-dark); line-height: 1; }
        .stat-item .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; font-weight: 500; }
        .stat-item.blue .stat-icon { background: var(--blue-light); }
        .stat-item.blue .stat-num { color: var(--blue-water); }
        .stat-item.green .stat-icon { background: var(--green-light); }
        .stat-item.amber .stat-icon { background: #fff8e6; }
        .stat-item.amber .stat-num { color: #c47f00; }
        .stat-item.teal .stat-icon { background: #e6f7f5; }
        .stat-item.teal .stat-num { color: #1a7a6e; }

        .status-bar {
            background: var(--green-light);
            border-radius: 12px;
            padding: 12px 16px;
            display: flex; align-items: center; gap: 10px;
            font-size: 13px;
            color: var(--green-dark);
            font-weight: 500;
        }
        .status-bar .dot-green {
            width: 8px; height: 8px;
            background: var(--green-main);
            border-radius: 50%;
            animation: pulse 2s infinite;
            flex-shrink: 0;
        }

        /* ── FEATURES ── */
        .features {
            position: relative; z-index: 5;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 40px 80px;
        }
        .features-title {
            text-align: center;
            font-size: 13px;
            font-weight: 700;
            color: var(--text-muted);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 32px;
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .feat-card {
            background: #fff;
            border-radius: 18px;
            padding: 24px 20px;
            text-align: center;
            border: 1px solid rgba(42,120,60,0.1);
            box-shadow: 0 2px 16px var(--shadow-green);
            transition: all 0.25s;
            cursor: default;
        }
        .feat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 28px var(--shadow-green);
            border-color: rgba(42,120,60,0.25);
        }
        .feat-card .feat-icon {
            width: 52px; height: 52px;
            border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
        }
        .feat-card .feat-icon svg { width: 26px; height: 26px; }
        .feat-card h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
        .feat-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

        /* ── FOOTER ── */
        .footer {
            position: relative; z-index: 5;
            background: var(--green-dark);
            color: rgba(255,255,255,0.7);
            text-align: center;
            padding: 20px 40px;
            font-size: 13px;
        }
        .footer strong { color: #fff; }

        /* ── ANIMATIONS ── */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(28px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50% { opacity: 0.6; transform: scale(0.85); }
        }

        /* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .hero { grid-template-columns: 1fr; padding: 40px 24px; gap: 36px; }
            .hero-title { font-size: 34px; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .topbar { padding: 8px 20px; font-size: 12px; }
            .navbar { padding: 14px 20px; }
            .features { padding: 0 24px 60px; }
            .logo-text .company-name { font-size: 15px; }
        }
        @media (max-width: 560px) {
            .features-grid { grid-template-columns: 1fr; }
            .topbar-left { display: none; }
            .stats-grid { grid-template-columns: 1fr 1fr; }
        }
    </style>
</head>
<body>

<!-- Background -->
<div class="bg-wrapper">
    <svg class="wave-svg" viewBox="0 0 1440 180" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0,80 C240,140 480,20 720,80 C960,140 1200,20 1440,80 L1440,180 L0,180 Z" fill="#2d7a3e"/>
    </svg>
</div>

<!-- Top Bar -->
<div class="topbar">
    <div class="topbar-left">
        <span>
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path 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"/></svg>
            (0361) 943233
        </span>
        <span>
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path 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"/></svg>
            tekleperumda@gmail.com
        </span>
    </div>
    
</div>

<!-- Navbar -->
<nav class="navbar">
    <div class="logo-area">
        <!-- Logo Tetesan Air -->
        <!-- Logo Tirta Sanjiwani -->
<div class="logo-icon" style="background:none; box-shadow:none; width:64px; height:64px; padding:0;">
    <img src="{{ asset('images/logo tirta sanjiwani.png') }}" 
         alt="Logo Tirta Sanjiwani" 
         style="width:64px; height:64px; object-fit:contain;">
</div>
        <div class="logo-text">
            <div class="company-name">PERUMDA Air Minum</div>
            <div class="company-sub">Tirta Sanjiwani</div>
            <div class="company-region">Kabupaten Gianyar</div>
        </div>
    </div>

    <!-- <div class="system-badge" style="background:transparent; border:none; padding:4px 0;">
    <img src="{{ asset('images/SIPDAM.png') }}" 
         alt="SIPDAM - Sistem Informasi Penggajian PDAM" 
         style="height:100px; width:auto; object-fit:contain; mix-blend-mode:multiply;"> -->
</div>
</nav>
<div class="nav-divider"></div>

<!-- Hero -->
<section class="hero">
    <div class="hero-left">
        <div class="hero-tag">
            <span class="dot"></span>
            Sistem Resmi PERUMDA Tirta Sanjiwani
        </div>
        <h1 class="hero-title">
            Kelola <span>Tenaga Kerja Lepas</span> dengan Mudah & Efisien
        </h1>
        <p class="hero-desc">
            Platform digital terintegrasi untuk pengelolaan data, kontrak, absensi, dan penggajian tenaga kerja lepas PERUMDA Air Minum Tirta Sanjiwani Kabupaten Gianyar.
        </p>
        <div class="hero-actions">
            @if (Route::has('login'))
                @auth
                    <a href="{{ url('/dashboard') }}" class="btn-primary">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
                        Buka Dashboard
                    </a>
                @else
                    <a href="{{ route('login') }}" class="btn-primary">
                        <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4M10 17l5-5-5-5M14 12H3"/></svg>
                        Masuk Sekarang
                    </a>
                    @if (Route::has('register'))
                        <a href="{{ route('register') }}" class="btn-secondary">
                            <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            Daftar Akun
                        </a>
                    @endif
                @endauth
            @endif
        </div>
    </div>

    <div class="hero-right">
    <div style="position:relative;">
        <!-- Foto utama -->
        <div style="
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 16px 48px rgba(42,120,60,0.25);
            aspect-ratio: 4/3;
            background: #c8d8c8;
        ">
            <img 
    src="{{ asset('images/hero-right.png') }}"
    alt="Teknisi lapangan perbaikan pipa PDAM"
    style="width:100%; height:100%; object-fit:cover;"
>
        </div>

        <!-- Badge floating kiri bawah -->
        <div style="
            position:absolute; bottom:-20px; left:-20px;
            background:#fff;
            border-radius: 16px;
            padding: 14px 18px;
            box-shadow: 0 8px 24px rgba(42,120,60,0.2);
            display:flex; align-items:center; gap:12px;
            border: 1px solid rgba(42,120,60,0.1);
        ">
            <div style="
                width:42px; height:42px;
                background: linear-gradient(135deg,#2d7a3e,#1a5c2a);
                border-radius:12px;
                display:flex; align-items:center; justify-content:center;
                flex-shrink:0;
            ">
                <svg width="22" height="22" fill="none" stroke="white" stroke-width="2" viewBox="0 0 24 24">
                    <path 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 0z"/>
                </svg>
            </div>
            <div>
                <div style="font-size:18px; font-weight:800; color:#1a5c2a; line-height:1;">100%</div>
                <div style="font-size:12px; color:#6b8c72; font-weight:500; margin-top:2px;">Data Terverifikasi</div>
            </div>
        </div>

        <!-- Badge floating kanan atas -->
        <div style="
            position:absolute; top:-16px; right:-16px;
            background:#fff;
            border-radius: 16px;
            padding: 12px 16px;
            box-shadow: 0 8px 24px rgba(42,120,60,0.2);
            display:flex; align-items:center; gap:10px;
            border: 1px solid rgba(42,120,60,0.1);
        ">
            <div style="
                width:36px; height:36px;
                background: #e8f5eb;
                border-radius:10px;
                display:flex; align-items:center; justify-content:center;
                flex-shrink:0;
            ">
                <svg width="20" height="20" fill="none" stroke="#2d7a3e" stroke-width="2" viewBox="0 0 24 24">
                    <path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                </svg>
            </div>
            <div>
                <div style="font-size:13px; font-weight:700; color:#1a5c2a;">Gaji Tepat Waktu</div>
                <div style="font-size:11px; color:#6b8c72; font-weight:500;">Otomatis & Akurat</div>
            </div>
        </div>
    </div>
</div>
</section>

<!-- Features -->
<section class="features">
    <p class="features-title">Fitur Unggulan Sistem</p>
    <div class="features-grid">
        <div class="feat-card">
            <div class="feat-icon" style="background:#e8f5eb">
                <svg fill="none" stroke="#2d7a3e" stroke-width="2" viewBox="0 0 24 24"><path 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 0z"/></svg>
            </div>
            <h4>Data Pekerja</h4>
            <p>Kelola data lengkap tenaga kerja lepas secara terpusat dan terstruktur</p>
        </div>
        <div class="feat-card">
            <div class="feat-icon" style="background:#e8f4fd">
                <svg fill="none" stroke="#1e6fa8" stroke-width="2" viewBox="0 0 24 24"><path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
            </div>
            <h4>Absensi Digital</h4>
            <p>Pencatatan kehadiran harian yang akurat dan mudah dipantau</p>
        </div>
        <div class="feat-card">
            <div class="feat-icon" style="background:#fff8e6">
                <svg fill="none" stroke="#c47f00" stroke-width="2" viewBox="0 0 24 24"><path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
            </div>
            <h4>Manajemen Pekerjaan</h4>
            <p>Pemantauan penugasan dan pelaporan progres kerja teknisi secara berkala</p>
        </div>
        <div class="feat-card">
            <div class="feat-icon" style="background:#e6f7f5">
                <svg fill="none" stroke="#1a7a6e" stroke-width="2" viewBox="0 0 24 24"><path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <h4>Penggajian</h4>
            <p>Perhitungan dan rekap gaji otomatis berdasarkan kehadiran</p>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="footer">
    <strong>PERUMDA Air Minum Tirta Sanjiwani</strong> · Kabupaten Gianyar, Bali &nbsp;|&nbsp;
    SIPDAM &copy; {{ date('Y') }} · Laravel v{{ Illuminate\Foundation\Application::VERSION }}
</footer>

</body>
</html>