// page-hero.jsx — header nav + featured-product hero (SIGNAL-derived).
// Palette move: dark stage is now forest green (not charcoal). Corner
// accent is rose pink, soft-curved (not a hard yellow triangle). Yellow
// still owns the CTA and the Gk lockup.

function SiteHeader() {
  const navItems = [
    'Trgovina', 'Po industriji', 'Tehnička roba', 'Usluge', 'Tehnički listovi', 'O proizvodnji',
  ];
  return (
    <header style={{
      background: 'var(--paper-white)',
      borderBottom: '1px solid var(--hair)',
      position: 'sticky', top: 0, zIndex: 20,
    }}>
      {/* utility strip */}
      <div className="mono" style={{
        background: 'var(--ink)', color: 'var(--paper-white)',
        padding: '8px 56px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
      }}>
        <span style={{display:'flex', gap:18}}>
          <span>Gruška 18 · 10000 Zagreb</span>
          <span style={{color:'var(--mid-lo)'}}>·</span>
          <span>Pon–Pet 09–16</span>
          <span style={{color:'var(--mid-lo)'}}>·</span>
          <span>+385 (1) 78 99 429</span>
        </span>
        <span style={{display:'flex', gap:16, alignItems:'center'}}>
          <span>
            <span style={{
              display:'inline-block', width:8, height:8, borderRadius:'50%',
              background:'var(--yellow)', marginRight:7, verticalAlign:'middle',
            }}/>
            Pošiljka danas u 14:00
          </span>
          <span style={{color:'var(--mid-lo)'}}>·</span>
          <span>info@gumakem.hr</span>
          <span style={{color:'var(--mid-lo)'}}>·</span>
          <span>HR / <span style={{color:'var(--mid-lo)'}}>EN</span></span>
        </span>
      </div>

      {/* main nav */}
      <div style={{
        padding: '18px 56px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 24,
      }}>
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <GkMark size={48}/>
          <div>
            <div style={{
              fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1,
            }}>
              gumakem<span style={{color:'var(--mid)', fontWeight: 400}}>.hr</span>
            </div>
            <div className="mono" style={{
              fontSize: 10, color: 'var(--mid)', letterSpacing: '0.18em',
              textTransform: 'uppercase', marginTop: 4,
            }}>
              biorazgradiva industrijska kemija · od 2010
            </div>
          </div>
        </div>

        <nav style={{display: 'flex', gap: 28, fontSize: 14, fontWeight: 500}}>
          {navItems.map((n, i) => (
            <a key={n} style={{
              color: i === 0 ? 'var(--ink)' : 'var(--ink)',
              position: 'relative',
              paddingBottom: 16, marginBottom: -16,
              ...(i === 0 ? {fontWeight: 600} : {}),
            }}>{n}
              {i === 0 && <span style={{
                position: 'absolute', bottom: 8, left: 0, right: 0,
                height: 3, background: 'var(--yellow)',
                borderRadius: 'var(--r-pill)',
              }}/>}
            </a>
          ))}
        </nav>

        <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
          <button style={{
            width: 42, height: 42, background: 'transparent',
            border: '1.5px solid var(--rule)', borderRadius: 'var(--r-pill)',
            color: 'var(--ink)', cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16,
          }}>⌕</button>
          <MonoButton kind="outline">Prijava</MonoButton>
          <Button size="md" style={{padding:'12px 18px'}}>
            Košarica <span className="mono" style={{
              padding: '2px 7px', background: 'var(--ink)', color: 'var(--yellow)',
              borderRadius: 'var(--r-pill)', fontSize: 11, marginLeft: 4,
            }}>0</span>
          </Button>
        </div>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────
// Hero — featured product (BIOCRO Corotrans) on a forest green stage
// with soft pink corner accent. Procurement chrome on the right.
// ─────────────────────────────────────────────────────────────────
function HeroSection() {
  return (
    <section className="gk-section" style={{
      background: 'var(--paper)',
      paddingTop: 56, paddingBottom: 56,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '7fr 6fr',
        gap: 32, alignItems: 'stretch',
      }}>
        {/* LEFT — typographic hero */}
        <div style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          padding: '14px 0 14px 0',
        }}>
          <div>
            <span className="gk-eyebrow" style={{marginBottom: 22, display:'flex'}}>
              <span className="dot"/>
              Biocro linija · 10 šifri · od 2010.
            </span>

            <h1 className="gk-h1" style={{
              fontSize: 86, lineHeight: 0.96, fontWeight: 600,
              marginTop: 22, maxWidth: 740,
            }}>
              Sredstva za<br/>
              odmašćivanje, hrđu<br/>
              i {' '}
              <span className="gk-hl-pink"><span>korozije.</span></span>
            </h1>

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

            <div style={{display: 'flex', gap: 10, marginTop: 28, flexWrap: 'wrap'}}>
              <Button kind="primary" size="lg" icon="→">Otvori cijeli katalog</Button>
              <Button kind="outline" size="lg" icon="↓">Preuzmi tehničke listove</Button>
            </div>
          </div>

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

        {/* RIGHT — featured product on forest green stage */}
        <div style={{
          background: 'var(--green-deep)',
          color: 'var(--paper-white)',
          borderRadius: 'var(--r-lg)',
          padding: '28px 28px 26px',
          position: 'relative',
          overflow: 'hidden',
          display: 'flex', flexDirection: 'column',
        }}>
          {/* pink soft corner accent (replaces hard yellow triangle) */}
          <div style={{
            position: 'absolute', top: -50, right: -50,
            width: 180, height: 180,
            background: 'var(--pink)',
            borderRadius: '50%',
            opacity: 0.95,
          }}/>
          <div style={{
            position: 'absolute', top: 18, right: 22,
            color: 'var(--ink)', textAlign: 'right', zIndex: 1,
          }}>
            <div className="mono" style={{
              fontSize: 9, letterSpacing: '0.16em', fontWeight: 600,
              textTransform: 'uppercase',
            }}>Izdvajamo</div>
            <div style={{
              fontSize: 22, fontWeight: 700, letterSpacing: '-0.03em',
              marginTop: 2,
            }}>05 / 10</div>
          </div>

          {/* meta row */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4,
            zIndex: 1, position: 'relative',
          }}>
            <Badge tone="pink">BIO · 98%</Badge>
            <Badge tone="ink" style={{background:'rgba(255,255,255,0.12)', color:'var(--paper-white)'}}>REACH ✓</Badge>
            <Badge tone="ink" style={{background:'rgba(255,255,255,0.12)', color:'var(--paper-white)'}}>LOT 26-0114</Badge>
          </div>

          {/* product stage */}
          <div style={{
            flex: 1, position: 'relative',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            minHeight: 280, marginTop: 24, marginBottom: 12,
          }}>
            {/* pink rim-light underneath */}
            <div style={{
              position: 'absolute', bottom: -10, left: '50%',
              transform: 'translateX(-50%)',
              width: 240, height: 30,
              background: 'var(--pink)',
              filter: 'blur(40px)', opacity: 0.7,
            }}/>
            <Canister
              width={200} height={280}
              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č korozije"
            />
          </div>

          {/* procurement chrome */}
          <div style={{position: 'relative', zIndex: 1}}>
            <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: 6, marginBottom: 18, flexWrap: 'wrap'}}>
              {[['1L', false], ['5L', true], ['25L', false], ['200L', false]].map(([sz, active]) => (
                <button key={sz} className="mono" style={{
                  padding: '10px 14px',
                  background: active ? 'var(--yellow)' : 'transparent',
                  color: active ? 'var(--ink)' : 'var(--paper-white)',
                  border: `1.5px solid ${active ? 'var(--yellow)' : 'rgba(255,255,255,0.22)'}`,
                  borderRadius: 'var(--r-pill)',
                  fontSize: 11, letterSpacing: '0.14em',
                  fontWeight: active ? 600 : 500,
                  cursor: 'pointer',
                }}>{sz}</button>
              ))}
            </div>

            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              gap: 12, flexWrap: 'wrap',
            }}>
              <div>
                <div className="mono" style={{
                  fontSize: 10, color: 'rgba(255,255,255,0.55)',
                  letterSpacing: '0.18em', textTransform: 'uppercase',
                }}>Cijena · 5L</div>
                <div style={{
                  fontSize: 34, fontWeight: 600, letterSpacing: '-0.02em',
                  lineHeight: 1, marginTop: 2,
                }}>
                  92,00 <span style={{
                    fontSize: 14, color: 'rgba(255,255,255,0.55)',
                  }}>€/kanister</span>
                </div>
              </div>
              <div style={{display: 'flex', gap: 6}}>
                <Button kind="primary" size="md" icon="→">Dodaj u košaricu</Button>
                <MonoButton kind="light">Zatraži ponudu</MonoButton>
              </div>
            </div>

            <div style={{
              marginTop: 16, paddingTop: 14,
              borderTop: '1px solid rgba(255,255,255,0.12)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              flexWrap: 'wrap', gap: 10,
            }}>
              <div style={{display: 'flex', gap: 18}}>
                <a className="mono" style={{
                  fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--paper-white)', display: 'flex', gap: 6, alignItems: 'center',
                }}>↓ SDS · sigurnosno-tehnički list</a>
                <a className="mono" style={{
                  fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--paper-white)', display: 'flex', gap: 6, alignItems: 'center',
                }}>↓ TDS · tehnički podaci</a>
              </div>
              <StockDot stock="na-stanju"/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SiteHeader, HeroSection });