// C3 — VERTIKALE
// Entry by industry. Five sector cards (Hrana · Energetika · Auto · Gradnja
// · Osiguranje), each surfacing real partner names + typical products
// gumakem supplies into that vertical. Treats the brand as a vertical-
// solution provider, not a SKU catalogue.
//
// Type:  DM Sans + Source Serif 4 + JetBrains Mono captions
// Brand: same anchor (yellow + ink + eco green echo)

const VT = {
  yellow:   '#FFCE1A',
  ink:      '#16170F',
  paper:    '#FFFFFF',
  canvas:   '#F6F3EB',
  panel:    '#F0EBDD',
  border:   'rgba(22,23,15,0.12)',
  borderHi: 'rgba(22,23,15,0.22)',
  eco:      '#2F6B3D',
  ecoBg:    '#E8F0E2',
  muted:    '#6F6B62',
  mutedLo:  '#9B968B',
};

const VERTICALS = [
  {
    code:'01', key:'food',
    name:'Hrana i piće',
    blurb:'Sanitarno čišćenje linija, odmašćivanje uređaja, uklanjanje kamenca s izmjenjivača.',
    partners:['Coca-Cola','Ledo','Dukat','Karlovačko','Franck','Badel 1862','Gligora'],
    products:['Biocro PRO','Biocro OBC+','Coroclean'],
    accent: 'yellow',
    glyph: 'D',
  },
  {
    code:'02', key:'energy',
    name:'Energetika i nafta',
    blurb:'Kemijsko čišćenje rezervoara, apsorpcija ulja, pretvarač korozije za naftovode.',
    partners:['OMV','Petrokemija Kutina','Euro Petrol'],
    products:['Apsorbent CS','Corotrans','Biocro PRO'],
    accent: 'paper',
    glyph: 'E',
  },
  {
    code:'03', key:'auto',
    name:'Auto i transport',
    blurb:'Odmašćivanje motora i komponenti, čišćenje stakala, pranje vozila.',
    partners:['Auto Hrvatska','Benussi','Euro Petrol'],
    products:['Biocro Par','Staklex','Biocro Eko sol+'],
    accent: 'paper',
    glyph: 'A',
  },
  {
    code:'04', key:'build',
    name:'Gradnja i infrastruktura',
    blurb:'Razdjelnik betona za oplate, uklanjanje grafita s fasada, zaštita armature.',
    partners:['Viadukt','Đuro Đaković'],
    products:['Gumoplat M/D','Antigrafit ND','Corotrans'],
    accent: 'paper',
    glyph: 'T',
  },
  {
    code:'05', key:'maint',
    name:'Održavanje i osiguranje',
    blurb:'Sanacija nakon štetnih događaja, čišćenje opreme, redovito održavanje pogona.',
    partners:['Euroherc','Adriatic osiguranje'],
    products:['Biocro Par','Apsorbent CS','Staklex'],
    accent: 'paper',
    glyph: 'O',
  },
];

const GkMarkV = ({size=42}) => (
  <div style={{
    width:size, height:size, background:VT.yellow,
    display:'flex', alignItems:'center', justifyContent:'center',
    color:VT.ink, flexShrink:0,
    fontFamily:'"DM Sans", system-ui, sans-serif',
    fontWeight:700, fontSize:size*0.58, letterSpacing:'-0.05em',
    lineHeight:1,
  }}>
    <span style={{display:'inline-block', transform:'translateY(-1px)'}}>Gk</span>
  </div>
);

