@extends('layouts.web.master')

@section('title')
Kulakpos Modern
@endsection

@section('main_content')

<style>
.home-modern { font-family: system-ui; }

/* HERO */
.hero { padding:140px 20px 100px; text-align:center; position:relative; }
.hero h1 { font-size:48px; font-weight:800; }
.hero p { color:#64748b; }

/* BUTTON */
.btn-main { background:#0d9488; color:#fff; padding:14px 30px; border-radius:10px; font-weight:bold; }
.btn-outline { border:2px solid #ddd; padding:14px 30px; border-radius:10px; }

/* SECTION */
.section { padding:100px 20px; }
.section-dark { background:#0f172a; color:white; }

/* GRID */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* CARD */
.card { border:1px solid #eee; border-radius:16px; padding:20px; transition:.3s; }
.card:hover { transform:translateY(-5px); box-shadow:0 10px 30px rgba(0,0,0,.08); }

/* INDUSTRY ACTIVE */
.industry-active { border:2px solid #0d9488; background:#f0fdfa; }

/* CTA */
.cta { background:#0d9488; color:white; text-align:center; padding:80px 20px; }
</style>

<div class="home-modern">

{{-- ================= HERO ================= --}}
<section class="hero">

    <span style="background:#fee2e2;color:#dc2626;padding:8px 16px;border-radius:999px;font-weight:bold;">
        Mitra Digital #1 untuk UMKM
    </span>

    <h1 class="mt-3">
        Sistem Kasir Pintar <br>
        <span style="color:#0d9488;">AI Assistance</span>
    </h1>

    <p class="mt-3">
        Kendalikan penjualan, stok, dan laporan dalam satu dashboard.
    </p>

    <div class="mt-4">
        <a href="#" class="btn-main">Coba Gratis</a>
        <a href="#" class="btn-outline">Demo</a>
    </div>

</section>

{{-- ================= AI ================= --}}
<section id="ai" class="section section-dark">

    <div class="grid-2">

        <div>
            <h2 style="color:#14b8a6;font-weight:800;">AI Assistant</h2>
            <p class="mt-3">Analisis otomatis bisnis Anda.</p>

            <ul class="mt-4">
                <li>✔ Analisis Omset</li>
                <li>✔ Laba Rugi</li>
                <li>✔ Prediksi Stok</li>
            </ul>
        </div>

        <div class="card">
            <strong>AI Dashboard</strong>
            <h3 class="mt-3">Rp 24.500.000</h3>
        </div>

    </div>

</section>

{{-- ================= FITUR ================= --}}
<section id="fitur" class="section">

    <h2 style="text-align:center;font-weight:800;">Fitur Lengkap</h2>

    <div class="grid-4 mt-5">

        <div class="card">Sales Management</div>
        <div class="card">Purchase</div>
        <div class="card">Inventory</div>
        <div class="card">Multi Branch</div>
        <div class="card">Pricing</div>
        <div class="card">Warehouse</div>
        <div class="card">3rd Party</div>
        <div class="card">AI Assistant</div>

    </div>

</section>

{{-- ================= PERANGKAT ================= --}}
<section id="perangkat" class="section" style="background:#f8fafc;">

    <h2 style="text-align:center;font-weight:800;">Multi Platform</h2>

    <div class="grid-3 mt-5">

        <div class="card">Laptop & PC</div>
        <div class="card">Tablet</div>
        <div class="card">Smartphone</div>

    </div>

</section>

{{-- ================= SOLUSI ================= --}}
<section id="solusi" class="section">

    <div class="grid-2">

        <div id="industry-list">

            <div class="card industry-item industry-active" data-id="1">F&B</div>
            <div class="card industry-item" data-id="2">Retail</div>
            <div class="card industry-item" data-id="3">Cafe</div>

        </div>

        <div>
            <h3 id="industry-title">F&B</h3>

            <div id="industry-items" class="mt-3">
                <span class="badge">Restaurant</span>
                <span class="badge">Cafe</span>
            </div>
        </div>

    </div>

</section>

{{-- ================= HARGA ================= --}}
<section id="harga" class="section" style="background:#f8fafc;">

    <h2 style="text-align:center;font-weight:800;">Harga</h2>

    <div class="grid-3 mt-5">

        <div class="card">
            <h4>Basic</h4>
            <h3>Rp 50k</h3>
        </div>

        <div class="card" style="background:#0d9488;color:white;">
            <h4>Pro</h4>
            <h3>Rp 100k</h3>
        </div>

        <div class="card">
            <h4>Enterprise</h4>
            <h3>Custom</h3>
        </div>

    </div>

</section>

{{-- ================= CTA ================= --}}
<section class="cta">
    <h2>Siap Naik Kelas?</h2>
    <p>Mulai sekarang bersama Kulakpos</p>
</section>

</div>

{{-- ================= JS INTERACTIVE ================= --}}
<script>
const industries = {
    1: { title: "F&B", items: ["Restaurant","Cafe","Warung"] },
    2: { title: "Retail", items: ["Minimarket","Toko"] },
    3: { title: "Cafe", items: ["Coffee Shop","Bakery"] },
};

document.querySelectorAll('.industry-item').forEach(el=>{
    el.addEventListener('click', function(){

        document.querySelectorAll('.industry-item').forEach(i=>i.classList.remove('industry-active'));
        this.classList.add('industry-active');

        const id = this.dataset.id;
        const data = industries[id];

        document.getElementById('industry-title').innerText = data.title;

        let html = '';
        data.items.forEach(i=>{
            html += `<span class="badge">${i}</span>`;
        });

        document.getElementById('industry-items').innerHTML = html;

    });
});
</script>

@endsection