// Shared data + 360° device component for all MOCNOFON variants.
// Polish copy throughout. Generic silhouettes only (no copyrighted product designs).

const MOCNOFON_PRODUCTS = {
  phones: [
    {
      id: 'granit-x1',
      tier: 'Flagowy',
      name: 'GRANIT X1',
      tagline: 'Pancerz z magnezu. Termowizja FLIR. 22 000 mAh.',
      price: '4 299',
      colors: [
        { id: 'obsidian', label: 'Obsydian', hex: '#16181b' },
        { id: 'lawa',     label: 'Lawa',     hex: '#a83a1c' },
        { id: 'mech',     label: 'Mech',     hex: '#3b4a32' },
        { id: 'lod',      label: 'Lód',      hex: '#a8b3bd' },
      ],
      storage: ['256 GB', '512 GB', '1 TB'],
      specs: [
        ['IP', '69K'],
        ['MIL-STD', '810H'],
        ['Bateria', '22 000 mAh'],
        ['Wyświetlacz', '6,8" / 144 Hz'],
        ['Termowizja', 'FLIR Lepton'],
        ['Zakres', '−40°C ÷ +70°C'],
      ],
    },
    {
      id: 'bazalt-m5',
      tier: 'Wszechstronny',
      name: 'BAZALT M5',
      tagline: 'Smukły pancerz. Dla tych, którzy idą dalej.',
      price: '2 499',
      colors: [
        { id: 'grafit', label: 'Grafit', hex: '#2a2d31' },
        { id: 'piach',  label: 'Piach',  hex: '#a08a6a' },
        { id: 'bor',    label: 'Bór',    hex: '#27332a' },
      ],
      storage: ['128 GB', '256 GB'],
      specs: [
        ['IP', '68'],
        ['MIL-STD', '810H'],
        ['Bateria', '8 000 mAh'],
        ['Wyświetlacz', '6,5" / 120 Hz'],
        ['Aparat', '108 MP'],
        ['Waga', '236 g'],
      ],
    },
    {
      id: 'krzemien-k3',
      tier: 'Codzienny',
      name: 'KRZEMIEŃ K3',
      tagline: 'Niezniszczalny budżetowiec. Bez kompromisów.',
      price: '1 199',
      colors: [
        { id: 'wegiel', label: 'Węgiel', hex: '#1d1e22' },
        { id: 'rdza',   label: 'Rdza',   hex: '#8a4a2a' },
      ],
      storage: ['64 GB', '128 GB'],
      specs: [
        ['IP', '68'],
        ['MIL-STD', '810G'],
        ['Bateria', '6 500 mAh'],
        ['Wyświetlacz', '6,1" / 90 Hz'],
        ['Aparat', '50 MP'],
        ['Waga', '218 g'],
      ],
    },
  ],
  watches: [
    {
      id: 'cyrkon-w2',
      tier: 'Outdoor',
      name: 'CYRKON W2',
      tagline: 'Smartwatch dla zdobywców. GPS dual-band. 30 dni baterii.',
      price: '1 599',
      colors: [
        { id: 'noc',    label: 'Noc',    hex: '#16181b' },
        { id: 'piasek', label: 'Piasek', hex: '#b89868' },
        { id: 'mech',   label: 'Mech',   hex: '#3b4a32' },
      ],
      storage: ['46 mm', '50 mm'],
      specs: [
        ['Wodoodporność', '10 ATM'],
        ['Bateria', '30 dni'],
        ['GPS', 'Dual-band'],
        ['Wysokościomierz', 'tak'],
        ['Szkło', 'Sapphire'],
        ['Mapy', 'Offline'],
      ],
    },
    {
      id: 'obsydian-w4',
      tier: 'Tytan',
      name: 'OBSYDIAN W4',
      tagline: 'Tytanowy zegarek-narzędzie. Latarka 800 lm. Łączność LTE.',
      price: '2 899',
      colors: [
        { id: 'tytan', label: 'Tytan',  hex: '#5e5b56' },
        { id: 'noc',   label: 'Noc',    hex: '#16181b' },
      ],
      storage: ['48 mm'],
      specs: [
        ['Wodoodporność', '20 ATM'],
        ['Bateria', '21 dni'],
        ['GPS', 'Dual-band'],
        ['LTE', 'eSIM'],
        ['Latarka', '800 lm'],
        ['Korpus', 'Grade-5 Ti'],
      ],
    },
  ],
};

