// Shared building blocks: Nav, Footer, Placeholder, Buttons, basic UI

const Arrow = ({ size = 14 }) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Wordmark = ({ size = 'sm', scheme = 'light' }) => {
  const dim = size === 'lg' ? { fs: 22, gap: 10, pad: '8px 12px' } : { fs: 15, gap: 7, pad: '6px 10px' };
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: dim.gap }}>
      <div style={{
        background: 'var(--accent)', color: '#fff',
        padding: dim.pad, borderRadius: 4,
        fontWeight: 700, fontSize: dim.fs, letterSpacing: '0.04em',
        lineHeight: 1, fontFamily: 'var(--font-display)',
      }}>GC</div>
      <div style={{
        fontWeight: 600, fontSize: dim.fs, letterSpacing: '0.02em',
        color: scheme === 'dark' ? '#f3efe8' : 'var(--ink)',
        lineHeight: 1,
      }}>Gorilla Commerce</div>
    </div>
  );
};

const Nav = ({ scheme = 'light' }) => (
  <header className="nav" style={scheme === 'dark' ? { background: '#0a0a0c', borderColor: '#1a1a1c', color: '#f3efe8' } : {}}>
    <div className="nav__logo">
      <Wordmark scheme={scheme} />
    </div>
    <nav className="nav__links" style={scheme === 'dark' ? { color: '#c2bdb3' } : {}}>
      <a href="#logistyka">Logistyka <span style={{ fontSize: 10, color: 'var(--accent)' }}>●</span></a>
      <a href="#konfigurator">Konfigurator</a>
      <a href="#magazyn">Magazyn</a>
      <a href="#proces">Proces</a>
      <a href="#zespol">O nas</a>
      <a href="#faq">FAQ</a>
    </nav>
    <div className="nav__cta">
      <span className="nav__phone">+48 22 480 18 00</span>
      <a className="btn btn--primary" href="#kontakt">Zamów wycenę <Arrow /></a>
    </div>
  </header>
);

const Placeholder = ({ width, height, label, tag = 'placeholder', dark = false, style }) => (
  <div className={`ph ${dark ? 'ph--dark' : ''}`} style={{ width, height, ...style }}>
    <span>{label}</span>
    <span className="ph__tag">{tag}</span>
  </div>
);

const TagRow = ({ children }) => <div className="tag-row">{children}</div>;

const Eyebrow = ({ children }) => <div className="eyebrow">{children}</div>;

const SectionHead = ({ eyebrow, title, lede, extra }) => (
  <div className="section-head">
    <div>
      {eyebrow && <Eyebrow>{eyebrow}</Eyebrow>}
      <h2 style={{ marginTop: 16 }}>{title}</h2>
    </div>
    <div>
      {lede && <p className="lede">{lede}</p>}
      {extra}
    </div>
  </div>
);

const Stat = ({ value, unit, label }) => (
  <div>
    <div className="stat__value">{value}<span style={{ fontSize: 24, color: 'var(--accent)', marginLeft: 4 }}>{unit}</span></div>
    <div className="stat__label">{label}</div>
  </div>
);

const Pill = ({ children, kind = 'red' }) => (
  <span className={`pill ${kind === 'green' ? 'green' : ''}`}>
    <span className="dot" /> {children}
  </span>
);

const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer__cols">
        <div>
          <div style={{ marginBottom: 20 }}>
            <Wordmark size="lg" scheme="dark" />
          </div>
          <p style={{ color: '#b8b3a8', maxWidth: '32ch', fontSize: 14, lineHeight: 1.6 }}>
            Polski dostawca klinkieru dla deweloperów, dystrybutorów i wykonawców. Magazyn 24 ha, własna flota, dostawa w 48 h.
          </p>
        </div>
        <div>
          <div className="stat__label" style={{ color: '#6a655e', marginBottom: 16 }}>Produkty</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
            <li><a href="#">Cegła klinkierowa</a></li>
            <li><a href="#">Płytki elewacyjne</a></li>
            <li><a href="#">Kształtki</a></li>
            <li><a href="#">Klinkier drogowy</a></li>
            <li><a href="#">Akcesoria</a></li>
          </ul>
        </div>
        <div>
          <div className="stat__label" style={{ color: '#6a655e', marginBottom: 16 }}>Firma</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
            <li><a href="#">O Gorilla Commerce</a></li>
            <li><a href="#">Logistyka</a></li>
            <li><a href="#">Magazyn</a></li>
            <li><a href="#">Kariera</a></li>
            <li><a href="#">Kontakt</a></li>
          </ul>
        </div>
        <div>
          <div className="stat__label" style={{ color: '#6a655e', marginBottom: 16 }}>Kontakt</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
            <li><a href="#">biuro@gorillacommerce.com</a></li>
            <li><a href="#">+48 22 480 18 00</a></li>
            <li><a href="#">ul. Klinkierowa 12<br />05-870 Błonie</a></li>
          </ul>
        </div>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Gorilla Commerce Sp. z o.o.</span>
        <span>Made for B2B partners · NIP 5252678910</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Arrow, Wordmark, Nav, Placeholder, TagRow, Eyebrow, SectionHead, Stat, Pill, Footer });