/* BinTat modern — shared UI */
const { useState, useEffect, useRef } = React;

const ICONS = {
  arrow:'M5 12h14M13 6l6 6-6 6',
  arrowTR:'M7 17L17 7M8 7h9v9',
  chev:'M9 6l6 6-6 6',
  back:'M19 12H5M11 18l-6-6 6-6',
  check:'M20 6L9 17l-5-5',
  box:'M21 8l-9-5-9 5v8l9 5 9-5V8zM3 8l9 5 9-5M12 13v8',
  shield:'M12 3l8 3v6c0 5-3.5 7.5-8 9-4.5-1.5-8-4-8-9V6l8-3z|M9 12l2 2 4-4',
  truck:'M3 6h11v9H3zM14 9h4l3 3v3h-7M6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM17.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
  snow:'M12 2v20M5 5l14 14M19 5L5 19M2 12h20',
  tag:'M3 7v5l9 9 7-7-9-9H3zM7.5 7.5h.01',
  store:'M4 9l1-5h14l1 5M4 9v11h16V9M9 20v-6h6v6M4 9a2 2 0 004 0 2 2 0 004 0 2 2 0 004 0 2 2 0 004 0',
  users:'M16 21v-2a4 4 0 00-4-4H6a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8z',
  leaf:'M11 20C6 20 3 16 3 11c0-1 .2-2 .5-3C8 9 13 6 21 4c0 9-4 16-10 16zM3 21c2-5 5-8 9-10',
  pin:'M12 21s-7-6-7-11a7 7 0 1114 0c0 5-7 11-7 11zM12 12a2.5 2.5 0 100-5 2.5 2.5 0 000 5z',
  repeat:'M17 2l4 4-4 4M3 11V9a4 4 0 014-4h14M7 22l-4-4 4-4M21 13v2a4 4 0 01-4 4H3',
  phone:'M22 16.9v3a2 2 0 01-2.2 2 19.8 19.8 0 01-8.6-3 19.5 19.5 0 01-6-6 19.8 19.8 0 01-3-8.6A2 2 0 014.1 2h3a2 2 0 012 1.7c.1 1 .4 1.9.7 2.8a2 2 0 01-.5 2.1L8.1 9.9a16 16 0 006 6l1.3-1.3a2 2 0 012.1-.5c.9.3 1.8.6 2.8.7a2 2 0 011.8 2z',
  mail:'M4 4h16v16H4zM4 6l8 6 8-6',
  clock:'M12 22a10 10 0 100-20 10 10 0 000 20zM12 6v6l4 2',
  spark:'M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z',
  bolt:'M13 2L3 14h7l-1 8 10-12h-7l1-8z',
  meat:'M12 3a6 6 0 016 6c0 2-1 3.5-2.5 4.5L8 21l-2-2 7.5-7.5C12.5 10 11 9 9 9a6 6 0 013-6z',
  cup:'M5 8h12l-1 11a2 2 0 01-2 2H8a2 2 0 01-2-2L5 8zM5 8l-1-3h14M9 5V3h6v2',
  sound:'M11 5L6 9H2v6h4l5 4V5z|M15.5 8.5a5 5 0 010 7|M19 5a9 9 0 010 14',
  mute:'M11 5L6 9H2v6h4l5 4V5z|M22 9l-6 6|M16 9l6 6',
};
function Icon({name, style}){
  const d = ICONS[name] || '';
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"
         strokeLinecap="round" strokeLinejoin="round" style={style} aria-hidden="true">
      {d.split('|').map((p,i)=><path key={i} d={p} />)}
    </svg>
  );
}
const Arrow = () => <Icon name="arrow" />;

function Sparkle({size=26, style}){
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" className="sparkle" style={style} aria-hidden="true">
      <path d="M12 0c.6 5.5 6 10.9 11.5 12-5.5 1.1-10.9 6.5-11.5 12-.6-5.5-6-10.9-11.5-12C6 10.9 11.4 5.5 12 0z" fill="currentColor"/>
    </svg>
  );
}

