// sections.jsx — Pantone Print Lab · todas las secciones
const { useState, useEffect, useRef } = React;

/* ════════════════════════ DATOS ════════════════════════ */

const BRAND_PANTONES = [
  { code: '2768', label: 'Dark Blue Horizon', hex: '050F4B', rgb: '05 · 15 · 75',  cmyk: '100 · 90 · 13 · 71', color: '#050F4B' },
  { code: '2175', label: 'Blue Horizon',      hex: '005FFF', rgb: '00 · 95 · 255', cmyk: '99 · 47 · 00 · 00',  color: '#005FFF' },
  { code: '299',  label: 'Light Blue',        hex: '00C8FF', rgb: '00 · 200 · 255',cmyk: '86 · 08 · 00 · 00',  color: '#00C8FF' },
  { code: '2706', label: 'White Blue',        hex: 'D2E1F0', rgb: '210 · 225 · 240',cmyk: '19 · 10 · 00 · 00',  color: '#D2E1F0' },
];

/* ════════════════════════ LOGO ════════════════════════ */

function LogoMark({ size = 32, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="10 18 100 110" fill={color}>
      <path d="M55.42,42.32l26.09,15.06v-6.47c0-2.06-1.11-3.99-2.9-5.02l-25.47-14.7c-1.55-.9-3.48-.9-5.03,0l-26.15,15.1c-1.36.79-2.21,2.25-2.21,3.83v7.26l26.09-15.06c1.45-.84,3.11-1.28,4.79-1.28s3.34.44,4.79,1.28"/>
      <path d="M33.05,63.85l26.09-15.05-5.6-3.23c-.88-.51-1.88-.77-2.9-.77s-2.02.27-2.9.77l-25.47,14.7c-1.55.9-2.52,2.57-2.52,4.36v30.2c0,1.57.84,3.04,2.2,3.83l6.29,3.63v-30.12c0-3.41,1.85-6.59,4.8-8.3"/>
      <path d="M93.74,72.74v-29.41c0-1.79-.97-3.46-2.53-4.36l-26.16-15.09c-1.36-.79-3.06-.79-4.42,0l-6.29,3.63,26.09,15.05c2.96,1.71,4.79,4.89,4.8,8.3v30.12s5.61-3.23,5.61-3.23c1.79-1.03,2.9-2.96,2.9-5.02"/>
      <path d="M103.76,98.84c1.36-.79,2.21-2.25,2.21-3.83v-7.26l-26.09,15.06c-2.96,1.71-6.63,1.71-9.59,0l-26.09-15.06v6.47c0,2.06,1.11,3.99,2.9,5.02l25.47,14.7c1.55.9,3.48.9,5.03,0l26.15-15.1Z"/>
      <path d="M77.97,99.57l25.47-14.7c1.55-.9,2.52-2.57,2.52-4.36v-30.2c0-1.57-.84-3.04-2.2-3.83l-6.29-3.63v30.12c0,3.41-1.85,6.59-4.8,8.3l-26.09,15.05,5.6,3.24c1.79,1.03,4.01,1.03,5.8,0"/>
      <path d="M31.98,72.39v29.41c0,1.79.97,3.46,2.53,4.36l26.16,15.09c1.36.79,3.06.79,4.42,0l6.29-3.63-26.09-15.05c-2.96-1.71-4.79-4.89-4.8-8.3v-30.12s-5.61,3.23-5.61,3.23c-1.79,1.03-2.9,2.96-2.9,5.02"/>
    </svg>
  );
}

function Logo({ light = false }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center',
    }}>
      <img src="assets/logo-color.png" alt="Role Machine"
        style={{
          height: 62, width: 'auto', display: 'block',
          filter: light ? 'brightness(0) invert(1)' : 'none',
        }}/>
    </span>
  );
}

/* ════════════════════════ HEADER ════════════════════════ */

function Header({ onJump }) {
  const [open, setOpen] = useState(false);
  const links = [
    ['Quiénes Somos', 'quienes-somos', false],
    ['Impresión', 'impresion', false],
    ['Promocionales', 'promocionales', false],
    ['Gran Formato', 'gran-formato', false],
    ['Blog', 'blog', 'external'],
    ['Contacto', 'contacto', 'external'],
  ];

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250, 252, 254, 0.85)',
      backdropFilter: 'blur(16px) saturate(160%)',
      WebkitBackdropFilter: 'blur(16px) saturate(160%)',
      borderBottom: '1px solid var(--line)',
    }}>
      {/* Top utility bar */}
      <div className="top-bar" style={{
        background: 'var(--navy)',
        color: '#fff',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
      }}>
        <div className="wrap" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          height: 36, gap: 16,
        }}>
          {/* LEFT: phones */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, flexShrink: 0 }}>
            <a href="tel:+59345014555" style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,0.9)',
              letterSpacing: '0.02em', fontWeight: 500,
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
              </svg>
              045 014 555
            </a>
            <span style={{ width: 1, height: 14, background: 'rgba(255,255,255,0.2)' }}/>
            <button type="button" onClick={() => window.openWAQuote && window.openWAQuote()} style={{
              appearance: 'none', border: 'none', background: 'transparent', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 6,
              fontFamily: 'var(--mono)', fontSize: 12, color: 'rgba(255,255,255,0.9)',
              letterSpacing: '0.02em', fontWeight: 500, padding: 0,
            }}>
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1s-1.3-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.3-.1-.5-.2zM12 2A10 10 0 0 0 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              096 286 5530
            </button>
          </div>

          {/* CENTER: animated slogan */}
          <div className="top-slogan" style={{
            flex: 1, overflow: 'hidden', minWidth: 0,
            position: 'relative',
            mask: 'linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%)',
            WebkitMask: 'linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%)',
          }}>
            <div style={{
              display: 'inline-flex',
              whiteSpace: 'nowrap',
              animation: 'topSloganScroll 48s linear infinite',
              paddingLeft: '100%',
            }}>
              {(() => {
                const phrases = [
                  'tu marca se imprime mejor en role',
                  'Impresión Offset y Digital',
                  'Impresión en alto relieve',
                  'Tecnología UV',
                  'Gran formato y promocionales',
                ];
                // Duplicado 2x para loop infinito sin cortes
                const loop = [...phrases, ...phrases];
                return loop.map((phrase, i) => (
                  <span key={i} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 28,
                    paddingRight: 28,
                  }}>
                    <span style={{
                      fontFamily: 'var(--display)',
                      fontWeight: 500,
                      fontSize: 13,
                      color: 'rgba(255,255,255,0.92)',
                      letterSpacing: '0.005em',
                    }}>
                      {phrase}
                    </span>
                    <span style={{ display: 'inline-flex', alignItems: 'center' }}>
                      <HexIcon size={14} color="var(--cyan)"/>
                    </span>
                  </span>
                ));
              })()}
            </div>
          </div>

          {/* RIGHT: socials */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 4, flexShrink: 0 }}>
            {[
              { kind: 'instagram', href: 'https://instagram.com/rolemachine', label: 'Instagram' },
              { kind: 'linkedin',  href: 'https://linkedin.com/company/rolemachine', label: 'LinkedIn' },
              { kind: 'tiktok',    href: 'https://tiktok.com/@rolemachine',   label: 'TikTok' },
            ].map(s => (
              <a key={s.kind} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}
                className="top-social"
                style={{
                  width: 28, height: 28, borderRadius: '50%',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', opacity: 0.85,
                  transition: 'background 0.2s ease, opacity 0.2s ease',
                }}>
                <SocialIcon kind={s.kind}/>
              </a>
            ))}
          </div>
        </div>
      </div>

      <div className="wrap" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 80,
      }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); onJump('top'); }}>
          <Logo/>
        </a>

        {/* Desktop nav */}
        <nav className="nav-desktop" style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          {links.map(([label, id, external]) => external === 'external' ? (
            <a key={id} href={id === 'blog' ? 'blog.html' : 'contacto.html'} className="nav-link"
              style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              {label}
              <svg width="11" height="11" viewBox="0 0 12 12" fill="none" style={{ opacity: 0.5 }}>
                <path d="M4 8 L8 4 M5 4 L8 4 L8 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </a>
          ) : (
            <a key={id} href={`#${id}`} onClick={(e) => { e.preventDefault(); onJump(id); }}
              className="nav-link">
              {label}
            </a>
          ))}
        </nav>

        <button type="button" className="btn btn-primary nav-cta" style={{ padding: '10px 20px', fontSize: 13 }}
          onClick={() => window.openWAQuote && window.openWAQuote()}>
          Cotizar ahora
          <span className="arrow">→</span>
        </button>

        {/* Mobile hamburger */}
        <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="Menú"
          style={{
            appearance: 'none', border: 'none', background: 'transparent',
            width: 44, height: 44, padding: 0, cursor: 'pointer',
            alignItems: 'center', justifyContent: 'center',
          }}>
          <span style={{ position: 'relative', width: 22, height: 18, display: 'block' }}>
            <span style={{
              position: 'absolute', top: open ? 8 : 0, left: 0, width: '100%', height: 2,
              background: 'var(--ink)', borderRadius: 2,
              transform: open ? 'rotate(45deg)' : 'none',
              transition: 'all 0.25s ease',
            }}/>
            <span style={{
              position: 'absolute', top: 8, left: 0, width: '100%', height: 2,
              background: 'var(--ink)', borderRadius: 2,
              opacity: open ? 0 : 1,
              transition: 'opacity 0.18s ease',
            }}/>
            <span style={{
              position: 'absolute', top: open ? 8 : 16, left: 0, width: '100%', height: 2,
              background: 'var(--ink)', borderRadius: 2,
              transform: open ? 'rotate(-45deg)' : 'none',
              transition: 'all 0.25s ease',
            }}/>
          </span>
        </button>
      </div>

      {/* Mobile overlay */}
      <div style={{
        position: 'fixed', top: 80, left: 0, right: 0,
        background: 'rgba(250, 252, 254, 0.98)',
        backdropFilter: 'blur(16px) saturate(160%)',
        WebkitBackdropFilter: 'blur(16px) saturate(160%)',
        borderBottom: '1px solid var(--line)',
        padding: 24,
        display: open ? 'flex' : 'none',
        flexDirection: 'column', gap: 4,
        maxHeight: 'calc(100vh - 80px)',
        overflowY: 'auto',
        zIndex: 49,
      }}>
        {links.map(([label, id, external]) => (
          <a key={id}
            href={external === 'external' ? (id === 'blog' ? 'blog.html' : 'contacto.html') : `#${id}`}
            onClick={(e) => {
              if (external !== 'external') {
                e.preventDefault();
                setOpen(false);
                onJump(id);
              } else {
                setOpen(false);
              }
            }}
            style={{
              padding: '14px 8px',
              fontFamily: 'var(--sans)', fontSize: 18, fontWeight: 700,
              color: 'var(--ink)',
              borderBottom: '1px solid var(--line)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
            {label}
            {external === 'external' && (
              <svg width="14" height="14" viewBox="0 0 12 12" fill="none" style={{ opacity: 0.5 }}>
                <path d="M4 8 L8 4 M5 4 L8 4 L8 7" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            )}
          </a>
        ))}
        <button type="button" className="btn btn-primary" style={{ marginTop: 20, justifyContent: 'center' }}
          onClick={() => { setOpen(false); window.openWAQuote && window.openWAQuote(); }}>
          Cotizar ahora
          <span className="arrow">→</span>
        </button>
      </div>
    </header>
  );
}

/* ════════════════════════ HERO ════════════════════════ */

