// mobile-sections.jsx — mobile-native layouts for each home section.
// Designed natively at 390px wide (iPhone 14), not a shrunk desktop.
//
// Reuses shared primitives from components.jsx (GkMark, Button, MonoButton,
// Badge, StockDot, PartnerName, Canister, Pictogram) — those scale by prop.

// Re-stating data here (kept terse) so mobile doesn't need page-middle's scope.
const M_VERTICALS = [
  { code:'01', name:'Hrana i piće',           blurb:'Sanitarno čišćenje linija, odmašćivanje uređaja.', partners:['Coca-Cola','Ledo','Dukat','Karlovačko','Franck'], bg:'var(--yellow-cream)', glyph:'D' },
  { code:'02', name:'Energetika i nafta',     blurb:'Čišćenje rezervoara, apsorpcija ulja, pretvarač korozije.', partners:['OMV','Petrokemija','Euro Petrol'], bg:'var(--pink-cream)', glyph:'E' },
  { code:'03', name:'Auto i transport',        blurb:'Odmašćivanje motora, čišćenje stakala, pranje vozila.', partners:['Auto Hrvatska','Benussi','Euro Petrol'], bg:'var(--green-mint)', glyph:'A' },
  { code:'04', name:'Gradnja i infrastruktura', blurb:'Razdjelnik betona, uklanjanje grafita, zaštita armature.', partners:['Viadukt','Đuro Đaković'], bg:'var(--paper-2)', glyph:'T' },
  { code:'05', name:'Održavanje · osiguranje', blurb:'Sanacija nakon šteta, čišćenje opreme, održavanje pogona.', partners:['Euroherc','Adriatic'], bg:'var(--ink)', dark:true, glyph:'O' },
];

const M_CATALOGUE = [
  { code:'PAR', name:'Biocro Par',       use:'Odmašćivanje · parfimirano', cat:'Odmašćivanje', bio:98, pkg:'1L · 5L · 25L',  price:'14,80', stock:'na-stanju' },
  { code:'OBC', name:'Biocro OBC+',      use:'Koncentrat',                 cat:'Odmašćivanje', bio:98, pkg:'5L · 25L · 200L', price:'12,40', stock:'na-stanju' },
  { code:'PRO', name:'Biocro Pro',       use:'Odmašćivanje · industrija',  cat:'Odmašćivanje', bio:97, pkg:'5L · 25L',        price:'16,20', stock:'na-stanju' },
  { code:'COR', name:'Biocro Coroclean', use:'Kamenac · hrđa',             cat:'Kamenac/Hrđa', bio:96, pkg:'5L · 25L',        price:'17,90', stock:'na-stanju' },
  { code:'TRA', name:'Biocro Corotrans', use:'Pretvarač korozije',         cat:'Korozija',     bio:95, pkg:'1L · 5L',         price:'18,40', stock:'na-stanju' },
  { code:'AGR', name:'Antigrafit ND',    use:'Uklanjanje grafita',         cat:'Grafiti',      bio:92, pkg:'5L',              price:'22,00', stock:'na-stanju' },
  { code:'CS',  name:'Apsorbent CS',     use:'Apsorpcija ulja',            cat:'Apsorpcija',   bio:null, pkg:'10kg · 25kg',   price:'4,20',  stock:'na-stanju' },
  { code:'EKO', name:'Biocro Eko sol+',  use:'Univerzalno · otapala',      cat:'Odmašćivanje', bio:90, pkg:'5L · 25L',        price:'15,60', stock:'malo' },
  { code:'STX', name:'Staklex',          use:'Stakla · izopropanol',       cat:'Specijalno',   bio:88, pkg:'1L · 5L',         price:'9,80',  stock:'na-stanju' },
  { code:'GMP', name:'Gumoplat M/D',     use:'Razdjelnik betona',          cat:'Gradnja',      bio:null, pkg:'5L · 25L',      price:'11,40', stock:'najava' },
];

const M_CAT_BG = {
  'Odmašćivanje':'var(--green-cream)', 'Kamenac/Hrđa':'var(--pink-cream)',
  'Korozija':'var(--pink-cream)', 'Grafiti':'var(--paper-2)',
  'Apsorpcija':'var(--yellow-cream)', 'Specijalno':'var(--green-mint)',
  'Gradnja':'var(--paper-2)',
};
const M_CAT_ACC = {
  'Odmašćivanje':'var(--green-deep)', 'Kamenac/Hrđa':'var(--pink-deep)',
  'Korozija':'var(--pink-deep)', 'Grafiti':'var(--ink)',
  'Apsorpcija':'var(--ink)', 'Specijalno':'var(--green-deep)',
  'Gradnja':'var(--ink)',
};

