/* HomeScreen — logo top-center, two symmetrical tiles below */
const HomeScreen = ({ lang, onPickFolder }) => {
  const folders = (window.CATALOG && window.CATALOG.folders) || [];

  return (
    <section className="home" data-screen-label="home">



      {/* ── Background sticker collage — lower half only ── */}
      <div className="home-decor" aria-hidden="true">
        <img src="assets/products/FitnessAccessories/Yogamat1.png"          style={{width:230, bottom:'62%', left:'-45px',  transform:'rotate(-20deg)'}} />
        <img src="assets/products/FitnessAccessories/20kgdumbellset.png"    style={{width:115, bottom:'38%', right:'-18px', transform:'rotate(28deg)'}} />
        <img src="assets/products/FitnessAccessories/ABrollerpro.png"        style={{width:95,  bottom:'66%', left:'22%',    transform:'rotate(20deg)'}} />
        <img src="assets/products/FitnessAccessories/Pilatesring.png"        style={{width:170, bottom:'60%', right:'2%',  transform:'rotate(22deg)'}} />
        <img src="assets/products/FitnessAccessories/vinyldumbell1.png"      style={{width:85,  top:'40%',    left:'-12px',  transform:'rotate(-38deg)'}} />
        <img src="assets/products/FitnessAccessories/anklewristweight.png"   style={{width:90,  bottom:'22%', left:'16%',    transform:'rotate(12deg)'}} />
        <img src="assets/products/FitnessAccessories/bodygym.png"            style={{width:180,  bottom:'12%', left:'2%',    transform:'rotate(35deg)'}} />
        <img src="assets/products/FitnessAccessories/balanceboard.png"       style={{width:125, bottom:'6%',  right:'16%',   transform:'rotate(-18deg)'}} />
        <img src="assets/products/FitnessAccessories/strengthband.png"       style={{width:80,  bottom:'40%', left:'7%',     transform:'rotate(52deg)'}} />
        <img src="assets/products/FitnessAccessories/Yogablock.png"          style={{width:95,  bottom:'14%', right:'20px', transform:'rotate(-28deg)'}} />
        <img src="assets/products/FitnessAccessories/pushupstand.png"      style={{width:100, bottom:'34%', left:'34%',    transform:'rotate(38deg)'}} />
        <img src="assets/products/FitnessAccessories/speedrope.png"          style={{width:240, top:'50%',    right:'10%',    transform:'rotate(15deg)'}} />
        <img src="assets/products/FitnessAccessories/hexdumbells.png"        style={{width:327, bottom:'35%', right:'5%',    transform:'rotate(-12deg)'}} />
        <img src="assets/products/FitnessAccessories/xlbottlegrey.png"       style={{width:340, top:'50%',    left:'3%',     transform:'translateY(-50%) rotate(45deg)'}} />
      </div>

      <div className="home-header">
        <div className="home-logo-lockup">
          <img src="assets/intersport-mark.svg" alt="Intersport" className="home-logo-mark" />
          <img src="assets/energetics.png" alt="Energetics" className="home-logo-energetics" />
        </div>
      </div>

      <div className="folder-grid">
        {folders.map(f => (
          <button
            key={f.id}
            className={`folder-tile folder-${f.id}`}
            onClick={() => onPickFolder(f.id)}
          >
            <div className="folder-tile-icon">
              <Icon name={f.icon} size={56} />
            </div>
            <div className="folder-tile-text">
              <h2>{lang === 'el' ? f.label_el : f.label_en}</h2>
              <span className="folder-tile-cta">
                {t('pick_folder_sub', lang)} <Icon name="arrowRight" size={16} />
              </span>
            </div>
          </button>
        ))}
      </div>

    </section>
  );
};
window.HomeScreen = HomeScreen;