// marketing-components.jsx
// Nav, Footer, shared UI mock, icons

// ────────────────────────────────────────────────────────────
// NAV
// ────────────────────────────────────────────────────────────
const NAV_LINKS = {
  es: [
    { id: 'home',      label: 'Inicio' },
    { id: 'product',   label: 'Producto' },
    { id: 'ai',        label: 'IA en Patología' },
    { id: 'solutions', label: 'Soluciones' },
    { id: 'resources', label: 'Recursos' },
    { id: 'blog',      label: 'Blog' },
    { id: 'about',     label: 'Nosotros' },
  ],
  en: [
    { id: 'home',      label: 'Home' },
    { id: 'product',   label: 'Product' },
    { id: 'ai',        label: 'AI in Pathology' },
    { id: 'solutions', label: 'Solutions' },
    { id: 'resources', label: 'Resources' },
    { id: 'blog',      label: 'Blog' },
    { id: 'about',     label: 'About' },
  ],
};

const Nav = ({ page, setPage, lang, setLang }) => {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', fn);
    return () => window.removeEventListener('scroll', fn);
  }, []);

  const links = NAV_LINKS[lang] || NAV_LINKS.es;

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(8,10,16,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : 'none',
      transition: 'all 300ms ease',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 48px', display: 'flex', alignItems: 'center', height: 68, gap: 40 }}>
        {/* Logo */}
        <button onClick={() => { setPage('home'); window.scrollTo(0,0); }} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center' }}>
          <img src="Logo1.png" alt="Aiscopia" style={{ height: 32, objectFit: 'contain' }} />
        </button>

        {/* Links */}
        <div className="hide-mobile" style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1 }}>
          {links.map(l => (
            <button key={l.id} onClick={() => { setPage(l.id); window.scrollTo(0,0); }} style={{
              border: 'none', cursor: 'pointer',
              padding: '8px 14px', borderRadius: 8,
              fontSize: 14, fontWeight: 500,
              color: 'rgba(200,208,224,0.7)',
              background: page === l.id ? 'rgba(255,255,255,0.07)' : 'transparent',
              transition: 'all 150ms',
              whiteSpace: 'nowrap',
            }}
            onMouseEnter={(e) => { if (page !== l.id) e.currentTarget.style.color = '#fff'; }}
            onMouseLeave={(e) => { if (page !== l.id) e.currentTarget.style.color = 'rgba(200,208,224,0.7)'; }}
            >{l.label}</button>
          ))}
        </div>

        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {/* Language toggle */}
          <div style={{ display: 'flex', background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 8, padding: 2, gap: 1 }}>
            {['es', 'en'].map(l => (
              <button key={l} onClick={() => setLang(l)} style={{
                background: lang === l ? 'rgba(255,255,255,0.12)' : 'transparent',
                color: lang === l ? '#fff' : 'rgba(200,208,224,0.55)',
                border: 'none', borderRadius: 6, padding: '5px 10px',
                fontSize: 12, fontWeight: 700, cursor: 'pointer', letterSpacing: '0.04em',
                textTransform: 'uppercase', transition: 'all 150ms',
              }}>{l}</button>
            ))}
          </div>
          <button onClick={() => { setPage('contact'); window.scrollTo(0,0); }} className="btn btn-ghost btn-sm hide-mobile">
            {lang === 'en' ? 'Log in' : 'Iniciar sesión'}
          </button>
          <button onClick={() => { setPage('contact'); window.scrollTo(0,0); }} className="btn btn-primary btn-sm">
            {lang === 'en' ? 'Request demo' : 'Solicitar demo'}
          </button>
        </div>
      </div>
    </nav>
  );
};

