@extends('layouts.app')

@section('title', 'Residential Roofing — Atap Teduh Lestari')

@push('styles')
<style>
  /* HERO */
  .r-hero{background:linear-gradient(120deg,#1a3d2f 0%,#1f7a6b 60%,#2fa08c 100%);color:#fff;position:relative;overflow:hidden;}
  .r-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(232,163,61,.25),transparent 45%);}
  .r-hero .wrap{position:relative;padding:132px 20px 64px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
  .r-hero .kicker{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);padding:6px 14px;border-radius:99px;font-size:12px;letter-spacing:.6px;margin-bottom:16px;}
  .r-hero h1{font-size:38px;line-height:1.15;font-weight:800;margin-bottom:14px;}
  .r-hero h1 span{color:var(--amber);}
  .r-hero p{font-size:16px;color:#d6ebe6;margin-bottom:26px;max-width:520px;}
  .r-hero .hero-btns{display:flex;gap:12px;flex-wrap:wrap;}
  .r-hero .btn-wa{background:#fff;color:#1f7a6b;font-size:15px;padding:13px 22px;}
  .r-hero .btn-wa:hover{background:#e8f4f1;}
  .r-hero .btn-outline{border-color:rgba(255,255,255,.5);color:#fff;font-size:15px;padding:13px 22px;}
  .r-hero .btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}

  /* ==== GAMBAR HERO ESTETIK (Efek Blur / Melebur) ==== */
  .hero-img-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  
  .hero-img-wrapper img {
    width: 120%;
    max-width: 650px;
    height: auto;
    object-fit: contain;
    position: relative;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                        linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%),
                linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    mask-composite: intersect;
  }

  .hero-img-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 90%;
    background: radial-gradient(circle, rgba(47, 160, 140, 0.45) 0%, rgba(31, 122, 107, 0) 65%);
    filter: blur(45px);
    z-index: 1;
  }

  section{padding:56px 0;}
  .sec-head{text-align:center;max-width:620px;margin:0 auto 34px;}
  .sec-head .kicker{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin-bottom:8px;}
  .sec-head h2{font-size:29px;font-weight:800;line-height:1.2;margin-bottom:10px;}
  .sec-head p{color:var(--gray);font-size:14.5px;}

  /* ABOUT */
  .about-sec{background:var(--white);}
  .about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start;}
  .about-text p{font-size:15px;color:var(--navy-2);margin-bottom:16px;line-height:1.75;}
  .about-text p:last-child{margin-bottom:0;}
  .about-text .kicker{display:block;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin-bottom:8px;}
  .about-text h2{font-size:29px;font-weight:800;line-height:1.2;margin-bottom:18px;}
  .about-text h2 span{color:var(--teal);}
  .about-highlight{background:linear-gradient(120deg,#e8f4f1,#f7f4ee);border:1px solid var(--line);border-radius:14px;padding:26px;}
  .about-highlight h4{font-size:16px;margin-bottom:16px;color:var(--navy);display:flex;align-items:center;gap:8px;}
  .about-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px;}
  .about-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center;}
  .about-stat .num{font-size:22px;font-weight:900;color:var(--teal);line-height:1.1;}
  .about-stat .lbl{font-size:11.5px;color:var(--gray);font-weight:600;margin-top:3px;}
  .about-highlight p{font-size:12.5px;color:var(--gray);margin-bottom:14px;line-height:1.6;}
  .about-highlight .btn{width:100%;justify-content:center;font-size:13.5px;padding:11px;}

  /* ==== GAMBAR KATALOG (Tanpa Card, Masking Halus) ==== */
  .katalog-img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    position: relative;
  }
  .katalog-img-wrapper img {
    width: 100%;
    max-width: 700px;
    height: auto;
    object-fit: contain;
    -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
    filter: drop-shadow(0 10px 20px rgba(15,39,64,0.1));
  }

  /* FILTER */
  .filter-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:28px;}
  .chip{background:#fff;border:1.5px solid var(--line);padding:9px 18px;border-radius:99px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.2s;color:var(--navy-2);display:inline-flex;align-items:center;gap:7px;}
  .chip:hover{border-color:var(--teal);color:var(--teal);}
  .chip.active{background:var(--teal);border-color:var(--teal);color:#fff;}
  .chip .count{background:rgba(15,39,64,.08);color:inherit;font-size:11px;font-weight:800;padding:1px 7px;border-radius:99px;}
  .chip.active .count{background:rgba(255,255,255,.25);}

  /* KATALOG */
  .cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .cat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;transition:.25s;display:flex;flex-direction:column;}
  .cat-card:hover{box-shadow:var(--shadow);border-color:#cfe0dc;transform:translateY(-3px);}
  .cat-card.hidden{display:none;}
  .cat-card .cat-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:16px;border-bottom:1.5px solid var(--line);}
  .cat-card .cat-icon{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
  .cat-card .cat-icon.amber{background:linear-gradient(135deg,var(--amber),#c47e1e);}
  .cat-card .cat-icon.blue{background:linear-gradient(135deg,#3a7ab8,#1e4a7a);}
  .cat-card .cat-icon.purple{background:linear-gradient(135deg,#7a5a9a,#4a2f6a);}
  .cat-card .cat-icon.gray{background:linear-gradient(135deg,#6a7a8a,#3a4a5a);}
  .cat-card .cat-icon.brown{background:linear-gradient(135deg,#a0703a,#5a3d1c);}
  .cat-card h3{font-size:18px;margin:0;}
  .cat-card .cat-sub{font-size:12px;color:var(--gray);margin-top:2px;}

  .prod-list{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1;}
  .prod-list li{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px;}
  .prod-list li:last-child{border-bottom:none;}
  .prod-list li .num{font-size:11.5px;font-weight:800;color:var(--teal);background:#e8f4f1;min-width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
  .prod-list li .pname{font-weight:700;color:var(--navy);}
  .prod-list li .pdesc{font-size:12px;color:var(--gray);display:block;margin-top:2px;font-weight:400;}

  .cat-actions{margin-top:18px;display:flex;gap:8px;}
  .cat-actions .btn{flex:1;justify-content:center;font-size:13px;padding:9px 10px;}

  /* LEAD FORM */
  .lead{background:var(--white);}
  .lead-box{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;background:linear-gradient(120deg,#e8f4f1,#f7f4ee);border-radius:16px;padding:40px;border:1px solid var(--line);}
  .lead-info h3{font-size:26px;margin-bottom:10px;line-height:1.2;}
  .lead-info p{font-size:14px;color:var(--gray);margin-bottom:18px;}
  .lead-info ul{list-style:none;font-size:13.5px;}
  .lead-info li{display:flex;gap:9px;margin-bottom:10px;color:var(--navy-2);}
  .lead-info li::before{content:'✓';color:var(--teal);font-weight:800;}
  .lead-info .wa-highlight{display:inline-flex;align-items:center;gap:8px;background:#25d366;color:#fff;padding:8px 16px;border-radius:99px;font-size:13.5px;font-weight:700;margin-top:6px;}

  .lead-form{background:#fff;border-radius:12px;padding:26px;box-shadow:var(--shadow);border:1px solid var(--line);}
  .lead-form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:5px;color:var(--navy-2);}
  .lead-form .field{margin-bottom:14px;}
  .lead-form input,.lead-form select,.lead-form textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:8px;font-family:var(--font);font-size:14px;color:var(--navy);background:#fff;transition:.2s;}
  .lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,122,107,.1);}
  .lead-form textarea{resize:vertical;min-height:70px;}
  .lead-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .lead-form .btn{width:100%;justify-content:center;margin-top:6px;background:#25d366;color:#fff;font-size:15px;padding:13px;}
  .lead-form .btn:hover{background:#1eb958;}
  .lead-form .note{font-size:11.5px;color:var(--gray);text-align:center;margin-top:10px;line-height:1.5;}
  .lead-form .note strong{color:var(--navy);}

  .check-group{display:flex;flex-wrap:wrap;gap:8px;}
  .check-item{display:flex;align-items:center;gap:7px;background:#fff;border:1.5px solid var(--line);border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--navy-2);cursor:pointer;transition:.2s;user-select:none;}
  .check-item:hover{border-color:var(--teal);color:var(--teal);}
  .check-item input{accent-color:var(--teal);width:15px;height:15px;cursor:pointer;margin:0;}
  .check-item.checked{background:#e8f4f1;border-color:var(--teal);color:var(--teal);}

  /* PROCESS */
  .process{background:var(--cream);}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
  .step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 20px;text-align:center;position:relative;}
  .step .n{width:44px;height:44px;border-radius:50%;background:var(--teal);color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
  .step h5{font-size:15px;margin-bottom:6px;}
  .step p{font-size:12.5px;color:var(--gray);}

  /* ===== FOOTER ===== */
  footer{background:var(--navy);color:#cfdae5;font-size:13px;padding:52px 0 0;}
  .foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);}
  .foot-brand .logo{color:#fff;margin-bottom:14px;}
  .foot-brand .logo .logo-img{height:44px;max-width:240px;}
  .foot-brand p{font-size:12.5px;color:#9fb2c4;line-height:1.7;max-width:320px;}
  .foot-col h5{color:#fff;font-size:14px;font-weight:800;margin-bottom:14px;letter-spacing:.3px;}
  .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .foot-col ul li a{font-size:12.5px;color:#9fb2c4;transition:.2s;}
  .foot-col ul li a:hover{color:var(--amber);}
  .foot-contact li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:#9fb2c4;line-height:1.6;}
  .foot-contact li span.ic{color:var(--amber);flex-shrink:0;}
  .foot-social{display:flex;gap:10px;margin-top:14px;}
  .foot-social a{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;transition:.2s;}
  .foot-social a:hover{background:var(--teal);border-color:var(--teal);transform:translateY(-2px);}
  .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 0 22px;font-size:12px;color:#8a9dae;}
  .foot-bottom .links{display:flex;gap:18px;flex-wrap:wrap;}
  .foot-bottom .links a:hover{color:var(--amber);}

  .float-wa{position:fixed;right:22px;bottom:22px;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 6px 20px rgba(37,211,102,.45);z-index:100;transition:.2s;}
  .float-wa:hover{transform:scale(1.08);}

  @media(max-width:980px){
    .r-hero .wrap{grid-template-columns:1fr;padding:120px 20px 50px;}
    .cat-grid{grid-template-columns:1fr;}
    .lead-box{grid-template-columns:1fr;padding:26px;}
    .steps{grid-template-columns:1fr 1fr;}
    .hero-img-wrapper{margin-top:40px;}
    .hero-img-wrapper img { width: 100%; }
    .about-grid{grid-template-columns:1fr;gap:28px;}

    .foot-grid{grid-template-columns:1fr 1fr;gap:28px;}
    .foot-brand p{max-width:100%;}
  }
  @media(max-width:720px){
    .steps{grid-template-columns:1fr;}
    .r-hero h1{font-size:29px;}
    .lead-form .row{grid-template-columns:1fr;}
    .sec-head h2{font-size:24px;}
    .about-text h2{font-size:24px;}
    .filter-row{gap:8px;}
    .chip{font-size:12.5px;padding:8px 14px;}
    .about-stats{grid-template-columns:1fr 1fr;}

    .foot-grid{grid-template-columns:1fr;gap:24px;}
    .foot-bottom{flex-direction:column;align-items:flex-start;}
  }
</style>
@endpush

@section('content')

<section class="r-hero">
  <div class="wrap">
    <div>
      <span class="kicker" data-id="🏠 Residential Roofing" data-en="🏠 Residential Roofing">🏠 Residential Roofing</span>
      <h1 data-id="Bangun Rumah Impian Anda dengan <span>Atap Berkualitas</span>" data-en="Build Your Dream Home with <span>Quality Roofing</span>">Bangun Rumah Impian Anda dengan <span>Atap Berkualitas</span></h1>
      <p data-id="Dapatkan atap yang kuat, indah, dan tahan cuaca ekstrem. Konsultasikan kebutuhan Anda gratis bersama tim ahli kami dan nikmati penawaran spesial dari cabang terdekat."
         data-en="Get a strong, beautiful roof that withstands extreme weather. Consult your needs for free with our expert team and enjoy special offers from the nearest branch.">Dapatkan atap yang kuat, indah, dan tahan cuaca ekstrem. Konsultasikan kebutuhan Anda gratis bersama tim ahli kami dan nikmati penawaran spesial dari cabang terdekat.</p>
      <div class="hero-btns">
        <a href="#form" class="btn btn-wa" data-id="💬 Konsultasi Gratis" data-en="💬 Free Consultation">💬 Konsultasi Gratis</a>
        <a href="#katalog" class="btn btn-outline" data-id="Lihat Katalog →" data-en="View Catalog →">Lihat Katalog →</a>
      </div>
    </div>

    <div class="hero-img-wrapper">
      <img src="{{ asset('images/atl-hbs.png') }}" alt="Produk Atap Teduh Lestari - atl-hbs">
    </div>
  </div>
</section>

<!-- ===== SECTION ABOUT ===== -->
<section id="about" class="about-sec">
  <div class="wrap">
    <div class="about-grid">
      <div class="about-text">
        <span class="kicker" data-id="Tentang Kami" data-en="About Us">Tentang Kami</span>
        {{-- <h2 data-id="Solusi Atap &amp; Selubung Bangunan Terintegrasi" data-en="Integrated Roofing &amp; Building Envelope Solutions">Solusi Atap &amp; <span>Selubung Bangunan</span> Terintegrasi</h2> --}}
        <p data-id="PT. Atap Teduh Lestari (ATL) adalah perusahaan yang bergerak dalam bidang penyediaan solusi atap, waterproofing, insulasi, dan Solusi Selubung Bangunan untuk proyek-proyek industri, komersial, infrastruktur, dan institusi di Indonesia. Dengan pengalaman sejak tahun 1979 dan menjadi perusahaan korporasi sejak tahun 2004, ATL telah menyelesaikan berbagai proyek di seluruh Indonesia."
           data-en="PT. Atap Teduh Lestari (ATL) is a company engaged in providing roofing, waterproofing, insulation, and Building Envelope Solutions for industrial, commercial, infrastructure, and institutional projects in Indonesia. With experience since 1979 and becoming a corporate company in 2004, ATL has completed various projects throughout Indonesia.">PT. Atap Teduh Lestari (ATL) adalah perusahaan yang bergerak dalam bidang penyediaan solusi atap, waterproofing, insulasi, dan Solusi Selubung Bangunan untuk proyek-proyek industri, komersial, infrastruktur, dan institusi di Indonesia. Dengan pengalaman sejak tahun 1979 dan menjadi perusahaan korporasi sejak tahun 2004, ATL telah menyelesaikan berbagai proyek di seluruh Indonesia.</p>
        <p data-id="Kami berkomitmen untuk memberikan solusi bangunan yang terintegrasi, berkualitas tinggi, dan berkelanjutan yang memenuhi standar internasional. Tim teknis dan insinyur kami siap mendukung proyek Anda dari tahap perencanaan hingga implementasi."
           data-en="We are committed to providing integrated, high-quality, and sustainable building solutions that meet international standards. Our technical team and engineers are ready to support your project from planning to implementation.">Kami berkomitmen untuk memberikan solusi bangunan yang terintegrasi, berkualitas tinggi, dan berkelanjutan yang memenuhi standar internasional. Tim teknis dan insinyur kami siap mendukung proyek Anda dari tahap perencanaan hingga implementasi.</p>
      </div>

      <div class="about-highlight">
        <h4 data-id="🏆 Rekam Jejak ATL" data-en="🏆 ATL Track Record">🏆 Rekam Jejak ATL</h4>
        <div class="about-stats">
          <div class="about-stat">
            <div class="num">1979</div>
            <div class="lbl" data-id="Sejak Tahun" data-en="Since">Sejak Tahun</div>
          </div>
          <div class="about-stat">
            <div class="num">2004</div>
            <div class="lbl" data-id="Korporasi" data-en="Corporate">Korporasi</div>
          </div>
          <div class="about-stat">
            <div class="num">45+</div>
            <div class="lbl" data-id="Tahun Pengalaman" data-en="Years Experience">Tahun Pengalaman</div>
          </div>
          <div class="about-stat">
            <div class="num">100%</div>
            <div class="lbl" data-id="Nasional" data-en="National">Nasional</div>
          </div>
        </div>
        <p data-id="Melayani proyek industri, komersial, infrastruktur, dan institusi di seluruh Indonesia dengan standar internasional." data-en="Serving industrial, commercial, infrastructure, and institutional projects across Indonesia with international standards.">Melayani proyek industri, komersial, infrastruktur, dan institusi di seluruh Indonesia dengan standar internasional.</p>
        <a href="#form" class="btn btn-primary" data-id="💬 Diskusikan Proyek Anda" data-en="💬 Discuss Your Project">💬 Diskusikan Proyek Anda</a>
      </div>
    </div>
  </div>
</section>

<section id="katalog">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-id="Katalog Produk" data-en="Product Catalog">Katalog Produk</div>
      <h2 data-id="Pilih Produk Sesuai Kebutuhan" data-en="Choose Products Based on Needs &amp; Budget">Pilih Produk Sesuai Kebutuhan</h2>
      <p data-id="Filter berdasarkan kategori, lalu konsultasikan kebutuhan Anda langsung via WhatsApp." data-en="Filter by category, then consult your needs directly via WhatsApp.">Filter berdasarkan kategori, lalu konsultasikan kebutuhan Anda langsung via WhatsApp.</p>
    </div>

    <div class="katalog-img-wrapper">
      <img src="{{ asset('images/home.png') }}" alt="Ilustrasi 3D Potongan Rumah - Atap Teduh Lestari">
    </div>

    <div class="filter-row" id="filterRow">
      <div class="chip active" data-filter="all" data-id="Semua" data-en="All">Semua <span class="count">6</span></div>
            <div class="chip" data-filter="atap" data-id="Atap" data-en="Roofing">Atap <span class="count">1</span></div>
      <div class="chip" data-filter="waterproofing" data-id="Waterproofing" data-en="Waterproofing">Waterproofing <span class="count">1</span></div>
      <div class="chip" data-filter="pintu" data-id="Pintu" data-en="Doors">Pintu <span class="count">1</span></div>
      <div class="chip" data-filter="jendela" data-id="Jendela" data-en="Windows">Jendela <span class="count">1</span></div>
      <div class="chip" data-filter="dinding" data-id="Dinding" data-en="Wall">Dinding <span class="count">1</span></div>
      <div class="chip" data-filter="plafon" data-id="Plafon" data-en="Ceiling">Plafon <span class="count">1</span></div>
    </div>

    <div class="cat-grid" id="catGrid">

      <!-- ATAP -->
      <div class="cat-card" data-cat="atap" data-products="Atap Shingle Bitumen,Atap Metal">
        <div class="cat-head">
          <div class="cat-icon">🏠</div>
          <div>
            <h3 data-id="Atap" data-en="Roofing">Atap</h3>
            <div class="cat-sub" data-id="2 jenis atap" data-en="2 types of roofing">2 jenis atap</div>
          </div>
        </div>
        <ul class="prod-list">
          <li><span class="num">1</span><span class="pname" data-id="Atap Shingle Bitumen" data-en="Bitumen Shingle Roofing">Atap Shingle Bitumen</span></li>
          <li><span class="num">2</span><span class="pname" data-id="Atap Metal" data-en="Metal Roofing">Atap Metal</span></li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

      <!-- WATERPROOFING -->
      <div class="cat-card" data-cat="waterproofing" data-products="Waterproofing Torch,Waterproofing Mechanical">
        <div class="cat-head">
          <div class="cat-icon blue">💧</div>
          <div>
            <h3 data-id="Waterproofing" data-en="Waterproofing">Waterproofing</h3>
            <div class="cat-sub" data-id="2 metode aplikasi" data-en="2 application methods">2 metode aplikasi</div>
          </div>
        </div>
        <ul class="prod-list">
          <li><span class="num">1</span><span class="pname" data-id="Torch (Bakar)" data-en="Torch (Burn)">Torch (Bakar)</span></li>
          <li><span class="num">2</span><span class="pname" data-id="Mechanical (Screw)" data-en="Mechanical (Screw)">Mechanical (Screw)</span></li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

      <!-- PINTU -->
      <div class="cat-card" data-cat="pintu" data-products="Pintu Kayu,Pintu UPVC,Pintu Alumunium">
        <div class="cat-head">
          <div class="cat-icon purple">🚪</div>
          <div>
            <h3 data-id="Pintu" data-en="Doors">Pintu</h3>
            <div class="cat-sub" data-id="3 pilihan material" data-en="3 material options">3 pilihan material</div>
          </div>
        </div>
        <ul class="prod-list">
          <li><span class="num">1</span><span class="pname" data-id="Kayu" data-en="Wood">Kayu</span></li>
          <li><span class="num">2</span><span class="pname" data-id="UPVC" data-en="UPVC">UPVC</span></li>
          <li><span class="num">3</span><span class="pname" data-id="Alumunium" data-en="Aluminum">Alumunium</span></li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

      <!-- JENDELA -->
      <div class="cat-card" data-cat="jendela" data-products="Jendela Kayu,Jendela UPVC,Jendela Alumunium">
        <div class="cat-head">
          <div class="cat-icon gray">🪟</div>
          <div>
            <h3 data-id="Jendela" data-en="Windows">Jendela</h3>
            <div class="cat-sub" data-id="3 pilihan material" data-en="3 material options">3 pilihan material</div>
          </div>
        </div>
        <ul class="prod-list">
          <li><span class="num">1</span><span class="pname" data-id="Kayu" data-en="Wood">Kayu</span></li>
          <li><span class="num">2</span><span class="pname" data-id="UPVC" data-en="UPVC">UPVC</span></li>
          <li><span class="num">3</span><span class="pname" data-id="Alumunium" data-en="Aluminum">Alumunium</span></li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

      <!-- DINDING -->
      <div class="cat-card" data-cat="dinding" data-products="Dinding Indoor,Dinding Outdoor">
        <div class="cat-head">
          <div class="cat-icon brown">🧱</div>
          <div>
            <h3 data-id="Dinding" data-en="Wall">Dinding</h3>
            <div class="cat-sub" data-id="2 pilihan area" data-en="2 area options">2 pilihan area</div>
          </div>
        </div>
        <ul class="prod-list">
          <li><span class="num">1</span><span class="pname" data-id="Indoor" data-en="Indoor">Indoor</span></li>
          <li><span class="num">2</span><span class="pname" data-id="Outdoor" data-en="Outdoor">Outdoor</span></li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

      <!-- PLAFON -->
      <div class="cat-card" data-cat="plafon" data-products="Plafon">
        <div class="cat-head">
          <div class="cat-icon">🔲</div>
          <div>
            <h3 data-id="Plafon" data-en="Ceiling">Plafon</h3>
            <div class="cat-sub" data-id="Solusi plafon" data-en="Ceiling solutions">Solusi plafon</div>
          </div>
        </div>
        <ul class="prod-list">
          <li>
            <span class="num">1</span>
            <span class="pname" data-id="Plafon" data-en="Ceiling">Plafon</span>
            <span class="pdesc" data-id="Konsultasikan kebutuhan plafon Anda" data-en="Consult your ceiling needs">Konsultasikan kebutuhan plafon Anda</span>
          </li>
        </ul>
        <div class="cat-actions">
          <button type="button" class="btn btn-wa" onclick="tanyaProduk(this)" data-id="💬 Tanya" data-en="💬 Ask">💬 Tanya</button>
        </div>
      </div>

    </div>

    <div id="emptyState" style="display:none;text-align:center;padding:40px 20px;color:var(--gray);">
      <div style="font-size:40px;margin-bottom:10px;">🔍</div>
      <p data-id="Tidak ada kategori yang cocok dengan filter ini." data-en="No categories match this filter.">Tidak ada kategori yang cocok dengan filter ini.</p>
    </div>
  </div>
</section>

<section id="form" class="lead">
  <div class="wrap">
    <div class="lead-box">
      <div class="lead-info">
        <span class="kicker" style="display:inline-block;font-size:12px;font-weight:800;letter-spacing:2px;color:var(--teal);text-transform:uppercase;margin-bottom:8px;" data-id="Konsultasi &amp; Penawaran" data-en="Consultation &amp; Quotation">Konsultasi &amp; Penawaran</span>
        <h3 data-id="Ceritakan Kebutuhan Anda" data-en="Tell Us Your Needs">Ceritakan Kebutuhan Anda</h3>
        <p data-id="Isi form singkat ini — data Anda akan langsung dikirim ke WhatsApp tim kami. Respon cepat, gratis, tanpa komitmen." data-en="Fill out this short form — your data will be sent directly to our team's WhatsApp. Fast response, free, no commitment.">Isi form singkat ini — data Anda akan langsung dikirim ke WhatsApp tim kami. Respon cepat, gratis, tanpa komitmen.</p>
        <ul>
          <li data-id="Diteruskan ke cabang sesuai wilayah proyek" data-en="Forwarded to the branch according to project area">Diteruskan ke cabang sesuai wilayah proyek</li>
          <li data-id="Konsultasi produk &amp; estimasi kebutuhan" data-en="Product consultation &amp; needs estimation">Konsultasi produk &amp; estimasi kebutuhan</li>
          <li data-id="Penawaran resmi dari cabang terdekat" data-en="Official quotation from the nearest branch">Penawaran resmi dari cabang terdekat</li>
          <li data-id="Data Anda dilindungi sesuai kebijakan privasi" data-en="Your data is protected according to our privacy policy">Data Anda dilindungi sesuai kebijakan privasi</li>
        </ul>
        <div class="wa-highlight" data-id="💬 Tujuan WhatsApp: <b>0881-7585-067</b>" data-en="💬 WhatsApp destination: <b>0881-7585-067</b>">💬 Tujuan WhatsApp: <b>0881-7585-067</b></div>
      </div>

      <form class="lead-form" onsubmit="kirimWA(event)">
        <div class="field">
          <label data-id="Nama Lengkap *" data-en="Full Name *">Nama Lengkap *</label>
          <input type="text" id="nama" placeholder="Nama Anda" required data-id-placeholder="Nama Anda" data-en-placeholder="Your name">
        </div>
        <div class="field">
          <label data-id="Email *" data-en="Email *">Email *</label>
          <input type="email" id="email" placeholder="nama@email.com" required>
        </div>
        <div class="field">
          <label data-id="Nomor WhatsApp *" data-en="WhatsApp Number *">Nomor WhatsApp *</label>
          <input type="tel" id="wa" placeholder="08xx-xxxx-xxxx" required>
        </div>
        <div class="row">
          <div class="field">
            <label data-id="Lokasi Proyek *" data-en="Project Location *">Lokasi Proyek *</label>
            <input type="text" id="lokasi" placeholder="Kota / alamat" required data-id-placeholder="Kota / alamat" data-en-placeholder="City / address">
          </div>
          <div class="field">
            <label data-id="Luas Proyek (m²) *" data-en="Project Area (m²) *">Luas Proyek (m²) *</label>
            <input type="number" id="luas" placeholder="Contoh: 120" min="1" required data-id-placeholder="Contoh: 120" data-en-placeholder="Example: 120">
          </div>
        </div>
        <div class="field">
          <label data-id="Produk yang Dibutuhkan *" data-en="Required Products *">Produk yang Dibutuhkan * <span style="font-weight:500;color:var(--gray);font-size:11.5px;" data-id="(bisa pilih lebih dari satu)" data-en="(can select more than one)">(bisa pilih lebih dari satu)</span></label>
          <div class="check-group" id="produkGroup">
            <label class="check-item"><input type="checkbox" value="Atap Shingle Bitumen"> <span data-id="Atap Shingle Bitumen" data-en="Bitumen Shingle Roofing">Atap Shingle Bitumen</span></label>
            <label class="check-item"><input type="checkbox" value="Atap Metal"> <span data-id="Atap Metal" data-en="Metal Roofing">Atap Metal</span></label>
            <label class="check-item"><input type="checkbox" value="Waterproofing Torch"> <span data-id="Waterproofing Torch" data-en="Torch Waterproofing">Waterproofing Torch</span></label>
            <label class="check-item"><input type="checkbox" value="Waterproofing Mechanical"> <span data-id="Waterproofing Mechanical" data-en="Mechanical Waterproofing">Waterproofing Mechanical</span></label>
            <label class="check-item"><input type="checkbox" value="Pintu Kayu"> <span data-id="Pintu Kayu" data-en="Wooden Door">Pintu Kayu</span></label>
            <label class="check-item"><input type="checkbox" value="Pintu UPVC"> <span data-id="Pintu UPVC" data-en="UPVC Door">Pintu UPVC</span></label>
            <label class="check-item"><input type="checkbox" value="Pintu Alumunium"> <span data-id="Pintu Alumunium" data-en="Aluminum Door">Pintu Alumunium</span></label>
            <label class="check-item"><input type="checkbox" value="Jendela Kayu"> <span data-id="Jendela Kayu" data-en="Wooden Window">Jendela Kayu</span></label>
            <label class="check-item"><input type="checkbox" value="Jendela UPVC"> <span data-id="Jendela UPVC" data-en="UPVC Window">Jendela UPVC</span></label>
            <label class="check-item"><input type="checkbox" value="Jendela Alumunium"> <span data-id="Jendela Alumunium" data-en="Aluminum Window">Jendela Alumunium</span></label>
            <label class="check-item"><input type="checkbox" value="Dinding Indoor"> <span data-id="Dinding Indoor" data-en="Indoor Wall">Dinding Indoor</span></label>
            <label class="check-item"><input type="checkbox" value="Dinding Outdoor"> <span data-id="Dinding Outdoor" data-en="Outdoor Wall">Dinding Outdoor</span></label>
            <label class="check-item"><input type="checkbox" value="Plafon"> <span data-id="Plafon" data-en="Ceiling">Plafon</span></label>
          </div>
        </div>
        <div class="field">
          <label data-id="Deskripsi Proyek *" data-en="Project Description *">Deskripsi Proyek *</label>
          <textarea id="deskripsi" placeholder="Ceritakan kebutuhan proyek Anda (jenis bangunan, timeline, catatan khusus...)" required data-id-placeholder="Ceritakan kebutuhan proyek Anda (jenis bangunan, timeline, catatan khusus...)" data-en-placeholder="Tell us about your project needs (building type, timeline, special notes...)"></textarea>
        </div>
        <button type="submit" class="btn" data-id="💬 Kirim ke WhatsApp →" data-en="💬 Send to WhatsApp →">💬 Kirim ke WhatsApp →</button>
        <div class="note" data-id="Dengan mengirim, Anda menyetujui kebijakan privasi ATL.<br>Pesan akan diteruskan ke WhatsApp <strong>0881-7585-067</strong>." data-en="By submitting, you agree to ATL's privacy policy.<br>The message will be forwarded to WhatsApp <strong>0881-7585-067</strong>.">Dengan mengirim, Anda menyetujui kebijakan privasi ATL.<br>Pesan akan diteruskan ke WhatsApp <strong>0881-7585-067</strong>.</div>
      </form>
    </div>
  </div>
</section>

<section class="process">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker" data-id="Alur Mudah" data-en="Easy Flow">Alur Mudah</div>
      <h2 data-id="Dari Konsultasi sampai Produk Terpasang" data-en="From Consultation to Installed Product">Dari Konsultasi sampai Produk Terpasang</h2>
      <p data-id="Empat langkah sederhana, dibantu tim cabang terdekat." data-en="Four simple steps, assisted by the nearest branch team.">Empat langkah sederhana, dibantu tim cabang terdekat.</p>
    </div>
    <div class="steps">
      <div class="step"><div class="n">1</div><h5 data-id="Isi Form" data-en="Fill the Form">Isi Form</h5><p data-id="Kirim kebutuhan Anda via form — langsung masuk ke WhatsApp kami." data-en="Send your needs via form — goes directly to our WhatsApp.">Kirim kebutuhan Anda via form — langsung masuk ke WhatsApp kami.</p></div>
      <div class="step"><div class="n">2</div><h5 data-id="Konsultasi" data-en="Consultation">Konsultasi</h5><p data-id="Tim kami menghubungi Anda untuk diskusi produk &amp; kebutuhan." data-en="Our team contacts you to discuss products &amp; needs.">Tim kami menghubungi Anda untuk diskusi produk &amp; kebutuhan.</p></div>
      <div class="step"><div class="n">3</div><h5 data-id="Penawaran Cabang" data-en="Branch Quotation">Penawaran Cabang</h5><p data-id="Cabang terdekat mengirim penawaran resmi sesuai wilayah Anda." data-en="The nearest branch sends an official quotation according to your area.">Cabang terdekat mengirim penawaran resmi sesuai wilayah Anda.</p></div>
      <div class="step"><div class="n">4</div><h5 data-id="Pemasangan" data-en="Installation">Pemasangan</h5><p data-id="Tim terlatih memasang produk sesuai standar &amp; garansi." data-en="Trained team installs products according to standards &amp; warranty.">Tim terlatih memasang produk sesuai standar &amp; garansi.</p></div>
    </div>
  </div>
</section>

<!-- ===== FOOTER ===== -->
<footer>
  <div class="wrap">
    <div class="foot-grid">
      <div class="foot-brand">
        <a href="{{ url('/') }}" class="logo">
          <img src="{{ asset('images/logo.png') }}" alt="Logo PT. Atap Teduh Lestari" class="logo-img">
        </a>
        <p data-id="PT. Atap Teduh Lestari — penyedia solusi atap, waterproofing, insulasi, dan selubung bangunan terintegrasi untuk proyek industri, komersial, infrastruktur, dan institusi di seluruh Indonesia. Berpengalaman sejak 1979."
           data-en="PT. Atap Teduh Lestari — provider of integrated roofing, waterproofing, insulation, and building envelope solutions for industrial, commercial, infrastructure, and institutional projects across Indonesia. Experienced since 1979.">PT. Atap Teduh Lestari — penyedia solusi atap, waterproofing, insulasi, dan selubung bangunan terintegrasi untuk proyek industri, komersial, infrastruktur, dan institusi di seluruh Indonesia. Berpengalaman sejak 1979.</p>
        <div class="foot-social">
          <a href="#" aria-label="Instagram" title="Instagram">📷</a>
          <a href="#" aria-label="Facebook" title="Facebook">📘</a>
          <a href="#" aria-label="LinkedIn" title="LinkedIn">💼</a>
          <a href="#" aria-label="YouTube" title="YouTube">▶️</a>
        </div>
      </div>

      <div class="foot-col">
        <h5 data-id="Navigasi" data-en="Navigation">Navigasi</h5>
        <ul>
          <li><a href="{{ url('residential-roofing') }}#about" data-id="Tentang Kami" data-en="About Us">Tentang Kami</a></li>
          <li><a href="{{ url('residential-roofing') }}#katalog" data-id="Katalog Produk" data-en="Product Catalog">Katalog Produk</a></li>
          <li><a href="{{ url('karir') }}" data-id="Karir" data-en="Career">Karir</a></li>
          <li><a href="{{ url('residential-roofing') }}#form" data-id="Konsultasi" data-en="Consultation">Konsultasi</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h5 data-id="Kategori Produk" data-en="Product Categories">Kategori Produk</h5>
        <ul>
          <li><a href="{{ url('/') }}#katalog" data-id="Atap" data-en="Roofing">Atap</a></li>
          <li><a href="{{ url('/') }}#katalog" data-id="Waterproofing" data-en="Waterproofing">Waterproofing</a></li>
          <li><a href="{{ url('/') }}#katalog" data-id="Pintu" data-en="Doors">Pintu</a></li>
          <li><a href="{{ url('/') }}#katalog" data-id="Jendela" data-en="Windows">Jendela</a></li>
          <li><a href="{{ url('/') }}#katalog" data-id="Dinding &amp; Plafon" data-en="Wall &amp; Ceiling">Dinding &amp; Plafon</a></li>
        </ul>
      </div>

      <div class="foot-col">
        <h5 data-id="Hubungi Kami" data-en="Contact Us">Hubungi Kami</h5>
        <ul class="foot-contact">
          <li>
            <span class="ic">📍</span>
            <span data-id="Jl Raya Kalimalang Kav. PTB DKI Blok G17 No. 4A-D Pondok Kelapa, Jakarta Timur 13450">Jl Raya Kalimalang Kav. PTB DKI Blok G17 No. 4A-D Pondok Kelapa, Jakarta Timur 13450</span>
          </li>
          <li>
            <span class="ic">📞</span>
            <span>0881-7585-067</span>
          </li>
          <li>
            <span class="ic">✉️</span>
            <span>info@roof-online.com</span>
          </li>
          <li>
            <span class="ic">🕒</span>
            <span data-id="Senin – Jumat: 08.00 – 17.00" data-en="Mon – Fri: 08.00 – 17.00">Senin – Jumat: 08.00 – 17.00</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="foot-bottom">
      <div>© 2026 <span data-id="PT Atap Teduh Lestari. Seluruh hak cipta dilindungi." data-en="PT Atap Teduh Lestari. All rights reserved.">PT Atap Teduh Lestari. Seluruh hak cipta dilindungi.</span></div>
      <div class="links">
        <a href="#" data-id="Kebijakan Privasi" data-en="Privacy Policy">Kebijakan Privasi</a>
        <a href="#" data-id="Syarat &amp; Ketentuan" data-en="Terms & Conditions">Syarat &amp; Ketentuan</a>
      </div>
    </div>
  </div>
</footer>

<a href="#form" class="float-wa" title="Chat WhatsApp">💬</a>

@endsection

@push('scripts')
<script>
  /* ===== FILTER KATALOG ===== */
  const chips = document.querySelectorAll('#filterRow .chip');
  const catCards = document.querySelectorAll('#catGrid .cat-card');
  const emptyState = document.getElementById('emptyState');

  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      chips.forEach(c => c.classList.remove('active'));
      chip.classList.add('active');

      const filter = chip.dataset.filter;
      let visibleCount = 0;

      catCards.forEach(card => {
        if (filter === 'all' || card.dataset.cat === filter) {
          card.classList.remove('hidden');
          visibleCount++;
        } else {
          card.classList.add('hidden');
        }
      });

      emptyState.style.display = (visibleCount === 0) ? 'block' : 'none';
    });
  });

  /* ===== CHECKBOX VISUAL ===== */
  document.querySelectorAll('.check-item input').forEach(cb => {
    cb.addEventListener('change', () => {
      cb.closest('.check-item').classList.toggle('checked', cb.checked);
    });
  });

  /* ===== TANYA PRODUK ===== */
  function tanyaProduk(btn){
    const card = btn.closest('.cat-card');
    const list = (card.getAttribute('data-products') || '').split(',').map(s => s.trim());

    document.querySelectorAll('#produkGroup input[type="checkbox"]').forEach(cb => {
      if(list.includes(cb.value)){
        cb.checked = true;
        cb.closest('.check-item').classList.add('checked');
      }
    });

    const target = document.getElementById('form');
    if(target){
      target.scrollIntoView({behavior:'smooth', block:'start'});
      setTimeout(() => {
        const nama = document.getElementById('nama');
        if(nama) nama.focus({preventScroll:true});
      }, 600);
    }
  }

  /* ===== KIRIM WA ===== */
 async function kirimWA(e){
  e.preventDefault();

  const nama = document.getElementById('nama').value.trim();
  const email = document.getElementById('email').value.trim();
  const wa = document.getElementById('wa').value.trim();
  const lokasi = document.getElementById('lokasi').value.trim();
  const luas = document.getElementById('luas').value.trim();
  const deskripsi = document.getElementById('deskripsi').value.trim();
  const produkChecked = Array.from(document.querySelectorAll('#produkGroup input:checked')).map(cb => cb.value);

  if(!nama || !email || !wa || !lokasi || !luas || produkChecked.length === 0 || !deskripsi){
    Swal.fire({
      icon: 'warning',
      title: 'Oops...',
      text: 'Mohon lengkapi semua field, dan pilih minimal 1 produk.',
      confirmButtonColor: '#1f7a6b'
    });
    return;
  }

  const btn = e.target.querySelector('button[type="submit"]');
  const originalText = btn.innerHTML;
  btn.disabled = true;

  // Loading state
  Swal.fire({
    title: 'Mengirim Data...',
    text: 'Mohon tunggu sebentar.',
    allowOutsideClick: false,
    didOpen: () => { Swal.showLoading(); }
  });

  try {
    const res = await fetch('{{ route('consultation.store') }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
      },
      body: JSON.stringify({
        nama, email, wa, lokasi, luas, 
        produk: produkChecked, 
        deskripsi
      }),
    });

    if (!res.ok) {
      const err = await res.json().catch(() => ({}));
      let errorMsg = 'Terjadi kesalahan saat menyimpan konsultasi.';
      if(err.errors) errorMsg = Object.values(err.errors).flat().join('\n');
      
      Swal.fire({
        icon: 'error',
        title: 'Gagal Mengirim',
        text: errorMsg,
        confirmButtonColor: '#1f7a6b'
      });
      return;
    }

    const json = await res.json();
    
    // Sukses Alert
    Swal.fire({
      icon: 'success',
      title: 'Berhasil Terkirim!',
      text: 'Data konsultasi Anda telah tersimpan. Anda akan diarahkan ke WhatsApp.',
      confirmButtonColor: '#1f7a6b',
      timer: 2500,
      showConfirmButton: false
    }).then(() => {
      window.open(json.wa, '_blank');
    });

  } catch (err) {
    Swal.fire({
      icon: 'error',
      title: 'Koneksi Gagal',
      text: 'Gagal terhubung ke server. Periksa koneksi internet Anda.',
      confirmButtonColor: '#1f7a6b'
    });
    console.error(err);
  } finally {
    btn.disabled = false;
    btn.innerHTML = originalText;
  }
}

  /* ===== BAHASA ID / EN ===== */
  function setLang(lang){
    document.getElementById('btnID').classList.toggle('active', lang === 'id');
    document.getElementById('btnEN').classList.toggle('active', lang === 'en');

    document.querySelectorAll('[data-id][data-en]').forEach(el => {
      const text = el.getAttribute('data-' + lang);
      if (text !== null) el.innerHTML = text;
    });

    document.querySelectorAll('[data-id-placeholder][data-en-placeholder]').forEach(el => {
      const ph = el.getAttribute('data-' + lang + '-placeholder');
      if (ph !== null) el.setAttribute('placeholder', ph);
    });

    localStorage.setItem('atl-lang', lang);
    document.documentElement.lang = lang;
  }

  document.addEventListener('DOMContentLoaded', () => {
    const saved = localStorage.getItem('atl-lang') || 'id';
    setLang(saved);
  });

  document.querySelectorAll('#navLinks a').forEach(link => {
    link.addEventListener('click', () => {
      document.getElementById('navLinks').classList.remove('open');
    });
  });
</script>
@endpush