<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Verifikasi Email - Fashion Store</title>
    <link href="https://fonts.bunny.net/css?family=dm-serif-display:400,400i|dm-sans:300,400,500,600,700" rel="stylesheet" />
    <style>
        :root{--cream:#faf7f2;--dark:#1c1917;--accent:#c8a96e;--accent-dark:#a07840;--muted:#78716c;--border:#e7e0d8;}
        *{margin:0;padding:0;box-sizing:border-box;}
        body{font-family:'DM Sans',sans-serif;background:var(--cream);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem;}
        .container{width:100%;max-width:1040px;margin:auto;}
        .main-card{background:white;border-radius:1.5rem;box-shadow:0 32px 64px -12px rgba(28,25,23,.12);display:grid;grid-template-columns:1.1fr 1fr;overflow:hidden;border:1px solid var(--border);}
        .left-section{background:var(--dark);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:3rem;min-height:560px;}
        .left-bg{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(28,25,23,.2) 0%,rgba(28,25,23,.78) 100%),url('https://images.unsplash.com/photo-1441984904996-e0b6ba687e04?w=800') center/cover no-repeat;}
        .left-content{position:relative;z-index:1;}
        .badge{display:inline-flex;align-items:center;background:rgba(200,169,110,.2);border:1px solid rgba(200,169,110,.4);border-radius:2rem;padding:.35rem 1rem;margin-bottom:1.5rem;}
        .badge span{font-size:.75rem;font-weight:600;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;}
        .left-content h2{font-family:'DM Serif Display',serif;font-size:2.5rem;color:white;line-height:1.2;margin-bottom:1rem;}
        .left-content p{color:rgba(255,255,255,.65);font-size:.95rem;line-height:1.7;margin-bottom:2rem;}
        .stats-row{display:flex;gap:2rem;}
        .stat-number{font-family:'DM Serif Display',serif;font-size:1.75rem;color:var(--accent);display:block;}
        .stat-label{font-size:.75rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;}
        .right-section{padding:3.5rem;display:flex;flex-direction:column;justify-content:center;}
        .logo-section{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;}
        .logo-icon{width:44px;height:44px;background:var(--dark);border-radius:.75rem;display:flex;align-items:center;justify-content:center;}
        .logo-icon svg{width:22px;height:22px;}
        .logo-name{font-family:'DM Serif Display',serif;font-size:1.5rem;color:var(--dark);}
        .email-anim{width:80px;height:80px;background:rgba(200,169,110,.1);border:2px solid rgba(200,169,110,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;animation:pulse 2s infinite;}
        @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,169,110,.3);}50%{box-shadow:0 0 0 12px rgba(200,169,110,0);}}
        .email-anim svg{width:36px;height:36px;}
        .form-header{margin-bottom:1.75rem;text-align:center;}
        .form-header h2{font-family:'DM Serif Display',serif;font-size:2rem;color:var(--dark);margin-bottom:.75rem;}
        .form-header p{color:var(--muted);font-size:.9rem;line-height:1.7;}
        .alert-success{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:.6rem;padding:.75rem 1rem;margin-bottom:1.5rem;font-size:.85rem;color:#16a34a;text-align:center;}
        .btn-primary{width:100%;padding:.9rem;background:var(--dark);color:white;border:none;border-radius:.6rem;font-size:.95rem;font-weight:700;font-family:'DM Sans',sans-serif;cursor:pointer;letter-spacing:.02em;transition:all .25s;margin-bottom:1rem;}
        .btn-primary:hover{background:#2d2a28;transform:translateY(-1px);box-shadow:0 8px 20px rgba(28,25,23,.2);}
        .divider{display:flex;align-items:center;gap:1rem;margin:1rem 0;}
        .divider-line{flex:1;height:1px;background:var(--border);}
        .divider span{font-size:.78rem;color:var(--muted);white-space:nowrap;}
        .btn-logout{width:100%;padding:.8rem;background:transparent;color:var(--muted);border:1.5px solid var(--border);border-radius:.6rem;font-size:.9rem;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .25s;}
        .btn-logout:hover{border-color:var(--dark);color:var(--dark);}
        .check-list{margin-top:1.5rem;padding:1rem 1.25rem;background:var(--cream);border-radius:.75rem;border:1px solid var(--border);}
        .check-list p{font-size:.8rem;color:var(--muted);margin-bottom:.5rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
        .check-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--dark);padding:.25rem 0;}
        .check-item span{color:var(--accent);font-size:1rem;}
        @media(max-width:860px){.main-card{grid-template-columns:1fr}.left-section{display:none}}
        @media(max-width:560px){body{padding:1rem}.right-section{padding:2.5rem 1.75rem}}
    </style>
</head>
<body>
<div class="container"><div class="main-card">
    <div class="left-section">
        <div class="left-bg"></div>
        <div class="left-content">
            <div class="badge"><span>✦ Fashion Store</span></div>
            <h2>Temukan Gaya Terbaikmu</h2>
            <p>Koleksi pakaian premium pilihan untuk tampilan yang selalu on-trend setiap hari.</p>
        </div>
    </div>
    <div class="right-section">
        <div class="logo-section">
            <div class="logo-icon">
                <svg viewBox="0 0 24 24" fill="none"><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z" stroke="#c8a96e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="3" y1="6" x2="21" y2="6" stroke="#c8a96e" stroke-width="2" stroke-linecap="round"/><path d="M16 10a4 4 0 01-8 0" stroke="#c8a96e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </div>
            <span class="logo-name">Fashion Store</span>
        </div>
        <div class="email-anim">
            <svg viewBox="0 0 24 24" fill="none" stroke="#c8a96e" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
        </div>
        <div class="form-header">
            <h2>Verifikasi Email Anda</h2>
            <p>Kami telah mengirimkan link verifikasi ke email Anda. Silakan cek inbox (atau folder spam) dan klik link tersebut untuk mengaktifkan akun.</p>
        </div>
        @if (session('status') == 'verification-link-sent')
            <div class="alert-success">✓ Link verifikasi baru telah dikirim ke email Anda.</div>
        @endif
        <form method="POST" action="{{ route('verification.send') }}">
            @csrf
            <button type="submit" class="btn-primary">Kirim Ulang Email Verifikasi</button>
        </form>
        <div class="divider"><div class="divider-line"></div><span>atau</span><div class="divider-line"></div></div>
        <form method="POST" action="{{ route('logout') }}">
            @csrf
            <button type="submit" class="btn-logout">Keluar dari Akun</button>
        </form>
        <div class="check-list">
            <p>Tips</p>
            <div class="check-item"><span>✦</span> Cek folder spam / junk mail</div>
            <div class="check-item"><span>✦</span> Link berlaku selama 60 menit</div>
            <div class="check-item"><span>✦</span> Klik tombol di atas jika email tidak masuk</div>
        </div>
    </div>
</div></div>
</body>
</html>