/* =========== Home page =========== */
function Typewriter({words, prefix}){
  const [i, setI] = useState(0);
  const [typed, setTyped] = useState('');
  const [phase, setPhase] = useState('typing');
  useEffect(()=>{
    const word = words[i];
    if(phase==='typing'){
      if(typed.length < word.length){
        const t = setTimeout(()=> setTyped(word.slice(0, typed.length+1)), 90);
        return ()=> clearTimeout(t);
      } else {
        const t = setTimeout(()=> setPhase('deleting'), 1800);
        return ()=> clearTimeout(t);
      }
    } else if(phase==='deleting'){
      if(typed.length > 0){
        const t = setTimeout(()=> setTyped(word.slice(0, typed.length-1)), 40);
        return ()=> clearTimeout(t);
      } else {
        setI((i+1) % words.length);
        setPhase('typing');
      }
    }
  }, [typed, phase, i, words]);
  return (
    <span>
      {prefix}
      <span className="tw-highlight">
        <span className="italic-serif">{typed}</span><span className="tw-caret">|</span>
      </span>
    </span>
  );
}

function ProcessIcon({name}){
  const c = {width:26, height:26, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:1.5, strokeLinecap:'round', strokeLinejoin:'round'};
  switch(name){
    case 'chat': return (
      <svg {...c}><path d="M4 5.5h16v10H9l-4 3.5v-3.5H4z"/><path d="M8.5 10.5h7M8.5 13h4"/></svg>
    );
    case 'ring': return (
      <svg {...c}><path d="M9 6l3-3 3 3-3 3z"/><circle cx="12" cy="15" r="5"/></svg>
    );
    case 'rings': return (
      <svg {...c}><circle cx="9.5" cy="13.5" r="5.5"/><circle cx="15" cy="11" r="5.5"/></svg>
    );
    case 'edit': return (
      <svg {...c}><rect x="3.5" y="6.5" width="17" height="12" rx="1.5"/><path d="M3.5 10.5h17M7.5 6.5l-1.5 4M12 6.5l-1.5 4M16.5 6.5L15 10.5"/></svg>
    );
    case 'film': return (
      <svg {...c}><rect x="3.5" y="5" width="17" height="14" rx="2"/><path d="M10.5 9.5l4 2.5-4 2.5z"/></svg>
    );
    case 'doc': return (
      <svg {...c}><path d="M6 3.5h8l4 4v13H6z"/><path d="M14 3.5v4h4"/><path d="M9 12h6M9 15.5h6"/></svg>
    );
    case 'calendar': return (
      <svg {...c}><rect x="4" y="5" width="16" height="15" rx="1.5"/><path d="M4 9.5h16M8 3.5v3M16 3.5v3"/><path d="M8.5 13h2M13.5 13h2M8.5 16.5h2M13.5 16.5h2"/></svg>
    );
    case 'camera': return (
      <svg {...c}><path d="M3.5 8.5A1.5 1.5 0 0 1 5 7h2L8.2 5h7.6L17 7h2a1.5 1.5 0 0 1 1.5 1.5v9A1.5 1.5 0 0 1 19 18H5a1.5 1.5 0 0 1-1.5-1.5z"/><circle cx="12" cy="12.5" r="3.2"/></svg>
    );
    default: return null;
  }
}

function HeroMedia(){
  const t = useT();
  const [videoOk, setVideoOk] = useState(false);
  const iframeRef = useRef(null);

  useEffect(()=>{
    const onMsg = (e)=>{
      if(typeof e.origin === 'string' && e.origin.includes('vimeo.com')){
        let d = e.data;
        try { if(typeof d === 'string') d = JSON.parse(d); } catch {}
        if(d && (d.event === 'ready' || d.method === 'ready' ||
                  d.event === 'play' || d.event === 'playing' ||
                  d.event === 'bufferend' || d.event === 'timeupdate')) {
          setVideoOk(true);
        }
      }
    };
    window.addEventListener('message', onMsg);
    return ()=> window.removeEventListener('message', onMsg);
  },[]);

  const onIframeLoad = ()=>{
    const f = iframeRef.current;
    if(!f || !f.contentWindow) return;
    // Explicitly subscribe to Vimeo events so we reliably know when it's playing
    try {
      ['play','playing','bufferend','timeupdate'].forEach(evt=>{
        f.contentWindow.postMessage(JSON.stringify({method:'addEventListener', value:evt}), '*');
      });
    } catch {}
  };

  return (
    <div className="hero-video-wrap">
      <img src={SITE.hero.fallbackImage} alt={t('Cinematische trouwfilm en fotografie door Wedding Visions in Roeselare, België','Cinematic wedding film and photography by Wedding Visions in Roeselare, Belgium')}/>
      <iframe
        ref={iframeRef}
        src={SITE.hero.vimeoUrl}
        allow="autoplay; fullscreen; picture-in-picture"
        allowFullScreen
        title="Wedding Visions reel"
        loading="eager"
        onLoad={onIframeLoad}
        style={{opacity: videoOk?1:0, transition:'opacity 1s ease-out', background:'transparent'}}
      />
    </div>
  );
}

// Convert any Instagram post/reel URL into Instagram's own embed iframe URL.
// https://www.instagram.com/p/XXX/ → https://www.instagram.com/p/XXX/embed/
function toInstaEmbed(url){
  if(!url) return '';
  const m = url.match(/instagram\.com\/(p|reel|tv)\/([A-Za-z0-9_-]+)/);
  if(!m) return '';
  return `https://www.instagram.com/${m[1]}/${m[2]}/embed/?cr=1&v=14&rd=${encodeURIComponent(location.origin)}`;
}

