// Granit shell — shared tokens, Nav, Footer, marquee, type system.
// Used by both granit-landing and granit-pdp.

const GRANIT_TOKENS = {
  bg:       '#0b0e12',
  surface:  '#15191f',
  surface2: '#1c2128',
  fg:       '#e7e3da',
  fgMuted:  '#bdb6a8',
  fgFaint:  '#7a8290',
  fgDim:    '#5a6675',
  accent:   '#ff5a1f',
  paper:    '#e7e3da',
  ink:      '#15191f',
  line:     'rgba(255,255,255,0.08)',
  lineStrong: 'rgba(255,255,255,0.15)',
  display: "'Antonio', 'Oswald', sans-serif",
  body:    "'Work Sans', system-ui, sans-serif",
  mono:    "'JetBrains Mono', ui-monospace, monospace",
};

// Window-width responsive hook (no fixed canvas — actual viewport).
function useIsMobile(bp = 860) {
  const [m, setM] = React.useState(() =>
    typeof window !== 'undefined' && window.innerWidth < bp);
  React.useEffect(() => {
    const onResize = () => setM(window.innerWidth < bp);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, [bp]);
  return m;
}

// Topo line background.
function TopoLines({ opacity = 0.08, stroke = '#ffffff' }) {
  return (
    <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity }}
         viewBox="0 0 1440 800" preserveAspectRatio="none">
      {[...Array(14)].map((_, i) => {
        const y = 60 + i * 56;
        const wave = Array.from({ length: 30 }, (_, j) => {
          const x = j * 50;
          const yy = y + Math.sin((j + i) * 0.7) * (10 + i * 1.4) - i * 2;
          return `${j === 0 ? 'M' : 'L'} ${x} ${yy}`;
        }).join(' ');
        return <path key={i} d={wave} fill="none" stroke={stroke} strokeWidth={1} />;
      })}
    </svg>
  );
}

