// page-middle.jsx — three middle sections of the home:
//   1. Industry verticals (VERTIKALE-derived, palette-rotated soft cards)
//   2. Catalogue grid (all 10 SKUs as designed boutique cards)
//   3. Case study (full-bleed forest green w/ italic serif quote)

const VERTICALS = [
  {
    code:'01', name:'Hrana i piće',
    blurb:'Sanitarno čišćenje linija, odmašćivanje uređaja, kamenac na izmjenjivačima.',
    partners:['Coca-Cola','Ledo','Dukat','Karlovačko','Franck','Badel 1862','Gligora'],
    products:['Biocro PRO','OBC+','Coroclean'],
    bg: 'var(--yellow-cream)', glyph: 'D',
  },
  {
    code:'02', name:'Energetika i nafta',
    blurb:'Kemijsko čišćenje rezervoara, apsorpcija ulja, pretvarač korozije za naftovode.',
    partners:['OMV','Petrokemija','Euro Petrol'],
    products:['Apsorbent CS','Corotrans','PRO'],
    bg: 'var(--pink-cream)', glyph: 'E',
  },
  {
    code:'03', 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','Eko sol+'],
    bg: 'var(--green-mint)', glyph: 'A',
  },
  {
    code:'04', 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'],
    bg: 'var(--paper-2)', glyph: 'T',
  },
  {
    code:'05', name:'Održavanje · osiguranje',
    blurb:'Sanacija nakon šteta, čišćenje opreme, redovito održavanje pogona.',
    partners:['Euroherc','Adriatic'],
    products:['Biocro Par','Apsorbent CS','Staklex'],
    bg: 'var(--ink)', dark: true, glyph: 'O',
  },
];