function Reveal({children, as='div', className='', style={}}){
  const ref = useRef(null);
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    if(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches){ el.classList.add('in'); return; }
    const show = ()=>el.classList.add('in');
    const vh = window.innerHeight || 800;
    if(el.getBoundingClientRect().top < vh*0.95){ requestAnimationFrame(show); }
    else {
      var io = new IntersectionObserver((es,o)=>es.forEach(e=>{ if(e.isIntersecting){ show(); o.disconnect(); }}),{threshold:0.08, rootMargin:'0px 0px -6% 0px'});
      io.observe(el);
    }
    const fb = setTimeout(()=>{ if(el.getBoundingClientRect().top < (window.innerHeight||800)) el.classList.add('in','settled'); },1100);
    return ()=>{ if(typeof io!=='undefined') io.disconnect(); clearTimeout(fb); };
  },[]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${className}`} style={style}>{children}</Tag>;
}

function Slot({id, label, height, radius=20, dark=false, style={}, className=''}){
  return (
    <div className={`slot-wrap media ${className}`} style={{height, borderRadius:radius, ...style}}>
      <image-slot id={id} radius={String(radius)} placeholder={label}></image-slot>
    </div>
  );
}

function Logo({onClick, footer=false}){
  return (
    <a href="#home" className="nav__logo" onClick={onClick} aria-label="BinTat">
      <img src={footer?'assets/bintat-logo.png':'assets/bintat-logo.png'} alt="BinTat" style={footer?{height:40}:undefined}/>
    </a>
  );
}

/* Marquee — duplicated track */
function Marquee({words, rev}){
  const block = (k)=>(
    <span className="marquee__word" key={k}>
      {words.map((w,i)=>(
        <React.Fragment key={i}>
          <span>{w}</span>
          <Sparkle size={30} style={{margin:'0 6px'}}/>
        </React.Fragment>
      ))}
    </span>
  );
  return (
    <div className={'marquee'+(rev?' marquee--rev':'')}>
      <div className="marquee__track">{block('a')}{block('b')}</div>
    </div>
  );
}

function TagMarquee({tags}){
  const block = (k)=>(
    <span className="marquee__word" key={k} style={{gap:18}}>
      {tags.map((t,i)=>(<span className="tagchip" key={i}><Icon name="spark"/>{t}</span>))}
    </span>
  );
  return (
    <div className="marquee marquee--tags">
      <div className="marquee__track">{block('a')}{block('b')}</div>
    </div>
  );
}

/* Nav */
function Nav({t, lang, setLang, page, go}){
  const [open, setOpen] = useState(false);
  useEffect(()=>{ setOpen(false); },[page]);
  const items = [['home',t.nav.home],['brands',t.nav.brands],['logistics',t.nav.logistics],['about',t.nav.about],['contact',t.nav.contact]];
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  return (
    <header className="nav">
      <div className="container">
        <div className="nav__pill">
          <Logo onClick={nav('home')} />
          <nav className="nav__links">
            {items.map(([p,l])=>(<a key={p} href={'#'+p} onClick={nav(p)} className={'nav__link'+(page===p?' is-active':'')}>{l}</a>))}
          </nav>
          <div className="nav__right">
            <a href="tel:+33387751848" className="nav__tel" aria-label="Appeler BinTat — 03 87 75 18 48"><Icon name="phone" style={{width:16,height:16,flex:'none'}}/><span>03 87 75 18 48</span></a>
            <div className="lang" role="group" aria-label="Langue">
              <button className={lang==='fr'?'is-active':''} onClick={()=>setLang('fr')}>FR</button>
              <button className={lang==='en'?'is-active':''} onClick={()=>setLang('en')}>EN</button>
            </div>
            <a href="#contact" onClick={nav('contact')} className="btn btn--lime btn--sm">{t.nav.cta}</a>
            <button className="nav__burger" aria-label="Menu" onClick={()=>setOpen(o=>!o)}><span></span></button>
          </div>
        </div>
      </div>
      <div className={'drawer'+(open?' is-open':'')}>
        {items.map(([p,l])=>(<a key={p} href={'#'+p} onClick={nav(p)}>{l}</a>))}
        <a href="tel:+33387751848" className="drawer__tel"><Icon name="phone" style={{width:17,height:17}}/> 03 87 75 18 48</a>
        <a href="#contact" onClick={nav('contact')} className="btn btn--lime">{t.nav.cta}</a>
      </div>
    </header>
  );
}

/* Footer (lime card) */
function Footer({t, go}){
  const c = t.footer, ct = t.contact;
  const [sub, setSub] = useState(false);
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__card">
          <div className="footer__big" aria-hidden="true">BinTat</div>
          <div className="footer__grid">
            <div>
              <div className="footer__brand">BinTat</div>
              <p style={{maxWidth:'30ch',color:'rgba(255,255,255,.88)',fontWeight:500}}>{c.tagline}</p>
            </div>
            <div>
              <h4>{c.colNav}</h4>
              <a href="#home" onClick={nav('home')}>{t.nav.home}</a>
              <a href="#brands" onClick={nav('brands')}>{t.nav.brands}</a>
              <a href="#logistics" onClick={nav('logistics')}>{t.nav.logistics}</a>
              <a href="#about" onClick={nav('about')}>{t.nav.about}</a>
              <a href="#contact" onClick={nav('contact')}>{t.nav.contact}</a>
            </div>
            <div>
              <h4>{c.colOffer}</h4>
              {c.offer.map((o,i)=><a key={i} href="#home" onClick={nav('home')}>{o}</a>)}
            </div>
            <div>
              <h4>{c.colContact}</h4>
              <a href={'tel:'+ct.phone.replace(/\s/g,'')}>{ct.phone}</a>
              <a href={'mailto:'+ct.emailVal}>{ct.emailVal}</a>
              <a href="#contact" onClick={nav('contact')} style={{opacity:.85,marginBottom:14}}>{ct.address}</a>
              <form onSubmit={(e)=>{
                e.preventDefault();
                const em = e.target.querySelector('input') ? e.target.querySelector('input').value : '';
                setSub(true);
                fetch('https://formsubmit.co/ajax/sarl.omyfood@gmail.com',{
                  method:'POST',headers:{'Content-Type':'application/json','Accept':'application/json'},
                  body:JSON.stringify({_subject:'[Site BinTat] Inscription newsletter',_template:'table',_captcha:'false','E-mail':em}),
                }).then(r=>r.json()).then(j=>{
                  if(j && (j.success===false||j.success==='false')){
                    location.href='mailto:sarl.omyfood@gmail.com?subject='+encodeURIComponent('[Site BinTat] Inscription newsletter')+'&body='+encodeURIComponent('E-mail : '+em);
                  }
                }).catch(()=>{});
              }} className="inline-input" style={{marginTop:4}}>
                {sub ? (
                  <span style={{display:'inline-flex',alignItems:'center',gap:8,fontWeight:700,padding:'.5em 0',color:'#fff'}}><Icon name="check" style={{width:18,height:18}}/>{lang_ok(t)}</span>
                ) : (<React.Fragment>
                  <input type="email" required placeholder={c.newsPlaceholder} aria-label={c.newsTitle}/>
                  <button type="submit" className="btn btn--icon" style={{background:'#fff',color:'var(--lime-deep)'}}><Icon name="arrow" style={{width:18,height:18}}/></button>
                </React.Fragment>)}
              </form>
            </div>
          </div>
          <div className="footer__bottom">
            <span>© {new Date().getFullYear()} BinTat — Distribution de snacking. {c.rights}</span>
            <span>{c.legal}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}
function lang_ok(t){ return t.lang==='en' ? 'Subscribed!' : 'Inscrit !'; }

/* 3D tilt card — pointer-tracked rotation + lime glare */
function Tilt({children, max=9, radius=20, className='', style={}}){
  const ref = useRef(null);
  const onMove = (e)=>{
    if(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const el = ref.current; if(!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left)/r.width - .5;
    const py = (e.clientY - r.top)/r.height - .5;
    el.style.setProperty('--rx', (-py*max).toFixed(2)+'deg');
    el.style.setProperty('--ry', (px*max).toFixed(2)+'deg');
    el.style.setProperty('--gx', (px*100+50).toFixed(1)+'%');
    el.style.setProperty('--gy', (py*100+50).toFixed(1)+'%');
  };
  const onLeave = ()=>{
    const el = ref.current; if(!el) return;
    el.style.setProperty('--rx','0deg');
    el.style.setProperty('--ry','0deg');
  };
  return (
    <div ref={ref} className={'tilt '+className} style={{'--tilt-r':radius+'px', ...style}}
         onMouseMove={onMove} onMouseLeave={onLeave}>
      <div className="tilt__inner">{children}</div>
      <div className="tilt__glare"></div>
    </div>
  );
}

/* animated count-up number */
function CountUp({value, lang}){
  const ref = useRef(null);
  const target = parseInt(String(value).replace(/[^\d]/g,''),10) || 0;
  useEffect(()=>{
    const el = ref.current; if(!el) return;
    const fmt = (n)=> n.toLocaleString(lang==='en' ? 'en-US' : 'fr-FR');
    let started = false;
    const run = ()=>{
      if(started) return; started = true;
      if(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches){ el.textContent = fmt(target); return; }
      const t0 = performance.now(), dur = 1300;
      const step = (now)=>{
        const p = Math.min(1,(now-t0)/dur);
        const e2 = 1-Math.pow(1-p,3);
        el.textContent = fmt(Math.round(target*e2));
        if(p<1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    };
    const io = new IntersectionObserver((es)=>{ es.forEach(en=>{ if(en.isIntersecting){ run(); io.disconnect(); } }); },{threshold:.4});
    io.observe(el);
    return ()=>{ io.disconnect(); };
  },[target,lang]);
  return <span ref={ref}>0</span>;
}

/* ambient lime glow following the cursor */
function CursorGlow(){
  useEffect(()=>{
    const el = document.createElement('div');
    el.className = 'cursor-glow';
    document.body.appendChild(el);
    const mv = (e)=>{ el.style.setProperty('--cx', e.clientX+'px'); el.style.setProperty('--cy', e.clientY+'px'); };
    addEventListener('pointermove', mv, {passive:true});
    return ()=>{ removeEventListener('pointermove', mv); el.remove(); };
  },[]);
  return null;
}

/* Partner logos data + scrolling strip */
const PARTNERS = [
  {name:'Düzgün Food GmbH', src:'assets/partner-duzgun.png'},
  {name:'Dost Food Production', src:'assets/partner-dostfood.webp'},
  {name:'Birtat Döner', src:'assets/partner-birtat.png', dark:true},
];
function PartnerMarquee(){
  const block = (k, hide)=>(
    <span className="marquee__word pmq__set" key={k} aria-hidden={hide?'true':undefined}>
      {PARTNERS.map((p,i)=>(
        <span className={'pmq__chip'+(p.dark?' pmq__chip--dark':'')} key={i} title={p.name}>
          {p.src
            ? <img src={p.src} alt={p.name} loading="eager"/>
            : <span className="pmq__name">{p.name}</span>}
        </span>
      ))}
    </span>
  );
  return (
    <div className="marquee pmq">
      <div className="marquee__track">{block('a')}{block('b',true)}</div>
    </div>
  );
}

Object.assign(window, { Icon, Arrow, Sparkle, Reveal, Slot, Logo, Nav, Footer, Marquee, TagMarquee, Tilt, CountUp, CursorGlow, PartnerMarquee, PARTNERS });