/* BinTat modern — Home */
const { Icon, Arrow, Sparkle, Reveal, Slot, Marquee, TagMarquee, PartnerMarquee, Tilt, CountUp, StoryRail, WordSplit, ScrollCue } = window;
const { useState:useSt } = React;

const CAT_ICONS = ['meat','box','tag','snow','cup','shield','leaf','store'];
const WHY_ICONS = ['box','shield','truck','tag','store','users'];

/* interactive accordion — real depot photos per category */
const ACC_IDX = [0,2,3,4,5,7];
const ACC_PHOTOS = ['assets/froid-broches.jpg','assets/sauces.jpg','assets/surgeles.jpg','assets/depot-boissons.jpg','assets/chambre-froide.jpg','assets/emballages.jpg'];
function ServicesAccordion({t}){
  const h = t.home;
  const [open, setOpen] = useSt(0);
  const items = ACC_IDX.map(ix=>h.cats[ix]);
  const active = items[open] || items[0];
  const imgRef = React.useRef(null);
  React.useEffect(()=>{
    const el = imgRef.current;
    if(el && el.animate && !(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches)){
      el.animate([
        {transform:'perspective(900px) rotateY(-10deg) scale(.97)', opacity:.55},
        {transform:'none', opacity:1}
      ],{duration:480, easing:'cubic-bezier(.16,1,.3,1)'});
    }
  },[open]);
  return (
    <div className="svc-grid">
      <div className="acc">
        {items.map((c,i)=>(
          <div key={i} className={'acc__item'+(open===i?' is-open':'')}>
            <button className="acc__head" onClick={()=>setOpen(i)} aria-expanded={open===i}>
              <span className="acc__n">{String(i+1).padStart(2,'0')}</span>
              <span className="acc__t">{c.t}</span>
              <span className="acc__chev"><Icon name="chev"/></span>
            </button>
            <div className="acc__body"><div className="acc__body-in">{c.d}</div></div>
          </div>
        ))}
      </div>
      <div className="svc-side">
        <div className="svc-img" ref={imgRef}>
          <img src={ACC_PHOTOS[open]} data-plx="0.07" alt={active.t} loading="lazy" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',display:'block',borderRadius:20}}/>
          <span className="imgcard" style={{position:'absolute',left:0,bottom:18,background:'var(--lime)',color:'var(--lime-ink)',fontWeight:700,fontSize:'.82rem',padding:'.6em 1em',borderRadius:'0 999px 999px 0'}}>{active.t}</span>
        </div>
        <div className="svc-cards">
          <div className="minicard minicard--dark">
            <h4>{h.seeTitle}</h4>
            <p>{h.seeSub}</p>
            <span className="arrow-btn" style={{marginTop:14}}><Icon name="arrowTR"/></span>
          </div>
          <div className="minicard minicard--lime">
            <h4>{h.expertTitle}</h4>
            <span className="arrow-btn"><Icon name="arrowTR"/></span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* testimonial carousel */
function Testimonials({t}){
  const h = t.home;
  const list = h.testimonials;
  const [i, setI] = useSt(0);
  const go = (d)=> setI((i+d+list.length)%list.length);
  const cur = list[i];
  return (
    <div className="testi">
      <div className="glow-r" style={{right:'-120px',top:'-120px'}}></div>
      <div style={{position:'relative'}}>
        <div className="testi__mark">“</div>
        <p className="testi__q">{cur.q}</p>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',flexWrap:'wrap',gap:20}}>
          <div className="testi__by">
            <div className="testi__av">{cur.n.charAt(0)}</div>
            <div>
              <div className="testi__name">{cur.n}</div>
              <div className="testi__role">{cur.r}</div>
            </div>
          </div>
          <div style={{display:'flex',alignItems:'center',gap:18}}>
            <div className="dots">{list.map((_,k)=><span key={k} className={'dot'+(k===i?' is-active':'')} onClick={()=>setI(k)}></span>)}</div>
            <div className="testi__nav">
              <button className="arrow-btn" onClick={()=>go(-1)} aria-label="Précédent"><Icon name="back"/></button>
              <button className="arrow-btn" onClick={()=>go(1)} aria-label="Suivant"><Icon name="arrow"/></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* full-bleed image banner hero */
function VideoHero({t, go, navBar}){
  const secRef = React.useRef(null);
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  const onMove = (e)=>{
    const el = secRef.current;
    if(!el || (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches)) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', ((e.clientX-r.left)/r.width-.5).toFixed(3));
    el.style.setProperty('--my', ((e.clientY-r.top)/r.height-.5).toFixed(3));
  };
  const h = t.home;
  return (
    <section className="vhero" data-screen-label="Hero" ref={secRef} onMouseMove={onMove}>
      <img className="vhero__bg" data-hero-bg src="assets/hero-web.jpg" fetchpriority="high" alt="L'équipe BinTat devant sa flotte de livraison" />
      <div className="vhero__scrim"></div>
      <div className="container vhero__in">
        {navBar}
        <Reveal>
          <span className="eyebrow" style={{marginBottom:20}}>{h.heroEyebrow}</span>
          <h1 className="vhero__title">
            <WordSplit text={h.heroTitle[0]} />
            <br/>
            <WordSplit text={h.heroTitle[1].replace(/\.$/,'')} base={220} />
          </h1>
          <p className="vhero__sub">{h.heroSub}</p>
          <div className="vhero__cta">
            <a href="#contact" onClick={nav('contact')} className="btn btn--lime">{t.common.becomeClient}<Arrow/></a>
            <a href="#brands" onClick={nav('brands')} className="btn btn--ghost">{t.common.seeProducts}</a>
          </div>
        </Reveal>
        <div className="vhero__partners">
          <span className="vhero__partners-lb">{t.lang==='en'?'They trust us — our partners':'Ils nous font confiance — nos partenaires'}</span>
          <PartnerMarquee />
        </div>
      </div>
      <ScrollCue label={t.lang==='en'?'Scroll':'Découvrir'} />
    </section>
  );
}

function Home({t, go, navBar}){
  const h = t.home;
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  const chapters = [
    {id:'depot',     label:t.lang==='en'?'The depot':'Le dépôt'},
    {id:'offre',     label:t.lang==='en'?'The range':"L'offre"},
    {id:'confiance', label:t.lang==='en'?'Why BinTat':'Pourquoi BinTat'},
    {id:'avis',      label:t.lang==='en'?'They trust us':'Ils nous font confiance'},
  ];
  return (
    <main className="fade-page">
      <StoryRail chapters={chapters} />

      {/* HERO — video banner */}
      <VideoHero t={t} go={go} navBar={navBar} />

      {/* STATS */}
      <section className="section--tight">
        <div className="container">
          <Reveal>
            <div className="stats">
              {h.stats.map((s,i)=>{
                const m = s.n.match(/^([\d.,\s]+)(.*)$/);
                return (
                  <div className="cell" key={i}>
                    <div className="num">{m?<React.Fragment><CountUp value={m[1].trim()} lang={t.lang}/><b>{m[2]}</b></React.Fragment>:s.n}</div>
                    <div className="lbl">{s.l}</div>
                  </div>
                );
              })}
            </div>
          </Reveal>
        </div>
      </section>

      {/* TWO — turning ideas */}
      <section className="section" id="ch-depot">
        <div className="container">
          <div className="shead">
            <Reveal className="shead__t"><h2 className="h2"><WordSplit text={h.twoTitle}/></h2></Reveal>
            <Reveal><p className="lead" style={{maxWidth:'42ch'}}>{h.twoSub}</p></Reveal>
          </div>
          <div className="grid g-2img">
            <Reveal>
              <Tilt max={7}>
              <div className="imgcard" style={{height:'min(46vw,440px)'}}>
                <img src="assets/depot-allee.jpg" data-plx="0.10" alt="Allée du dépôt BinTat avec transpalettes" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                <span className="label">{h.twoTag}</span>
              </div>
              </Tilt>
            </Reveal>
            <Reveal style={{transitionDelay:'80ms'}}>
              <Tilt max={7}>
              <div className="imgcard" style={{height:'min(46vw,440px)'}}>
                <img src="assets/bintat-mur.jpg" data-plx="0.15" alt="BinTat — votre distributeur snacking" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
              </div>
              </Tilt>
            </Reveal>
          </div>
        </div>
      </section>

      {/* SERVICES accordion */}
      <section className="section glowtop" id="ch-offre">
        <div className="container" style={{position:'relative',zIndex:1}}>
          <Reveal>
            <div className="with-tab" style={{marginBottom:34}}>
              <span className="vtab">{t.lang==='en'?'What we offer':'Notre offre'}</span>
              <div>
                <h2 className="h2">{t.lang==='en'?'Everything ':'Tout '}<span className="mark">{t.lang==='en'?'in one place':'au même endroit'}</span></h2>
                <p className="lead" style={{marginTop:14,maxWidth:'52ch'}}>{h.catsSub}</p>
              </div>
            </div>
          </Reveal>
          <Reveal><ServicesAccordion t={t}/></Reveal>
        </div>
      </section>

      {/* MARQUEE */}
      <Marquee words={h.marquee} />

      {/* WHY — cards grid */}
      <section className="section" id="ch-confiance">
        <div className="container">
          <div className="shead">
            <Reveal className="shead__t">
              <span className="eyebrow" style={{marginBottom:14}}>{h.whyEyebrow}</span>
              <h2 className="h2"><WordSplit text={h.whyTitle}/></h2>
            </Reveal>
            <Reveal><a href="#about" onClick={nav('about')} className="btn btn--ghost">{t.common.learnMore}<Arrow/></a></Reveal>
          </div>
          <div className="grid cols-3">
            {h.why.map((w,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%3)*70}ms`}}>
                <Tilt max={8}>
                <div className="tcard" style={{height:'100%'}}>
                  <div className="tcard__top">
                    <div className="tcard__av"><Icon name={WHY_ICONS[i]}/></div>
                    <h4>{w.t}</h4>
                  </div>
                  <p>{w.d}</p>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section--tight" id="ch-avis">
        <div className="container">
          <div className="shead">
            <Reveal className="shead__t">
              <span className="eyebrow" style={{marginBottom:14}}>{t.lang==='en'?'Reviews':'Avis'}</span>
              <h2 className="h2"><WordSplit text={h.testiTitle}/></h2>
            </Reveal>
            <Reveal><p className="lead" style={{maxWidth:'36ch'}}>{h.testiSub}</p></Reveal>
          </div>
          <Reveal><Tilt max={3} radius={30}><Testimonials t={t}/></Tilt></Reveal>
        </div>
      </section>

      {/* TAG MARQUEE */}
      <TagMarquee tags={h.promiseTags} />

      {/* CTA */}
      <CtaBand t={t} go={go} title={h.ctaTitle} sub={h.ctaSub} />
    </main>
  );
}

function CtaBand({t, go, title, sub}){
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div className="testi" style={{textAlign:'center'}}>
            <div className="glow-r" style={{left:'50%',top:'-160px',transform:'translateX(-50%)'}}></div>
            <div style={{position:'relative',maxWidth:680,margin:'0 auto'}}>
              <Sparkle size={34} style={{marginBottom:14}}/>
              <h2 className="h2"><WordSplit text={title}/></h2>
              <p className="lead" style={{margin:'16px auto 30px',maxWidth:'46ch'}}>{sub}</p>
              <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
                <a href="#contact" onClick={nav('contact')} className="btn btn--lime">{t.common.becomeClient}<Arrow/></a>
                <a href="#contact" onClick={nav('contact')} className="btn btn--ghost">{t.common.contactUs}</a>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Home, CtaBand });