<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eddiezz Vintage Shop</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body,html{height:100%;font-family:'Montserrat',sans-serif;color:#fff;overflow-x:hidden;}
:root{--olijfgroen:#708238;--eikenhout:#a0522d;--wit:#fff;--zwart:#000;--cobaltblauw: #0047AB;}
.parallax{height:100vh;background-image:url('https://eddiezz.nl/WhatsApp-Image-2022-06-08-at-4.43.19-PM.jpeg');background-size:cover;background-position:center;position:relative;overflow:hidden;}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2;}
.hero-text h1{font-size:7rem;color:#FFD700;font-family:'Playfair Display',serif;font-weight:700;font-style:italic;text-shadow:3px 3px 10px rgba(0,0,0,0.7);}
.hero-text p{font-size:1.5rem;margin-top:20px;}
section{padding:100px 20px;color:var(--zwart);}
section h2{text-align:center;margin-bottom:50px;color:var(--cobaltblauw);font-size:2.5rem;}
.items{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;}
.item{width:250px;border-radius:15px;overflow:hidden;background:var(--olijfgroen);color:var(--wit);text-align:center;cursor:pointer;transition:transform 0.3s,box-shadow 0.3s;}
.item:hover{transform:translateY(-8px);box-shadow:0 15px 25px rgba(0,0,0,0.3);}
.item img{width:100%;height:180px;object-fit:cover;}
.item p{padding:15px;font-size:1.1rem;}
.tabs{display:flex;justify-content:center;margin-bottom:30px;flex-wrap:wrap;gap:15px;}
.tab-button{padding:10px 20px;font-size:1.1rem;background:var(--olijfgroen);color:var(--wit);border:none;border-radius:8px;cursor:pointer;transition:background 0.3s;}
.tab-button.active,.tab-button:hover{background:var(--cobaltblauw);}
.tab-content{display:none;flex-wrap:wrap;justify-content:center;gap:30px;}
.tab-content.active{display:flex;}
section.alt{background:var(--olijfgroen);color:var(--wit);}

/* Popup multi-image */
.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);justify-content:center;align-items:center;flex-direction:column;z-index:9999;padding:20px;opacity:0;transition:opacity 0.4s ease,transform 0.4s ease;transform:translateY(50px);}
.popup.active{display:flex;opacity:1;transform:translateY(0);}
.popup h3{color:#FFD700;margin-bottom:20px;font-size:2rem;text-align:center;}
.popup-gallery img{width:300px;height:200px;object-fit:cover;border-radius:10px;margin:10px auto;transition:transform 0.3s;}
.popup-gallery img:hover{transform:scale(1.05);}
.popup-buttons{margin-top:25px;display:flex;gap:15px;}
.popup-buttons button{background:var(--cobaltblauw);color:white;padding:10px 25px;border:none;border-radius:8px;cursor:pointer;transition:background 0.3s;}
.popup-buttons button:hover{background:var(--olijfgroen);}
footer{background:var(--zwart);color:var(--wit);text-align:center;padding:50px 20px;}
.floating-instagram{position:fixed;bottom:20px;right:20px;width:45px;height:45px;background:var(--cobaltblauw);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,0.3);transition:transform 0.3s,box-shadow 0.3s;z-index:999;}
.floating-instagram:hover{transform:scale(1.1);}
.floating-instagram img{width:22px;height:22px;filter:invert(1);}
@media(max-width:1024px){.hero-text h1{font-size:5rem;}.hero-text p{font-size:1.3rem;}}
@media(max-width:768px){.hero-text h1{font-size:3rem;}.hero-text p{font-size:1rem;}.item{width:90%;}}
@media(max-width:480px){.floating-instagram{width:40px;height:40px;bottom:15px;right:15px;}.floating-instagram img{width:20px;height:20px;}}
</style>
</head>
<body>

<div class="parallax"><div class="overlay"></div>
<div class="hero-text"><h1>Eddiezz</h1><p>Vintage meubels & tijdloze stijl</p></div></div>

<section id="collecties" style="background-image: url('https://www.instagram.com/p/C0PPnw-o8lE/?utm_source=ig_web_copy_link&igsh=MzRlODBiNWFlZA=='); background-size: cover; background-position: center; position: relative; color: #fff;">
  <div style="position: absolute; inset: 0; background: rgba(0,0,0,0.5);"></div>
  <div style="position: relative; z-index: 2; padding: 100px 20px;">
    <h2>Onze Collecties</h2>
<div class="tabs">
<button class="tab-button active" data-tab="meubels">Meubels</button>
<button class="tab-button" data-tab="decoratie">Decoratie</button>
<button class="tab-button" data-tab="verlichting">Verlichting</button>
<button class="tab-button" data-tab="glaswerk">Glaswerk & Kristal</button>
<button class="tab-button" data-tab="collectables">Collectables</button>
<button class="tab-button" data-tab="diverse">Diverse</button>
</div>
<div id="meubels" class="tab-content"></div>
<div id="decoratie" class="tab-content"></div>
<div id="verlichting" class="tab-content"></div>
<div id="glaswerk" class="tab-content"></div>
<div id="collectables" class="tab-content"></div>
<div id="diverse" class="tab-content"></div>
</section>

