// C2 — PORTAL
// Treats the homepage as a B2B operations terminal. Live status ribbon,
// faceted search (SKU / CAS / application / industry), every SKU exposed
// as a tile with stock, packaging chips, SDS link, price/L, add button.
// Yellow used for live indicators and primary actions. Plex face for the
// technical/utility feel.
//
// Type:  IBM Plex Sans + IBM Plex Mono
// Brand: same anchor (yellow + ink + eco green)

const PR = {
  yellow:   '#FFCE1A',
  yellowLo: '#F5C413',
  ink:      '#16170F',
  paper:    '#FFFFFF',
  canvas:   '#F6F3EB',
  panel:    '#FAF8F0',
  border:   'rgba(22,23,15,0.10)',
  borderHi: 'rgba(22,23,15,0.20)',
  eco:      '#2F6B3D',
  ecoBg:    '#E8F0E2',
  muted:    '#6F6B62',
  mutedLo:  '#9B968B',
  alert:    '#B5430C',
};

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

const STOCK_LABEL = {
  'na-stanju': { dot:'#2F6B3D', label:'NA STANJU · dostava 1–2 dana' },
  'malo':      { dot:'#C68A0E', label:'MALO NA STANJU · 3+ kom.' },
  'najava':    { dot:'#6F6B62', label:'NA NAJAVU · 5 rd' },
};