function Hero({ onJump }) {
  const slides = [
    {
      img: 'assets/hero-1.png',
      headline: 'Imprimimos',
      italic: 'ideas',
      tail: 'con propósito.',
      sub: 'Empaques, papelería, gran formato y merchandising corporativo.',
    },
    {
      img: 'assets/hero-3.png',
      headline: 'Empaques que',
      italic: 'cuentan',
      tail: 'tu historia.',
      sub: 'Cajas, bolsas, etiquetas y papel de seda — troquelados y personalizados para tu marca.',
    },
    {
      img: 'assets/hero-2.png',
      headline: 'Identidad de marca',
      italic: 'para',
      tail: 'restaurantes.',
      sub: 'Cartas, individuales, porta-cubiertos y posavasos. Piezas pensadas para la mesa.',
    },
  ];
  const [idx, setIdx] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setIdx(i => (i + 1) % slides.length), 5500);
    return () => clearInterval(id);
  }, []);

  const s = slides[idx];

  return (
    <section id="top" style={{
      position: 'relative',
      minHeight: '92vh',
      background: 'linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%)',
      color: '#fff',
      overflow: 'hidden',
    }}>
      {/* Imagen de productos full bleed */}
      <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        {slides.map((sl, i) => (
          <img key={i} src={sl.img} alt=""
            style={{
              position: 'absolute',
              top: '50%', left: '50%',
              transform: `translate(-50%, -50%) scale(${idx === i ? 1 : 1.05})`,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              objectPosition: 'center',
              opacity: idx === i ? 1 : 0,
              transition: 'opacity 1.2s ease, transform 7s ease',
              pointerEvents: 'none',
            }}/>
        ))}
        {/* Overlay para legibilidad del texto */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(95deg, rgba(5,15,75,0.78) 0%, rgba(0,95,255,0.32) 45%, rgba(5,15,75,0.10) 100%)',
          pointerEvents: 'none',
        }}/>
        {/* Bottom fade para stats */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, height: '38%',
          background: 'linear-gradient(to top, rgba(5,15,75,0.55) 0%, transparent 100%)',
          pointerEvents: 'none',
        }}/>
      </div>

      {/* Contenido encima */}
      <div className="wrap" style={{
        position: 'relative', zIndex: 2,
        minHeight: '92vh',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        paddingTop: 'clamp(40px, 6vw, 80px)',
        paddingBottom: 'clamp(32px, 4vw, 56px)',
      }}>
        {/* TOP */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span className="eyebrow" style={{ color: '#fff' }}>
            <span className="dot pulse-dot" style={{ background: 'var(--cyan)' }}></span>
            Imprenta · Guayaquil
          </span>
          <span className="tech-label" style={{ color: 'rgba(255,255,255,0.7)' }}>
            {String(idx + 1).padStart(2, '0')} / {String(slides.length).padStart(2, '0')}
          </span>
        </div>

        {/* MIDDLE: headline */}
        <div style={{ maxWidth: '85%', marginTop: 'clamp(20px, 4vw, 40px)' }}>
          <h1 key={idx} className="display" style={{
            color: '#fff',
            fontSize: 'clamp(54px, 9vw, 144px)',
            lineHeight: 0.95,
            animation: 'heroIn 0.8s cubic-bezier(.22,.9,.3,1.1) forwards',
          }}>
            {s.headline}<br/>
            <span className="italic" style={{ color: 'var(--cyan)' }}>{s.italic}</span> {s.tail}
          </h1>
          <p key={'p' + idx} style={{
            fontFamily: 'var(--display)', fontWeight: 500,
            fontSize: 'clamp(17px, 1.7vw, 22px)',
            lineHeight: 1.4, letterSpacing: '-0.015em',
            maxWidth: 560, marginTop: 'clamp(20px, 2.5vw, 32px)',
            color: 'rgba(255,255,255,0.92)',
            animation: 'heroIn 0.9s cubic-bezier(.22,.9,.3,1.1) 0.12s forwards',
            opacity: 0,
          }}>
            {s.sub}
          </p>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginTop: 28 }}>
            <button type="button" className="btn btn-on-dark" onClick={() => window.openWAQuote && window.openWAQuote()}>
              Cotizar por WhatsApp
              <span className="arrow">→</span>
            </button>
            <button className="btn btn-light" onClick={() => onJump('impresion')}>Ver impresión</button>
          </div>
        </div>

        {/* BOTTOM: stats + slider dots */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
          <div style={{ display: 'flex', gap: 'clamp(28px, 4vw, 56px)', flexWrap: 'wrap' }}>
            {[
              { n: '15+', l: 'Años' },
              { n: '50+', l: 'Tiraje mínimo' },
              { n: '24h', l: 'Cotización' },
            ].map(st => (
              <div key={st.l} style={{ display: 'flex', flexDirection: 'column' }}>
                <span style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 'clamp(36px, 4vw, 56px)', color: 'var(--cyan)', lineHeight: 1, letterSpacing: '-0.03em' }}>
                  {st.n}
                </span>
                <span className="tech-label" style={{ color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>{st.l}</span>
              </div>
            ))}
          </div>

          {/* Slider dots */}
          <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
            {slides.map((_, i) => (
              <button key={i} onClick={() => setIdx(i)}
                aria-label={`Slide ${i + 1}`}
                style={{
                  appearance: 'none', border: 'none', cursor: 'pointer',
                  width: idx === i ? 44 : 14, height: 6, borderRadius: 999,
                  background: idx === i ? 'var(--cyan)' : 'rgba(255,255,255,0.4)',
                  transition: 'all 0.3s ease',
                  padding: 0,
                }}/>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes heroIn {
          0%   { opacity: 0; transform: translateY(20px); }
          100% { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

function ArrowDown() {
  return (
    <svg width="56" height="56" viewBox="0 0 56 56" style={{ flexShrink: 0, marginBottom: 6 }}>
      <circle cx="28" cy="28" r="26" fill="var(--blue)"/>
      <path d="M28 16 V40 M19 31 L28 40 L37 31" stroke="#fff" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function BrandPantoneStrip() {
  return (
    <div style={{ marginTop: 'clamp(24px, 3vw, 40px)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 14 }}>
        <span className="tech-label">PALETA OFICIAL · 4 PANTONES</span>
        <span className="tech-label">FIG. 01</span>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 'clamp(8px, 1.5vw, 20px)',
      }}>
        {BRAND_PANTONES.map((p, i) => <PantoneCard key={p.code} {...p} delay={i * 0.08}/>)}
      </div>
    </div>
  );
}

function PantoneCard({ code, label, hex, rgb, cmyk, color, delay = 0, dark = false }) {
  return (
    <div className="pantone-card" style={{ animation: `fadeUp 0.7s ease ${delay}s both` }}>
      <div className="swatch" style={{ background: color }}>
        {dark && <div className="crop-corner tl" style={{ color: 'rgba(255,255,255,0.4)' }}/>}
      </div>
      <div className="label" style={{ color: dark ? '#fff' : 'var(--ink)' }}>
        PANTONE<sup>®</sup>
      </div>
      <div className="name" style={{ color: dark ? '#fff' : 'var(--ink)' }}>{label}</div>
      <div className="specs" style={{ color: dark ? 'rgba(255,255,255,0.6)' : undefined }}>
        <div><b style={{ color: dark ? '#fff' : undefined }}>HEX</b> {hex}</div>
        <div><b style={{ color: dark ? '#fff' : undefined }}>RGB</b> {rgb}</div>
        <div><b style={{ color: dark ? '#fff' : undefined }}>PANTONE</b> {code}C</div>
        <div><b style={{ color: dark ? '#fff' : undefined }}>CMYK</b> {cmyk}</div>
      </div>
    </div>
  );
}

/* ════════════════════════ TICKER ════════════════════════ */

function HexIcon({ size = 22, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="10 18 100 110" fill={color} style={{ flexShrink: 0 }}>
      <path d="M55.42,42.32l26.09,15.06v-6.47c0-2.06-1.11-3.99-2.9-5.02l-25.47-14.7c-1.55-.9-3.48-.9-5.03,0l-26.15,15.1c-1.36.79-2.21,2.25-2.21,3.83v7.26l26.09-15.06c1.45-.84,3.11-1.28,4.79-1.28s3.34.44,4.79,1.28"/>
      <path d="M33.05,63.85l26.09-15.05-5.6-3.23c-.88-.51-1.88-.77-2.9-.77s-2.02.27-2.9.77l-25.47,14.7c-1.55.9-2.52,2.57-2.52,4.36v30.2c0,1.57.84,3.04,2.2,3.83l6.29,3.63v-30.12c0-3.41,1.85-6.59,4.8-8.3"/>
      <path d="M93.74,72.74v-29.41c0-1.79-.97-3.46-2.53-4.36l-26.16-15.09c-1.36-.79-3.06-.79-4.42,0l-6.29,3.63,26.09,15.05c2.96,1.71,4.79,4.89,4.8,8.3v30.12s5.61-3.23,5.61-3.23c1.79-1.03,2.9-2.96,2.9-5.02"/>
      <path d="M103.76,98.84c1.36-.79,2.21-2.25,2.21-3.83v-7.26l-26.09,15.06c-2.96,1.71-6.63,1.71-9.59,0l-26.09-15.06v6.47c0,2.06,1.11,3.99,2.9,5.02l25.47,14.7c1.55.9,3.48.9,5.03,0l26.15-15.1Z"/>
      <path d="M77.97,99.57l25.47-14.7c1.55-.9,2.52-2.57,2.52-4.36v-30.2c0-1.57-.84-3.04-2.2-3.83l-6.29-3.63v30.12c0,3.41-1.85,6.59-4.8,8.3l-26.09,15.05,5.6,3.24c1.79,1.03,4.01,1.03,5.8,0"/>
      <path d="M31.98,72.39v29.41c0,1.79.97,3.46,2.53,4.36l26.16,15.09c1.36.79,3.06.79,4.42,0l6.29-3.63-26.09-15.05c-2.96-1.71-4.79-4.89-4.8-8.3v-30.12s-5.61,3.23-5.61,3.23c-1.79,1.03-2.9,2.96-2.9,5.02"/>
    </svg>
  );
}

function Ticker() {
  const items = [
    'Offset', 'Digital', 'Gran formato', 'Empaques',
    'Etiquetas', 'Papelería', 'Promocionales',
    'Roll-ups', 'Vinilos', 'Cajas', 'Volantes',
  ];
  return (
    <div className="ticker">
      <div className="ticker-track">
        {[...items, ...items, ...items].map((it, i) => (
          <span key={i}>
            <span className="ticker-hex"><HexIcon size={28} color="var(--cyan)"/></span>
            {it}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ════════════════════════ EDIFICIO HQ ════════════════════════ */

function Edificio() {
  const [tilt, setTilt] = useState({ x: 0, y: 0 });
  const ref = useRef(null);

  const onMove = (e) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    const dx = (e.clientX - cx) / r.width;
    const dy = (e.clientY - cy) / r.height;
    setTilt({ x: dy * -3, y: dx * 5 });
  };
  const reset = () => setTilt({ x: 0, y: 0 });

  return (
    <div style={{ margin: '64px 0 56px', perspective: 1600 }}>
      <div
        ref={ref}
        onMouseMove={onMove}
        onMouseLeave={reset}
        style={{
          position: 'relative',
          borderRadius: 24,
          overflow: 'hidden',
          background: 'var(--navy)',
          minHeight: 'clamp(360px, 50vw, 560px)',
          transform: `rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
          transformStyle: 'preserve-3d',
          transition: 'transform 0.5s cubic-bezier(.22,.9,.3,1)',
          boxShadow: '0 30px 80px rgba(5,15,75,0.30), 0 8px 24px rgba(5,15,75,0.18)',
        }}>
        <img src="assets/edificio.png" alt="Sede Role Machine — Guayaquil"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center 35%',
            display: 'block',
          }}/>
        {/* Gradient overlay */}
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(5,15,75,0) 0%, rgba(5,15,75,0) 45%, rgba(5,15,75,0.85) 100%)',
          pointerEvents: 'none',
        }}/>
        {/* Halo cyan */}
        <div style={{
          position: 'absolute', right: '-8%', top: '-15%',
          width: '40%', height: '60%',
          borderRadius: '50%',
          background: 'radial-gradient(circle, var(--cyan) 0%, transparent 65%)',
          opacity: 0.25, filter: 'blur(40px)', pointerEvents: 'none',
        }}/>

        {/* TOP LEFT badge */}
        <div style={{
          position: 'absolute', top: 24, left: 24, zIndex: 3,
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: 'rgba(255,255,255,0.95)',
          padding: '8px 14px', borderRadius: 999,
          backdropFilter: 'blur(8px)',
          WebkitBackdropFilter: 'blur(8px)',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--blue)' }} className="pulse-dot"/>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--navy)' }}>
            Nuestra sede · Guayaquil
          </span>
        </div>

        {/* BOTTOM */}
        <div style={{
          position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 3,
          padding: 'clamp(28px, 4vw, 48px)',
          display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 24,
          alignItems: 'flex-end',
        }} className="edificio-bottom">
          <h3 style={{
            fontFamily: 'var(--display)', fontWeight: 800,
            fontSize: 'clamp(36px, 5vw, 60px)',
            letterSpacing: '-0.035em', lineHeight: 0.95,
            color: '#fff', margin: 0,
          }}>
            Printing<br/>
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--cyan)' }}>Visions</span>.
          </h3>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, color: 'rgba(255,255,255,0.92)' }}>
            <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', fontWeight: 500 }}>
              Visítanos
            </div>
            <div style={{ fontSize: 14, lineHeight: 1.5 }}>
              Av. de las Américas #904<br/>
              y Carlos Luis Plaza Dañín<br/>
              <span style={{ color: 'var(--cyan)' }}>Guayaquil — Ecuador</span>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .edificio-bottom { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

/* ════════════════════════ SOSTENIBILIDAD ════════════════════════ */

function Sostenibilidad() {
  return (
    <section id="sostenibilidad" style={{
      padding: 'var(--pad-y) 0',
      background: 'linear-gradient(180deg, var(--paper) 0%, #E8F0E2 100%)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', right: '-8%', top: '20%',
        width: '40vw', height: '40vw', maxWidth: 600, maxHeight: 600,
        borderRadius: '50%',
        background: 'radial-gradient(circle, #6BB46B 0%, transparent 65%)',
        opacity: 0.12, pointerEvents: 'none', filter: 'blur(40px)',
      }}/>

      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'center' }} className="contact-grid">
          {/* Card verde */}
          <div style={{
            background: 'linear-gradient(135deg, #2E7D32 0%, #1B5E20 100%)',
            color: '#fff',
            borderRadius: 24,
            padding: 'clamp(36px, 5vw, 64px)',
            position: 'relative', overflow: 'hidden',
            minHeight: 400,
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          }}>
            <svg viewBox="0 0 200 200" style={{
              position: 'absolute', right: -40, bottom: -40,
              width: 280, height: 280, opacity: 0.18,
            }}>
              <path d="M100 20 C 60 60, 30 110, 50 170 C 90 130, 130 100, 180 60 C 160 40, 130 25, 100 20 Z" fill="#fff"/>
              <path d="M100 20 C 100 80, 90 130, 50 170" stroke="#fff" strokeWidth="2" fill="none"/>
            </svg>
            <span style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 14px', borderRadius: 999,
              background: 'rgba(255,255,255,0.18)',
              fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.08em', textTransform: 'uppercase',
              alignSelf: 'flex-start', position: 'relative', zIndex: 2,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#A5D6A7' }}/>
              Compromiso ambiental
            </span>
            <div style={{ position: 'relative', zIndex: 2 }}>
              <div style={{
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 'clamp(48px, 6vw, 84px)',
                lineHeight: 0.95, letterSpacing: '-0.035em',
                color: '#fff',
              }}>
                Crecer<br/>
                <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, color: '#A5D6A7' }}>responsablemente</span>
              </div>
              <div style={{ display: 'flex', gap: 24, marginTop: 32, flexWrap: 'wrap' }}>
                {[
                  { n: '-40%', l: 'Residuos' },
                  { n: '100%', l: 'Tintas eco' },
                  { n: '+15', l: 'Años reciclando' },
                ].map(s => (
                  <div key={s.l}>
                    <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 28, color: '#A5D6A7', lineHeight: 1, letterSpacing: '-0.02em' }}>
                      {s.n}
                    </div>
                    <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)', marginTop: 6, fontWeight: 500 }}>
                      {s.l}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Texto */}
          <div>
            <span className="eyebrow"><span className="dot" style={{ background: '#2E7D32' }}></span>Sostenibilidad</span>
            <h2 className="h2" style={{ marginTop: 18, marginBottom: 24 }}>
              Imprimimos<br/>con <span className="italic">conciencia</span>.
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', margin: 0, marginBottom: 18, maxWidth: 520 }}>
              Integramos procesos responsables que <b>optimizan recursos y reducen el impacto
              ambiental</b>, sin comprometer calidad ni eficiencia.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--muted)', margin: 0, marginBottom: 28, maxWidth: 520 }}>
              Porque hoy, crecer también implica hacerlo de forma inteligente. Cada decisión
              en la imprenta —desde el papel hasta los acabados— se piensa con un futuro
              más limpio en mente.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 14 }}>
              {[
                { icon: '🌱', t: 'Papel reciclado', d: 'Certificado FSC en empaques' },
                { icon: '💧', t: 'Tintas a base de agua', d: 'Sin solventes agresivos' },
                { icon: '♻️', t: 'Reciclaje activo', d: 'Recortes y residuos clasificados' },
                { icon: '⚡', t: 'Energía optimizada', d: 'Equipos de bajo consumo' },
              ].map(c => (
                <div key={c.t} style={{
                  background: '#fff', border: '1px solid var(--line)',
                  borderRadius: 12, padding: 14,
                }}>
                  <div style={{ fontSize: 22, marginBottom: 6 }}>{c.icon}</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{c.t}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2, lineHeight: 1.4 }}>{c.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════ QUIÉNES SOMOS ════════════════════════ */

function QuienesSomos() {
  return (
    <section id="quienes-somos" style={{ padding: 'var(--pad-y) 0' }}>
      <div className="wrap">
        {/* Top: title left + lead right */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 60, alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap' }}>
          <div>
            <span className="eyebrow"><span className="dot"></span>Quiénes somos · EST. 2010</span>
            <h2 className="h2" style={{ marginTop: 18 }}>
              Una imprenta<br/>con <span className="italic">propósito</span>.
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p style={{ fontSize: 17, lineHeight: 1.55, margin: 0, color: 'var(--ink)' }}>
              Somos <b>Role Machine</b> — una imprenta guayaquileña con quince años
              convirtiendo ideas en piezas tangibles. Trabajamos con marcas, agencias
              y emprendedores que buscan calidad y atención al detalle.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.5, margin: 0, color: 'var(--muted)' }}>
              Empaques, gran formato, papelería corporativa, merchandising y soluciones
              para restaurantes. Asesoría en cada etapa: desde el arte hasta el acabado.
            </p>
          </div>
        </div>

        {/* Mini stats grid (compacto) + collage de fotos */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(140px, 1fr))',
          gap: 0,
          borderTop: '1px solid var(--line-2)',
          borderBottom: '1px solid var(--line-2)',
        }}>
          {[
            { n: '15+',   l: 'Años de experiencia',    s: '2010 — 2026' },
            { n: '5k+',   l: 'Proyectos entregados',   s: 'Marcas y agencias' },
            { n: '50+',   l: 'Tiraje mínimo',          s: 'Flexible para makers' },
            { n: '24h',   l: 'Tiempo de cotización',   s: 'Por WhatsApp o email' },
          ].map((s, i) => (
            <div key={s.l} style={{
              padding: '22px 18px',
              borderRight: i < 3 ? '1px solid var(--line-2)' : 'none',
            }}>
              <div style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 'clamp(28px, 3vw, 44px)', lineHeight: 1, letterSpacing: '-0.03em', color: 'var(--blue)' }}>
                {s.n}
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 600, marginTop: 10 }}>{s.l}</div>
              <div className="tech-label" style={{ marginTop: 3, fontSize: 9.5 }}>{s.s}</div>
            </div>
          ))}
        </div>

        {/* Collage de fotos del equipo + edificio */}
        <div style={{ marginTop: 40 }}>
          <div className="tech-label" style={{ marginBottom: 14 }}>Detrás de cada impresión</div>
          <div className="qs-collage no-copy">
            {[
              'assets/edificio.png',
              'assets/equipo-01-administrativo.png',
              'assets/equipo-03-heidelberg.png',
              'assets/equipo-04-uv.png',
              'assets/equipo-02-gran-formato.png',
              'assets/equipo-05-acabados.png',
              'assets/equipo-06-diseno.png',
              'assets/equipo-07-canon.png',
              'assets/equipo-08-heidelberg2.png',
            ].map((src, i) => (
              <figure key={i} className="qs-collage-card">
                <img src={src} alt="" draggable="false"
                  onContextMenu={(e) => e.preventDefault()}/>
              </figure>
            ))}
          </div>
        </div>

        {/* CLIENTES MARQUEE */}
        <div style={{ marginTop: 80 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 28, flexWrap: 'wrap', gap: 12 }}>
            <span className="eyebrow"><span className="dot"></span>Nuestros clientes · 100+ marcas</span>
            <span className="tech-label">Marcas, agencias y empresas que confían en nosotros</span>
          </div>
          <div style={{
            overflow: 'hidden',
            position: 'relative',
            mask: 'linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%)',
            WebkitMask: 'linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%)',
            padding: '24px 0',
          }}>
            <div style={{
              display: 'flex',
              gap: 'clamp(24px, 3vw, 44px)',
              whiteSpace: 'nowrap',
              animation: 'clientsMarquee 60s linear infinite',
              alignItems: 'center',
            }}>
              {(() => {
                const logos = Array.from({ length: 26 }, (_, i) => `assets/clientes/${String(i + 1).padStart(2, '0')}.png`);
                const loop = [...logos, ...logos];
                return loop.map((src, i) => (
                  <img key={i} src={src} alt=""
                    className="cliente-logo"
                    style={{
                      height: 84,
                      width: 'auto',
                      objectFit: 'contain',
                      flexShrink: 0,
                      filter: 'grayscale(100%) opacity(0.55)',
                      transition: 'filter 0.3s ease',
                    }}/>
                ));
              })()}
            </div>
          </div>
        </div>

        {/* TECNOLOGÍA / MÁQUINAS */}
        <div style={{ marginTop: 64, paddingTop: 40, borderTop: '1px solid var(--line-2)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24, flexWrap: 'wrap', gap: 12 }}>
            <span className="eyebrow"><span className="dot"></span>Tecnología · Maquinaria de impresión</span>
            <span className="tech-label">Equipos de clase mundial al servicio de tu marca</span>
          </div>
          <div style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 'clamp(20px, 4vw, 56px)',
            alignItems: 'center',
            justifyContent: 'center',
            padding: '12px 0',
          }}>
            {[
              { name: 'Heidelberg', img: 'assets/maq-heidelberg.png' },
              { name: 'Canon',      img: 'assets/maq-canon.png' },
              { name: 'Mimaki',     img: 'assets/maq-mimaki.png' },
              { name: 'Shinohara',  img: 'assets/maq-shinohara.png' },
            ].map(t => (
              <img key={t.name} src={t.img} alt={t.name}
                className="maq-logo"
                style={{
                  height: 56, width: 'auto',
                  objectFit: 'contain',
                  filter: 'grayscale(100%) opacity(0.65)',
                  transition: 'filter 0.3s ease, transform 0.3s ease',
                }}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════ SERVICIOS / IMPRESIÓN ════════════════════════ */

function Servicios({ onJump }) {
  const cats = [
    { id: '01', code: 'IMP-01', name: 'Empaques',     italic: 'a medida', desc: 'Cajas plegables, etiquetas troqueladas, bolsas kraft, papel antigrasa.', color: 'var(--blue)', textColor: '#fff', tags: ['Cajas plegables', 'Etiquetas', 'Antigrasa', 'Bolsas'], img: 'assets/imp-01-empaques.png' },
    { id: '02', code: 'IMP-02', name: 'Papelería',    italic: 'corporativa', desc: 'Tarjetas, cuadernos, carpetas, sobres y hojas membretadas.', color: 'var(--navy)', textColor: '#fff', tags: ['Tarjetas', 'Cuadernos', 'Membretes', 'Carpetas'], img: 'assets/imp-02-papeleria.png' },
    { id: '03', code: 'IMP-03', name: 'Publicitaria', italic: 'masiva', desc: 'Volantes, trípticos, menús, afiches, revistas y libros.', color: 'var(--cyan)', textColor: 'var(--navy)', tags: ['Volantes', 'Trípticos', 'Afiches', 'Menús'], img: 'assets/imp-03-publicitaria.png' },
    { id: '04', code: 'IMP-04', name: 'Restaurantes', italic: 'menús', desc: 'Cartas, individuales, manteles personalizados, manga, vasos.', color: 'var(--pale)', textColor: 'var(--navy)', tags: ['Cartas', 'Individuales', 'Vasos', 'Mangas'], img: 'assets/imp-04-restaurantes.png' },
    { id: '05', code: 'IMP-05', name: 'Alto relieve UV', italic: 'Mimaki', desc: 'UV 3D selectivo, relieve, brillo y textura premium. Etiquetas y empaques con efectos táctiles.', color: 'var(--blue)', textColor: '#fff', tags: ['UV 3D', 'Selectivo', 'Relieve', 'Mimaki'], img: 'assets/imp-05-uv.png' },
  ];
  return (
    <section id="impresion" style={{ padding: 'var(--pad-y) 0' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow"><span className="dot"></span>Catálogo principal · 05 categorías</span>
            <h2 className="h2" style={{ marginTop: 18 }}>
              Todo lo que <br/><span className="italic">imprimimos</span>.
            </h2>
          </div>
          <a href="https://wa.me/593962865530" target="_blank" rel="noreferrer" className="btn btn-ghost">
            Solicitar catálogo →
          </a>
        </div>

        <div className="servicios-grid">
          {cats.map(c => <ServicioCard key={c.id} {...c}/>)}
        </div>
      </div>
    </section>
  );
}

function ServicioCard({ id, code, name, italic, desc, color, textColor, tags, img }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: color,
        color: textColor,
        borderRadius: 18,
        minHeight: 520,
        display: 'flex', flexDirection: 'column',
        transition: 'transform 0.3s ease, box-shadow 0.3s ease',
        transform: hover ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hover ? '0 24px 60px rgba(5,15,75,0.25)' : '0 6px 24px rgba(5,15,75,0.10)',
        position: 'relative', overflow: 'hidden',
      }}>
      {/* Imagen al medio-arriba */}
      <div style={{
        position: 'relative',
        height: 220,
        overflow: 'hidden',
        borderRadius: 0,
        background: color,
      }}>
        <img src={img} alt={name}
          style={{
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            transition: 'transform 0.5s ease',
            transform: hover ? 'scale(1.06)' : 'scale(1)',
          }}/>
        {/* top labels overlay sobre imagen */}
        <div style={{ position: 'absolute', top: 16, right: 16 }}>
          <span style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'rgba(255,255,255,0.95)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            transition: 'transform 0.25s ease',
            transform: hover ? 'rotate(-12deg) scale(1.08)' : 'rotate(0) scale(1)',
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16">
              <path d="M5 11 L11 5 M6 5 L11 5 L11 10" stroke="var(--navy)" strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </div>
      </div>

      {/* Cuerpo */}
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', flex: 1, justifyContent: 'space-between' }}>
        <div className="h3" style={{
          fontSize: 'clamp(20px, 2.1vw, 30px)',
          color: textColor, lineHeight: 1.05, letterSpacing: '-0.03em',
          marginBottom: 18, maxWidth: '100%',
        }}>
          {name}<br/>
          <span className="italic" style={{ opacity: 0.9, fontWeight: 400 }}>{italic}</span>
        </div>
        <div>
          <p style={{ fontSize: 13.5, lineHeight: 1.5, margin: 0, marginBottom: 14, opacity: 0.82 }}>{desc}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5 }}>
            {tags.map(t => (
              <span key={t} style={{
                fontFamily: 'var(--mono)', fontSize: 9.5, padding: '4px 8px',
                textTransform: 'uppercase', letterSpacing: '0.08em',
                border: `1px solid ${textColor}`, borderRadius: 999,
                color: textColor, opacity: 0.85,
              }}>{t}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ArrowDiag({ color }) {
  return (
    <svg width="36" height="36" viewBox="0 0 36 36">
      <circle cx="18" cy="18" r="17" fill="none" stroke={color} strokeOpacity="0.4"/>
      <path d="M13 23 L23 13 M16 13 L23 13 L23 20" stroke={color} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ════════════════════════ PROMOCIONALES ════════════════════════ */

function Promocionales() {
  const items = [
    { id: 'cuadernos', name: 'Cuadernos · Libretas', desc: 'Pasta dura, suave o anillada. A5 / A6. Personalizables.', refs: 8, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-01-cuadernos.png' },
    { id: 'termos',    name: 'Tomatodos · Termos',   desc: 'Acero inoxidable, doble pared, 350–750ml.', refs: 12, color: 'var(--cyan)', textColor: 'var(--navy)', img: 'assets/promo-02-termos.png' },
    { id: 'bolsos',    name: 'Bolsos · Sport bag',   desc: 'Tote bags, mochilas ejecutivas, neceseres.', refs: 6, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-03-bolsos.png' },
    { id: 'plumas',    name: 'Plumas · Bolígrafos',  desc: 'Ejecutivos, ecológicos, metálicos, gel.', refs: 9, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-04-plumas.png' },
    { id: 'gorras',    name: 'Gorras · Textiles',    desc: 'Bordado o sublimación. Trucker caps y más.', refs: 5, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-05-gorras.png' },
    { id: 'llaveros',  name: 'Llaveros · Pop sockets',desc: 'Metálicos, cuero o silicona. Láser o tampografía.', refs: 7, color: 'var(--navy)', textColor: '#fff', img: 'assets/promo-06-llaveros.png' },
    { id: 'calendarios',name: 'Calendarios',         desc: 'Triangulares, de pared, pasta dura o suave.', refs: 4, color: 'var(--cyan)', textColor: 'var(--navy)', img: 'assets/promo-07-calendarios.png' },
    { id: 'bolsas',    name: 'Bolsas · Empaques',    desc: 'Kraft con y sin asas, papel de regalo, cajas premium.', refs: 6, color: 'var(--blue)', textColor: '#fff', img: 'assets/promo-08-bolsas.png' },
  ];

  return (
    <section id="promocionales" style={{ padding: 'var(--pad-y) 0', background: 'var(--pale)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 56, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow"><span className="dot"></span>Merchandising corporativo · 57+ referencias</span>
            <h2 className="h2" style={{ marginTop: 18, marginBottom: 28 }}>
              Tu marca,<br/><span className="italic">objeto cotidiano</span>.
            </h2>
            <p style={{ marginTop: 0, fontSize: 16, color: 'var(--muted)', maxWidth: 560, lineHeight: 1.5 }}>
              Cuadernos, termos, bolsos, plumas, gorras y más — todos con tu identidad
              bordada, grabada o impresa.
            </p>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
          {items.map(it => <PromoCard key={it.id} {...it}/>)}
          <DescargarCatalogoCard/>
        </div>
      </div>
    </section>
  );
}

function DescargarCatalogoCard() {
  const [hover, setHover] = useState(false);
  return (
    <a
      href="https://wa.me/593962865530?text=Hola%20Role%20Machine%2C%20me%20interesa%20recibir%20el%20cat%C3%A1logo%20de%20promocionales."
      target="_blank" rel="noreferrer"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: '#fff',
        color: 'var(--navy)',
        borderRadius: 14,
        minHeight: 320,
        display: 'flex', flexDirection: 'column',
        transition: 'transform 0.25s ease, box-shadow 0.25s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 24px 60px rgba(5,15,75,0.25)' : '0 6px 24px rgba(5,15,75,0.10)',
        position: 'relative', overflow: 'hidden',
        border: '1px solid rgba(5,15,75,0.08)',
      }}>
      {/* Imagen */}
      <div style={{ position: 'relative', aspectRatio: '16 / 11', overflow: 'hidden', background: '#fff' }}>
        <img src="assets/promo-09-catalogo.png" alt="Descargar catálogo"
          style={{
            position: 'absolute', inset: 0,
            width: '100%', height: '100%',
            objectFit: 'cover', objectPosition: 'center',
            display: 'block',
            transform: hover ? 'scale(1.20)' : 'scale(1.12)',
            transition: 'transform 0.5s ease',
          }}/>
        <div style={{ position: 'absolute', top: 14, left: 16, right: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <span style={{
            fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em',
            textTransform: 'uppercase',
            color: 'var(--navy)',
            opacity: 0.6, fontWeight: 500,
          }}>
            PDF · 38 páginas
          </span>
          <span style={{
            width: 30, height: 30, borderRadius: '50%',
            background: 'var(--blue)', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            transition: 'transform 0.25s ease',
            transform: hover ? 'translateY(2px) scale(1.08)' : 'translateY(0) scale(1)',
          }}>
            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
              <path d="M8 3 V11 M4 8 L8 12 L12 8" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </div>
      </div>

      <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        <div className="h3" style={{ fontSize: 21, color: 'var(--navy)', marginBottom: 6, lineHeight: 1.05 }}>
          Descargar <span className="italic" style={{ fontWeight: 400, color: 'var(--blue)' }}>catálogo</span>
        </div>
        <p style={{ fontSize: 12.5, lineHeight: 1.45, color: 'var(--muted)', margin: 0 }}>
          Recibe el catálogo completo de promocionales por WhatsApp.
        </p>
      </div>
    </a>
  );
}

function PromoCard({ name, desc, refs, color, textColor, img }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: color,
        color: textColor,
        borderRadius: 14,
        minHeight: 320,
        display: 'flex', flexDirection: 'column',
        transition: 'transform 0.25s ease, box-shadow 0.25s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 18px 50px rgba(5,15,75,0.18)' : '0 4px 18px rgba(5,15,75,0.06)',
        position: 'relative', overflow: 'hidden',
      }}>
      {/* Imagen */}
      <div style={{
        position: 'relative',
        aspectRatio: '16 / 11',
        overflow: 'hidden',
        background: color,
        display: 'block',
      }}>
        {img && (
          <img src={img} alt={name}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center',
              display: 'block',
              transform: hover ? 'scale(1.20)' : 'scale(1.12)',
              transition: 'transform 0.5s ease',
            }}/>
        )}
        <div style={{ position: 'absolute', top: 14, right: 16 }}>
          <span style={{
            width: 28, height: 28, borderRadius: '50%',
            background: 'rgba(255,255,255,0.95)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 2px 8px rgba(0,0,0,0.12)',
            transition: 'transform 0.25s ease',
            transform: hover ? 'rotate(45deg)' : 'rotate(0)',
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M6 2 V10 M2 6 H10" stroke="var(--navy)" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
          </span>
        </div>
      </div>

      {/* Cuerpo */}
      <div style={{ padding: 20, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
        <div className="h3" style={{ fontSize: 21, color: textColor, marginBottom: 6, lineHeight: 1.05 }}>{name}</div>
        <p style={{ fontSize: 12.5, lineHeight: 1.45, opacity: 0.85, margin: 0 }}>{desc}</p>
      </div>
    </div>
  );
}

/* ════════════════════════ GRAN FORMATO ════════════════════════ */

function GranFormato() {
  const items = [
    { id: 'rollup',    name: 'Roll-up Lonas',      spec: 'Brillo · Mate · PET',     img: 'assets/gf-01-rollup.png' },
    { id: 'banner',    name: 'Banner X',           spec: 'Brillo · Mate',           img: 'assets/gf-02-banner.png' },
    { id: 'counter',   name: 'Counter',            spec: 'PVC reforzado',           img: 'assets/gf-03-counter.png' },
    { id: 'backing',   name: 'Backing',            spec: 'Aluminio + Lona',         img: 'assets/gf-04-backing.png' },
    { id: 'anforas',   name: 'Ánforas publicitarias', spec: 'Cartón corrugado',     img: 'assets/gf-05-anforas.png' },
    { id: 'señaletica',name: 'Señalética',         spec: 'PVC · Acrílico · Vinil',  img: 'assets/gf-06-senaletica.png' },
    { id: 'arenado',   name: 'Arenado',            spec: 'Vinil esmerilado',        img: 'assets/gf-07-arenado.png' },
    { id: 'vinil',     name: 'Vinil de corte',     spec: 'Polimérico',              img: 'assets/gf-08-vinil.png' },
    { id: 'ruleta',    name: 'Ruletas',            spec: 'MDF + impresión',         img: 'assets/gf-09-ruletas.png' },
    { id: 'exhibidor', name: 'Exhibidores',        spec: 'Cartón · PVC',            img: 'assets/gf-10-exhibidores.png' },
    { id: 'dummies',   name: 'Dummies',            spec: 'Producto de exhibición',  img: 'assets/gf-11-dummies.png' },
  ];

  return (
    <section id="gran-formato" style={{ padding: 'var(--pad-y) 0', background: 'var(--navy)', color: '#fff' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'flex-end', marginBottom: 60, flexWrap: 'wrap' }}>
          <div>
            <span className="eyebrow" style={{ color: 'rgba(255,255,255,0.65)' }}>
              <span className="dot" style={{ background: 'var(--cyan)' }}></span>
              Gran formato · Branding alto impacto
            </span>
            <h2 className="h2" style={{ marginTop: 18, color: '#fff' }}>
              Tu marca,<br/><span className="italic" style={{ color: 'var(--cyan)' }}>a escala real</span>.
            </h2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <p style={{ fontSize: 16, color: 'rgba(255,255,255,0.75)', lineHeight: 1.5, margin: 0, maxWidth: 480 }}>
              Todo para transformar tu marca en presencia física: desde un roll-up portátil
              hasta el branding completo de tu showroom.
            </p>
            <BigStats/>
          </div>
        </div>

        {/* Items grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          border: '1px solid rgba(255,255,255,0.15)',
          borderRadius: 18,
          overflow: 'hidden',
        }} className="gf-grid">
          {items.map((it, i) => <GFCard key={it.id} {...it} idx={i} total={items.length}/>)}
        </div>
      </div>
    </section>
  );
}

function BigStats() {
  return (
    <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
      {[
        { n: '15+', l: 'Años imprimiendo' },
        { n: '50+', l: 'Tiraje mínimo' },
        { n: '24h', l: 'Cotización' },
      ].map(s => (
        <div key={s.l} style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 40, lineHeight: 1, color: 'var(--cyan)', letterSpacing: '-0.03em' }}>
            {s.n}
          </span>
          <span className="tech-label" style={{ color: 'rgba(255,255,255,0.6)', marginTop: 6 }}>{s.l}</span>
        </div>
      ))}
    </div>
  );
}

function GFCard({ name, spec, img, idx, total }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      className="gf-card"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'flex', flexDirection: 'column',
        cursor: 'default',
        borderRight: '1px solid rgba(255,255,255,0.15)',
        borderBottom: '1px solid rgba(255,255,255,0.15)',
        background: 'var(--navy)',
        overflow: 'hidden',
        position: 'relative',
        alignSelf: 'start',
      }}>
      {/* Imagen */}
      <div style={{
        position: 'relative',
        aspectRatio: '16 / 11',
        overflow: 'hidden',
        background: 'var(--navy)',
        display: 'block',
        marginBottom: -1,
      }}>
        {img && (
          <img src={img} alt={name}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center',
              display: 'block',
              transform: hover ? 'scale(1.20)' : 'scale(1.12)',
              transition: 'transform 0.5s ease',
            }}/>
        )}
      </div>

      {/* Texto */}
      <div style={{ padding: '14px 18px 16px', display: 'flex', flexDirection: 'column' }}>
        <div className="h3" style={{ color: '#fff', fontSize: 20, marginBottom: 4, lineHeight: 1.05 }}>{name}</div>
        <div className="tech-label" style={{
          color: hover ? 'var(--cyan)' : 'rgba(255,255,255,0.6)',
          transition: 'color 0.25s ease',
        }}>{spec}</div>
      </div>
    </div>
  );
}

/* ════════════════════════ BLOG ════════════════════════ */

function Blog() {
  const posts = [
    {
      id: 'alto-relieve-uv-mimaki',
      cat: 'Tecnología',
      date: '20 may 2026',
      title: 'Etiquetas de alto relieve UV con tecnología Mimaki',
      excerpt: 'Stickers UV, etiquetas con textura 3D, brillo selectivo y acabados premium. La última tecnología Mimaki llegó a Role Machine.',
      cover: 'var(--blue)',
      img: 'assets/blog-05-uv.png',
      readTime: '5 min',
      featured: true,
    },
    {
      id: 'material-empaque',
      cat: 'Tendencias',
      date: '12 may 2026',
      title: 'Cómo elegir el material correcto para tu empaque',
      excerpt: 'Couché, kraft, sulfato o cartulina rígida. Cada sustrato cambia la personalidad de tu producto. Te contamos cuándo usar cada uno.',
      cover: 'var(--blue)',
      img: 'assets/blog-01-material.png',
      readTime: '4 min',
      featured: true,
    },
    {
      id: 'sangrado-area-segura',
      cat: 'Guía técnica',
      date: '28 abr 2026',
      title: 'Sangrado y área segura: lo básico antes de imprimir',
      excerpt: 'Los 3mm que hacen la diferencia entre un trabajo profesional y uno que se ve descuidado al cortar.',
      cover: 'var(--navy)',
      img: 'assets/blog-02-sangrado.png',
      readTime: '3 min',
    },
    {
      id: 'smile-caso',
      cat: 'Casos de estudio',
      date: '15 abr 2026',
      title: 'Smile Estética Dental: 4 años imprimiendo material corporativo',
      excerpt: 'Cómo construimos una relación de confianza con una de las clínicas dentales más reconocidas de Guayaquil.',
      cover: 'var(--cyan)',
      img: 'assets/blog-03-smile.png',
      readTime: '5 min',
    },
    {
      id: 'top-promocionales-2026',
      cat: 'Promocionales',
      date: '02 abr 2026',
      title: 'Top 5 promocionales corporativos para 2026',
      excerpt: 'Termos, libretas ecológicas y tote bags lideran la demanda este año. Te mostramos las tendencias.',
      cover: 'var(--blue)',
      img: 'assets/blog-04-promos.png',
      readTime: '6 min',
    },
  ];

  return (
    <section id="blog" style={{ padding: 'var(--pad-y) 0' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 48, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow"><span className="dot"></span>Blog · Artículos y novedades</span>
            <h2 className="h2" style={{ marginTop: 18 }}>
              Aprende sobre<br/><span className="italic">impresión</span>.
            </h2>
          </div>
          <a href="blog.html" className="btn btn-ghost">
            Ver todos los artículos →
          </a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 18,
        }}>
          {posts.map((p, i) => <BlogCard key={i} {...p} idx={i}/>)}
        </div>
      </div>
    </section>
  );
}

function BlogCard({ id, cat, date, title, excerpt, cover, img, readTime, featured, idx }) {
  const [hover, setHover] = useState(false);
  return (
    <a
      href={id ? `blog.html?post=${id}` : 'blog.html'}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--paper)',
        border: '1px solid var(--line)',
        borderRadius: 18,
        overflow: 'hidden',
        display: 'flex',
        flexDirection: 'column',
        transition: 'transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease',
        transform: hover ? 'translateY(-4px)' : 'translateY(0)',
        boxShadow: hover ? '0 18px 50px rgba(5,15,75,0.15)' : '0 4px 18px rgba(5,15,75,0.04)',
        borderColor: hover ? 'var(--line-2)' : 'var(--line)',
        cursor: 'pointer',
        color: 'inherit', textDecoration: 'none',
      }}>
      {/* Cover */}
      <div style={{
        background: cover,
        aspectRatio: '16 / 9',
        position: 'relative',
        overflow: 'hidden',
      }}>
        {img && (
          <img src={img} alt={title}
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover', objectPosition: 'center',
              display: 'block',
              transform: hover ? 'scale(1.08)' : 'scale(1.02)',
              transition: 'transform 0.6s cubic-bezier(.22,.9,.3,1)',
            }}/>
        )}
        {/* Cat chip */}
        <div style={{ position: 'absolute', top: 14, left: 14 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center',
            background: 'rgba(255,255,255,0.95)',
            color: 'var(--navy)',
            padding: '5px 11px',
            borderRadius: 999,
            fontFamily: 'var(--mono)', fontSize: 10, fontWeight: 500,
            letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>{cat}</span>
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: 24, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 18 }}>
        <div>
          <div style={{ display: 'flex', gap: 12, marginBottom: 12 }}>
            <span className="tech-label">{date}</span>
            <span className="tech-label">·</span>
            <span className="tech-label">{readTime} de lectura</span>
          </div>
          <h3 style={{
            fontFamily: 'var(--display)',
            fontSize: 'clamp(20px, 2vw, 24px)',
            fontWeight: 700, letterSpacing: '-0.025em', lineHeight: 1.15,
            marginBottom: 10, color: 'var(--ink)',
          }}>{title}</h3>
          <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.5, margin: 0 }}>{excerpt}</p>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--blue)' }}>Leer artículo</span>
          <span style={{
            width: 30, height: 30, borderRadius: '50%',
            background: hover ? 'var(--blue)' : 'transparent',
            border: hover ? '1px solid var(--blue)' : '1px solid var(--line-2)',
            color: hover ? '#fff' : 'var(--ink)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            transition: 'all 0.2s ease',
          }}>
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M4 9 L9 4 M5 4 L9 4 L9 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </span>
        </div>
      </div>
    </a>
  );
}

function Proceso() {
  const steps = [
    { n: '01', t: 'Cuéntanos tu proyecto', d: 'Envíanos un brief o referencias por WhatsApp. Te respondemos en menos de 24 horas.', img: 'assets/proceso-01.svg' },
    { n: '02', t: 'Cotización y materiales', d: 'Asesoría sobre sustrato, acabado, tiraje y plazos. Cotización formal por escrito.', img: 'assets/proceso-02.svg' },
    { n: '03', t: 'Aprobación de arte', d: 'Revisamos archivos, verificamos sangrado y áreas seguras. Prueba digital incluida.', img: 'assets/proceso-03.svg' },
    { n: '04', t: 'Impresión y entrega', d: 'Offset, digital o gran formato según tu trabajo. Entrega 48–96 hrs a todo Ecuador.', img: 'assets/proceso-04.svg' },
  ];
  return (
    <section id="proceso" style={{ padding: 'var(--pad-y) 0' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow"><span className="dot"></span>4 pasos · del brief al envío</span>
          <h2 className="h2" style={{ marginTop: 18 }}>
            Cómo <span className="italic">funciona</span>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 18 }}>
          {steps.map((s, i) => {
            const bg = i === 0 ? 'var(--blue)' : i === 1 ? 'var(--cyan)' : i === 2 ? 'var(--pale)' : 'var(--navy)';
            const fg = i === 1 || i === 2 ? 'var(--navy)' : '#fff';
            return (
              <div key={s.n} style={{
                background: bg,
                color: fg,
                borderRadius: 18,
                minHeight: 380,
                display: 'flex', flexDirection: 'column',
                overflow: 'hidden',
              }}>
                {/* Top: número + paso */}
                <div style={{ padding: '26px 26px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <span style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 64, lineHeight: 1, letterSpacing: '-0.04em' }}>
                    {s.n}
                  </span>
                  <span style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7, marginTop: 8 }}>PASO</span>
                </div>
                {/* Imagen central */}
                <div style={{
                  position: 'relative',
                  flex: 1,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  padding: '12px 18px',
                  minHeight: 140,
                }}>
                  <img src={s.img} alt={s.t}
                    style={{
                      width: '100%', height: '100%', maxHeight: 170,
                      objectFit: 'contain', objectPosition: 'center',
                      display: 'block',
                    }}/>
                </div>
                {/* Texto abajo */}
                <div style={{ padding: '0 26px 26px' }}>
                  <div className="h3" style={{ fontSize: 22, marginBottom: 10, lineHeight: 1.1 }}>{s.t}</div>
                  <p style={{ fontSize: 13, opacity: 0.82, lineHeight: 1.5, margin: 0 }}>{s.d}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════ TESTIMONIOS ════════════════════════ */

function Testimonios() {
  const ts = [
    { q: 'Quería agradecerles, estamos encantados con su trabajo. Material de excelente calidad y atención excepcional.', a: 'Grupo Carrera Villacis', r: 'CEO' },
    { q: 'En Role encontré lo que necesitaba: calidad y cuidado en cada detalle. Decidí realizar grandes pedidos con ellos.', a: 'WENS Consulting', r: 'CEO' },
    { q: 'Llevamos desde 2022 imprimiendo nuestros cuadernos y agendas. Quedan recomendados al 100%.', a: 'Pharmedic', r: 'Comunicación' },
  ];
  return (
    <section style={{ padding: 'var(--pad-y) 0', background: 'var(--paper)' }}>
      <div className="wrap">
        <div style={{ marginBottom: 56, maxWidth: 720 }}>
          <span className="eyebrow"><span className="dot"></span>15 años, miles de tirajes</span>
          <h2 className="h2" style={{ marginTop: 18 }}>
            Lo que dicen<br/><span className="italic">nuestros clientes</span>.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
          {ts.map((t, i) => (
            <figure key={i} style={{
              margin: 0, padding: 28, borderRadius: 18,
              background: 'var(--paper)',
              border: '1px solid var(--line)',
            }}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 48, color: 'var(--blue)', lineHeight: 1 }}>"</span>
              <blockquote style={{ margin: '8px 0 24px', fontSize: 16, lineHeight: 1.5, color: 'var(--ink)' }}>
                {t.q}
              </blockquote>
              <figcaption style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600 }}>{t.a}</div>
                  <div className="tech-label">{t.r}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ════════════════════════ CONTACTO (FORMULARIO) ════════════════════════ */

function Contacto() {
  const [submitting, setSubmitting] = useState(false);
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ email: '', nombre: '', empresa: '', mensaje: '' });

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (submitting) return;
    setSubmitting(true);
    // Por ahora abre WhatsApp pre-llenado. Cuando tengas backend, cambiar por fetch().
    const text = `Hola Role Machine, soy ${form.nombre}` +
      (form.empresa ? ` de ${form.empresa}` : '') +
      `.\n\n${form.mensaje}\n\nContacto: ${form.email}`;
    const url = `https://wa.me/593962865530?text=${encodeURIComponent(text)}`;
    window.open(url, '_blank');
    setTimeout(() => { setSent(true); setSubmitting(false); }, 600);
  };

  return (
    <section id="contacto" style={{ padding: 'var(--pad-y) 0', background: 'var(--paper)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'flex-start' }} className="contact-grid">
          {/* Izquierda: texto */}
          <div>
            <span className="eyebrow"><span className="dot"></span>Contáctanos</span>
            <h2 className="h2" style={{ marginTop: 18, marginBottom: 24 }}>
              Hablemos<br/>de tu <span className="italic">proyecto</span>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink)', margin: 0, marginBottom: 28, maxWidth: 460 }}>
              Estamos aquí para responder tus preguntas, discutir tus objetivos y explorar
              formas en que podemos trabajar juntos para darle vida a tu visión.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 32 }}>
              <div>
                <div className="tech-label" style={{ marginBottom: 6 }}>Horario de atención</div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>Lunes – Viernes</div>
                <div style={{ fontSize: 14, color: 'var(--muted)' }}>9:00 AM – 5:00 PM</div>
              </div>
              <div>
                <div className="tech-label" style={{ marginBottom: 6 }}>WhatsApp</div>
                <a href="https://wa.me/593962865530" target="_blank" rel="noreferrer" style={{ fontSize: 15, fontWeight: 600, color: 'var(--blue)' }}>
                  096 286 5530
                </a>
              </div>
              <div>
                <div className="tech-label" style={{ marginBottom: 6 }}>Correo</div>
                <a href="mailto:proyectos@rolemachine.com" style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)' }}>
                  proyectos@rolemachine.com
                </a>
              </div>
              <div>
                <div className="tech-label" style={{ marginBottom: 6 }}>Taller</div>
                <div style={{ fontSize: 14, lineHeight: 1.45, color: 'var(--ink)' }}>
                  Av. de las Américas #904<br/>
                  Cdla. Albatros Mz. 33 Sl.15<br/>
                  Guayaquil, Ecuador
                </div>
              </div>

              {/* CTA Bolsa de trabajo */}
              <div style={{
                marginTop: 12, padding: 18,
                background: 'var(--pale)', borderRadius: 14,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 14,
              }}>
                <div>
                  <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15, color: 'var(--navy)', marginBottom: 2 }}>
                    💼 Bolsa de trabajo
                  </div>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>
                    ¿Quieres unirte al equipo? Postula aquí.
                  </div>
                </div>
                <a href="Trabajo.html" target="_blank" rel="noreferrer" className="btn btn-primary" style={{ padding: '10px 16px', fontSize: 12.5, flexShrink: 0 }}>
                  Postular →
                </a>
              </div>
            </div>
          </div>

          {/* Derecha: formulario */}
          <form onSubmit={handleSubmit} style={{
            background: '#fff',
            border: '1px solid var(--line)',
            borderRadius: 22,
            padding: 'clamp(28px, 4vw, 44px)',
            boxShadow: '0 6px 32px rgba(5,15,75,0.06)',
            position: 'relative',
            overflow: 'hidden',
          }}>
            {/* Halo decorativo */}
            <div style={{
              position: 'absolute', right: -120, top: -120,
              width: 360, height: 360, borderRadius: '50%',
              background: 'radial-gradient(circle, var(--cyan) 0%, transparent 65%)',
              opacity: 0.15, pointerEvents: 'none',
            }}/>

            {sent ? (
              <div style={{ position: 'relative', padding: '24px 0', textAlign: 'center' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'var(--cyan)', color: 'var(--navy)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12 L10 17 L19 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h3 style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 24, color: 'var(--navy)', marginBottom: 8 }}>
                  ¡Mensaje enviado!
                </h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', margin: 0 }}>
                  Te respondemos por WhatsApp en menos de 24 horas.
                </p>
                <button type="button" onClick={() => { setSent(false); setForm({ email: '', nombre: '', empresa: '', mensaje: '' }); }}
                  style={{
                    marginTop: 24, appearance: 'none', background: 'transparent',
                    border: '1px solid var(--line-2)', color: 'var(--ink)',
                    padding: '8px 18px', borderRadius: 999, cursor: 'pointer',
                    fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
                  }}>
                  Enviar otro mensaje
                </button>
              </div>
            ) : (
              <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 22 }}>
                <FormField label="Email" required value={form.email} onChange={(v) => update('email', v)} type="email" placeholder="tu@correo.com"/>
                <FormField label="Nombre" required value={form.nombre} onChange={(v) => update('nombre', v)} placeholder="Tu nombre"/>
                <FormField label="Empresa" value={form.empresa} onChange={(v) => update('empresa', v)} placeholder="Empresa (opcional)"/>
                <FormField label="Tu mensaje" required value={form.mensaje} onChange={(v) => update('mensaje', v)} textarea placeholder="Cuéntanos sobre tu proyecto..."/>
                <div>
                  <button type="submit" disabled={submitting || !form.email || !form.nombre || !form.mensaje}
                    className="btn btn-primary"
                    style={{
                      opacity: (!form.email || !form.nombre || !form.mensaje) ? 0.5 : 1,
                      cursor: (!form.email || !form.nombre || !form.mensaje) ? 'not-allowed' : 'pointer',
                    }}>
                    {submitting ? 'Enviando...' : 'Enviar mensaje'}
                    <span className="arrow">→</span>
                  </button>
                </div>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function FormField({ label, required, value, onChange, type = 'text', placeholder, textarea }) {
  const [focused, setFocused] = useState(false);
  const inputStyle = {
    width: '100%',
    appearance: 'none',
    border: focused ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
    borderRadius: 999,
    padding: '14px 20px',
    fontFamily: 'var(--sans)', fontSize: 14,
    color: 'var(--ink)',
    background: '#fff',
    outline: 'none',
    transition: 'border-color 0.18s ease, box-shadow 0.18s ease',
    boxShadow: focused ? '0 0 0 4px rgba(0,95,255,0.10)' : 'none',
    resize: textarea ? 'vertical' : 'none',
    minHeight: textarea ? 120 : undefined,
    fontWeight: 400,
  };
  if (textarea) {
    inputStyle.borderRadius = 14;
    inputStyle.paddingTop = 14;
    inputStyle.paddingBottom = 14;
  }
  return (
    <div>
      <label style={{
        display: 'block', marginBottom: 8,
        fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
        color: 'var(--ink)',
      }}>
        {label} {required && <span style={{ color: '#E61C8E' }}>*</span>}
      </label>
      {textarea ? (
        <textarea value={value} onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
          placeholder={placeholder} required={required} style={inputStyle}/>
      ) : (
        <input type={type} value={value} onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
          placeholder={placeholder} required={required} style={inputStyle}/>
      )}
    </div>
  );
}

/* ════════════════════════ BOLSA DE TRABAJO ════════════════════════ */

function BolsaTrabajo() {
  const [form, setForm] = useState({ nombre: '', email: '', telefono: '', puesto: '', experiencia: '', mensaje: '' });
  const [sent, setSent] = useState(false);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const handleSubmit = (e) => {
    e.preventDefault();
    const text = `Hola, me interesa postular a Role Machine.\n\n` +
      `Nombre: ${form.nombre}\n` +
      `Email: ${form.email}\n` +
      `Teléfono: ${form.telefono}\n` +
      `Puesto de interés: ${form.puesto}\n` +
      `Años de experiencia: ${form.experiencia}\n\n` +
      `${form.mensaje}\n\n` +
      `*Adjuntaré mi CV en el siguiente mensaje.`;
    const url = `https://wa.me/593962865530?text=${encodeURIComponent(text)}`;
    window.open(url, '_blank');
    setSent(true);
  };

  const vacantes = [
    { titulo: 'Diseñador gráfico', tipo: 'Tiempo completo', area: 'Diseño' },
    { titulo: 'Operador de prensa offset', tipo: 'Tiempo completo', area: 'Producción' },
    { titulo: 'Asesor comercial', tipo: 'Tiempo completo', area: 'Ventas' },
    { titulo: 'Auxiliar de acabados', tipo: 'Tiempo completo', area: 'Producción' },
  ];

  return (
    <section id="trabajo" style={{ padding: 'var(--pad-y) 0', background: 'var(--pale)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'flex-start' }} className="contact-grid">
          {/* Izquierda: contexto + vacantes */}
          <div>
            <span className="eyebrow"><span className="dot"></span>Bolsa de trabajo · Únete al equipo</span>
            <h2 className="h2" style={{ marginTop: 18, marginBottom: 24 }}>
              Trabaja con<br/><span className="italic">nosotros</span>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink)', margin: 0, marginBottom: 32, maxWidth: 460 }}>
              Buscamos personas apasionadas por la impresión, el diseño y el detalle.
              Si te identificas con nuestros valores, postula y conversemos.
            </p>

            {/* Vacantes abiertas */}
            <div className="tech-label" style={{ marginBottom: 14 }}>Vacantes abiertas · {vacantes.length}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 28 }}>
              {vacantes.map((v, i) => (
                <div key={i} style={{
                  background: '#fff', border: '1px solid var(--line)',
                  borderRadius: 14, padding: '14px 18px',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
                }}>
                  <div>
                    <div style={{ fontFamily: 'var(--display)', fontWeight: 600, fontSize: 15, color: 'var(--navy)' }}>
                      {v.titulo}
                    </div>
                    <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                      <span className="tech-label">{v.area}</span>
                      <span className="tech-label" style={{ color: 'var(--blue)' }}>{v.tipo}</span>
                    </div>
                  </div>
                  <span style={{
                    width: 28, height: 28, borderRadius: '50%',
                    background: 'var(--pale)', color: 'var(--navy)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                      <path d="M4 9 L9 4 M5 4 L9 4 L9 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 13, color: 'var(--muted)', margin: 0, lineHeight: 1.5 }}>
              ¿No ves tu puesto? Envíanos tu CV de todas formas. Siempre buscamos buen talento.
            </p>
          </div>

          {/* Derecha: formulario de postulación */}
          <form onSubmit={handleSubmit} style={{
            background: '#fff', border: '1px solid var(--line)',
            borderRadius: 22, padding: 'clamp(28px, 4vw, 40px)',
            boxShadow: '0 6px 32px rgba(5,15,75,0.06)',
          }}>
            {sent ? (
              <div style={{ textAlign: 'center', padding: '24px 0' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: '50%',
                  background: 'var(--cyan)', color: 'var(--navy)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  marginBottom: 20,
                }}>
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12 L10 17 L19 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <h3 style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 24, color: 'var(--navy)', marginBottom: 8 }}>
                  ¡Postulación recibida!
                </h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', margin: 0, marginBottom: 14 }}>
                  No olvides adjuntar tu CV por WhatsApp.
                </p>
                <button type="button" onClick={() => { setSent(false); setForm({ nombre: '', email: '', telefono: '', puesto: '', experiencia: '', mensaje: '' }); }}
                  style={{
                    marginTop: 8, appearance: 'none', background: 'transparent',
                    border: '1px solid var(--line-2)', color: 'var(--ink)',
                    padding: '8px 18px', borderRadius: 999, cursor: 'pointer',
                    fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
                  }}>
                  Postular otra vacante
                </button>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div style={{ marginBottom: 4 }}>
                  <div style={{ fontFamily: 'var(--display)', fontWeight: 700, fontSize: 22, color: 'var(--navy)', marginBottom: 4 }}>
                    Postula a Role Machine
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--muted)' }}>
                    Te contactamos por WhatsApp si encajas con el perfil.
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <FormField label="Nombre" required value={form.nombre} onChange={(v) => update('nombre', v)} placeholder="Tu nombre"/>
                  <FormField label="Email" required value={form.email} onChange={(v) => update('email', v)} type="email" placeholder="tu@correo.com"/>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                  <FormField label="Teléfono" required value={form.telefono} onChange={(v) => update('telefono', v)} placeholder="09X XXX XXXX"/>
                  <PuestoSelect value={form.puesto} onChange={(v) => update('puesto', v)} vacantes={vacantes}/>
                </div>
                <FormField label="Años de experiencia" value={form.experiencia} onChange={(v) => update('experiencia', v)} placeholder="ej: 3 años"/>
                <FormField label="Cuéntanos sobre ti" required textarea value={form.mensaje} onChange={(v) => update('mensaje', v)} placeholder="Tu experiencia, lo que te apasiona, por qué quieres unirte..."/>
                <div style={{
                  background: 'var(--pale)', borderRadius: 12, padding: 14,
                  fontSize: 12.5, color: 'var(--navy)', display: 'flex', gap: 10,
                }}>
                  <span style={{ flexShrink: 0 }}>
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                      <path d="M8 1 a7 7 0 1 0 0 14 a7 7 0 0 0 0-14 z M7 5 h2 v5 h-2z M7 11 h2 v2 h-2z"/>
                    </svg>
                  </span>
                  <span style={{ lineHeight: 1.4 }}>
                    <b>Importante:</b> al enviar abriremos WhatsApp con tu mensaje pre-armado.
                    Adjunta tu CV en PDF en el siguiente mensaje.
                  </span>
                </div>
                <button type="submit"
                  disabled={!form.nombre || !form.email || !form.telefono || !form.mensaje}
                  className="btn btn-primary"
                  style={{
                    opacity: (!form.nombre || !form.email || !form.telefono || !form.mensaje) ? 0.5 : 1,
                    cursor: (!form.nombre || !form.email || !form.telefono || !form.mensaje) ? 'not-allowed' : 'pointer',
                  }}>
                  Enviar postulación
                  <span className="arrow">→</span>
                </button>
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function PuestoSelect({ value, onChange, vacantes }) {
  const [focused, setFocused] = useState(false);
  return (
    <div>
      <label style={{
        display: 'block', marginBottom: 8,
        fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
        color: 'var(--ink)',
      }}>
        Puesto de interés <span style={{ color: '#E61C8E' }}>*</span>
      </label>
      <select value={value} onChange={(e) => onChange(e.target.value)}
        onFocus={() => setFocused(true)} onBlur={() => setFocused(false)}
        required
        style={{
          width: '100%', appearance: 'none',
          border: focused ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
          borderRadius: 999, padding: '14px 20px',
          fontFamily: 'var(--sans)', fontSize: 14,
          color: value ? 'var(--ink)' : 'var(--muted)',
          background: '#fff',
          outline: 'none',
          transition: 'border-color 0.18s ease',
          backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'12\' height=\'12\' viewBox=\'0 0 12 12\'><path d=\'M3 5 L6 8 L9 5\' stroke=\'%23050F4B\' stroke-width=\'1.5\' fill=\'none\' stroke-linecap=\'round\' stroke-linejoin=\'round\'/></svg>")',
          backgroundRepeat: 'no-repeat',
          backgroundPosition: 'right 18px center',
          paddingRight: 40,
        }}>
        <option value="">Selecciona un puesto</option>
        {vacantes.map((v, i) => <option key={i} value={v.titulo}>{v.titulo}</option>)}
        <option value="Otro">Otro / Postulación espontánea</option>
      </select>
    </div>
  );
}

/* ════════════════════════ FOOTER ════════════════════════ */

function AnimatedSlogan() {
  return (
    <div className="slogan-wrap" aria-label="Tu marca se imprime mejor en role">
      <div className="slogan-track">
        {[0, 1].map(group => (
          <div key={group} className="slogan-group">
            <span className="slogan-word">Tu marca</span>
            <span className="slogan-word slogan-italic">se imprime</span>
            <span className="slogan-word slogan-cyan">mejor</span>
            <span className="slogan-word">en role</span>
            <span className="slogan-hex"><HexIcon size={84} color="var(--cyan)"/></span>
          </div>
        ))}
      </div>
    </div>
  );
}

function Footer() {
  return (
    <footer id="contacto" style={{ background: 'var(--navy)', color: '#fff', padding: '0 0 32px', position: 'relative' }}>
      {/* Top bar: redes sociales esquina superior derecha */}
      <div className="wrap" style={{
        display: 'flex', justifyContent: 'flex-end',
        paddingTop: 24, paddingBottom: 0,
        position: 'relative', zIndex: 2,
      }}>
        <div style={{ display: 'flex', gap: 8 }}>
          {[
            { icon: 'instagram', href: 'https://instagram.com/rolemachine', label: 'Instagram' },
            { icon: 'facebook',  href: 'https://facebook.com/rolemachine',  label: 'Facebook' },
            { icon: 'tiktok',    href: 'https://tiktok.com/@rolemachine',   label: 'TikTok' },
            { icon: 'whatsapp',  href: 'https://wa.me/593962865530',         label: 'WhatsApp' },
          ].map(s => (
            <a key={s.icon} href={s.href} target="_blank" rel="noreferrer" aria-label={s.label}
              className="social-circle"
              style={{
                width: 38, height: 38, borderRadius: '50%',
                background: 'rgba(255,255,255,0.08)',
                border: '1px solid rgba(255,255,255,0.18)',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                color: '#fff',
                transition: 'all 0.2s ease',
              }}>
              <SocialIcon kind={s.icon}/>
            </a>
          ))}
        </div>
      </div>

      {/* Slogan tipográfico grande */}
      <TypographicSlogan/>

      <div className="wrap" style={{ paddingTop: 'clamp(40px, 6vw, 80px)' }}>
        {/* CTA grande */}
        <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 80 }}>
          <a className="btn btn-on-dark" href="https://wa.me/593962865530" target="_blank" rel="noreferrer">
            WhatsApp · 096 286 5530
            <span className="arrow">→</span>
          </a>
          <a className="btn btn-light" href="mailto:proyectos@rolemachine.com">
            proyectos@rolemachine.com
          </a>
        </div>

        {/* Grid: Logo grande | Contacto | Productos | Empresa */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.4fr 1fr 1fr 1fr',
          gap: 32,
          paddingBottom: 40,
          borderBottom: '1px solid rgba(255,255,255,0.15)',
        }} className="footer-grid">
          {/* Logo grande + descripción */}
          <div>
            <img src="assets/logo-color.png" alt="Role Machine"
              style={{
                height: 90, width: 'auto', marginBottom: 22,
                filter: 'brightness(0) invert(1)',
              }}/>
            <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.75)', maxWidth: 320, lineHeight: 1.55, margin: 0 }}>
              Imprenta en Guayaquil desde 2010.<br/>
              Calidad y confianza en cada impresión.
            </p>
          </div>

          {/* Contacto */}
          <div>
            <div className="tech-label" style={{ marginBottom: 16, color: 'rgba(255,255,255,0.5)' }}>Contacto</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <PhoneIcon/>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>045 014 555</div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>096 286 5530</div>
                </div>
              </li>
              <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 4 }}>
                <MailIcon/>
                <span style={{ fontSize: 13.5 }}>proyectos@rolemachine.com</span>
              </li>
              <li style={{ display: 'flex', alignItems: 'flex-start', gap: 10, marginTop: 4 }}>
                <PinIcon/>
                <span style={{ fontSize: 13.5, lineHeight: 1.4 }}>
                  Av. de las Américas #904<br/>
                  Cdla. Albatros Mz. 33 Sl.15<br/>
                  Guayaquil, Ecuador
                </span>
              </li>
            </ul>
          </div>

          {/* Productos */}
          <FootCol title="Productos" items={['Empaques', 'Papelería', 'Promocionales', 'Gran Formato', 'Restaurantes']}/>

          {/* Empresa */}
          <FootCol title="Empresa" items={['Quiénes somos', 'Clientes', 'Proceso', 'Blog', 'Trabaja con nosotros']}/>
        </div>

        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span className="tech-label" style={{ color: 'rgba(255,255,255,0.5)' }}>© 2026 ROLE MACHINE · TODOS LOS DERECHOS RESERVADOS</span>
          <span className="tech-label" style={{ color: 'rgba(255,255,255,0.5)' }}>IMPRIMIMOS IDEAS CON PROPÓSITO</span>
        </div>
      </div>
    </footer>
  );
}

function TypographicSlogan() {
  return (
    <div style={{
      position: 'relative',
      padding: 'clamp(40px, 6vw, 90px) var(--pad-x) clamp(24px, 4vw, 56px)',
      borderBottom: '1px solid rgba(255,255,255,0.1)',
      overflow: 'hidden',
    }}>
      {/* Hex decorativo de fondo */}
      <div style={{
        position: 'absolute',
        right: '-4%', top: '50%',
        transform: 'translateY(-50%)',
        opacity: 0.08,
        animation: 'sloganHexSpin 28s linear infinite',
      }}>
        <HexIcon size={520} color="var(--cyan)"/>
      </div>

      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div className="typo-slogan">
          <span className="typo-line">
            <span className="typo-word typo-bold">tu</span>{' '}
            <span className="typo-word typo-italic">marca</span>
          </span>
          <span className="typo-line">
            <span className="typo-word typo-outline">se</span>{' '}
            <span className="typo-word typo-bold">imprime</span>
          </span>
          <span className="typo-line">
            <span className="typo-word typo-italic typo-cyan">mejor</span>{' '}
            <span className="typo-word typo-bold">en</span>{' '}
            <span className="typo-word typo-bold typo-cyan">role.</span>
          </span>
        </div>
      </div>
    </div>
  );
}

function SocialLink({ icon, handle, href }) {
  return (
    <a href={href} target="_blank" rel="noreferrer" className="social-link" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '8px 12px',
      borderRadius: 999,
      background: 'rgba(255,255,255,0.06)',
      border: '1px solid rgba(255,255,255,0.12)',
      transition: 'all 0.2s ease',
      color: '#fff',
    }}>
      <SocialIcon kind={icon}/>
      <span style={{ fontSize: 13.5, fontWeight: 500 }}>{handle}</span>
    </a>
  );
}

function SocialIcon({ kind }) {
  const s = { width: 16, height: 16, fill: 'currentColor' };
  if (kind === 'instagram') return (
    <svg viewBox="0 0 24 24" {...s}><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.81.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.81-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.81-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.81.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.77.13 4.9.33 4.14.63a5.92 5.92 0 0 0-2.13 1.38A5.92 5.92 0 0 0 .63 4.14C.33 4.9.13 5.77.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.31.79.73 1.46 1.38 2.13.66.66 1.34 1.07 2.13 1.38.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.92 5.92 0 0 0 2.13-1.38c.66-.66 1.07-1.34 1.38-2.13.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.92 5.92 0 0 0-1.38-2.13A5.92 5.92 0 0 0 19.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z"/></svg>
  );
  if (kind === 'facebook') return (
    <svg viewBox="0 0 24 24" {...s}><path d="M22.68 0H1.32C.59 0 0 .58 0 1.31v21.38C0 23.42.59 24 1.32 24h11.5v-9.29H9.69v-3.62h3.13V8.41c0-3.1 1.89-4.79 4.66-4.79 1.32 0 2.46.1 2.79.14v3.24h-1.92c-1.5 0-1.8.72-1.8 1.77v2.31h3.59l-.47 3.62h-3.12V24h6.12c.73 0 1.32-.58 1.32-1.31V1.31C24 .58 23.41 0 22.68 0z"/></svg>
  );
  if (kind === 'linkedin') return (
    <svg viewBox="0 0 24 24" {...s}><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.03-1.85-3.03-1.85 0-2.13 1.45-2.13 2.94v5.66H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.55C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.72C24 .77 23.2 0 22.22 0z"/></svg>
  );
  if (kind === 'tiktok') return (
    <svg viewBox="0 0 24 24" {...s}><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.86a8.16 8.16 0 0 0 4.77 1.52V6.93a4.85 4.85 0 0 1-1.84-.24z"/></svg>
  );
  if (kind === 'whatsapp') return (
    <svg viewBox="0 0 24 24" {...s}><path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1s-1.3-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.3-.1-.5-.2zM12 2A10 10 0 0 0 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
  );
  return null;
}

function PhoneIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0, marginTop: 2, opacity: 0.6 }}>
      <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/>
    </svg>
  );
}
function MailIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0, marginTop: 2, opacity: 0.6 }}>
      <path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
    </svg>
  );
}
function PinIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0, marginTop: 2, opacity: 0.6 }}>
      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/>
    </svg>
  );
}

