// Variant A — Editorial / Magazyn
// Inspiracja: Kinfolk, Cereal, magazyny papierowe.
// Off-white tła, ochra/terakota jako jedyny akcent.
// Asymetryczny grid, duża typografia Fraunces.
//
// Layout hero: lewy align z dużą cyfrą wydania "N°01"
// i headlinem ułożonym jak okładka magazynu.

const VariantEditorial = ({ heroLayout = 'left', onOpenBrandForm, paletteOverride }) => {
  const palette = {
    bg: '#f5f1e8',
    bgAlt: '#ebe5d6',
    bgDark: '#1a1814',
    text: '#1a1814',
    textMute: 'rgba(26,24,20,0.62)',
    line: 'rgba(26,24,20,0.18)',
    accent: '#b54e2c',
    ...(paletteOverride || {}),
  };

  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: palette.bg,
      color: palette.text,
      fontFamily: 'Inter, system-ui, sans-serif',
      position: 'relative',
    }}>
      <DBPCtx.Provider value={palette}>
        <EditorialContent palette={palette} heroLayout={heroLayout} onOpenBrandForm={onOpenBrandForm} />
      </DBPCtx.Provider>
    </div>
  );
};

function EditorialContent({ palette, heroLayout, onOpenBrandForm }) {
  const { isMobile, isTablet } = useBreakpoint();
  const [modalOpen, setModalOpen] = React.useState(false);
  const [brandSubmitStatus, setBrandSubmitStatus] = React.useState(() => getBrandSubmitStatus());
  const openModal = () => { onOpenBrandForm ? onOpenBrandForm() : setModalOpen(true); };

  React.useEffect(() => {
    if (!brandSubmitStatus) return;
    clearBrandSubmitStatus();
    const timeoutId = window.setTimeout(() => setBrandSubmitStatus(''), 6000);
    return () => window.clearTimeout(timeoutId);
  }, [brandSubmitStatus]);

  const pageX = isMobile ? 20 : (isTablet ? 32 : 64);
  const sectionY = isMobile ? 72 : (isTablet ? 96 : 120);
  const headingL = isMobile ? 40 : (isTablet ? 48 : 56);
  const headingXL = isMobile ? 42 : (isTablet ? 54 : 64);

  return (
    <>
      {/* TOP NAV */}
      <header style={{
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'center',
        gap: isMobile ? 18 : 24,
        padding: `${isMobile ? 18 : 24}px ${pageX}px`,
        borderBottom: `1px solid ${palette.line}`,
      }}>
        <div style={{ fontFamily: 'Fraunces, serif', fontWeight: 500, fontSize: isMobile ? 20 : 22, letterSpacing: -0.4 }}>
          Dobre <span style={{ fontStyle: 'italic', color: palette.accent }}>bo z Polski</span>
        </div>
        <nav style={{
          display: 'flex',
          gap: isMobile ? 18 : 32,
          width: isMobile ? '100%' : 'auto',
          overflowX: isMobile ? 'auto' : 'visible',
          paddingBottom: isMobile ? 4 : 0,
          fontSize: 14,
          color: palette.textMute,
          whiteSpace: 'nowrap',
        }}>
          <a href="#dlaczego" style={{ color: 'inherit', textDecoration: 'none' }}>Dlaczego</a>
          <a href="#znajdziesz" style={{ color: 'inherit', textDecoration: 'none' }}>Co znajdziesz</a>
          <a href="#newsletter" style={{ color: 'inherit', textDecoration: 'none' }}>Newsletter</a>
          <a href="#" onClick={(e) => { e.preventDefault(); openModal(); }} style={{ color: palette.accent, textDecoration: 'none', fontWeight: 500 }}>Zgłoś markę →</a>
        </nav>
      </header>

      {brandSubmitStatus === 'success' && (
        <div style={{
          padding: `${isMobile ? 14 : 16}px ${pageX}px`,
          background: palette.bgAlt,
          borderBottom: `1px solid ${palette.line}`,
        }}>
          <div style={{
            maxWidth: 900,
            fontSize: isMobile ? 14 : 15,
            lineHeight: 1.5,
            color: palette.text,
          }}>
            Dzieki, zgłoszenie zostało wysłane. Jeśli marka będzie pasować do projektu, odezwiemy się mailowo.
          </div>
        </div>
      )}

      {/* HERO — magazine-cover layout */}
      <section style={{
        padding: heroLayout === 'fullbleed'
          ? `${isMobile ? 56 : 80}px 0 ${isMobile ? 72 : 100}px`
          : `${isMobile ? 56 : 80}px ${pageX}px ${isMobile ? 72 : 100}px`,
        position: 'relative',
      }}>
        <EditorialHero palette={palette} layout={heroLayout} />
      </section>

      {/* DLACZEGO — manifesto */}
      <section id="dlaczego" style={{
        padding: `${sectionY}px ${pageX}px`,
        borderTop: `1px solid ${palette.line}`,
        background: palette.bgAlt,
      }}>
        <ScrollReveal>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : (isTablet ? '140px 1fr' : '180px 1fr'),
            gap: isMobile ? 24 : 64,
            maxWidth: 1100,
          }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: palette.textMute, paddingTop: isMobile ? 0 : 12 }}>
              N° 01<br/>— Manifest
            </div>
            <div>
              <h2 style={{
                fontFamily: 'Fraunces, serif', fontWeight: 400,
                fontSize: isMobile ? 34 : 48, lineHeight: 1.18, letterSpacing: isMobile ? -0.5 : -1,
                margin: 0,
              }}>
                W Polsce są tysiące świetnych marek,
                o których <em style={{ color: palette.accent, fontWeight: 500 }}>większość ludzi nigdy nie słyszała</em>.
              </h2>
              <p style={{
                fontSize: isMobile ? 16 : 19, lineHeight: 1.55,
                color: palette.textMute, marginTop: isMobile ? 24 : 32, maxWidth: 680,
              }}>
                Nie chcemy budować kolejnego katalogu. Chcemy pokazywać te firmy tak,
                jak na to zasługują — z szacunkiem do rzemiosła, z dobrym zdjęciem,
                z historią człowieka, który to robi. <br/><br/>
                Co tydzień jedna marka. Czasem mała, czasem znana, zawsze warta.
              </p>
            </div>
          </div>
        </ScrollReveal>
      </section>

      {/* CO TU ZNAJDZIESZ — interaktywny explorer kategorii */}
      <section id="znajdziesz" style={{ padding: `${sectionY}px ${pageX}px ${isMobile ? 88 : 140}px` }}>
        <ScrollReveal>
          <div style={{
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            justifyContent: 'space-between',
            alignItems: isMobile ? 'flex-start' : 'baseline',
            gap: isMobile ? 14 : 24,
            marginBottom: isMobile ? 36 : 56,
            borderBottom: `1px solid ${palette.line}`,
            paddingBottom: 24,
          }}>
            <h2 style={{
              fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: headingL,
              margin: 0, letterSpacing: isMobile ? -0.8 : -1.5, lineHeight: 1,
            }}>Co tu znajdziesz</h2>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: palette.textMute }}>
              Sześć kategorii · {CATEGORIES.reduce((acc, c) => acc + (CATEGORY_DETAILS[c.num]?.subs.length || 0), 0)} podkategorii
            </div>
          </div>
        </ScrollReveal>
        <CategoryExplorer palette={palette} />
      </section>

      {/* POKAŻEMY CI — "Did you know it's polish?" */}
      <section style={{
        padding: `${sectionY}px ${pageX}px`,
        background: palette.bgDark,
        color: '#f5f1e8',
      }}>
        <ScrollReveal>
          <div style={{ maxWidth: 700 }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', opacity: 0.5, marginBottom: 16 }}>
              N° 02 — Pokażemy Ci
            </div>
            <h2 style={{
              fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: headingXL,
              margin: 0, lineHeight: 1.05, letterSpacing: isMobile ? -0.8 : -1.8,
            }}>
              Nie wiedziałeś,
              że to <em style={{ color: '#e89272' }}>polskie</em>?
            </h2>
          </div>
        </ScrollReveal>
        <div style={{ marginTop: isMobile ? 44 : 72, display: 'flex', flexDirection: 'column', borderTop: '1px solid rgba(255,255,255,0.12)' }}>
          {DID_YOU_KNOW.map((it, i) => (
            <ScrollReveal key={i} delay={i * 50}>
              <DidYouKnowRow item={it} index={i + 1} />
            </ScrollReveal>
          ))}
        </div>
      </section>

      {/* NEWSLETTER */}
      <section id="newsletter" style={{ padding: `${isMobile ? 80 : 140}px ${pageX}px`, background: palette.bg }}>
        <ScrollReveal>
          <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center' }}>
            <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: palette.accent, marginBottom: 24 }}>
              Niedzielny newsletter
            </div>
            <h2 style={{
              fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: headingL,
              margin: '0 0 20px', lineHeight: 1.1, letterSpacing: isMobile ? -0.8 : -1.3,
            }}>
              Co tydzień jedna polska perełka.
              <em style={{ color: palette.accent }}> Prosto na Twój email.</em>
            </h2>
            <p style={{ fontSize: isMobile ? 16 : 17, color: palette.textMute, lineHeight: 1.55, margin: '0 auto 40px', maxWidth: 520 }}>
              Bez spamu, bez sprzedaży. Tylko jedna marka, jeden produkt, jedna historia —
              w niedzielę rano, do kawy.
            </p>
            <div style={{ maxWidth: 480, margin: '0 auto' }}>
              <NewsletterForm variant="editorial" cta="Zapisz się" />
            </div>
          </div>
        </ScrollReveal>
      </section>

      {/* SOCIAL + FORMA DLA FIRM */}
      <section style={{
        padding: `${isMobile ? 72 : 100}px ${pageX}px`,
        background: palette.bgAlt,
        display: 'grid', gridTemplateColumns: isDesktopWidth() ? '1fr 1fr' : '1fr', gap: isMobile ? 44 : 64,
        alignItems: 'stretch',
        borderTop: `1px solid ${palette.line}`,
      }}>
        <div>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: palette.textMute, marginBottom: 16 }}>
            Codziennie na Instagramie
          </div>
          <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: isMobile ? 32 : 38, margin: '0 0 20px', letterSpacing: -0.8, lineHeight: 1.15 }}>
            @dobre_bo_z_polski
          </h3>
          <p style={{ color: palette.textMute, fontSize: 16, lineHeight: 1.55, margin: '0 0 28px', maxWidth: 420 }}>
            Krótkie historie, kadrowanie produktów, behind-the-scenes z polskich warsztatów.
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(3, minmax(88px, 1fr))' : 'repeat(3, 1fr)', gap: 8, marginBottom: 24 }}>
            {['warsztat ceramika', 'pakowanie zamówień', 'narzędzia stolarza'].map((l, i) => (
              <Placeholder key={i} label={l} ratio="1/1" />
            ))}
          </div>
          <a href="https://www.instagram.com/dobre_bo_z_polski" target="_blank" rel="noopener noreferrer"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontWeight: 500, fontSize: 14, color: palette.text,
              textDecoration: 'underline', textUnderlineOffset: 4,
            }}>
            Obserwuj na Instagramie →
          </a>
        </div>

        <div style={{
          borderLeft: isDesktopWidth() ? `1px solid ${palette.line}` : 'none',
          borderTop: isDesktopWidth() ? 'none' : `1px solid ${palette.line}`,
          paddingLeft: isDesktopWidth() ? 64 : 0,
          paddingTop: isDesktopWidth() ? 0 : 44,
        }}>
          <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 2, textTransform: 'uppercase', color: palette.textMute, marginBottom: 16 }}>
            Dla marek
          </div>
          <h3 style={{ fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: isMobile ? 32 : 38, margin: '0 0 20px', letterSpacing: -0.8, lineHeight: 1.15 }}>
            Masz polską markę? <em style={{ color: palette.accent }}>Pokaż się u nas.</em>
          </h3>
          <p style={{ color: palette.textMute, fontSize: 16, lineHeight: 1.55, margin: '0 0 32px', maxWidth: 420 }}>
            Robisz coś w Polsce — manufakturę, kosmetyki, projekt, lokalne miejsce?
            Powiedz nam o sobie. Wybieramy z głową, ale chętnie poznajemy nowe historie.
          </p>
          <button onClick={openModal} style={{
            width: isMobile ? '100%' : 'auto',
            padding: '14px 28px',
            background: palette.text, color: '#f5f1e8',
            border: 'none', cursor: 'pointer',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 600, letterSpacing: 0.3,
          }}>Zgłoś swoją markę</button>
        </div>
      </section>

      {/* FOOTER */}
      <footer style={{
        padding: `${isMobile ? 36 : 48}px ${pageX}px ${isMobile ? 40 : 56}px`,
        borderTop: `1px solid ${palette.line}`,
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        gap: isMobile ? 24 : 32,
        justifyContent: 'space-between',
        alignItems: isMobile ? 'flex-start' : 'flex-end',
        background: palette.bg,
      }}>
        <div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 20, fontWeight: 500, marginBottom: 4 }}>
            Dobre <em style={{ color: palette.accent }}>bo z Polski</em>
          </div>
          <div style={{ fontSize: 13, color: palette.textMute }}>dobrebozpolski.pl · Startujemy wkrótce</div>
        </div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: isMobile ? 16 : 24, fontSize: 13, color: palette.textMute }}>
          <a href="#" style={{ color: 'inherit' }}>Polityka prywatności</a>
          <a href="#" style={{ color: 'inherit' }}>Kontakt</a>
        </div>
      </footer>

      <BrandSubmitModal open={modalOpen} onClose={() => setModalOpen(false)} variant="editorial" />
    </>
  );

  function isDesktopWidth() {
    return !isMobile && !isTablet;
  }
}

function EditorialHero({ palette, layout }) {
  const { isMobile, isTablet } = useBreakpoint();
  const pageX = isMobile ? 20 : (isTablet ? 32 : 64);
  const heroFontSize = layout === 'fullbleed'
    ? (isMobile ? 58 : (isTablet ? 96 : 168))
    : (isMobile ? 54 : (isTablet ? 86 : 132));

  const primaryLinkStyle = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    width: isMobile ? '100%' : 'auto',
    padding: isMobile ? '15px 18px' : '16px 26px',
    background: palette.text, color: palette.bg,
    textDecoration: 'none',
    fontSize: 15, fontWeight: 600, letterSpacing: 0.2,
    textAlign: 'center',
  };

  const secondaryLinkStyle = {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    width: isMobile ? '100%' : 'auto',
    padding: isMobile ? '12px 18px' : '16px 22px',
    color: palette.text, textDecoration: 'underline',
    textUnderlineOffset: 4,
    fontSize: 15, fontWeight: 500,
    textAlign: 'center',
  };

  const headline = (
    <h1 style={{
      fontFamily: 'Fraunces, serif',
      fontWeight: 400,
      fontSize: heroFontSize,
      lineHeight: isMobile ? 0.98 : 0.95,
      letterSpacing: isMobile ? -1.4 : -3.5,
      margin: 0,
      overflowWrap: 'break-word',
    }}>
      Dobre.<br/>
      <em style={{ color: palette.accent, fontWeight: 500 }}>Bo z Polski.</em>
    </h1>
  );

  const sub = (
    <p style={{
      fontSize: isMobile ? 16 : 19, lineHeight: 1.5,
      color: palette.textMute, margin: 0,
      maxWidth: 460,
    }}>
      Pokazujemy lokalne marki, rzemieślników, produkty i usługi
      tworzone w Polsce. Co tydzień nowe odkrycie.
    </p>
  );

  const cta = (
    <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: 14, alignItems: 'center', flexWrap: 'wrap', width: isMobile ? '100%' : 'auto' }}>
      <a href="https://www.instagram.com/dobre_bo_z_polski" target="_blank" rel="noopener noreferrer" style={primaryLinkStyle}>
        Dołącz do społeczności <span aria-hidden>→</span>
      </a>
      <a href="#znajdziesz" style={secondaryLinkStyle}>
        Co tu znajdziesz?
      </a>
    </div>
  );

  const proof = (
    <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      gap: isMobile ? 12 : 32,
      marginTop: isMobile ? 28 : 36,
      fontSize: 13,
      color: palette.textMute,
      fontFamily: '"JetBrains Mono", monospace',
      letterSpacing: 0.4,
    }}>
      <span>● Startujemy wkrótce</span>
      <span style={{ opacity: 0.6 }}>Niedzielny newsletter</span>
      <span style={{ opacity: 0.6 }}>Codziennie na IG</span>
    </div>
  );

  if (layout === 'center') {
    return (
      <div style={{ textAlign: 'center', maxWidth: 980, margin: '0 auto' }}>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: palette.textMute, marginBottom: 28 }}>
          N° 01 · Wydanie pierwsze
        </div>
        {headline}
        <div style={{ marginTop: isMobile ? 28 : 36, display: 'flex', justifyContent: 'center' }}>{sub}</div>
        <div style={{ marginTop: isMobile ? 32 : 40, display: 'flex', justifyContent: 'center' }}>{cta}</div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>{proof}</div>
      </div>
    );
  }

  if (layout === 'fullbleed') {
    return (
      <div style={{ padding: `0 ${pageX}px` }}>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: palette.textMute, marginBottom: isMobile ? 28 : 36 }}>
          N° 01 · Wydanie pierwsze · Maj 2026
        </div>
        {headline}
        <div style={{
          marginTop: isMobile ? 32 : 48,
          display: 'grid',
          gridTemplateColumns: isMobile || isTablet ? '1fr' : '1fr auto',
          gap: isMobile ? 28 : 64,
          alignItems: 'end',
        }}>
          <div>{sub}{proof}</div>
          {cta}
        </div>
      </div>
    );
  }

  // default: left-aligned magazine cover
  return (
    <div style={{ display: 'grid', gridTemplateColumns: isMobile || isTablet ? '1fr' : '1.3fr 1fr', gap: isMobile ? 40 : 56, alignItems: 'center' }}>
      <div>
        <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 3, textTransform: 'uppercase', color: palette.textMute, marginBottom: 28 }}>
          N° 01 · Wydanie pierwsze
        </div>
        {headline}
        <div style={{ marginTop: isMobile ? 28 : 36 }}>{sub}</div>
        <div style={{ marginTop: isMobile ? 32 : 40 }}>{cta}</div>
        {proof}
      </div>
      <div style={{ position: 'relative', maxWidth: isMobile ? '100%' : (isTablet ? 520 : 'none') }}>
        <Placeholder label="zdjęcie produktu na warsztacie / 4:5" ratio={isMobile ? '5/4' : '4/5'} />
        <div style={{
          position: 'absolute', top: isMobile ? 12 : -16, right: isMobile ? 12 : -16,
          background: palette.accent, color: palette.bg,
          padding: '8px 14px',
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase',
          fontWeight: 600,
        }}>Marka tygodnia</div>
      </div>
    </div>
  );
}

function CategoryTile({ cat, palette }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        cursor: 'pointer',
        paddingTop: 24,
        borderTop: `1px solid ${hover ? palette.text : palette.line}`,
        transition: 'border-color .25s',
      }}>
      <div style={{
        fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 1.5,
        color: hover ? palette.accent : palette.textMute,
        transition: 'color .25s',
        marginBottom: 14,
      }}>{cat.num}</div>
      <h3 style={{
        fontFamily: 'Fraunces, serif', fontWeight: 400,
        fontSize: 32, margin: '0 0 10px', letterSpacing: -0.6,
        transform: hover ? 'translateX(6px)' : 'translateX(0)',
        transition: 'transform .25s',
      }}>{cat.name}</h3>
      <p style={{ fontSize: 15, color: palette.textMute, lineHeight: 1.45, margin: 0 }}>{cat.desc}</p>
    </div>
  );
}

function DidYouKnowRow({ item, index }) {
  const { isMobile } = useBreakpoint();
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: isMobile ? '24px 0' : '28px 0',
        borderBottom: '1px solid rgba(255,255,255,0.12)',
        display: 'grid',
        gridTemplateColumns: isMobile ? '36px 1fr' : '60px 1fr auto',
        alignItems: 'baseline',
        gap: isMobile ? 16 : 32,
        cursor: 'pointer',
        background: hover ? 'rgba(255,255,255,0.03)' : 'transparent',
        transition: 'background .2s',
      }}>
      <div style={{ fontFamily: '"JetBrains Mono", monospace', fontSize: 12, opacity: 0.5 }}>
        {String(index).padStart(2, '0')}
      </div>
      <div style={{
        fontFamily: 'Fraunces, serif', fontWeight: 300,
        fontSize: isMobile ? 22 : 26, lineHeight: 1.25, letterSpacing: -0.4,
      }}>
        <span style={{ opacity: 0.85 }}>{item.what}</span>
        {' — '}
        <em style={{ color: '#e89272', fontStyle: 'italic', fontWeight: 400 }}>{item.who}.</em>
      </div>
      {!isMobile && (
        <div style={{
          fontSize: 18, opacity: hover ? 1 : 0.4,
          transition: 'opacity .2s, transform .2s',
          transform: hover ? 'translateX(8px)' : 'translateX(0)',
        }}>→</div>
      )}
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// CATEGORY EXPLORER
// Interaktywny scroll-explorer: lewa kolumna = sticky lista 6 kategorii,
// prawa kolumna = aktywna kategoria z opisem, listą podkategorii i poziomo
// scrollowaną wstęgą placeholderów marek. Klik kategorii zmienia widok
// z subtelną animacją cross-fade. Klik podkategorii filtruje wstęgę.
// ─────────────────────────────────────────────────────────────────────────