const GkMarkPortal = ({size=40}) => (
  <div style={{
    width:size, height:size, background:PR.yellow,
    display:'flex', alignItems:'center', justifyContent:'center',
    color:PR.ink, flexShrink:0,
    fontFamily:'"IBM Plex 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 ConceptPortal() {
  return (
    <div style={{
      width:1440, height:900, background:PR.paper, color:PR.ink,
      fontFamily:'"IBM Plex Sans", system-ui, sans-serif',
      position:'relative', overflow:'hidden',
      display:'flex', flexDirection:'column',
    }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap');
        .p-mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-feature-settings:"tnum"}
        .p-sans{font-family:"IBM Plex Sans",system-ui,sans-serif}
        .p-tile:hover{background:#FBF8EE; border-color:${PR.borderHi}}
      `}</style>

      {/* NAV */}
      <div style={{
        padding:'12px 28px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`1px solid ${PR.border}`,
      }}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <GkMarkPortal size={40}/>
          <div>
            <div style={{
              fontSize:17, fontWeight:600, letterSpacing:'-0.015em', lineHeight:1,
            }}>
              gumakem
            </div>
            <div className="p-mono" style={{
              fontSize:9, color:PR.muted, letterSpacing:'0.18em',
              textTransform:'uppercase', marginTop:3,
            }}>
              proizvodnja · zagreb
            </div>
          </div>
        </div>

        <nav style={{
          display:'flex', gap:24, fontSize:13, fontWeight:500,
        }}>
          <a style={{color:PR.ink, borderBottom:`2px solid ${PR.yellow}`, paddingBottom:14, marginBottom:-14}}>Trgovina</a>
          <a style={{color:PR.muted}}>Tehnička roba</a>
          <a style={{color:PR.muted}}>Tehnički listovi</a>
          <a style={{color:PR.muted}}>Usluge</a>
          <a style={{color:PR.muted}}>O proizvodnji</a>
          <a style={{color:PR.muted}}>Kontakt</a>
        </nav>

        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <button className="p-mono" style={{
            padding:'8px 12px', background:'transparent', color:PR.ink,
            border:`1px solid ${PR.ink}`,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            fontWeight:500, cursor:'pointer',
            display:'flex', alignItems:'center', gap:6,
          }}>
            <span style={{width:6,height:6,background:PR.eco,borderRadius:'50%',display:'inline-block'}}/>
            B2B portal
          </button>
          <button className="p-mono" style={{
            padding:'8px 12px', background:PR.yellow, color:PR.ink,
            border:0, fontWeight:600,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            cursor:'pointer',
          }}>
            Košarica (0)
          </button>
        </div>
      </div>

      {/* LIVE STATUS RIBBON */}
      <div className="p-mono" style={{
        background:PR.yellow, color:PR.ink,
        padding:'8px 28px',
        display:'flex', justifyContent:'space-between', alignItems:'center',
        fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase',
        fontWeight:500, borderBottom:`1px solid ${PR.ink}`,
      }}>
        <span style={{display:'flex',gap:18, alignItems:'center'}}>
          <span style={{display:'flex',gap:6,alignItems:'center'}}>
            <span style={{width:8,height:8,background:PR.ink,borderRadius:'50%',display:'inline-block'}}/>
            <b>Pogon otvoren</b>
          </span>
          <span>· Današnja serija LOT 26-0114 · Pošiljka 14:00 · Dostava HR 1–2 rd.</span>
        </span>
        <span style={{display:'flex', gap:14}}>
          <span>9 od 10 SKU na stanju</span>
          <span>·</span>
          <span>Pre-press 26.01.</span>
        </span>
      </div>

      {/* SEARCH + FILTERS */}
      <div style={{
        padding:'18px 28px',
        display:'flex', alignItems:'center', gap:12,
        borderBottom:`1px solid ${PR.border}`,
        background:PR.panel,
      }}>
        <div style={{
          flex:1, position:'relative',
          background:PR.paper,
          border:`1.5px solid ${PR.ink}`,
          display:'flex', alignItems:'center',
          padding:'0 14px', height:46,
        }}>
          <span style={{fontSize:16, color:PR.muted, marginRight:10}}>⌕</span>
          <input className="p-sans" placeholder="Pretraži: šifra, primjena, industrija, CAS broj ili LOT…" style={{
            flex:1, border:0, background:'transparent', outline:'none',
            fontSize:14, color:PR.ink,
            fontFamily:'inherit',
          }}/>
          <span className="p-mono" style={{
            fontSize:10, color:PR.muted, letterSpacing:'0.16em',
            textTransform:'uppercase', padding:'3px 7px',
            border:`1px solid ${PR.border}`,
          }}>⌘ K</span>
        </div>
        <div style={{display:'flex', gap:6}}>
          {['Sve kategorije', 'BIO ≥95%', 'NA STANJU', 'Kanister 5L'].map((f,i)=>(
            <button key={f} className="p-mono" style={{
              padding:'10px 12px',
              background: i===0 ? PR.ink : PR.paper,
              color: i===0 ? PR.paper : PR.ink,
              border:`1px solid ${i===0 ? PR.ink : PR.border}`,
              fontSize:11, letterSpacing:'0.1em', textTransform:'uppercase',
              fontWeight:500, cursor:'pointer',
              display:'flex', alignItems:'center', gap:6,
            }}>{f} {i===0 ? '▾' : ''}</button>
          ))}
        </div>
      </div>

      {/* TOOLBAR */}
      <div className="p-mono" style={{
        padding:'10px 28px', display:'flex', justifyContent:'space-between',
        alignItems:'center', fontSize:11, letterSpacing:'0.14em',
        textTransform:'uppercase', color:PR.muted,
        borderBottom:`1px solid ${PR.border}`,
      }}>
        <span><b style={{color:PR.ink}}>10</b> rezultata · linija Biocro + tehnička sredstva</span>
        <span style={{display:'flex',gap:18}}>
          <span>Sortiraj: <b style={{color:PR.ink}}>Po šifri ↑</b></span>
          <span style={{color:PR.borderHi}}>|</span>
          <span style={{display:'flex',gap:4}}>
            <span style={{
              width:18,height:18,background:PR.ink,
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              color:PR.paper, fontSize:10,
            }}>▦</span>
            <span style={{
              width:18,height:18,border:`1px solid ${PR.border}`,
              display:'inline-flex',alignItems:'center',justifyContent:'center',
              fontSize:10,
            }}>≡</span>
          </span>
        </span>
      </div>

      {/* PRODUCT GRID — 5 x 2 = 10 SKUs, fully exposed */}
      <div style={{
        flex:1, padding:'14px 28px', display:'grid',
        gridTemplateColumns:'repeat(5, 1fr)', gap:10,
        background:PR.panel,
        alignContent:'start',
      }}>
        {SKUS.map((s, i)=>{
          const stock = STOCK_LABEL[s.stock];
          return (
            <div key={s.code} className="p-tile" style={{
              background:PR.paper, border:`1px solid ${PR.border}`,
              padding:'12px 12px 10px', position:'relative',
              display:'flex', flexDirection:'column', minHeight:240,
              transition:'background .12s, border-color .12s',
            }}>
              {/* top row — code + bio */}
              <div style={{
                display:'flex', justifyContent:'space-between',
                alignItems:'flex-start', marginBottom:8,
              }}>
                <div className="p-mono" style={{
                  fontSize:10, letterSpacing:'0.16em', color:PR.muted,
                  textTransform:'uppercase', fontWeight:500,
                }}>
                  {String(i+1).padStart(2,'0')} · {s.code}
                </div>
                {s.bio !== null ? (
                  <div className="p-mono" style={{
                    fontSize:9, padding:'2px 6px',
                    background:PR.ecoBg, color:PR.eco,
                    letterSpacing:'0.1em', fontWeight:600,
                  }}>BIO {s.bio}%</div>
                ) : (
                  <div className="p-mono" style={{
                    fontSize:9, padding:'2px 6px',
                    border:`1px solid ${PR.border}`, color:PR.muted,
                    letterSpacing:'0.1em', fontWeight:500,
                  }}>MINERAL</div>
                )}
              </div>

              {/* mini canister glyph */}
              <div style={{
                height:78, position:'relative',
                background:PR.canvas,
                display:'flex', alignItems:'center', justifyContent:'center',
                marginBottom:10, border:`1px solid ${PR.border}`,
              }}>
                <div style={{
                  position:'relative', width:36, height:54,
                  background:PR.paper, border:`1px solid ${PR.ink}`,
                }}>
                  <div style={{
                    position:'absolute', top:-7, left:'50%',
                    transform:'translateX(-50%)',
                    width:14, height:7, background:PR.ink,
                  }}/>
                  <div style={{
                    position:'absolute', top:'30%', left:3, right:3, height:'40%',
                    background:PR.ink,
                  }}/>
                  <div style={{
                    position:'absolute', top:'40%', left:5, right:5, height:'20%',
                    background:PR.yellow,
                  }}/>
                </div>
                <div className="p-mono" style={{
                  position:'absolute', bottom:4, right:6,
                  fontSize:9, color:PR.muted, letterSpacing:'0.1em',
                  textTransform:'uppercase',
                }}>
                  {s.pkg.join(' · ')}
                </div>
              </div>

              {/* name + use */}
              <div style={{flex:1}}>
                <div style={{
                  fontSize:15, fontWeight:600, letterSpacing:'-0.01em',
                  lineHeight:1.15,
                }}>{s.name}</div>
                <div style={{
                  fontSize:11, color:PR.muted, marginTop:3, lineHeight:1.35,
                }}>{s.use}</div>
              </div>

              {/* stock */}
              <div className="p-mono" style={{
                marginTop:8, fontSize:9, letterSpacing:'0.14em',
                textTransform:'uppercase', color:PR.muted,
                display:'flex', alignItems:'center', gap:6,
              }}>
                <span style={{
                  width:7, height:7, background:stock.dot,
                  borderRadius:'50%', display:'inline-block',
                }}/>
                {stock.label}
              </div>

              {/* footer — price + actions */}
              <div style={{
                marginTop:8, display:'flex', justifyContent:'space-between',
                alignItems:'center',
              }}>
                <div>
                  <div className="p-mono" style={{
                    fontSize:8, letterSpacing:'0.16em', color:PR.muted,
                    textTransform:'uppercase',
                  }}>od</div>
                  <div className="p-sans" style={{
                    fontSize:18, fontWeight:600, letterSpacing:'-0.01em',
                    lineHeight:1,
                  }}>
                    {s.price} <span style={{fontSize:11, color:PR.muted}}>€/L</span>
                  </div>
                </div>
                <div style={{display:'flex', gap:4}}>
                  <button title="SDS" className="p-mono" style={{
                    width:30, height:30, padding:0,
                    border:`1px solid ${PR.border}`, background:PR.paper,
                    color:PR.ink, fontSize:10, fontWeight:600,
                    cursor:'pointer',
                  }}>SDS</button>
                  <button title="Dodaj" style={{
                    width:30, height:30, padding:0,
                    border:0, background:PR.yellow, color:PR.ink,
                    fontSize:16, fontWeight:600, cursor:'pointer',
                    fontFamily:'inherit',
                  }}>+</button>
                </div>
              </div>
            </div>
          );
        })}
      </div>

      {/* INDUSTRY FILTER CHIPS */}
      <div style={{
        padding:'12px 28px', borderTop:`1px solid ${PR.border}`,
        background:PR.paper,
        display:'flex', alignItems:'center', gap:14,
      }}>
        <span className="p-mono" style={{
          fontSize:10, letterSpacing:'0.18em', color:PR.muted,
          textTransform:'uppercase',
        }}>Po industriji ↓</span>
        <div style={{display:'flex', gap:6, flex:1, overflow:'hidden'}}>
          {[
            ['Hrana i piće', '8'],
            ['Energetika', '6'],
            ['Auto i transport', '7'],
            ['Gradnja', '4'],
            ['Osiguranje · održavanje', '5'],
            ['Kemijska industrija', '6'],
            ['Tehnička roba ↗', null],
          ].map(([t,n])=>(
            <button key={t} className="p-sans" style={{
              padding:'7px 12px', background:PR.canvas,
              border:`1px solid ${PR.border}`, color:PR.ink,
              fontSize:12, cursor:'pointer',
              display:'flex', alignItems:'center', gap:7,
              fontFamily:'inherit',
            }}>
              {t}
              {n && <span className="p-mono" style={{
                fontSize:9, color:PR.muted, letterSpacing:'0.1em',
              }}>{n}</span>}
            </button>
          ))}
        </div>
      </div>

      {/* PARTNERS RAIL */}
      <div style={{
        padding:'10px 28px', borderTop:`1px solid ${PR.border}`,
        background:PR.ink, color:PR.canvas,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        gap:24, overflow:'hidden',
      }}>
        <span className="p-mono" style={{
          fontSize:10, letterSpacing:'0.18em', color:PR.mutedLo,
          textTransform:'uppercase', whiteSpace:'nowrap',
        }}>
          Naručitelji od 2010:
        </span>
        <div style={{
          display:'flex', gap:30, alignItems:'center', overflow:'hidden',
        }}>
          {['Coca-Cola','OMV','Petrokemija','Karlovačko','Dukat','Franck','Ledo','Đuro Đaković','Viadukt'].map(n=>(
            <span key={n} className="p-mono" style={{
              fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase',
              fontWeight:500, whiteSpace:'nowrap', color:PR.canvas,
            }}>{n}</span>
          ))}
        </div>
        <span className="p-mono" style={{
          fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase',
          color:PR.yellow, whiteSpace:'nowrap',
        }}>
          ISO 9001 · 14001 · REACH ✓
        </span>
      </div>
    </div>
  );
}

Object.assign(window, { ConceptPortal });