// ADOS website — Home page sections (Inicio): Hero · Proceso · CTA
const { Button, Tag, Card } = window.ADOSDesignSystem_5aafbb;

const prefersReduced = () =>
  typeof window !== 'undefined' && window.matchMedia &&
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// Fade + slide-up as the element enters the viewport (movimiento al hacer scroll).
function Reveal({ children, delay = 0, off = false, style = {} }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(off);
  React.useEffect(() => {
    if (off) { setShown(true); return; }
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setShown(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, [off]);
  return (
    <div ref={ref} style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'none' : 'translateY(28px)',
      transition: `opacity 640ms var(--ease-out) ${delay}ms, transform 640ms var(--ease-out) ${delay}ms`,
      ...style,
    }}>{children}</div>
  );
}

// Pins a video behind its children and scrubs currentTime to scroll position
// (instead of autoplaying) so the footage advances only as the user scrolls
// through Hero + FederationBand.
// En móvil / pantallas táctiles el scrubbing es costoso y el pin "fixed" se
// siente brusco: ahí el video simplemente se reproduce en loop como fondo.
const isTouchLike = () =>
  typeof window !== 'undefined' && window.matchMedia &&
  window.matchMedia('(max-width: 900px), (pointer: coarse)').matches;

function ScrollScrubVideo({ src, children }) {
  const wrapRef = React.useRef(null);
  const videoRef = React.useRef(null);
  const layerRef = React.useRef(null);
  const [mobile, setMobile] = React.useState(false);

  React.useEffect(() => { setMobile(isTouchLike()); }, []);

  React.useEffect(() => {
    if (prefersReduced() || isTouchLike()) return;
    const wrap = wrapRef.current;
    const video = videoRef.current;
    const layer = layerRef.current;
    if (!wrap || !video || !layer) return;
    let duration = 0;
    let ticking = false;
    let target = 0;   // tiempo del video que pide el scroll
    let smooth = 0;   // tiempo aplicado, se acerca a target gradualmente
    let rafId = 0;

    const onMeta = () => {
      duration = video.duration || 0;
      update();
      smooth = target; // arrancar en la posición actual, sin animar desde 0
    };
    video.addEventListener('loadedmetadata', onMeta);

    // Bucle de seeking desacoplado del scroll: suaviza el avance y nunca
    // encola un seek mientras el anterior sigue pendiente (video.seeking).
    function seekLoop() {
      rafId = requestAnimationFrame(seekLoop);
      if (!duration) return;
      smooth += (target - smooth) * 0.25;
      if (Math.abs(target - smooth) < 0.002) smooth = target;
      if (!video.seeking && Math.abs(video.currentTime - smooth) > 1 / 60) {
        video.currentTime = smooth;
      }
    }
    rafId = requestAnimationFrame(seekLoop);

    function update() {
      ticking = false;
      const vh = window.innerHeight;
      const wrapHeight = wrap.offsetHeight;
      const rectTop = wrap.getBoundingClientRect().top;

      if (duration) {
        const scrollable = Math.max(1, wrapHeight - vh);
        const progress = Math.min(1, Math.max(0, -rectTop / scrollable));
        target = progress * duration;
      }

      // Keep the video pinned to the screen while the wrapper spans the full
      // viewport; once either edge of the wrapper enters view, anchor the
      // video to that edge instead so it scrolls away with the content
      // rather than overflowing past the wrapper.
      if (rectTop > 0) {
        layer.style.position = 'absolute';
        layer.style.top = '0px';
        layer.style.bottom = '';
      } else if (rectTop + wrapHeight <= vh) {
        layer.style.position = 'absolute';
        layer.style.top = '';
        layer.style.bottom = '0px';
      } else {
        layer.style.position = 'fixed';
        layer.style.top = '0px';
        layer.style.bottom = '';
      }
    }
    const onScroll = () => { if (!ticking) { ticking = true; requestAnimationFrame(update); } };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {
      cancelAnimationFrame(rafId);
      video.removeEventListener('loadedmetadata', onMeta);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [src]);

  return (
    <div ref={wrapRef} style={{ position: 'relative', background: '#0C0F12', overflow: 'hidden' }}>
      <div ref={layerRef} style={{
        position: mobile ? 'absolute' : 'fixed', top: 0, left: 0, width: '100%',
        height: mobile ? '100%' : '100vh', zIndex: 0, overflow: 'hidden',
      }}>
        <video ref={videoRef} src={src} muted playsInline preload={mobile ? 'metadata' : 'auto'}
          autoPlay={mobile} loop={mobile}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(ellipse 95% 120% at 50% 58%, rgba(12,15,18,0.28) 0%, rgba(12,15,18,0.85) 70%, rgba(12,15,18,0.96) 100%)',
        }} />
      </div>
      <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
    </div>
  );
}
window.ScrollScrubVideo = ScrollScrubVideo;

