/* Header + MobileMenu + Hero + Logos */

const { useState, useEffect, useRef } = React;

function Header({ tweaks }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: '#servicios', label: 'Servicios' },
    { href: '#metodo', label: 'Método' },
    { href: '#para-quien', label: 'Para quién' },
    { href: '#faq', label: 'FAQ' },
    { href: '#newsletter', label: 'Newsletter' },
  ];

  const accent = tweaks.accent;

  return (
    <>
      <header style={{
        position: 'sticky', top: 0, zIndex: 30,
        background: scrolled ? 'rgba(255, 255, 255, 0.92)' : 'rgba(255, 255, 255, 0.6)',
        backdropFilter: scrolled ? 'blur(6px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--border-1)' : '1px solid transparent',
        transition: 'all 200ms var(--ease-out)',
      }}>
        <div style={{
          maxWidth: 1200, margin: '0 auto', padding: '16px 24px',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        }}>
          <a href="#top" style={{ display: 'flex', alignItems: 'center', textDecoration: 'none' }} aria-label="Inncertia, inicio">
            <img src="assets/logo-wordmark.jpg" alt="inncertia" style={{ height: 44 }} />
          </a>
          <nav className="nav-desktop" style={{ display: 'flex', gap: 28, alignItems: 'center' }}>
            {links.map(l => (
              <a key={l.href} href={l.href} className="navlink">{l.label}</a>
            ))}
            <a href="#contacto" className="btn-primary" style={{ background: accent, textDecoration: 'none', display: 'inline-block' }}>
              Diagnóstico gratuito
            </a>
          </nav>
          <button
            className="nav-burger"
            onClick={() => setMobileOpen(true)}
            aria-label="Abrir menú"
            style={{
              display: 'none', background: 'transparent', border: '1px solid var(--border-2)',
              borderRadius: 'var(--radius-sm)', padding: 10, cursor: 'pointer',
            }}>
            <svg width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" viewBox="0 0 24 24">
              <path d="M4 7h16 M4 12h16 M4 17h16"/>
            </svg>
          </button>
        </div>
      </header>

      {mobileOpen && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 50,
          background: 'rgba(0, 31, 60, 0.55)',
          display: 'flex', justifyContent: 'flex-end',
        }} onClick={() => setMobileOpen(false)}>
          <div onClick={e => e.stopPropagation()} style={{
            width: 'min(360px, 100vw)', background: 'var(--paper)',
            padding: '24px', display: 'flex', flexDirection: 'column', gap: 8,
            animation: 'slideIn 200ms var(--ease-out)',
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <img src="assets/logo-wordmark.jpg" alt="inncertia" style={{ height: 40 }}/>
              <button onClick={() => setMobileOpen(false)} aria-label="Cerrar" style={{
                background: 'transparent', border: '1px solid var(--border-2)', borderRadius: 'var(--radius-sm)',
                padding: 8, cursor: 'pointer',
              }}>
                <svg width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" viewBox="0 0 24 24"><path d="M6 6l12 12 M18 6L6 18"/></svg>
              </button>
            </div>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setMobileOpen(false)} style={{
                padding: '14px 12px', textDecoration: 'none', color: 'var(--fg-1)',
                fontWeight: 600, borderBottom: '1px solid var(--border-1)',
              }}>{l.label}</a>
            ))}
            <a href="#contacto" onClick={() => setMobileOpen(false)} className="btn-primary"
              style={{ background: accent, textAlign: 'center', textDecoration: 'none', marginTop: 16 }}>
              Diagnóstico gratuito
            </a>
          </div>
        </div>
      )}
    </>
  );
}

