// showcase.jsx — pasmo zdjęć: świat stacjonarny → online (prawdziwe zdjęcia, Unsplash CDN)

const PHOTO = {
  storeInterior: 'https://images.unsplash.com/photo-1441986300917-64674bd600d8',
  shopkeeper:    'https://images.unsplash.com/photo-1556740738-b6a63e27c4df',
  warehouse:     'https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d',
  phonePay:      'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d',
  openSign:      'https://images.unsplash.com/photo-1472851294608-062f824d29cc',
  produce:       'https://images.unsplash.com/photo-1542838132-92c53300491e',
};
function ph(url, w = 900, q = 72) {
  return `${url}?auto=format&fit=crop&w=${w}&q=${q}`;
}
window.PHOTO = PHOTO;
window.ph = ph;

function Showcase() {
  return (
    <section id="showcase" className="showcase">
      <div className="container">
        <div className="section-head">
          <Eyebrow>Stacjonarnie → online</Eyebrow>
          <h2>Twój sklep już ma klientów.<br/>Dajemy mu <span className="hl">drugą witrynę</span>.</h2>
          <p>Witryna na ulicy zostaje. Dokładamy witrynę w&nbsp;sieci — z&nbsp;tym samym asortymentem, ceną i&nbsp;zaufaniem, które już zbudowałeś.</p>
        </div>

        <div className="showcase-grid">
          <figure className="sc-img sc-big">
            <img src={ph(PHOTO.storeInterior, 1100)} alt="Wnętrze sklepu stacjonarnego" loading="lazy" decoding="async"/>
            <figcaption><span className="sc-tag">Dziś</span>Twój sklep stacjonarny</figcaption>
          </figure>

          <figure className="sc-img">
            <img src={ph(PHOTO.warehouse, 800)} alt="Magazyn i kompletacja zamówień" loading="lazy" decoding="async"/>
            <figcaption><span className="sc-tag on">Online</span>Logistyka i&nbsp;wysyłka</figcaption>
          </figure>

          <figure className="sc-img">
            <img src={ph(PHOTO.phonePay, 800)} alt="Płatność telefonem przy ladzie" loading="lazy" decoding="async"/>
            <figcaption><span className="sc-tag on">24/7</span>Sprzedaż bez przerwy</figcaption>
          </figure>
        </div>

        <div className="showcase-strip">
          <figure className="sc-mini">
            <img src={ph(PHOTO.shopkeeper, 600)} alt="Obsługa klienta przy kasie" loading="lazy" decoding="async"/>
          </figure>
          <figure className="sc-mini">
            <img src={ph(PHOTO.produce, 600)} alt="Ekspozycja produktów w sklepie" loading="lazy" decoding="async"/>
          </figure>
          <figure className="sc-mini">
            <img src={ph(PHOTO.openSign, 600)} alt="Szyld OTWARTE w witrynie sklepu" loading="lazy" decoding="async"/>
          </figure>
          <div className="sc-note">
            <div className="sc-note-num">+27%</div>
            <div className="sc-note-label">średni wzrost obrotu po połączeniu obu witryn</div>
          </div>
        </div>
      </div>

      <style>{`
        .showcase{ background: var(--bg-2); }
        .showcase .section-head h2 .hl{ color: var(--brand); }

        .showcase-grid{
          display:grid;
          grid-template-columns: 1.4fr 1fr;
          grid-template-rows: 1fr 1fr;
          gap: 16px;
          margin-bottom: 16px;
        }
        .sc-img{
          position: relative; margin: 0;
          border-radius: var(--radius-lg);
          overflow: hidden;
          border: 1px solid var(--line);
          background: var(--surface-2);
        }
        .sc-img.sc-big{
          grid-row: 1 / span 2;
          min-height: 420px;
        }
        .sc-img img{
          width: 100%; height: 100%;
          object-fit: cover;
          display: block;
          transition: transform .6s var(--ease-out);
        }
        .sc-img:hover img{ transform: scale(1.04); }
        .sc-img::after{
          content:''; position:absolute; inset:0;
          background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55) 100%);
          pointer-events:none;
        }
        .sc-img figcaption{
          position: absolute; left: 18px; bottom: 16px; z-index: 1;
          display:flex; align-items:center; gap: 10px;
          color: #fff;
          font-family: var(--font-display);
          font-size: 16px;
          font-weight: 500;
          letter-spacing: -0.01em;
          text-shadow: 0 1px 8px rgba(0,0,0,.4);
        }
        .sc-tag{
          font-family: var(--font-mono);
          font-size: 10.5px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          padding: 4px 9px;
          border-radius: 999px;
          background: rgba(255,255,255,.16);
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          color: #fff;
          font-weight: 500;
        }
        .sc-tag.on{ background: var(--brand); color: var(--brand-ink); }

        .showcase-strip{
          display:grid;
          grid-template-columns: repeat(3, 1fr) 1.3fr;
          gap: 16px;
        }
        .sc-mini{
          margin:0; position: relative;
          border-radius: var(--radius);
          overflow: hidden;
          border: 1px solid var(--line);
          aspect-ratio: 4 / 3;
          background: var(--surface-2);
        }
        .sc-mini img{
          width:100%; height:100%; object-fit: cover; display:block;
          transition: transform .6s var(--ease-out);
        }
        .sc-mini:hover img{ transform: scale(1.05); }
        .sc-note{
          display:flex; flex-direction:column; justify-content:center;
          padding: 22px 26px;
          background: var(--brand);
          color: var(--brand-ink);
          border-radius: var(--radius);
        }
        .sc-note-num{
          font-family: var(--font-display);
          font-size: clamp(34px, 4vw, 48px);
          font-weight: 600;
          letter-spacing: -0.03em;
          line-height: 1;
          margin-bottom: 8px;
        }
        .sc-note-label{ font-size: 13px; line-height: 1.4; opacity: .85; }

        @media (max-width: 820px){
          .showcase-grid{ grid-template-columns: 1fr; grid-template-rows: auto; }
          .sc-img.sc-big{ grid-row: auto; min-height: 300px; }
          .sc-img:not(.sc-big){ min-height: 220px; }
          .showcase-strip{ grid-template-columns: 1fr 1fr; }
          .sc-note{ grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 14px; }
        }
        @media (max-width: 480px){
          .showcase-strip{ grid-template-columns: 1fr 1fr; }
        }
      `}</style>
    </section>
  );
}

window.Showcase = Showcase;