// artwork.jsx — dekoracyjne grafiki: sklep stacjonarny (pierwszy plan) + e-commerce (tło)
// Monoline, dziedziczy kolor przez currentColor → adaptuje się do palety.

/* ── Pełna scena: sklep + e-commerce w tle (do hero) ─────── */
function StoreScene({ className = '' }) {
  return (
    <div className={`scene ${className}`} aria-hidden="true">
      {/* ── TŁO: e-commerce ── */}
      <svg className="scene-ec" viewBox="0 0 520 460" fill="none" preserveAspectRatio="xMidYMid meet">
        {/* okno przeglądarki z siatką produktów */}
        <g className="ec-browser">
          <rect x="20" y="24" width="220" height="160" rx="12" stroke="currentColor" strokeWidth="2"/>
          <line x1="20" y1="52" x2="240" y2="52" stroke="currentColor" strokeWidth="2"/>
          <circle cx="34" cy="38" r="3" fill="currentColor"/>
          <circle cx="46" cy="38" r="3" fill="currentColor"/>
          <circle cx="58" cy="38" r="3" fill="currentColor"/>
          {[0,1,2].map(c => [0,1].map(r => (
            <g key={`${c}-${r}`}>
              <rect x={40 + c*64} y={68 + r*52} width="48" height="34" rx="6" stroke="currentColor" strokeWidth="1.6"/>
              <line x1={40 + c*64} y1={112 + r*52} x2={70 + c*64} y2={112 + r*52} stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
            </g>
          )))}
        </g>

        {/* sygnał / wifi */}
        <g className="ec-wifi">
          <path d="M300 70 a40 40 0 0 1 60 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <path d="M312 82 a24 24 0 0 1 36 0" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="330" cy="96" r="3.5" fill="currentColor"/>
        </g>

        {/* trasa dostawy: pin → paczka */}
        <path className="ec-route" d="M150 250 C 250 200, 330 300, 430 250" stroke="currentColor" strokeWidth="2" strokeDasharray="3 9" strokeLinecap="round"/>
        <g className="ec-pin">
          <path d="M150 232 a14 14 0 1 1 0 0.1 M150 246 l0 10" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
          <circle cx="150" cy="232" r="4.5" stroke="currentColor" strokeWidth="2"/>
        </g>

        {/* paczka / karton */}
        <g className="ec-box">
          <path d="M392 230 l38 -18 38 18 0 42 -38 18 -38 -18 z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M392 230 l38 18 38 -18 M430 248 l0 42" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M411 221 l38 18" stroke="currentColor" strokeWidth="2"/>
        </g>

        {/* kursor + klik */}
        <g className="ec-cursor">
          <path d="M330 360 l0 40 10 -11 7 16 7 -3 -7 -15 15 0 z" stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
          <path d="M318 350 l-8 -8 M362 350 l8 -8 M340 332 l0 -11" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
        </g>
      </svg>

      {/* ── PIERWSZY PLAN: sklep stacjonarny ── */}
      <svg className="scene-store" viewBox="0 0 300 300" fill="none" preserveAspectRatio="xMidYMax meet">
        {/* szyld OTWARTE */}
        <g className="store-sign">
          <rect x="96" y="18" width="108" height="26" rx="13" stroke="currentColor" strokeWidth="2.2"/>
          <line x1="116" y1="31" x2="184" y2="31" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"/>
        </g>

        {/* markiza w paski */}
        <path d="M40 70 L260 70 L246 104 L54 104 Z" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round"/>
        {[1,2,3,4,5,6,7].map(i => (
          <line key={i} x1={40 + i*27.5} y1="70" x2={40 + i*27.5 - 6.5} y2="104" stroke="currentColor" strokeWidth="2"/>
        ))}
        {/* falbanka markizy */}
        <path d="M54 104 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0 q7 12 14 0"
          stroke="currentColor" strokeWidth="2" fill="none" strokeLinejoin="round"/>

        {/* budynek */}
        <path d="M50 118 L50 268 L250 268 L250 118" stroke="currentColor" strokeWidth="2.4" strokeLinejoin="round"/>
        <line x1="34" y1="268" x2="266" y2="268" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round"/>

        {/* drzwi */}
        <rect x="150" y="170" width="56" height="98" stroke="currentColor" strokeWidth="2.2"/>
        <line x1="178" y1="170" x2="178" y2="268" stroke="currentColor" strokeWidth="1.8"/>
        <circle cx="172" cy="220" r="2.6" fill="currentColor"/>
        <circle cx="184" cy="220" r="2.6" fill="currentColor"/>

        {/* witryna / okno z produktami */}
        <rect x="68" y="142" width="64" height="100" stroke="currentColor" strokeWidth="2.2"/>
        <line x1="68" y1="186" x2="132" y2="186" stroke="currentColor" strokeWidth="1.8"/>
        <rect x="78" y="154" width="18" height="22" rx="3" stroke="currentColor" strokeWidth="1.6"/>
        <rect x="104" y="158" width="18" height="18" rx="3" stroke="currentColor" strokeWidth="1.6"/>
        <line x1="78" y1="200" x2="122" y2="200" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
        <line x1="78" y1="214" x2="112" y2="214" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>

        {/* torba zakupowa przed sklepem */}
        <g className="store-bag">
          <path d="M212 238 L246 238 L243 268 L215 268 Z" stroke="currentColor" strokeWidth="2.2" strokeLinejoin="round"/>
          <path d="M221 238 a8 8 0 0 1 16 0" stroke="currentColor" strokeWidth="2" fill="none"/>
        </g>
      </svg>
    </div>
  );
}

/* ── Pas sklepowy do stopki (powtarzalna pierzeja) ───────── */
function StorefrontStrip() {
  return (
    <svg className="storefront-strip" viewBox="0 0 1200 120" fill="none" preserveAspectRatio="xMidYMax slice" aria-hidden="true">
      <line x1="0" y1="118" x2="1200" y2="118" stroke="currentColor" strokeWidth="2"/>
      {[0,1,2,3,4,5].map(i => {
        const x = i * 200 + 20;
        const tall = i % 2 === 0;
        const top = tall ? 26 : 44;
        return (
          <g key={i} transform={`translate(${x},0)`}>
            <path d={`M0 ${top} L0 118 L160 118 L160 ${top}`} stroke="currentColor" strokeWidth="2" strokeLinejoin="round"/>
            {/* markiza */}
            <path d={`M-6 ${top} L166 ${top} L156 ${top+18} L4 ${top+18} Z`} stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round"/>
            {/* drzwi */}
            <rect x="66" y="78" width="30" height="40" stroke="currentColor" strokeWidth="1.6"/>
            {/* okna */}
            <rect x="14" y={top+30} width="38" height="30" stroke="currentColor" strokeWidth="1.6"/>
            <rect x="110" y={top+30} width="38" height="30" stroke="currentColor" strokeWidth="1.6"/>
          </g>
        );
      })}
    </svg>
  );
}

Object.assign(window, { StoreScene, StorefrontStrip });