/* Problems · Avant/Après · Solution · Scenario comptoir */

const PROBLEM_ICONS = [I.layers, I.zzz, I.alert, I.tag, I.chart, I.cart, I.invoice, I.dashboard, I.pos];

function Problems({ t }){
  const p = t.problems;
  const parts = p.callout.split('—');
  return (
    <section className="problems" id="problems" data-screen-label="02 Problèmes">
      <div className="container">
        <SectMark n="02" label="PROBLEMES.MD" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{p.eyebrow}</span>
          <h2 style={{marginTop:14}}>{p.title}</h2>
          <p className="lead">{p.lead}</p>
        </div>
        <div className="problem-grid reveal-stagger">
          {p.items.map((it,i)=>(
            <div className="problem-card" key={i} data-ref={`REF-${String(i+1).padStart(2,'0')}`}>
              <span className="x">{(PROBLEM_ICONS[i]||I.alert)()}</span>
              <div>
                <h4>{it.t}</h4>
                <p>{it.s}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="callout reveal">
          <div className="txt">
            <div className="lab">{p.calloutLab}</div>
            <p>{parts[0]}{parts.length>1 && <span style={{color:'var(--teal)'}}> — {parts.slice(1).join('—')}</span>}</p>
          </div>
          <span style={{display:'inline-flex',alignItems:'center',gap:8,color:'var(--teal)',fontWeight:800,position:'relative',zIndex:1}}>
            {I.arrowRight()}
          </span>
        </div>
      </div>
    </section>
  );
}

function AvantApres({ t }){
  const a = t.avap;
  return (
    <section className="avap" id="avap" data-screen-label="03 Avant/Après">
      <div className="container">
        <SectMark n="03" label="AVANT_APRES" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{a.eyebrow}</span>
          <h2 style={{marginTop:14}}>{a.title}</h2>
          <p className="lead">{a.lead}</p>
        </div>
        <div className="avap-grid">
          <div className="avap-col before reveal">
            <span className="lab">{I.x()} {a.before.lab}</span>
            <h3>{a.before.title}</h3>
            <ul>
              {a.before.items.map((it,i)=>(
                <li key={i}><span className="ic">{I.x()}</span><span>{it}</span></li>
              ))}
            </ul>
          </div>
          <div className="avap-arrow reveal" style={{transitionDelay:'.1s'}}>{I.arrowRight()}</div>
          <div className="avap-col after reveal" style={{transitionDelay:'.15s'}}>
            <span className="lab">{I.check()} {a.after.lab}</span>
            <h3>{a.after.title}</h3>
            <ul>
              {a.after.items.map((it,i)=>(
                <li key={i}><span className="ic">{I.check()}</span><span>{it}</span></li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

const TILE_ICONS = [I.car, I.tools, I.bolt, I.drop];

function PhoneStack({ t, lang }){
  const s = t.solution;
  return (
    <div className="phone-stack reveal" style={{transitionDelay:'.1s'}}>
      <div className="phone">
        <div className="screen">
          <div className="notch">
            <span dir="ltr">9:41</span>
            <span className="dots"><span></span><span></span><span></span></span>
          </div>
          <div className="head">
            <img src="assets/logo-full.png" alt="ClickBi3" />
            <span className="pin">{s.phoneBadge}</span>
          </div>
          <div className="body">
            <div className="pf">{s.phoneTitle}</div>
            {s.phoneItems.map((it,i)=>(
              <div className="tile" key={i}>
                <span className="sq">{(TILE_ICONS[i % 4]||I.tag)()}</span>
                <div style={{minWidth:0, flex:1}}>
                  <div className="t">{it.t}</div>
                  <div className="s" dir="ltr">{it.s}</div>
                </div>
                <span className="pr"><span>{it.p}</span><span className="u">{it.u}</span></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function Solution({ t, lang }){
  const s = t.solution;
  return (
    <section id="solution" data-screen-label="04 Solution">
      <div className="container">
        <SectMark n="04" label="SOLUTION" />
        <div className="solution-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot"></span>{s.eyebrow}</span>
            <h2 style={{marginTop:14}}>{s.title}</h2>
            <p className="lead" style={{marginTop:14}}>{s.lead}</p>
            <div className="bullets">
              {s.bullets.map((b,i)=>(
                <div className="bullet" key={i}>
                  <span className="check">{I.check()}</span>
                  <div>
                    <b>{b.t}</b>
                    <p>{b.s}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <PhoneStack t={t} lang={lang}/>
        </div>
      </div>
    </section>
  );
}

const SCEN_ICONS = [I.search, I.pos, I.check];

function Scenario({ t }){
  const s = t.scenario;
  return (
    <section className="scenario" id="comptoir" data-screen-label="05 Comptoir">
      <div className="container">
        <SectMark n="05" label="COMPTOIR.LIVE" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{s.eyebrow}</span>
          <h2 style={{marginTop:14}}>{s.title}</h2>
          <p className="lead">{s.lead}</p>
          <div style={{marginTop:18, display:'inline-flex', alignItems:'center', gap:10}}>
            <span className="scen-timer">{I.clock()} {s.timer}</span>
            <span style={{fontSize:13, color:'var(--slate)', fontWeight:600}}>du scan à la facture</span>
          </div>
        </div>
        <div className="scen-row reveal-stagger">
          {s.steps.map((st,i)=>(
            <div className="scen-step" key={i}>
              <span className="num">{st.num}</span>
              <span className="icn">{(SCEN_ICONS[i]||I.check)()}</span>
              <h4>{st.t}</h4>
              <p>{st.s}</p>
              <div className="panel">
                <span dir={i===0?"ltr":"auto"}>{st.panel}</span>
                <span className="ok">{I.check()} {st.ok}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Problems = Problems;
window.AvantApres = AvantApres;
window.Solution = Solution;
window.Scenario = Scenario;