function FootCol({ title, items }) {
  return (
    <div>
      <div className="tech-label" style={{ marginBottom: 14, color: 'rgba(255,255,255,0.5)' }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
        {items.map(i => <li key={i} style={{ fontSize: 13.5, color: '#fff' }}>{i}</li>)}
      </ul>
    </div>
  );
}

function FootballPopup() {
  const [stage, setStage] = useState('idle'); // idle, animation, popup, hidden
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);

  useEffect(() => {
    const dismissed = sessionStorage.getItem('rm_football_popup');
    if (dismissed) return;
    const t1 = setTimeout(() => setStage('animation'), 5000);
    const t2 = setTimeout(() => setStage('confetti'), 7600);
    const t3 = setTimeout(() => setStage('popup'), 8400);
    return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, []);

  const close = () => {
    setStage('hidden');
    sessionStorage.setItem('rm_football_popup', '1');
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!email || submitting) return;
    setSubmitting(true);
    try {
      await fetch('https://api.web3forms.com/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
        body: JSON.stringify({
          access_key: 'f5469a22-bfca-4389-b823-c660dae5de53',
          subject: '⚽ Catálogo Mundialista · Cliente quiere el catálogo',
          from_name: 'Role Machine — Mundialista',
          message: `🏆 ¡Nuevo cliente quiere el catálogo mundialista!\n\nEl cliente con correo: ${email}\nha solicitado recibir el catálogo mundialista de productos branded (balones, camisetas, gorras, etc).\n\n👉 Acción: enviarle el catálogo PDF al correo proporcionado.`,
          email,
          tipo: 'Cliente quiere catálogo mundialista',
        }),
      });
      setSent(true);
    } catch (err) {}
    setSubmitting(false);
  };

  if (stage === 'idle' || stage === 'hidden') return null;

  return (
    <>
      {/* ANIMATION: jugador patea el balón, gol */}
      {(stage === 'animation' || stage === 'confetti') && (
        <div style={{
          position: 'fixed', inset: 0, zIndex: 999,
          pointerEvents: 'none',
          overflow: 'hidden',
          background: 'rgba(5,15,75,0.10)',
        }}>
          {/* Arco realista (izquierda) */}
          <div style={{
            position: 'absolute', left: '4%', top: '50%',
            transform: 'translateY(-50%)',
            animation: 'goalShake 0.4s ease 1.9s',
          }}>
            <GoalNet/>
          </div>

          {/* Jugador (espejado, viene de la derecha) */}
          <img
            src={stage === 'animation' ? 'assets/jugador-dribbling.png' : 'assets/jugador-pateando.png'}
            alt=""
            style={{
              position: 'absolute', right: '4%', top: '50%',
              height: 'clamp(240px, 36vh, 420px)', width: 'auto',
              transform: 'translateY(-55%) scaleX(-1)',
              animation: 'playerKickRight 1.8s ease-out',
              filter: 'drop-shadow(0 12px 24px rgba(5,15,75,0.25))',
            }}/>

          {/* Balón volando (de derecha a izquierda) */}
          <div style={{
            position: 'absolute', top: '55%',
            width: 52, height: 52,
            animation: 'ballFlyLeft 1.4s cubic-bezier(.4,0,.6,1) 0.5s forwards',
            opacity: 0,
          }}>
            <FootballSVG/>
          </div>

          {/* GOL text flash */}
          <div style={{
            position: 'absolute', top: '18%', left: '50%',
            transform: 'translateX(-50%)',
            fontFamily: 'var(--display)', fontWeight: 800,
            fontSize: 'clamp(60px, 10vw, 140px)',
            letterSpacing: '-0.04em',
            color: '#FFCE00',
            textShadow: '0 6px 20px rgba(5,15,75,0.4)',
            opacity: 0,
            animation: 'golFlash 1.0s ease 1.9s',
          }}>
            ¡GOL!
          </div>

          {/* CONFETTI (azul + amarillo) */}
          {stage === 'confetti' && (
            <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
              {Array.from({ length: 60 }).map((_, i) => {
                const left = Math.random() * 100;
                const delay = Math.random() * 0.5;
                const duration = 1.6 + Math.random() * 1.4;
                const size = 8 + Math.random() * 8;
                const colors = ['#FFCE00', '#0F47AF', '#005FFF', '#ED1C24', '#00C8FF'];
                const color = colors[Math.floor(Math.random() * colors.length)];
                const rot = Math.random() * 360;
                return (
                  <span key={i} style={{
                    position: 'absolute',
                    top: '-20px',
                    left: `${left}%`,
                    width: size, height: size * 0.4,
                    background: color,
                    transform: `rotate(${rot}deg)`,
                    animation: `confettiFall ${duration}s ease-in ${delay}s forwards`,
                    borderRadius: 2,
                  }}/>
                );
              })}
            </div>
          )}
        </div>
      )}

      {/* POPUP */}
      {stage === 'popup' && (
        <div onClick={close} style={{
          position: 'fixed', inset: 0, zIndex: 1000,
          background: 'rgba(5,15,75,0.4)',
          backdropFilter: 'blur(4px)',
          WebkitBackdropFilter: 'blur(4px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          padding: 20,
          animation: 'fbOverlayIn 0.3s ease',
        }}>
          <div onClick={(e) => e.stopPropagation()} style={{
            position: 'relative',
            width: '100%', maxWidth: 520,
            background: '#fff',
            color: 'var(--navy)',
            borderRadius: 22,
            padding: 'clamp(28px, 4.5vw, 44px)',
            overflow: 'hidden',
            boxShadow: '0 24px 60px rgba(5,15,75,0.30)',
            animation: 'fbPopIn 0.5s cubic-bezier(.22,.9,.3,1.2)',
          }}>
            {/* Top accent: bandera Ecuador */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0,
              height: 5, display: 'flex',
            }}>
              <div style={{ flex: 2, background: '#FFCE00' }}/>
              <div style={{ flex: 1, background: '#0F47AF' }}/>
              <div style={{ flex: 1, background: '#ED1C24' }}/>
            </div>

            {/* Close */}
            <button onClick={close} aria-label="Cerrar" style={{
              position: 'absolute', top: 14, right: 14,
              width: 32, height: 32, borderRadius: '50%',
              background: 'rgba(5,15,75,0.06)', color: 'var(--navy)',
              border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18,
            }}>×</button>

            {sent ? (
              <div style={{ textAlign: 'center', padding: '12px 0' }}>
                <div style={{ fontSize: 56, marginBottom: 12 }}>⚽🎉</div>
                <h3 style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 28, color: 'var(--navy)', marginBottom: 10, letterSpacing: '-0.03em' }}>
                  ¡Gol! Te llegará pronto.
                </h3>
                <p style={{ fontSize: 14, color: 'var(--muted)', lineHeight: 1.5, marginBottom: 22 }}>
                  Revisa tu correo — te enviaremos el catálogo mundialista.
                </p>
                <a href={WA_MUNDIAL} target="_blank" rel="noreferrer" className="btn btn-primary">
                  Escríbenos por WhatsApp →
                </a>
              </div>
            ) : (
              <div style={{ textAlign: 'center' }}>
                {/* Mini bandera */}
                <div style={{
                  display: 'inline-flex', gap: 3, marginTop: 6, marginBottom: 16,
                }}>
                  <span style={{ width: 28, height: 18, background: '#FFCE00', borderRadius: 3 }}/>
                  <span style={{ width: 14, height: 18, background: '#0F47AF', borderRadius: 3 }}/>
                  <span style={{ width: 14, height: 18, background: '#ED1C24', borderRadius: 3 }}/>
                </div>

                <h3 style={{
                  fontFamily: 'var(--display)', fontWeight: 800,
                  fontSize: 'clamp(26px, 4vw, 38px)',
                  letterSpacing: '-0.035em', lineHeight: 1.0,
                  color: 'var(--navy)',
                  margin: 0, marginBottom: 14,
                }}>
                  La pasión del fútbol<br/>
                  <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--blue)' }}>
                    vívela con tu marca
                  </span>
                </h3>

                <p style={{
                  fontSize: 14.5, color: 'var(--ink)', lineHeight: 1.55,
                  margin: 0, marginBottom: 16, maxWidth: 420, marginInline: 'auto',
                }}>
                  Recibe el catálogo mundialista con productos branded para tu negocio:
                  balones, camisetas, gorras y más — personalizados con tu marca.
                </p>

                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  background: '#FFF8E1',
                  color: '#5C3A00',
                  padding: '8px 14px', borderRadius: 999,
                  fontSize: 12.5, fontWeight: 500,
                  marginBottom: 22,
                  border: '1px solid #FFCE00',
                }}>
                  ⏱ Los tiempos de producción se agotan antes del Mundial. Pide el tuyo hoy.
                </div>

                <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <input
                    type="email" required value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="tu@correo.com"
                    style={{
                      width: '100%', appearance: 'none',
                      border: '1.5px solid var(--line-2)',
                      background: '#fff', color: 'var(--ink)',
                      padding: '14px 20px', borderRadius: 999, fontSize: 14,
                      fontFamily: 'var(--sans)', outline: 'none',
                      textAlign: 'center',
                    }}/>
                  <button type="submit" disabled={!email || submitting} className="btn btn-primary"
                    style={{
                      justifyContent: 'center',
                      opacity: (!email || submitting) ? 0.6 : 1,
                      cursor: (!email || submitting) ? 'not-allowed' : 'pointer',
                    }}>
                    {submitting ? 'Enviando...' : 'Quiero el catálogo ⚽'}
                  </button>
                  <a href={WA_MUNDIAL} target="_blank" rel="noreferrer"
                    style={{
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                      color: 'var(--muted)', fontSize: 13, fontWeight: 500,
                      marginTop: 2, padding: 8,
                    }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                      <path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1s-1.3-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.3-.1-.5-.2zM12 2A10 10 0 0 0 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
                    </svg>
                    o pídelo por WhatsApp
                  </a>
                </form>
              </div>
            )}
          </div>
        </div>
      )}

      <style>{`
        @keyframes confettiFall {
          0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
          100% { transform: translateY(110vh) rotate(720deg); opacity: 1; }
        }
        @keyframes fbOverlayIn { 0% { opacity: 0; } 100% { opacity: 1; } }
        @keyframes fbPopIn {
          0%   { opacity: 0; transform: scale(0.88) translateY(20px); }
          100% { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes playerKickRight {
          0%   { transform: translate(150%, -55%) scaleX(-1); }
          60%  { transform: translate(0, -55%) scaleX(-1); }
          70%  { transform: translate(0, -55%) scaleX(-1) rotate(8deg); }
          100% { transform: translate(-20px, -55%) scaleX(-1) rotate(0); }
        }
        @keyframes ballFlyLeft {
          0%   { opacity: 0; right: 14%; top: 55%; transform: scale(0.7) rotate(0deg); left: auto; }
          5%   { opacity: 1; }
          100% { opacity: 1; right: 78%; top: 50%; transform: scale(1.1) rotate(-720deg); left: auto; }
        }
        @keyframes playerKick {
          0%   { transform: translate(-150%, -30%); }
          60%  { transform: translate(0, -30%); }
          70%  { transform: translate(0, -30%) rotate(-8deg); }
          100% { transform: translate(20px, -30%) rotate(0); }
        }
        @keyframes ballFly {
          0%   { opacity: 0; left: 14%; top: 55%; transform: scale(0.7) rotate(0deg); }
          5%   { opacity: 1; }
          100% { opacity: 1; left: 78%; top: 50%; transform: scale(1.1) rotate(720deg); }
        }
        @keyframes goalShake {
          0%, 100% { transform: translateY(-50%) translateX(0); }
          25%      { transform: translateY(-50%) translateX(6px); }
          50%      { transform: translateY(-50%) translateX(-4px); }
          75%      { transform: translateY(-50%) translateX(2px); }
        }
        @keyframes golFlash {
          0%   { opacity: 0; transform: translateX(-50%) scale(0.5); }
          20%  { opacity: 1; transform: translateX(-50%) scale(1.15); }
          80%  { opacity: 1; transform: translateX(-50%) scale(1); }
          100% { opacity: 0; transform: translateX(-50%) scale(1); }
        }
      `}</style>
    </>
  );
}

