/* =========== Services / Prijzen =========== */

// "€1.400" → 1400; "€2.150,50" → 2150.5
function parsePrice(s){
  if(!s) return 0;
  const cleaned = String(s).replace(/[^0-9,.]/g, '').replace(/\./g, '').replace(',', '.');
  const n = parseFloat(cleaned);
  return Number.isFinite(n) ? n : 0;
}

// 1908 → "€1.908"   ;   1875.5 → "€1.875,50"
function formatEUR(n){
  if(!Number.isFinite(n)) return '';
  const rounded = Math.round(n * 100) / 100;
  const hasCents = Math.abs(rounded - Math.round(rounded)) > 0.001;
  const formatted = hasCents
    ? rounded.toFixed(2).replace('.', ',')
    : Math.round(rounded).toString();
  // Add thousands separator (.)
  return '€' + formatted.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
}

// Voorbeeld-strookjes (600×1800) + digitale gif voor de photobooth-sectie
const BOOTH_STRIPS = [
  '/assets/photobooth/0007-Auxane__Milan-d1-template.jpg',
  '/assets/photobooth/0146-Lore__Maxim-d1-template.jpg',
  '/assets/photobooth/0250-Serena__Lucas-d1-template.jpg',
  '/assets/photobooth/0378-Vally__Lowie-d1-template.jpg',
];
const BOOTH_GIF = '/assets/photobooth/0248-Serena__Lucas-d1.mp4';
const KOPPEL_PHOTOS = [
  '/assets/koppelshoot/koppelshoot-1.jpg',
  '/assets/koppelshoot/koppelshoot-2.jpg',
  '/assets/koppelshoot/koppelshoot-3.jpg',
];

