// mobile-sections-2.jsx — case study + story + trust + footer (mobile)

// ─────────────────────────────────────────────────────────────────
// MOBILE CASE STUDY
// ─────────────────────────────────────────────────────────────────
function MobCase() {
  return (
    <section style={{
      background:'var(--green-deep)', color:'var(--paper-white)',
      padding:'48px 18px 40px', position:'relative', overflow:'hidden',
    }}>
      <div className="serif-it" style={{
        position:'absolute', top:-50, right:-10,
        fontSize:280, lineHeight:0.7, color:'var(--pink)',
        opacity:0.18, fontWeight:400, pointerEvents:'none',
      }}>“</div>
      <span className="mono" style={{
        fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase',
        color:'var(--pink)', fontWeight:600,
        display:'inline-flex', alignItems:'center', gap:10, marginBottom:18,
        position:'relative', zIndex:1,
      }}>
        <span style={{width:24, height:2, background:'var(--pink)', display:'inline-block'}}/>
        Studija · 014 · Hrana
      </span>
      <p className="serif" style={{
        fontSize:24, lineHeight:1.25, fontWeight:400,
        letterSpacing:'-0.01em', margin:0,
        position:'relative', zIndex:1, textWrap:'pretty',
      }}>
        <span className="serif-it">„Coca-Cola koristi Biocro PRO u </span>
        <span style={{color:'var(--yellow)'}}>četiri punionice</span>
        <span className="serif-it">. Bez tragova na inoxu, bez korozije, sa HACCP-usklađenim SDS-om."</span>
      </p>

      <div style={{
        marginTop:24, paddingTop:18,
        borderTop:'1px solid rgba(255,255,255,0.18)',
        display:'flex', alignItems:'center', gap:12,
      }}>
        <div style={{
          width:42, height:42, borderRadius:'50%', background:'var(--pink)',
          display:'flex', alignItems:'center', justifyContent:'center',
          color:'var(--ink)', fontWeight:700, fontSize:14, letterSpacing:'-0.04em',
        }}>CC</div>
        <div style={{flex:1}}>
          <div className="mono" style={{
            fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase',
            color:'rgba(255,255,255,0.55)',
          }}>Naručitelj</div>
          <div style={{fontSize:15, fontWeight:600, letterSpacing:'-0.01em'}}>Coca-Cola HBC Hrvatska</div>
        </div>
      </div>

      <div style={{
        marginTop:18, background:'rgba(255,255,255,0.06)',
        border:'1px solid rgba(255,255,255,0.14)',
        borderRadius:'var(--r-lg)', padding:'20px',
      }}>
        <div className="mono" style={{
          fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase',
          color:'var(--yellow)', fontWeight:600, marginBottom:14,
        }}>Rezultati · 12 mjeseci</div>
        {[
          ['98%','manje tragova na inoxu','var(--yellow)'],
          ['4','punionice na pogonu','var(--pink)'],
          ['0','štetnih derivata','var(--paper-white)'],
          ['16h →6h','sanitarni ciklus','var(--paper-white)'],
        ].map(([n,l,c],i)=>(
          <div key={i} style={{
            display:'flex', alignItems:'baseline', gap:14,
            padding:'10px 0',
            borderTop: i>0?'1px solid rgba(255,255,255,0.10)':'none',
          }}>
            <div style={{fontSize:24, fontWeight:600, letterSpacing:'-0.03em', color:c, lineHeight:1, minWidth:80}}>{n}</div>
            <div className="mono" style={{
              fontSize:10, color:'rgba(255,255,255,0.78)',
              letterSpacing:'0.12em', textTransform:'uppercase', lineHeight:1.3,
            }}>{l}</div>
          </div>
        ))}
      </div>

      <MonoButton kind="light" style={{marginTop:18, width:'100%', justifyContent:'center'}}>
        Pročitaj cijelu studiju →
      </MonoButton>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE STORY
// ─────────────────────────────────────────────────────────────────
function MobStory() {
  return (
    <section style={{padding:'48px 16px 44px', background:'var(--paper-white)'}}>
      <div style={{position:'relative', marginBottom:24}}>
        <div style={{
          position:'absolute', bottom:-14, left:-10,
          width:72, height:72, background:'var(--yellow)',
          borderRadius:'50%', zIndex:0,
        }}/>
        <div style={{
          position:'relative', zIndex:1, aspectRatio:'4/3',
          background:'linear-gradient(170deg, var(--green-soft) 0%, var(--green-mid) 100%)',
          borderRadius:'var(--r-lg)', overflow:'hidden',
          display:'flex', alignItems:'flex-end', padding:18,
        }}>
          <div style={{
            position:'absolute', inset:0,
            backgroundImage:'radial-gradient(circle, rgba(22,23,15,0.22) 1px, transparent 1.4px)',
            backgroundSize:'6px 6px', mixBlendMode:'multiply', opacity:0.6,
          }}/>
          <div style={{
            position:'relative', zIndex:1, background:'var(--paper-white)',
            padding:'10px 14px', borderRadius:'var(--r-md)',
          }}>
            <div className="mono" style={{
              fontSize:8, letterSpacing:'0.18em', textTransform:'uppercase',
              color:'var(--mid)', marginBottom:3,
            }}>[FOTOGRAFIJA · vlasnik u pogonu]</div>
            <div style={{fontSize:12, fontWeight:600}}>Mjesto za stvarnu fotografiju</div>
          </div>
        </div>
      </div>

      <span className="gk-eyebrow" style={{display:'flex', marginBottom:12}}>
        <span className="dot" style={{background:'var(--yellow)'}}/>
        O proizvodnji · Gruška 18
      </span>
      <h2 style={{
        fontSize:36, lineHeight:1, fontWeight:600, letterSpacing:'-0.03em', margin:0,
      }}>
        Petnaest godina<br/>
        u istom <span className="gk-hl-yellow"><span>dvorištu.</span></span>
      </h2>
      <p className="serif-it" style={{
        fontSize:17, lineHeight:1.4, color:'var(--ink)',
        marginTop:14, marginBottom:18, fontWeight:400,
      }}>
        „Ne pravimo previše različitih stvari — pravimo onih nekoliko kako spada."
      </p>
      <p style={{
        fontSize:14, lineHeight:1.55, color:'var(--mid)', margin:0,
      }}>
        Gumakem d.o.o. počeo je 2010. u malom pogonu u Gruškoj. Današnji
        katalog ima deset visoko koncentriranih biorazgradivih sredstava
        i katalog tehničke gumene robe.
      </p>

      <div style={{marginTop:20, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:6}}>
        {[['2010','osnivanje'],['ISO','9001 · 14001'],['REACH','sve linije']].map(([n,l])=>(
          <div key={l} style={{
            background:'var(--paper)', borderRadius:'var(--r-md)',
            padding:'12px', border:'1px solid var(--hair)',
          }}>
            <div style={{fontSize:18, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1}}>{n}</div>
            <div className="mono" style={{
              fontSize:9, letterSpacing:'0.14em', color:'var(--mid)',
              textTransform:'uppercase', marginTop:4, lineHeight:1.3,
            }}>{l}</div>
          </div>
        ))}
      </div>

      <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:20}}>
        <Button kind="outline" size="md" icon="→" style={{width:'100%'}}>
          Pročitaj o proizvodnji
        </Button>
        <MonoButton kind="outline" style={{justifyContent:'center'}}>Posjeti pogon</MonoButton>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE TRUST
// ─────────────────────────────────────────────────────────────────
function MobTrust() {
  return (
    <section style={{
      background:'var(--green-cream)', padding:'28px 16px',
      borderTop:'1px solid var(--hair)', borderBottom:'1px solid var(--hair)',
    }}>
      <span className="gk-eyebrow" style={{display:'flex', marginBottom:14}}>
        <span className="dot" style={{background:'var(--pink-deep)'}}/>
        Standardi i certifikati
      </span>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:14, marginBottom:18}}>
        <Pictogram char="ISO" label="9001 · 14001"/>
        <Pictogram char="REACH" label="usklađena linija"/>
        <Pictogram char="HR" label="Zagreb · 2010"/>
        <Pictogram char="BIO" label="≥ 98% razgrad."/>
      </div>
      <a className="mono" style={{
        display:'inline-block', fontSize:11, letterSpacing:'0.14em',
        textTransform:'uppercase', color:'var(--ink)', fontWeight:600,
        borderBottom:'2px solid var(--pink-deep)', paddingBottom:2,
      }}>Preuzmi certifikate (PDF) →</a>

      <div style={{
        marginTop:24, paddingTop:18, borderTop:'1px solid var(--rule)',
      }}>
        <div className="mono" style={{
          fontSize:9, letterSpacing:'0.2em', color:'var(--mid)',
          textTransform:'uppercase', marginBottom:10,
        }}>Naručitelji od 2010</div>
        <div style={{display:'flex', flexWrap:'wrap', gap:'10px 16px'}}>
          {['Coca-Cola','OMV','Petrokemija','Karlovačko','Dukat','Franck','Ledo','Đuro Đaković','Viadukt','Auto Hrvatska']
            .map(n => <PartnerName key={n} name={n} size="sm"/>)}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// MOBILE FOOTER
// ─────────────────────────────────────────────────────────────────
function MobFooter() {
  return (
    <footer style={{background:'var(--ink)', color:'var(--paper-white)', padding:'40px 16px 22px'}}>
      <h3 style={{
        fontSize:38, lineHeight:1, letterSpacing:'-0.03em',
        fontWeight:600, margin:0, color:'var(--paper-white)',
      }}>
        Trebate <span className="serif-it" style={{fontWeight:400}}>količinu</span>
        <br/>ili sigurnosni list?
      </h3>
      <p style={{
        fontSize:14, lineHeight:1.55, marginTop:14,
        color:'rgba(255,255,255,0.65)',
      }}>
        Pišite nam izravno. Procurement za bulk javlja se u istom danu.
      </p>

      <div style={{
        background:'rgba(255,255,255,0.05)', borderRadius:'var(--r-lg)',
        padding:'18px', marginTop:18,
      }}>
        <div className="mono" style={{
          fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase',
          color:'var(--yellow)', marginBottom:12, fontWeight:600,
        }}>Direktan kontakt</div>
        <a style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
          <span style={{
            width:32, height:32, borderRadius:'50%',
            background:'var(--yellow)', color:'var(--ink)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:13, fontWeight:700,
          }}>℡</span>
          <div>
            <div className="mono" style={{fontSize:8, letterSpacing:'0.16em', color:'rgba(255,255,255,0.5)', textTransform:'uppercase'}}>Pozovi</div>
            <div style={{fontSize:15, fontWeight:600}}>+385 (1) 78 99 429</div>
          </div>
        </a>
        <a style={{display:'flex', alignItems:'center', gap:10}}>
          <span style={{
            width:32, height:32, borderRadius:'50%',
            background:'var(--pink)', color:'var(--ink)',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:13, fontWeight:700,
          }}>@</span>
          <div>
            <div className="mono" style={{fontSize:8, letterSpacing:'0.16em', color:'rgba(255,255,255,0.5)', textTransform:'uppercase'}}>E-mail</div>
            <div style={{fontSize:15, fontWeight:600}}>info@gumakem.hr</div>
          </div>
        </a>
        <Button kind="primary" size="md" icon="→" style={{marginTop:14, width:'100%'}}>
          Zatraži ponudu
        </Button>
      </div>

      <div style={{marginTop:32, paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.10)'}}>
        <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:18}}>
          <GkMark size={42}/>
          <div>
            <div style={{fontSize:17, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1}}>
              gumakem<span style={{color:'rgba(255,255,255,0.5)'}}>.hr</span>
            </div>
            <div className="mono" style={{fontSize:9, color:'rgba(255,255,255,0.5)', letterSpacing:'0.16em', textTransform:'uppercase', marginTop:4}}>
              od 2010 · Zagreb
            </div>
          </div>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:20, marginBottom:20}}>
          {[
            {title:'Trgovina', links:['Biocro Par','OBC+','Pro','Coroclean','Corotrans']},
            {title:'Tehnička roba', links:['Brtve','Semerinzi','O-prsteni','Katalog ↗']},
            {title:'Usluge', links:['Čišćenje rezervoara','Kemijsko čišćenje','Sanacija šteta']},
            {title:'Tvrtka', links:['O proizvodnji','Studije slučaja','SDS','Kontakt']},
          ].map(col => (
            <div key={col.title}>
              <div className="mono" style={{
                fontSize:9, letterSpacing:'0.2em', textTransform:'uppercase',
                color:'var(--yellow)', fontWeight:600, marginBottom:10,
              }}>{col.title}</div>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:7}}>
                {col.links.map(l => (
                  <li key={l}>
                    <a style={{fontSize:12, color:'rgba(255,255,255,0.78)'}}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>

      <div style={{
        paddingTop:16, borderTop:'1px solid rgba(255,255,255,0.10)',
      }}>
        <div className="mono" style={{
          fontSize:9, color:'rgba(255,255,255,0.45)',
          letterSpacing:'0.14em', textTransform:'uppercase', lineHeight:1.5,
        }}>
          © 2026 GUMAKEM d.o.o.<br/>
          Gruška 18, 10000 Zagreb · OIB 12345678901
        </div>
        <div style={{display:'flex', gap:14, marginTop:10, flexWrap:'wrap'}}>
          {['Privatnost','Kolačići','Uvjeti'].map(l => (
            <a key={l} className="mono" style={{
              fontSize:9, color:'rgba(255,255,255,0.55)',
              letterSpacing:'0.12em', textTransform:'uppercase',
            }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { MobCase, MobStory, MobTrust, MobFooter });