// page-bottom.jsx — bottom sections of the home:
//   1. Story (owner's voice + numbers, RUKE-influenced editorial moment)
//   2. Trust (ISO/REACH/HR/BIO pictograms + partner names rail)
//   3. Footer (ink dark, 4-col, contact + newsletter)

function StorySection() {
  return (
    <section className="gk-section" style={{
      background: 'var(--paper-white)',
      paddingTop: 96, paddingBottom: 88,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '5fr 6fr',
        gap: 56, alignItems: 'center',
      }}>
        {/* LEFT — owner card with photo placeholder + serif quote */}
        <div style={{position: 'relative'}}>
          {/* yellow soft tab — anchored bottom-left */}
          <div style={{
            position: 'absolute', bottom: -22, left: -16,
            width: 96, height: 96, background: 'var(--yellow)',
            borderRadius: '50%', zIndex: 0,
          }}/>
          {/* photo placeholder */}
          <div style={{
            position: 'relative', zIndex: 1,
            aspectRatio: '4/5',
            background: 'linear-gradient(170deg, var(--green-soft) 0%, var(--green-mid) 100%)',
            borderRadius: 'var(--r-lg)',
            overflow: 'hidden',
            display: 'flex', alignItems: 'flex-end',
            padding: 24,
          }}>
            {/* halftone */}
            <div style={{
              position:'absolute', inset:0,
              backgroundImage: 'radial-gradient(circle, rgba(22,23,15,0.22) 1px, transparent 1.4px)',
              backgroundSize: '6px 6px', mixBlendMode: 'multiply', opacity: 0.6,
            }}/>
            <div style={{
              position: 'relative', zIndex: 1,
              background: 'var(--paper-white)',
              padding: '12px 16px', borderRadius: 'var(--r-md)',
              maxWidth: '60%',
            }}>
              <div className="mono" style={{
                fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'var(--mid)', marginBottom: 4,
              }}>[FOTOGRAFIJA · vlasnik u pogonu]</div>
              <div style={{fontSize: 14, fontWeight: 600}}>
                Mjesto za stvarnu fotografiju
              </div>
            </div>
          </div>
        </div>

        {/* RIGHT — text */}
        <div>
          <span className="gk-eyebrow" style={{display: 'flex', marginBottom: 18}}>
            <span className="dot" style={{background: 'var(--yellow)'}}/>
            O proizvodnji · Gruška 18
          </span>

          <h2 className="gk-h2" style={{fontSize: 58, marginBottom: 20}}>
            Petnaest godina<br/>
            u istom <span className="gk-hl-yellow"><span>dvorištu.</span></span>
          </h2>

          <p className="serif-it" style={{
            fontSize: 22, lineHeight: 1.4, color: 'var(--ink)',
            marginTop: 8, marginBottom: 24, maxWidth: 520, fontWeight: 400,
          }}>
            „Ne pravimo previše različitih stvari — pravimo onih nekoliko
            kako spada.”
          </p>

          <p style={{
            fontSize: 16, lineHeight: 1.55, color: 'var(--mid)',
            margin: 0, maxWidth: 540,
          }}>
            Gumakem d.o.o. počeo je 2010. u malom pogonu u Gruškoj. Današnji
            katalog ima deset visoko koncentriranih biorazgradivih sredstava
            i katalog tehničke gumene robe. Iste recepture, ista kontrola
            serija po seriji — radimo za one koji traže pouzdano.
          </p>

          <div style={{
            marginTop: 30, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 8, maxWidth: 540,
          }}>
            {[
              ['2010', 'osnivanje · Gruška 18'],
              ['ISO',  '9001 · 14001'],
              ['REACH','registracija sve linije'],
            ].map(([n, l]) => (
              <div key={l} style={{
                background: 'var(--paper)', borderRadius: 'var(--r-md)',
                padding: '14px 16px',
                border: '1px solid var(--hair)',
              }}>
                <div style={{
                  fontSize: 22, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1,
                }}>{n}</div>
                <div className="mono" style={{
                  fontSize: 10, letterSpacing: '0.14em', color: 'var(--mid)',
                  textTransform: 'uppercase', marginTop: 4, lineHeight: 1.3,
                }}>{l}</div>
              </div>
            ))}
          </div>

          <div style={{display: 'flex', gap: 10, marginTop: 24, flexWrap: 'wrap'}}>
            <Button kind="outline" size="md" icon="→">Pročitaj o proizvodnji</Button>
            <MonoButton kind="outline">Posjeti pogon</MonoButton>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Trust — pictograms + partner names rail
// ─────────────────────────────────────────────────────────────────
function TrustSection() {
  return (
    <section style={{
      background: 'var(--green-cream)',
      padding: '36px 56px',
      borderTop: '1px solid var(--hair)',
      borderBottom: '1px solid var(--hair)',
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 32, marginBottom: 24,
      }}>
        <div style={{display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap'}}>
          <Pictogram char="ISO"   label="9001 · 14001"/>
          <Pictogram char="REACH" label="usklađena linija"/>
          <Pictogram char="HR"    label="Zagreb · od 2010"/>
          <Pictogram char="BIO"   label="≥ 98% razgrad."/>
          <Pictogram char="HACCP" label="prehrambena ind."/>
        </div>
        <div style={{textAlign: 'right'}}>
          <span className="gk-eyebrow" style={{justifyContent: 'flex-end', display:'inline-flex'}}>
            <span className="dot" style={{background:'var(--pink-deep)'}}/>
            Standardi i certifikati
          </span>
          <a className="mono" style={{
            display: 'block', marginTop: 8,
            fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'var(--ink)', fontWeight: 600,
            borderBottom: '2px solid var(--pink-deep)', paddingBottom: 2,
          }}>Preuzmi certifikate (PDF) →</a>
        </div>
      </div>

      <div style={{
        paddingTop: 22, borderTop: '1px solid var(--rule)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 28, flexWrap: 'wrap',
      }}>
        <span className="mono" style={{
          fontSize: 10, letterSpacing: '0.2em', color: 'var(--mid)',
          textTransform: 'uppercase', flexShrink: 0,
        }}>Naručitelji od 2010 ↗</span>
        <div style={{
          display: 'flex', gap: 28, alignItems: 'center',
          flexWrap: 'wrap', flex: 1, justifyContent: 'center',
        }}>
          {['Coca-Cola','OMV','Petrokemija','Karlovačko','Dukat','Franck','Ledo','Đuro Đaković','Viadukt','Auto Hrvatska','Badel 1862','Euroherc']
            .map(n => <PartnerName key={n} name={n}/>)}
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────
// Footer — ink dark, 4-col, newsletter signup
// ─────────────────────────────────────────────────────────────────
function FooterSection() {
  return (
    <footer style={{
      background: 'var(--ink)',
      color: 'var(--paper-white)',
      padding: '64px 56px 28px',
    }}>
      {/* TOP — big newsletter / contact CTA */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.4fr 1fr',
        gap: 48, paddingBottom: 48,
        borderBottom: '1px solid rgba(255,255,255,0.12)',
      }}>
        <div>
          <h3 className="gk-h2" style={{
            fontSize: 56, color: 'var(--paper-white)', maxWidth: 620,
          }}>
            Trebate <span className="serif-it" style={{fontWeight: 400}}>količinu</span>
            <br/>ili sigurnosni list?
          </h3>
          <p style={{
            fontSize: 17, lineHeight: 1.55, marginTop: 18,
            color: 'rgba(255,255,255,0.65)', maxWidth: 540,
          }}>
            Pišite nam izravno. Procurement za bulk i ugovorne uvjete javlja
            se u istom danu, tehnička dokumentacija putem e-maila u roku
            od 24 sata.
          </p>
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.05)',
          borderRadius: 'var(--r-lg)',
          padding: '24px',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          gap: 18,
        }}>
          <div>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'var(--yellow)', marginBottom: 14, fontWeight: 600,
            }}>Direktan kontakt</div>
            <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
              <a style={{display:'flex', alignItems:'center', gap:12}}>
                <span style={{
                  width:36, height:36, borderRadius:'50%',
                  background:'var(--yellow)', color:'var(--ink)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:14, fontWeight:700,
                }}>℡</span>
                <div>
                  <div className="mono" style={{fontSize:9, letterSpacing:'0.16em', color:'rgba(255,255,255,0.5)', textTransform:'uppercase'}}>Pozovi</div>
                  <div style={{fontSize:17, fontWeight:600}}>+385 (1) 78 99 429</div>
                </div>
              </a>
              <a style={{display:'flex', alignItems:'center', gap:12}}>
                <span style={{
                  width:36, height:36, borderRadius:'50%',
                  background:'var(--pink)', color:'var(--ink)',
                  display:'flex', alignItems:'center', justifyContent:'center',
                  fontSize:14, fontWeight:700,
                }}>@</span>
                <div>
                  <div className="mono" style={{fontSize:9, letterSpacing:'0.16em', color:'rgba(255,255,255,0.5)', textTransform:'uppercase'}}>E-mail</div>
                  <div style={{fontSize:17, fontWeight:600}}>info@gumakem.hr</div>
                </div>
              </a>
            </div>
          </div>
          <Button kind="primary" size="md" icon="→" style={{alignSelf: 'flex-start'}}>
            Zatraži ponudu
          </Button>
        </div>
      </div>

      {/* MIDDLE — sitemap */}
      <div style={{
        display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr',
        gap: 40, paddingTop: 48, paddingBottom: 36,
      }}>
        <div>
          <div style={{display: 'flex', alignItems: 'center', gap: 14}}>
            <GkMark size={52}/>
            <div>
              <div style={{fontSize: 20, fontWeight: 600, letterSpacing: '-0.02em', lineHeight: 1}}>
                gumakem<span style={{color:'rgba(255,255,255,0.5)'}}>.hr</span>
              </div>
              <div className="mono" style={{
                fontSize: 10, color: 'rgba(255,255,255,0.5)',
                letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 5,
              }}>od 2010 · Zagreb</div>
            </div>
          </div>

          <p style={{
            fontSize: 13, lineHeight: 1.5, color: 'rgba(255,255,255,0.55)',
            marginTop: 18, maxWidth: 320,
          }}>
            Gumakem d.o.o. proizvodi biorazgradiva, visoko koncentrirana
            sredstva za odmašćivanje, uklanjanje kamenca, hrđe i korozije
            u Hrvatskoj.
          </p>

          <div style={{display: 'flex', gap: 8, marginTop: 18}}>
            {['F','I','L'].map((s, i) => (
              <a key={i} style={{
                width: 36, height: 36, borderRadius: '50%',
                border: '1px solid rgba(255,255,255,0.18)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, color: 'var(--paper-white)',
                fontFamily: 'serif',
              }}>{s}</a>
            ))}
          </div>
        </div>

        {[
          {
            title: 'Trgovina',
            links: ['Biocro Par', 'Biocro OBC+', 'Biocro Pro', 'Coroclean', 'Corotrans', 'Antigrafit ND'],
          },
          {
            title: 'Tehnička roba',
            links: ['Brtve', 'Semerinzi', 'O-prsteni', 'Gumeni katalog ↗'],
          },
          {
            title: 'Usluge',
            links: ['Čišćenje rezervoara', 'Kemijsko čišćenje', 'Odmašćivanje metala', 'Sanacija nakon štete'],
          },
          {
            title: 'Tvrtka',
            links: ['O proizvodnji', 'Studije slučaja', 'Sigurnosno-tehnički listovi', 'Kontakt'],
          },
        ].map(col => (
          <div key={col.title}>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: 'var(--yellow)', fontWeight: 600, marginBottom: 14,
            }}>{col.title}</div>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 9,
            }}>
              {col.links.map(l => (
                <li key={l}>
                  <a style={{
                    fontSize: 13, color: 'rgba(255,255,255,0.78)',
                  }}>{l}</a>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      {/* BOTTOM — small print */}
      <div style={{
        paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.10)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        flexWrap: 'wrap', gap: 18,
      }}>
        <span className="mono" style={{
          fontSize: 11, color: 'rgba(255,255,255,0.45)', letterSpacing: '0.14em',
          textTransform: 'uppercase',
        }}>
          © 2026 GUMAKEM d.o.o. · Gruška 18, 10000 Zagreb · OIB 12345678901
        </span>
        <div style={{display: 'flex', gap: 22}}>
          {['Izjava o zaštiti podataka','Kolačići','Opći uvjeti','Reklamacije'].map(l => (
            <a key={l} className="mono" style={{
              fontSize: 11, color: 'rgba(255,255,255,0.55)',
              letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>{l}</a>
          ))}
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { StorySection, TrustSection, FooterSection });