const CATEGORY_DETAILS = {
  '01': {
    intro: 'Marki z charakterem — moda, akcesoria, biżuteria. Firmy, które warto znać po nazwisku, nie po reklamie.',
    subs: [
      { name: 'Moda', count: 24, sample: ['kurtka tygodnia', 'sukienka — Warszawa', 'koszula lniana', 'sweter z wełny', 'spodnie z bawełny', 'płaszcz wełniany'] },
      { name: 'Akcesoria', count: 18, sample: ['skórzany pasek', 'czapka z wełny', 'apaszka jedwabna', 'rękawiczki', 'okulary', 'parasol'] },
      { name: 'Torebki', count: 12, sample: ['skóra naturalna', 'tote z płótna', 'plecak miejski', 'crossbody', 'shopper', 'minaudière'] },
      { name: 'Biżuteria', count: 22, sample: ['srebrny pierścionek', 'kolczyki — bursztyn', 'naszyjnik', 'bransoletka', 'sygnet', 'wisior'] },
      { name: 'Obuwie', count: 9, sample: ['sneakery — Łódź', 'mokasyny', 'trampki', 'skórzane buty', 'kalosze', 'sandały'] },
      { name: 'Zegarki', count: 6, sample: ['mechaniczny', 'minimalistyczny', 'klasyczny', 'pilotażowy', 'sportowy', 'damski'] },
    ],
  },
  '02': {
    intro: 'Manufaktury, warsztaty i ludzie, którzy robią rzeczy ręką. Mała skala, długie terminy, prawdziwa jakość.',
    subs: [
      { name: 'Ceramika', count: 14, sample: ['kubek toczony', 'miska — Bieszczady', 'wazon', 'talerz', 'czajniczek', 'doniczka'] },
      { name: 'Stolarstwo', count: 11, sample: ['stół dębowy', 'krzesło na zamówienie', 'półka', 'biurko', 'łóżko', 'taboret'] },
      { name: 'Skóra', count: 8, sample: ['portfel ręcznie szyty', 'pasek', 'etui', 'teczka', 'kabura', 'opaska'] },
      { name: 'Tkactwo', count: 7, sample: ['kilim', 'narzuta wełniana', 'serweta lniana', 'gobelin', 'dywan', 'pled'] },
      { name: 'Kowalstwo', count: 5, sample: ['nóż kuchenny', 'siekiera', 'haki', 'wieszak', 'klamka', 'okucie'] },
      { name: 'Witraż', count: 4, sample: ['lampa Tiffany', 'panel okienny', 'lustro', 'świecznik', 'sufit', 'mozaika'] },
    ],
  },
  '03': {
    intro: 'Miejsca z duszą — kawiarnie, piekarnie, bary i hotele, które mają konkretną historię i osobę za ladą.',
    subs: [
      { name: 'Kawiarnie', count: 32, sample: ['Warszawa — Praga', 'Kraków — Kazimierz', 'Wrocław — centrum', 'Gdańsk — port', 'Poznań — Jeżyce', 'Łódź — OFF'] },
      { name: 'Piekarnie', count: 19, sample: ['chleb na zakwasie', 'bagietki', 'rogale', 'drożdżówki', 'ciasta', 'pączki'] },
      { name: 'Bary', count: 22, sample: ['cocktail bar', 'wine bar', 'craft beer', 'whisky room', 'speakeasy', 'natural wine'] },
      { name: 'Hotele', count: 11, sample: ['butikowy — Sopot', 'guest house', 'pensjonat', 'apartamenty', 'pokoje', 'farma'] },
      { name: 'Restauracje', count: 28, sample: ['kuchnia polska', 'fine dining', 'bistro', 'farm-to-table', 'piekarnia-restauracja', 'street food'] },
      { name: 'Księgarnie', count: 8, sample: ['niezależna', 'antykwariat', 'specjalistyczna', 'art books', 'dziecięca', 'kawiarnio-księgarnia'] },
    ],
  },
  '04': {
    intro: 'Naturalne, etyczne, zaprojektowane w Polsce — kosmetyki które ludzie noszą po znajomym, nie po reklamie.',
    subs: [
      { name: 'Skincare', count: 26, sample: ['serum z witaminą C', 'krem nawilżający', 'olejek do twarzy', 'tonik', 'maska', 'peeling'] },
      { name: 'Zapachy', count: 9, sample: ['perfumy unisex', 'woda toaletowa', 'olejek zapachowy', 'mgiełka', 'roll-on', 'eau fraîche'] },
      { name: 'Włosy', count: 12, sample: ['szampon ziołowy', 'odżywka', 'olejek', 'maska', 'spray', 'serum'] },
      { name: 'Mydła', count: 14, sample: ['mydło glicerynowe', 'czarne', 'kawowe', 'aleppo', 'oliwkowe', 'kozie mleko'] },
      { name: 'Świece', count: 11, sample: ['sojowa — drewno', 'rzepakowa — bursztyn', 'aromaterapeutyczna', 'do masażu', 'podróżna', 'duża'] },
      { name: 'Naturalne', count: 18, sample: ['dezodorant', 'pasta do zębów', 'balsam do ust', 'olejek do brody', 'krem do rąk', 'masło shea'] },
    ],
  },
  '05': {
    intro: 'Meble, oświetlenie, ceramika, tekstylia — projekty z polskich studiów, które trafiają do hoteli w Lizbonie i Tokio.',
    subs: [
      { name: 'Meble', count: 17, sample: ['fotel — Gdańsk', 'sofa modułowa', 'stół', 'komoda', 'biurko', 'łóżko'] },
      { name: 'Oświetlenie', count: 14, sample: ['lampa stojąca', 'kinkiet mosiężny', 'plafon', 'lampa biurkowa', 'żyrandol', 'lampka nocna'] },
      { name: 'Ceramika', count: 12, sample: ['serwis stołowy', 'wazony', 'doniczki', 'misy dekoracyjne', 'tace', 'kubki'] },
      { name: 'Tekstylia', count: 10, sample: ['poduszki lniane', 'narzuta wełniana', 'zasłony', 'pled', 'koc', 'serwetki'] },
      { name: 'Plakaty', count: 23, sample: ['ilustracja', 'typografia', 'fotografia', 'archiwum', 'limitowany', 'A2'] },
      { name: 'Naczynia', count: 9, sample: ['szkło dmuchane', 'sztućce', 'deski', 'tace drewniane', 'karafki', 'kieliszki'] },
    ],
  },
  '06': {
    intro: 'Smaki z konkretnego miejsca w Polsce — gospodarstwa, manufaktury jedzenia, alkohole z lokalnych destylarni.',
    subs: [
      { name: 'Sery', count: 13, sample: ['oscypek', 'koryciński', 'kozi', 'pleśniowy', 'wędzony', 'twaróg ręczny'] },
      { name: 'Wędliny', count: 11, sample: ['kabanos', 'szynka dojrzewająca', 'kiełbasa wiejska', 'salami', 'pasztet', 'baleron'] },
      { name: 'Miody', count: 16, sample: ['lipowy', 'gryczany', 'rzepakowy', 'spadziowy', 'wrzosowy', 'akacjowy'] },
      { name: 'Konfitury', count: 9, sample: ['z czarnej porzeczki', 'z dyni', 'z aronii', 'śliwkowa', 'malinowa', 'z róży'] },
      { name: 'Alkohole', count: 18, sample: ['wódka — Mazowsze', 'gin — Bieszczady', 'whisky', 'cydr', 'craft beer', 'wino z Polski'] },
      { name: 'Herbaty', count: 7, sample: ['ziołowe mieszanki', 'liście malin', 'mięta', 'pokrzywa', 'rumianek', 'lipa'] },
    ],
  },
};