function Hero({ tweaks }) {
  return (
    <section id="top" style={{ padding: 'clamp(64px, 9vw, 120px) 24px 80px', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 20, color: tweaks.accent }}>Control de gestión · Asesoramiento</div>
          <h1 className="display hero-title" style={{ margin: '0 0 24px', fontSize: 'clamp(40px, 6vw, 68px)', lineHeight: 1.02 }}>
            Tu negocio en claro<span style={{ color: tweaks.accent }}>.</span><br/>
            <em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--fg-2)' }}>Sin sorpresas</em>
          </h1>
          <p className="body-lg" style={{ color: 'var(--fg-2)', maxWidth: 560, marginBottom: 36 }}>
            Acompañamos a pequeñas empresas y empresarias a ordenar las cuentas,
            entender qué dicen los números y tomar decisiones con base — no con corazonadas.
          </p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="#contacto" className="btn-primary" style={{ background: tweaks.accent, textDecoration: 'none' }}>
              Solicitar diagnóstico gratuito
            </a>
            <a href="#metodo" className="btn-ghost" style={{ textDecoration: 'none' }}>
              Ver cómo trabajamos →
            </a>
          </div>
          <div style={{ marginTop: 40, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
          </div>
        </div>

        <HeroVisual tweaks={tweaks}/>
      </div>
    </section>
  );
}

/* Decorative composition: a stacked dashboard card + KPI tiles, all flat shapes. */
function HeroVisual({ tweaks }) {
  return (
    <div className="hero-visual" style={{ position: 'relative', minHeight: 480 }}>
      {/* Background dots */}
      <div style={{
        position: 'absolute', inset: -20, opacity: 0.5,
        backgroundImage: 'radial-gradient(circle, rgba(0,31,60,0.10) 1px, transparent 1px)',
        backgroundSize: '20px 20px',
        zIndex: 0,
      }}/>

      {/* Mini dashboard card */}
      <div style={{
        position: 'relative', zIndex: 2,
        background: 'var(--white)', border: '1px solid var(--border-1)',
        borderRadius: 16, padding: 22, boxShadow: 'var(--shadow-lg)',
        maxWidth: 420, marginLeft: 'auto',
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>Resumen · mayo</div>
            <div style={{ fontSize: 18, fontWeight: 700, marginTop: 4 }}>Tu empresa S.L<span style={{ color: tweaks.accent }}>.</span></div>
          </div>
          <div style={{ width: 36, height: 36, borderRadius: 10, background: tweaks.accent, display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--navy-800)', fontWeight: 800 }}>a.</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginBottom: 16 }}>
          {[
            { l: 'Ingresos', v: '52.430 €', d: '+9,2 %' },
            { l: 'Margen', v: '31.249 €', d: '+13,6 %' },
          ].map(k => (
            <div key={k.l} style={{ background: 'var(--bg-3)', borderRadius: 10, padding: 12 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 600, marginBottom: 4 }}>{k.l}</div>
              <div className="figure" style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.01em' }}>{k.v}</div>
              <div className="figure" style={{ fontSize: 11, fontWeight: 700, color: 'var(--positive)', marginTop: 2 }}>{k.d}</div>
            </div>
          ))}
        </div>

        {/* tiny chart */}
        <div style={{ height: 90, position: 'relative', borderRadius: 8, background: 'linear-gradient(180deg, var(--orange-050) 0%, transparent 100%)', overflow: 'hidden' }}>
          <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
            <path d="M0,60 L25,52 L50,55 L75,40 L100,42 L125,28 L150,30 L175,18 L200,20 L200,80 L0,80 Z" fill={tweaks.accent} fillOpacity="0.18"/>
            <path d="M0,60 L25,52 L50,55 L75,40 L100,42 L125,28 L150,30 L175,18 L200,20" stroke={tweaks.accent} strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>

        <div style={{ marginTop: 14, padding: 12, background: 'var(--orange-050)', borderRadius: 8, borderLeft: `3px solid ${tweaks.accent}`, display: 'flex', gap: 10, alignItems: 'flex-start' }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--orange-700)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}><path d="M12 2v6 M12 22v-2 M4.93 4.93l4.24 4.24 M14.83 14.83l4.24 4.24 M2 12h6 M22 12h-6"/></svg>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--orange-700)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>A decidir esta semana</div>
            <div style={{ fontSize: 13, color: 'var(--fg-1)', marginTop: 4, lineHeight: 1.5 }}>¿Subimos precios en mayoristas un 4 %?</div>
          </div>
        </div>
      </div>

      {/* Floating tag bottom-left */}
      <div style={{
        position: 'absolute', bottom: 20, left: 0, zIndex: 3,
        background: 'var(--navy-800)', color: 'var(--paper)',
        borderRadius: 'var(--radius-pill)', padding: '10px 18px',
        boxShadow: 'var(--shadow-md)',
        fontSize: 13, fontWeight: 600,
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: 'var(--positive)' }}/>
        Cierre listo
      </div>
    </div>
  );
}

function Logos() {
  const sectors = ['Retail', 'Hostelería', 'Servicios', 'E-commerce', 'Salud', 'Oficios', 'Estudios creativos'];
  return (
    <section style={{ padding: '40px 24px 80px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div className="caption" style={{ textAlign: 'center', marginBottom: 24, color: 'var(--fg-3)' }}>Sectores que acompañamos</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center' }}>
          {sectors.map(s => (
            <span key={s} style={{
              padding: '10px 20px', border: '1px solid var(--border-2)',
              borderRadius: 'var(--radius-pill)', fontSize: 14, fontWeight: 500,
              color: 'var(--fg-2)', background: 'var(--paper)',
            }}>{s}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Header = Header;
window.Hero = Hero;
window.Logos = Logos;