const heroWrap = { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--pad-x)' };

// ===== HERO (Inicio) — full-bleed image, overlay, headline, CTAs, amber tags =====
function HeroSection({ t = {}, onNavigate }) {
  const heroFull = (t.heroLayout || 'Imagen completa') === 'Imagen completa';
  const heroImg = t.heroImage || './assets/img/reactor-aerial.webp';
  const heroTitle = t.heroTitle || 'BIM que evita errores antes de llegar a obra';
  const ov = (t.heroOverlay == null ? 58 : t.heroOverlay) / 100;

  const HERO_META = {
    './assets/img/structural-frame.webp': ['Estructural', 'LOD 350'],
    './assets/img/water-plant-wide.webp': ['PTAR · Obra civil', 'LOD 350'],
    './assets/img/reactor-aerial.webp': ['PTAR · Obra civil', 'LOD 350'],
    './assets/img/building-section.webp': ['Arquitectura', 'LOD 300'],
    './assets/img/mep-isometric.webp': ['MEP · Hidrosanitario', 'LOD 350'],
  };
  const [tagA, tagB] = HERO_META[heroImg] || ['Estructural', 'LOD 350'];

  const HeroContent = ({ onImage }) => (
    <React.Fragment>
      <div className="eyebrow" style={{ marginBottom: 22 }}>Consultoría BIM · Ingeniería · Arquitectura</div>
      <h1 style={{ fontSize: 'clamp(38px, 6.5vw, 80px)', lineHeight: 1.02, letterSpacing: '-0.03em', margin: '0 0 28px', maxWidth: 700, textShadow: onImage ? '0 2px 30px rgba(10,14,18,0.5)' : 'none' }}>
        {heroTitle}
      </h1>
      <p style={{ fontSize: 'clamp(16px, 2.4vw, 20px)', lineHeight: 1.6, color: onImage ? 'rgba(255,255,255,0.82)' : 'var(--text-muted)', maxWidth: 520, margin: '0 0 32px' }}>
        Modelamos e implementamos BIM en proyectos de obra civil: detección
        de interferencias, coordinación entre disciplinas y documentación trazable
        para el sector público y privado.
      </p>
      <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <Button variant="primary" size="lg" onClick={() => onNavigate('proyectos')}
          iconRight={<svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>}>
          Ver proyectos
        </Button>
        <Button variant="secondary" size="lg" onClick={() => onNavigate('servicios')}>Conoce el proceso</Button>
      </div>
    </React.Fragment>
  );

  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      {heroFull ? (
        <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'relative', flex: 1, minHeight: 0 }}>
            <div style={{ ...heroWrap, position: 'absolute', inset: 0, zIndex: 4, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 'clamp(96px, 16vh, 128px) var(--pad-x) clamp(112px, 20vh, 188px)' }}>
              <HeroContent onImage />
              <div className="w-hero-tags" style={{ position: 'absolute', right: 32, bottom: 56, display: 'flex', gap: 8 }}>
                <Tag tone="amber">{tagA}</Tag>
                <Tag tone="steel">{tagB}</Tag>
              </div>
            </div>
          </div>
        </div>
      ) : (
        <div className="w-split" style={{ ...heroWrap, gap: 48, alignItems: 'center', padding: 'clamp(100px, 14vh, 120px) var(--pad-x) 96px' }}>
          <div><HeroContent /></div>
          <div style={{ position: 'relative' }}>
            <div style={{ border: '1px solid var(--border-strong)', borderRadius: 0, overflow: 'hidden', background: 'var(--surface)' }}>
              <img src={heroImg} alt="Modelo BIM" style={{ width: '100%', display: 'block' }} />
            </div>
            <div style={{ position: 'absolute', left: 16, bottom: 16, display: 'flex', gap: 8 }}>
              <Tag tone="amber">{tagA}</Tag>
              <Tag tone="steel">{tagB}</Tag>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

// ===== FEDERATION BAND — signature moment: disciplines converge into one model.
// Quotes the cube logo's own diagonal geometry (the -24deg skew already used as
// the divider accent in ServicesScreen) instead of a flat, ungeometric divider. =====
function FederationBand({ t = {} }) {
  const revealOff = t.scrollReveal === false || prefersReduced();
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(revealOff);
  const [hovered, setHovered] = React.useState(null);

  React.useEffect(() => {
    if (revealOff) { setShown(true); return; }
    const el = ref.current;
    if (!el || !('IntersectionObserver' in window)) { setShown(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [revealOff]);

  const PANELS = [
    { label: 'Arquitectura', detail: 'Diseño y acabados', tone: 'steel', from: -128 },
    { label: 'Estructural', detail: 'Acero y concreto', tone: 'amber', from: -64 },
    { label: 'Instalaciones', detail: 'Redes y contraincendios', tone: 'steel', from: 0 },
    { label: 'Eléctrico', detail: 'Redes y tableros', tone: 'amber', from: 64 },
    { label: 'Federado', detail: 'Todo en un modelo', tone: 'steel', from: 128 },
  ];
  const TONE = {
    amber: { bg: 'var(--accent)', fg: 'var(--on-accent)', activeBorder: 'var(--accent)' },
    steel: { bg: 'var(--ados-steel)', fg: '#FFFFFF', activeBorder: 'var(--ados-steel-300)' },
  };
  // "Federado" reads as active by default (mouse-over look); hovering another
  // panel moves that highlight there until the pointer leaves the band.
  const activeIndex = hovered === null ? PANELS.length - 1 : hovered;

  return (
    <section ref={ref} style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ ...heroWrap, padding: '64px var(--pad-x) 8px' }}>
        <div className="eyebrow" style={{ textShadow: '0 1px 6px rgba(0,0,0,0.7)' }}>IFC 4 · Modelo federado</div>
      </div>

      <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', padding: '24px var(--pad-x) 88px' }}>
        {/* drafting baseline — disciplines federate onto this line */}
        <div aria-hidden="true" style={{
          position: 'absolute', left: '50%', top: '50%', width: 'min(640px, 86%)', height: 1,
          background: 'var(--border-strong)', transform: 'translate(-50%, -50%)', zIndex: 0,
        }} />

        <div style={{ position: 'relative', zIndex: 1, display: 'flex' }}>
          {PANELS.map((p, i) => {
            const isActive = activeIndex === i;
            const c = TONE[p.tone];
            return (
              <div
                key={p.label}
                onMouseEnter={() => setHovered(i)}
                onMouseLeave={() => setHovered(null)}
                style={{
                  marginLeft: i === 0 ? 0 : 'clamp(-20px, -1.5vw, -8px)',
                  opacity: shown ? 1 : 0,
                  transform: shown
                    ? `translateY(${isActive ? -8 : 0}px)`
                    : `translateX(${p.from}px)`,
                  transition: `opacity 560ms var(--ease-out) ${i * 130}ms, transform ${shown ? '220ms var(--ease-out)' : `560ms var(--ease-out) ${i * 130}ms`}`,
                  zIndex: isActive ? 2 : 1,
                }}
              >
                <div className="w-fed-panel" style={{
                  transform: 'skewX(-24deg)',
                  background: c.bg,
                  border: `1px solid ${isActive ? c.activeBorder : 'var(--border-strong)'}`,
                  boxShadow: isActive ? '0 18px 40px rgba(10,14,18,0.4)' : 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)',
                }}>
                  <div style={{ transform: 'skewX(24deg)', textAlign: 'center', color: c.fg, padding: '0 14px' }}>
                    <div className="w-fed-detail" style={{ fontFamily: 'var(--font-mono)', fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.1em', opacity: 0.7 }}>{p.detail}</div>
                    <div className="w-fed-label" style={{ fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.02em', marginTop: 5 }}>{p.label}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// Small amber checkmark used in the Proceso card checklists.
function CheckItem({ children }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
      <span style={{
        width: 16, height: 16, borderRadius: '50%', background: 'rgba(12,15,18,0.7)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none',
      }}>
        <svg width="9" height="9" viewBox="0 0 12 12" fill="none">
          <path d="M2.5 6.2l2.3 2.3 4.7-5" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span style={{ fontSize: 13, color: '#FFFFFF', textShadow: '0 1px 4px rgba(0,0,0,0.7)' }}>{children}</span>
    </div>
  );
}

// ===== PROCESO — part of the Inicio region =====
function ProcessSection({ t = {} }) {
  const { SectionLabel } = window;
  const revealOff = t.scrollReveal === false || prefersReduced();
  const steps = [
    { n: '01', t: 'Modelamos', d: 'Cada disciplina en BIM, con datos asociados a cada elemento.',
      img: './assets/img/proceso/proceso1.webp',
      checks: ['Geometría + datos por elemento', 'LOD definido por disciplina'] },
    { n: '02', t: 'Coordinamos', d: 'Interferencias resueltas y equipos de todas las disciplinas sobre un modelo federado.',
      img: './assets/img/proceso/proceso2.webp',
      checks: ['Detección de interferencias', 'Equipos sincronizados'] },
    { n: '03', t: 'Gestionamos', d: 'Información centralizada: versiones, responsables y estado de cada entrega.',
      img: './assets/img/proceso/proceso3.webp',
      checks: ['Versionado y responsables', 'Estado de cada entrega'] },
    { n: '04', t: 'Entregamos', d: 'Documentación, cantidades y archivos IFC listos para construcción.',
      img: './assets/img/proceso/proceso4.webp',
      checks: ['Planos y cantidades IFC', 'Modelo listo para obra'] },
  ];
  return (
    <section style={{ position: 'relative', background: 'var(--bg-deep)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(ellipse 55% 70% at 15% 50%, rgba(26,33,41,0.90) 0%, transparent 70%)' }} />
      <div style={{ ...heroWrap, padding: 'clamp(56px, 9vw, 80px) var(--pad-x)', position: 'relative', zIndex: 1 }}>
        <Reveal off={revealOff}><SectionLabel n="03">Proceso</SectionLabel>
        <h2 style={{ fontSize: 'clamp(28px, 4vw, 34px)', letterSpacing: '-0.03em', margin: '0 0 44px', maxWidth: 520 }}>BIM desde el primer día</h2></Reveal>
        <div className="w-grid-4">
          {steps.map((s, i) => (
            <Reveal key={s.n} off={revealOff} delay={i * 90} style={{ height: '100%' }}>
              <Card interactive padding={0} style={{ height: 420, position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${s.img})`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
                {/* scrim inferior más fuerte: las imágenes de proceso vienen sobre fondo blanco */}
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(12,15,18,0) 0%, rgba(12,15,18,0) 38%, rgba(12,15,18,0.62) 62%, rgba(12,15,18,0.94) 88%, rgba(12,15,18,0.98) 100%)' }} />
                <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 24 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: '0.75rem', letterSpacing: '0.08em', color: 'var(--accent)', textShadow: '0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.8)', marginBottom: 12 }}>{s.n}</span>
                  <h3 style={{ fontSize: 19, margin: '0 0 8px', color: '#FFFFFF', textShadow: '0 1px 3px rgba(0,0,0,0.9), 0 0 12px rgba(0,0,0,0.8)' }}>{s.t}</h3>
                  <p style={{ margin: 0, fontSize: 14, color: '#FFFFFF', lineHeight: 1.55, textShadow: '0 1px 3px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.75)' }}>{s.d}</p>
                  <div>
                    {s.checks.map((c) => <CheckItem key={c}>{c}</CheckItem>)}
                  </div>
                </div>
              </Card>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ===== CTA BAND — transitions into Contacto =====
function CTASection({ onNavigate }) {
  return (
    <section style={{ background: 'var(--bg-deep)' }}>
    <div style={{ ...heroWrap, padding: 'clamp(56px, 9vw, 88px) var(--pad-x)' }}>
      <div style={{ background: 'var(--accent)', borderRadius: 'var(--radius-ui)', padding: 'clamp(32px, 5vw, 56px)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
        <div>
          <h2 style={{ color: 'var(--on-accent)', fontSize: 'clamp(28px, 4.5vw, 36px)', letterSpacing: '-0.03em', margin: '0 0 10px', maxWidth: 520 }}>¿Tiene un proyecto en mente?</h2>
          <p style={{ color: 'rgba(34,43,53,0.78)', fontSize: 17, margin: 0, maxWidth: 460 }}>Le mostramos el modelo antes de la primera línea de obra.</p>
        </div>
        <Button variant="light" size="lg" onClick={() => onNavigate('contacto')}>Solicitar consultoría</Button>
      </div>
    </div>
    </section>
  );
}

// ===== CIFRAS — franja de credibilidad. DATOS DE MUESTRA: reemplazar con
// los números reales de ADOS cuando estén consolidados. =====
function StatsBand({ t = {} }) {
  const revealOff = t.scrollReveal === false || prefersReduced();
  const stats = window.ADOS_STATS || [];
  return (
    <section style={{ background: 'var(--bg-deep)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ ...heroWrap, padding: 'clamp(40px, 7vw, 64px) var(--pad-x)' }}>
        <Reveal off={revealOff}>
          <div className="w-stats-grid" style={{ background: 'var(--border)', border: '1px solid var(--border)' }}>
            {stats.map((s) => (
              <div key={s.label} style={{ background: 'var(--bg-deep)', padding: 'clamp(20px, 3vw, 32px) clamp(16px, 2.5vw, 28px)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(30px, 4vw, 44px)', letterSpacing: '-0.03em', color: 'var(--text)', lineHeight: 1 }}>
                  {s.value}<span style={{ color: 'var(--accent)' }}>{s.suffix || ''}</span>
                </div>
                <div style={{ marginTop: 10, fontFamily: 'var(--font-mono)', fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.09em', color: 'var(--text-muted)', lineHeight: 1.5 }}>{s.label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ===== COMPARADOR — "Del plano al modelo": misma vista, mitad estilo plano
// 2D (filtro blueprint) y mitad render BIM, con manija arrastrable. =====
function CompareSection({ t = {} }) {
  const { SectionLabel } = window;
  const revealOff = t.scrollReveal === false || prefersReduced();
  const [pos, setPos] = React.useState(52); // % desde la izquierda
  const boxRef = React.useRef(null);
  const dragging = React.useRef(false);
  // Ambas imágenes son el mismo corte del tanque en un lienzo 1920×1080:
  // el plano se escaló/alineó (ffmpeg) para que los muros coincidan con el render.
  const imgModelo = './assets/img/compare-modelo.webp';
  const imgPlano = './assets/img/compare-plano.webp';

  const setFromEvent = (clientX) => {
    const box = boxRef.current;
    if (!box) return;
    const r = box.getBoundingClientRect();
    setPos(Math.min(96, Math.max(4, ((clientX - r.left) / r.width) * 100)));
  };
  const onDown = (e) => { dragging.current = true; setFromEvent(e.clientX); e.currentTarget.setPointerCapture && e.currentTarget.setPointerCapture(e.pointerId); };
  const onMove = (e) => { if (dragging.current) setFromEvent(e.clientX); };
  const onUp = () => { dragging.current = false; };

  return (
    <section style={{ background: 'var(--bg-deep)', borderBottom: '1px solid var(--border)' }}>
      <div style={{ ...heroWrap, padding: 'clamp(56px, 9vw, 80px) var(--pad-x)' }}>
        <Reveal off={revealOff}>
          <SectionLabel n="04">Del plano al modelo</SectionLabel>
          <h2 style={{ fontSize: 'clamp(28px, 4vw, 34px)', letterSpacing: '-0.03em', margin: '0 0 12px', maxWidth: 560 }}>La diferencia entre dibujar y modelar</h2>
          <p style={{ color: 'var(--text-muted)', fontSize: 16, lineHeight: 1.6, maxWidth: 520, margin: '0 0 36px' }}>
            Arrastre la línea: a la izquierda, la documentación tradicional; a la derecha,
            el modelo BIM del que se deriva. Un solo origen de información, cero versiones sueltas.
          </p>
        </Reveal>
        <Reveal off={revealOff} delay={120}>
          <div
            ref={boxRef}
            className="w-compare"
            onPointerDown={onDown} onPointerMove={onMove} onPointerUp={onUp} onPointerCancel={onUp}
            role="slider" aria-label="Comparar plano y modelo BIM" aria-valuemin={0} aria-valuemax={100} aria-valuenow={Math.round(pos)}
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === 'ArrowLeft') setPos((v) => Math.max(4, v - 4));
              if (e.key === 'ArrowRight') setPos((v) => Math.min(96, v + 4));
            }}
            style={{ height: 'clamp(280px, 46vw, 560px)' }}
          >
            {/* capa base: render BIM */}
            <img src={imgModelo} alt="Modelo BIM" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
            {/* capa superior: plano 2D real del mismo corte, recortado con clip-path */}
            <img src={imgPlano} alt="" aria-hidden="true" style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover',
              clipPath: `inset(0 ${100 - pos}% 0 0)`,
            }} />
            <span className="w-compare-tag" style={{ left: 14 }}>Plano 2D</span>
            <span className="w-compare-tag" style={{ right: 14 }}>Modelo BIM</span>
            <div className="w-compare-handle" style={{ left: `${pos}%` }}>
              <div className="w-compare-knob">
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M4 1L1 5l3 4M10 1l3 4-3 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ===== NOSOTROS — quiénes somos, equipo y confianza =====
function AboutSection({ t = {} }) {
  const { SectionLabel } = window;
  const revealOff = t.scrollReveal === false || prefersReduced();
  const team = window.ADOS_TEAM || [];
  const allies = window.ADOS_ALLIES || [];

  return (
    <section style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--border)' }}>
      <div style={{ ...heroWrap, padding: 'clamp(56px, 9vw, 88px) var(--pad-x)' }}>
        <Reveal off={revealOff}>
          <SectionLabel n="06">Nosotros</SectionLabel>
        </Reveal>

        <div className="w-split" style={{ gap: 56, marginBottom: 'clamp(44px, 6vw, 64px)' }}>
          <Reveal off={revealOff}>
            <h2 style={{ fontSize: 'clamp(28px, 4vw, 38px)', letterSpacing: '-0.03em', margin: '0 0 18px' }}>Un equipo multidisciplinario, un solo modelo</h2>
          </Reveal>
          <Reveal off={revealOff} delay={100}>
            <p style={{ color: 'var(--text-muted)', fontSize: 16, lineHeight: 1.7, margin: '0 0 16px' }}>
              En <strong style={{ color: 'var(--text)' }}>ADOS</strong> somos un equipo comprometido con la innovación y la eficiencia.
              Nuestra experiencia en diseño, ingeniería y metodología BIM nos permite ofrecer
              soluciones integrales desde la etapa conceptual hasta la entrega final del proyecto.
            </p>
            <p style={{ color: 'var(--text-muted)', fontSize: 16, lineHeight: 1.7, margin: 0 }}>
              Nuestra misión: servicios técnicos con altos estándares de calidad, que respondan a las
              necesidades reales del cliente y a las exigencias del contexto constructivo moderno.
            </p>
          </Reveal>
        </div>

        {/* equipo */}
        <div className="w-team-grid">
          {team.map((m, i) => (
            <Reveal key={m.name} off={revealOff} delay={i * 110}>
              <div style={{
                border: '1px solid var(--border)', borderRadius: 'var(--radius-ui)',
                background: 'linear-gradient(180deg, var(--surface) 0%, var(--bg-deep) 130%)',
                padding: 'clamp(22px, 3vw, 30px)', height: '100%',
              }}>
                {/* monograma — cita la geometría del cubo (skew -24°) */}
                <div style={{
                  width: 58, height: 44, transform: 'skewX(-24deg)', marginLeft: 8, marginBottom: 20,
                  background: i === 1 ? 'var(--accent)' : 'var(--ados-steel)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <span style={{
                    transform: 'skewX(24deg)', fontFamily: 'var(--font-display)', fontWeight: 700,
                    fontSize: 17, letterSpacing: '0.02em',
                    color: i === 1 ? 'var(--on-accent)' : '#fff',
                  }}>{m.initials}</span>
                </div>
                <h3 style={{ fontSize: 19, letterSpacing: '-0.015em', margin: '0 0 6px' }}>{m.name}</h3>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.09em', color: 'var(--accent)', marginBottom: 12 }}>{m.title}</div>
                <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 14, lineHeight: 1.6 }}>{m.bio}</p>
              </div>
            </Reveal>
          ))}
        </div>

        {/* confianza — DATOS DE MUESTRA: nombres de consorcios/aliados por confirmar */}
        <Reveal off={revealOff} delay={140}>
          <div style={{ marginTop: 'clamp(44px, 6vw, 64px)', paddingTop: 32, borderTop: '1px solid var(--border)' }}>
            <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-faint)', marginBottom: 20 }}>Hemos trabajado con</div>
            <div className="w-trust-row">
              {allies.map((a) => (
                <span key={a} style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15, letterSpacing: '0.01em', color: 'var(--text-muted)', opacity: 0.85 }}>{a}</span>
              ))}
            </div>
            <blockquote style={{ margin: '32px 0 0', paddingLeft: 20, borderLeft: '2px solid var(--accent)', maxWidth: 640 }}>
              <p style={{ margin: '0 0 10px', fontSize: 16, lineHeight: 1.7, color: 'var(--text)', fontStyle: 'italic' }}>
                “El modelo federado de ADOS nos permitió resolver las interferencias antes de fundir la
                primera placa. La obra avanzó sin reprocesos.”
              </p>
              <cite style={{ fontStyle: 'normal', fontFamily: 'var(--font-mono)', fontSize: '0.68rem', textTransform: 'uppercase', letterSpacing: '0.09em', color: 'var(--text-faint)' }}>
                Director de obra · Consorcio aliado — testimonio de muestra
              </cite>
            </blockquote>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ===== WHATSAPP — botón flotante =====
function WhatsAppFab() {
  const phone = '573102335153';
  const msg = encodeURIComponent('Hola ADOS, quiero una consultoría BIM para mi proyecto.');
  return (
    <a className="w-whatsapp" href={`https://wa.me/${phone}?text=${msg}`}
      target="_blank" rel="noopener noreferrer" aria-label="Escribir por WhatsApp">
      <svg width="28" height="28" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
        <path d="M16.02 5.33c-5.87 0-10.64 4.77-10.64 10.64 0 1.88.49 3.71 1.43 5.33L5.3 26.7l5.53-1.45a10.6 10.6 0 0 0 5.18 1.32h.01c5.86 0 10.63-4.77 10.63-10.64 0-2.84-1.1-5.51-3.11-7.52a10.57 10.57 0 0 0-7.52-3.08zm0 19.44h-.01a8.8 8.8 0 0 1-4.49-1.23l-.32-.19-3.28.86.88-3.2-.21-.33a8.77 8.77 0 0 1-1.35-4.7c0-4.87 3.97-8.84 8.85-8.84 2.36 0 4.58.92 6.25 2.59a8.78 8.78 0 0 1 2.59 6.26c0 4.88-3.97 8.84-8.84 8.84zm4.85-6.62c-.27-.13-1.57-.78-1.82-.87-.24-.09-.42-.13-.6.13-.18.27-.69.87-.85 1.05-.16.18-.31.2-.58.07-.27-.13-1.12-.41-2.14-1.32-.79-.7-1.32-1.57-1.48-1.84-.15-.27-.02-.41.12-.54.12-.12.27-.31.4-.47.13-.16.18-.27.27-.44.09-.18.04-.33-.02-.47-.07-.13-.6-1.44-.82-1.98-.21-.52-.43-.45-.6-.45h-.51c-.18 0-.47.07-.71.33-.24.27-.93.91-.93 2.22s.96 2.58 1.09 2.76c.13.18 1.88 2.87 4.55 4.02.64.27 1.13.44 1.52.56.64.2 1.22.17 1.68.11.51-.08 1.57-.64 1.79-1.26.22-.62.22-1.15.16-1.26-.07-.11-.24-.18-.51-.31z"/>
      </svg>
    </a>
  );
}

window.HeroSection = HeroSection;
window.FederationBand = FederationBand;
window.ProcessSection = ProcessSection;
window.CTASection = CTASection;
window.StatsBand = StatsBand;
window.CompareSection = CompareSection;
window.AboutSection = AboutSection;
window.WhatsAppFab = WhatsAppFab;