function CategoryExplorer({ palette }) {
  const { isMobile, isTablet } = useBreakpoint();
  const [activeNum, setActiveNum] = React.useState('01');
  const [activeSub, setActiveSub] = React.useState(0);
  const stripRef = React.useRef(null);

  const cat = CATEGORIES.find(c => c.num === activeNum);
  const detail = CATEGORY_DETAILS[activeNum];
  const sub = detail.subs[activeSub];
  const sideBleed = isMobile ? 20 : (isTablet ? 32 : 64);

  // Reset sub i scroll przy zmianie kategorii
  const switchCat = (num) => {
    setActiveNum(num);
    setActiveSub(0);
    if (stripRef.current) stripRef.current.scrollLeft = 0;
  };

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: isMobile || isTablet ? '1fr' : '320px 1fr',
      gap: isMobile ? 40 : 64,
      alignItems: 'start',
    }}>
      {/* LEFT — category list */}
      <div style={{ position: isMobile || isTablet ? 'relative' : 'sticky', top: 32 }}>
        <div style={{
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 2,
          textTransform: 'uppercase', color: palette.textMute, marginBottom: 20,
        }}>
          Wybierz kategorię
        </div>
        <ul style={{
          listStyle: 'none',
          padding: 0,
          margin: 0,
          display: isMobile ? 'grid' : 'block',
          gridTemplateColumns: isMobile ? '1fr' : undefined,
        }}>
          {CATEGORIES.map((c) => {
            const active = c.num === activeNum;
            return (
              <li key={c.num}>
                <button
                  onClick={() => switchCat(c.num)}
                  style={{
                    display: 'grid',
                    gridTemplateColumns: isMobile ? '34px 1fr 16px' : '40px 1fr 16px',
                    alignItems: 'baseline',
                    gap: isMobile ? 12 : 16,
                    width: '100%',
                    padding: isMobile ? '14px 0' : '18px 0',
                    border: 'none',
                    borderTop: `1px solid ${active ? palette.text : palette.line}`,
                    background: 'transparent',
                    color: 'inherit',
                    cursor: 'pointer',
                    fontFamily: 'inherit',
                    textAlign: 'left',
                    transition: 'border-color .25s',
                  }}
                  onMouseEnter={(e) => { if (!active) e.currentTarget.style.borderTopColor = palette.text; }}
                  onMouseLeave={(e) => { if (!active) e.currentTarget.style.borderTopColor = palette.line; }}
                >
                  <span style={{
                    fontFamily: '"JetBrains Mono", monospace', fontSize: 11, letterSpacing: 1.5,
                    color: active ? palette.accent : palette.textMute,
                    transition: 'color .25s',
                  }}>{c.num}</span>
                  <span style={{
                    fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: isMobile ? 22 : 26,
                    letterSpacing: -0.5, lineHeight: 1.1,
                    fontStyle: active ? 'italic' : 'normal',
                    color: active ? palette.accent : palette.text,
                    transition: 'color .25s, font-style .25s',
                  }}>{c.name}</span>
                  <span style={{
                    color: active ? palette.accent : 'transparent',
                    fontSize: 14,
                    transition: 'color .25s',
                  }}>→</span>
                </button>
              </li>
            );
          })}
          <li style={{ borderTop: `1px solid ${palette.line}`, height: 1 }} />
        </ul>
      </div>

      {/* RIGHT — active category panel (cross-fade on change) */}
      <div key={activeNum} style={{
        animation: 'dbpFade .35s ease-out',
        minHeight: isMobile || isTablet ? 'auto' : 560,
      }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', gap: 16,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 2,
          textTransform: 'uppercase', color: palette.textMute, marginBottom: 16,
        }}>
          <span>Kategoria {activeNum}</span>
          <span style={{ flex: 1, height: 1, background: palette.line }} />
          <span>{detail.subs.reduce((a, s) => a + s.count, 0)}+ marek</span>
        </div>
        <h3 style={{
          fontFamily: 'Fraunces, serif', fontWeight: 400, fontSize: isMobile ? 42 : (isTablet ? 52 : 64),
          margin: '0 0 20px', letterSpacing: isMobile ? -1 : -1.6, lineHeight: 1,
        }}>{cat.name}</h3>
        <p style={{
          fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: palette.textMute,
          margin: '0 0 36px', maxWidth: 540,
        }}>{detail.intro}</p>

        {/* Subcategory chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 36 }}>
          {detail.subs.map((s, i) => {
            const active = i === activeSub;
            return (
              <button
                key={s.name}
                onClick={() => { setActiveSub(i); if (stripRef.current) stripRef.current.scrollLeft = 0; }}
                style={{
                  padding: isMobile ? '10px 13px' : '10px 16px',
                  border: `1px solid ${active ? palette.text : palette.line}`,
                  background: active ? palette.text : 'transparent',
                  color: active ? palette.bg : palette.text,
                  cursor: 'pointer',
                  fontFamily: 'inherit', fontSize: 13, fontWeight: 500,
                  letterSpacing: 0.1,
                  borderRadius: 999,
                  transition: 'all .2s',
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.borderColor = palette.text; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.borderColor = palette.line; }}
              >
                {s.name}
                <span style={{
                  fontFamily: '"JetBrains Mono", monospace', fontSize: 10,
                  opacity: active ? 0.7 : 0.5,
                  letterSpacing: 1,
                }}>{s.count}</span>
              </button>
            );
          })}
        </div>

        {/* Horizontal brand strip */}
        <div style={{ position: 'relative' }}>
          <div
            ref={stripRef}
            style={{
              display: 'flex',
              gap: isMobile ? 14 : 20,
              overflowX: 'auto',
              overflowY: 'hidden',
              scrollSnapType: 'x mandatory',
              WebkitOverflowScrolling: 'touch',
              paddingBottom: 16,
              marginRight: -sideBleed,
              paddingRight: sideBleed,
              scrollbarWidth: 'thin',
            }}
          >
            {sub.sample.map((label, i) => (
              <BrandCard
                key={`${activeNum}-${activeSub}-${i}`}
                index={i + 1}
                label={label}
                subName={sub.name}
                catName={cat.name}
                palette={palette}
                delay={i * 60}
              />
            ))}
            <div style={{
              flex: `0 0 ${isMobile ? 240 : 280}px`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              border: `1px dashed ${palette.line}`,
              padding: isMobile ? 18 : 24,
              textAlign: 'center',
            }}>
              <div>
                <div style={{ fontFamily: 'Fraunces, serif', fontSize: isMobile ? 20 : 22, lineHeight: 1.2, marginBottom: 8 }}>
                  Następna marka — <em style={{ color: palette.accent }}>Twoja?</em>
                </div>
                <div style={{ fontSize: 13, color: palette.textMute, marginBottom: 16 }}>
                  Zgłoś swój produkt do tej kategorii.
                </div>
                <a href="#newsletter" style={{
                  fontSize: 13, color: palette.text,
                  textDecoration: 'underline', textUnderlineOffset: 4,
                }}>Wyślij zgłoszenie →</a>
              </div>
            </div>
          </div>
          <div aria-hidden style={{
            position: 'absolute', right: -2, top: 0, bottom: 16, width: isMobile ? 42 : 80,
            background: `linear-gradient(to left, ${palette.bg}, transparent)`,
            pointerEvents: 'none',
          }} />
        </div>

        {/* Hint */}
        <div style={{
          marginTop: 24,
          fontFamily: '"JetBrains Mono", monospace', fontSize: 10, letterSpacing: 1.5,
          textTransform: 'uppercase', color: palette.textMute,
          display: 'flex', alignItems: 'center', gap: 12,
          flexWrap: 'wrap',
        }}>
          <span>Przewiń poziomo →</span>
          <span style={{ flex: 1, height: 1, background: palette.line, maxWidth: 200, minWidth: 60 }} />
          <span>{sub.count} marek w „{sub.name}"</span>
        </div>
      </div>

      <style>{`
        @keyframes dbpFade {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes dbpCardIn {
          from { opacity: 0; transform: translateY(12px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </div>
  );
}

function BrandCard({ index, label, subName, catName, palette, delay }) {
  const { isMobile, isTablet } = useBreakpoint();
  const [hover, setHover] = React.useState(false);
  const cardWidth = isMobile ? 240 : (isTablet ? 280 : 320);

  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        flex: `0 0 ${cardWidth}px`,
        scrollSnapAlign: 'start',
        cursor: 'pointer',
        animation: `dbpCardIn .5s ease-out ${delay}ms backwards`,
      }}>
      <div style={{
        position: 'relative',
        aspectRatio: '4/5',
        background: hover ? palette.bgAlt : palette.bgAlt,
        overflow: 'hidden',
        marginBottom: 16,
        transition: 'transform .35s',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      }}>
        <Placeholder label={label} ratio="4/5" />
        <div style={{
          position: 'absolute', top: 12, left: 12,
          maxWidth: 'calc(100% - 24px)',
          fontFamily: '"JetBrains Mono", monospace',
          fontSize: 10, letterSpacing: 1.5, textTransform: 'uppercase',
          color: palette.text,
          background: palette.bg,
          padding: '4px 8px',
        }}>{String(index).padStart(2, '0')} / {subName}</div>
      </div>
      <div style={{
        fontFamily: 'Fraunces, serif', fontSize: isMobile ? 18 : 19, lineHeight: 1.25,
        letterSpacing: -0.3,
        color: hover ? palette.accent : palette.text,
        transition: 'color .25s',
        marginBottom: 4,
      }}>{label}</div>
      <div style={{ fontSize: 12, color: palette.textMute, fontFamily: '"JetBrains Mono", monospace', letterSpacing: 0.4 }}>
        {catName} · {subName}
      </div>
    </div>
  );
}

Object.assign(window, { VariantEditorial, CategoryExplorer, BrandCard, CATEGORY_DETAILS });