// ─────────────────────────────────────────────────────────────────────
// 360°-rotatable generic phone silhouette.
// Pure CSS 3D: front + back faces + side strips. Drag to rotate, or
// auto-rotates when not interacting. The silhouette is "generic" — a
// rounded slab with bezel, camera bumps, side buttons — not any real device.
// ─────────────────────────────────────────────────────────────────────
function Device360({ kind = 'phone', color = '#16181b', accent = '#ff5a1f', size = 360, auto = true, depth = 22 }) {
  const [angle, setAngle] = React.useState(-18);
  const [dragging, setDragging] = React.useState(false);
  const rafRef = React.useRef(null);
  const lastT = React.useRef(performance.now());

  React.useEffect(() => {
    if (!auto || dragging) return;
    const tick = (t) => {
      const dt = t - lastT.current;
      lastT.current = t;
      setAngle((a) => a + dt * 0.025);
      rafRef.current = requestAnimationFrame(tick);
    };
    lastT.current = performance.now();
    rafRef.current = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(rafRef.current);
  }, [auto, dragging]);

  const startDrag = (e) => {
    setDragging(true);
    const startX = (e.touches ? e.touches[0].clientX : e.clientX);
    const startA = angle;
    const move = (ev) => {
      const x = (ev.touches ? ev.touches[0].clientX : ev.clientX);
      setAngle(startA + (x - startX) * 0.8);
    };
    const up = () => {
      setDragging(false);
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', up);
      window.removeEventListener('touchmove', move);
      window.removeEventListener('touchend', up);
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', up);
    window.addEventListener('touchmove', move);
    window.addEventListener('touchend', up);
  };

  // Phone vs watch aspect
  const isWatch = kind === 'watch';
  const w = isWatch ? size * 0.62 : size * 0.46;
  const h = isWatch ? size * 0.62 : size * 0.92;
  const r = isWatch ? 28 : 26;

  // Side strip width = depth, positioned based on rotation.
  // We use rotateY on a container and render 6 layers for depth.
  const layers = [];
  const stackN = 12;
  for (let i = 0; i < stackN; i++) {
    const z = (i - stackN / 2) * (depth / stackN);
    const dim = 0.55 + (i / stackN) * 0.45;
    layers.push(
      <div key={i} style={{
        position: 'absolute',
        inset: 0,
        background: `color-mix(in oklab, ${color} ${dim * 100}%, #000)`,
        borderRadius: r,
        transform: `translateZ(${z}px)`,
        boxShadow: 'inset 0 0 30px rgba(0,0,0,0.25)',
      }} />
    );
  }

  return (
    <div
      onMouseDown={startDrag}
      onTouchStart={startDrag}
      style={{
        width: size,
        height: size,
        perspective: 1400,
        userSelect: 'none',
        cursor: dragging ? 'grabbing' : 'grab',
        touchAction: 'none',
        position: 'relative',
      }}
    >
      <div style={{
        position: 'absolute',
        left: '50%', top: '50%',
        width: w, height: h,
        transform: `translate(-50%, -50%) rotateY(${angle}deg) rotateX(-6deg)`,
        transformStyle: 'preserve-3d',
        transition: dragging ? 'none' : 'transform 0.05s linear',
      }}>
        {layers}
        {/* Front face */}
        <div style={{
          position: 'absolute', inset: 0,
          background: color,
          borderRadius: r,
          transform: `translateZ(${depth / 2}px)`,
          boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08)',
          overflow: 'hidden',
        }}>
          {/* Screen */}
          <div style={{
            position: 'absolute',
            inset: isWatch ? 12 : 8,
            background: `linear-gradient(160deg, #0a0d11, #181c22 60%, #0a0d11)`,
            borderRadius: isWatch ? 22 : 18,
            boxShadow: 'inset 0 0 30px rgba(0,0,0,0.6)',
            overflow: 'hidden',
          }}>
            {/* Faux UI on screen */}
            <div style={{
              position: 'absolute', top: 14, left: 14, right: 14,
              fontFamily: 'ui-monospace, monospace',
              fontSize: isWatch ? 8 : 10,
              color: accent,
              letterSpacing: 1,
              textTransform: 'uppercase',
              opacity: 0.85,
            }}>
              {isWatch ? '46.2924° N · 1840 m' : 'MOCNOFON OS · 9.3'}
            </div>
            {!isWatch && (
              <div style={{
                position: 'absolute',
                left: 14, right: 14, bottom: 18,
                fontFamily: 'ui-monospace, monospace',
                fontSize: 9,
                color: 'rgba(255,255,255,0.5)',
                letterSpacing: 1,
              }}>
                <div style={{ height: 1, background: 'rgba(255,255,255,0.12)', marginBottom: 8 }} />
                IP69K · MIL-STD-810H · −40°C ÷ +70°C
              </div>
            )}
            {isWatch && (
              <div style={{
                position: 'absolute',
                inset: 0,
                display: 'grid', placeItems: 'center',
                color: accent,
                fontFamily: 'ui-monospace, monospace',
                fontSize: size * 0.13,
                fontWeight: 700,
              }}>
                12:42
              </div>
            )}
            {/* Corner bracket overlays */}
            {['tl', 'tr', 'bl', 'br'].map((k) => {
              const pos = {
                tl: { top: 6,  left: 6,  borderTop: `1px solid ${accent}`, borderLeft:  `1px solid ${accent}` },
                tr: { top: 6,  right: 6, borderTop: `1px solid ${accent}`, borderRight: `1px solid ${accent}` },
                bl: { bottom: 6, left: 6, borderBottom: `1px solid ${accent}`, borderLeft:  `1px solid ${accent}` },
                br: { bottom: 6, right: 6, borderBottom: `1px solid ${accent}`, borderRight: `1px solid ${accent}` },
              }[k];
              return <div key={k} style={{ position: 'absolute', width: 10, height: 10, ...pos, opacity: 0.7 }} />;
            })}
          </div>
          {/* Camera bump (phone only) */}
          {!isWatch && (
            <div style={{
              position: 'absolute',
              top: 14, right: 14,
              width: 30, height: 30,
              background: '#0a0c0e',
              border: '2px solid rgba(0,0,0,0.6)',
              borderRadius: 8,
              boxShadow: 'inset 0 0 6px rgba(0,0,0,0.8)',
            }}>
              <div style={{
                position: 'absolute', top: 4, left: 4,
                width: 8, height: 8, borderRadius: '50%',
                background: 'radial-gradient(circle at 30% 30%, #5a6675, #0a0c0e 70%)',
              }} />
              <div style={{
                position: 'absolute', bottom: 4, right: 4,
                width: 6, height: 6, borderRadius: '50%',
                background: 'radial-gradient(circle at 30% 30%, #5a6675, #0a0c0e 70%)',
              }} />
            </div>
          )}
          {/* Crown (watch only) */}
          {isWatch && (
            <div style={{
              position: 'absolute', top: '50%', right: -6,
              transform: 'translateY(-50%)',
              width: 8, height: 28,
              background: `color-mix(in oklab, ${color} 70%, #000)`,
              borderRadius: 2,
            }} />
          )}
        </div>
        {/* Back face */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `color-mix(in oklab, ${color} 80%, #000)`,
          borderRadius: r,
          transform: `translateZ(${-depth / 2}px) rotateY(180deg)`,
          display: 'grid', placeItems: 'center',
          color: 'rgba(255,255,255,0.18)',
          fontFamily: 'ui-monospace, monospace',
          fontSize: isWatch ? 10 : 14,
          fontWeight: 700,
          letterSpacing: 2,
        }}>
          MOCNOFON
        </div>
        {/* Side buttons (phone only) */}
        {!isWatch && (
          <React.Fragment>
            <div style={{
              position: 'absolute', top: '24%', right: -depth/2 - 2,
              width: 4, height: 50,
              background: `color-mix(in oklab, ${color} 60%, #000)`,
              transform: `rotateY(90deg) translateZ(2px)`,
              borderRadius: 2,
            }} />
            <div style={{
              position: 'absolute', top: '38%', left: -depth/2 - 2,
              width: 4, height: 80,
              background: `color-mix(in oklab, ${color} 60%, #000)`,
              transform: `rotateY(-90deg) translateZ(2px)`,
              borderRadius: 2,
            }} />
          </React.Fragment>
        )}
      </div>
      {/* Ground shadow */}
      <div style={{
        position: 'absolute',
        left: '50%', bottom: '8%',
        width: w * 1.1, height: 18,
        transform: 'translateX(-50%)',
        background: 'radial-gradient(ellipse, rgba(0,0,0,0.45), transparent 70%)',
        filter: 'blur(2px)',
      }} />
    </div>
  );
}