const WA_MUNDIAL = 'https://wa.me/593962865530?text=' + encodeURIComponent('Quiero el catálogo mundialista');

function PlayerEcuador() {
  return (
    <svg viewBox="0 0 120 200" width="120" height="200">
      {/* Cabeza */}
      <circle cx="60" cy="32" r="18" fill="#D9A074"/>
      <path d="M42 30 Q60 14 78 30 Q70 22 60 22 Q50 22 42 30 Z" fill="#1a1a1a"/>
      {/* Cuerpo (camiseta amarilla Ecuador) */}
      <path d="M30 60 L90 60 L96 130 L24 130 Z" fill="#FFCE00"/>
      {/* Detalle azul y rojo (banda) */}
      <rect x="30" y="98" width="60" height="6" fill="#0F47AF"/>
      <rect x="30" y="104" width="60" height="4" fill="#ED1C24"/>
      {/* Mangas */}
      <ellipse cx="28" cy="68" rx="10" ry="14" fill="#FFCE00"/>
      <ellipse cx="92" cy="68" rx="10" ry="14" fill="#FFCE00"/>
      {/* Logo / número */}
      <text x="60" y="84" textAnchor="middle" fontFamily="var(--display)" fontWeight="800" fontSize="20" fill="#0F47AF">EC</text>
      {/* Piernas (shorts azules) */}
      <rect x="36" y="128" width="20" height="34" fill="#0F47AF" rx="2"/>
      <rect x="64" y="128" width="20" height="34" fill="#0F47AF" rx="2"/>
      {/* Medias amarillas */}
      <rect x="36" y="160" width="20" height="18" fill="#FFCE00"/>
      <rect x="64" y="160" width="20" height="18" fill="#FFCE00"/>
      {/* Zapatos */}
      <ellipse cx="46" cy="184" rx="14" ry="6" fill="#000"/>
      <ellipse cx="74" cy="184" rx="14" ry="6" fill="#000"/>
      {/* Brazos */}
      <ellipse cx="14" cy="92" rx="6" ry="20" fill="#D9A074" transform="rotate(-20 14 92)"/>
      <ellipse cx="106" cy="92" rx="6" ry="20" fill="#D9A074" transform="rotate(20 106 92)"/>
    </svg>
  );
}

