// HERO — page 1 & 9 reference: big mark, phrase, huge negative space
const { useEffect: useEffectHero, useState: useStateHero } = React;

function Hero({ tweaks }) {
  const [coord, setCoord] = useStateHero({ x: 50, y: 50 });

  // octopus plate reveal (p1 of PDF): shown on "immersive" treatment
  const showOctopus = tweaks.heroTreatment === 'plate';

  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      minHeight: '100vh', position: 'relative', padding: '120px 48px 80px',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
      background: 'var(--grey-paper)', overflow: 'hidden'
    }}>


      {/* top meta row — editorial timestamp */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        marginTop: 42, paddingBottom: 18, borderBottom: '1px solid rgba(10,10,10,.35)'
      }}>
        <span className="eyebrow">Buenos Aires · 34.55°S 58.45°W</span>
        <span className="eyebrow">PORTFOLIO — ALBORNOZ JOAQUINA</span>
        <span className="eyebrow" style={{ color: 'var(--red)' }}>● EN DIRECTO</span>
      </div>

      {/* center block */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr',
        gap: 40,
        placeItems: 'center',
        textAlign: 'center',
        padding: '40px 0'
      }}>
        <div style={{
          fontFamily: 'var(--font-title)', fontWeight: 400,
          fontSize: 14, letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'var(--red)'
        }}>
          N · O · M · E · N &nbsp; — &nbsp; NOMBRE EN LATÍN
        </div>

        <div style={{ position: 'relative', width: 'min(86vw, 1100px)' }}>
          {showOctopus &&
          <img
            src="assets/imagery/hero-octopus.png"
            alt=""
            style={{
              position: 'absolute', width: 280, height: 280,
              left: '50%', top: '50%', transform: 'translate(-50%,-50%)',
              mixBlendMode: 'multiply', opacity: .85, zIndex: 0
            }} />

          }
          <span id="nomen-repel" style={{ display: 'block', position: 'relative', zIndex: 1 }}>
            <span className="nomen-float" style={{ display: 'block' }}>
              <span className="nomen-float-mid" style={{ display: 'block' }}>
                <span className="nomen-float-inner" style={{ display: 'block' }}>
                  <NomenDispersing
                    size="min(86vw, 1100px)"
                    src="assets/logo/nomen-wordmark-closing.png" />
                </span>
              </span>
            </span>
          </span>
          
        </div>

        <h1 className="display" style={{
          fontSize: 'clamp(30px, 4.6vw, 64px)',
          margin: 0,
          color: 'var(--ink)',
          fontWeight: 400,
          maxWidth: 1100,
          textWrap: 'balance'
        }}>
          Traducir <em style={{ fontStyle: 'italic', fontFamily: 'Georgia, serif', fontWeight: 400 }}>lo invisible</em> en forma.
        </h1>

        <p style={{
          maxWidth: 520, margin: 0,
          fontSize: 14, letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'var(--ink-40)', textAlign: 'center'
        }}>
          Joaquina Albornoz — Gestora de estéticas <br />y trend forecasting.
        </p>

        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#proyectos" className="btn btn-red">
            Ver proyectos <span className="arrow">→</span>
          </a>
          <a href="#sistema" className="btn">
            Conocer el sistema <span className="arrow">↓</span>
          </a>
        </div>
      </div>

      {/* bottom meta — coordinates & live pointer reading, echoing the 'selector' concept */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
        paddingTop: 18, borderTop: '1px solid rgba(10,10,10,.35)', gap: 20, flexWrap: 'wrap'
      }}>
        <div style={{ display: 'flex', gap: 28, flexWrap: 'wrap' }}>
          <KV k="sistema nomen" v="Signo en bloques / 5 energias" />
          <KV k="rol" v="Gestora de estéticas · Trend forecaster" />
        </div>
        <div className="eyebrow" style={{ color: 'var(--ink-40)' }}>OBSERVAR · SELECCIONAR · NOMBRAR

        </div>
      </div>
    </section>);

}

function KV({ k, v }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <span className="eyebrow" style={{ color: 'var(--ink-40)', fontSize: 10 }}>{k}</span>
      <span style={{ fontSize: 13, fontWeight: 500 }}>{v}</span>
    </div>);

}

Object.assign(window, { Hero });