// All non-hero sections in one file

// ---------- LOGISTYKA ----------
const SectionLogistics = ({ bg = 'bone' }) => (
  <section id="logistyka" className={`section section--${bg}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="01 · Logistyka transportu"
        title={<>Transport to nie<br/>dodatek. To produkt.</>}
        lede="Każde nasze zamówienie ma własną ciężarówkę z naszej floty. Bez podwykonawców, bez pośredników, bez „spróbujemy zorganizować”. Jeśli planujesz budowę — planujesz na naszych danych, nie na nadziei."
      />

      {/* Stats grid */}
      <div className="grid-4" style={{ marginBottom: 64, borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        {[
          { v: '48', u: 'h', l: 'MAX CZAS DOSTAWY' },
          { v: '38', u: '',  l: 'WŁASNYCH CIĘŻARÓWEK' },
          { v: '12', u: '',  l: 'MIAST W ZASIĘGU' },
          { v: '96', u: '%', l: 'DOSTAWY NA CZAS · 2025' },
        ].map((s, i) => (
          <div key={i} style={{ padding: '36px 28px', borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
            <div className="stat__value">{s.v}<span style={{ fontSize: 22, color: 'var(--accent)', marginLeft: 4 }}>{s.u}</span></div>
            <div className="stat__label">{s.l}</div>
          </div>
        ))}
      </div>

      {/* Map + process */}
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 40 }}>
        <div className="card" style={{ padding: 24, background: '#fff' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase' }}>Sieć dystrybucji · Polska</span>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-4)' }}>ETA w godzinach od Gorilla Commerce Błonie</span>
          </div>
          <PolandMap />
        </div>

        <div style={{ display: 'grid', gap: 0, alignContent: 'start' }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-3)', textTransform: 'uppercase', marginBottom: 16 }}>
            Co dzieje się z Twoim zamówieniem
          </div>
          {[
            { n: '01', t: 'Zapytanie i wycena', d: 'Odpowiedź ≤ 2 h robocze. Stała oferta przez 7 dni.' },
            { n: '02', t: 'Rezerwacja stanu', d: 'Towar jest „Twój” w WMS — nikt go nie sprzeda dalej.' },
            { n: '03', t: 'Załadunek + ważenie', d: 'Foto każdej palety, list przewozowy, plomba.' },
            { n: '04', t: 'Trasa + live tracking', d: 'GPS w panelu klienta. SMS do kierownika budowy.' },
            { n: '05', t: 'Rozładunek + podpis', d: 'HDS w cenie do 24 palet. Faktura w 24 h.' },
          ].map((s, i) => (
            <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '52px 1fr', gap: 16, padding: '20px 0', borderTop: i === 0 ? '1px solid var(--line)' : '1px solid var(--line-2)' }}>
              <span className="mono" style={{ fontSize: 13, color: 'var(--accent)', letterSpacing: '0.06em' }}>{s.n}</span>
              <div>
                <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 4 }}>{s.t}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.5 }}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ---------- KONFIGURATOR ----------
const SectionConfigurator = ({ bg = 'paper' }) => (
  <section id="konfigurator" className={`section ${bg === 'concrete' ? 'section--concrete' : ''}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="02 · Konfigurator produktu"
        title={<>Wycena, którą da się<br/>wziąć do zarządu.</>}
        lede="Wybierz produkt, kolor, format i ilość. Konfigurator dolicza transport, pokazuje zajętość ciężarówki i czas dostawy w czasie rzeczywistym. Przy zatwierdzeniu — zapytanie trafia bezpośrednio do Twojego opiekuna handlowego."
      />
      <Configurator />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 40 }}>
        {[
          { t: 'Dane realne, nie marketing', d: 'Ceny z aktualnego cennika, stan z WMS, ETA z trasówek. Bez wpisów „od/do”.' },
          { t: 'Wycena = ulotka', d: 'PDF z konfiguracją, wizualizacją koloru i specyfikacją idzie do Twojej skrzynki.' },
          { t: 'Indywidualne stawki', d: 'Po podpisaniu umowy ramowej widzisz swoje rabaty w czasie rzeczywistym.' },
        ].map((b, i) => (
          <div key={i} style={{ padding: 24, border: '1px solid var(--line)', borderRadius: 6, background: '#fff' }}>
            <div style={{ fontSize: 16, fontWeight: 500, marginBottom: 8 }}>{b.t}</div>
            <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.6 }}>{b.d}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- MAGAZYN ----------
const SectionWarehouse = ({ bg = 'paper' }) => (
  <section id="magazyn" className={`section ${bg === 'dark' ? 'section--dark' : bg === 'bone' ? 'section--bone' : ''}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="03 · Zarządzanie magazynem"
        title={<>Twój pulpit operacyjny.<br/>Nie czarna skrzynka.</>}
        lede="Każdy klient B2B z umową ramową dostaje dostęp do panelu — w czasie rzeczywistym widzi stany, rezerwacje, statusy zamówień, ETA ciężarówek i alerty niskich stanów na swoich SKU."
      />
    </div>

    {/* Dashboard breaks out wider for breathing room */}
    <div style={{ maxWidth: 1600, margin: '0 auto', padding: '0 24px' }}>
      <WarehouseDashboard />
    </div>

    <div className="wrap" style={{ marginTop: 40 }}>
      <div className="grid-3">
        {[
          { v: '1.2 s', l: 'ŚREDNI CZAS SKANU PALETY' },
          { v: '0.04 %', l: 'BŁĘDÓW INWENTARYZACJI · 2025' },
          { v: '24/7', l: 'WSPARCIE OPERATORA WMS' },
        ].map((s, i) => (
          <div key={i} style={{ padding: '28px 24px', border: '1px solid var(--line)', borderRadius: 6, background: bg === 'dark' ? '#131316' : '#fff' }}>
            <div style={{ fontSize: 40, fontWeight: 600, letterSpacing: '-0.03em' }}>{s.v}</div>
            <div className="stat__label" style={{ marginTop: 8 }}>{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- PROCES ----------
const SectionProcess = ({ bg = 'paper' }) => (
  <section id="proces" className={`section ${bg === 'concrete' ? 'section--concrete' : 'section--bone'}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="04 · Proces współpracy"
        title="Od pierwszego maila do faktury — 14 dni."
        lede="Tak wygląda standardowe onboarding partnera B2B. Skomplikowane projekty (umowy ramowe, indywidualne formaty, lakierowanie) wydłużają tylko etap kontraktowy."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
        {[
          { d: 'D 0',  t: 'Zapytanie', s: 'Konfigurator lub mail. Odpowiedź ≤ 2 h.' },
          { d: 'D 1',  t: 'Wycena + spec.', s: 'PDF do akceptacji + wzorniki w drodze.' },
          { d: 'D 3',  t: 'Wzorniki', s: 'Fizyczne próbki kolorów na budowie.' },
          { d: 'D 5',  t: 'Umowa', s: 'Ramowa lub jednorazowa, e-podpis.' },
          { d: 'D 7',  t: 'Rezerwacja', s: 'Towar oznaczony w WMS na Twoje SKU.' },
          { d: 'D ≤14', t: 'Dostawa', s: 'Pierwsza ciężarówka na placu budowy.' },
        ].map((s, i) => (
          <div key={i} style={{ position: 'relative', padding: '24px 16px', background: '#fff', border: '1px solid var(--line)', borderRadius: 6 }}>
            {i < 5 && <div style={{ position: 'absolute', top: 30, right: -12, color: 'var(--ink-4)', fontSize: 20 }}>→</div>}
            <div className="mono" style={{ fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em' }}>{s.d}</div>
            <div style={{ fontSize: 17, fontWeight: 500, marginTop: 10 }}>{s.t}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 6, lineHeight: 1.5 }}>{s.s}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- ZESPÓŁ ----------
const SectionTeam = ({ bg = 'paper' }) => (
  <section id="zespol" className={`section ${bg === 'dark' ? 'section--dark' : ''}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="05 · O nas"
        title={<>Rodzinna firma.<br/>Korporacyjne tempo.</>}
        lede="Trzecie pokolenie w klinkierze. Od 1994 r. dostarczamy do generalnych wykonawców w Polsce i sąsiednich rynkach. 142 osoby — produkcja, magazyn, dział handlowy i logistyczny pod jednym dachem w Błoniu."
      />
      <div className="grid-3">
        {[
          { i: 'KM', n: 'Krzysztof Majewski', r: 'Prezes Zarządu', q: '„Nigdy nie obiecujemy terminu, którego nie zrobimy.”', t: '34 lata w klinkierze' },
          { i: 'AS', n: 'Anna Sokołowska',   r: 'Dyrektor Logistyki', q: '„Każda paleta ma ETA. Każde ETA ma osobę.”', t: 'WMS · Floty · 18 lat' },
          { i: 'PT', n: 'Paweł Truszczyński', r: 'Szef Działu B2B', q: '„Twoje zamówienie ma jeden numer telefonu — mój.”', t: 'Sprzedaż B2B · 12 lat' },
        ].map(p => (
          <div key={p.n} className="card" style={{ padding: 28, background: bg === 'dark' ? '#131316' : '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
              <div style={{ width: 56, height: 56, borderRadius: 4, background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, fontSize: 18, letterSpacing: '0.04em' }}>{p.i}</div>
              <div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>{p.n}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{p.r}</div>
              </div>
            </div>
            <div style={{ fontSize: 15, lineHeight: 1.5, color: bg === 'dark' ? '#d8d3c8' : 'var(--ink-2)', minHeight: 60 }}>{p.q}</div>
            <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)' }}>{p.t}</div>
          </div>
        ))}
      </div>

      {/* Company timeline strip */}
      <div style={{ marginTop: 56, padding: 32, background: bg === 'dark' ? '#131316' : 'var(--bone)', borderRadius: 6 }}>
        <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--ink-4)', textTransform: 'uppercase', marginBottom: 24 }}>32 lata w branży</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative' }}>
          <div style={{ position: 'absolute', top: 6, left: 0, right: 0, height: 1, background: 'var(--line)' }} />
          {[
            { y: '1994', t: 'Założenie firmy w Błoniu' },
            { y: '2003', t: 'Pierwsza własna flota — 4 ciężarówki' },
            { y: '2011', t: 'Uruchomienie WMS, 12 ha magazynu' },
            { y: '2019', t: 'Otwarcie linii płytek elewacyjnych' },
            { y: '2025', t: 'Konfigurator B2B + portal klienta' },
          ].map((m, i) => (
            <div key={m.y} style={{ paddingTop: 24, paddingRight: 16, position: 'relative' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, width: 12, height: 12, borderRadius: '50%', background: i === 4 ? 'var(--accent)' : 'var(--ink)' }} />
              <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>{m.y}</div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, lineHeight: 1.5 }}>{m.t}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

// ---------- TESTIMONIALS ----------
const SectionTestimonials = ({ bg = 'paper' }) => (
  <section className={`section ${bg === 'concrete' ? 'section--concrete' : 'section--bone'}`}>
    <div className="wrap">
      <SectionHead
        eyebrow="06 · Opinie partnerów"
        title="To, co mówią ludzie, których nie ma na naszej fakturze."
        lede="Cytaty z rozmów z dyrektorami zakupów i kierownikami kontraktów — odgrane scenariusze, prawdziwe nazwiska na życzenie."
      />
      <div className="grid-2">
        {[
          { q: 'Mam jeden numer do Gorilla Commerce i jeden mail. Nie do call center, nie do bota. Do Pawła. To jest absurd, że to dziś wyróżnik.', a: 'Marta Wójcik', r: 'Dyrektor Zakupów, Generalny Wykonawca · ★★★★★' },
          { q: 'Konfigurator mi oszczędził dwa dni. Wycena, transport, ETA — wszystko w jednym PDF. Pokazałem zarządowi i podpisali w 20 minut.', a: 'Tomasz Bilski', r: 'Kierownik Kontraktu, Deweloper mieszkaniowy · ★★★★★' },
          { q: 'Inni dostawcy klinkieru mają „spróbujemy”. Gorilla Commerce ma „w piątek o 14:30, brama 3”. I tyle.', a: 'Renata Kowalik', r: 'Kupiec, Dystrybutor materiałów budowlanych · ★★★★★' },
          { q: 'Pierwszy raz widziałem, żeby producent klinkieru pokazał mi swój magazyn w aplikacji. Po prostu tego nie ma w branży.', a: 'Jacek Nowak', r: 'Architekt-koordynator, Pracownia HRT · ★★★★★' },
        ].map((t, i) => (
          <div key={i} className="card" style={{ padding: 32 }}>
            <div style={{ fontSize: 20, lineHeight: 1.45, color: 'var(--ink)', letterSpacing: '-0.005em', textWrap: 'pretty' }}>{t.q}</div>
            <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500 }}>{t.a}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--ink-4)', marginTop: 4, letterSpacing: '0.04em' }}>{t.r}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- FAQ ----------
const FAQ_ITEMS = [
  { q: 'Jaki jest minimalny próg zamówienia?', a: 'Jedna paleta dla zamówień transportowych. Próg upustowy zaczyna się od 24 palet (jedna ciężarówka). Powyżej 200 palet — indywidualne warunki, dedykowany opiekun, do uzgodnienia w ciągu 24 h.' },
  { q: 'Co jeśli potrzebuję klinkieru, którego nie ma w konfiguratorze?', a: 'Konfigurator pokazuje ok. 70% aktywnego asortymentu. Pełna baza to 187 SKU — pozostałe są na zapytanie, w tym formaty specjalne, kolory lakierowane i kształtki wykonane na zamówienie z 21-dniowym lead-time.' },
  { q: 'Czy obsługujecie rynki zagraniczne?', a: 'Tak — Litwa, Łotwa, Estonia, Czechy, Słowacja i wschodnie Niemcy. Transport własną flotą do 800 km od Błonia; powyżej — sprawdzony partner CTL. Dokumenty CMR i CE w cenie.' },
  { q: 'Jak wygląda płatność i odroczenie?', a: 'Pierwsze zamówienie — przelew przed wysyłką. Od drugiego — 14 dni odroczenia w standardzie. Partnerzy z umową ramową mają do 60 dni, z limitem ustalanym przez kontroling.' },
  { q: 'Czy klinkier jest objęty gwarancją?', a: 'Tak — 30 lat gwarancji na mrozoodporność i nasiąkliwość (klasa F2). Wszystkie SKU mają deklarację właściwości użytkowych (DoP) zgodną z PN-EN 771-1. Atest higieniczny PZH dla klinkieru drogowego.' },
  { q: 'Czy mogę odwiedzić magazyn i zakład?', a: 'Tak — zachęcamy. Wizyty „pokaż mi magazyn” umawiamy w 48 h. Dla deweloperów organizujemy raz na kwartał Open Day z prezesem i działem produkcji. Sprawdź najbliższy termin w sekcji kontaktowej.' },
];

const SectionFaq = ({ bg = 'paper' }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className={`section ${bg === 'dark' ? 'section--dark' : ''}`}>
      <div className="wrap">
        <SectionHead
          eyebrow="07 · FAQ"
          title="Najczęstsze pytania właścicieli firm."
          lede="Co zazwyczaj pyta dyrektor zarządu albo prezes deweloperki, zanim podpisze pierwszą umowę z dostawcą klinkieru."
        />
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {FAQ_ITEMS.map((item, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{
                    width: '100%', textAlign: 'left', padding: '24px 0', background: 'transparent', border: 'none', cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: 'inherit', font: 'inherit',
                  }}>
                  <span style={{ display: 'flex', alignItems: 'baseline', gap: 20 }}>
                    <span className="mono" style={{ fontSize: 12, color: 'var(--accent)', minWidth: 28 }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.01em' }}>{item.q}</span>
                  </span>
                  <span style={{
                    width: 28, height: 28, borderRadius: 4, border: '1px solid var(--line)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform .2s',
                    color: 'var(--ink-3)', fontSize: 14,
                  }}>+</span>
                </button>
                {isOpen && (
                  <div style={{ paddingBottom: 24, paddingLeft: 48, paddingRight: 48 }}>
                    <p style={{ fontSize: 15, color: bg === 'dark' ? '#c2bdb3' : 'var(--ink-3)', lineHeight: 1.6, maxWidth: '70ch' }}>{item.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ---------- KONTAKT ----------
const SectionContact = () => {
  const [form, setForm] = React.useState({ company: '', name: '', email: '', phone: '', volume: '8–24 palety', message: '' });
  const [sent, setSent] = React.useState(false);
  const change = (k, v) => setForm(f => ({ ...f, [k]: v }));

  return (
    <section id="kontakt" className="section section--dark" style={{ borderBottom: 'none' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'start' }}>
          {/* Left — copy + contacts */}
          <div>
            <Eyebrow>08 · Kontakt</Eyebrow>
            <h2 style={{ fontSize: 64, marginTop: 24, color: '#f3efe8', letterSpacing: '-0.03em' }}>
              Odpowiadamy<br/>
              w <span style={{ color: '#ff5b71' }}>2 godziny robocze.</span>
            </h2>
            <p style={{ fontSize: 17, color: '#b8b3a8', marginTop: 24, maxWidth: '46ch', lineHeight: 1.55 }}>
              Napisz, czego potrzebujesz — wracamy z wstępną wyceną, dostępnością i datą najbliższego transportu. Bez kalendarzy do umawiania, bez ankiet, bez tickerów wsparcia.
            </p>

            <div style={{ display: 'grid', gap: 20, marginTop: 48 }}>
              <ContactRow label="DZIAŁ B2B" name="Paweł Truszczyński" detail="pawel.t@gorillacommerce.com · +48 22 480 18 14" />
              <ContactRow label="DZIAŁ LOGISTYKI" name="Anna Sokołowska" detail="logistyka@gorillacommerce.com · +48 22 480 18 22" />
              <ContactRow label="MAGAZYN · BŁONIE" name="ul. Klinkierowa 12, 05-870 Błonie" detail="Pn–Pt 6:00 – 22:00 · Sob 6:00 – 14:00" />
            </div>
          </div>

          {/* Right — form */}
          <div className="card" style={{ padding: 32, background: '#131316', borderColor: '#232327' }}>
            {sent ? (
              <div style={{ padding: '60px 20px', textAlign: 'center' }}>
                <div className="mono" style={{ color: '#ff5b71', fontSize: 11, letterSpacing: '0.14em' }}>● ZAPYTANIE WYSŁANE</div>
                <div style={{ fontSize: 24, marginTop: 16, color: '#f3efe8' }}>Dzięki, {form.name.split(' ')[0] || 'do usłyszenia'}.</div>
                <div style={{ color: '#b8b3a8', marginTop: 12, fontSize: 14 }}>
                  Paweł wraca do Ciebie w ciągu 2 godzin roboczych.<br/>
                  Numer zgłoszenia: <span className="mono" style={{ color: '#f3efe8' }}>#KM-26{Math.floor(100 + Math.random() * 900)}</span>
                </div>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'grid', gap: 16 }}>
                <DarkField label="FIRMA *" value={form.company} onChange={v => change('company', v)} placeholder="np. Budimex S.A." />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <DarkField label="IMIĘ I NAZWISKO *" value={form.name} onChange={v => change('name', v)} placeholder="Jan Kowalski" />
                  <DarkField label="STANOWISKO" value={form.phone} onChange={v => change('phone', v)} placeholder="Dyrektor Zakupów" />
                </div>
                <DarkField label="E-MAIL SŁUŻBOWY *" value={form.email} onChange={v => change('email', v)} placeholder="jan.kowalski@firma.pl" type="email" />
                <div>
                  <label className="field" style={{ color: '#8a8682' }}>SZACOWANA SKALA</label>
                  <select value={form.volume} onChange={e => change('volume', e.target.value)} style={darkInput}>
                    <option>≤ 8 palet — pojedyncza dostawa</option>
                    <option>8–24 palety — jeden transport</option>
                    <option>24–80 palet — projekt</option>
                    <option>80–200 palet — umowa ramowa</option>
                    <option>&gt; 200 palet — strategiczne partnerstwo</option>
                  </select>
                </div>
                <DarkField multi label="OPIS PROJEKTU" value={form.message} onChange={v => change('message', v)} placeholder="np. 80 palet czerwonej cegły na elewację, dostawa na plac w Wilanowie, start 14 czerwca." />
                <button type="submit" className="btn btn--primary" style={{ justifyContent: 'center', marginTop: 8 }}>
                  Wyślij zapytanie <Arrow />
                </button>
                <div className="mono" style={{ fontSize: 10, color: '#6a655e', textAlign: 'center', letterSpacing: '0.06em' }}>
                  Klikając „Wyślij” akceptujesz politykę prywatności i kontakt handlowy
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

const ContactRow = ({ label, name, detail }) => (
  <div style={{ paddingBottom: 16, borderBottom: '1px solid #1f1f22' }}>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.14em', color: '#6a655e' }}>{label}</div>
    <div style={{ fontSize: 15, fontWeight: 500, marginTop: 6, color: '#f3efe8' }}>{name}</div>
    <div className="mono" style={{ fontSize: 12, color: '#b8b3a8', marginTop: 4 }}>{detail}</div>
  </div>
);

const darkInput = {
  background: '#0a0a0c',
  border: '1px solid #2a2a2c',
  color: '#f3efe8',
  borderRadius: 4,
  padding: '12px 14px',
  width: '100%',
  font: 'inherit',
  outline: 'none',
};

const DarkField = ({ label, value, onChange, placeholder, type = 'text', multi = false }) => (
  <div>
    <label className="field" style={{ color: '#8a8682' }}>{label}</label>
    {multi
      ? <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={3} style={darkInput} />
      : <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={darkInput} />}
  </div>
);

Object.assign(window, {
  SectionLogistics, SectionConfigurator, SectionWarehouse, SectionProcess,
  SectionTeam, SectionTestimonials, SectionFaq, SectionContact,
});