// ─────────────────────────────────────────────────────────────────
// MOBILE HEADER — utility strip, then logo + cart + hamburger
// ─────────────────────────────────────────────────────────────────
function MobHeader() {
  return (
    <header style={{
      background:'var(--paper-white)',
      borderBottom:'1px solid var(--hair)',
      position:'sticky', top:0, zIndex:20,
    }}>
      <div className="mono" style={{
        background:'var(--ink)', color:'var(--paper-white)',
        padding:'6px 16px',
        display:'flex', justifyContent:'space-between', alignItems:'center',
        fontSize:9, letterSpacing:'0.14em', textTransform:'uppercase',
      }}>
        <span style={{display:'inline-flex', alignItems:'center', gap:6}}>
          <span style={{
            display:'inline-block', width:6, height:6, borderRadius:'50%',
            background:'var(--yellow)',
          }}/>
          Pošiljka 14:00
        </span>
        <span>+385 (1) 78 99 429</span>
        <span>HR</span>
      </div>
      <div style={{
        padding:'12px 16px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
      }}>
        <div style={{display:'flex', alignItems:'center', gap:10}}>
          <GkMark size={38}/>
          <div>
            <div style={{
              fontSize:17, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1,
            }}>gumakem<span style={{color:'var(--mid)'}}>.hr</span></div>
            <div className="mono" style={{
              fontSize:8, color:'var(--mid)', letterSpacing:'0.16em',
              textTransform:'uppercase', marginTop:3,
            }}>industrijska kemija</div>
          </div>
        </div>
        <div style={{display:'flex', gap:6}}>
          <button style={{
            width:38, height:38, background:'transparent',
            border:'1.5px solid var(--rule)', borderRadius:'var(--r-pill)',
            color:'var(--ink)', cursor:'pointer',
            fontSize:14, display:'flex', alignItems:'center', justifyContent:'center',
          }}>⌕</button>
          <button style={{
            padding:'0 12px', height:38, background:'var(--yellow)',
            border:0, borderRadius:'var(--r-pill)', cursor:'pointer',
            display:'flex', alignItems:'center', gap:6,
            fontFamily:'inherit', fontSize:12, fontWeight:600,
          }}>
            <span style={{fontSize:14}}>⊞</span>
            <span className="mono" style={{
              padding:'1px 6px', background:'var(--ink)', color:'var(--yellow)',
              borderRadius:'var(--r-pill)', fontSize:10,
            }}>0</span>
          </button>
          <button style={{
            width:38, height:38, background:'var(--ink)', color:'var(--paper-white)',
            border:0, borderRadius:'var(--r-pill)', cursor:'pointer',
            fontSize:18, display:'flex', alignItems:'center', justifyContent:'center',
          }}>≡</button>
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE HERO
// ─────────────────────────────────────────────────────────────────
function MobHero() {
  return (
    <section style={{padding:'28px 16px 32px', background:'var(--paper)'}}>
      <span className="gk-eyebrow" style={{display:'flex'}}>
        <span className="dot"/>Biocro · 10 šifri · od 2010
      </span>
      <h1 style={{
        fontSize:46, lineHeight:0.97, fontWeight:600,
        letterSpacing:'-0.035em', margin:'18px 0 0', textWrap:'pretty',
      }}>
        Sredstva za<br/>
        odmašćivanje,<br/>
        hrđu i {' '}
        <span className="gk-hl-pink"><span>korozije.</span></span>
      </h1>
      <p style={{
        fontSize:15, lineHeight:1.5, marginTop:18,
        color:'var(--ink)', fontWeight:400,
      }}>
        Deset visoko koncentriranih biorazgradivih sredstava.
        <span style={{color:'var(--mid)'}}> Ista receptura, serija po serija — petnaest godina.</span>
      </p>
      <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:20}}>
        <Button kind="primary" size="md" icon="→" style={{width:'100%', padding:'15px 18px'}}>
          Otvori cijeli katalog
        </Button>
        <Button kind="outline" size="md" icon="↓" style={{width:'100%', padding:'14px 18px'}}>
          Preuzmi tehničke listove
        </Button>
      </div>

      {/* featured product — green stage */}
      <div style={{
        marginTop:28, background:'var(--green-deep)', color:'var(--paper-white)',
        borderRadius:'var(--r-lg)', padding:'20px 20px 20px',
        position:'relative', overflow:'hidden',
      }}>
        <div style={{
          position:'absolute', top:-40, right:-40,
          width:140, height:140, background:'var(--pink)',
          borderRadius:'50%', opacity:0.95,
        }}/>
        <div style={{
          position:'absolute', top:14, right:18, color:'var(--ink)',
          textAlign:'right', zIndex:1,
        }}>
          <div className="mono" style={{fontSize:8, letterSpacing:'0.16em', fontWeight:600, textTransform:'uppercase'}}>Izdvajamo</div>
          <div style={{fontSize:17, fontWeight:700, letterSpacing:'-0.03em', marginTop:2}}>05/10</div>
        </div>

        <div style={{display:'flex', gap:6, marginBottom:6, position:'relative', zIndex:1}}>
          <Badge tone="pink">BIO · 98%</Badge>
          <Badge tone="ink" style={{background:'rgba(255,255,255,0.12)', color:'var(--paper-white)'}}>REACH ✓</Badge>
        </div>

        <div style={{
          height:200, display:'flex', alignItems:'center', justifyContent:'center',
          marginTop:18, marginBottom:14, position:'relative',
        }}>
          <div style={{
            position:'absolute', bottom:-4, left:'50%',
            transform:'translateX(-50%)', width:160, height:24,
            background:'var(--pink)', filter:'blur(30px)', opacity:0.7,
          }}/>
          <Canister width={140} height={200}
            body="var(--paper-white)" cap="var(--ink)" label="var(--ink)"
            labelText="var(--paper-white)" accent="var(--yellow)"
            productName="BIOCRO" productSub="Corotrans"
            productMeta="5 L · pretvarač"/>
        </div>

        <div className="mono" style={{
          fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase',
          color:'rgba(255,255,255,0.6)', marginBottom:8,
        }}>Pakiranje</div>
        <div style={{display:'flex', gap:5, marginBottom:16, flexWrap:'wrap'}}>
          {[['1L',false],['5L',true],['25L',false],['200L',false]].map(([sz,act])=>(
            <button key={sz} className="mono" style={{
              padding:'8px 12px',
              background:act?'var(--yellow)':'transparent',
              color:act?'var(--ink)':'var(--paper-white)',
              border:`1.5px solid ${act?'var(--yellow)':'rgba(255,255,255,0.22)'}`,
              borderRadius:'var(--r-pill)',
              fontSize:10, letterSpacing:'0.14em',
              fontWeight:act?600:500, cursor:'pointer',
            }}>{sz}</button>
          ))}
        </div>

        <div style={{
          display:'flex', justifyContent:'space-between', alignItems:'flex-end',
          gap:10, position:'relative', zIndex:1,
        }}>
          <div>
            <div className="mono" style={{
              fontSize:9, color:'rgba(255,255,255,0.55)',
              letterSpacing:'0.18em', textTransform:'uppercase',
            }}>Cijena · 5L</div>
            <div style={{fontSize:26, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1, marginTop:2}}>
              92,00 <span style={{fontSize:12, color:'rgba(255,255,255,0.55)'}}>€</span>
            </div>
          </div>
          <Button kind="primary" size="sm" icon="→">Dodaj</Button>
        </div>
        <div style={{
          marginTop:14, paddingTop:12,
          borderTop:'1px solid rgba(255,255,255,0.12)',
          display:'flex', justifyContent:'space-between', alignItems:'center',
          flexWrap:'wrap', gap:10,
        }}>
          <a className="mono" style={{
            fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase',
            color:'var(--paper-white)',
          }}>↓ SDS · TDS</a>
          <StockDot stock="na-stanju"/>
        </div>
      </div>

      {/* stats 2x2 */}
      <div style={{
        marginTop:24, display:'grid', gridTemplateColumns:'1fr 1fr',
        gap:12, paddingTop:18, borderTop:'1px solid var(--rule)',
      }}>
        {[['10','aktivnih SKU'],['15','god. proizvodnje'],['50+','tvrtki naručitelja'],['100%','biorazgradivo']]
          .map(([n,l])=>(
            <div key={l}>
              <div style={{fontSize:30, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1}}>{n}</div>
              <div className="mono" style={{
                fontSize:9, letterSpacing:'0.16em', color:'var(--mid)',
                textTransform:'uppercase', marginTop:5,
              }}>{l}</div>
            </div>
          ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE VERTICALS — horizontal scroll snap
// ─────────────────────────────────────────────────────────────────
function MobVerticals() {
  return (
    <section style={{padding:'40px 0 36px', background:'var(--paper-white)'}}>
      <div style={{padding:'0 16px', marginBottom:20}}>
        <span className="gk-eyebrow" style={{display:'flex', marginBottom:12}}>
          <span className="dot"/>Po vašoj industriji
        </span>
        <h2 style={{
          fontSize:38, lineHeight:1, fontWeight:600, letterSpacing:'-0.03em',
          margin:0,
        }}>
          Što čistimo
          <span className="serif-it" style={{fontWeight:400}}> za vašu </span>
          industriju.
        </h2>
        <p style={{fontSize:14, lineHeight:1.5, color:'var(--mid)', margin:'12px 0 0', maxWidth:340}}>
          Petnaest godina u pogonima naših naručitelja.
        </p>
      </div>
      <div style={{
        display:'flex', gap:10, overflowX:'auto',
        padding:'4px 16px 6px',
        scrollSnapType:'x mandatory',
      }}>
        {M_VERTICALS.map(v=>{
          const fg = v.dark?'var(--paper-white)':'var(--ink)';
          const mid = v.dark?'rgba(255,255,255,0.6)':'var(--mid)';
          const chip = v.dark?'rgba(255,255,255,0.1)':'rgba(22,23,15,0.06)';
          return (
            <div key={v.code} style={{
              flex:'0 0 240px', background:v.bg, color:fg,
              borderRadius:'var(--r-md)', padding:'16px 14px',
              scrollSnapAlign:'start',
              display:'flex', flexDirection:'column', minHeight:240,
            }}>
              <div style={{display:'flex', justifyContent:'space-between', marginBottom:14}}>
                <span className="mono" style={{
                  fontSize:9, letterSpacing:'0.2em', fontWeight:600,
                  textTransform:'uppercase', opacity:0.75,
                }}>{v.code}</span>
                <div style={{
                  width:32, height:32, borderRadius:'var(--r-pill)',
                  background:v.dark?'var(--yellow)':'var(--ink)',
                  color:v.dark?'var(--ink)':v.bg,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontWeight:700, fontSize:14, letterSpacing:'-0.04em',
                }}>{v.glyph}</div>
              </div>
              <h3 style={{fontSize:19, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1.05, margin:0}}>
                {v.name}
              </h3>
              <p className="serif" style={{
                fontSize:12, lineHeight:1.45, marginTop:6,
                color:mid, fontWeight:400,
              }}>{v.blurb}</p>
              <div style={{marginTop:'auto', paddingTop:12}}>
                <div className="mono" style={{
                  fontSize:8, letterSpacing:'0.18em', textTransform:'uppercase',
                  color:mid, marginBottom:5,
                }}>Naručitelji</div>
                <div style={{display:'flex', flexWrap:'wrap', gap:3}}>
                  {v.partners.slice(0,3).map(p=>(
                    <span key={p} className="mono" style={{
                      fontSize:9, color:fg, fontWeight:500, padding:'2px 6px',
                      background:chip, borderRadius:'var(--r-xs)',
                      whiteSpace:'nowrap', letterSpacing:'0.05em',
                    }}>{p}</span>
                  ))}
                  {v.partners.length>3 && (
                    <span className="mono" style={{fontSize:9, color:mid, fontWeight:500}}>+{v.partners.length-3}</span>
                  )}
                </div>
              </div>
              <a className="mono" style={{
                marginTop:12, fontSize:10, letterSpacing:'0.16em',
                textTransform:'uppercase', fontWeight:600, color:fg,
                display:'flex', justifyContent:'space-between',
              }}>Otvori <span>→</span></a>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE CATALOGUE — 2 col grid
// ─────────────────────────────────────────────────────────────────
function MobCatalogue() {
  return (
    <section style={{padding:'40px 16px 36px', background:'var(--paper)'}}>
      <span className="gk-eyebrow" style={{display:'flex', marginBottom:12}}>
        <span className="dot" style={{background:'var(--pink-deep)'}}/>
        Cijela linija · 10 šifri
      </span>
      <h2 style={{
        fontSize:38, lineHeight:1, fontWeight:600, letterSpacing:'-0.03em', margin:0,
      }}>
        Deset stvari,<br/>
        <span className="serif-it" style={{fontWeight:400}}>napravljenih</span> kako spada.
      </h2>

      <div style={{
        marginTop:18, display:'flex', gap:6, overflowX:'auto',
        marginLeft:-16, marginRight:-16, paddingLeft:16, paddingRight:16,
        paddingBottom:6,
      }}>
        {['Sve','Odmašćivanje','Korozija','Apsorpcija','Specijalno','Tehnička roba ↗'].map((f,i)=>(
          <button key={f} className="mono" style={{
            padding:'9px 13px',
            background:i===0?'var(--ink)':'var(--paper-white)',
            color:i===0?'var(--paper-white)':'var(--ink)',
            border:`1.5px solid ${i===0?'var(--ink)':'var(--rule)'}`,
            borderRadius:'var(--r-pill)',
            fontSize:10, letterSpacing:'0.14em', textTransform:'uppercase',
            fontWeight:i===0?600:500, cursor:'pointer', whiteSpace:'nowrap', flexShrink:0,
          }}>{f}</button>
        ))}
      </div>

      <div style={{
        marginTop:18, display:'grid', gridTemplateColumns:'1fr 1fr', gap:8,
      }}>
        {M_CATALOGUE.map(p=>{
          const bg = M_CAT_BG[p.cat]; const acc = M_CAT_ACC[p.cat];
          return (
            <div key={p.code} style={{
              background:'var(--paper-white)', borderRadius:'var(--r-md)',
              border:'1px solid var(--hair)', overflow:'hidden',
              display:'flex', flexDirection:'column',
            }}>
              <div style={{
                background:bg, height:140, position:'relative',
                display:'flex', alignItems:'center', justifyContent:'center',
              }}>
                <div className="mono" style={{
                  position:'absolute', top:8, left:8,
                  fontSize:8, letterSpacing:'0.18em', textTransform:'uppercase',
                  color:acc, fontWeight:600,
                }}>{p.code}</div>
                <div style={{position:'absolute', top:6, right:6}}>
                  {p.bio !== null ? <Badge tone="green">BIO {p.bio}%</Badge> : <Badge tone="outline">Mineral</Badge>}
                </div>
                <Canister width={64} height={90}
                  body="var(--paper-white)" cap="var(--ink)" label={acc}
                  labelText="var(--paper-white)" accent="var(--yellow)"
                  showHandle={false}
                  productName="BIOCRO" productSub={p.code}
                  productMeta={p.pkg.split(' · ')[0]}/>
              </div>
              <div style={{padding:'10px 12px 12px', display:'flex', flexDirection:'column', flex:1}}>
                <div style={{fontSize:14, fontWeight:600, letterSpacing:'-0.015em', lineHeight:1.15}}>{p.name}</div>
                <div style={{fontSize:11, color:'var(--mid)', marginTop:3, lineHeight:1.35}}>{p.use}</div>
                <div style={{
                  marginTop:'auto', paddingTop:8,
                  display:'flex', justifyContent:'space-between', alignItems:'flex-end',
                }}>
                  <div>
                    <div className="mono" style={{fontSize:8, color:'var(--mid)', letterSpacing:'0.16em', textTransform:'uppercase'}}>od</div>
                    <div style={{fontSize:16, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1, marginTop:1}}>
                      {p.price} <span style={{fontSize:10, color:'var(--mid)'}}>€/L</span>
                    </div>
                  </div>
                  <button style={{
                    width:30, height:30, padding:0, border:0,
                    background:'var(--yellow)', color:'var(--ink)',
                    borderRadius:'var(--r-pill)', fontSize:15, fontWeight:600,
                    cursor:'pointer', fontFamily:'inherit',
                  }}>+</button>
                </div>
                <div style={{marginTop:8, paddingTop:8, borderTop:'1px solid var(--hair)'}}>
                  <StockDot stock={p.stock}/>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { MobHeader, MobHero, MobVerticals, MobCatalogue });