function ConceptVertikale() {
  return (
    <div style={{
      width:1440, height:900, background:VT.paper, color:VT.ink,
      fontFamily:'"DM Sans", system-ui, sans-serif',
      position:'relative', overflow:'hidden',
      display:'flex', flexDirection:'column',
    }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=JetBrains+Mono:wght@300;400;500;600&display=swap');
        .v-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-feature-settings:"tnum"}
        .v-serif{font-family:"Source Serif 4",Georgia,serif}
        .v-sans{font-family:"DM Sans",system-ui,sans-serif}
        .v-card{transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s}
        .v-card:hover{transform: translateY(-3px); box-shadow:0 18px 40px -12px rgba(0,0,0,0.12)}
      `}</style>

      {/* NAV */}
      <div style={{
        padding:'18px 36px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`1px solid ${VT.border}`,
      }}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <GkMarkV size={42}/>
          <div>
            <div style={{
              fontSize:18, fontWeight:600, letterSpacing:'-0.015em', lineHeight:1,
            }}>
              gumakem
            </div>
            <div className="v-mono" style={{
              fontSize:10, color:VT.muted, letterSpacing:'0.18em',
              textTransform:'uppercase', marginTop:3,
            }}>
              specijalizirana industrijska kemija
            </div>
          </div>
        </div>
        <nav style={{display:'flex', gap:28, fontSize:14, fontWeight:500}}>
          <a>Po industriji</a>
          <a>Biocro linija</a>
          <a>Tehnička roba</a>
          <a>Usluge</a>
          <a>Tehnički listovi</a>
          <a>O proizvodnji</a>
        </nav>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <button className="v-mono" style={{
            padding:'9px 14px', background:'transparent', color:VT.ink,
            border:`1px solid ${VT.ink}`,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            fontWeight:500, cursor:'pointer',
          }}>Prijava B2B</button>
          <button className="v-mono" style={{
            padding:'9px 14px', background:VT.yellow, color:VT.ink,
            border:0, fontWeight:600,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            cursor:'pointer',
          }}>Košarica (0)</button>
        </div>
      </div>

      {/* HERO — 2 col: massive headline left, case study right */}
      <div style={{
        display:'grid', gridTemplateColumns:'1.35fr 1fr',
        borderBottom:`1px solid ${VT.border}`,
      }}>
        <div style={{padding:'40px 36px 32px'}}>
          <div className="v-mono" style={{
            fontSize:11, letterSpacing:'0.2em', color:VT.muted,
            textTransform:'uppercase', marginBottom:18,
            display:'flex', alignItems:'center', gap:10,
          }}>
            <span style={{display:'inline-block',width:24,height:4,background:VT.yellow}}/>
            Specijalizirana proizvodnja · Zagreb · od 2010
          </div>
          <h1 className="v-sans" style={{
            fontSize:82, lineHeight:0.95, letterSpacing:'-0.035em',
            fontWeight:500, margin:0, textWrap:'pretty',
          }}>
            Što čistimo
            <span style={{display:'block', position:'relative'}}>
              <span className="v-serif" style={{fontStyle:'italic', fontWeight:400}}>za vašu </span>
              industriju.
            </span>
          </h1>
          <p style={{
            fontSize:17, lineHeight:1.5, color:VT.ink,
            marginTop:22, maxWidth:540, fontWeight:400,
          }}>
            Deset biorazgradivih kemikalija i katalog tehničke robe.
            <span style={{color:VT.muted}}> Petnaest godina u pogonima hrane, energije, transporta, gradnje i osiguranja.</span>
          </p>
          <div style={{display:'flex', gap:10, marginTop:24}}>
            <button className="v-sans" style={{
              padding:'14px 20px', background:VT.ink, color:VT.paper,
              border:0, fontWeight:600, fontSize:14, cursor:'pointer',
              fontFamily:'inherit',
              display:'flex', alignItems:'center', gap:8,
            }}>
              Odaberi industriju ↓
            </button>
            <button className="v-mono" style={{
              padding:'14px 20px', background:'transparent', color:VT.ink,
              border:`1px solid ${VT.ink}`,
              fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
              fontWeight:500, cursor:'pointer',
            }}>
              Zatraži ponudu
            </button>
          </div>
        </div>

        {/* Right: yellow case-study card */}
        <div style={{
          padding:'40px 36px 32px 0',
        }}>
          <div style={{
            background:VT.yellow, padding:'24px 26px',
            height:'100%', display:'flex', flexDirection:'column',
            position:'relative', overflow:'hidden',
          }}>
            <div className="v-mono" style={{
              fontSize:10, letterSpacing:'0.2em', color:VT.ink,
              textTransform:'uppercase', fontWeight:600,
              display:'flex', justifyContent:'space-between',
            }}>
              <span>Studija slučaja · 014</span>
              <span>Hrana i piće</span>
            </div>

            <div style={{flex:1, display:'flex', alignItems:'center', paddingTop:18, paddingBottom:12}}>
              <div className="v-serif" style={{
                fontSize:32, lineHeight:1.2, fontStyle:'italic',
                color:VT.ink, fontWeight:400, letterSpacing:'-0.01em',
              }}>
                „Coca-Cola koristi Biocro PRO u četiri punionice.
                Bez tragova, bez korozije, sa sigurnosno-tehničkim listom za HACCP."
              </div>
            </div>

            <div style={{
              display:'flex', justifyContent:'space-between',
              alignItems:'flex-end',
              borderTop:`1px solid ${VT.ink}`, paddingTop:14,
            }}>
              <div>
                <div className="v-mono" style={{
                  fontSize:9, letterSpacing:'0.18em', color:VT.ink,
                  textTransform:'uppercase', fontWeight:600,
                }}>Naručitelj</div>
                <div className="v-sans" style={{
                  fontSize:20, fontWeight:600, letterSpacing:'-0.01em',
                  marginTop:2,
                }}>Coca-Cola HBC</div>
              </div>
              <a className="v-mono" style={{
                fontSize:11, letterSpacing:'0.14em', color:VT.ink,
                textTransform:'uppercase', fontWeight:600,
                borderBottom:`1.5px solid ${VT.ink}`, paddingBottom:1,
              }}>
                Pročitaj →
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* VERTICALS — 5 cards */}
      <div style={{
        flex:1, padding:'24px 28px 18px',
        display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap:10,
        alignItems:'stretch',
      }}>
        {VERTICALS.map(v => (
          <div key={v.key} className="v-card" style={{
            background: v.accent==='yellow' ? VT.yellow : VT.paper,
            border:`1px solid ${v.accent==='yellow' ? VT.ink : VT.border}`,
            padding:'18px 16px 14px',
            display:'flex', flexDirection:'column',
            cursor:'pointer', position:'relative',
          }}>
            {/* top: code + glyph */}
            <div style={{
              display:'flex', justifyContent:'space-between',
              alignItems:'flex-start', marginBottom:18,
            }}>
              <div className="v-mono" style={{
                fontSize:10, letterSpacing:'0.2em', color:VT.ink,
                textTransform:'uppercase', fontWeight:600, opacity:0.7,
              }}>
                {v.code} · {v.partners.length} naručit.
              </div>
              <div style={{
                width:36, height:36,
                background: v.accent==='yellow' ? VT.ink : VT.yellow,
                color: v.accent==='yellow' ? VT.yellow : VT.ink,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontFamily:'"DM Sans",sans-serif', fontWeight:700,
                fontSize:18, letterSpacing:'-0.04em',
              }}>{v.glyph}</div>
            </div>

            {/* name */}
            <h3 className="v-sans" style={{
              fontSize:24, fontWeight:600, letterSpacing:'-0.025em',
              lineHeight:1.05, margin:0,
            }}>
              {v.name}
            </h3>

            {/* blurb */}
            <p className="v-serif" style={{
              fontSize:13, lineHeight:1.45, marginTop:8,
              color: v.accent==='yellow' ? VT.ink : VT.muted,
              fontWeight:400, opacity: v.accent==='yellow' ? 0.85 : 1,
            }}>
              {v.blurb}
            </p>

            {/* partners */}
            <div style={{
              marginTop:'auto', paddingTop:14,
              borderTop:`1px solid ${v.accent==='yellow' ? 'rgba(22,23,15,0.18)' : VT.border}`,
            }}>
              <div className="v-mono" style={{
                fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase',
                color: v.accent==='yellow' ? VT.ink : VT.muted,
                opacity:0.8, marginBottom:6,
              }}>Naručitelji</div>
              <div style={{display:'flex', flexWrap:'wrap', gap:4}}>
                {v.partners.slice(0,5).map(p=>(
                  <span key={p} className="v-mono" style={{
                    fontSize:10, letterSpacing:'0.08em',
                    color:VT.ink, fontWeight:500,
                    padding:'3px 6px',
                    background: v.accent==='yellow' ? 'rgba(22,23,15,0.08)' : VT.canvas,
                    whiteSpace:'nowrap',
                  }}>{p}</span>
                ))}
                {v.partners.length>5 && (
                  <span className="v-mono" style={{
                    fontSize:10, color:VT.muted, padding:'3px 4px',
                    fontWeight:500,
                  }}>+{v.partners.length-5}</span>
                )}
              </div>
            </div>

            {/* products */}
            <div style={{paddingTop:10}}>
              <div className="v-mono" style={{
                fontSize:9, letterSpacing:'0.18em', textTransform:'uppercase',
                color: v.accent==='yellow' ? VT.ink : VT.muted,
                opacity:0.8, marginBottom:6,
              }}>Tipično rješenje</div>
              <div style={{display:'flex', flexWrap:'wrap', gap:4}}>
                {v.products.map(p=>(
                  <span key={p} className="v-sans" style={{
                    fontSize:11, fontWeight:500,
                    padding:'3px 7px',
                    border:`1px solid ${v.accent==='yellow' ? VT.ink : VT.borderHi}`,
                    color:VT.ink,
                  }}>{p}</span>
                ))}
              </div>
            </div>

            {/* CTA */}
            <a className="v-mono" style={{
              marginTop:14, fontSize:11, letterSpacing:'0.16em',
              textTransform:'uppercase', fontWeight:600, color:VT.ink,
              display:'flex', alignItems:'center', justifyContent:'space-between',
              borderTop:`1px solid ${v.accent==='yellow' ? 'rgba(22,23,15,0.18)' : VT.border}`,
              paddingTop:12,
            }}>
              Otvori industriju
              <span style={{fontSize:14}}>→</span>
            </a>
          </div>
        ))}
      </div>

      {/* BOTTOM — trust + B2B portal CTA */}
      <div style={{
        padding:'16px 36px', borderTop:`1px solid ${VT.border}`,
        background:VT.canvas,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        gap:24,
      }}>
        <div style={{display:'flex', alignItems:'center', gap:18}}>
          {[
            ['ISO', '9001 · 14001'],
            ['REACH', 'usklađeno'],
            ['HR', 'Zagreb · 2010'],
            ['BIO', '≥ 98% razgrad.'],
          ].map(([k,v])=>(
            <div key={k} style={{display:'flex', alignItems:'center', gap:8}}>
              <div className="v-mono" style={{
                width:32, height:32, border:`1.5px solid ${VT.ink}`,
                display:'flex', alignItems:'center', justifyContent:'center',
                fontSize:10, fontWeight:600, letterSpacing:'0.04em',
              }}>{k}</div>
              <div className="v-mono" style={{
                fontSize:10, color:VT.muted, letterSpacing:'0.14em',
                textTransform:'uppercase', lineHeight:1.2,
              }}>{v}</div>
            </div>
          ))}
        </div>

        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <span className="v-serif" style={{
            fontSize:14, color:VT.muted, fontStyle:'italic',
          }}>
            Veliki naručitelj? Ugovorne cijene putem B2B portala.
          </span>
          <button className="v-mono" style={{
            padding:'10px 16px', background:VT.ink, color:VT.paper,
            border:0, fontSize:11, letterSpacing:'0.14em',
            textTransform:'uppercase', fontWeight:600, cursor:'pointer',
            fontFamily:'inherit',
          }}>
            Otvori račun →
          </button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConceptVertikale });