// Gudjo — Hero (v2)
// 2-col grid: left-aligned headline cluster, right-side product label as the
// instantly-recognizable kombucha anchor. No center-doc layouts.

function Hero({ palette, serif, texture }) {
  return (
    <section id="top" data-screen-label="01 Hero" className="g-section" style={{
      background: palette.paper, color: palette.ink,
    }}>
      <PaperTexture intensity={texture} tone={palette.ink} />

      {/* Soft warm tone wash */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        background: `radial-gradient(70% 60% at 80% 50%, rgba(${hex2rgb(palette.primary)},0.10) 0%, transparent 70%)`,
      }} />

      <div className="g-hero-inner">

        {/* LEFT: content */}
        <div className="g-hero-content">
          <div>
            <div className="g-eyebrow-row" style={{ marginTop: 8 }}>
              <span className="g-eyebrow" style={{ color: palette.primary }}>
                Kartepe · Türkiye
              </span>
              <span className="g-eyebrow" style={{ color: palette.ink, opacity: 0.55 }}>
                Cilt 01 · İlk Parti
              </span>
            </div>

            <h1 className="g-display" style={{
              fontFamily: serif, color: palette.primary, marginTop: 28,
            }}>
              <span style={{ position: 'relative', display: 'inline-block' }}>
                Sevgiyle
                <span aria-hidden style={{
                  position: 'absolute', left: '4%', right: '4%', bottom: '4%',
                  height: 3, background: palette.accent, opacity: 0.55,
                  borderRadius: 2, transform: 'rotate(-0.5deg)',
                }} />
              </span><br/>
              <span style={{ color: palette.ink }}>demlenen</span><br/>
              <span style={{ color: palette.tea, fontStyle: 'italic' }}>kombucha.</span>
            </h1>

            <p className="g-body g-body--lg" style={{
              fontFamily: serif, color: palette.ink, opacity: 0.85,
              marginTop: 32, maxWidth: 540,
            }}>
              Rize'nin siyah çayında küçük partilerde demlenen, Türk meyveleriyle
              tatlandırılmış kombucha.{' '}
              <span style={{ fontStyle: 'italic', color: palette.primary }}>
                İki elin, dört patinin ve bir mutfağın sabrıyla.
              </span>
            </p>

            <div style={{
              marginTop: 18,
              fontFamily: SANS, fontStyle: 'italic',
              fontSize: 'clamp(13px, 1.1vw, 16px)',
              color: palette.ink, opacity: 0.55, maxWidth: 480,
            }}>
              Small-batch Turkish kombucha — brewed on Rize black tea, finished
              with Turkish fruit. By two hands, four paws, and one kitchen.
            </div>
          </div>

          {/* CTA + scroll cue */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
              <a href="#tatlar" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 22px',
                background: palette.primary, color: palette.paper,
                fontFamily: SANS, fontSize: 12, letterSpacing: '0.22em',
                textTransform: 'uppercase', fontWeight: 500,
                borderRadius: 999,
                transition: 'transform 200ms, box-shadow 200ms',
              }} onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.boxShadow = '0 10px 24px rgba(0,0,0,0.15)';
              }} onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'none';
                e.currentTarget.style.boxShadow = 'none';
              }}>
                Tatları gör <span style={{ fontSize: 14 }}>→</span>
              </a>
              <a href="#hikaye" style={{
                fontFamily: SANS, fontSize: 12, letterSpacing: '0.22em',
                textTransform: 'uppercase', fontWeight: 500,
                color: palette.ink, opacity: 0.7,
                padding: '14px 4px',
              }}>
                Hikayemiz
              </a>
            </div>

            <div style={{
              marginTop: 36,
              display: 'flex', alignItems: 'center', gap: 14,
            }}>
              <span style={{
                width: 36, height: 1, background: palette.ink, opacity: 0.4,
              }} />
              <span className="g-eyebrow" style={{ color: palette.ink, opacity: 0.5 }}>
                Vişne · Nar · Ayva · İncir
              </span>
            </div>
          </div>
        </div>

        {/* RIGHT: brand label */}
        <div className="g-hero-aside">
          <div style={{ position: 'relative' }}>
            <BrandLabel palette={palette} serif={serif} flavour="visne" />

            {/* Small caption beneath */}
            <div style={{
              marginTop: 22,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: 'ui-monospace, "JetBrains Mono", Menlo, monospace',
              fontSize: 10, letterSpacing: '0.2em', color: palette.ink, opacity: 0.55,
              maxWidth: 360, marginLeft: 'auto', marginRight: 'auto',
            }}>
              <span>Şek. 01 · Etiket</span>
              <span>↓ scroll</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });