/* Others · Maroc · Trust */

const OTHER_ICONS = [I.tools, I.building, I.bolt, I.drop, I.smartphone, I.layers];

function Others({ t }){
  const o = t.others;
  return (
    <section className="others" id="others" data-screen-label="11 Autres métiers">
      <div className="container">
        <SectMark n="11" label="METIERS" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{o.eyebrow}</span>
          <h2 style={{marginTop:14}}>{o.title}</h2>
          <p className="lead">{o.lead}</p>
        </div>
        <div className="others-grid reveal-stagger">
          {o.tiles.map((it,i)=>(
            <div className="tile" key={i}>
              <span className="b">{(OTHER_ICONS[i]||I.sparkle)()}</span>
              <span className="t">{it.t}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const MAROC_ICONS = [I.clock, I.headphone, I.invoice, I.users];

function Maroc({ t }){
  const m = t.maroc;
  return (
    <section className="maroc" id="maroc" data-screen-label="12 Pensé pour le Maroc">
      <div className="container">
        <SectMark n="12" label="MAROC.LOCAL" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{m.eyebrow}</span>
          <h2 style={{marginTop:14}}>{m.title}</h2>
          <p className="lead">{m.lead}</p>
        </div>
        <div className="maroc-grid reveal-stagger">
          {m.cards.map((c,i)=>(
            <div className="mr-card" key={i}>
              <span className="ic">{(MAROC_ICONS[i]||I.check)()}</span>
              <div className="t">{c.t}</div>
              <p className="s">{c.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Trust({ t }){
  const r = t.trust;
  return (
    <section className="trust" id="trust" data-screen-label="13 Témoignages">
      <div className="container">
        <SectMark n="13" label="CLIENTS" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{r.eyebrow}</span>
          <h2 style={{marginTop:14}}>{r.title}</h2>
          <p className="lead">{r.lead}</p>
        </div>
        <div className="trust-grid reveal-stagger">
          {r.testimonials.map((tm,i)=>(
            <div className="tcard" key={i}>
              <div className="stars">★★★★★</div>
              <p className="q">« {tm.q} »</p>
              <div className="who">
                <span className="av">{tm.i}</span>
                <div>
                  <div className="nm">{tm.nm}</div>
                  <div className="ro">{tm.ro}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Others = Others;
window.Maroc = Maroc;
window.Trust = Trust;