function InstagramModal({open, onClose}){
  const t = useT();
  const isLocal = typeof location !== 'undefined' && /^(localhost|127\.|0\.0\.0\.0)/.test(location.hostname);
  useEffect(()=>{
    if(!open) return;
    const onKey = (e)=>{ if(e.key==='Escape') onClose(); };
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);

    // Inject EmbedSocial loader script once per page (only useful in production)
    if(!isLocal && !document.getElementById('EmbedSocialHashtagScript')){
      const s = document.createElement('script');
      s.id = 'EmbedSocialHashtagScript';
      s.src = 'https://embedsocial.com/cdn/ht.js';
      s.async = true;
      document.head.appendChild(s);
    }

    return ()=>{
      document.body.style.overflow = '';
      window.removeEventListener('keydown', onKey);
    };
  },[open, onClose, isLocal]);

  if(!open) return null;

  return (
    <div className="ig-modal" onClick={onClose}>
      <div className="ig-modal__card ig-modal__card--wide" onClick={e=>e.stopPropagation()}>
        <button className="ig-modal__close" onClick={onClose} aria-label={t('Sluiten','Close')}>×</button>

        <div className="ig-modal__header">
          <div className="ig-modal__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" strokeWidth="1.5">
              <rect x="3" y="3" width="18" height="18" rx="5" ry="5"/>
              <circle cx="12" cy="12" r="4.2"/>
              <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor"/>
            </svg>
          </div>
          <div>
            <div className="h-number" style={{color:'var(--ink-60)'}}>{t('ONZE INSTAGRAM','OUR INSTAGRAM')}</div>
            <div className="h-display" style={{fontSize:36, lineHeight:1, marginTop:6}}>
              <span className="italic-serif" style={{color:'var(--gold)'}}>@weddingvisions.be</span>
            </div>
          </div>
        </div>

        {isLocal ? (
          <div className="ig-local-notice">
            <p style={{fontSize:14, lineHeight:1.6, color:'var(--ink-80)', marginBottom:12}}>
              {t(<><strong>Live Instagram-feed</strong> wordt geladen op de productie-site (<code style={{fontSize:12}}>weddingvisions.be</code>).</>,
                 <>The <strong>live Instagram feed</strong> loads on the production site (<code style={{fontSize:12}}>weddingvisions.be</code>).</>)}
            </p>
            <p style={{fontSize:13, lineHeight:1.6, color:'var(--ink-60)'}}>
              {t('EmbedSocial is geconfigureerd voor het productie-domein, dus op deze localhost-preview verschijnt de feed niet. Eens online laadt hij automatisch met de meest recente posts. Geen admin-werk vereist.','EmbedSocial is configured for the production domain, so the feed doesn\'t appear in this localhost preview. Once online it loads automatically with the most recent posts. No admin work required.')}
            </p>
          </div>
        ) : (
          <div className="embedsocial-hashtag" data-ref="ef7a868a48024e5d9db239e9863724909499238d">
            <iframe
              src="https://embedsocial.com/api/pro_hashtag/ef7a868a48024e5d9db239e9863724909499238d/?origin=https%3A%2F%2Fweddingvisions.be%2F"
              className="embedsocial-hashtag-iframe"
              title="Wedding Visions Instagram feed"
              scrolling="no"
              webkitallowfullscreen="true"
              mozallowfullscreen="true"
              allowFullScreen={true}
              style={{width:'100%', minHeight:480, border:0, overflow:'hidden'}}
            />
          </div>
        )}

        <div className="ig-modal__actions">
          <a href={SITE.contact.instagram} target="_blank" rel="noreferrer" className="btn btn-primary" data-cursor="hover">
            {t('Volg ons op Instagram','Follow us on Instagram')} <span className="arrow"></span>
          </a>
          <button type="button" onClick={onClose} className="btn btn-ghost" data-cursor="hover">
            {t('Sluit','Close')} <span className="arrow"></span>
          </button>
        </div>
      </div>
    </div>
  );
}

// Live Instagram-feed (EmbedSocial) inline op de homepagina.
function InstagramFeed(){
  const t = useT();
  const isLocal = typeof location !== 'undefined' && /^(localhost|127\.|0\.0\.0\.0)/.test(location.hostname);
  return (
    <div className="ig-feed">
      <div className="ig-feed__label">@weddingvisions.be</div>
      {isLocal ? (
        <div className="ig-feed__note">
          {t('De live Instagram-feed verschijnt op de online site (weddingvisions.be). EmbedSocial is domeingebonden, dus op deze localhost-preview is hij niet zichtbaar.','The live Instagram feed appears on the live site (weddingvisions.be). EmbedSocial is domain-locked, so it is not visible in this localhost preview.')}
        </div>
      ) : (
        <div className="ig-feed__card">
          <div className="embedsocial-hashtag" data-ref="ef7a868a48024e5d9db239e9863724909499238d">
            <iframe
              src="https://embedsocial.com/api/pro_hashtag/ef7a868a48024e5d9db239e9863724909499238d/?origin=https%3A%2F%2Fweddingvisions.be%2F"
              className="embedsocial-hashtag-iframe" title="Wedding Visions Instagram feed" scrolling="no"
              allowFullScreen={true} style={{width:'100%', minHeight:440, border:0, overflow:'hidden', borderRadius:10, background:'#fff', display:'block'}}
            />
          </div>
        </div>
      )}
    </div>
  );
}

