/* ============================================================
   customer.jsx — Customer-facing page sections
   ============================================================ */
const { useState: cuState, useEffect: cuEffect } = React;

function StatStrip({ items }) {
  return (
    <section className="section tight section--alt">
      <div className="wrap">
        <Reveal className="stat-strip">
          {items.map((s, i) => (
            <div className="sc" key={i}>
              <div className="stat-num text-grad"><Counter to={s.to} suffix={s.suffix} prefix={s.prefix} decimals={s.decimals || 0} /></div>
              <div className="stat-label">{s.label}</div>
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function CustomerHero({ onNav }) {
  const vidRef = React.useRef(null);
  cuEffect(() => {
    const v = vidRef.current; if (v) v.playbackRate = 0.5;
  }, []);
  return (
    <section className="hero">
      <div className="aura"></div>
      <div className="grid-bg"></div>
      <div className="blob" style={{ width: 360, height: 360, left: '-120px', top: '20%', background: 'var(--accent)' }}></div>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <Reveal as="div" className="eyebrow" style={{}}>Powerbank rental network</Reveal>
            <h1 className="h-display reveal d1" style={{ marginTop: 22 }}>
              Charge your device<br />
              <span style={{ whiteSpace: 'nowrap' }}>{'at '}<WordRotator words={['the party.', 'the mall.', 'dinner.', 'the gig.', 'the gym.']} /></span>
            </h1>
            <p className="lead reveal d2" style={{ maxWidth: 480 }}>
              Rent a fully-charged power bank in seconds and return it anywhere across our network. No cables to carry, no dead battery — we're closer than you think.
            </p>
            <div className="hero-cta reveal d3">
              <a className="btn btn-primary" href="https://m.hellocharge.pl" target="_blank" rel="noopener"><Icon name="scan" size={18} />Rent a power bank</a>
              <button className="btn btn-ghost" onClick={() => onNav('how')}><Icon name="bolt" size={18} />How it works</button>
            </div>
            <div className="hero-meta reveal d4">
              <div><div className="hm-n text-grad"><Counter to={35} /></div><div className="hm-l">Stations in Poland</div></div>
              <div><div className="hm-n text-grad"><Counter to={30} suffix=" min" /></div><div className="hm-l">Fast charge</div></div>
              <div><div className="hm-n text-grad">24/7</div><div className="hm-l">Always available</div></div>
            </div>
          </div>
          <Reveal className="hero-visual d2">
            <div className="hero-ring" style={{ inset: '-26px', }}></div>
            <div className="img-frame hero-media">
              <video
                className="hm-vid"
                ref={vidRef}
                src="assets/hero-video.mp4"
                autoPlay
                loop
                muted
                playsInline
                preload="auto"
                tabIndex={-1}
                disablePictureInPicture
                controlsList="nodownload noplaybackrate nofullscreen noremoteplayback"
              />
            </div>
            <div className="fchip" style={{ left: '-20px', bottom: '60px', animation: 'floaty 6s ease-in-out infinite' }}>
              <div className="fi"><Icon name="bolt" size={19} /></div>
              <div><div className="ft">100%</div><div className="fl">Charged & ready</div></div>
            </div>
            <div className="fchip" style={{ right: '6px', top: '34px', animation: 'floaty 7s ease-in-out infinite .6s' }}>
              <div className="fi" style={{ background: 'var(--surface)', color: 'var(--accent-ink)', border: '1px solid var(--border)' }}><Icon name="pin" size={19} /></div>
              <div><div className="ft">Return anywhere</div><div className="fl">35 stations</div></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const VENUES = [
  { k: 'Charge and travel', t: 'Transport', ic: 'globe', img: 'transport', size: 'lg', area: '1 / 1 / 3 / 3',
    benefits: ['Stations at rail, coach & metro hubs', 'Pick up here, return at your destination', 'Tap, scan or pay in the app'] },
  { k: 'Charge and shop', t: 'Shopping malls', ic: 'store', img: 'shopping', size: 'sm', area: '1 / 3 / 2 / 4',
    benefits: ['Charge while you browse the shops', 'Stations by entrances & food courts', 'Return at any mall in the network'] },
  { k: 'Charge and celebrate', t: 'Events', ic: 'party', img: 'events', size: 'sm', area: '1 / 4 / 2 / 5',
    benefits: ['Never miss the moment on low battery', 'Pop-up stations for festivals & concerts', 'High-capacity towers for big crowds'] },
  { k: 'Charge and enjoy', t: 'Gastronomy', ic: 'utensils', img: 'gastronomy', size: 'sm', area: '3 / 1 / 4 / 2',
    benefits: ['Power up over coffee or dinner', 'Compact countertop units for venues', 'Three cables fit any phone'] },
  { k: 'Charge and have fun', t: 'Amusement parks', ic: 'star', img: 'amusement', size: 'lg', area: '2 / 3 / 4 / 5',
    benefits: ['Keep the camera rolling all day', 'Family-friendly self-service kiosks', 'Weatherproof stations for outdoors'] },
  { k: 'Charge and relax', t: 'Hotels & cafés', ic: 'leaf', img: 'cafes', size: 'sm', area: '3 / 2 / 4 / 3',
    benefits: ['A charge always within reach', 'Stations that match your space', 'We install, stock and maintain it'] },
];
function VenueTypes() {
  return (
    <section className="section" id="venues">
      <div className="wrap">
        <Reveal className="sec-head" style={{}}>
          <span className="eyebrow">Location types</span>
          <h2 className="h2">We're closer than<br />you think.</h2>
          <p className="lead">Our charging stations live where life happens — hover a place to see what each station brings.</p>
        </Reveal>
        <div className="venue-grid" style={{ marginTop: 50 }}>
          {VENUES.map((v, i) => (
            <Reveal key={v.t} delay={`d${(i % 3) + 1}`} style={{ gridArea: v.area }}>
              <div className={`venue ${v.size}`}>
                <img className="v-img" src={`assets/venues/${v.img}.jpg`} alt={v.t} loading="lazy" />
                <div className="v-ic"><Icon name={v.ic} size={24} /></div>
                <div className="v-plus"><Icon name="plus" size={18} /></div>
                <div className="v-content">
                  <div className="v-kicker">{v.k}</div>
                  <div className="v-title">{v.t}</div>
                  <ul className="v-benefits">
                    {v.benefits.map((b, j) => <li key={j}><Icon name="check" size={15} />{b}</li>)}
                  </ul>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const STEPS = [
  { n: 1, t: 'Find a station', d: 'Spot a HelloCharge station in malls, cafés, hotels and event venues near you — 35 across Poland.', ic: 'pin' },
  { n: 2, t: 'Tap or scan', d: 'Tap your card on the terminal or scan the QR code with your phone. Payment is confirmed in a second.', ic: 'scan' },
  { n: 3, t: 'Grab & go', d: 'A fully-charged power bank ejects from the station with cables pre-attached for every device.', ic: 'battery' },
  { n: 4, t: 'Return anywhere', d: 'Drop it back at any station in the network when you\'re done. Your deposit is released instantly.', ic: 'refresh' },
];
function HowItWorks() {
  const [active, setActive] = cuState(0);
  const s = STEPS[active];
  return (
    <section className="section section--alt" id="how">
      <div className="wrap">
        <Reveal className="sec-head center" style={{}}>
          <span className="eyebrow center">How it works</span>
          <h2 className="h2">Powered up in four steps.</h2>
          <p className="lead">From empty to charged in under a minute — no app required, no commitment.</p>
        </Reveal>
        <div className="steps-tabs">
          {STEPS.map((st, i) => (
            <button key={i} className={`step-tab ${i === active ? 'active' : ''}`} onClick={() => setActive(i)}>
              Step {st.n}
            </button>
          ))}
        </div>
        <div className="step-panel" key={active}>
          <div className="step-visual fade-swap">
            <StepVisual active={active} />
          </div>
          <div className="step-info fade-swap">
            <div className="num"><span className="num-k">Step</span> 0{s.n}</div>
            <h3 className="h2" style={{ fontSize: 'clamp(26px,2.6vw,38px)' }}>{s.t}</h3>
            <p className="lead" style={{ marginTop: 16 }}>{s.d}</p>
            <div className="row" style={{ marginTop: 26 }}>
              {STEPS.map((st, i) => (
                <span key={i} onClick={() => setActive(i)} style={{ cursor: 'pointer', width: 38, height: 4, borderRadius: 4, background: i === active ? 'var(--accent)' : 'var(--border-strong)', transition: 'background .3s' }}></span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const CITIES = [
  { x: 47, y: 17, c: 'Gdańsk' }, { x: 13, y: 25, c: 'Szczecin' }, { x: 29, y: 39, c: 'Poznań' },
  { x: 60, y: 37, c: 'Warszawa' }, { x: 31, y: 53, c: 'Wrocław' }, { x: 48, y: 45, c: 'Łódź' },
  { x: 50, y: 62, c: 'Kraków' }, { x: 72, y: 46, c: 'Lublin' },
];
const CITY_DOTS = [{ x: 40, y: 30 }, { x: 74, y: 28 }, { x: 67, y: 58 }, { x: 22, y: 47 }];
function PolandMap({ small }) {
  const PL = (typeof window !== 'undefined' && window.POLAND) || { vbW: 100, vbH: 94.7, paths: [], cities: [] };
  const cities = (PL.cities || [])
    .map((c) => {
      if (c.c === 'Kraków') return { ...c, x: 57.5, y: 77 };
      if (c.c === 'Warszawa') return { ...c, x: 63, y: 43 };
      return c;
    });
  const wrapStyle = small
    ? { position: 'absolute', inset: 0, background: 'var(--surface-2)', overflow: 'hidden' }
    : { aspectRatio: `${PL.vbW}/${PL.vbH}`, background: 'var(--surface-2)', borderRadius: 'var(--r-lg)', border: '1px solid var(--border)', overflow: 'hidden' };
  return (
    <div className="map-wrap" style={wrapStyle}>
      <svg viewBox={`0 0 ${PL.vbW} ${PL.vbH}`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', padding: small ? 12 : 18, boxSizing: 'border-box' }} preserveAspectRatio="xMidYMid meet">
        <defs>
          <linearGradient id="pl" x1="0" y1="0" x2="0.7" y2="1">
            <stop offset="0" stopColor="var(--accent)" stopOpacity="0.24" />
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0.05" />
          </linearGradient>
        </defs>
        <g>
          {PL.paths.map((d, i) => (
            <path key={'p' + i} d={d} fill="url(#pl)" stroke="var(--accent-line)" strokeWidth="0.35" strokeLinejoin="round" />
          ))}
        </g>
        {cities.map((c, i) => (
          <g key={i} transform={`translate(${c.x} ${c.y})`}>
            <circle className="pl-ring" cx="0" cy="0" r="1.5" fill="var(--green)" />
            <circle className="pl-dot" cx="0" cy="0" r="1.5" fill="var(--green)" />
            <text className="pl-lbl" x="0" y="-3.2">{c.c}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

function TapToPayVisual() {
  return (
    <div className="pay-visual">
      <div className="terminal">
        <div className="card-float">
          <div className="chip"></div>
          <div className="num">•••• •••• •••• 3090</div>
          <div className="row2"><span>L. MELSEN</span><span>09/35</span></div>
        </div>
        <div className="body">
          <div className="screen">
            <span className="tap-ring"></span>
            <span className="nfc"><Icon name="bolt" size={20} /></span>
            <span style={{ fontSize: 14 }}>Tap to pay</span>
          </div>
          <div className="keys">
            {['1', '2', '3', '4', '5', '6', '7', '8', '9'].map((k) => <div className="key" key={k}>{k}</div>)}
            <div className="key r"><Icon name="plus" size={16} style={{ transform: 'rotate(45deg)' }} /></div>
            <div className="key">0</div>
            <div className="key g"><Icon name="check" size={16} /></div>
          </div>
        </div>
      </div>
    </div>
  );
}
function StepVisual({ active }) {
  if (active === 1) return <TapToPayVisual />;
  if (active === 2) return <img className="step-photo" src="assets/steps/return.jpg" alt="Grab a fully-charged power bank" />;
  if (active === 3) return <img className="step-photo" src="assets/steps/grab.jpg" alt="Return the power bank to any station" />;
  return <PolandMap small />;
}

function RentPowerbank() {
  const CABLES = [{ t: 'USB-C', ic: 'cable' }, { t: 'Lightning', ic: 'bolt' }, { t: 'MicroUSB', ic: 'cable' }];
  return (
    <section className="section" id="rent">
      <div className="wrap">
        <div className="media-2">
          <Reveal>
            <span className="eyebrow">The power bank</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Rent a power bank.</h2>
            <p className="lead" style={{ marginTop: 18 }}>
              Lightning-fast charging — a usable boost in just 30 minutes and a full charge in about an hour. Rent at one station, return at another. It's that simple.
            </p>
            <p className="lead" style={{ marginTop: 14 }}>
              Every power bank ships with three cables pre-attached, so it fits virtually any device — no adapters, no fuss.
            </p>
            <h3 className="h3" style={{ marginTop: 34, marginBottom: 16 }}>Attached cables</h3>
            <div className="row">
              {CABLES.map((c) => (
                <div className="chip" key={c.t}><span className="ic-dot"><Icon name={c.ic} size={16} /></span>{c.t}</div>
              ))}
            </div>
          </Reveal>
          <Reveal delay="d2">
            <div className="img-frame" style={{ aspectRatio: '4/3' }}>
              <img src="assets/marketing-1.jpg" alt="HelloCharge power banks in a station" />
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function TapAndGo() {
  return (
    <section className="section section--alt" id="pay">
      <div className="wrap">
        <div className="media-2">
          <Reveal>
            <div className="terminal" style={{ marginTop: 72, marginBottom: 20 }}>
              <div className="card-float">
                <div className="chip"></div>
                <div className="num">•••• •••• •••• 3090</div>
                <div className="row2"><span>L. MELSEN</span><span>09/35</span></div>
              </div>
              <div className="body">
                <div className="screen">
                  <span className="tap-ring"></span>
                  <span className="nfc"><Icon name="bolt" size={20} /></span>
                  <span style={{ fontSize: 14 }}>Tap to pay</span>
                </div>
                <div className="keys">
                  {['1','2','3','4','5','6','7','8','9'].map((k) => <div className="key" key={k}>{k}</div>)}
                  <div className="key r"><Icon name="plus" size={16} style={{ transform: 'rotate(45deg)' }} /></div>
                  <div className="key">0</div>
                  <div className="key g"><Icon name="check" size={16} /></div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay="d2">
            <span className="eyebrow">Payment</span>
            <h2 className="h2" style={{ marginTop: 16 }}>Tap and go.</h2>
            <p className="lead" style={{ marginTop: 16 }}>
              Tap your card or insert it into the terminal. The moment payment is accepted, a power bank ejects and your session begins.
            </p>
            <h3 className="h3" style={{ marginTop: 30 }}>Or scan the QR code.</h3>
            <p className="lead" style={{ marginTop: 12 }}>
              Every station carries a QR code — scan it with your camera or the HelloCharge app, confirm payment, and you're charging.
            </p>
            <h3 className="h3" style={{ marginTop: 30, marginBottom: 16 }}>Accepted methods</h3>
            <div className="pay-methods">
              <span className="pay-tile" aria-label="Visa">
                <svg width="42" height="15" viewBox="0 0 44 16" role="img">
                  <text x="22" y="13" textAnchor="middle" fontFamily="'Plus Jakarta Sans', Arial, sans-serif" fontWeight="800" fontStyle="italic" fontSize="15" letterSpacing="0.4" fill="#1434CB">VISA</text>
                </svg>
              </span>
              <span className="pay-tile" aria-label="Mastercard">
                <svg width="38" height="25" viewBox="0 0 40 26" role="img">
                  <circle cx="15.5" cy="13" r="9.5" fill="#EB001B"/>
                  <circle cx="24.5" cy="13" r="9.5" fill="#F79E1B"/>
                  <path d="M20 4.63a9.5 9.5 0 0 1 0 16.74 9.5 9.5 0 0 1 0-16.74z" fill="#FF5F00"/>
                </svg>
              </span>
              <span className="pay-tile" aria-label="Apple Pay">
                <svg width="50" height="20" viewBox="0 0 54 24" role="img">
                  <g transform="translate(1.5,2) scale(0.83)" fill="#000">
                    <path d="M17.543 12.65c-.024-2.66 2.175-3.93 2.275-3.99-1.24-1.81-3.17-2.06-3.85-2.09-1.64-.17-3.2.96-4.03.96-.83 0-2.11-.94-3.47-.91-1.79.03-3.44 1.04-4.36 2.64-1.86 3.23-.48 8 1.33 10.62.88 1.28 1.93 2.72 3.31 2.67 1.33-.05 1.83-.86 3.44-.86 1.6 0 2.06.86 3.47.83 1.43-.02 2.34-1.31 3.22-2.6 1.01-1.49 1.43-2.93 1.45-3.01-.03-.01-2.78-1.07-2.81-4.25M14.97 4.36c.73-.89 1.23-2.12 1.09-3.36-1.06.04-2.34.71-3.1 1.59-.68.78-1.27 2.04-1.11 3.24 1.18.09 2.39-.6 3.12-1.47z"/>
                  </g>
                  <text x="25" y="17.5" fontFamily="'Plus Jakarta Sans', -apple-system, Arial, sans-serif" fontWeight="600" fontSize="15" fill="#000">Pay</text>
                </svg>
              </span>
              <span className="pay-tile" aria-label="Google Pay">
                <svg width="50" height="18" viewBox="0 0 72 24" role="img">
                  <g transform="translate(0,0)">
                    <path fill="#4285F4" d="M23 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h6.18a5.3 5.3 0 0 1-2.29 3.48v2.89h3.7C21.74 18.66 23 15.7 23 12.25z"/>
                    <path fill="#34A853" d="M12 23c3.1 0 5.7-1.03 7.6-2.79l-3.71-2.89c-1.03.69-2.35 1.1-3.89 1.1-3 0-5.54-2.03-6.45-4.75H1.71v2.98A11.5 11.5 0 0 0 12 23z"/>
                    <path fill="#FBBC04" d="M5.55 13.67a6.9 6.9 0 0 1 0-4.34V6.35H1.71a11.5 11.5 0 0 0 0 10.3l3.84-2.98z"/>
                    <path fill="#EA4335" d="M12 5.5c1.69 0 3.2.58 4.4 1.72l3.28-3.28C17.7 2.06 15.1 1 12 1 7.5 1 3.62 3.58 1.71 6.35l3.84 2.98C6.46 7.53 9 5.5 12 5.5z"/>
                  </g>
                  <text x="28" y="17.5" fontFamily="'Plus Jakarta Sans', Arial, sans-serif" fontWeight="600" fontSize="15" fill="#5F6368">Pay</text>
                </svg>
              </span>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const PERKS = ['Maximum rental time of 24 hours', 'Return your power bank at any location', 'Fully refundable deposit'];
  return (
    <section className="section" id="pricing">
      <div className="wrap">
        <Reveal className="sec-head center" style={{}}>
          <span className="eyebrow center">Pricing</span>
          <h2 className="h2">Simple, honest pricing.</h2>
          <p className="lead">Pay by the hour with a daily cap — rates start from 3.99 PLN and vary slightly by location, never a surprise.</p>
        </Reveal>
        <div className="pricing-grid" style={{ marginTop: 50 }}>
          <Reveal>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, height: '100%' }}>
              <div className="price-card feature">
                <div className="pc-top">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div className="pc-ic"><Icon name="bolt" size={24} /></div>
                    <div className="pc-name">Power bank rental</div>
                  </div>
                  <div className="pc-price"><span className="cur">from PLN </span><b>3.99</b><small>per hour · varies by location</small></div>
                </div>
              </div>
              <div className="price-card">
                <div className="pc-top">
                  <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div className="pc-ic"><Icon name="award" size={24} /></div>
                    <div className="pc-name">Maximum daily fee</div>
                  </div>
                  <div className="pc-price"><span className="cur">PLN </span><b>25</b><small>per day cap</small></div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay="d2">
            <div className="price-card" style={{ height: '100%' }}>
              <h3 className="h3" style={{ marginBottom: 18 }}>With every rental</h3>
              <div className="rental-list">
                {PERKS.map((p) => (
                  <div className="ri" key={p}><span>{p}</span><span className="ok"><Icon name="check" size={15} /></span></div>
                ))}
              </div>
              <a className="btn btn-soft" href="https://m.hellocharge.pl" target="_blank" rel="noopener" style={{ marginTop: 26 }}>Start now<Icon name="arrow" size={18} className="arrow" /></a>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

const OFFERS = [
  { ic: 'clock', t: 'Flexible rental for every need', d: 'A quick top-up for an hour or all-day power on a road trip — you stay in control, and only pay for what you use.' },
  { ic: 'pin', t: 'Stations in convenient locations', d: 'We place stations in high-traffic spots — malls, cafés, hotels, transit hubs — so a charge is always within reach.' },
  { ic: 'refresh', t: 'Returns across the whole network', d: 'Pick up here, drop off there. Return your power bank at any HelloCharge station, no strings attached.' },
];
function AboutOffer() {
  const [tab, setTab] = cuState(0);
  const TABS = [
    { name: 'Our Mission', t: 'Sustainable power, everywhere', d: 'HelloCharge makes staying connected effortless. We build a shared network of power banks so no one is ever stranded with a dead phone.', img: 'assets/business-1.jpeg' },
    { name: 'Our Vision', t: 'A charger on every corner', d: 'We imagine a city where charging is a utility — ambient, reliable and green — powering people through every moment of their day.', img: 'assets/business-2.jpeg' },
    { name: 'Our Goals', t: 'Reach, reliability, reuse', d: 'Expand to every venue worth visiting, keep every station stocked and working, and extend the life of every battery we deploy.', img: 'assets/business-3.jpeg' },
  ];
  const T = TABS[tab];
  return (
    <section className="section section--alt" id="about">
      <div className="wrap">
        <Reveal className="sec-head center" style={{}}>
          <span className="eyebrow center">Our offer</span>
          <h2 className="h2">Stay connected wherever you are.</h2>
          <p className="lead">We designed our service for unmatched convenience, flexibility and reliability — so your devices stay charged without interruption.</p>
        </Reveal>
        <div className="feat-grid c3" style={{ marginTop: 50 }}>
          {OFFERS.map((o, i) => (
            <Reveal key={o.t} delay={`d${i + 1}`}>
              <div className="feat card hoverable spotlight" onMouseMove={useSpotlight()}>
                <div className="fi"><Icon name={o.ic} size={26} /></div>
                <h3 className="h3">{o.t}</h3>
                <p>{o.d}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <div style={{ marginTop: 80 }}>
          <Reveal className="center" style={{}}>
            <h2 className="h2" style={{ marginBottom: 20 }}>We believe in safe business support.</h2>
            <div className="mission-tabs">
              {TABS.map((t, i) => (
                <button key={i} className={`mission-tab ${i === tab ? 'active' : ''}`} onClick={() => setTab(i)}>{t.name}</button>
              ))}
            </div>
          </Reveal>
          <div className="media-2" style={{ marginTop: 44 }} key={tab}>
            <div className="img-frame fade-swap" style={{ aspectRatio: '4/3' }}>
              <img src={T.img} alt="HelloCharge product" />
            </div>
            <div className="fade-swap">
              <h3 className="h2" style={{ fontSize: 'clamp(24px,2.4vw,34px)' }}>{T.t}</h3>
              <p className="lead" style={{ marginTop: 18 }}>{T.d}</p>
              <div className="row" style={{ marginTop: 26 }}>
                <div className="chip"><span className="ic-dot"><Icon name="leaf" size={16} /></span>Eco-friendly</div>
                <div className="chip"><span className="ic-dot"><Icon name="shield" size={16} /></span>Certified safe</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { StatStrip, CustomerHero, VenueTypes, HowItWorks, PolandMap, RentPowerbank, TapAndGo, Pricing, AboutOffer });