// C1 — SIGNAL
// Brand yellow used as architecture. Big confident product hero with full
// B2B procurement chrome: package picker, SDS link, dual CTA, partner rail,
// industry chips, ISO/REACH badges. Single featured product on a dark stage
// with yellow rim treatment. Keeps the Gk lockup.
//
// Type:  Space Grotesk + JetBrains Mono
// Brand: yellow #FFCE1A · ink #16170F · forest green #2F6B3D (eco only)

const BR = {
  yellow:   '#FFCE1A',
  yellowLo: '#F5C413',
  ink:      '#16170F',
  paper:    '#FFFFFF',
  canvas:   '#F6F3EB',
  charcoal: '#17150F',
  charcoal2:'#221F18',
  eco:      '#2F6B3D',
  muted:    '#6F6B62',
  mutedHi:  '#9B968B',
  hair:     'rgba(22,23,15,0.08)',
  rule:     'rgba(22,23,15,0.16)',
};

// Re-creation of the Gk lockup that's on the current site:
// bold black "Gk" set in yellow square. Kept as the brand anchor.
const GkMark = ({size=44}) => (
  <div style={{
    width:size, height:size, background:BR.yellow,
    display:'flex', alignItems:'center', justifyContent:'center',
    color:BR.ink, flexShrink:0,
    fontFamily:'"Space Grotesk", system-ui, sans-serif',
    fontWeight:700, fontSize:size*0.6, letterSpacing:'-0.06em',
    lineHeight:1, paddingBottom: size*0.04,
  }}>
    <span style={{display:'inline-block', transform:'translateY(-1px)'}}>Gk</span>
  </div>
);

// Uniform partner-name chip (legal-safe: plain text, no recreated logos)
const PartnerName = ({name, dim=false}) => (
  <span style={{
    fontFamily:'"JetBrains Mono",ui-monospace,monospace',
    fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase',
    color: dim ? BR.muted : BR.ink, fontWeight:500, whiteSpace:'nowrap',
  }}>
    {name}
  </span>
);

