// sections2.jsx — additional landing sections (loads before app.jsx)
// Reuses globally-declared Check / Arrow icons from app.jsx (available at render time).

/* ---------- Dla kogo? ---------- */
function Audience(){
  return (
    <section className="sec-pad band" id="dla-kogo">
      <div className="wrap aud-grid">
        <div className="sec-head aud-left">
          <span className="eyebrow">Dla kogo?</span>
          <h2>Dla sklepów, które chcą sprzedawać bez chaosu regulacyjnego</h2>
          <p className="sub">Pracujemy z:</p>
        </div>
        <div className="aud-right">
          <ul className="aud-list">
            {AUDIENCE.map((t,i)=>(
              <li key={i}><span className="aud-ic"><Check s={13}/></span><span>{t}</span></li>
            ))}
          </ul>
          <div className="stack-chips">
            {STACK.map(s=>(<span className="stack-chip" key={s}>{s}</span>))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Proces ---------- */
function Process(){
  return (
    <section className="sec-pad" id="proces">
      <div className="wrap">
        <div className="sec-head" style={{marginBottom:'52px'}}>
          <span className="eyebrow">Proces</span>
          <h2>Jak wygląda wdrożenie?</h2>
        </div>
        <div className="proc-grid">
          {PROCESS.map((s,i)=>(
            <div className="proc-step" key={s.n}>
              <div className="node">{s.n}</div>
              <div className="proc-body">
                <div className="proc-stage">Etap {i+1}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Pakiety ---------- */
function PackageCard({ p }){
  return (
    <article className={"pkg-card" + (p.featured ? " featured" : "")}>
      <div className="pkg-head">
        <span className="pkg-tag">{p.tag}</span>
        {p.featured && <span className="pkg-badge">Najszerszy zakres</span>}
      </div>
      <h3>{p.name}</h3>
      <p className="pkg-tagline">{p.tagline}</p>
      <div className="pkg-div"><span>Zawiera</span></div>
      <ul className="pkg-list">
        {p.items.map((it,i)=>(
          <li key={i}><Check s={14}/><span>{it}</span></li>
        ))}
      </ul>
      <a className={"btn " + (p.featured ? "btn-accent" : "btn-ghost")} href="#kontakt">
        Porozmawiajmy<Arrow/>
      </a>
      <p className="pkg-note">Wycena ustalana po audycie</p>
    </article>
  );
}
function Packages(){
  return (
    <section className="sec-pad band" id="pakiety">
      <div className="wrap">
        <div className="sec-head" style={{marginBottom:'46px'}}>
          <span className="eyebrow">Pakiety</span>
          <h2>Wybierz zakres dopasowany do etapu, na którym jesteś</h2>
        </div>
        <div className="pkg-grid">
          {PACKAGES.map(p=>(<PackageCard key={p.tag} p={p}/>))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Przewagi ---------- */
function Advantages(){
  return (
    <section className="sec-pad" id="przewagi">
      <div className="wrap adv-grid">
        <div className="adv-left">
          <span className="eyebrow">Przewagi</span>
          <h2>Dlaczego zespół techniczny, a nie tylko kancelaria?</h2>
          <p className="adv-intro">{ADVANTAGES.intro}</p>
          <p className="adv-close">{ADVANTAGES.closing}</p>
        </div>
        <div className="adv-right">
          <ul className="adv-points">
            {ADVANTAGES.points.map((t,i)=>(
              <li key={i}><span className="adv-ic"><Check s={13}/></span><span>{t}</span></li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Audience, Process, Packages, Advantages });