function GranitNav({ current = 'home', cart = 0, onCartClick }) {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const [open, setOpen] = React.useState(false);

  const links = [
    { id: 'phones',   href: 'index.html#modele',     label: 'Telefony' },
    { id: 'watches',  href: 'index.html#zegarki',    label: 'Zegarki' },
    { id: 'tech',     href: 'index.html#wytrzymalosc', label: 'Wytrzymałość' },
    { id: 'manifest', href: 'index.html#manifest',   label: 'Manifest' },
    { id: 'help',     href: '#',                        label: 'Pomoc' },
  ];

  return (
    <React.Fragment>
      <nav style={{
        position: 'sticky', top: 0, zIndex: 50,
        background: 'rgba(11, 14, 18, 0.85)',
        backdropFilter: 'blur(10px)',
        WebkitBackdropFilter: 'blur(10px)',
        borderBottom: `1px solid ${T.line}`,
        padding: isMobile ? '12px 20px' : '18px 40px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24, color: T.fg,
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, color: T.fg, textDecoration: 'none' }}>
          <span style={{ color: T.accent, fontFamily: T.mono, fontSize: 12 }}>▲</span>
          <span style={{ fontFamily: T.display, letterSpacing: 2.5, fontWeight: 700, fontSize: 18, textTransform: 'uppercase' }}>MOCNOFON</span>
          {!isMobile && (
            <span style={{ fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 2, marginLeft: 18 }}>
              EST · KARPATY · 2019
            </span>
          )}
        </a>

        {!isMobile && (
          <div style={{ display: 'flex', gap: 28, fontFamily: T.mono, fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase' }}>
            {links.map(l => (
              <a key={l.id} href={l.href} style={{
                color: current === l.id ? T.accent : T.fg,
                textDecoration: 'none',
                position: 'relative',
                paddingBottom: 4,
                borderBottom: current === l.id ? `1px solid ${T.accent}` : '1px solid transparent',
              }}>{l.label}</a>
            ))}
          </div>
        )}

        <div style={{ display: 'flex', gap: 12, alignItems: 'center', fontFamily: T.mono, fontSize: 12 }}>
          {!isMobile && <span style={{ color: T.fgDim, letterSpacing: 1 }}>PL · zł</span>}
          <button onClick={onCartClick} style={{
            background: 'transparent', border: `1px solid ${T.accent}`, color: T.accent,
            padding: '8px 14px', fontFamily: T.mono, fontSize: 11, letterSpacing: 2,
            textTransform: 'uppercase', cursor: 'pointer',
          }}>Koszyk · {cart}</button>
          {isMobile && (
            <button onClick={() => setOpen(o => !o)} style={{
              background: 'transparent', border: `1px solid ${T.lineStrong}`,
              color: T.fg, padding: '6px 10px', fontFamily: T.mono, fontSize: 14, cursor: 'pointer',
            }}>{open ? '✕' : '≡'}</button>
          )}
        </div>
      </nav>

      {isMobile && open && (
        <div style={{
          position: 'fixed', top: 56, left: 0, right: 0, zIndex: 49,
          background: T.bg, borderBottom: `1px solid ${T.line}`,
          padding: '8px 20px 16px',
          display: 'flex', flexDirection: 'column',
        }}>
          {links.map(l => (
            <a key={l.id} href={l.href} onClick={() => setOpen(false)} style={{
              color: current === l.id ? T.accent : T.fg, textDecoration: 'none',
              fontFamily: T.mono, fontSize: 13, letterSpacing: 2, textTransform: 'uppercase',
              padding: '14px 0', borderBottom: `1px solid ${T.line}`,
            }}>{l.label}</a>
          ))}
        </div>
      )}
    </React.Fragment>
  );
}

function GranitMarquee({ items }) {
  const T = GRANIT_TOKENS;
  // Duplicate for seamless loop
  const list = [...items, ...items, ...items];
  return (
    <div style={{
      background: T.ink, color: T.fg,
      borderTop: `1px solid ${T.line}`, borderBottom: `1px solid ${T.line}`,
      padding: '14px 0', overflow: 'hidden', position: 'relative',
    }}>
      <style>{`
        @keyframes granit-marquee {
          from { transform: translateX(0); }
          to   { transform: translateX(-33.333%); }
        }
      `}</style>
      <div style={{
        display: 'flex', gap: 48, whiteSpace: 'nowrap',
        animation: 'granit-marquee 50s linear infinite',
        width: 'max-content',
      }}>
        {list.map((it, i) => (
          <span key={i} style={{
            fontFamily: T.mono, fontSize: 12, letterSpacing: 3,
            textTransform: 'uppercase', display: 'flex', gap: 16, alignItems: 'center',
            color: T.fg,
          }}>
            <span style={{ color: T.accent }}>▲</span>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}

function GranitFooter() {
  const T = GRANIT_TOKENS;
  const isMobile = useIsMobile();
  const cols = [
    { h: 'Telefony', items: [
      { l: 'Granit X1',  href: 'granit-x1.html' },
      { l: 'Bazalt M5',  href: '#' },
      { l: 'Krzemień K3', href: '#' },
      { l: 'Porównaj',   href: '#' },
    ]},
    { h: 'Zegarki', items: [
      { l: 'Cyrkon W2',   href: '#' },
      { l: 'Obsydian W4', href: '#' },
    ]},
    { h: 'Pomoc', items: [
      { l: 'Serwis',           href: '#' },
      { l: 'Gwarancja 5 lat',  href: '#' },
      { l: 'Status zamówienia', href: '#' },
      { l: 'Kontakt',          href: '#' },
    ]},
    { h: 'Firma', items: [
      { l: 'Manifest', href: 'index.html#manifest' },
      { l: 'Fabryka',  href: '#' },
      { l: 'Praca',    href: '#' },
      { l: 'Prasa',    href: '#' },
    ]},
  ];
  return (
    <footer style={{
      background: T.bg, color: T.fgMuted,
      padding: isMobile ? '40px 20px 32px' : '72px 40px 36px',
      borderTop: `1px solid ${T.accent}`,
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr 1fr' : '1.4fr repeat(4, 1fr)',
          gap: 32,
        }}>
          <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ color: T.accent, fontFamily: T.mono }}>▲</span>
              <span style={{ fontFamily: T.display, fontSize: 24, color: T.fg, letterSpacing: 2.5, textTransform: 'uppercase' }}>MOCNOFON</span>
            </div>
            <p style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 2, marginTop: 14, color: T.fgDim }}>
              WYKUTY W POLSCE · 2019
            </p>
            <p style={{ fontFamily: T.body, fontSize: 13, marginTop: 18, lineHeight: 1.6, color: T.fgMuted, maxWidth: 260 }}>
              Projektujemy w&nbsp;Krakowie. Testujemy w&nbsp;Tatrach. Składamy w&nbsp;Mielcu.
            </p>
          </div>
          {cols.map(g => (
            <div key={g.h}>
              <div style={{ fontFamily: T.mono, fontSize: 10, letterSpacing: 2, color: T.accent, textTransform: 'uppercase', marginBottom: 16 }}>{g.h}</div>
              {g.items.map(i => (
                <a key={i.l} href={i.href} style={{ display: 'block', fontFamily: T.body, fontSize: 13, marginBottom: 10, color: T.fg, textDecoration: 'none' }}>{i.l}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 56, paddingTop: 22, borderTop: `1px solid ${T.line}`,
          display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
          fontFamily: T.mono, fontSize: 10, color: T.fgDim, letterSpacing: 1.5,
        }}>
          <span>© 2026 MOCNOFON Sp. z o.o. · ul. Wielicka 28, 30-552 Kraków · NIP 6762591118</span>
          <span>Polityka prywatności · Regulamin · Cookies</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { GRANIT_TOKENS, useIsMobile, TopoLines, GranitNav, GranitMarquee, GranitFooter });