/* Features + Hardware POS */

const FEATURE_ICONS = [I.pos, I.stock, I.cart, I.tag, I.users, I.invoice, I.chart, I.rotate, I.zzz];

function Features({ t }){
  const f = t.features;
  return (
    <section className="features" id="features" data-screen-label="06 Fonctionnalités">
      <div className="container">
        <SectMark n="06" label="FEATURES.MD" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{f.eyebrow}</span>
          <h2 style={{marginTop:14}}>{f.title}</h2>
          <p className="lead">{f.lead}</p>
        </div>
        <div className="feat-grid reveal-stagger">
          {f.list.map((it,i)=>(
            <div className={`feat-card${it.featured?' featured':''}`} key={i}>
              <span className="ico">{(FEATURE_ICONS[i]||I.sparkle)()}</span>
              <span className="tag">{it.tag}</span>
              <h4>{it.t}</h4>
              <p>{it.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Custom hardware illustrations — flat / line-style, no AI illustration vibe */
function HwMonitor(){
  return (
    <svg viewBox="0 0 120 110" aria-hidden="true">
      <defs>
        <linearGradient id="hwm" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stopColor="#0B1318"/><stop offset="100%" stopColor="#16242E"/></linearGradient>
      </defs>
      <rect x="14" y="10" width="92" height="62" rx="6" fill="url(#hwm)" stroke="#0B1318" strokeWidth="1.5"/>
      <rect x="22" y="18" width="76" height="46" rx="3" fill="#0FB5AE" opacity=".12"/>
      <rect x="26" y="22" width="36" height="6" rx="2" fill="#0FB5AE"/>
      <rect x="26" y="32" width="68" height="4" rx="1.5" fill="#0FB5AE" opacity=".4"/>
      <rect x="26" y="40" width="50" height="4" rx="1.5" fill="#0FB5AE" opacity=".4"/>
      <rect x="26" y="48" width="62" height="4" rx="1.5" fill="#0FB5AE" opacity=".25"/>
      <rect x="26" y="56" width="40" height="4" rx="1.5" fill="#0FB5AE" opacity=".25"/>
      <rect x="48" y="72" width="24" height="4" rx="1.5" fill="#0B1318"/>
      <rect x="36" y="76" width="48" height="6" rx="2" fill="#0B1318"/>
      <rect x="20" y="82" width="80" height="3" rx="1.5" fill="#0B1318" opacity=".3"/>
    </svg>
  );
}
function HwPrinter(){
  return (
    <svg viewBox="0 0 120 110" aria-hidden="true">
      <rect x="20" y="22" width="80" height="34" rx="4" fill="#0B1318"/>
      <rect x="28" y="14" width="64" height="14" rx="3" fill="#16242E"/>
      <circle cx="86" cy="32" r="3" fill="#0FB5AE"/>
      <path d="M30 56 h60 v6 H30 z" fill="#0FB5AE" opacity=".2"/>
      <rect x="32" y="60" width="56" height="38" rx="2" fill="#FDFCF8" stroke="#E4EAED"/>
      <path d="M32 98 q4 -4 8 0 q4 4 8 0 q4 -4 8 0 q4 4 8 0 q4 -4 8 0 q4 4 8 0" fill="none" stroke="#FDFCF8" strokeWidth="2"/>
      <rect x="38" y="66" width="44" height="2.5" rx="1" fill="#0B1318" opacity=".7"/>
      <rect x="38" y="73" width="32" height="2" rx="1" fill="#0B1318" opacity=".3"/>
      <rect x="38" y="79" width="44" height="2" rx="1" fill="#0B1318" opacity=".3"/>
      <rect x="38" y="85" width="20" height="2" rx="1" fill="#0B1318" opacity=".3"/>
    </svg>
  );
}
function HwScanner(){
  return (
    <svg viewBox="0 0 120 110" aria-hidden="true">
      <path d="M28 18 Q34 12 44 14 L56 16 L56 30 Q44 34 38 44 L34 56 Q24 62 22 52 Q20 38 28 18 Z" fill="#0B1318"/>
      <rect x="52" y="22" width="8" height="6" rx="1" fill="#0FB5AE"/>
      <path d="M60 28 L100 56" stroke="#0FB5AE" strokeWidth="2" strokeDasharray="3 3" opacity=".6"/>
      <g transform="translate(70 60)">
        <rect width="40" height="28" rx="3" fill="#fff" stroke="#E4EAED"/>
        {[0,4,8,12,16,20,24,28,32].map((x,i)=>(
          <rect key={i} x={3+x} y="4" width={i%3===0?2:1} height="20" fill="#0B1318"/>
        ))}
      </g>
    </svg>
  );
}
function HwDrawer(){
  return (
    <svg viewBox="0 0 120 110" aria-hidden="true">
      <rect x="14" y="30" width="92" height="56" rx="4" fill="#0B1318"/>
      <rect x="14" y="30" width="92" height="14" rx="4" fill="#16242E"/>
      <rect x="22" y="48" width="76" height="34" rx="3" fill="#fff"/>
      {/* coin slots */}
      {[0,1,2,3].map(i=>(<rect key={i} x={26+i*18} y="54" width="14" height="10" rx="1.5" fill="#E4EAED"/>))}
      {/* bills */}
      <rect x="26" y="68" width="68" height="10" rx="1" fill="#E4EAED"/>
      <rect x="34" y="36" width="14" height="4" rx="1.5" fill="#0FB5AE"/>
      <circle cx="84" cy="38" r="2" fill="#0FB5AE"/>
    </svg>
  );
}
const HW_ILLUS = [HwMonitor, HwPrinter, HwScanner, HwDrawer];

function Hardware({ t, onCallback }){
  const h = t.hardware;
  return (
    <section className="hardware" id="hardware" data-screen-label="07 Matériel">
      <div className="container">
        <SectMark n="07" label="HARDWARE.POS" />
        <div className="section-head reveal">
          <span className="eyebrow"><span className="dot"></span>{h.eyebrow}</span>
          <h2 style={{marginTop:14}}>{h.title}</h2>
          <p className="lead">{h.lead}</p>
        </div>
        <div className="hw-grid reveal-stagger">
          {h.cards.map((c,i)=>{
            const Illu = HW_ILLUS[i] || HwMonitor;
            return (
              <div className="hw-card" key={i}>
                <div className="hw-illu"><Illu/></div>
                <span className="lab">{c.lab}</span>
                <h4>{c.t}</h4>
                <p>{c.s}</p>
                <span className="ft">{I.check()} {c.ft}</span>
              </div>
            );
          })}
        </div>
        <div className="hw-cta reveal">
          <div>
            <p>{h.cta.t}</p>
            <p className="sub">{h.cta.s}</p>
          </div>
          <button className="btn btn-primary btn-lg" onClick={onCallback}>{I.phone()} {h.cta.btn}</button>
        </div>
      </div>
    </section>
  );
}

window.Features = Features;
window.Hardware = Hardware;