// All featured (starred) items from CMS first, then seed fallback. Max 3 per design.
function useFeaturedItems(max=3){
  const [items, setItems] = useState(()=>{
    return SITE.portfolioSeed.filter(p=> p.featured).slice(0, max);
  });
  useEffect(()=>{
    fetch('/api/portfolio').then(r=>r.json()).then(data=>{
      if(!Array.isArray(data)) return;
      const featured = data.filter(p=> p.featured);
      if(featured.length){
        setItems(featured.slice(0, max));
      } else if (data.length === 0){
        // CMS empty — fallback to seed
        setItems(SITE.portfolioSeed.filter(p=> p.featured).slice(0, max));
      } else {
        setItems([]);
      }
    }).catch(()=>{});
  },[max]);
  return items;
}

// Echte Google-reviews voor de "Echte woorden"-sectie (volgorde = nieuwste eerst, zoals in data.js).
function useReviews(){
  return (SITE.testimonials || []).map(t => ({ quote: t.q, couple: t.c }));
}

/* =========== Services teaser =========== */
const SERVICES = [
  {t:'Fotografie',  tEn:'Photography',  p:'vanaf €1.600', btw:true,  d:'Warm, contrastrijk en eerlijk.',      dEn:'Warm, rich in contrast and honest.', section:'diensten-fotovideo',  tab:'foto'},
  {t:'Videografie', tEn:'Videography',  p:'vanaf €1.700', btw:true,  d:'Dynamisch en cinematisch.',           dEn:'Dynamic and cinematic.',             section:'diensten-fotovideo',  tab:'video'},
  {t:'Photobooth',  tEn:'Photobooth',   p:'vanaf €250',   btw:true,  d:'Onbeperkt prints en props.',          dEn:'Unlimited prints and props.',        section:'diensten-photobooth'},
  {t:'Album',       tEn:'Album',        p:'op maat',      btw:false, d:'Een tastbaar aandenken.',             dEn:'A tangible keepsake.',               to:'/album'},
  {t:'Koppelshoot', tEn:'Couple shoot', p:'€300',         btw:true,  d:'Voor save-the-date of uitnodiging.',  dEn:'For a save-the-date or invitation.', section:'diensten-koppelshoot'},
];