// Striped placeholder for imagery (used as backgrounds in variant heroes).
function StripedPlaceholder({ label, height = 320, dark = false }) {
  return (
    <div style={{
      position: 'relative',
      height,
      background: dark
        ? 'repeating-linear-gradient(135deg, #1a1d22, #1a1d22 14px, #14171b 14px, #14171b 28px)'
        : 'repeating-linear-gradient(135deg, #d8d4cc, #d8d4cc 14px, #ccc8be 14px, #ccc8be 28px)',
      color: dark ? '#7a8290' : '#5a5650',
      fontFamily: 'ui-monospace, monospace',
      fontSize: 11,
      letterSpacing: 1.5,
      textTransform: 'uppercase',
      display: 'grid',
      placeItems: 'center',
      borderRadius: 2,
    }}>
      [{label}]
    </div>
  );
}

// Convenience: a variant picker (color + storage) controlled component.
function VariantPicker({ colors, storage, dark = false, accent = '#ff5a1f', onColor, onStorage, color, store }) {
  const fg = dark ? '#e7e3da' : '#1a1d22';
  const fgMuted = dark ? '#9a9588' : '#6a665d';
  const border = dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.15)';
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
      <div>
        <div style={{
          fontFamily: 'ui-monospace, monospace',
          fontSize: 11,
          letterSpacing: 2,
          textTransform: 'uppercase',
          color: fgMuted,
          marginBottom: 10,
        }}>Kolor — {colors.find(c => c.id === color)?.label}</div>
        <div style={{ display: 'flex', gap: 10 }}>
          {colors.map(c => (
            <button key={c.id}
              onClick={() => onColor(c.id)}
              aria-label={c.label}
              style={{
                width: 36, height: 36,
                borderRadius: '50%',
                background: c.hex,
                border: c.id === color ? `2px solid ${accent}` : `2px solid ${border}`,
                cursor: 'pointer',
                padding: 0,
                outline: 'none',
                boxShadow: c.id === color ? `0 0 0 3px ${dark ? '#0a0c0e' : '#fff'}, 0 0 0 5px ${accent}` : 'none',
                transition: 'box-shadow 0.15s',
              }}
            />
          ))}
        </div>
      </div>
      <div>
        <div style={{
          fontFamily: 'ui-monospace, monospace',
          fontSize: 11,
          letterSpacing: 2,
          textTransform: 'uppercase',
          color: fgMuted,
          marginBottom: 10,
        }}>Pamięć</div>
        <div style={{ display: 'flex', gap: 8 }}>
          {storage.map(s => (
            <button key={s}
              onClick={() => onStorage(s)}
              style={{
                padding: '10px 16px',
                background: s === store ? fg : 'transparent',
                color: s === store ? (dark ? '#0a0c0e' : '#fff') : fg,
                border: `1px solid ${s === store ? fg : border}`,
                fontFamily: 'ui-monospace, monospace',
                fontSize: 12,
                fontWeight: 600,
                letterSpacing: 1,
                cursor: 'pointer',
                borderRadius: 0,
              }}
            >{s}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { MOCNOFON_PRODUCTS, Device360, StripedPlaceholder, VariantPicker });