// Nav + Hero

function Nav({ onToggleTweaks }){
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(()=>{
    const onS = ()=> setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onS);
    return ()=> window.removeEventListener('scroll', onS);
  },[]);
  return (
    <nav style={{
      position:'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '22px 0',
      background: scrolled ? 'rgba(253,235,221,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
      transition: 'all .35s ease',
    }}>
      <div className="container nav-wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
        <LogoLockup color="var(--terracotta)"/>
        <div className="nav-links" style={{ display:'flex', gap: 28, alignItems:'center' }}>
          <a href="#que-es" style={navLinkStyle}>La membresía</a>
          <a href="#beneficios" style={navLinkStyle}>Beneficios</a>
          <a href="#testimonios" style={navLinkStyle}>Testimonios</a>
          <Button href="#unirme" size="sm">Unirme</Button>
        </div>
      </div>
    </nav>
  );
}
const navLinkStyle = {
  fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase',
  color: 'var(--ink)', textDecoration:'none', fontWeight: 500,
  opacity: 0.8,
};

function Hero({ heroPhoto, titleFont }){
  // Title font options: 'serif-it' (default) | 'script' | 'sans-caps'
  const photo = heroPhoto === 'blazer'
    ? 'assets/adriana-blazer.jpg'
    : 'assets/adriana-green.jpg';

  const titleStyles = {
    'serif-it': { fontFamily:"'Cormorant Garamond', serif", fontStyle:'italic', fontWeight: 400, letterSpacing:'-0.01em' },
    'script':   { fontFamily:"'Dancing Script', cursive", fontWeight: 600, letterSpacing:'0' },
    'sans-caps':{ fontFamily:"'Montserrat', sans-serif", fontWeight: 700, textTransform:'uppercase', letterSpacing:'0.02em' },
  }[titleFont || 'serif-it'];

  return (
    <header className="hero-pad" style={{ position:'relative', paddingTop: 130, paddingBottom: 80, overflow:'hidden' }}>
      {/* big soft bg circle, terracotta-to-cream, behind image */}
      <div aria-hidden className="hero-bg" style={{
        position:'absolute', top: 80, right: -200, width: 900, height: 900, borderRadius: '50%',
        background: 'radial-gradient(circle at 40% 40%, var(--coral), var(--cream) 60%, transparent 75%)',
        opacity: 0.55, zIndex: 0, filter: 'blur(2px)'
      }}/>
      <div className="container" style={{ position:'relative', zIndex: 1 }}>
        <div className="two-col hero">
          <div>
            <Reveal>
              <Eyebrow>Círculo de Art Journaling · Membresía</Eyebrow>
            </Reveal>
            <Reveal delay={120}>
              <h1 style={{
                fontSize: 'clamp(44px, 6.2vw, 92px)',
                lineHeight: 0.95,
                margin: '28px 0 0 0',
                color: 'var(--ink)',
                ...titleStyles,
              }}>
                No estás<br/>
                <span style={{ color: 'var(--accent)' }}>cansada…</span><br/>
                estás <em style={{ fontStyle:'italic', color: 'var(--ink)', position:'relative' }}>
                  cargada
                  <svg viewBox="0 0 200 14" preserveAspectRatio="none" style={{
                    position:'absolute', left: -4, right: -4, bottom: -8, width: 'calc(100% + 8px)', height: 14, opacity: 0.7,
                  }}>
                    <path d="M 2 8 Q 50 2, 100 7 T 198 6" stroke="var(--accent)" strokeWidth="2" fill="none" strokeLinecap="round"/>
                  </svg>
                </em>.
              </h1>
            </Reveal>

            <Reveal delay={260}>
              <p style={{
                marginTop: 44, maxWidth: 520,
                fontSize: 17, lineHeight: 1.6, color: 'var(--muted)',
                fontWeight: 400,
              }}>
                Con los años es cada vez más difícil encontrar amigas o tener
                conversaciones profundas en las que puedas desahogarte —y peor aún
                después de emigrar. Cuando todo eso se acumula…
                <span style={{ color:'var(--ink)', fontWeight: 500 }}> necesitas un espacio para soltarlo.</span>
              </p>
            </Reveal>

            <Reveal delay={380}>
              <div style={{ marginTop: 40, display:'flex', alignItems:'center', gap: 20, flexWrap:'wrap' }}>
                <Button href="#unirme" size="lg">Quiero unirme ahora</Button>
                <div style={{ display:'flex', alignItems:'center', gap: 10, color:'var(--muted)', fontSize: 13 }}>
                  <span className="hand" style={{ fontSize: 22, color:'var(--accent)' }}>$15</span>
                  <span>USD al mes · cancela cuando quieras</span>
                </div>
              </div>
            </Reveal>

            <Reveal delay={500}>
              <div style={{
                marginTop: 48, paddingTop: 22,
                borderTop: '1px solid var(--line)',
                display:'flex', alignItems:'center', gap: 28, flexWrap:'wrap'
              }}>
                <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
                  <AvatarStack/>
                  <div style={{ fontSize: 12, color:'var(--muted)', lineHeight: 1.4 }}>
                    <div style={{ color:'var(--ink)', fontWeight: 600 }}>+300 mujeres</div>
                    <div>ya están soltando su carga</div>
                  </div>
                </div>
                <div style={{ fontSize: 12, color:'var(--muted)', lineHeight: 1.4 }}>
                  <div style={{ color:'var(--accent)', letterSpacing: '0.1em' }}>★★★★★</div>
                  <div>Creado por Adriana Laitano · Psicóloga</div>
                </div>
              </div>
            </Reveal>
          </div>

          <HeroImage photo={photo}/>
        </div>
      </div>
    </header>
  );
}