function Services(){
  const t = useT();
  const [tab, setTab] = useState('foto');
  const [brochureOpen, setBrochureOpen] = useState(false);
  useDocumentMeta({
    title: t('Diensten en prijzen · trouwfotografie en video','Services and pricing · wedding photography and video'),
    description: t('Transparante pakketten voor trouwfotografie (vanaf €1.600), videografie (vanaf €1.700), foto + video combi (vanaf €2.970), photobooth (vanaf €250), koppelshoot (€300) en fotoboek op maat. Reiskosten in België steeds inbegrepen.','Transparent packages for wedding photography (from €1,600), videography (from €1,700), photo + video combo (from €2,970), photobooth (from €250), couple shoot (€300) and custom photo album. Travel costs within Belgium always included.'),
  });

  const tabs = {foto: SITE.pricing.photo, video: SITE.pricing.video};

  // Smooth-scroll quick navigation. For foto/video the section is shared (tabbed),
  // so switch the tab first, then scroll on the next frame. Album = aparte pagina.
  const jumpTo = (item)=>{
    if(item.to){ navigate(item.to); return; }
    if(item.tab) setTab(item.tab);
    requestAnimationFrame(()=>{
      const el = document.getElementById(item.target);
      if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
    });
  };

  // Jumps die van een andere pagina komen (home-tegels, nav-dropdown) of in-page events.
  useEffect(()=>{
    const apply = (item)=>{
      if(!item) return;
      if(item.tab) setTab(item.tab);
      setTimeout(()=>{
        const el = document.getElementById(item.section || item.target);
        if(el) el.scrollIntoView({behavior:'smooth', block:'start'});
      }, 80);
    };
    if(window.__wvDienstTarget){
      const t = window.__wvDienstTarget;
      window.__wvDienstTarget = null;
      setTimeout(()=> apply(t), 650); // wacht op pagina-overgang/curtain
    }
    const onJump = (e)=> apply(e.detail);
    window.addEventListener('wv-dienst-jump', onJump);
    return ()=> window.removeEventListener('wv-dienst-jump', onJump);
  }, []);

  const jumpItems = [
    {label:t('Fotografie','Photography'),  sub:t('vanaf €1.600','from €1,600'), icon:'foto',   target:'diensten-fotovideo',  tab:'foto'},
    {label:t('Videografie','Videography'), sub:t('vanaf €1.700','from €1,700'), icon:'video',  target:'diensten-fotovideo',  tab:'video'},
    {label:t('Photobooth','Photobooth'),  sub:t('vanaf €250','from €250'),   icon:'booth',  target:'diensten-photobooth'},
    {label:t('Album','Album'),       sub:t('op maat','on request'),      icon:'album',  to:'/album'},
    {label:t('Koppelshoot','Couple shoot'), sub:'€300',         icon:'shoot',  target:'diensten-koppelshoot'},
  ];

  return (
    <Page label="04 Diensten">
      <Nav current="/diensten" solid/>

      <section className="services-hero-sec" style={{paddingTop:160, paddingBottom:80}}>
        <div className="wrap">
          <div className="reveal services-hero" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:60, alignItems:'end'}}>
            <div>
              <div className="h-number">{t('DIENSTEN & PRIJZEN','SERVICES & PRICING')}</div>
              <h1 className="h-display" style={{fontSize:'clamp(44px,6vw,88px)', marginTop:40, lineHeight:.88}}>
                {t(<>Alles<br/><span className="italic-serif">inclusief</span>,<br/>niets <span className="h-hand" style={{fontSize:'.55em', color:'var(--gold)'}}>verborgen</span>.</>,
                   <>Everything<br/><span className="italic-serif">included</span>,<br/>nothing <span className="h-hand" style={{fontSize:'.55em', color:'var(--gold)'}}>hidden</span>.</>)}
              </h1>
            </div>
            <div style={{maxWidth:420, paddingBottom:20}}>
              <p style={{fontSize:16, lineHeight:1.7, color:'var(--ink-80)', margin:0}}>
                {t("Alle pakketten zijn volledig inclusief: verplaatsing binnen België, een online galerij en, indien gewenst, dronefoto's. Zo weet je meteen waar je aan toe bent, zonder onverwachte kosten.",'All packages are fully inclusive: travel within Belgium, an online gallery and, if desired, drone photos. So you know exactly where you stand, with no unexpected costs.')}
              </p>
              <button onClick={()=>setBrochureOpen(true)} className="btn btn-primary brochure-cta" data-cursor="hover" style={{marginTop:28}}>
                <span className="brochure-cta__ico" aria-hidden="true">↓</span>
                {t('Download gratis brochure','Download free brochure')} <span className="arrow"></span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {brochureOpen && <BrochureModal onClose={()=>setBrochureOpen(false)}/>}

      {/* QUICK JUMP — scroll naar dienst */}
      <section style={{paddingBottom:40}}>
        <div className="wrap">
          <div className="dienst-jump reveal">
            {jumpItems.map((it,i)=>(
              <button key={i} className="dienst-jump__item" data-cursor="hover"
                onClick={()=>jumpTo(it)} aria-label={t('Ga naar ','Go to ')+it.label}>
                <span className="dienst-jump__ico"><ServiceIcon name={it.icon}/></span>
                <span className="dienst-jump__txt">
                  <span className="dienst-jump__label">{it.label}</span>
                </span>
                <span className="dienst-jump__arrow" aria-hidden="true">{it.to ? '↗' : '↓'}</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* FOTO & VIDEO — tabbed pricing */}
      <section id="diensten-fotovideo" style={{background:'var(--paper)', padding:'120px 0', scrollMarginTop:80}}>
        <div className="wrap">
          <div className="reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'end', marginBottom:60, flexWrap:'wrap', gap:20}}>
            <div>
              <div className="h-number">{t('SOLO PAKKETTEN','SOLO PACKAGES')}</div>
              <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16}}>
                {tab==='foto'?t('Fotografie','Photography'):t('Videografie','Videography')}
              </h2>
            </div>
            <div style={{display:'flex', gap:4, padding:4, background:'var(--ivory)', borderRadius:999, border:'1px solid var(--rule)'}}>
              {[['foto',t('Fotografie','Photography')],['video',t('Videografie','Videography')]].map(([k,l])=>(
                <button key={k} onClick={()=>setTab(k)} data-cursor="hover"
                  style={{padding:'12px 28px', borderRadius:999, fontSize:11, letterSpacing:'.25em', textTransform:'uppercase', background: tab===k?'var(--ink)':'transparent', color: tab===k?'var(--ivory)':'var(--ink)', transition:'all .3s'}}>
                  {l}
                </button>
              ))}
            </div>
          </div>

          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:24}} key={tab} className="pricing-grid">
            {tabs[tab].map((p,i)=>{
              const btwRate = tab === 'foto' ? 0.06 : 0.21;
              const isHighlighted = !!p.tag;
              const bg = isHighlighted ? 'var(--accent)' : 'var(--ivory)';
              const fg = isHighlighted ? '#fff' : 'var(--ink)';
              const fgSoft = isHighlighted ? 'rgba(255,255,255,.75)' : 'var(--ink-60)';
              const border = isHighlighted ? '1px solid var(--accent)' : '1px solid var(--rule)';
              const rule = isHighlighted ? 'rgba(255,255,255,.25)' : 'var(--rule)';
              const dash = isHighlighted ? 'rgba(255,255,255,.6)' : 'var(--ink)';
              return (
                <div key={i} className="reveal pricing-card" style={{background:bg, color:fg, padding:'40px 32px', position:'relative', border:border}}>
                  {isHighlighted && (
                    <div style={{position:'absolute', top:-1, right:24, background:'#fff', color:'var(--ink)', padding:'8px 16px', fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', fontWeight:600}}>
                      {tphrase(p.tag)}
                    </div>
                  )}
                  <h3 className="h-display" style={{fontSize:56, lineHeight:1}}>{p.name}</h3>
                  <div style={{marginTop:32, paddingBottom:24, borderBottom:'1px solid '+rule}}>
                    <div className="h-display" style={{fontSize:48, lineHeight:1}}>{p.price}</div>
                    <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:fgSoft, marginTop:8}}>
                      {t('excl. ','excl. ')}{tab==='foto'?'6%':'21%'} {t('BTW','VAT')} &nbsp;·&nbsp; {formatEUR(parsePrice(p.price) * (1 + btwRate))} {t('incl.','incl.')}
                    </div>
                  </div>
                  <ul style={{listStyle:'none', marginTop:24, display:'flex', flexDirection:'column', gap:12}}>
                    {p.items.map((it,j)=>(
                      <li key={j} style={{fontSize:14, display:'flex', gap:12, color: isHighlighted ? 'rgba(255,255,255,.92)' : 'var(--ink-80)'}}>
                        <span style={{width:16, flexShrink:0, height:1, background:dash, marginTop:10}}></span>
                        <span>{tphrase(it)}</span>
                      </li>
                    ))}
                  </ul>
                  <Link to="/contact" className={'btn '+(isHighlighted?'btn-ghost-light':'btn-ghost')} style={{marginTop:32, width:'100%', justifyContent:'center'}} data-cursor="hover">
                    {t('Aanvragen','Request')} <span className="arrow"></span>
                  </Link>
                </div>
              );
            })}
          </div>

          <div style={{marginTop:60, padding:40, background:'var(--ivory)', border:'1px solid var(--rule)'}}>
            <div className="h-number">{t('AANVULLEND','ADD-ONS')} · {(tab==='foto'?t('FOTO','PHOTO'):t('VIDEO','VIDEO'))}</div>
            <div style={{display:'grid', gridTemplateColumns: tab==='foto'?'1fr 1fr':'1fr 1fr 1fr 1fr', gap:40, marginTop:24}} className="addon-grid">
              {tab==='foto' ? (<>
                <AddOn name={t('Tweede fotograaf','Second photographer')} price={t('Op aanvraag','On request')} sub={t('Voor extra dekking','For extra coverage')}/>
                <AddOn name="Same Day Edit" price="€100" sub={t('Afgeleverd voor dessert','Delivered before dessert')}/>
              </>) : (<>
                <AddOn name="Trailer" price="€300" sub={t('Tot 240 sec · 72u na de trouw','Up to 240 sec · 72h after the wedding')}/>
                <AddOn name="Same Day Edit" price="€200" sub={t('180 tot 240 sec · voor dessert','180 to 240 sec · before dessert')}/>
                <AddOn name={t('Documentaire Film','Documentary Film')} price="€200" sub={t('Tot 20 min highlight','Up to 20 min highlight')}/>
                <AddOn name={t('Tweede videograaf','Second videographer')} price={t('Op aanvraag','On request')} sub={t('Extra camerahoeken','Extra camera angles')}/>
              </>)}
            </div>
          </div>
        </div>
      </section>

      {/* COMBO */}
      <section style={{padding:'140px 0'}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:60}}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'end', flexWrap:'wrap', gap:20}}>
              <div>
                <div className="h-number">{t('COMBINATIE','COMBINATION')}</div>
                <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16}}>
                  {t(<>Foto &amp; Video <span className="italic-serif">samen</span></>,
                     <>Photo &amp; Video <span className="italic-serif">together</span></>)}
                </h2>
              </div>
              <div style={{background:'var(--accent)', color:'#fff', padding:'12px 24px', fontSize:11, letterSpacing:'.25em', textTransform:'uppercase', fontWeight:600}}>
                {t('10% korting','10% discount')}
              </div>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:24}} className="pricing-grid">
            {SITE.pricing.combo.map((p,i)=>(
              <div key={i} className="reveal pricing-card" style={{padding:48, border:'1px solid '+(p.tag?'var(--accent)':'var(--ink)'), background: p.tag?'var(--accent)':'var(--ivory)', color: p.tag?'#fff':'var(--ink)', position:'relative'}}>
                {p.tag && <div style={{position:'absolute', top:-1, right:24, background:'#fff', color:'var(--ink)', padding:'8px 16px', fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', fontWeight:600}}>{tphrase(p.tag)}</div>}
                <h3 className="h-display" style={{fontSize:64, lineHeight:1}}>{p.name}</h3>
                <p style={{fontSize:15, marginTop:16, opacity:.85, maxWidth:'24ch'}}>{tphrase(p.desc)}</p>
                <div style={{marginTop:48, paddingTop:24, borderTop:'1px solid '+(p.tag?'rgba(255,255,255,.25)':'var(--rule)')}}>
                  <div className="h-display" style={{fontSize:64, lineHeight:1}}>{p.price}</div>
                  <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', opacity:.8, marginTop:8}}>
                    {t('excl. BTW','excl. VAT')} &nbsp;·&nbsp; {p.incl || p.sub} {t('incl.','incl.')}
                  </div>
                </div>
                <Link to="/contact" className={"btn "+(p.tag?"btn-ghost-light":"btn-ghost")} style={{marginTop:32, width:'100%', justifyContent:'center'}} data-cursor="hover">
                  {t('Aanvragen','Request')} <span className="arrow"></span>
                </Link>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PHOTOBOOTH */}
      <section id="diensten-photobooth" style={{background:'var(--paper)', padding:'140px 0', scrollMarginTop:80}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:60, maxWidth:720}}>
            <div className="h-number">PHOTOBOOTH</div>
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16, lineHeight:.95}}>
              {t(<>Onbeperkt prints,<br/>eindeloos <span className="italic-serif">plezier</span>.</>,
                 <>Unlimited prints,<br/>endless <span className="italic-serif">fun</span>.</>)}
            </h2>
            <p style={{fontSize:16, lineHeight:1.7, color:'var(--ink-80)', marginTop:24}}>
              {t(<>Elke gast krijgt meteen een eigen strookje, met een <strong>volledig custom ontwerp op maat</strong> van jullie trouw. Alles wordt bovendien <strong>digitaal gedeeld</strong> en van elke reeks ontvangen jullie een leuke <strong>gif</strong>.</>,
                 <>Every guest instantly gets their own photo strip, with a <strong>fully custom design</strong> tailored to your wedding. Everything is also <strong>shared digitally</strong> and for every series you receive a fun <strong>gif</strong>.</>)}
            </p>
          </div>

          {/* Strookjes-waaier + deel-info, gecentreerd in het midden */}
          <div className="booth-feature reveal">
            <div className="booth-fan-wrap">
              <BoothFan/>
            </div>
            <div className="booth-share">
              <div className="booth-gif">
                <video src={BOOTH_GIF} autoPlay loop muted playsInline/>
                <span className="booth-gif__tag">{t('Digitale gif','Digital gif')}</span>
              </div>
              <div className="booth-share__info">
                <div className="h-number">{t('OOK DIGITAAL','ALSO DIGITAL')}</div>
                <h3 className="h-display" style={{fontSize:28, lineHeight:1.05, margin:'12px 0 14px'}}>
                  {t(<>Meteen gedeeld,<br/>direct te bewaren.</>,
                     <>Instantly shared,<br/>ready to keep.</>)}
                </h3>
                <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-80)', marginBottom:18}}>
                  {t('Naast het geprinte strookje krijgen jullie gasten alles ook digitaal, inclusief een vrolijke gif van elke reeks. Delen kan in enkele tellen:','Besides the printed strip, your guests also get everything digitally, including a cheerful gif of every series. Sharing takes just seconds:')}
                </p>
                <div className="booth-chips">
                  <span className="booth-chip">AirDrop</span>
                  <span className="booth-chip">WhatsApp / SMS</span>
                  <span className="booth-chip">{t('E-mail','Email')}</span>
                </div>
                <div className="booth-custom">
                  <span className="booth-custom__mark">✶</span>
                  {t('Volledig custom strookje-ontwerp, afgestemd op jullie uitnodiging en stijl.','Fully custom strip design, matched to your invitation and style.')}
                </div>
              </div>
            </div>
          </div>

          {/* Prijskaarten */}
          <div className="booth-cards reveal">
            <ExtraCard
              name="Photobooth Basic" price="€250"
              subtitle={t('Alleen te boeken met andere dienst · excl. 6% BTW','Only bookable with another service · excl. 6% VAT')}
              items={t(['Startklaar bij receptie','Onbeperkt prints','Uniek strookje-ontwerp (op basis van uitnodiging)','Delen via AirDrop, SMS & WhatsApp','(Online) fotoalbum','Props naar keuze','Blijft tot ±1u na openingsdans'],
                       ['Ready to go at the reception','Unlimited prints','Unique strip design (based on your invitation)','Sharing via AirDrop, SMS & WhatsApp','(Online) photo album','Props of your choice','Stays until ±1h after the first dance'])}
            />
            <ExtraCard
              name="Photobooth Pro" price="€450"
              subtitle={t('Standalone in W/O Vlaanderen · 10% korting bij combi · excl. 6% BTW','Standalone in West/East Flanders · 10% discount with a combo · excl. 6% VAT')}
              items={t(['Startklaar bij receptie','Onbeperkt prints','Uniek strookje-ontwerp','Delen via AirDrop, SMS & WhatsApp','(Online) fotoalbum','Props naar keuze','Ophaling ochtend na feest'],
                       ['Ready to go at the reception','Unlimited prints','Unique strip design','Sharing via AirDrop, SMS & WhatsApp','(Online) photo album','Props of your choice','Pickup the morning after the party'])}
            />
          </div>
        </div>
      </section>

      {/* KOPPELSHOOT */}
      <section id="diensten-koppelshoot" style={{padding:'140px 0', scrollMarginTop:80}}>
        <div className="wrap">
          <div className="reveal" style={{marginBottom:60}}>
            <div className="h-number">{t('KOPPELSHOOT','COUPLE SHOOT')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(32px,4vw,56px)', marginTop:16, lineHeight:.95}}>
              {t(<>Even <span className="italic-serif">samen</span><br/>voor de camera.</>,
                 <>A moment <span className="italic-serif">together</span><br/>in front of the camera.</>)}
            </h2>
          </div>

          <div className="shoot-layout">
            <div className="shoot-card">
              <ExtraCard
                name={t('Koppelshoot','Couple shoot')} price="€300"
                subtitle={t('Perfect voor save-the-date of uitnodigingen · excl. 6% BTW','Perfect for a save-the-date or invitations · excl. 6% VAT')}
                items={t(['Gezellige shoot van ±1 uur','20 professioneel afgewerkte foto\'s','Zelf te kiezen uit online album','Kilometervergoeding €0,45/km (exclusief)'],
                         ['A relaxed shoot of ±1 hour','20 professionally edited photos','Chosen by you from an online album','Mileage allowance €0.45/km (excluded)'])}
              />
            </div>
            {/* Voorbeeldfoto's koppelshoot */}
            <div className="shoot-photos reveal">
              <img className="shoot-photos__a" src={KOPPEL_PHOTOS[0]} alt={t('Koppelshoot voor save-the-date door Wedding Visions','Couple shoot for a save-the-date by Wedding Visions')} loading="lazy"/>
              <img className="shoot-photos__b" src={KOPPEL_PHOTOS[1]} alt={t('Verliefd koppel tijdens een fotoshoot van Wedding Visions','Couple in love during a Wedding Visions photo shoot')} loading="lazy"/>
              <img className="shoot-photos__c" src={KOPPEL_PHOTOS[2]} alt={t('Koppelshoot op locatie in België door Wedding Visions','On-location couple shoot in Belgium by Wedding Visions')} loading="lazy"/>
            </div>
          </div>
        </div>
      </section>

      {/* ALBUM TEASER */}
      <section style={{background:'var(--paper)', padding:'120px 0'}}>
        <div className="wrap">
          <div className="album-teaser reveal">
            <div className="album-teaser__media">
              <img src="/assets/fotoboek/album-wv-1-2.jpg" alt={t('Handgebonden trouwfotoboek op maat van Wedding Visions','Handbound custom wedding photo album by Wedding Visions')} loading="lazy"/>
              <img src="/assets/fotoboek/albums-1.jpg" alt={t('Geopend trouwalbum met premium druk van Wedding Visions','Opened wedding album with premium print by Wedding Visions')} loading="lazy"/>
            </div>
            <div className="album-teaser__body">
              <div className="h-number">{t('ALBUMS & FOTOBOEK','ALBUMS & PHOTO BOOK')}</div>
              <h2 className="h-display" style={{fontSize:'clamp(30px,3.6vw,52px)', marginTop:16, lineHeight:.98}}>
                {t(<>Uw verhaal,<br/><span className="italic-serif">tastbaar</span> in handen.</>,
                   <>Your story,<br/><span className="italic-serif">tangible</span> in your hands.</>)}
              </h2>
              <p style={{fontSize:16, lineHeight:1.7, color:'var(--ink-80)', marginTop:20, maxWidth:440}}>
                {t('Een handgebonden fotoboek op maat, met premium papier en een persoonlijk ontwerp. Bekijk onze albums en stel het uwe samen met de live prijscalculator.','A handbound, custom photo book with premium paper and a personal design. Browse our albums and compose your own with the live price calculator.')}
              </p>
              <Link to="/album" className="btn btn-primary" style={{marginTop:28}} data-cursor="hover">
                {t('Ontdek onze albums','Discover our albums')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{background:'var(--cocoa)', color:'var(--ivory)', padding:'140px 0'}}>
        <div className="wrap cta-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'center'}}>
          <div className="reveal">
            <div className="h-number" style={{color:'rgba(255,255,255,.5)'}}>{t('VRIJBLIJVEND GESPREK','NO-OBLIGATION CALL')}</div>
            <h2 className="h-display" style={{fontSize:'clamp(36px,5vw,64px)', marginTop:24, lineHeight:.9}}>
              {t(<>Nog vragen?<br/>Laten we<br/><span className="italic-serif">praten</span>.</>,
                 <>Still have questions?<br/>Let's<br/><span className="italic-serif">talk</span>.</>)}
            </h2>
          </div>
          <div className="reveal" style={{fontSize:16, lineHeight:1.7, color:'rgba(255,255,255,.75)'}}>
            <p style={{marginBottom:24}}>
              {t('Weet u niet zeker welk pakket het beste bij u past? Neem gerust contact met ons op en plan een vrijblijvend gesprek. We leggen u graag gedetailleerd uit wat elk pakket inhoudt, aan de hand van visuele voorbeelden. Alles zonder enige verplichting.','Not sure which package suits you best? Feel free to get in touch and book a no-obligation call. We\'re happy to explain in detail what each package includes, using visual examples. All without any commitment.')}
            </p>
            <div style={{display:'flex', gap:16, marginTop:40, flexWrap:'wrap'}}>
              <Link to="/contact" className="btn btn-ghost-light" data-cursor="hover">
                {t('Plan gesprek','Book a call')} <span className="arrow"></span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <Footer/>

      <style>{`
        .pricing-card{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
        .pricing-card:hover{transform:translateY(-6px)}

        /* Quick-jump naar dienst */
        .dienst-jump{
          display:grid; grid-template-columns:repeat(5,1fr); gap:16;
        }
        .dienst-jump__item{
          position:relative;
          display:flex; flex-direction:column; align-items:flex-start; gap:22px;
          padding:30px 28px;
          background:var(--ivory);
          border:1px solid var(--rule);
          text-align:left;
          transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, background .3s;
        }
        .dienst-jump__item:hover{
          transform:translateY(-4px);
          border-color:var(--ink);
        }
        .dienst-jump__ico{
          flex-shrink:0; width:52px; height:52px;
          display:flex; align-items:center; justify-content:center;
          color:var(--ink);
          border:1px solid var(--rule);
          border-radius:999px;
          transition:background .3s, color .3s, border-color .3s;
        }
        .dienst-jump__item:hover .dienst-jump__ico{
          background:var(--ink); color:var(--ivory); border-color:var(--ink);
        }
        .dienst-jump__txt{display:flex; flex-direction:column; gap:7; min-width:0}
        .dienst-jump__label{
          font-family:var(--serif); font-size:20px; line-height:1.1; color:var(--ink);
        }
        .dienst-jump__sub{
          font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold);
        }
        .dienst-jump__arrow{
          position:absolute; top:26px; right:26px;
          font-size:14px; color:var(--ink-40);
          transition:transform .3s, color .3s;
        }
        .dienst-jump__item:hover .dienst-jump__arrow{
          transform:translateY(3px); color:var(--ink);
        }

        /* Photobooth: strookjes-waaier + info gecentreerd in het midden */
        .booth-feature{
          display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;
          max-width:900px; margin:0 auto 80px;
        }
        .booth-fan-wrap{display:flex; justify-content:center}
        .booth-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:900px; margin:0 auto}

        /* Album teaser onderaan diensten */
        .album-teaser{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
        .album-teaser__media{display:grid; grid-template-columns:1fr 1fr; gap:16px}
        .album-teaser__media img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:4px;
          box-shadow:0 18px 44px rgba(20,18,16,.18)}
        .album-teaser__media img:nth-child(2){margin-top:36px}

        /* Koppelshoot layout met voorbeeldfoto's */
        .shoot-layout{display:grid; grid-template-columns:0.82fr 1.18fr; gap:64px; align-items:center}
        .shoot-card{max-width:440px}
        .shoot-photos{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
        .shoot-photos img{width:100%; aspect-ratio:3/4; object-fit:cover; display:block; border-radius:4px;
          box-shadow:0 18px 44px rgba(20,18,16,.20)}
        .shoot-photos__a{margin-top:0}
        .shoot-photos__b{margin-top:38px}
        .shoot-photos__c{margin-top:76px}

        /* Photobooth-strookjes in waaier */
        .booth-fan{position:relative; height:540px; width:400px; display:flex; align-items:flex-end; justify-content:center}
        .booth-fan__card{
          position:absolute; bottom:0;
          width:158px; aspect-ratio:592/1792; object-fit:cover; border-radius:4px;
          box-shadow:0 16px 40px rgba(20,18,16,.30);
          transform-origin:bottom center;
          transition:box-shadow .45s, transform .45s;
        }
        .booth-fan:hover .booth-fan__card{box-shadow:0 22px 54px rgba(20,18,16,.40)}

        /* Digitale gif + delen — één elegante kaart naast de waaier */
        .booth-share{
          width:100%;
          display:flex; flex-direction:column;
          background:var(--ivory); border:1px solid var(--rule); padding:34px;
        }
        .booth-gif{position:relative; align-self:center; width:204px; max-width:100%; border-radius:8px; overflow:hidden;
          background:var(--ink); box-shadow:0 18px 46px rgba(20,18,16,.24)}
        .booth-gif video{width:100%; height:auto; display:block}
        .booth-gif__tag{position:absolute; top:10px; left:10px; background:rgba(20,18,16,.72); color:#fff;
          font-size:9px; letter-spacing:.2em; text-transform:uppercase; padding:5px 9px; border-radius:999px}
        .booth-share__info{margin-top:28px; padding-top:26px; border-top:1px solid var(--rule)}
        .booth-chips{display:flex; flex-wrap:wrap; gap:8px}
        .booth-chip{display:inline-flex; align-items:center; padding:8px 14px; border:1px solid var(--ink-20);
          border-radius:999px; font-size:11px; letter-spacing:.12em; color:var(--ink-80)}
        .booth-custom{display:flex; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--rule);
          font-size:13px; line-height:1.6; color:var(--ink-80)}
        .booth-custom__mark{color:var(--accent); flex-shrink:0}

        .ex-strips{display:flex; gap:14px; height:540px; overflow:hidden; position:relative;
          -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
        }
        .ex-strips__col{display:flex; flex-direction:column; gap:14px; flex:1; will-change:transform}
        .ex-strips__col--up{animation:wv-strip-up 26s linear infinite}
        .ex-strips__col--down{animation:wv-strip-down 32s linear infinite}
        @keyframes wv-strip-up{from{transform:translateY(0)} to{transform:translateY(-50%)}}
        @keyframes wv-strip-down{from{transform:translateY(-50%)} to{transform:translateY(0)}}
        .ex-tile{
          flex-shrink:0; border:1px solid var(--rule); background:var(--ivory); border-radius:4px;
          overflow:hidden; display:flex; align-items:center; justify-content:center;
          color:var(--ink-40); font-size:9px; letter-spacing:.24em; text-transform:uppercase;
        }
        .ex-tile img{width:100%; height:100%; object-fit:cover; display:block}
        .ex-strips--booth .ex-tile{aspect-ratio:1/3}
        .ex-strips--shoot .ex-tile{aspect-ratio:4/5}

        /* Hero collapst naar één kolom op tablet en mobiel */
        @media (max-width:900px){
          .services-hero{grid-template-columns:1fr !important; gap:32px; align-items:start}
          .services-hero > div:last-child{max-width:none; padding-bottom:0}
        }

        /* iPad liggend: aanvullende video-opties in twee kolommen i.p.v. vier */
        @media (max-width:1024px) and (min-width:901px){
          .addon-grid{grid-template-columns:1fr 1fr !important}
        }

        @media (max-width:1000px){
          .dienst-jump{grid-template-columns:repeat(3,1fr)}
        }
        @media (max-width:900px){
          .shoot-layout{grid-template-columns:1fr}
          .booth-cards{grid-template-columns:1fr}
          .booth-feature{grid-template-columns:1fr; gap:40px; justify-items:center}
          .booth-share{max-width:420px; width:100%}
          .ex-strips-wrap{display:none}
          .shoot-card{max-width:none}
          .shoot-photos__b{margin-top:24px}
          .shoot-photos__c{margin-top:48px}
          .album-teaser{grid-template-columns:1fr; gap:36px}
        }
        @media (max-width:560px){
          .booth-fan{width:280px; height:430px}
          .booth-fan__card{width:122px}
        }
        @media (max-width:900px){
          .pricing-grid{grid-template-columns:1fr !important}
          .addon-grid{grid-template-columns:1fr !important}
          .cta-grid{grid-template-columns:1fr !important}
          .album-grid{grid-template-columns:1fr !important}
        }
        @media (max-width:620px){
          .dienst-jump{grid-template-columns:1fr 1fr; gap:12}
          .dienst-jump__item{padding:22px 20px; gap:16px}
        }

        /* Mobiel: minder bovenruimte in de hero */
        @media (max-width:600px){
          .services-hero-sec{padding-top:128px}
        }

        /* Telefoon liggend: lagere secties zodat er minder gescrold moet worden */
        @media (orientation:landscape) and (max-height:520px){
          .services-hero-sec{padding-top:104px; padding-bottom:48px}
        }

        /* Compactere brochure-knop met nette padding tussen tekst en rand */
        .brochure-cta{
          padding:13px 24px; font-size:11px; letter-spacing:.14em; gap:8px;
          line-height:1; white-space:nowrap;
        }
        .brochure-cta .brochure-cta__ico{margin-right:2px; font-size:12px}
        @media (max-width:600px){
          .brochure-cta{padding:12px 20px; font-size:10px; letter-spacing:.12em; white-space:normal}
        }
      `}</style>
    </Page>
  );
}

function ServiceIcon({name}){
  const common = {width:22, height:22, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:1.5, strokeLinecap:'round', strokeLinejoin:'round'};
  switch(name){
    case 'foto': return (
      <svg {...common}>
        <path d="M3 8.5A1.5 1.5 0 0 1 4.5 7h2L8 5h8l1.5 2h2A1.5 1.5 0 0 1 21 8.5v9A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z"/>
        <circle cx="12" cy="13" r="3.4"/>
      </svg>
    );
    case 'video': return (
      <svg {...common}>
        <rect x="3" y="6" width="13" height="12" rx="2"/>
        <path d="M16 10l5-3v10l-5-3z"/>
      </svg>
    );
    case 'booth': return (
      <svg {...common}>
        <rect x="4" y="3" width="16" height="18" rx="1.5"/>
        <rect x="7" y="6" width="10" height="6" rx="1"/>
        <path d="M8 15h8M8 18h5"/>
      </svg>
    );
    case 'album': return (
      <svg {...common}>
        <path d="M5 4h11a2 2 0 0 1 2 2v14H7a2 2 0 0 1-2-2z"/>
        <path d="M18 16H7a2 2 0 0 0-2 2"/>
        <path d="M10 4v6l2-1.4L14 10V4"/>
      </svg>
    );
    case 'shoot': return (
      <svg {...common}>
        <path d="M8.5 6.5a2.5 2.5 0 0 0-4.5 1.5c0 2.5 4.5 5 4.5 5s4.5-2.5 4.5-5A2.5 2.5 0 0 0 8.5 6.5z"/>
        <path d="M16 11.5a2 2 0 0 0-3.4 1.2c0 1.9 3.4 3.8 3.4 3.8s3.4-1.9 3.4-3.8A2 2 0 0 0 16 11.5z"/>
      </svg>
    );
    default: return null;
  }
}

// Voorbeeld-strookjes in een waaier. Auxane & Milan ligt bovenaan (laatst = hoogste z-index).
function BoothFan(){
  const cards = [
    {src:'/assets/photobooth/0378-Vally__Lowie-d1-template.jpg',  rot:-16, x:-58, couple:'Vally & Lowie'},
    {src:'/assets/photobooth/0250-Serena__Lucas-d1-template.jpg', rot: 15, x: 56, couple:'Serena & Lucas'},
    {src:'/assets/photobooth/0146-Lore__Maxim-d1-template.jpg',   rot: -6, x:-20, couple:'Lore & Maxim'},
    {src:'/assets/photobooth/0007-Auxane__Milan-d1-template.jpg', rot:  6, x: 18, couple:'Auxane & Milan'}, // bovenaan
  ];
  return (
    <div className="booth-fan">
      {cards.map((c,i)=>(
        <img key={i} className="booth-fan__card" src={c.src} alt={tg('Photobooth-strookje van','Photobooth strip of')+' '+c.couple+' — Wedding Visions'}
          loading="lazy" style={{zIndex:i+1, transform:`translateX(${c.x}px) rotate(${c.rot}deg)`}}/>
      ))}
    </div>
  );
}

// Animerende voorbeeld-strookjes / -foto's naast Photobooth en Koppelshoot.
// Toont nu placeholders; geef later afbeeldingen mee via de `images` prop.
function ExampleStrips({variant, images}){
  const placeholders = Array.from({length:5});
  const label = variant === 'booth' ? 'strookje' : 'foto';
  const renderCol = (dir, keyPrefix)=>{
    const src = (images && images.length) ? images : placeholders;
    const doubled = src.concat(src);
    return (
      <div className={'ex-strips__col ex-strips__col--'+dir}>
        {doubled.map((im, i)=>(
          <div key={keyPrefix+i} className="ex-tile">
            {im ? <img src={im} alt={tg('Voorbeeld van trouwfotografie door Wedding Visions','Example of wedding photography by Wedding Visions')} loading="lazy"/> : <span>{label}</span>}
          </div>
        ))}
      </div>
    );
  };
  return (
    <div className={'ex-strips ex-strips--'+variant}>
      {renderCol('up','a')}
      {renderCol('down','b')}
    </div>
  );
}

function AddOn({name, price, sub}){
  const hasPrice = /€/.test(price);
  const exclVat = window.WV_LANG==='en' ? '(excl. VAT)' : '(excl. btw)';
  return (
    <div style={{paddingTop:24, borderTop:'1px solid var(--rule)'}}>
      <div className="h-display" style={{fontSize:24, lineHeight:1}}>{name}</div>
      <div style={{fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', color:'var(--gold)', marginTop:8}}>
        {price}{hasPrice && <span style={{color:'var(--ink-40)', marginLeft:6, letterSpacing:'.1em'}}>{exclVat}</span>}
      </div>
      <div style={{fontSize:13, color:'var(--ink-60)', marginTop:8}}>{sub}</div>
    </div>
  );
}

function ExtraCard({name, price, subtitle, items}){
  return (
    <div className="reveal pricing-card" style={{background:'var(--ivory)', border:'1px solid var(--rule)', padding:32}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:16}}>
        <h3 className="h-display" style={{fontSize:32, lineHeight:1}}>{name}</h3>
        <div className="h-display" style={{fontSize:32, color:'var(--gold)'}}>{price}</div>
      </div>
      <p style={{fontSize:13, color:'var(--ink-60)', marginBottom:20, lineHeight:1.5}}>{subtitle}</p>
      <ul style={{listStyle:'none', display:'flex', flexDirection:'column', gap:8, borderTop:'1px solid var(--rule)', paddingTop:16}}>
        {items.map((it,i)=>(
          <li key={i} style={{fontSize:13, display:'flex', gap:10, color:'var(--ink-80)'}}>
            <span style={{width:10, flexShrink:0, height:1, background:'var(--ink)', marginTop:9}}></span>
            <span>{it}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

/* =========== Brochure download — lead-capture modal =========== */
function BrochureModal({onClose}){
  const t = useT();
  const [form, setForm] = useState({name:'', email:'', date:''});
  const [sending, setSending] = useState(false);
  const [error, setError] = useState('');
  const [done, setDone] = useState(false);

  const update = (k,v)=> setForm(f=> ({...f, [k]:v}));

  // Lock scroll + close on Escape
  useEffect(()=>{
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    const onKey = (e)=>{ if(e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return ()=>{ document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); };
  }, []);

  const triggerDownload = ()=>{
    const a = document.createElement('a');
    a.href = '/api/brochure/download';
    a.setAttribute('download', '');
    document.body.appendChild(a);
    a.click();
    a.remove();
  };

  const submit = async (e)=>{
    e.preventDefault();
    setSending(true); setError('');
    try {
      const res = await fetch('/api/brochure', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify(form)
      });
      if(!res.ok) throw new Error('send-failed');
      await res.json().catch(()=>({}));
      setDone(true);
      // Na een geslaagde aanvraag naar de digitale brochure (volledige redirect = betrouwbaar)
      setTimeout(()=>{ window.location.assign('/digitale-brochure'); }, 1100);
    } catch(err){
      setError(t('Er is iets misgegaan. Probeer opnieuw of mail ons rechtstreeks.','Something went wrong. Please try again or email us directly.'));
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="brochure-overlay" onClick={onClose}>
      <div className="brochure-modal reveal-now" onClick={e=>e.stopPropagation()} role="dialog" aria-modal="true" aria-label={t('Download brochure','Download brochure')}>
        <button className="brochure-close" onClick={onClose} aria-label={t('Sluiten','Close')} data-cursor="hover">×</button>

        {done ? (
          <div className="brochure-done">
            <div className="h-hand" style={{fontSize:44, color:'var(--gold)', marginBottom:8}}>{t('Bedankt!','Thank you!')}</div>
            <h3 className="h-display" style={{fontSize:'clamp(28px,4vw,40px)', lineHeight:1.05, marginBottom:16}}>
              {t(<>Je brochure<br/><span className="italic-serif">staat klaar</span>.</>,
                 <>Your brochure<br/><span className="italic-serif">is ready</span>.</>)}
            </h3>
            <p style={{color:'var(--ink-80)', fontSize:15, lineHeight:1.7, maxWidth:380, margin:'0 auto'}}>
              {t('We brengen je nu naar onze digitale brochure. Niets gebeurd?','We\'re taking you to our digital brochure now. Nothing happening?')}{' '}
              <button className="brochure-relink" onClick={()=>window.location.assign('/digitale-brochure')} data-cursor="hover">{t('Klik hier om ze te openen','Click here to open it')}</button>.
            </p>
            <button onClick={()=>window.location.assign('/digitale-brochure')} className="btn btn-primary" style={{marginTop:28}} data-cursor="hover">
              {t('Bekijk de brochure','View the brochure')} <span className="arrow"></span>
            </button>
          </div>
        ) : (
          <>
            <div className="brochure-head">
              <div className="h-number">{t('GRATIS BROCHURE','FREE BROCHURE')}</div>
              <h3 className="h-display" style={{fontSize:'clamp(28px,4vw,42px)', lineHeight:1, marginTop:14}}>
                {t(<>Ontvang onze<br/><span className="italic-serif">volledige brochure</span>.</>,
                   <>Get our<br/><span className="italic-serif">complete brochure</span>.</>)}
              </h3>
              <p style={{fontSize:14, lineHeight:1.7, color:'var(--ink-60)', marginTop:16, maxWidth:380}}>
                {t('Laat je gegevens achter en download meteen alle pakketten, prijzen en voorbeelden als PDF. Volledig gratis en vrijblijvend.','Leave your details and download all packages, prices and examples as a PDF right away. Completely free and without obligation.')}
              </p>
            </div>

            <form onSubmit={submit} className="brochure-form">
              <label className="brochure-field">
                <span className="brochure-label">{t('Je naam *','Your name *')}</span>
                <input type="text" value={form.name} onChange={e=>update('name', e.target.value)} required placeholder={t('Voornaam & naam','First & last name')}/>
              </label>
              <label className="brochure-field">
                <span className="brochure-label">{t('E-mailadres *','Email address *')}</span>
                <input type="email" value={form.email} onChange={e=>update('email', e.target.value)} required placeholder={t('naam@voorbeeld.be','name@example.com')}/>
              </label>
              <label className="brochure-field">
                <span className="brochure-label">{t('Trouwdatum','Wedding date')}</span>
                <input type="date" value={form.date} onChange={e=>update('date', e.target.value)}/>
              </label>

              {error && <div className="brochure-error">{error}</div>}

              <button type="submit" disabled={sending} className="btn btn-primary" style={{width:'100%', justifyContent:'center', marginTop:4}} data-cursor="hover">
                {sending ? t('Even geduld...','One moment...') : t('Download brochure','Download brochure')} <span className="arrow"></span>
              </button>
              <p className="brochure-fine">
                {t('Door te downloaden gaat u akkoord met de verwerking van uw gegevens. Lees de ','By downloading, you agree to the processing of your data. Read the ')}<Link to="/voorwaarden" onClick={onClose} style={{textDecoration:'underline'}}>{t('privacyverklaring','privacy statement')}</Link>.
              </p>
            </form>
          </>
        )}
      </div>

      <style>{`
        .brochure-overlay{
          position:fixed; inset:0; z-index:9999;
          background:rgba(20,18,16,.62);
          backdrop-filter:blur(6px);
          -webkit-backdrop-filter:blur(6px);
          display:flex; align-items:center; justify-content:center;
          padding:24px;
          animation:brochure-fade .3s ease;
        }
        @keyframes brochure-fade{from{opacity:0}to{opacity:1}}
        .brochure-modal{
          position:relative;
          background:var(--ivory);
          border:1px solid var(--rule);
          width:100%; max-width:520px;
          max-height:calc(100vh - 48px);
          overflow-y:auto;
          padding:48px 44px 40px;
          box-shadow:0 30px 90px rgba(20,18,16,.35);
        }
        .reveal-now{animation:brochure-rise .45s cubic-bezier(.2,.8,.2,1)}
        @keyframes brochure-rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:none}}
        .brochure-close{
          position:absolute; top:16px; right:18px;
          width:40px; height:40px;
          font-size:26px; line-height:1;
          color:var(--ink-60);
          display:flex; align-items:center; justify-content:center;
          transition:color .2s, transform .2s;
        }
        .brochure-close:hover{color:var(--ink); transform:rotate(90deg)}
        .brochure-head{margin-bottom:28px}
        .brochure-form{display:flex; flex-direction:column; gap:20px}
        .brochure-field{display:flex; flex-direction:column; gap:8px}
        .brochure-label{
          font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--ink-60);
        }
        .brochure-field input{
          width:100%; background:transparent; border:none;
          border-bottom:1px solid var(--ink-20);
          padding:10px 0; font-family:var(--sans); font-size:16px; color:var(--ink);
          outline:none; transition:border-color .3s;
        }
        .brochure-field input:focus{border-bottom-color:var(--ink)}
        .brochure-error{
          color:#c0392b; font-size:13px; padding:10px 14px;
          background:#fee2e2; border-radius:4px;
        }
        .brochure-fine{
          font-size:11px; color:var(--ink-60); line-height:1.6; margin:4px 0 0;
        }
        .brochure-fine a{color:var(--ink)}
        .brochure-done{text-align:center; padding:12px 4px}
        .brochure-relink{
          color:var(--ink); text-decoration:underline; font:inherit;
        }
        .brochure-cta__ico{
          display:inline-flex; align-items:center; justify-content:center;
          margin-right:4px; font-size:13px;
        }
        @media (max-width:560px){
          .brochure-modal{padding:40px 24px 32px}
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Services });