/* Impact (business gauges) · AutoFocus (parts board) · Vision patron */

function ImpactGauge({ pct=70, neg=false }){
  const r = 44, cx=55, cy=58;
  const startA = Math.PI, endA = 2*Math.PI;
  const ang = startA + (endA-startA) * (Math.min(100,Math.max(0,pct))/100);
  const x = cx + r*Math.cos(ang), y = cy + r*Math.sin(ang);
  const large = pct > 50 ? 1 : 0;
  return (
    <svg viewBox="0 0 110 68" width="110" height="68" aria-hidden="true">
      <defs>
        <linearGradient id="igg" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#5DEAE2"/>
          <stop offset="100%" stopColor="#0FB5AE"/>
        </linearGradient>
      </defs>
      <path d={`M ${cx-r} ${cy} A ${r} ${r} 0 0 1 ${cx+r} ${cy}`} fill="none" stroke="rgba(255,255,255,.08)" strokeWidth="8" strokeLinecap="round"/>
      <path d={`M ${cx-r} ${cy} A ${r} ${r} 0 ${large} 1 ${x} ${y}`} fill="none" stroke="url(#igg)" strokeWidth="8" strokeLinecap="round" style={{strokeDasharray:160, strokeDashoffset:160, animation:'drawg 1.8s cubic-bezier(.3,.7,.2,1) .2s forwards'}}/>
      {Array.from({length:9}).map((_,i)=>{
        const a = startA + (i/8)*(endA-startA);
        const x1 = cx + (r+4)*Math.cos(a), y1 = cy + (r+4)*Math.sin(a);
        const x2 = cx + (r+8)*Math.cos(a), y2 = cy + (r+8)*Math.sin(a);
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,.18)" strokeWidth="1.2"/>;
      })}
    </svg>
  );
}

function Impact({ t, onCallback }){
  const im = t.impact;
  const pcts = [70, 90, 60, 55];
  return (
    <section className="impact" id="impact" data-screen-label="08 Impact">
      <div className="container">
        <SectMark n="08" label="IMPACT.BIZ" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{im.eyebrow}</span>
          <h2 style={{marginTop:14}}>{im.title}</h2>
          <p className="lead">{im.lead}</p>
        </div>
        <div className="impact-grid reveal-stagger">
          {im.stats.map((s,i)=>(
            <div className="impact-card" key={i}>
              <div className="gauge-wrap">
                <ImpactGauge pct={pcts[i]||60}/>
                <div className="gauge-v"><span className="big">{s.n}</span></div>
              </div>
              <h4>{s.t}</h4>
              <p>{s.s}</p>
            </div>
          ))}
        </div>
        <div className="impact-quote reveal">
          <p>{im.quote}</p>
          <button className="btn btn-primary btn-lg" onClick={onCallback}>{I.phone()} {im.cta}</button>
        </div>
      </div>
    </section>
  );
}

function PartsBoard({ t, lang }){
  const b = t.autoFocus.board;
  return (
    <div className="parts-board reveal" style={{transitionDelay:'.1s'}}>
      <div className="head">
        <span className="lab">{b.label}</span>
        <span className="badge-app">{I.zap()} {b.app}</span>
      </div>
      <div className="search">
        <span style={{color:'var(--teal)', display:'inline-flex'}}>{I.search()}</span>
        <span className="typed">{b.typed}</span>
      </div>
      <div className="parts-row">
        {b.items.map((it,i)=>(
          <div className="item" key={i}>
            <span className="sq">{it.sq}</span>
            <div style={{minWidth:0, flex:1}}>
              <div className="nm">{it.nm}</div>
              <div className="rf" dir="ltr">{it.rf}</div>
            </div>
            <span className={`stk ${it.cls}`}>{it.stk}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

const AUTO_ICONS = [I.search, I.car, I.layers, I.invoice, I.zap, I.rotate, I.zzz, I.mapPin];

function AutoFocus({ t, lang, onCallback, onWA }){
  const a = t.autoFocus;
  return (
    <section className="autofocus" id="auto" data-screen-label="09 Pièces auto">
      <div className="container">
        <SectMark n="09" label="PIECES_AUTO" />
        <div className="auto-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot"></span>{a.eyebrow}</span>
            <h2 style={{marginTop:14}}>{a.title}</h2>
            <p className="lead" style={{marginTop:14}}>{a.lead}</p>
            <div className="auto-list">
              {a.features.map((f,i)=>(
                <div className="pill" key={i}>
                  <span className="b">{(AUTO_ICONS[i]||I.check)()}</span>
                  <span>{f.t}</span>
                </div>
              ))}
            </div>
            <div className="row" style={{marginTop:24}}>
              <button className="btn btn-primary" onClick={onCallback}>{I.phone()} {t.cta.callback}</button>
              <button className="btn btn-secondary" onClick={onWA}>{I.whatsapp()} {t.cta.whatsapp}</button>
            </div>
          </div>
          <PartsBoard t={t} lang={lang}/>
        </div>
      </div>
    </section>
  );
}

function Vision({ t }){
  const v = t.vision;
  return (
    <section className="vision" id="vision" data-screen-label="10 Vision patron">
      <div className="container">
        <SectMark n="10" label="DASHBOARD" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{v.eyebrow}</span>
          <h2 style={{marginTop:14}}>{v.title}</h2>
          <p className="lead">{v.lead}</p>
        </div>
        <div className="vision-card reveal">
          <div style={{display:'flex',alignItems:'center',gap:12, flexWrap:'wrap'}}>
            <span style={{
              display:'inline-flex', alignItems:'center', gap:8,
              fontFamily:'JetBrains Mono, monospace', fontSize:11, fontWeight:800,
              color:'var(--slate)', textTransform:'uppercase', letterSpacing:'.1em'
            }}>
              <span style={{width:8,height:8,borderRadius:'50%',background:'var(--signal)', boxShadow:'0 0 0 4px rgba(31,190,90,.18)'}}></span>
              app.clickbi3.ma · live
            </span>
            <h3 style={{margin:0}}>Mon magasin · aujourd'hui</h3>
          </div>
          <div className="vision-grid">
            {v.widgets.map((w,i)=>(
              <div className={`vw-card ${w.cls||''}`} key={i}>
                <span className="lab">{w.lab}</span>
                <span className="v num">{w.v}{w.u && <span className="u">{w.u}</span>}</span>
                <span className={`d ${i===2?'down':''}`}>{i===2 ? I.trendDown() : I.trend()} {w.d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.Impact = Impact;
window.AutoFocus = AutoFocus;
window.Vision = Vision;