function AvatarStack(){
  const colors = ['var(--coral)', 'var(--sage)', 'var(--taupe)', 'var(--terracotta)'];
  return (
    <div style={{ display:'flex' }}>
      {colors.map((c, i) => (
        <div key={i} style={{
          width: 28, height: 28, borderRadius: '50%',
          background: c, marginLeft: i === 0 ? 0 : -8,
          border: '2px solid var(--cream)',
          display:'grid', placeItems:'center',
          color: '#fff', fontSize: 11, fontWeight: 600,
          fontFamily: "'Cormorant Garamond', serif",
        }}>
          {['M','S','A','V'][i]}
        </div>
      ))}
    </div>
  );
}

function HeroImage({ photo }){
  return (
    <Reveal delay={200}>
      <div style={{ position:'relative' }}>
        {/* textured frame */}
        <div style={{
          position:'absolute', inset: -18,
          border: '1px solid var(--line)',
          borderRadius: 4,
          transform: 'rotate(-1.2deg)',
          zIndex: 0,
        }}/>
        <div style={{
          position:'relative',
          aspectRatio: '3/4',
          overflow: 'hidden',
          background: 'var(--taupe)',
          borderRadius: 2,
          boxShadow: '0 40px 80px -30px rgba(122,68,52,0.35)',
          zIndex: 1,
        }}>
          <img src={photo} alt="Adriana Laitano"
            style={{ width:'100%', height:'100%', objectFit:'cover', display:'block' }}/>
        </div>

        {/* floating quote card */}
        <div className="hero-quote" style={{
          position:'absolute', right: -20, bottom: 40, zIndex: 2,
          background: 'var(--off-white)',
          padding: '18px 22px',
          borderRadius: 4,
          maxWidth: 240,
          boxShadow: '0 30px 60px -30px rgba(0,0,0,0.3)',
          border: '1px solid var(--line)',
          transform: 'rotate(2deg)'
        }}>
          <div className="serif-it" style={{ fontSize: 18, lineHeight: 1.35, color: 'var(--ink)' }}>
            “Lo que no se suelta… se acumula.”
          </div>
          <div className="uppercase-track" style={{ fontSize: 9, color: 'var(--muted)', marginTop: 10 }}>
            — Adriana Laitano
          </div>
        </div>

        {/* scribble doodle */}
        <svg viewBox="0 0 120 60" width="110" className="hero-doodle" style={{
          position:'absolute', left: -60, top: 30, zIndex: 2, opacity: 0.7,
        }}>
          <path d="M 5 30 C 20 10, 40 50, 60 30 T 115 30"
            stroke="var(--terracotta)" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
          <circle cx="115" cy="30" r="2.5" fill="var(--terracotta)"/>
        </svg>
      </div>
    </Reveal>
  );
}

window.Nav = Nav;
window.Hero = Hero;