function GoalNet() {
  return (
    <svg width="340" height="240" viewBox="0 0 340 240" style={{ filter: 'drop-shadow(0 12px 24px rgba(5,15,75,0.25))' }}>
      {/* Perspectiva trasera (red) — tono más claro */}
      <polygon points="40,30 300,30 280,55 60,55" fill="rgba(255,255,255,0.6)" stroke="var(--navy)" strokeWidth="2"/>
      <polygon points="40,30 60,55 60,200 40,210" fill="rgba(255,255,255,0.55)" stroke="var(--navy)" strokeWidth="2"/>
      <polygon points="300,30 280,55 280,200 300,210" fill="rgba(255,255,255,0.55)" stroke="var(--navy)" strokeWidth="2"/>
      <polygon points="60,200 280,200 300,210 40,210" fill="rgba(255,255,255,0.7)" stroke="var(--navy)" strokeWidth="2"/>

      {/* Red trasera (líneas diagonales) */}
      {Array.from({ length: 16 }).map((_, i) => {
        const t = i / 15;
        const x = 60 + (280 - 60) * t;
        return <line key={`vr${i}`} x1={x} y1="55" x2={x} y2="200" stroke="rgba(5,15,75,0.20)" strokeWidth="1"/>;
      })}
      {Array.from({ length: 8 }).map((_, i) => {
        const t = i / 7;
        const y = 55 + (200 - 55) * t;
        return <line key={`hr${i}`} x1="60" y1={y} x2="280" y2={y} stroke="rgba(5,15,75,0.20)" strokeWidth="1"/>;
      })}

      {/* Postes principales (frente) — blancos grosor 6 */}
      <rect x="34" y="28" width="6" height="190" fill="#fff" stroke="var(--navy)" strokeWidth="2" rx="1"/>
      <rect x="300" y="28" width="6" height="190" fill="#fff" stroke="var(--navy)" strokeWidth="2" rx="1"/>
      <rect x="34" y="24" width="272" height="8" fill="#fff" stroke="var(--navy)" strokeWidth="2" rx="1"/>

      {/* Suelo / sombra */}
      <ellipse cx="170" cy="222" rx="150" ry="6" fill="rgba(5,15,75,0.18)"/>
    </svg>
  );
}

