// ZARK Rubí — Nav + Hero (with hero variants)

function Logo({ height = 30, stacked = false, hideWord = false }) {
  if (hideWord) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: height * 0.4 }}>
        <img src="assets/logo-mark.png" alt="ZARK" style={{ height }} />
        <span style={{ font: '300 ' + height * 0.42 + 'px/1 var(--font-sans)', textTransform: 'uppercase', color: '#fff', letterSpacing: "0.1px", fontWeight: "400" }}>Gym 24h</span>
      </div>);

  }
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: height * 0.38 }}>
      <img src="assets/logo-mark.png" alt="ZARK" style={{ height }} />
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 0.82 }}>
        <span className="display" style={{ fontSize: height * 1.02, color: '#fff', lineHeight: 0.82 }}>ZARK</span>
        {stacked &&
        <span style={{ font: '700 ' + height * 0.22 + 'px/1 var(--font-sans)', letterSpacing: '.34em', textTransform: 'uppercase', color: 'var(--rust-400)', marginTop: height * 0.12 }}>Gym 24h</span>
        }
      </div>
    </div>);

}

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const el = document.querySelector('.site-scroll');
    const onScroll = () => setScrolled((el ? el.scrollTop : window.scrollY) > 20);
    const target = el || window;
    target.addEventListener('scroll', onScroll);
    return () => target.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Instalaciones', '#zonas'], ['Maquinaria', '#maquinaria'], ['Planes', '#planes'], ['App', '#app']];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 60,
      background: scrolled ? 'rgba(1,13,17,0.82)' : 'transparent',
      backdropFilter: scrolled ? 'blur(16px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(16px)' : 'none',
      borderBottom: '1px solid ' + (scrolled ? 'var(--ink-600)' : 'transparent'),
      transition: 'all var(--dur) var(--ease-out)'
    }}>
      <div className="wrap" style={{ maxWidth: 1600, margin: '0 auto', padding: '0 48px', height: 78, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" style={{ textDecoration: 'none' }}><Logo height={34} hideWord /></a>
        <nav className="nav-links" style={{ display: 'flex', gap: 34, alignItems: 'center' }}>
          {links.map(([l, href]) =>
          <a key={l} href={href} style={{
            color: 'var(--ink-100)', textDecoration: 'none',
            transition: 'color var(--dur)', fontWeight: "400", letterSpacing: "0.1px", fontSize: "16px"
          }} onMouseEnter={(e) => e.target.style.color = 'var(--rust-300)'}
          onMouseLeave={(e) => e.target.style.color = 'var(--ink-100)'}>{l}</a>
          )}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,0.06)', border: '1px solid var(--ink-600)', borderRadius: 8, padding: '4px' }}>
            {[['ES','/'],['EN','/en/'],['CA','/ca/']].map(([code, href]) => (
              <a key={code} href={href} style={{
                fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textDecoration: 'none',
                padding: '5px 9px', borderRadius: 5, transition: 'background .15s, color .15s',
                background: code === 'ES' ? 'var(--rust-500)' : 'transparent',
                color: code === 'ES' ? '#fff' : 'var(--fg2)',
              }}>{code}</a>
            ))}
          </div>
          <a href="#app" className="btn btn-primary nav-cta" style={{ padding: '12px 22px' }}>Ven a conocernos</a>
          <button className="nav-burger" aria-label="Menú" onClick={() => setOpen((o) => !o)} style={{
            display: 'none', background: 'transparent', border: '1px solid var(--ink-500)',
            borderRadius: 'var(--r-md)', width: 44, height: 44, alignItems: 'center', justifyContent: 'center', color: '#fff'
          }}>
            <i data-lucide={open ? 'x' : 'menu'} style={{ width: 22, height: 22 }}></i>
          </button>
        </div>
      </div>
      {open &&
      <div className="mobile-menu" style={{ borderTop: '1px solid var(--ink-600)', background: 'rgba(1,13,17,0.96)', backdropFilter: 'blur(16px)' }}>
          <div className="wrap" style={{ padding: '14px 22px 22px', display: 'flex', flexDirection: 'column', gap: 4 }}>
            {links.map(([l, href]) =>
          <a key={l} href={href} onClick={() => setOpen(false)} style={{
            color: '#fff', textDecoration: 'none', fontSize: 17, fontWeight: 600, padding: '12px 0',
            borderBottom: '1px solid var(--ink-700)'
          }}>{l}</a>
          )}
            <a href="#app" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 14 }}>Ven a conocernos</a>
          </div>
        </div>
      }
    </header>);

}

