import {Box, CheckCircle2, DoorOpen, Layers3, MousePointer2, PanelRight, SlidersHorizontal} from 'lucide-react';

export function HeroVisual() {
  return (
    <div className="heroVisual" aria-hidden="true">
      <div className="heroVisual__topbar">
        <span />
        <span />
        <span />
      </div>
      <div className="heroVisual__scene">
        <div className="heroVisual__product">
          <div className="heroVisual__cube heroVisual__cube--main">
            <Box size={70} />
          </div>
          <div className="heroVisual__orbit heroVisual__orbit--one">
            <DoorOpen size={28} />
          </div>
          <div className="heroVisual__orbit heroVisual__orbit--two">
            <Layers3 size={28} />
          </div>
          <div className="heroVisual__cursor">
            <MousePointer2 size={22} />
          </div>
        </div>
        <div className="heroVisual__panel">
          <div>
            <PanelRight size={18} />
            <span>Konfiguracja</span>
          </div>
          <div className="heroVisual__option isActive">
            <CheckCircle2 size={16} />
            Materiał premium
          </div>
          <div className="heroVisual__option">
            <SlidersHorizontal size={16} />
            Reguły produktu
          </div>
          <div className="heroVisual__swatches">
            <span />
            <span />
            <span />
            <span />
          </div>
        </div>
      </div>
    </div>
  );
}