function FootballSVG() {
  return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <defs>
        <radialGradient id="ballShade" cx="35%" cy="35%" r="65%">
          <stop offset="0%" stopColor="#fff"/>
          <stop offset="60%" stopColor="#f0f0f0"/>
          <stop offset="100%" stopColor="#bbb"/>
        </radialGradient>
      </defs>
      {/* Balón blanco con sombreado */}
      <circle cx="50" cy="50" r="48" fill="url(#ballShade)" stroke="#1a1a1a" strokeWidth="1.5"/>
      {/* Pentágonos negros (clásico) */}
      <polygon points="50,22 62,32 58,46 42,46 38,32" fill="#1a1a1a"/>
      <polygon points="22,46 34,38 40,52 30,64 18,56" fill="#1a1a1a" opacity="0.85"/>
      <polygon points="78,46 66,38 60,52 70,64 82,56" fill="#1a1a1a" opacity="0.85"/>
      <polygon points="38,72 42,58 58,58 62,72 50,82" fill="#1a1a1a" opacity="0.85"/>
      {/* Líneas conectoras (hexágonos) */}
      <line x1="50" y1="22" x2="42" y2="46" stroke="#1a1a1a" strokeWidth="0.8"/>
      <line x1="50" y1="22" x2="58" y2="46" stroke="#1a1a1a" strokeWidth="0.8"/>
      <line x1="42" y1="46" x2="40" y2="52" stroke="#1a1a1a" strokeWidth="0.8"/>
      <line x1="58" y1="46" x2="60" y2="52" stroke="#1a1a1a" strokeWidth="0.8"/>
      <line x1="40" y1="52" x2="42" y2="58" stroke="#1a1a1a" strokeWidth="0.8"/>
      <line x1="60" y1="52" x2="58" y2="58" stroke="#1a1a1a" strokeWidth="0.8"/>
    </svg>
  );
}