function VerticalsSection() {
  return (
    <section className="gk-section" style={{background:'var(--paper-white)'}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-end',
        marginBottom: 32, flexWrap:'wrap', gap: 20,
      }}>
        <div>
          <span className="gk-eyebrow" style={{display:'flex', marginBottom: 14}}>
            <span className="dot"/>Po vašoj industriji
          </span>
          <h2 className="gk-h2" style={{maxWidth: 720}}>
            Što čistimo
            <span className="serif-it" style={{fontWeight:400}}> za vašu </span>
            industriju.
          </h2>
        </div>
        <div style={{maxWidth: 380, paddingBottom: 6}}>
          <p style={{fontSize:15, lineHeight:1.5, color:'var(--mid)', margin: 0}}>
            Petnaest godina u pogonima naših naručitelja. Iste recepture,
            prilagođen način primjene za svaku branšu.
          </p>
          <a className="mono" style={{
            display:'inline-flex', marginTop:14,
            fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--ink)', fontWeight: 600,
            borderBottom: '2px solid var(--yellow)', paddingBottom: 2,
          }}>Sve industrije →</a>
        </div>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 12,
        alignItems:'stretch',
      }}>
        {VERTICALS.map(v => {
          const fg = v.dark ? 'var(--paper-white)' : 'var(--ink)';
          const mid = v.dark ? 'rgba(255,255,255,0.6)' : 'var(--mid)';
          const chipBg = v.dark ? 'rgba(255,255,255,0.1)' : 'rgba(22,23,15,0.06)';
          const chipBorder = v.dark ? 'rgba(255,255,255,0.2)' : 'var(--rule)';
          const ruleColor = v.dark ? 'rgba(255,255,255,0.14)' : 'var(--hair)';
          return (
            <div key={v.code} style={{
              background: v.bg,
              color: fg,
              borderRadius: 'var(--r-md)',
              padding: '20px 18px 18px',
              display:'flex', flexDirection:'column',
              minHeight: 360,
              transition: 'transform .25s ease, box-shadow .25s ease',
              cursor: 'pointer',
            }}
            onMouseEnter={(e)=>{e.currentTarget.style.transform='translateY(-4px)'; e.currentTarget.style.boxShadow='0 16px 36px -12px rgba(0,0,0,0.18)';}}
            onMouseLeave={(e)=>{e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='';}}>
              <div style={{
                display:'flex', justifyContent:'space-between',
                alignItems:'flex-start', marginBottom: 20,
              }}>
                <span className="mono" style={{
                  fontSize: 10, letterSpacing: '0.2em', color: fg,
                  textTransform: 'uppercase', fontWeight: 600, opacity: 0.75,
                }}>{v.code} · {v.partners.length} naručit.</span>
                <div style={{
                  width: 38, height: 38, borderRadius: 'var(--r-pill)',
                  background: v.dark ? 'var(--yellow)' : 'var(--ink)',
                  color: v.dark ? 'var(--ink)' : v.bg,
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontFamily: '"Space Grotesk",sans-serif',
                  fontWeight: 700, fontSize: 17, letterSpacing: '-0.04em',
                }}>{v.glyph}</div>
              </div>

              <h3 className="gk-h3" style={{fontSize: 24, color: fg}}>
                {v.name}
              </h3>

              <p className="serif" style={{
                fontSize: 13, lineHeight: 1.45, marginTop: 8,
                color: mid, fontWeight: 400,
              }}>{v.blurb}</p>

              <div style={{
                marginTop: 'auto', paddingTop: 14,
                borderTop: `1px solid ${ruleColor}`,
              }}>
                <div className="mono" style={{
                  fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: mid, marginBottom: 6,
                }}>Naručitelji</div>
                <div style={{display:'flex', flexWrap:'wrap', gap: 4}}>
                  {v.partners.slice(0, 5).map(p => (
                    <span key={p} className="mono" style={{
                      fontSize: 10, color: fg, fontWeight: 500,
                      padding: '3px 7px', background: chipBg,
                      borderRadius: 'var(--r-xs)',
                      whiteSpace: 'nowrap', letterSpacing: '0.05em',
                    }}>{p}</span>
                  ))}
                  {v.partners.length > 5 && (
                    <span className="mono" style={{
                      fontSize: 10, color: mid, padding: '3px 4px', fontWeight: 500,
                    }}>+{v.partners.length - 5}</span>
                  )}
                </div>
              </div>

              <div style={{paddingTop: 10}}>
                <div className="mono" style={{
                  fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: mid, marginBottom: 6,
                }}>Tipično rješenje</div>
                <div style={{display:'flex', flexWrap:'wrap', gap: 4}}>
                  {v.products.map(p => (
                    <span key={p} style={{
                      fontSize: 11, fontWeight: 500, color: fg,
                      padding: '3px 8px',
                      border: `1px solid ${chipBorder}`,
                      borderRadius: 'var(--r-xs)',
                    }}>{p}</span>
                  ))}
                </div>
              </div>

              <a className="mono" style={{
                marginTop: 14, fontSize: 11, letterSpacing: '0.16em',
                textTransform: 'uppercase', fontWeight: 600, color: fg,
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                borderTop: `1px solid ${ruleColor}`, paddingTop: 12,
              }}>
                Otvori industriju
                <span style={{fontSize: 14}}>→</span>
              </a>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Catalogue — all 10 SKUs as designed boutique cards.
// Each card carries its category accent (palette-rotated tinted bg
// behind the canister), plus name/use/bio/packaging/price/add.
// Soft 16px corners, generous whitespace.
// ─────────────────────────────────────────────────────────────────

// Category → palette mapping. Yellow stays brand anchor, green/pink
// share the catalogue equally.
const CAT_BG = {
  'Odmašćivanje':  'var(--green-cream)',
  'Kamenac/Hrđa':  'var(--pink-cream)',
  'Korozija':      'var(--pink-cream)',
  'Grafiti':       'var(--paper-2)',
  'Apsorpcija':    'var(--yellow-cream)',
  'Specijalno':    'var(--green-mint)',
  'Gradnja':       'var(--paper-2)',
};
const CAT_ACCENT = {
  'Odmašćivanje':  'var(--green-deep)',
  'Kamenac/Hrđa':  'var(--pink-deep)',
  'Korozija':      'var(--pink-deep)',
  'Grafiti':       'var(--ink)',
  'Apsorpcija':    'var(--ink)',
  'Specijalno':    'var(--green-deep)',
  'Gradnja':       'var(--ink)',
};

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

function CatalogueSection() {
  return (
    <section className="gk-section" style={{background:'var(--paper)'}}>
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'flex-end',
        marginBottom: 30, gap: 24,
      }}>
        <div>
          <span className="gk-eyebrow" style={{display:'flex', marginBottom: 14}}>
            <span className="dot" style={{background:'var(--pink-deep)'}}/>
            Cijela linija · 10 šifri
          </span>
          <h2 className="gk-h2" style={{maxWidth: 720}}>
            Deset stvari,<br/>
            <span className="serif-it" style={{fontWeight: 400}}>napravljenih</span> kako spada.
          </h2>
        </div>
        <div style={{display:'flex', gap: 8, flexWrap:'wrap'}}>
          {['Sve', 'Odmašćivanje', 'Korozija', 'Apsorpcija', 'Specijalno', 'Tehnička roba ↗'].map((f, i) => (
            <button key={f} className="mono" style={{
              padding: '10px 14px',
              background: i === 0 ? 'var(--ink)' : 'var(--paper-white)',
              color: i === 0 ? 'var(--paper-white)' : 'var(--ink)',
              border: `1.5px solid ${i === 0 ? 'var(--ink)' : 'var(--rule)'}`,
              borderRadius: 'var(--r-pill)',
              fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              fontWeight: i === 0 ? 600 : 500, cursor: 'pointer',
            }}>{f}</button>
          ))}
        </div>
      </div>

      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
        gap: 12,
      }}>
        {CATALOGUE.map(p => {
          const bg = CAT_BG[p.cat];
          const accent = CAT_ACCENT[p.cat];
          return (
            <div key={p.code} style={{
              background: 'var(--paper-white)',
              borderRadius: 'var(--r-md)',
              border: '1px solid var(--hair)',
              padding: '0',
              display: 'flex', flexDirection: 'column',
              overflow: 'hidden',
              transition: 'transform .25s ease, box-shadow .25s ease',
              cursor: 'pointer',
            }}
            onMouseEnter={(e)=>{e.currentTarget.style.transform='translateY(-4px)'; e.currentTarget.style.boxShadow='0 18px 36px -12px rgba(0,0,0,0.16)';}}
            onMouseLeave={(e)=>{e.currentTarget.style.transform=''; e.currentTarget.style.boxShadow='';}}>
              {/* product stage — tinted bg + canister */}
              <div style={{
                background: bg,
                height: 220,
                position: 'relative',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>
                {/* code monogram */}
                <div className="mono" style={{
                  position: 'absolute', top: 12, left: 12,
                  fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: accent, fontWeight: 600,
                }}>
                  KAT · {p.code}
                </div>
                {/* BIO/mineral badge */}
                <div style={{
                  position: 'absolute', top: 10, right: 10,
                }}>
                  {p.bio !== null ? (
                    <Badge tone="green">BIO {p.bio}%</Badge>
                  ) : (
                    <Badge tone="outline">Mineral</Badge>
                  )}
                </div>
                <Canister
                  width={100} height={140}
                  body="var(--paper-white)"
                  cap="var(--ink)"
                  label={accent}
                  labelText="var(--paper-white)"
                  accent="var(--yellow)"
                  showHandle={false}
                  productName="BIOCRO"
                  productSub={p.code}
                  productMeta={p.pkg.split(' · ')[0]}
                />
              </div>

              {/* product info */}
              <div style={{
                padding: '16px 16px 16px',
                display: 'flex', flexDirection: 'column', flex: 1,
              }}>
                <div style={{
                  fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em',
                  lineHeight: 1.1,
                }}>{p.name}</div>
                <div style={{
                  fontSize: 12, color: 'var(--mid)', marginTop: 4,
                  lineHeight: 1.4,
                }}>{p.use}</div>
                <div className="mono" style={{
                  fontSize: 10, color: 'var(--mid)', letterSpacing: '0.14em',
                  textTransform: 'uppercase', marginTop: 10,
                }}>{p.pkg}</div>

                <div style={{
                  marginTop: 'auto', paddingTop: 12,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
                }}>
                  <div>
                    <div className="mono" style={{
                      fontSize: 9, color: 'var(--mid)', letterSpacing: '0.16em',
                      textTransform: 'uppercase',
                    }}>od</div>
                    <div style={{
                      fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em',
                      lineHeight: 1, marginTop: 2,
                    }}>
                      {p.price} <span style={{fontSize: 12, color: 'var(--mid)'}}>€/L</span>
                    </div>
                  </div>
                  <div style={{display: 'flex', gap: 4}}>
                    <button title="SDS" className="mono" style={{
                      padding: '8px 10px',
                      border: '1.5px solid var(--rule)',
                      background: 'var(--paper-white)',
                      color: 'var(--ink)',
                      borderRadius: 'var(--r-pill)',
                      fontSize: 10, letterSpacing: '0.1em', fontWeight: 600,
                      cursor: 'pointer',
                    }}>SDS</button>
                    <button title="Dodaj" style={{
                      width: 34, height: 34, padding: 0,
                      border: 0, background: 'var(--yellow)', color: 'var(--ink)',
                      borderRadius: 'var(--r-pill)',
                      fontSize: 16, fontWeight: 600, cursor: 'pointer',
                      fontFamily: 'inherit',
                    }}>+</button>
                  </div>
                </div>

                <div style={{marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--hair)'}}>
                  <StockDot stock={p.stock}/>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Case study — full-bleed forest green, italic serif quote.
// Pink rose accent on the left rule. Single big trust moment.
// ─────────────────────────────────────────────────────────────────
function CaseSection() {
  return (
    <section style={{
      background: 'var(--green-deep)',
      color: 'var(--paper-white)',
      padding: '96px 56px 88px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* big pink quote ornament — top right */}
      <div className="serif-it" style={{
        position: 'absolute', top: -90, right: 80,
        fontSize: 600, lineHeight: 0.7, color: 'var(--pink)',
        opacity: 0.20, fontWeight: 400, pointerEvents: 'none',
      }}>“</div>

      <div style={{
        display: 'grid', gridTemplateColumns: '7fr 5fr',
        gap: 56, alignItems: 'center',
        position: 'relative', zIndex: 1,
      }}>
        <div>
          <span className="mono" style={{
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: 'var(--pink)', fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 12, marginBottom: 26,
          }}>
            <span style={{
              width: 28, height: 2, background: 'var(--pink)', display: 'inline-block',
            }}/>
            Studija slučaja · 014 · Hrana i piće
          </span>

          <p className="serif" style={{
            fontSize: 52, lineHeight: 1.18, fontWeight: 400,
            letterSpacing: '-0.015em', margin: 0,
            color: 'var(--paper-white)', 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 izmjenjivača, sa sigurnosno-tehničkim listom usklađenim za HACCP."</span>
          </p>

          <div style={{
            marginTop: 36, display: 'flex', alignItems: 'center', gap: 16,
            paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.18)',
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: '50%',
              background: 'var(--pink)', display: 'flex',
              alignItems: 'center', justifyContent: 'center',
              fontFamily: '"Space Grotesk",sans-serif', fontWeight: 700,
              color: 'var(--ink)', fontSize: 16, letterSpacing: '-0.04em',
            }}>CC</div>
            <div style={{flex: 1}}>
              <div className="mono" style={{
                fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'rgba(255,255,255,0.55)', marginBottom: 2,
              }}>Naručitelj</div>
              <div style={{fontSize: 20, fontWeight: 600, letterSpacing: '-0.01em'}}>
                Coca-Cola HBC Hrvatska
              </div>
            </div>
            <MonoButton kind="light">Pročitaj cijelu studiju →</MonoButton>
          </div>
        </div>

        {/* Right: stats panel */}
        <div style={{
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.14)',
          borderRadius: 'var(--r-lg)',
          padding: '28px 28px 26px',
        }}>
          <div className="mono" style={{
            fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--yellow)', fontWeight: 600, marginBottom: 24,
          }}>Rezultati · 12 mjeseci</div>

          {[
            ['98%',  'manje tragova na inoxu',   'var(--yellow)'],
            ['4',    'punionice na pogonu',      'var(--pink)'],
            ['0',    'štetnih derivata u vodi',  'var(--paper-white)'],
            ['16h →6h', 'sanitarni ciklus',      'var(--paper-white)'],
          ].map(([n, l, c], i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'baseline', gap: 18,
              padding: '14px 0',
              borderTop: i > 0 ? '1px solid rgba(255,255,255,0.10)' : 'none',
            }}>
              <div style={{
                fontSize: 36, fontWeight: 600, letterSpacing: '-0.03em',
                color: c, lineHeight: 1, minWidth: 130,
              }}>{n}</div>
              <div className="mono" style={{
                fontSize: 11, color: 'rgba(255,255,255,0.78)',
                letterSpacing: '0.12em', textTransform: 'uppercase',
                lineHeight: 1.3,
              }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { VerticalsSection, CatalogueSection, CaseSection });