function ServicesTeaser(){
  const t = useT();
  return (
    <section style={{padding:'80px 0 140px'}}>
      <div className="wrap">
        <div className="reveal" style={{textAlign:'center', marginBottom:100}}>
          <div className="h-number">{t('WAT WE AANBIEDEN','WHAT WE OFFER')}</div>
          <h2 className="h-display" style={{fontSize:'clamp(40px,5.5vw,76px)', marginTop:24, lineHeight:.88}}>
            {t(<>Alles voor <span className="italic-serif">één</span><br/> onvergetelijke dag</>,
               <>Everything for <span className="italic-serif">one</span><br/> unforgettable day</>)}
          </h2>
        </div>

        <div
          className="service-grid"
          style={{display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:0, border:'1px solid var(--rule)'}}
        >
          {SERVICES.map((s,i)=>(
            <a key={i} href={s.to || '/diensten'} className="service-cell" data-cursor="hover"
              onClick={(e)=>{ if(e.metaKey||e.ctrlKey||e.shiftKey||e.button===1) return; e.preventDefault(); goToDienst(s); }}>
              <h3 className="h-display" style={{fontSize:36, marginBottom:20}}>{t(s.t, s.tEn)}</h3>
              <p style={{fontSize:14, color:'var(--ink-60)', lineHeight:1.6}}>{t(s.d, s.dEn)}</p>
              <div style={{marginTop:40, fontSize:11, letterSpacing:'.28em', textTransform:'uppercase'}}>{t('Meer →','More →')}</div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =========== Testimonials carousel =========== */
function TestimonialsCarousel({reviews}){
  const t = useT();
  const trackRef = useRef(null);
  const [page, setPage] = useState(0);
  const [pageSize, setPageSize] = useState(3);
  const totalPages = Math.max(1, Math.ceil(reviews.length / pageSize));
  const canPrev = page > 0;
  const canNext = page < totalPages - 1;

  // Adjust visible count based on viewport
  useEffect(()=>{
    const update = ()=>{
      const w = window.innerWidth;
      if(w < 700) setPageSize(1);
      else if(w < 1000) setPageSize(2);
      else setPageSize(3);
    };
    update();
    window.addEventListener('resize', update);
    return ()=> window.removeEventListener('resize', update);
  },[]);

  // Reset page if we exceed bounds after resize
  useEffect(()=>{
    const max = Math.max(0, Math.ceil(reviews.length / pageSize) - 1);
    if(page > max) setPage(max);
  }, [pageSize, reviews.length]);

  const go = (delta)=>{
    setPage(p => {
      const next = p + delta;
      if(next < 0) return 0;
      if(next > totalPages - 1) return totalPages - 1;
      return next;
    });
  };

  return (
    <section style={{padding:'160px 0'}}>
      <div className="wrap">
        <div className="reveal" style={{marginBottom:60, display:'flex', justifyContent:'space-between', alignItems:'end', flexWrap:'wrap', gap:20}}>
          <div>
            <div className="h-number">{t('WAT KOPPELS ZEGGEN','WHAT COUPLES SAY')}</div>
            <div className="rule" style={{margin:'16px 0 32px', width:120}}/>
            <h2 className="h-display" style={{fontSize:'clamp(36px,5vw,64px)', maxWidth:'14ch'}}>
              {t(<><span className="italic-serif">Echte</span> woorden van echte koppels.</>,
                 <><span className="italic-serif">Real</span> words from real couples.</>)}
            </h2>
          </div>
          <a href={SITE.contact.reviewsUrl} target="_blank" rel="noreferrer" data-cursor="hover" style={{fontSize:13, color:'var(--ink-60)', textAlign:'right'}}>
            <div style={{fontSize:32, color:'var(--gold)'}}>★★★★★</div>
            <div style={{marginTop:4}}>{t('5,0 · 12 Google reviews','5.0 · 12 Google reviews')}</div>
            <div style={{marginTop:6, fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--ink)', textDecoration:'underline'}}>{t('Alle reviews op Google →','All reviews on Google →')}</div>
          </a>
        </div>

        <div className="testi-carousel reveal">
          <div className="testi-track" ref={trackRef} style={{transform:`translateX(-${page * 100}%)`}}>
            {reviews.map((t,i)=>(
              <div key={t.couple+i} className="testi-slide" style={{flex:`0 0 ${100/pageSize}%`}}>
                <a className="testi-card" href={SITE.contact.reviewsUrl} target="_blank" rel="noreferrer" data-cursor="hover">
                  <div className="testi-quote-mark">"</div>
                  <p className="testi-quote">{t.quote}</p>
                  <div className="testi-foot">
                    <div className="testi-couple">{t.couple}</div>
                    <span className="testi-link" style={{color:'var(--gold)'}}>★★★★★ Google</span>
                  </div>
                </a>
              </div>
            ))}
          </div>
        </div>

        {totalPages > 1 && (
          <div className="testi-nav">
            <div className="testi-dots">
              {Array.from({length: totalPages}).map((_,i)=>(
                <button
                  key={i}
                  type="button"
                  onClick={()=>setPage(i)}
                  className={'testi-dot '+(i===page?'active':'')}
                  aria-label={t(`Ga naar pagina ${i+1}`,`Go to page ${i+1}`)}
                />
              ))}
            </div>
            <div className="testi-arrows">
              <button type="button" onClick={()=>go(-1)} disabled={!canPrev} className="testi-arrow" aria-label={t('Vorige','Previous')} data-cursor="hover">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M15 6l-6 6 6 6"/></svg>
              </button>
              <button type="button" onClick={()=>go(1)} disabled={!canNext} className="testi-arrow" aria-label={t('Volgende','Next')} data-cursor="hover">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M9 6l6 6-6 6"/></svg>
              </button>
            </div>
          </div>
        )}
      </div>

      <style>{`
        .testi-carousel{overflow:hidden}
        .testi-track{
          display:flex;
          transition:transform .7s cubic-bezier(.2,.8,.2,1);
          will-change:transform;
        }
        .testi-slide{padding:0 20px}
        .testi-slide:first-child{padding-left:0}
        .testi-slide:last-child{padding-right:0}
        .testi-card{
          padding-top:40px;
          border-top:1px solid var(--ink);
          height:100%;
          display:flex;
          flex-direction:column;
          text-decoration:none;
          color:var(--ink);
          cursor:pointer;
          transition:opacity .25s;
        }
        .testi-card:hover{opacity:.78}
        .testi-quote-mark{
          font-family:var(--serif);
          font-style:italic;
          font-size:56px;
          line-height:.3;
          color:var(--ink-40);
          height:12px;
        }
        .testi-quote{
          font-size:17px;
          line-height:1.6;
          font-family:var(--serif);
          font-style:italic;
          margin-top:24px;
          color:var(--ink-80);
          display:-webkit-box;
          -webkit-line-clamp:8;
          -webkit-box-orient:vertical;
          overflow:hidden;
          flex:1;
        }
        .testi-foot{
          margin-top:32px;
          padding-top:24px;
          display:flex;
          justify-content:space-between;
          align-items:end;
          gap:16px;
          font-size:11px;
          letter-spacing:.22em;
          text-transform:uppercase;
        }
        .testi-couple{color:var(--ink)}
        .testi-meta{color:var(--ink-60); margin-top:4px}
        .testi-link{color:var(--ink-60); white-space:nowrap}
        .testi-link:hover{color:var(--ink)}

        .testi-nav{
          margin-top:48px;
          display:flex;
          justify-content:space-between;
          align-items:center;
          gap:24px;
          flex-wrap:wrap;
        }
        .testi-dots{display:flex; gap:10px}
        .testi-dot{
          width:8px; height:8px;
          border-radius:999px;
          background:var(--ink-20);
          border:none;
          cursor:pointer;
          transition:background .25s, transform .25s;
          padding:0;
        }
        .testi-dot.active{background:var(--ink); transform:scale(1.3)}
        .testi-arrows{display:flex; gap:10px}
        .testi-arrow{
          width:48px; height:48px;
          border-radius:999px;
          border:1px solid var(--ink);
          background:transparent;
          cursor:pointer;
          display:grid;
          place-items:center;
          color:var(--ink);
          transition:background .25s, color .25s, opacity .25s;
        }
        .testi-arrow:hover:not(:disabled){background:var(--ink); color:var(--ivory)}
        .testi-arrow:disabled{opacity:.25; cursor:not-allowed}
      `}</style>
    </section>
  );
}

function Home(){
  const t = useT();
  const featured = useFeaturedItems(3);
  const reviews = useReviews();
  const [igOpen, setIgOpen] = useState(false);
  useDocumentMeta({
    title: null, // home gets the brand title
    description: t('Wedding Visions legt uw trouwdag vast met cinematische video, warme fotografie, photobooth en fotoboeken. Persoonlijke aanpak vanuit Roeselare, actief in heel België.','Wedding Visions captures your wedding day with cinematic video, warm photography, photobooth and photo books. A personal approach from Roeselare, active throughout Belgium.'),
    image: SITE.hero.fallbackImage,
  });
  return (
    <Page label="Home">
      {/* HERO */}
      <section style={{position:'relative', minHeight:'100vh', background:'var(--cocoa)', color:'var(--ivory)', overflow:'hidden'}}>
        <Nav current="/" />
        <HeroMedia/>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(20,18,16,.7) 0%, rgba(20,18,16,.3) 35%, rgba(20,18,16,.85) 100%)'}}/>

        <div className="home-hero-content" style={{position:'absolute', left:40, right:40, bottom:100, maxWidth:1200}}>
          <div className="reveal-stagger">
            <div className="chip" style={{color:'rgba(255,255,255,.75)', marginBottom:32}}>
              <span style={{background:'var(--gold)'}}></span> {t('Trouwfoto · video · photobooth · albums','Wedding photo · video · photobooth · albums')}
            </div>
            <h1 className="h-display" style={{fontSize:'clamp(44px,6vw,84px)', maxWidth:'14ch', lineHeight:1}}>
              {t('Een dag om te blijven voelen.','A day you keep feeling.')}
            </h1>
            <p style={{marginTop:32, fontSize:'clamp(18px, 2vw, 26px)', color:'rgba(255,255,255,.85)', fontFamily:'var(--serif)', fontStyle:'italic', lineHeight:1.4, minHeight:'2.4em'}}>
              <Typewriter prefix={t('Oprecht, ','Sincere, ')}
                words={t(['cinematisch','spontaan','tijdloos','warm','dynamisch','high-end'],
                         ['cinematic','spontaneous','timeless','warm','dynamic','high-end'])}/>
            </p>
            <div style={{display:'flex', gap:12, marginTop:48, flexWrap:'wrap'}}>
              <Link to="/portfolio" className="btn btn-ghost-light" data-cursor="view">
                {t('Bekijk portfolio','View portfolio')} <span className="arrow"></span>
              </Link>
              <Link to="/contact" className="btn" style={{background:'var(--ivory)', color:'var(--ink)'}} data-cursor="hover">
                {t('Plan een gesprek','Book a call')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>

      </section>

      {/* INTRO / ABOUT */}
      <section style={{padding:'140px 0 80px'}}>
        <div className="wrap home-intro">
          <div className="reveal">
            <div className="h-number">{t('OVER ONS','ABOUT US')}</div>
            <div className="rule" style={{margin:'16px 0 40px'}}/>
            <Img src="/assets/about-team.jpg" alt={t('Egon Persyn, oprichter van trouwfotografie- en videografiestudio Wedding Visions','Egon Persyn, founder of wedding photography and videography studio Wedding Visions')} ar="4/5"/>
            <div className="h-hand" style={{marginTop:24, fontSize:24, color:'var(--ink-80)'}}>
              Phaedra &amp; Egon,
            </div>
            <div style={{fontSize:12, letterSpacing:'.2em', color:'var(--ink-60)', marginTop:6, textTransform:'uppercase'}}>
              {t('mede-oprichters','co-founders')}
            </div>
          </div>
          <div className="reveal">
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginBottom:40}}>
              {t(<>Trouwbeelden moeten méér zijn dan <span className="italic-serif">beelden</span>.</>,
                 <>Wedding imagery should be more than just <span className="italic-serif">images</span>.</>)}
            </h2>
            <p style={{fontSize:18, lineHeight:1.7, maxWidth:640, color:'var(--ink-80)', marginBottom:24}}>
              {t('Wij werken met een persoonlijke en doordachte aanpak, waarbij kwaliteit altijd voorrang krijgt op kwantiteit. Elke trouwdag verdient volledige aandacht, daarom nemen we bewust slechts een beperkt aantal huwelijken aan.','We work with a personal and thoughtful approach, where quality always comes before quantity. Every wedding day deserves full attention, which is why we deliberately take on only a limited number of weddings.')}
            </p>
            <p style={{fontSize:15, lineHeight:1.7, maxWidth:640, color:'var(--ink-60)'}}>
              {t('Onze stijl is high-end, zowel in foto als video, met oog voor spontane momenten die vaak onopgemerkt voorbijgaan. Geen geforceerde poses, wel echte emoties en verhalen die kloppen.','Our style is high-end, in both photo and video, with an eye for the spontaneous moments that often pass unnoticed. No forced poses, just genuine emotions and stories that ring true.')}
            </p>

            <div className="home-stats" style={{paddingTop:40, borderTop:'1px solid var(--rule)'}}>
              {SITE.stats.map(([n,l],i)=>(
                <div key={i}>
                  <div className="h-display" style={{fontSize:'clamp(34px,7vw,48px)', lineHeight:1}}>{n}</div>
                  <div style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'var(--ink-60)', marginTop:8}}>{tphrase(l)}</div>
                </div>
              ))}
            </div>

            <Link to="/team" className="btn btn-ghost" style={{marginTop:60}} data-cursor="hover">
              {t('Leer het team kennen','Meet the team')} <span className="arrow"></span>
            </Link>
          </div>
        </div>
      </section>

      {/* SERVICES TEASER — komt eerst */}
      <ServicesTeaser/>

      {/* FEATURED WORK — 6 items in 2 rijen */}
      <section style={{background:'var(--paper)', padding:'140px 0'}}>
        <div className="wrap-wide">
          <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:80, flexWrap:'wrap', gap:20}}>
            <div className="reveal">
              <div className="h-number">{t('RECENT WERK','RECENT WORK')}</div>
              <div className="rule" style={{margin:'16px 0 32px', width:120}}/>
              <h2 className="h-display" style={{fontSize:'clamp(36px,5vw,64px)', maxWidth:'12ch'}}>
                {t(<>Verhalen die <span className="italic-serif">we</span> vertelden</>,
                   <>Stories <span className="italic-serif">we</span> told</>)}
              </h2>
            </div>
            <Link to="/portfolio" className="btn btn-ghost" data-cursor="hover">
              {t('Alle verhalen','All stories')} <span className="arrow"></span>
            </Link>
          </div>

          {featured.length === 0
            ? <p style={{textAlign:'center', color:'var(--ink-60)', padding:'40px 0', fontSize:14, letterSpacing:'.15em', textTransform:'uppercase'}}>
                {t('Nog geen verhalen gesterd. Voeg ★ toe aan verhalen in het admin om ze hier te tonen.','No stories starred yet. Add ★ to stories in the admin to show them here.')}
              </p>
            : <div className="masonry-featured reveal-stagger">
                {featured.slice(0,3).map((w,i)=>(
                  <FeaturedCard key={w.slug} slug={w.slug} couple={w.couple} place={w.place || w.date} img={w.img} pos={i}/>
                ))}
              </div>
          }
        </div>
      </section>

      {/* PROCESS */}
      <section style={{background:'var(--cocoa)', color:'var(--ivory)', padding:'160px 0'}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:100}}>
            <div className="h-number" style={{color:'rgba(255,255,255,.5)'}}>{t('WERKWIJZE','PROCESS')}</div>
            <div style={{height:1, background:'rgba(255,255,255,.2)', margin:'16px 0 32px', width:120}}/>
            <h2 className="h-display" style={{fontSize:'clamp(36px,5vw,64px)'}}>
              {t(<>Van kennismaking<br/> tot <span className="italic-serif">oplevering</span>.</>,
                 <>From introduction<br/> to <span className="italic-serif">delivery</span>.</>)}
            </h2>
          </div>

          <div className="htl">
            <div className="htl__line" aria-hidden="true"/>
            {[
              {icon:'chat',  t:t('Kennismaking','Introduction'), d:t('Tijdens een fysiek of digitaal kennismakingsgesprek leren we elkaar kennen en overlopen we jullie plannen.','During an in-person or online introductory meeting we get to know each other and go through your plans.')},
              {icon:'ring',  t:t("Jullie zeggen 'ja'","You say 'I do'"), d:t('Na het officiële ja-woord reserveren wij met veel plezier jullie trouwdag! In de aanloop houden we regelmatig contact om de planning te overlopen.','After the official “I do” we happily reserve your wedding day! In the run-up we keep in regular contact to go through the planning.')},
              {icon:'rings', t:t('De grote dag','The big day'), d:t('Wij doen waar we het beste in zijn: jullie verhaal vastleggen op beeld. Jullie stralen, en achter de schermen is het our time to shine.','We do what we do best: capturing your story on camera. You shine, and behind the scenes it\'s our time to shine.')},
              {icon:'edit',  t:t('Afwerking','Editing'), d:t('Terwijl jullie nog op de dansvloer staan, maken wij de eerste back-ups. De foto\'s en video worden met de nodige precisie afgewerkt.','While you\'re still on the dance floor, we make the first backups. The photos and video are finished with the necessary precision.')},
              {icon:'film',  t:t('Aflevering','Delivery'), d:t('Jullie ontvangen alles via een uniek, duidelijk platform. Eerst een snelle preview, daarna de volledige foto\'s en cinematische video.','You receive everything via a unique, clear platform. First a quick preview, then the full photos and cinematic video.')},
            ].map((s,i)=>(
              <div key={i} className={'htl__step reveal '+(i%2===0?'above':'below')}>
                <div className="htl__text">
                  <h4 className="h-display">{s.t}</h4>
                  <p>{s.d}</p>
                </div>
                <div className="htl__node"><ProcessIcon name={s.icon}/></div>
              </div>
            ))}
          </div>

          <div style={{marginTop:80, textAlign:'center'}}>
            <Link to="/werkwijze" className="btn btn-ghost-light" data-cursor="hover">
              {t('Volledige werkwijze','Full process')} <span className="arrow"></span>
            </Link>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS — carousel: 3 zichtbaar, pijltjes om te scrollen */}
      {reviews.length > 0 && <TestimonialsCarousel reviews={reviews}/>}

      {/* INSTAGRAM CTA */}
      <section className="ig-section">
        <div className="wrap">
          <div className="ig-section__wrap">
            <div className="reveal ig-section__left">
              <div className="h-number" style={{color:'rgba(255,255,255,.6)'}}>SOCIAL</div>
              <h2 className="h-display" style={{fontSize:'clamp(40px,6vw,88px)', marginTop:20, lineHeight:.92}}>
                {t(<>Onze <span className="italic-serif">Instagram</span>.</>,
                   <>Our <span className="italic-serif">Instagram</span>.</>)}
              </h2>
              <p style={{marginTop:20, fontSize:17, color:'rgba(255,255,255,.7)', maxWidth:520, lineHeight:1.6}}>
                {t('Volg ons op ','Follow us on ')}<span style={{color:'var(--gold)'}}>@weddingvisions.be</span>{t(' voor recente huwelijken, sneak peeks en behind the scenes.',' for recent weddings, sneak peeks and behind the scenes.')}
              </p>
              <a href={SITE.contact.instagram} target="_blank" rel="noreferrer" className="btn btn-ghost-light" style={{marginTop:36}} data-cursor="hover">
                {t('Volg ons','Follow us')} <span className="arrow"></span>
              </a>
            </div>
            <div className="ig-section__right" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="160" height="160" fill="none" stroke="currentColor" strokeWidth="1">
                <rect x="3" y="3" width="18" height="18" rx="5" ry="5"/>
                <circle cx="12" cy="12" r="4.2"/>
                <circle cx="17.5" cy="6.5" r="1.1" fill="currentColor"/>
              </svg>
              <div className="ig-section__handle">@weddingvisions.be</div>
            </div>
          </div>
          <div className="ig-feed-wrap reveal"><InstagramFeed/></div>
        </div>
      </section>

      <InstagramModal open={igOpen} onClose={()=>setIgOpen(false)}/>

      <Footer/>

      <style>{`
        .ig-section{background:var(--cocoa); color:var(--ivory); padding:140px 0}
        .ig-section__wrap{display:grid; grid-template-columns:1.4fr 1fr; gap:60px; align-items:center}
        .ig-section__right{display:flex; flex-direction:column; align-items:flex-end; gap:24px; color:var(--ivory); opacity:.9}
        .ig-section__handle{font-family:var(--hand); font-size:36px; color:var(--gold); line-height:1}
        .ig-feed-wrap{margin-top:56px}
        .ig-feed__label{text-align:center; font-family:var(--hand); font-size:30px; color:var(--gold); line-height:1; margin-bottom:20px}
        .ig-feed__card{max-width:1040px; margin:0 auto; background:#fff; border-radius:16px; padding:14px; box-shadow:0 30px 70px rgba(0,0,0,.4)}
        .ig-feed__card iframe{width:100%; min-height:440px; border:0; border-radius:10px; background:#fff; display:block}
        .ig-feed__note{max-width:680px; margin:0 auto; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:30px 32px; text-align:center; color:rgba(255,255,255,.72); font-size:14px; line-height:1.65}
        @media (max-width:900px){
          .ig-section{padding:80px 0}
          .ig-section__wrap{grid-template-columns:1fr; gap:32px}
          .ig-section__right{align-items:flex-start}
        }

        .ig-modal{position:fixed; inset:0; z-index:9500; background:rgba(20,18,16,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:grid; place-items:center; padding:24px; animation:igFadeIn .3s ease-out; overflow-y:auto}
        .ig-modal__card{background:var(--ivory); max-width:560px; width:100%; padding:48px 40px; position:relative; border-radius:2px; text-align:left; box-shadow:0 30px 80px rgba(0,0,0,.4); animation:igScaleIn .4s cubic-bezier(.2,.9,.3,1.05); max-height:calc(100vh - 48px); overflow-y:auto}
        .ig-modal__card--wide{max-width:860px}
        .ig-modal__close{position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:999px; border:1px solid var(--rule); background:transparent; font-size:22px; line-height:1; color:var(--ink-60); cursor:pointer; transition:.2s; z-index:2}
        .ig-modal__close:hover{background:var(--ink); color:var(--ivory); border-color:var(--ink)}
        .ig-modal__header{display:flex; align-items:center; gap:20px; margin-bottom:24px}
        .ig-modal__icon{width:56px; height:56px; border-radius:50%; border:1px solid var(--ink); display:grid; place-items:center; color:var(--ink); flex-shrink:0}
        .ig-modal__grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:20px}
        .ig-embed-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin-top:20px}
        .ig-embed{position:relative; overflow:hidden; border-radius:4px; background:#fafafa; min-height:420px}
        .ig-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
        .ig-tile{position:relative; aspect-ratio:1; overflow:hidden; display:block; background:var(--paper)}
        .ig-tile img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1)}
        .ig-tile:hover img{transform:scale(1.07)}
        .ig-tile__caption{position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(20,18,16,.85)); opacity:0; transition:opacity .3s; display:flex; align-items:flex-end; padding:12px; color:#fff}
        .ig-tile:hover .ig-tile__caption{opacity:1}
        .ig-tile__caption span{font-size:11px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
        .ig-modal__actions{display:flex; gap:10px; margin-top:28px; flex-wrap:wrap}
        @keyframes igFadeIn{from{opacity:0}to{opacity:1}}
        @keyframes igScaleIn{from{opacity:0; transform:translateY(12px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}
        @media (max-width:600px){
          .ig-modal__grid{grid-template-columns:repeat(2, 1fr); gap:8px}
          .ig-modal__card{padding:32px 24px}
        }

        /* Hero tekstblok */
        @media (max-width:600px){
          .home-hero-content{left:24px; right:24px; bottom:64px}
        }
        @media (orientation:landscape) and (max-height:520px){
          .home-hero-content{bottom:40px}
        }

        /* Intro / over ons */
        .home-intro{display:grid; grid-template-columns:1fr 1.6fr; gap:80px; align-items:start}
        .home-stats{display:grid; grid-template-columns:repeat(4, 1fr); gap:30px; margin-top:80px}
        @media (max-width:1024px){
          .home-intro{grid-template-columns:1fr; gap:40px; max-width:680px}
        }
        @media (max-width:900px){
          .home-intro{grid-template-columns:1fr; gap:40px}
          .home-stats{grid-template-columns:repeat(2, 1fr); gap:24px; margin-top:48px}
        }
        @media (max-width:600px){
          .home-stats{grid-template-columns:repeat(2, 1fr); gap:20px 16px}
        }

        .masonry-featured{
          display:grid;
          grid-template-columns:repeat(12, 1fr);
          grid-auto-rows:60px;
          gap:20px;
        }
        .feat-card{position:relative;overflow:hidden;display:block}
        .feat-card .img, .feat-card .img img{width:100%;height:100%}
        .feat-card .img{aspect-ratio:auto}
        .feat-card .img img{object-fit:cover}
        .feat-card .meta{position:absolute;left:20px;bottom:20px;right:20px;color:var(--ivory);z-index:2;opacity:0;transform:translateY(8px);transition:opacity .5s, transform .5s}
        .feat-card:hover .meta{opacity:1;transform:translateY(0)}
        .feat-card .overlay{position:absolute;inset:0;background:linear-gradient(180deg, transparent 40%, rgba(20,18,16,.75));opacity:0;transition:opacity .5s;z-index:1}
        .feat-card:hover .overlay{opacity:1}
        .feat-card img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
        .feat-card:hover img{transform:scale(1.04)}
        /* Editorial asymmetric layout — groot links, 2 rechts gestapeld boven, 3 onderaan */
        .feat-0{grid-column:span 7; grid-row:span 10}
        .feat-1{grid-column:span 5; grid-row:span 6}
        .feat-2{grid-column:span 5; grid-row:span 4}
        .feat-3{grid-column:span 4; grid-row:span 7}
        .feat-4{grid-column:span 4; grid-row:span 7}
        .feat-5{grid-column:span 4; grid-row:span 7}
        @media (max-width:900px){
          .masonry-featured{grid-template-columns:1fr 1fr; grid-auto-rows:auto; gap:16px}
          .masonry-featured > *{grid-column:span 1 !important; grid-row:auto !important; aspect-ratio:4/5}
          .service-grid{grid-template-columns:1fr !important}
          .process-grid{grid-template-columns:1fr 1fr !important}
          .testi-grid{grid-template-columns:1fr !important}
        }
        @media (max-width:600px){
          .masonry-featured{grid-template-columns:1fr}
        }
        .service-cell{padding:48px 32px;border-right:1px solid var(--rule);display:block;transition:background .4s}
        .service-cell:last-child{border-right:none}
        .service-cell:hover{background:var(--paper)}
        @media (max-width:900px){
          .service-cell{border-right:none;border-bottom:1px solid var(--rule)}
        }

        /* Horizontale werkwijze-tijdlijn */
        .htl{position:relative; display:grid; grid-template-columns:repeat(5,1fr); column-gap:18px}
        .htl__line{position:absolute; left:8%; right:8%; top:50%; height:1px; background:rgba(255,255,255,.28); z-index:0}
        .htl__step{position:relative; z-index:1; display:grid; grid-template-rows:1fr auto 1fr; align-items:center; justify-items:center; row-gap:26px; min-height:440px}
        .htl__node{
          grid-row:2; width:68px; height:68px; border-radius:999px;
          background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center;
          box-shadow:0 0 0 10px var(--ink);
        }
        .htl__text{max-width:240px; text-align:center}
        .htl__text h4{font-size:21px; line-height:1.12; margin-bottom:12px}
        .htl__text p{font-size:13px; line-height:1.65; color:rgba(255,255,255,.65)}
        .htl__step.above .htl__text{grid-row:1; align-self:flex-end}
        .htl__step.below .htl__text{grid-row:3; align-self:flex-start}
        @media (max-width:900px){
          .htl{grid-template-columns:1fr; column-gap:0}
          .htl__line{left:34px; right:auto; top:0; bottom:0; width:1px; height:auto}
          .htl__step{grid-template-rows:auto; grid-template-columns:68px 1fr; column-gap:24px; justify-items:start; align-items:center; min-height:0; padding:18px 0}
          .htl__node{grid-row:1; grid-column:1; box-shadow:0 0 0 6px var(--ink)}
          .htl__text, .htl__step.above .htl__text, .htl__step.below .htl__text{grid-row:1; grid-column:2; text-align:left; align-self:center; max-width:none}
        }
      `}</style>
    </Page>
  );
}

function FeaturedCard({slug, couple, place, img, pos}){
  return (
    <Link to={slug ? '/portfolio/'+slug : '/portfolio'} className={"feat-card feat-"+pos} data-cursor="view">
      <div className="img" style={{width:'100%',height:'100%'}}>
        <img src={img} alt={couple + (place ? ' · ' + place : '') + ' — trouwfotografie Wedding Visions'} loading="lazy"/>
      </div>
      <div className="overlay"/>
      <div className="meta">
        <div className="h-display" style={{fontSize:28}}>{couple}</div>
        <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', marginTop:6, opacity:.8}}>{place}</div>
      </div>
    </Link>
  );
}

Object.assign(window, { Home });