function HeroContent({ light }) {
  return (
    <React.Fragment>
      <span className="eyebrow hero-eyebrow" style={{ letterSpacing: "6px", fontWeight: "700" }}>Tu nuevo gimnasio 24 horas en Rubí</span>
      <h1 className="display hero-h1" style={{ color: '#fff', margin: '24px 0 0' }}>
        <span className="nw" style={{ lineHeight: "0.4", textAlign: "left" }}>Entrena en serio.</span><br /><span className="nw" style={{ color: 'var(--rust-500)', fontStyle: 'italic' }}>Con tu gente.</span>
      </h1>
      <p className="hero-sub" style={{ fontSize: 20, lineHeight: 1.5, color: 'var(--ink-100)', maxWidth: 460, margin: '28px 0 38px' }}>
        900 m² de equipamiento profesional, zona HYROX y una comunidad que empuja contigo. Sin letra pequeña. Sin sorpresas.
      </p>
      <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
        <a href="#app" className="btn btn-primary" style={{ letterSpacing: "1.1px" }}>Ven a conocernos <i data-lucide="arrow-right" className="ic"></i></a>
        <a href="#planes" className="btn btn-ghost">Ver planes</a>
      </div>
    </React.Fragment>);

}

function Hero({ variant }) {
  // VARIANT: "mural" — interior photo backdrop
  if (variant === 'mural') {
    return (
      <section id="top" style={{ position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        <img src="assets/interior-mural.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(0.92) contrast(1.06)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(1,13,17,0.95) 0%, rgba(1,13,17,0.78) 40%, rgba(1,13,17,0.30) 100%)' }} />
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 200, background: 'linear-gradient(0deg, var(--ink-900), transparent)' }} />
        <div className="wrap" style={{ position: 'relative', width: "100%", maxWidth: 1240, margin: "0 auto", padding: "130px 40px 96px 40px" }}>
          <HeroContent />
        </div>
      </section>);

  }
  // VARIANT: "split" — typographic left, rust signal panel right
  if (variant === 'split') {
    return (
      <section id="top" className="hero-split" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', minHeight: '92vh' }}>
        <div className="tex-corrugated" style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
          <div className="tex-grain" style={{ position: 'absolute', inset: 0 }}></div>
          <div className="wrap" style={{ position: 'relative', paddingTop: 120, paddingBottom: 80, maxWidth: 680, marginRight: 0 }}>
            <HeroContent />
          </div>
        </div>
        <div className="tex-rust-field hero-rust-panel" style={{ position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 48 }}>
          <img src="assets/logo-mark.png" alt="" style={{ position: 'absolute', right: -90, bottom: -60, width: 460, opacity: 0.16, filter: 'brightness(0)' }} />
          <div style={{ position: 'relative' }}>
            <div className="display" style={{ fontSize: 'clamp(80px,11vw,150px)', color: '#fff', lineHeight: 0.84 }}>24/7</div>
            <div style={{ height: 4, width: 64, background: '#fff', margin: '24px 0' }}></div>
            <div style={{ font: '700 14px/1.5 var(--font-sans)', letterSpacing: '.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.92)' }}>
              Abierto 365 días<br />en Rubí · Barcelona
            </div>
          </div>
        </div>
      </section>);

  }
  // VARIANT: "forge" (default) — full typographic, no photo
  return (
    <section id="top" className="tex-corrugated" style={{ position: 'relative', minHeight: '92vh', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
      <div className="tex-grain" style={{ position: 'absolute', inset: 0 }}></div>
      <div className="display hero-ghost" aria-hidden="true" style={{
        position: 'absolute', right: '-1.5vw', bottom: '-3vh', fontSize: '46vh', color: 'rgba(161,73,36,0.16)',
        lineHeight: 0.7, pointerEvents: 'none', userSelect: 'none'
      }}>24h</div>
      <div className="hero-sidelabel" style={{ position: 'absolute', left: 18, top: '50%', transform: 'rotate(180deg) translateY(50%)', writingMode: 'vertical-rl', font: '700 12px/1 var(--font-sans)', letterSpacing: '.36em', textTransform: 'uppercase', color: 'var(--ink-300)' }}>
        Strength &amp; Community · Rubí
      </div>
      <div className="wrap" style={{ position: 'relative', paddingTop: 130, paddingBottom: 90 }}>
        <HeroContent />
      </div>
    </section>);

}

Object.assign(window, { Logo, Nav, Hero });