/* ════════════════════════ WHATSAPP QUOTE MODAL ════════════════════════ */

function WhatsAppQuoteModal() {
  const [open, setOpen] = useState(false);
  const [form, setForm] = useState({
    tipo: 'empresa',
    nombre: '', empresa: '', email: '', necesito: '',
    fechaEntrega: '', tieneArte: '',
  });
  const [sent, setSent] = useState(false);

  useEffect(() => {
    const handler = () => { setOpen(true); setSent(false); };
    window.addEventListener('open-wa-quote', handler);
    return () => window.removeEventListener('open-wa-quote', handler);
  }, []);

  const update = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const close = () => setOpen(false);

  const valid = form.nombre && form.email && form.necesito && form.fechaEntrega && form.tieneArte &&
                (form.tipo === 'persona' || (form.tipo === 'empresa' && form.empresa));

  const send = (e) => {
    e && e.preventDefault();
    if (!valid) return;
    const tipoLabel = form.tipo === 'empresa' ? 'Empresa' : 'Persona natural';
    const text =
`Hola Role Machine, quiero cotizar un proyecto.

📋 Tipo: ${tipoLabel}
👤 Nombre: ${form.nombre}${form.tipo === 'empresa' ? `\n🏢 Empresa: ${form.empresa}` : ''}
📧 Email: ${form.email}
📅 Fecha de entrega deseada: ${form.fechaEntrega}
🎨 Arte/diseño: ${form.tieneArte}

💬 Lo que necesito:
${form.necesito}`;
    const url = `https://wa.me/593962865530?text=${encodeURIComponent(text)}`;
    if (typeof window.fbq === 'function') {
      try { window.fbq('track', 'Lead', { content_name: 'Cotización WhatsApp', content_category: tipoLabel }); } catch (e) {}
    }
    window.open(url, '_blank');
    setSent(true);
  };

  if (!open) return null;

  const fieldStyle = (focused = false) => ({
    width: '100%', appearance: 'none',
    border: '1.5px solid var(--line-2)',
    borderRadius: 10, padding: '11px 14px',
    fontFamily: 'var(--sans)', fontSize: 13.5,
    color: 'var(--ink)', background: '#fff',
    outline: 'none', boxSizing: 'border-box',
  });

  return (
    <div onClick={close} style={{
      position: 'fixed', inset: 0, zIndex: 1100,
      background: 'rgba(5,15,75,0.55)',
      backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 16, overflowY: 'auto',
      animation: 'fbOverlayIn 0.25s ease',
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        position: 'relative',
        width: '100%', maxWidth: 520,
        background: '#fff', color: 'var(--ink)',
        borderRadius: 20, padding: 'clamp(24px, 4vw, 36px)',
        overflow: 'hidden', boxShadow: '0 24px 60px rgba(5,15,75,0.30)',
        animation: 'fbPopIn 0.4s cubic-bezier(.22,.9,.3,1.2)',
        marginTop: 30, marginBottom: 30,
      }}>
        {/* Close */}
        <button onClick={close} aria-label="Cerrar" style={{
          position: 'absolute', top: 12, right: 12,
          width: 32, height: 32, borderRadius: '50%',
          background: 'rgba(5,15,75,0.06)', color: 'var(--navy)',
          border: 'none', cursor: 'pointer', fontSize: 18,
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        }}>×</button>

        {sent ? (
          <div style={{ textAlign: 'center', padding: '12px 0' }}>
            <div style={{
              width: 64, height: 64, borderRadius: '50%',
              background: '#25D366', color: '#fff',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18,
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1s-1.3-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.3-.1-.5-.2zM12 2A10 10 0 0 0 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
            </div>
            <h3 style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: 24, color: 'var(--navy)', letterSpacing: '-0.025em', marginBottom: 10 }}>
              ¡Abriendo WhatsApp!
            </h3>
            <p style={{ fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5, marginBottom: 20 }}>
              Si no se abrió automáticamente, haz clic abajo.
            </p>
            <button onClick={(e) => send(e)} className="btn btn-primary" style={{ justifyContent: 'center' }}>
              Abrir WhatsApp →
            </button>
            <div style={{ marginTop: 14 }}>
              <button onClick={() => { setSent(false); setForm({ tipo: 'empresa', nombre: '', empresa: '', email: '', necesito: '', fechaEntrega: '', tieneArte: '' }); close(); }}
                style={{ appearance: 'none', background: 'transparent', border: 'none', color: 'var(--muted)', fontSize: 13, cursor: 'pointer', padding: 8 }}>
                Cerrar
              </button>
            </div>
          </div>
        ) : (
          <form onSubmit={send} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div>
              <h3 style={{
                fontFamily: 'var(--display)', fontWeight: 800,
                fontSize: 'clamp(22px, 3vw, 28px)',
                letterSpacing: '-0.03em', lineHeight: 1.1,
                color: 'var(--navy)', margin: 0, marginBottom: 6,
              }}>
                Cotiza por <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--blue)' }}>WhatsApp</span>
              </h3>
              <p style={{ fontSize: 13, color: 'var(--muted)', margin: 0, lineHeight: 1.45 }}>
                Cuéntanos brevemente tu proyecto. Te respondemos al instante.
              </p>
              <p style={{ fontSize: 11, color: 'var(--muted)', margin: '8px 0 0', lineHeight: 1.4, fontStyle: 'italic', opacity: 0.85 }}>
                Completar estos datos nos permite atenderte de forma más ágil y precisa.
              </p>
            </div>

            {/* Tipo de cliente */}
            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                Soy <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <div style={{ display: 'flex', gap: 6 }}>
                {[
                  { v: 'empresa', l: 'Empresa' },
                  { v: 'persona', l: 'Persona natural' },
                ].map(o => (
                  <button key={o.v} type="button" onClick={() => update('tipo', o.v)} style={{
                    flex: 1, appearance: 'none',
                    border: form.tipo === o.v ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
                    background: form.tipo === o.v ? 'var(--blue)' : '#fff',
                    color: form.tipo === o.v ? '#fff' : 'var(--ink)',
                    padding: '10px 14px', borderRadius: 10,
                    fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
                    cursor: 'pointer', transition: 'all 0.15s ease',
                  }}>{o.l}</button>
                ))}
              </div>
            </div>

            {/* Nombre */}
            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                Nombre completo <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <input type="text" required value={form.nombre}
                onChange={(e) => update('nombre', e.target.value)}
                placeholder="Tu nombre" style={fieldStyle()}/>
            </div>

            {/* Empresa (condicional) */}
            {form.tipo === 'empresa' && (
              <div>
                <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                  Razón social / Empresa <span style={{ color: '#E61C8E' }}>*</span>
                </label>
                <input type="text" required value={form.empresa}
                  onChange={(e) => update('empresa', e.target.value)}
                  placeholder="Nombre de tu empresa" style={fieldStyle()}/>
              </div>
            )}

            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                Email <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <input type="email" required value={form.email}
                onChange={(e) => update('email', e.target.value)}
                placeholder="tu@correo.com" style={fieldStyle()}/>
            </div>

            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                ¿Qué necesitas? <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <textarea required value={form.necesito}
                onChange={(e) => update('necesito', e.target.value)}
                placeholder="Ej: 500 cajas plegables 10×10×5cm en couché 300g, full color, troquel."
                rows={3}
                style={{ ...fieldStyle(), resize: 'vertical', minHeight: 80 }}/>
            </div>

            {/* Fecha de entrega */}
            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                ¿Para cuándo la necesitas? <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <div style={{ display: 'flex', gap: 6, marginBottom: 6 }}>
                <button type="button"
                  onClick={() => update('fechaEntrega', '🔥 Lo necesito YA (urgente)')}
                  style={{
                    flex: 1, appearance: 'none',
                    border: form.fechaEntrega === '🔥 Lo necesito YA (urgente)' ? '1.5px solid #E61C8E' : '1.5px solid var(--line-2)',
                    background: form.fechaEntrega === '🔥 Lo necesito YA (urgente)' ? '#E61C8E' : '#fff',
                    color: form.fechaEntrega === '🔥 Lo necesito YA (urgente)' ? '#fff' : 'var(--ink)',
                    padding: '10px 12px', borderRadius: 10,
                    fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 700,
                    cursor: 'pointer', transition: 'all 0.15s ease',
                  }}>
                  🔥 Urgente
                </button>
                <button type="button"
                  onClick={() => update('fechaEntrega', 'Esta semana')}
                  style={{
                    flex: 1, appearance: 'none',
                    border: form.fechaEntrega === 'Esta semana' ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
                    background: form.fechaEntrega === 'Esta semana' ? 'var(--blue)' : '#fff',
                    color: form.fechaEntrega === 'Esta semana' ? '#fff' : 'var(--ink)',
                    padding: '10px 12px', borderRadius: 10,
                    fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 600,
                    cursor: 'pointer', transition: 'all 0.15s ease',
                  }}>
                  Esta semana
                </button>
                <button type="button"
                  onClick={() => update('fechaEntrega', 'Este mes')}
                  style={{
                    flex: 1, appearance: 'none',
                    border: form.fechaEntrega === 'Este mes' ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
                    background: form.fechaEntrega === 'Este mes' ? 'var(--blue)' : '#fff',
                    color: form.fechaEntrega === 'Este mes' ? '#fff' : 'var(--ink)',
                    padding: '10px 12px', borderRadius: 10,
                    fontFamily: 'var(--sans)', fontSize: 12.5, fontWeight: 600,
                    cursor: 'pointer', transition: 'all 0.15s ease',
                  }}>
                  Este mes
                </button>
              </div>
              <div style={{ position: 'relative' }}>
                <span style={{
                  position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)',
                  fontSize: 11.5, color: 'var(--muted)', pointerEvents: 'none',
                  fontStyle: 'italic',
                }}>
                  o elige fecha →
                </span>
                <input type="date" value={form.fechaEntrega && /^\d{4}-\d{2}-\d{2}$/.test(form.fechaEntrega) ? form.fechaEntrega : ''}
                  onChange={(e) => update('fechaEntrega', e.target.value)}
                  min={new Date().toISOString().split('T')[0]}
                  style={{ ...fieldStyle(), paddingLeft: 110, fontSize: 12.5 }}/>
              </div>
            </div>

            {/* Arte / diseño */}
            <div>
              <label style={{ display: 'block', marginBottom: 6, fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>
                ¿Ya cuentas con arte/diseño? <span style={{ color: '#E61C8E' }}>*</span>
              </label>
              <div style={{ display: 'flex', gap: 6 }}>
                {[
                  { v: '✅ Sí, tengo arte listo', l: 'Sí, tengo el arte' },
                  { v: '❌ No, necesito diseño', l: 'No, necesito diseño' },
                ].map(o => (
                  <button key={o.v} type="button" onClick={() => update('tieneArte', o.v)} style={{
                    flex: 1, appearance: 'none',
                    border: form.tieneArte === o.v ? '1.5px solid var(--blue)' : '1.5px solid var(--line-2)',
                    background: form.tieneArte === o.v ? 'var(--blue)' : '#fff',
                    color: form.tieneArte === o.v ? '#fff' : 'var(--ink)',
                    padding: '10px 14px', borderRadius: 10,
                    fontFamily: 'var(--sans)', fontSize: 13, fontWeight: 600,
                    cursor: 'pointer', transition: 'all 0.15s ease',
                  }}>{o.l}</button>
                ))}
              </div>
            </div>

            <button type="submit" disabled={!valid} style={{
              appearance: 'none', border: 'none',
              padding: '14px 22px', borderRadius: 999,
              fontFamily: 'var(--sans)', fontSize: 14, fontWeight: 700,
              color: '#fff', background: valid ? '#25D366' : 'rgba(5,15,75,0.15)',
              cursor: valid ? 'pointer' : 'not-allowed',
              transition: 'all 0.18s ease',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              boxShadow: valid ? '0 8px 20px rgba(37,211,102,0.3)' : 'none',
            }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                <path d="M17.5 14.4c-.3-.1-1.8-.9-2-1-.3-.1-.5-.1-.7.1-.2.3-.8 1-1 1.2-.2.2-.3.2-.6.1s-1.3-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.2-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5.1 4.5.7.3 1.3.5 1.7.6.7.2 1.4.2 1.9.1.6-.1 1.8-.7 2-1.5.2-.7.2-1.4.2-1.5-.2-.1-.3-.1-.5-.2zM12 2A10 10 0 0 0 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
              </svg>
              Enviar a WhatsApp
            </button>

            {!valid && (
              <div style={{ fontSize: 11.5, color: 'var(--muted)', textAlign: 'center', marginTop: -4 }}>
                Completa todos los campos para habilitar el envío
              </div>
            )}
          </form>
        )}
      </div>
    </div>
  );
}

// Helper global para abrir el modal desde cualquier botón
if (typeof window !== 'undefined') {
  window.openWAQuote = () => window.dispatchEvent(new Event('open-wa-quote'));
}

function InstagramFeed() {
  return (
    <section id="instagram" style={{ padding: 'var(--pad-y) 0', background: 'var(--paper-2)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40, flexWrap: 'wrap', gap: 24 }}>
          <div style={{ maxWidth: 720 }}>
            <span className="eyebrow">
              <span className="dot"></span>
              Instagram · Últimos trabajos
            </span>
            <h2 className="h2" style={{ marginTop: 18 }}>
              Mira nuestro<br/>
              <span className="italic" style={{ color: 'var(--blue)' }}>último trabajo</span>.
            </h2>
            <p style={{ fontSize: 15, color: 'var(--muted)', lineHeight: 1.5, marginTop: 16, maxWidth: 540 }}>
              Cada semana imprimimos algo nuevo. Síguenos en Instagram para ver el detrás
              de cámaras y las marcas que confían en Role Machine.
            </p>
          </div>
          <a href="https://instagram.com/rolemachine" target="_blank" rel="noreferrer"
             className="btn btn-ghost" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.81.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.81-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.81-.25-2.23-.41a3.72 3.72 0 0 1-1.38-.9 3.72 3.72 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.81.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.77.13 4.9.33 4.14.63a5.92 5.92 0 0 0-2.13 1.38A5.92 5.92 0 0 0 .63 4.14C.33 4.9.13 5.77.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.28.26 2.15.56 2.91.31.79.73 1.46 1.38 2.13.66.66 1.34 1.07 2.13 1.38.76.3 1.63.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.28-.06 2.15-.26 2.91-.56a5.92 5.92 0 0 0 2.13-1.38c.66-.66 1.07-1.34 1.38-2.13.3-.76.5-1.63.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.28-.26-2.15-.56-2.91a5.92 5.92 0 0 0-1.38-2.13A5.92 5.92 0 0 0 19.86.63c-.76-.3-1.63-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z"/>
            </svg>
            Síguenos @rolemachine →
          </a>
        </div>
        {/* Elfsight Instagram Feed */}
        <div className="elfsight-app-0b735b67-472f-420a-b0f1-5bb59f5cf401" data-elfsight-app-lazy></div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Header, Hero, Ticker, QuienesSomos, Servicios, Promocionales, GranFormato, Sostenibilidad, Proceso, Blog, InstagramFeed, Testimonios, Contacto, BolsaTrabajo, FootballPopup, WhatsAppQuoteModal, Footer,
});