// ────────────────────────────────────────────────────────────
// FOOTER
// ────────────────────────────────────────────────────────────
const Footer = ({ setPage }) => (
  <footer style={{ background: 'var(--dark-900)', borderTop: '1px solid var(--dark-border)', padding: '64px 0 40px' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
            <img src="Logo1.png" alt="Aiscopia" style={{ height: 28, objectFit: 'contain' }} />
          </div>
          <p style={{ fontSize: 14, color: 'var(--text-muted-dk)', lineHeight: 1.6, maxWidth: 300 }}>
            Plataforma inteligente de patología digital. Diseñada por patólogos, para patólogos.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
            {['linkedin', 'twitter', 'youtube'].map(s => (
              <div key={s} style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--dark-600)', border: '1px solid var(--dark-border)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect width="14" height="14" rx="2" fill="var(--dark-border-2)"/></svg>
              </div>
            ))}
          </div>
        </div>
        {[
          { title: 'Producto', links: ['LIS Overview', 'Módulos', 'Visor WSI', 'Integración IA', 'Interoperabilidad'] },
          { title: 'Soluciones', links: ['Hospitales públicos', 'Laboratorios privados', 'Centros de investigación', 'Demo gratuita'] },
          { title: 'Empresa', links: ['Nosotros', 'Blog', 'Recursos', 'Contacto', 'Política de privacidad'] },
        ].map(col => (
          <div key={col.title}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted-dk)', marginBottom: 16 }}>{col.title}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {col.links.map(l => (
                <span key={l} style={{ fontSize: 14, color: 'rgba(200,208,224,0.6)', cursor: 'pointer', transition: 'color 150ms' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
                  onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(200,208,224,0.6)'}
                >{l}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
      <hr className="dark" />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24 }}>
        <span style={{ fontSize: 13, color: 'var(--text-muted-dk)' }}>© 2026 Aiscopia. Todos los derechos reservados.</span>
        <span style={{ fontSize: 13, color: 'var(--text-muted-dk)' }}>Hecho con rigor clínico · España</span>
      </div>
    </div>
  </footer>
);

// ────────────────────────────────────────────────────────────
// HERO SCREENS COMPOSITION — real app screenshots stacked
// WSI viewer dominant on top, other screens peeking below
// ────────────────────────────────────────────────────────────
const DashboardMockup = () => {
  const base = '../assets/screens/';
  return (
    <div style={{ position: 'relative', width: '100%', userSelect: 'none' }}>
      {/* Outer chrome */}
      <div style={{
        borderRadius: 16, overflow: 'hidden',
        boxShadow: '0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06)',
        background: '#0D0F18',
        position: 'relative',
      }}>
        {/* Browser chrome bar */}
        <div style={{
          background: '#0D0F18', height: 36, display: 'flex', alignItems: 'center',
          padding: '0 14px', gap: 8, borderBottom: '1px solid rgba(255,255,255,0.06)',
        }}>
          <div style={{ display: 'flex', gap: 5 }}>
            {['#F87171','#FBBF24','#4ADE80'].map(c => (
              <div key={c} style={{ width: 9, height: 9, borderRadius: '50%', background: c, opacity: 0.7 }}></div>
            ))}
          </div>
          <div style={{
            flex: 1, maxWidth: 260, height: 22,
            background: 'rgba(255,255,255,0.05)', borderRadius: 5,
            display: 'flex', alignItems: 'center', padding: '0 10px',
          }}>
            <span style={{ fontSize: 10, color: 'rgba(200,208,224,0.45)', fontFamily: 'var(--mono)' }}>app.aiscopia.io/viewer</span>
          </div>
        </div>

        {/* ── WSI VIEWER — top, full width, most prominent ── */}
        <div style={{ position: 'relative', overflow: 'hidden', height: 220 }}>
          <img
            src={`${base}wsi-viewer.png`}
            alt="WSI Viewer"
            style={{ width: '100%', objectFit: 'cover', objectPosition: 'top', display: 'block' }}
          />
          {/* Bottom fade to blend with screens below */}
          <div style={{
            position: 'absolute', bottom: 0, left: 0, right: 0, height: 60,
            background: 'linear-gradient(to bottom, transparent, #0D0F18)',
          }}></div>
          {/* IA badge overlay */}
          <div style={{
            position: 'absolute', top: 10, right: 14,
            background: 'rgba(13,15,24,0.88)', backdropFilter: 'blur(8px)',
            border: '1px solid rgba(59,180,229,0.3)', borderRadius: 8,
            padding: '6px 12px', display: 'flex', alignItems: 'center', gap: 7,
          }}>
            <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#4ADE80', boxShadow: '0 0 0 3px rgba(74,222,128,0.2)' }}></div>
            <span style={{ fontSize: 11, fontWeight: 600, color: '#fff' }}>IA procesando análisis</span>
          </div>
        </div>

        {/* ── LOWER ROW — three screens side by side, cropped ── */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 2, height: 180, overflow: 'hidden', background: '#0D0F18' }}>
          {[
            { src: `${base}dashboard.png`,   label: 'Dashboard',        pos: 'top' },
            { src: `${base}worklist.png`,     label: 'Todos los Casos',  pos: 'top' },
            { src: `${base}diagnostico.png`,  label: 'Diagnóstico',      pos: 'top' },
          ].map((s, i) => (
            <div key={i} style={{ position: 'relative', overflow: 'hidden' }}>
              <img
                src={s.src}
                alt={s.label}
                style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: s.pos, display: 'block', opacity: 0.92 }}
              />
              {/* Top fade */}
              <div style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 28,
                background: 'linear-gradient(to bottom, #0D0F18, transparent)',
              }}></div>
              {/* Side divider */}
              {i > 0 && <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 1, background: 'rgba(255,255,255,0.05)' }}></div>}
              {/* Label chip */}
              <div style={{
                position: 'absolute', bottom: 8, left: 8,
                background: 'rgba(13,15,24,0.80)', backdropFilter: 'blur(6px)',
                border: '1px solid rgba(255,255,255,0.08)', borderRadius: 5,
                padding: '3px 8px', fontSize: 9, fontWeight: 600,
                color: 'rgba(200,208,224,0.6)', letterSpacing: '0.04em',
              }}>{s.label}</div>
            </div>
          ))}
        </div>

        {/* Bottom URL bar */}
        <div style={{
          background: '#0D0F18', height: 28, display: 'flex', alignItems: 'center',
          padding: '0 14px', gap: 12, borderTop: '1px solid rgba(255,255,255,0.04)',
        }}>
          <span style={{ fontSize: 9, fontFamily: 'var(--mono)', color: 'rgba(200,208,224,0.25)' }}>WSI · 40× · OpenSeadragon</span>
          <span style={{ marginLeft: 'auto', fontSize: 9, fontFamily: 'var(--mono)', color: 'rgba(200,208,224,0.25)' }}>X: 6068 · Y: 17442</span>
        </div>
      </div>
    </div>
  );
};

