/* BinTat modern — Brands, Logistics, About, Contact */
const { Icon, Arrow, Sparkle, Reveal, Slot, CtaBand, TagMarquee, Tilt, WordSplit } = window;
const { useState:useStR } = React;

function PageHero({eyebrow, title, sub, mark}){
  return (
    <section className="phero glowtop">
      <div className="container" style={{position:'relative',zIndex:1}}>
        <Reveal><span className="eyebrow">{eyebrow}</span></Reveal>
        <Reveal as="div"><h1 className="h1" style={{margin:'16px 0 0',maxWidth:'20ch'}}><WordSplit text={title}/></h1></Reveal>
        <Reveal><p className="lead maxch" style={{marginTop:18}}>{sub}</p></Reveal>
      </div>
    </section>
  );
}

/* ============ BRANDS ============ */
function Brands({t, go}){
  const b = t.brands;
  const nav = (p)=>(e)=>{ e.preventDefault(); go(p); };
  return (
    <main className="fade-page">
      <PageHero eyebrow={b.eyebrow} title={b.title} sub={b.sub} />

      <section className="section--tight">
        <div className="container">
          <Reveal><h2 className="h3" style={{marginBottom:24}}>{b.groupsTitle}</h2></Reveal>
          <div className="grid cols-2">
            {b.groups.map((g,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%2)*80}ms`}}>
                <Tilt max={6}>
                <div className="card card--hover brandrow">
                  <div className="media" style={{width:130,flex:'none'}}>
                    <img src={['assets/froid-broches.jpg','assets/sauces.jpg','assets/viandes-surgelees.jpg','assets/depot-stock.jpg'][i]} alt={g.t} loading="lazy" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}}/>
                  </div>
                  <div className="card__body" style={{display:'flex',flexDirection:'column',justifyContent:'center'}}>
                    <span className="eyebrow" style={{marginBottom:10}}>{g.n}</span>
                    <h3 className="h3" style={{fontSize:'1.25rem',marginBottom:6}}>{g.t}</h3>
                    <p className="muted" style={{fontSize:'.94rem',margin:0}}>{g.d}</p>
                  </div>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="shead">
            <Reveal className="shead__t"><h2 className="h2">{b.wallTitle}</h2></Reveal>
            <Reveal><p className="lead" style={{maxWidth:'34ch'}}>{b.wallSub}</p></Reveal>
          </div>
          <div className="grid" style={{gridTemplateColumns:'repeat(auto-fill,minmax(190px,1fr))',gap:16}}>
            {window.PARTNERS.map((p,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%5)*50}ms`}}>
                <Tilt max={12}>
                <div style={{borderRadius:'var(--r-m)',border:'1px solid var(--line)',background:'#fff',overflow:'hidden',boxShadow:'0 18px 38px -30px rgba(31,42,12,.3)'}}>
                  <div style={{height:118,display:'flex',alignItems:'center',justifyContent:'center',padding:'0 18px',position:'relative',background:p.dark?'#1c2410':'#fff'}}>
                    {p.src
                      ? <img src={p.src} alt={p.name} style={{maxHeight:80,maxWidth:'100%',objectFit:'contain'}}/>
                      : <span className="pmq__name" style={{fontSize:'1.6rem'}}>{p.name}</span>}
                  </div>
                  <div style={{padding:'12px 16px',borderTop:'1px solid var(--line)',textAlign:'center',fontWeight:700,fontSize:'.88rem',color:'var(--text-2)'}}>{p.name}</div>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section--tight">
        <div className="container">
          <div className="split">
            <Reveal>
              <div className="imgcard" style={{height:'min(54vw,400px)'}}>
                <img src="assets/epicerie.jpg" data-plx="0.10" alt="Allée épicerie du dépôt BinTat" loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                <span className="label">{t.lang==='en'?'1,200+ references in stock':'1 200+ références en stock'}</span>
              </div>
            </Reveal>
            <Reveal>
              <div>
                <span className="eyebrow">{b.partnerEyebrow}</span>
                <h2 className="h2" style={{margin:'14px 0 16px'}}>{b.partnerTitle}</h2>
                <p className="lead maxch" style={{marginBottom:26}}>{b.partnerSub}</p>
                <a href="#contact" onClick={nav('contact')} className="btn btn--lime">{t.common.contactUs}<Arrow/></a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ LOGISTICS ============ */
const FEAT_ICONS = ['truck','snow','shield','store'];
function Logistics({t, go}){
  const l = t.logistics;
  return (
    <main className="fade-page">
      <PageHero eyebrow={l.eyebrow} title={l.title} sub={l.sub} />

      <section className="section--tight">
        <div className="container">
          <div className="grid g-2img" style={{gap:16}}>
            <Reveal>
              <Tilt max={6}>
              <div className="imgcard" style={{height:'min(42vw,400px)'}}>
                <img src="assets/flotte.jpg" alt="Flotte BinTat" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                <span className="label">Notre flotte · Grand Est · Luxembourg</span>
              </div>
              </Tilt>
            </Reveal>
            <Reveal style={{transitionDelay:'80ms'}}>
              <Tilt max={6}>
              <div className="imgcard" style={{height:'min(42vw,400px)'}}>
                <img src="assets/camion.jpg" alt="Camion frigorifique BinTat" style={{width:'100%',height:'100%',objectFit:'cover',display:'block',objectPosition:'center'}}/>
                <span className="label">Livraison sous froid</span>
              </div>
              </Tilt>
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section--tight">
        <div className="container">
          <Reveal><span className="eyebrow">{l.featEyebrow}</span></Reveal>
          <div className="grid cols-4" style={{marginTop:28}}>
            {l.feats.map((f,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%4)*70}ms`}}>
                <div className="feature">
                  <div className="fico"><Icon name={FEAT_ICONS[i]}/></div>
                  <h3 className="h3" style={{fontSize:'1.18rem',marginBottom:8}}>{f.t}</h3>
                  <p className="muted" style={{fontSize:'.95rem'}}>{f.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
          <div className="grid cols-3" style={{marginTop:'clamp(30px,4vw,48px)'}}>
            {[
              {src:'assets/chambre-froide.jpg', fr:'Chambres froides positives & négatives', en:'Chilled & frozen cold rooms'},
              {src:'assets/froid-broches.jpg', fr:'Broches kebab stockées au froid', en:'Kebab spits stored cold'},
              {src:'assets/surgeles.jpg', fr:'Stock surgelés permanent', en:'Permanent frozen stock'},
            ].map((g,i)=>(
              <Reveal key={i} style={{transitionDelay:`${i*70}ms`}}>
                <Tilt max={8}>
                <div className="imgcard" style={{height:'min(52vw,300px)'}}>
                  <img src={g.src} data-plx="0.10" alt={t.lang==='en'?g.en:g.fr} loading="lazy" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                  <span className="label" style={{bottom:16}}>{t.lang==='en'?g.en:g.fr}</span>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="split" style={{alignItems:'flex-start',gap:'clamp(28px,4vw,56px)'}}>
            <Reveal>
              <div>
                <h2 className="h2" style={{marginBottom:10}}>{l.zoneTitle}</h2>
                <p className="muted" style={{marginBottom:22}}>{l.zoneSub}</p>
                <div className="card">
                  <table className="tbl">
                    <tbody>
                      {l.zones.map((z,i)=>(
                        <tr key={i}>
                          <td style={{fontWeight:600}}>{z.z}</td>
                          <td style={{textAlign:'right'}}><Icon name="check" style={{width:18,height:18,color:'var(--lime-2)',display:'inline-block'}}/></td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
              </div>
            </Reveal>
            <Reveal>
              <div>
                <h2 className="h2" style={{marginBottom:10}}>{l.depotTitle}</h2>
                <p className="muted" style={{marginBottom:22}}>{l.depotSub}</p>
                <div className="card">
                  <table className="tbl">
                    <tbody>
                      {l.hours.map((row,i)=>(
                        <tr key={i}>
                          <td style={{fontWeight:600}}>{row.d}</td>
                          <td style={{textAlign:'right',color:row.h.match(/Ferm|Closed/)?'var(--red-2)':'var(--text)'}}>{row.h}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <div className="info" style={{marginTop:16}}>
                  <div className="ico"><Icon name="pin"/></div>
                  <div><h4>{t.contact.infoTitle}</h4><p>{t.contact.address}</p></div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

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

/* ============ ABOUT ============ */
const VAL_ICONS = ['leaf','pin','shield','repeat'];
function About({t, go}){
  const a = t.about;
  return (
    <main className="fade-page">
      <PageHero eyebrow={a.eyebrow} title={a.title} sub={a.sub} />

      <section className="section--tight">
        <div className="container">
          <div className="split">
            <Reveal>
              <div className="imgcard" style={{height:'min(54vw,440px)'}}>
                <img src="assets/depot-3.jpg" alt="Entrepôt BinTat" style={{width:'100%',height:'100%',objectFit:'cover',display:'block'}}/>
                <span className="label">Ogy-Montoy-Flanville</span>
              </div>
            </Reveal>
            <Reveal>
              <div>
                <h2 className="h2" style={{marginBottom:18}}>{a.storyTitle}</h2>
                {a.story.map((p,i)=><p key={i} className="body-lg" style={{marginBottom:'1em'}}>{p}</p>)}
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section className="section--tight" style={{background:'var(--bg-2)'}}>
        <div className="container">
          <Reveal>
            <h2 className="h2" style={{marginBottom:32}}>{t.lang==='en'?'Our team':'Notre équipe'}</h2>
          </Reveal>
          {/* Founder spotlight */}
          <Reveal>
            <div className="founder-card">
              <img src="assets/fondateur.jpg" alt="Ozgur Keles" style={{width:'100%',height:'clamp(260px,28vw,340px)',objectFit:'cover',objectPosition:'center',display:'block'}}/>
              <div style={{padding:'clamp(22px,3vw,40px)',display:'flex',flexDirection:'column',justifyContent:'center'}}>
                <span className="eyebrow" style={{marginBottom:12}}>{t.lang==='en'?'Founder & CEO':'Fondateur & Dirigeant'}</span>
                <h3 style={{fontSize:'clamp(1.5rem,2.8vw,2.2rem)',fontFamily:'var(--font-head)',fontWeight:800,letterSpacing:'-.025em',margin:'0 0 14px',color:'var(--text)'}}>Ozgur Keles</h3>
                <p className="lead" style={{maxWidth:'44ch'}}>{t.lang==='en'?'Since 2010, Ozgur Keles has supported food-service professionals with an unwavering commitment to quality and service. His deep knowledge of the sector has made BinTat the trusted partner of snack bars and kebab restaurants across the Grand Est.':'Depuis 2010, Ozgur Keles accompagne les professionnels de la restauration avec une exigence constante de qualité et de service. Sa connaissance approfondie du secteur a fait de BinTat le partenaire de confiance des snacks et kebabs du Grand Est.'}</p>
              </div>
            </div>
          </Reveal>
          {/* Team grid */}
          <div className="grid cols-3">
            {[
              {src:'assets/equipe-1.jpg?v=2',role:t.lang==='en'?'Reception & administration':'Accueil & administration'},
              {src:'assets/equipe-2.jpg',role:t.lang==='en'?'Accounting':'Comptabilité'},
              {src:'assets/equipe-4.jpg',role:t.lang==='en'?'Sales & logistics':'Commerce & logistique'},
            ].map((m,i)=>(
              <Reveal key={i} style={{transitionDelay:`${i*70}ms`}}>
                <Tilt max={8}>
                <div style={{borderRadius:'var(--r-m)',overflow:'hidden',border:'1px solid var(--line)',background:'#fff',boxShadow:'0 22px 44px -34px rgba(31,42,12,.3)'}}>
                  <img src={m.src} alt={m.role} style={{width:'100%',aspectRatio:'4/5',objectFit:'cover',objectPosition:'top center',display:'block'}}/>
                  <div style={{padding:'14px 18px',background:'#fff'}}>
                    <div style={{color:'var(--lime)',fontWeight:700,fontSize:'.78rem',letterSpacing:'.1em',textTransform:'uppercase'}}>{m.role}</div>
                  </div>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container center">
          <Reveal>
            <div style={{maxWidth:880,margin:'0 auto'}}>
              <Sparkle size={36} style={{marginBottom:18}}/>
              <p className="testi__q" style={{fontSize:'clamp(1.5rem,3.2vw,2.5rem)'}}>{a.quote}</p>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section--tight">
        <div className="container">
          <div className="shead">
            <Reveal className="shead__t">
              <span className="eyebrow" style={{marginBottom:14}}>{a.valuesEyebrow}</span>
              <h2 className="h2">{a.valuesTitle}</h2>
            </Reveal>
          </div>
          <div className="grid cols-4">
            {a.values.map((v,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%4)*70}ms`}}>
                <Tilt max={8}>
                <div className="tcard" style={{height:'100%'}}>
                  <div className="tcard__av" style={{marginBottom:16}}><Icon name={VAL_ICONS[i]}/></div>
                  <h4 style={{fontSize:'1.2rem',marginBottom:8}}>{v.t}</h4>
                  <p>{v.d}</p>
                </div>
                </Tilt>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <Reveal><h2 className="h2" style={{marginBottom:40}}>{a.storyTitle}</h2></Reveal>
          <div className="tl" style={{maxWidth:820}}>
            {a.tl.map((it,i)=>(
              <Reveal key={i} style={{transitionDelay:`${(i%2)*60}ms`}}>
                <div className="tl__item">
                  <div className="tl__year">{it.y}</div>
                  <div className="tl__c"><h3>{it.t}</h3><p>{it.d}</p></div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

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

/* ============ CONTACT ============ */
function Contact({t}){
  const c = t.contact;
  const [state, setState] = useStR('idle'); // idle | sending | sent | fallback
  const COMPANY_EMAIL = 'sarl.omyfood@gmail.com';
  const submit = async (e)=>{
    e.preventDefault();
    const f = e.target;
    const data = {
      name: f.elements['name'].value,
      company: f.elements['company'].value,
      email: f.elements['email'].value,
      phone: f.elements['phone'].value,
      type: f.elements['type'].value,
      message: f.elements['message'].value,
    };
    setState('sending');
    try{
      const res = await fetch('https://formsubmit.co/ajax/'+COMPANY_EMAIL, {
        method:'POST',
        headers:{'Content-Type':'application/json','Accept':'application/json'},
        body: JSON.stringify({
          _subject:'[Site BinTat] Demande de contact — '+data.company,
          _template:'table',
          _captcha:'false',
          'Nom':data.name,'Établissement':data.company,'E-mail':data.email,
          'Téléphone':data.phone,"Type d'établissement":data.type,'Message':data.message,
        }),
      });
      if(!res.ok) throw new Error('formsubmit '+res.status);
      const j = await res.json().catch(()=>({}));
      if(j && (j.success === false || j.success === 'false')) throw new Error(j.message || 'formsubmit refused');
      setState('sent');
    }catch(err){
      // fallback : ouvre la messagerie avec le message pré-rempli
      const body = encodeURIComponent(
        'Nom : '+data.name+'\nÉtablissement : '+data.company+'\nE-mail : '+data.email+
        '\nTéléphone : '+data.phone+'\nType : '+data.type+'\n\n'+data.message);
      location.href = 'mailto:'+COMPANY_EMAIL+'?subject='+encodeURIComponent('[Site BinTat] Demande de contact — '+data.company)+'&body='+body;
      setState('fallback');
    }
  };
  return (
    <main className="fade-page">
      <PageHero eyebrow={c.eyebrow} title={c.title} sub={c.sub} />
      <section className="section--tight">
        <div className="container">
          <div className="split" style={{alignItems:'flex-start',gap:'clamp(28px,4vw,64px)'}}>
            <Reveal>
              <div className="card" style={{padding:'clamp(24px,3vw,38px)'}}>
                <h2 className="h3" style={{marginBottom:22}}>{c.formTitle}</h2>
                {state==='sent' ? (
                  <div className="form-ok"><Icon name="check" style={{width:22,height:22,flex:'none',marginTop:2}}/><div><strong>{c.okTitle}.</strong><br/>{c.okMsg}</div></div>
                ) : state==='fallback' ? (
                  <div className="form-ok"><Icon name="mail" style={{width:22,height:22,flex:'none',marginTop:2}}/><div><strong>{c.errTitle}.</strong><br/>{c.errMsg}</div></div>
                ) : (
                  <form className="form" onSubmit={submit}>
                    <div className="form-row">
                      <div className="field"><label>{c.fields.name}</label><input required type="text" name="name" autoComplete="name"/></div>
                      <div className="field"><label>{c.fields.company}</label><input required type="text" name="company" autoComplete="organization"/></div>
                    </div>
                    <div className="form-row">
                      <div className="field"><label>{c.fields.email}</label><input required type="email" name="email" autoComplete="email"/></div>
                      <div className="field"><label>{c.fields.phone}</label><input type="tel" name="phone" autoComplete="tel"/></div>
                    </div>
                    <div className="field"><label>{c.fields.type}</label>
                      <select defaultValue="" name="type" required><option value="" disabled>—</option>{c.types.map((ty,i)=><option key={i}>{ty}</option>)}</select>
                    </div>
                    <div className="field"><label>{c.fields.message}</label><textarea name="message"></textarea></div>
                    <button type="submit" disabled={state==='sending'} className="btn btn--lime" style={{justifyContent:'center',opacity:state==='sending'?.65:1}}>
                      {state==='sending' ? c.sending : c.send}<Arrow/>
                    </button>
                  </form>
                )}
              </div>
            </Reveal>
            <Reveal>
              <div style={{display:'flex',flexDirection:'column',gap:14}}>
                <div className="info"><div className="ico"><Icon name="pin"/></div><div><h4>{c.infoTitle}</h4><p>{c.address}</p></div></div>
                <div className="info"><div className="ico"><Icon name="phone"/></div><div><h4>{t.lang==='en'?'Phone':'Téléphone'}</h4><a href={'tel:'+c.phone.replace(/\s/g,'')}>{c.phone}</a></div></div>
                <div className="info"><div className="ico"><Icon name="mail"/></div><div><h4>E-mail</h4><a href={'mailto:'+c.emailVal}>{c.emailVal}</a></div></div>
                <div className="info"><div className="ico"><Icon name="clock"/></div><div><h4>{c.hoursLabel}</h4><p>{c.hours}</p></div></div>
                <div className="imgcard">
                  <img src="assets/accueil.jpg" alt="L'accueil BinTat à Ogy-Montoy-Flanville" loading="lazy" style={{width:'100%',height:220,objectFit:'cover',display:'block'}}/>
                  <span className="label" style={{bottom:16}}>{t.lang==='en'?'Our reception — come meet us':'Notre accueil — venez nous rencontrer'}</span>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { Brands, Logistics, About, Contact });
