/* global React, I */
// ===== Trust ticker =====
function Ticker({ t }) {
  const items = [...t.ticker, ...t.ticker];
  return (
    <div className="tickbar">
      <div className="tick">{items.map((x,i)=><span key={i}>{x}</span>)}</div>
    </div>
  );
}

// ===== Qué hacemos / Servicios =====
const SVC_IC = ["box","truck","chart","shield"];
function Services({ t, go }) {
  const s = t.services;
  return (
    <section className="section" id="servicios">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="eyebrow">{s.eyebrow}</span>
          <h2 className="h2">{s.t1}<br/><span className="grad-text">{s.emph}</span></h2>
          <p className="lead">{s.lead}</p>
        </div>
        <div className="svc-grid">
          <div className="card svc-feature reveal">
            <div>
              <div className="ico"><I.cash /></div>
              <h3 style={{fontSize:26}}>{s.feature.t}</h3>
              <p>{s.feature.d}</p>
              <ul>
                {s.feature.list.map((li,i)=>(<li key={i}><I.check /> {li}</li>))}
              </ul>
            </div>
            <div className="feat-bottom">
              <a className="btn btn-primary" href="#contacto" onClick={(e)=>go(e,"#contacto")}>{t.cta.valuation} <I.arrow /></a>
            </div>
          </div>
          {s.cards.map((c,i)=>{ const Ic=I[SVC_IC[i]]; return (
            <div className={"card reveal d"+((i%2)+1)} key={i}>
              <div className="ico"><Ic /></div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

// ===== Tipos de stock =====
const CAT_IC = ["cpu","shirt","washer","toy","perfume","home","layers","refresh"];
function Types({ t }) {
  const s = t.types;
  return (
    <section className="section" id="tipos" style={{background:"var(--bg-2)"}}>
      <div className="wrap">
        <div className="why" style={{marginBottom:48}}>
          <div className="section-head reveal" style={{marginBottom:0}}>
            <span className="eyebrow">{s.eyebrow}</span>
            <h2 className="h2" style={{margin:"18px 0"}}>{s.t1}<br/><span className="grad-text">{s.emph}</span></h2>
            <p className="lead">{s.lead}</p>
          </div>
          <div className="band-img reveal d2">
            <img src="assets/electronics-pallets.jpg" alt="" />
          </div>
        </div>
        <div className="cats">
          {s.cats.map((c,i)=>{ const Ic=I[CAT_IC[i]]; return (
            <div className={"cat reveal d"+((i%4)+1)} key={i}>
              <div className="cat-ic"><Ic /></div>
              <h4>{c.t}</h4>
              <p>{c.d}</p>
            </div>
          );})}
        </div>
      </div>
    </section>
  );
}

// ===== Por qué elegirnos =====
const WHY_IC = ["bolt","euro","handshake","globe"];
function Why({ t }) {
  const s = t.why;
  return (
    <section className="section" id="nosotros">
      <div className="wrap">
        <div className="why">
          <div>
            <div className="section-head reveal" style={{marginBottom:30}}>
              <span className="eyebrow">{s.eyebrow}</span>
              <h2 className="h2" style={{margin:"18px 0"}}>{s.title}</h2>
              <p className="lead">{s.lead}</p>
            </div>
            <ul className="why-list">
              {s.items.map((w,i)=>{ const Ic=I[WHY_IC[i]]; return (
                <li className={"reveal d"+((i%3)+1)} key={i}>
                  <div className="wn"><Ic /></div>
                  <div><h4>{w.t}</h4><p>{w.d}</p></div>
                </li>
              );})}
            </ul>
          </div>
          <div className="stats">
            {s.stats.map((st,i)=>(
              <div className={"stat reveal d"+((i%2)+1)} key={i}>
                <div className="n">{st.n}</div>
                <div className="l">{st.l}</div>
              </div>
            ))}
            <div className="band-img reveal" style={{gridColumn:"span 2",minHeight:200}}>
              <img src="assets/store-home.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ===== Cómo funciona =====
function How({ t }) {
  const s = t.how;
  return (
    <section className="section" id="como" style={{background:"var(--bg-2)"}}>
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">{s.eyebrow}</span>
          <h2 className="h2">{s.title}</h2>
          <p className="lead" style={{marginInline:"auto"}}>{s.lead}</p>
        </div>
        <div className="steps">
          {s.steps.map((st,i)=>(
            <div className={"step reveal d"+((i%4)+1)} key={i}>
              <span className="dot"></span>
              <h4>{st.t}</h4>
              <p>{st.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Services = Services;
window.Types = Types;
window.Why = Why;
window.How = How;
window.Ticker = Ticker;