// ────────────────────────────────────────────────────────────
// SECTION HEADING
// ────────────────────────────────────────────────────────────
const SectionHeading = ({ pill, pillVariant = 'pill-cyan', title, subtitle, center = true, light = false }) => (
  <div style={{ textAlign: center ? 'center' : 'left', marginBottom: 64 }}>
    {pill && (
      <div style={{ marginBottom: 16, display: center ? 'flex' : 'block', justifyContent: center ? 'center' : 'flex-start' }}>
        <span className={`pill ${pillVariant}`}>{pill}</span>
      </div>
    )}
    <div className="h2" style={{ color: light ? 'var(--text-display-lt)' : 'var(--text-display)', maxWidth: center ? 680 : 'none', margin: center ? '0 auto' : '0', marginBottom: subtitle ? 16 : 0 }}>
      {title}
    </div>
    {subtitle && (
      <p className="body-lg" style={{ color: light ? 'var(--text-body-lt)' : 'var(--text-body-dk)', maxWidth: center ? 600 : 'none', margin: center ? '0 auto' : '0', marginTop: 12, opacity: 0.8 }}>
        {subtitle}
      </p>
    )}
  </div>
);

// ────────────────────────────────────────────────────────────
// ICON WRAPPER
// ────────────────────────────────────────────────────────────
const IconBox = ({ icon, color = 'var(--cyan)', bg, size = 44 }) => (
  <div style={{
    width: size, height: size, borderRadius: Math.round(size * 0.27),
    background: bg || `${color}18`,
    border: `1px solid ${color}25`,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  }}>
    <i data-lucide={icon} style={{ width: size * 0.45, height: size * 0.45, color }}></i>
  </div>
);

Object.assign(window, { Nav, Footer, DashboardMockup, SectionHeading, IconBox });