<section class="alt" id="over-ons">
<h2>Over Eddiezz</h2>
<p style="max-width:800px;margin:0 auto;text-align:center;font-size:1.2rem;line-height:1.6;">
Eddiezz Vintage Shop is gespecialiseerd in unieke vintage meubels met karakter. Elk stuk vertelt een verhaal – zorgvuldig geselecteerd, hersteld en klaar om jouw interieur een ziel te geven.
</p>
</section>

<div class="popup" id="popup">
<h3 id="popup-title"></h3>
<div class="popup-gallery" id="popup-gallery"></div>
<div class="popup-buttons">
<button id="prev-popup">Vorige</button>
<button id="next-popup">Volgende</button>
<button id="close-popup">Sluiten</button>
</div>
</div>

<footer>
<p>&copy; 2025 Eddiezz Vintage Shop. Alle rechten voorbehouden.</p>
</footer>

<a href="https://www.instagram.com/eddiezzvoorburg" target="_blank" class="floating-instagram" aria-label="Instagram">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png" alt="Instagram">
</a>

<script>
const galleries={
meubels:[{title:"Vintage Stoel", images:["https://images.unsplash.com/photo-1616627452487-1f5b91ccea2d?auto=format&fit=crop&w=600&q=80","https://images.unsplash.com/photo-1581539266372-fcb311cf0a9f?auto=format&fit=crop&w=600&q=80"]},{title:"Retro Kast", images:["https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=600&q=80"]},{title:"Eiken Tafel", images:["https://images.unsplash.com/photo-1598300053652-9849c539f764?auto=format&fit=crop&w=600&q=80"]}],
decoratie:[{title:"Kunstwerk", images:["https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=600&q=80"]},{title:"Spiegel", images:["https://images.unsplash.com/photo-1583337130417-3346a1b2d1c5?auto=format&fit=crop&w=600&q=80"]},{title:"Vaas", images:["https://images.unsplash.com/photo-1590080875839-8f0c92ef6d1f?auto=format&fit=crop&w=600&q=80"]}],
verlichting:[{title:"Hanglamp", images:["https://images.unsplash.com/photo-1616627560485-221cd89e6bba?auto=format&fit=crop&w=600&q=80"]},{title:"Tafellamp", images:["https://images.unsplash.com/photo-1603190287605-e4d7a0f4d1c9?auto=format&fit=crop&w=600&q=80"]},{title:"Vloerlamp", images:["https://images.unsplash.com/photo-1567016538197-7f6b7c9f8f0f?auto=format&fit=crop&w=600&q=80"]}],
glaswerk:[{title:"Kristallen Wijnglas", images:["https://images.unsplash.com/photo-1617196033563-d2a3b6f0f1ec?auto=format&fit=crop&w=600&q=80"]}],
collectables:[{title:"Antiek Boek", images:["https://images.unsplash.com/photo-1616627452487-1f5b91ccea2d?auto=format&fit=crop&w=600&q=80"]}],
diverse:[{title:"Antieke Kaarsenhouder", images:["https://images.unsplash.com/photo-1617196033604-9e3b1f0c1d2d?auto=format&fit=crop&w=600&q=80"]}]
};

const contents=document.querySelectorAll('.tab-content');
contents.forEach(tabContent=>{
  const tabName=tabContent.id;
  galleries[tabName].forEach(item=>{
    const div=document.createElement('div');
    div.className='item';
    div.dataset.gallery=item.title;
    div.innerHTML=`<img src="${item.images[0]}" alt="${item.title}" loading="lazy"><p>${item.title}</p>`;
    tabContent.appendChild(div);
  });
});

const tabs=document.querySelectorAll('.tab-button');
tabs.forEach(tab=>{tab.addEventListener('click',()=>{tabs.forEach(b=>b.classList.remove('active'));contents.forEach(c=>c.classList.remove('active'));tab.classList.add('active');document.getElementById(tab.dataset.tab).classList.add('active');});});

const popup=document.getElementById('popup');
const popupTitle=document.getElementById('popup-title');
const popupGallery=document.getElementById('popup-gallery');
const closePopup=document.getElementById('close-popup');
const prevPopup=document.getElementById('prev-popup');
const nextPopup=document.getElementById('next-popup');
let lastActiveTab=null;
let currentImages=[],currentIndex=0;

function openPopup(images,title){
  currentImages=images;
  currentIndex=0;
  popupTitle.textContent=title;
  showPopupImage();
  popup.classList.add('active');
  document.body.style.overflow='hidden';
}

function showPopupImage(){
  popupGallery.innerHTML=`<img src="${currentImages[currentIndex]}" loading="lazy">`;
}

function addPopupListeners(){
  document.querySelectorAll('.item').forEach(item=>{
    item.addEventListener('click',()=>{
      lastActiveTab=document.querySelector('.tab-button.active');
      const galleryName=item.dataset.gallery;
      const galleryData=Object.values(galleries).flat().find(g=>g.title===galleryName);
      if(!galleryData) return;
      openPopup(galleryData.images,galleryData.title);
    });
  });
}
addPopupListeners();

closePopup.addEventListener('click',()=>{popup.classList.remove('active');document.body.style.overflow='';});
prevPopup.addEventListener('click',()=>{currentIndex=(currentIndex-1+currentImages.length)%currentImages.length;showPopupImage();});
nextPopup.addEventListener('click',()=>{currentIndex=(currentIndex+1)%currentImages.length;showPopupImage();});

</script>
</body>
</html>