function ConceptSignal() {
  return (
    <div style={{
      width:1440, height:900, background:BR.paper, color:BR.ink,
      fontFamily:'"Space Grotesk", system-ui, sans-serif',
      position:'relative', overflow:'hidden',
      display:'flex', flexDirection:'column',
    }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');
        .s-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-feature-settings:"tnum","ss01"}
        .s-display{font-family:"Space Grotesk",system-ui,sans-serif}
      `}</style>

      {/* TOP UTILITY STRIP — tiny, where contact info lived on the old site */}
      <div className="s-mono" style={{
        background:BR.ink, color:BR.canvas,
        padding:'8px 32px',
        display:'flex', justifyContent:'space-between', alignItems:'center',
        fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase',
      }}>
        <span>Gruška 18 · 10000 Zagreb · Pon–Pet 09–16</span>
        <span style={{display:'flex',gap:18,alignItems:'center'}}>
          <span>+385 (1) 78 99 429</span>
          <span style={{color:BR.mutedHi}}>info@gumakem.hr</span>
          <span>HR / <span style={{color:BR.mutedHi}}>EN</span></span>
        </span>
      </div>

      {/* MAIN NAV */}
      <div style={{
        padding:'16px 32px',
        display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`1px solid ${BR.hair}`,
      }}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <GkMark size={44}/>
          <div>
            <div style={{
              fontSize:19, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1,
            }}>
              gumakem<span style={{color:BR.muted, fontWeight:400}}>.hr</span>
            </div>
            <div className="s-mono" style={{
              fontSize:10, color:BR.muted, letterSpacing:'0.16em',
              textTransform:'uppercase', marginTop:3,
            }}>
              biorazgradiva industrijska kemija
            </div>
          </div>
        </div>

        <nav style={{
          display:'flex', gap:30, fontSize:14, fontWeight:500,
        }}>
          <a>Biocro linija</a>
          <a>Tehnička roba</a>
          <a>Po industriji</a>
          <a>Usluge</a>
          <a>Tehnički listovi</a>
          <a>O proizvodnji</a>
        </nav>

        <div style={{display:'flex', alignItems:'center', gap:10}}>
          {/* search */}
          <button style={{
            width:40, height:40, background:'transparent',
            border:`1px solid ${BR.rule}`, color:BR.ink, cursor:'pointer',
            display:'flex', alignItems:'center', justifyContent:'center',
            fontSize:14,
          }}>⌕</button>
          {/* B2B login */}
          <button className="s-mono" style={{
            padding:'10px 14px', background:'transparent', color:BR.ink,
            border:`1px solid ${BR.ink}`,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            fontWeight:500, cursor:'pointer',
          }}>
            Prijava B2B
          </button>
          {/* cart */}
          <button className="s-mono" style={{
            padding:'10px 14px', background:BR.yellow, color:BR.ink,
            border:0, fontWeight:600,
            fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
            cursor:'pointer', display:'flex', alignItems:'center', gap:8,
          }}>
            Košarica <span style={{color:BR.ink, fontWeight:400}}>(0)</span>
          </button>
        </div>
      </div>

      {/* HERO */}
      <div style={{
        flex:1, display:'grid', gridTemplateColumns:'1.15fr 1fr',
        minHeight:0, position:'relative',
      }}>
        {/* LEFT — typographic hero */}
        <div style={{
          padding:'40px 32px 28px 32px',
          display:'flex', flexDirection:'column', justifyContent:'space-between',
        }}>
          <div>
            <div className="s-mono" style={{
              fontSize:11, letterSpacing:'0.2em', color:BR.muted,
              textTransform:'uppercase', marginBottom:24,
              display:'flex', alignItems:'center', gap:10,
            }}>
              <span style={{
                display:'inline-block', width:28, height:4,
                background:BR.yellow,
              }}/>
              Biocro linija · 10 šifri · od 2010
            </div>

            <h1 className="s-display" style={{
              fontSize:96, lineHeight:0.94, letterSpacing:'-0.035em',
              fontWeight:600, margin:0, textWrap:'pretty',
              color:BR.ink, maxWidth:780,
            }}>
              Sredstva za<br/>
              odmašćivanje, hrđu<br/>
              i {' '}
              <span style={{
                display:'inline-block', position:'relative',
                padding:'0 4px',
              }}>
                <span style={{
                  position:'absolute', left:0, right:0, bottom:6,
                  height:18, background:BR.yellow, zIndex:0,
                }}/>
                <span style={{position:'relative', zIndex:1}}>korozije.</span>
              </span>
            </h1>

            <p style={{
              fontSize:18, lineHeight:1.45, color:BR.ink,
              marginTop:24, maxWidth:520, fontWeight:400,
            }}>
              Proizvodimo deset visoko koncentriranih biorazgradivih sredstava
              za industriju hrane, energetike i transporta.
              <span style={{color:BR.muted}}> Ista receptura, ista ruka, serija po serija — petnaest godina.</span>
            </p>

            <div style={{
              display:'flex', gap:10, marginTop:28,
            }}>
              <button style={{
                padding:'16px 22px', background:BR.yellow, color:BR.ink,
                border:0, fontWeight:600, fontSize:14,
                cursor:'pointer', display:'flex', alignItems:'center', gap:10,
                fontFamily:'inherit',
              }}>
                Otvori cijeli katalog <span style={{fontSize:16}}>→</span>
              </button>
              <button className="s-mono" style={{
                padding:'16px 22px', background:'transparent', color:BR.ink,
                border:`1px solid ${BR.ink}`,
                fontSize:12, letterSpacing:'0.14em', textTransform:'uppercase',
                fontWeight:500, cursor:'pointer',
              }}>
                Preuzmi tehničke listove ↓
              </button>
            </div>
          </div>

          {/* meta-stat row */}
          <div style={{
            display:'grid', gridTemplateColumns:'repeat(4,1fr)',
            borderTop:`1px solid ${BR.rule}`, marginTop:28, paddingTop:18,
          }}>
            {[
              ['10', 'aktivnih SKU'],
              ['15', 'god. proizvodnje'],
              ['50+', 'tvrtki naručitelja'],
              ['100%', 'biorazgradivo'],
            ].map(([n,l])=>(
              <div key={l}>
                <div className="s-display" style={{
                  fontSize:30, fontWeight:600, letterSpacing:'-0.03em', lineHeight:1,
                }}>{n}</div>
                <div className="s-mono" style={{
                  fontSize:10, letterSpacing:'0.16em', color:BR.muted,
                  textTransform:'uppercase', marginTop:4,
                }}>{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* RIGHT — featured product card on charcoal stage */}
        <div style={{
          background:BR.charcoal, color:BR.canvas,
          padding:'40px 32px 28px 32px',
          position:'relative', overflow:'hidden',
          display:'flex', flexDirection:'column',
        }}>
          {/* corner yellow notch — brand mark on the stage */}
          <div style={{
            position:'absolute', top:0, right:0,
            width:64, height:64, background:BR.yellow,
            clipPath:'polygon(0 0, 100% 0, 100% 100%)',
          }}/>
          <div className="s-mono" style={{
            position:'absolute', top:14, right:14, fontSize:9,
            color:BR.ink, letterSpacing:'0.16em', fontWeight:600,
            textTransform:'uppercase',
          }}>NA<br/>STANJU</div>

          {/* meta row */}
          <div className="s-mono" style={{
            display:'flex', alignItems:'center', gap:12, marginBottom:16,
            fontSize:10, letterSpacing:'0.18em', textTransform:'uppercase',
            color:BR.mutedHi,
          }}>
            <span style={{
              padding:'3px 7px', background:BR.eco, color:BR.canvas,
              fontWeight:600,
            }}>BIO · 98%</span>
            <span>05 / 10</span>
            <span>Lot 26-0114</span>
            <span>Reach ✓</span>
          </div>

          {/* product stage — kanister silhouette */}
          <div style={{
            flex:1, position:'relative',
            display:'flex', alignItems:'center', justifyContent:'center',
            minHeight:280,
          }}>
            {/* yellow rim-light underneath */}
            <div style={{
              position:'absolute', bottom:-20, left:'50%',
              transform:'translateX(-50%)',
              width:240, height:30, background:BR.yellow,
              filter:'blur(28px)', opacity:0.6,
            }}/>
            {/* kanister */}
            <div style={{
              position:'relative', width:200, height:280,
            }}>
              <div style={{
                position:'absolute', inset:0,
                background:BR.canvas, borderRadius:'6px 6px 12px 12px',
                boxShadow:`inset 0 -50px 80px rgba(0,0,0,0.18), inset 30px 0 70px rgba(0,0,0,0.12), 0 30px 60px -10px rgba(0,0,0,0.5)`,
              }}/>
              {/* cap */}
              <div style={{
                position:'absolute', top:-24, left:'50%',
                transform:'translateX(-50%)',
                width:62, height:28, background:BR.ink,
                borderRadius:'4px 4px 0 0',
              }}/>
              <div style={{
                position:'absolute', top:-38, left:'50%',
                transform:'translateX(-50%)',
                width:36, height:16, background:BR.ink,
              }}/>
              {/* handle */}
              <div style={{
                position:'absolute', top:30, right:-22,
                width:30, height:90, border:`6px solid ${BR.canvas}`,
                borderLeft:'none', borderRadius:'0 12px 12px 0',
                boxShadow:'0 4px 8px rgba(0,0,0,0.2)',
              }}/>
              {/* label */}
              <div style={{
                position:'absolute', top:'34%', left:16, right:16, height:'48%',
                background:BR.ink, color:BR.canvas,
                padding:'14px 16px',
                display:'flex', flexDirection:'column', justifyContent:'space-between',
                borderTop:`4px solid ${BR.yellow}`,
              }}>
                <div>
                  <div className="s-mono" style={{
                    fontSize:8, color:BR.yellow, letterSpacing:'0.2em',
                    textTransform:'uppercase', fontWeight:600,
                  }}>Gumakem · Biocro</div>
                  <div className="s-display" style={{
                    fontSize:22, fontWeight:700, marginTop:4, lineHeight:0.95,
                    letterSpacing:'-0.03em', textTransform:'uppercase',
                  }}>
                    Corotrans
                  </div>
                </div>
                <div className="s-mono" style={{
                  fontSize:7, color:BR.mutedHi, letterSpacing:'0.16em',
                  textTransform:'uppercase',
                }}>
                  Pretvarač korozije · 5 L
                </div>
              </div>
            </div>
          </div>

          {/* PROCUREMENT CHROME — package + dual CTA + SDS */}
          <div style={{marginTop:24}}>
            <div className="s-mono" style={{
              fontSize:9, letterSpacing:'0.2em', color:BR.mutedHi,
              textTransform:'uppercase', marginBottom:10,
            }}>Pakiranje</div>
            <div style={{
              display:'flex', gap:6, marginBottom:18,
            }}>
              {[
                ['1L', false], ['5L', true], ['25L', false], ['200L', false],
              ].map(([sz,active])=>(
                <button key={sz} className="s-mono" style={{
                  padding:'10px 14px',
                  background: active ? BR.yellow : 'transparent',
                  color: active ? BR.ink : BR.canvas,
                  border:`1px solid ${active ? BR.yellow : 'rgba(255,255,255,0.18)'}`,
                  fontSize:11, letterSpacing:'0.14em',
                  fontWeight: active ? 600 : 500,
                  cursor:'pointer',
                }}>{sz}</button>
              ))}
            </div>

            <div style={{
              display:'flex', alignItems:'center', justifyContent:'space-between',
              gap:10,
            }}>
              <div>
                <div className="s-mono" style={{
                  fontSize:9, color:BR.mutedHi, letterSpacing:'0.18em',
                  textTransform:'uppercase',
                }}>Cijena</div>
                <div className="s-display" style={{
                  fontSize:30, fontWeight:600, letterSpacing:'-0.02em', lineHeight:1,
                  marginTop:2,
                }}>
                  92,00 <span style={{fontSize:14, color:BR.mutedHi}}>€/kanister</span>
                </div>
              </div>
              <div style={{display:'flex', gap:6}}>
                <button style={{
                  padding:'12px 16px', background:BR.yellow, color:BR.ink,
                  border:0, fontWeight:600, fontSize:13,
                  cursor:'pointer', fontFamily:'inherit',
                  display:'flex', alignItems:'center', gap:6,
                }}>
                  Dodaj u košaricu →
                </button>
                <button className="s-mono" style={{
                  padding:'12px 14px', background:'transparent', color:BR.canvas,
                  border:`1px solid rgba(255,255,255,0.3)`,
                  fontSize:11, letterSpacing:'0.14em', textTransform:'uppercase',
                  fontWeight:500, cursor:'pointer',
                }}>
                  Zatraži ponudu
                </button>
              </div>
            </div>

            {/* SDS / TDS row */}
            <div style={{
              marginTop:14, paddingTop:14,
              borderTop:`1px solid rgba(255,255,255,0.12)`,
              display:'flex', gap:18,
              fontSize:12, color:BR.mutedHi,
            }}>
              <a className="s-mono" style={{
                fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase',
                color:BR.canvas, display:'flex', alignItems:'center', gap:6,
              }}>
                ↓ Sigurnosno-tehnički list (SDS)
              </a>
              <a className="s-mono" style={{
                fontSize:11, letterSpacing:'0.12em', textTransform:'uppercase',
                color:BR.canvas, display:'flex', alignItems:'center', gap:6,
              }}>
                ↓ Tehnički podaci (TDS)
              </a>
            </div>
          </div>
        </div>
      </div>

      {/* PARTNER RAIL — uniform-styled names, no logo recreation */}
      <div style={{
        padding:'16px 32px', borderTop:`1px solid ${BR.rule}`,
        background:BR.canvas,
        display:'flex', alignItems:'center', justifyContent:'space-between',
        gap:24, overflow:'hidden',
      }}>
        <div className="s-mono" style={{
          fontSize:10, letterSpacing:'0.2em', color:BR.muted,
          textTransform:'uppercase', whiteSpace:'nowrap',
        }}>
          Naručitelji ↗
        </div>
        <div style={{
          display:'flex', gap:32, alignItems:'center', overflow:'hidden',
        }}>
          {['Coca-Cola','OMV','Petrokemija','Karlovačko','Dukat','Franck','Ledo','Đuro Đaković','Viadukt','Auto Hrvatska']
            .map(n => <PartnerName key={n} name={n}/>)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ConceptSignal, GkMark, PartnerName });