// sections.jsx — Copa Culinaria Carozzi 2026
// Header, Hero, About, Categories, Clasificatorias, Banner, Premios, Sponsors, Footer

const { useState, useEffect, useRef } = React;

// ─────────────── Shared bits ───────────────

const Arrow = ({size=14}) => (
  <svg className="arrow" width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const scrollToForm = (cat) => {
  const el = document.getElementById('inscripcion');
  if (el) el.scrollIntoView ? window.scrollTo({top: el.offsetTop - 60, behavior:'smooth'}) : null;
  if (cat) window.dispatchEvent(new CustomEvent('preselect-category', {detail: cat}));
};

const LogoMark = ({white=false, size=44}) => (
  <div style={{display:'flex', alignItems:'center', gap:14}}>
    <img src="assets/logo.gif?v=9" alt="Copa Culinaria Carozzi" style={{height:size, width:'auto'}} />
    <div style={{display:'flex', flexDirection:'column', lineHeight:1}}>
      <span style={{fontFamily:'var(--f-display)', fontSize:11, letterSpacing:'.18em', color: white ? '#fff' : '#1a1a1a', fontWeight:700}}>COPA CULINARIA</span>
      <span style={{fontFamily:'var(--f-body)', fontSize:9, letterSpacing:'.28em', color: white ? 'rgba(255,255,255,.55)' : 'rgba(0,0,0,.5)', marginTop:4, fontWeight:600}}>CAROZZI · XI EDICIÓN 2026</span>
    </div>
  </div>
);

// ─────────────── 1. HEADER ───────────────

function Header(){
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [narrow, setNarrow] = useState(false);
  useEffect(()=>{
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onResize = () => setNarrow(window.innerWidth < 720);
    window.addEventListener('scroll', onScroll);
    window.addEventListener('resize', onResize);
    onResize();
    return ()=> {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  },[]);

  const nav = [
    {label:'Concurso', id:'concurso'},
    {label:'Categorías', id:'categorias'},
    {label:'Clasificatorias', id:'clasificatorias'},
    {label:'Premios', id:'premios'},
    {label:'Galería', id:'galeria', url:'galeria.html'},
    {label:'Bases', id:'bases'},
    {label:'Contacto', id:'contacto'},
  ];

  const go = (n) => {
    // Si el item del menú tiene una url, es una página aparte: navegar a ella
    if (n && n.url) { window.location.href = n.url; return; }
    const id = (n && n.id) ? n.id : n;
    const el = document.getElementById(id);
    if (el) window.scrollTo({top: el.offsetTop - 60, behavior:'smooth'});
    setOpen(false);
  };

  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      transition:'all .3s ease',
      background: scrolled ? 'rgba(11,11,11,.86)' : 'linear-gradient(to bottom, rgba(0,0,0,.55), transparent)',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,.07)' : '1px solid transparent',
    }}>
      <div className="wrap" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding: scrolled ? (narrow ? '10px 16px' : '14px 28px') : (narrow ? '12px 16px' : '20px 28px'), transition:'padding .3s ease'}}>
        <a href="#top" onClick={(e)=>{e.preventDefault(); window.scrollTo({top:0, behavior:'smooth'})}}>
          <LogoMark white={true} size={narrow ? (scrolled ? 56 : 64) : (scrolled ? 96 : 120)} />
        </a>

        <nav className="desktop-nav" style={{display:'flex', alignItems:'center', gap:30}}>
          {nav.map(n => (
            <a key={n.id} onClick={()=>go(n)} style={{
              fontSize:13, fontWeight:600, color:'rgba(255,255,255,.8)',
              cursor:'pointer', letterSpacing:'.04em', transition:'color .2s'
            }} onMouseEnter={e=>e.target.style.color='#fff'} onMouseLeave={e=>e.target.style.color='rgba(255,255,255,.8)'}>
              {n.label}
            </a>
          ))}
        </nav>

        <button className="btn btn-primary" onClick={()=>scrollToForm()} style={{padding:'12px 22px', fontSize:13}}>
          Inscríbete <Arrow size={12}/>
        </button>

        <button className="mobile-toggle" onClick={()=>setOpen(o=>!o)} aria-label="Menú" style={{
          display:'none', background:'transparent', border:'none', color:'#fff', padding:8
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d={open ? "M6 6l12 12M6 18L18 6" : "M4 7h16M4 12h16M4 17h16"} stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
        </button>
      </div>

      {open && (
        <div className="mobile-menu" style={{background:'rgba(11,11,11,.96)', borderTop:'1px solid rgba(255,255,255,.08)', padding:'18px 28px 24px'}}>
          {nav.map(n => (
            <a key={n.id} onClick={()=>go(n)} style={{display:'block', padding:'12px 0', fontSize:16, fontWeight:600, color:'#fff', borderBottom:'1px solid rgba(255,255,255,.06)'}}>{n.label}</a>
          ))}
          <button className="btn btn-primary" style={{marginTop:18, width:'100%'}} onClick={()=>{scrollToForm(); setOpen(false)}}>Inscríbete aquí <Arrow size={12}/></button>
        </div>
      )}

      <style>{`
        @media (max-width: 920px){
          .desktop-nav { display:none !important; }
          .mobile-toggle { display:flex !important; }
          header .btn-primary { display:none; }
        }
        @media (min-width: 921px){
          .mobile-menu { display:none !important; }
        }
      `}</style>
    </header>
  );
}

// ─────────────── 2. HERO ───────────────
// Portada según diseño oficial: video de fondo + título compuesto (PNG con
// tipografías oficiales, logo, trazo de Chile, XI Edición 2026) + dos botones
// + tira de ciudades. Sin texto duplicado.

function Hero(){
  const videoRef = useRef(null);

  useEffect(()=>{
    const v = videoRef.current;
    if (v){
      v.muted = true;
      v.playsInline = true;
      const playPromise = v.play();
      if (playPromise) playPromise.catch(()=>{/* autoplay blocked, no-op */});
    }
  },[]);

  return (
    <section id="top" data-screen-label="01 Hero" style={{
      position:'relative', overflow:'hidden',
      background:'var(--c-black)',
      minHeight:'100vh',
      display:'flex', flexDirection:'column'
    }}>
      {/* Video background */}
      <video
        ref={videoRef}
        autoPlay loop muted playsInline preload="auto"
        poster="assets/hero-kv.jpg?v=9"
        aria-hidden="true"
        style={{
          position:'absolute', inset:0, width:'100%', height:'100%',
          objectFit:'cover', objectPosition:'center',
          zIndex:0
        }}
      >
        <source src="assets/hero-video.mp4?v=9" type="video/mp4"/>
      </video>

      {/* Dark overlay for legibility */}
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, zIndex:1,
        background:'linear-gradient(180deg, rgba(11,11,11,.55) 0%, rgba(11,11,11,.35) 35%, rgba(11,11,11,.55) 70%, rgba(11,11,11,.9) 100%)'
      }}/>

      {/* Vignette at edges for extra contrast */}
      <div aria-hidden="true" style={{
        position:'absolute', inset:0, zIndex:1,
        background:'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.5) 100%)',
        pointerEvents:'none'
      }}/>

      {/* Main content layer */}
      <div className="hero-content" style={{
        position:'relative', zIndex:2,
        flex:1, display:'flex', flexDirection:'column', justifyContent:'center', alignItems:'center',
        padding:'170px 24px 30px',
        textAlign:'center',
        transform:'translateY(-3vh)'
      }}>
        {/* Composite title PNG (headline + logo + Chile + XI Edición 2026) */}
        <img src="assets/logo-portada.png?v=9"
          alt="El llamado al talento de Chile · Copa Culinaria Carozzi · XI Edición 2026"
          className="hero-title-img"
          style={{
            width:'100%', maxWidth:1180, height:'auto', display:'block',
            filter:'drop-shadow(0 12px 30px rgba(0,0,0,.5))'
          }}
        />

        {/* CTA buttons */}
        <div className="hero-buttons" style={{
          display:'flex', gap:14, marginTop:36, flexWrap:'wrap', justifyContent:'center'
        }}>
          <button className="btn-hero btn-hero-primary" onClick={()=>scrollToForm()}>
            Participar
          </button>
          <button className="btn-hero btn-hero-secondary" onClick={()=>{
            const el = document.getElementById('concurso');
            if (el) window.scrollTo({top:el.offsetTop-60, behavior:'smooth'});
          }}>
            Conocer más
          </button>
        </div>
      </div>

      {/* Cities strip at bottom */}
      <div style={{position:'relative', zIndex:2, padding:'0 24px 24px'}}>
        <img src="assets/chile-trazo.png?v=9" alt="Sedes 2026: Antofagasta · La Serena · Santiago · Valparaíso · Concepción · Puerto Montt"
          className="hero-cities-img"
          style={{
            width:'100%', maxWidth:1200, margin:'0 auto',
            display:'block', height:'auto',
            filter:'drop-shadow(0 6px 16px rgba(0,0,0,.45))'
          }}/>
      </div>

      <style>{`
        .btn-hero{
          font-family: var(--f-body);
          font-weight: 700;
          font-size: 16px;
          letter-spacing: .14em;
          text-transform: uppercase;
          padding: 18px 48px;
          border: none;
          cursor: pointer;
          transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
          min-width: 220px;
        }
        .btn-hero-primary{ background: var(--c-red); color: #fff; }
        .btn-hero-primary:hover{ background: var(--c-red-deep); transform: translateY(-1px); box-shadow: 0 12px 24px -10px rgba(226,35,26,.55); }
        .btn-hero-secondary{ background: #fff; color: #1a1a1a; }
        .btn-hero-secondary:hover{ background: var(--c-bone); transform: translateY(-1px); }

        @media (max-width: 720px){
          .hero-content { padding: 140px 18px 18px !important; transform: translateY(-2vh) !important; }
          .hero-title-img { max-width: 100% !important; }
          .hero-buttons { gap: 10px !important; margin-top: 24px !important; }
          .btn-hero { min-width: 0 !important; flex: 1; padding: 14px 18px !important; font-size: 13px !important; }
          .hero-cities-img { max-width: 100% !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── 3. ABOUT ───────────────

function About(){
  return (
    <section id="concurso" data-screen-label="02 Sobre el concurso" className="bg-bone pad-y">
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'5fr 7fr', gap:64, alignItems:'center'}} className="about-grid">

          {/* Photo collage — homage to previous editorial style, real photos */}
          <div style={{position:'relative'}} className="about-collage" data-reveal="left">
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gridTemplateRows:'auto auto', gap:14}}>
              <div style={{
                aspectRatio:'3/4', borderRadius:4, overflow:'hidden', gridRow:'1 / span 2',
                backgroundImage:'url(assets/photos/junior-cutting.jpg)',
                backgroundSize:'cover', backgroundPosition:'center top'
              }}/>
              <div style={{
                aspectRatio:'1/1', borderRadius:4, overflow:'hidden',
                backgroundImage:'url(assets/photos/final-junior.jpg)',
                backgroundSize:'cover', backgroundPosition:'center'
              }}/>
              <div style={{
                aspectRatio:'1/1', borderRadius:4, overflow:'hidden',
                backgroundImage:'url(assets/photos/dupla-portrait.jpg)',
                backgroundSize:'cover', backgroundPosition:'center'
              }}/>
            </div>
            {/* Floating badge */}
            <div style={{
              position:'absolute', bottom:-32, right:-22,
              background:'var(--c-red)', color:'#fff', padding:'24px 28px',
              borderRadius:4, maxWidth:240,
              boxShadow:'0 24px 48px -20px rgba(226,35,26,.45)'
            }} className="about-badge">
              <div style={{fontFamily:'var(--f-display)', fontSize:56, lineHeight:.9, fontWeight:700}}>XI</div>
              <div style={{fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', fontWeight:700, marginTop:6}}>once años forjando el talento culinario chileno</div>
            </div>
          </div>

          <div data-reveal="up">
            <div className="section-label">¿Qué es la Copa Culinaria?</div>
            <h2 className="display h-lg" style={{marginTop:18, marginBottom:24, color:'var(--c-navy)'}}>
              Once años elevando<br/>la cocina chilena.
            </h2>
            <p style={{fontSize:18, lineHeight:1.6, color:'#3a3a3a', marginBottom:20, textWrap:'pretty'}}>
              Copa Culinaria Carozzi es <strong style={{color:'var(--c-ink)'}}>la competencia gastronómica más importante de Chile</strong>: el escenario donde el talento se prueba, se mide y se transmite. Una apuesta concreta de Carozzi Food Service por el desarrollo de la gastronomía nacional.
            </p>
            <p style={{fontSize:16, lineHeight:1.6, color:'#555', marginBottom:32}}>
              Seis clasificatorias regionales, dos categorías —Junior y Profesional—, una gran final transmitida por Canal 13 y un premio que cambia carreras. En 2026, llega tu llamado.
            </p>

            <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, borderTop:'1px solid rgba(0,0,0,.1)', borderBottom:'1px solid rgba(0,0,0,.1)'}} className="about-stats">
              {[
                ['XI', 'ediciones'],
                ['6', 'ciudades sede'],
                ['10K USD', 'premio mayor'],
              ].map(([n, l])=> (
                <div key={l} style={{padding:'22px 0', borderRight:'1px solid rgba(0,0,0,.1)'}}>
                  <div className="display" style={{fontSize:40, color:'var(--c-navy)'}}>{n}</div>
                  <div style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color:'#666', marginTop:6, fontWeight:600}}>{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Highlight stripe — navy (matches the previous site's navy callout) */}
        <div data-reveal="scale" style={{
          marginTop:120, background:'var(--c-navy)', borderRadius:6,
          padding:'56px 56px', display:'grid', gridTemplateColumns:'auto 1fr auto', gap:40, alignItems:'center',
          position:'relative', overflow:'hidden'
        }} className="navy-stripe">
          <div aria-hidden="true" style={{
            position:'absolute', top:0, right:0, width:280, height:'100%',
            background:'radial-gradient(circle at top right, rgba(184,146,74,.18), transparent 60%)',
            pointerEvents:'none'
          }}/>
          <div style={{fontFamily:'var(--f-display)', fontSize:96, lineHeight:.85, color:'var(--c-warm-soft)', fontWeight:700, position:'relative'}}>26</div>
          <div style={{position:'relative'}}>
            <div className="eyebrow" style={{color:'var(--c-warm-soft)', marginBottom:8}}>Edición XI · 2026</div>
            <h3 className="h-md" style={{margin:0, fontFamily:'var(--f-display)', fontWeight:700, textTransform:'uppercase', lineHeight:.95, color:'#fff'}}>
              En busca de los mejores talentos culinarios del país.
            </h3>
          </div>
          <button className="btn btn-primary" onClick={()=>scrollToForm()} style={{position:'relative'}}>Postula ahora <Arrow/></button>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){
          .about-grid { grid-template-columns:1fr !important; gap:40px !important; }
          .about-badge { position:static !important; margin-top:22px; max-width:none !important; }
          .about-collage { margin-bottom: 24px; }
          .navy-stripe { grid-template-columns:1fr !important; padding:36px !important; text-align:left; }
          .navy-stripe > div:first-of-type { font-size:64px !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── 4. CATEGORIES ───────────────

function Categories(){
  const cats = [
    {
      id:'junior',
      label:'Junior',
      sub:'Estudiantes de gastronomía',
      desc:'Estudiantes de educación superior de gastronomía (CFT e institutos profesionales). El equipo es una dupla.',
      meta:'2 participantes · 1 coach',
      img:'assets/photos/junior-cutting.jpg',
      imgPos:'center 25%',
      stat:'10.000 USD'
    },
    {
      id:'profesional',
      label:'Senior',
      sub:'Cocineros profesionales destacados',
      desc:'Para cocineros profesionales que ya operan en hoteles, restaurantes y cocinas de alto nivel. Participación individual con un ayudante de apoyo.',
      meta:'1 participante · 1 ayudante',
      img:'assets/photos/dupla-portrait.jpg',
      imgPos:'center 30%',
      stat:'5.000.000 CLP'
    },
  ];

  return (
    <section id="categorias" data-screen-label="03 Categorías" className="bg-cream pad-y">
      <div className="wrap">
        <div data-reveal="up" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:24, marginBottom:60}}>
          <div>
            <div className="section-label">Dos rutas, un mismo escenario</div>
            <h2 className="display h-xl" style={{margin:'18px 0 0', color:'var(--c-navy)'}}>Categorías 2026</h2>
          </div>
          <p style={{maxWidth:420, color:'#444', fontSize:15, lineHeight:1.55, margin:0}}>
            Elige la categoría que te corresponde. Transmisión de Categoría Junior por canal 13.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:24}} className="cat-grid">
          {cats.map((c, i)=> (
            <article key={c.id} data-reveal="up" data-reveal-delay={i*120} style={{
              position:'relative', overflow:'hidden', borderRadius:6,
              background:'#fff', boxShadow:'0 1px 0 rgba(0,0,0,.06), 0 24px 48px -28px rgba(0,0,0,.18)'
            }}>
              <div style={{
                aspectRatio:'16/10', backgroundImage:`url(${c.img})`,
                backgroundSize:'cover', backgroundPosition:c.imgPos || 'center', position:'relative'
              }}>
                <div style={{
                  position:'absolute', inset:0,
                  background:'linear-gradient(to top, rgba(0,0,0,.65), transparent 50%)'
                }}/>
                <div style={{position:'absolute', top:18, left:18, display:'flex', gap:8}}>
                  <span className="pill" style={{background:'rgba(0,0,0,.5)', backdropFilter:'blur(8px)'}}>0{i+1} · {c.label}</span>
                </div>
                <div style={{position:'absolute', bottom:18, right:18, textAlign:'right'}}>
                  <div className="display" style={{fontSize:44, color:'#fff', lineHeight:1}}>{c.stat}</div>
                  <div style={{fontSize:10, letterSpacing:'.2em', color:'rgba(255,255,255,.85)', textTransform:'uppercase', fontWeight:700, marginTop:2}}>1er lugar</div>
                </div>
              </div>

              <div style={{padding:'32px 32px 28px'}}>
                <h3 className="display" style={{fontSize:48, margin:0, color:'var(--c-navy)', lineHeight:.95}}>{c.label}</h3>
                <div style={{fontSize:13, color:'#666', marginTop:6, fontWeight:600}}>{c.sub}</div>
                <p style={{marginTop:18, fontSize:15, lineHeight:1.55, color:'#333'}}>{c.desc}</p>

                <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:24, paddingTop:20, borderTop:'1px solid rgba(0,0,0,.08)'}}>
                  <div style={{fontSize:12, color:'#666', letterSpacing:'.06em', fontWeight:600}}>{c.meta}</div>
                  <button className="btn btn-primary" onClick={()=>scrollToForm(c.id)} style={{padding:'12px 18px', fontSize:12}}>
                    Inscríbete <Arrow size={11}/>
                  </button>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){
          .cat-grid { grid-template-columns:1fr !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── 5. CLASIFICATORIAS ───────────────

function Clasificatorias(){
  // Detectar si estamos en mobile para ajustar el fontSize del día
  // cuando el texto es largo (caso "02 y 03" de Santiago).
  // En desktop el espacio sobra y todos van a 64px; en mobile los
  // textos largos bajan a 32px para no encimarse con el "SEP / 2026".
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' && window.matchMedia('(max-width: 768px)').matches
  );
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 768px)');
    const handler = (e) => setIsMobile(e.matches);
    mq.addEventListener('change', handler);
    return () => mq.removeEventListener('change', handler);
  }, []);

  const dates = [
    {city:'Puerto Montt', venue:'Santo Tomás', date:'22 jul 2026', d:'22', m:'JUL', cat:'Junior · Profesional'},
    {city:'Antofagasta', venue:'INACAP', date:'29 jul 2026', d:'29', m:'JUL', cat:'Junior · Profesional'},
    {city:'La Serena', venue:'INACAP', date:'04 ago 2026', d:'04', m:'AGO', cat:'Junior · Profesional'},
    {city:'Concepción', venue:'DUOC UC', date:'07 ago 2026', d:'07', m:'AGO', cat:'Junior · Profesional'},
    {city:'Valparaíso', venue:'INACAP', date:'25 ago 2026', d:'25', m:'AGO', cat:'Junior · Profesional'},
    {city:'Santiago', venue:'Carozzi Nos', date:'02 y 03 sep 2026', d:'02 y 03', m:'SEP', cat:'Junior · Profesional'},
  ];

  return (
    <section id="clasificatorias" data-screen-label="04 Clasificatorias" className="bg-bone pad-y">
      <div className="wrap">
        <div data-reveal="up" style={{display:'flex', alignItems:'flex-end', justifyContent:'space-between', flexWrap:'wrap', gap:24, marginBottom:56}}>
          <div>
            <div className="section-label">Calendario nacional</div>
            <h2 className="display h-xl" style={{margin:'18px 0 0', color:'var(--c-navy)'}}>Clasificatorias<br/>2026</h2>
          </div>
          <p style={{maxWidth:380, color:'#555', fontSize:15, margin:0}}>
            Seis ciudades. Seis fechas. Una clasificación. Elige tu sede al inscribirte.
          </p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, background:'#fff', border:'1px solid rgba(0,0,0,.08)', borderRadius:6, overflow:'hidden'}} className="clas-grid">
          {dates.map((d, i)=> (
            <div key={d.city} data-reveal="up" data-reveal-delay={i*70} style={{
              padding:'36px 32px',
              borderRight: (i%3 !== 2) ? '1px solid rgba(0,0,0,.08)' : 'none',
              borderBottom: i<3 ? '1px solid rgba(0,0,0,.08)' : 'none',
              position:'relative', cursor:'pointer', transition:'background .25s',
              background:'#fff'
            }}
            className="clas-card"
            onMouseEnter={e=>e.currentTarget.style.background='var(--c-bone)'}
            onMouseLeave={e=>e.currentTarget.style.background='#fff'}>
              <div style={{display:'flex', alignItems:'baseline', gap:16, marginBottom:24}}>
                <div className="display" style={{fontSize: (isMobile && d.d.length > 2) ? 54 : 64, color:'var(--c-red)', lineHeight:.9, whiteSpace:'nowrap'}}>{d.d}</div>
                <div style={{fontFamily:'var(--f-display)', fontSize:18, letterSpacing:'.18em', color:'var(--c-navy)', fontWeight:700}}>{d.m}<br/><span style={{fontSize:11, color:'#888', fontWeight:600}}>2026</span></div>
              </div>
              <div className="display" style={{fontSize:28, color:'var(--c-navy)', lineHeight:1}}>{d.city}</div>
              <div style={{fontSize:13, color:'#666', marginTop:8, fontWeight:500}}>{d.venue}</div>
              <div style={{marginTop:20, fontSize:10, letterSpacing:'.2em', color:'var(--c-warm)', textTransform:'uppercase', fontWeight:700}}>{d.cat}</div>
            </div>
          ))}
        </div>

        {/* Finales */}
        <div style={{marginTop:48, display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}} className="finales-grid">
          {[
            {title:'Final Junior', date:'30 sep 2026', desc:'El gran cierre será transmitido por Canal 13. Las mejores duplas se enfrentan por los 10.000 USD y el título nacional Junior 2026.'},
            {title:'Final Senior', date:'01 oct 2026', desc:'Los cocineros se enfrentan por los $5.000.000 CLP y el reconocimiento de la industria.'},
          ].map((f, i) => (
            <div key={f.title} data-reveal="up" data-reveal-delay={i*120} style={{
              padding:'40px 36px', background:'var(--c-navy)',
              borderRadius:6, position:'relative', overflow:'hidden'
            }}>
              <div aria-hidden="true" style={{position:'absolute', top:0, right:0, width:160, height:160, background:'radial-gradient(circle at top right, rgba(184,146,74,.35), transparent 70%)', pointerEvents:'none'}}/>
              <div className="eyebrow" style={{color:'var(--c-warm-soft)', position:'relative'}}>Gran final</div>
              <h3 className="display" style={{fontSize:42, margin:'10px 0 4px', color:'#fff', position:'relative'}}>{f.title}</h3>
              <div className="display" style={{fontSize:22, color:'var(--c-red)', letterSpacing:'.05em', position:'relative'}}>{f.date}</div>
              <p style={{marginTop:16, fontSize:14, color:'rgba(255,255,255,.8)', maxWidth:380, position:'relative'}}>{f.desc}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){
          .clas-grid { grid-template-columns:1fr !important; }
          .finales-grid { grid-template-columns:1fr !important; }
        }
        @media (min-width: 861px) and (max-width: 1100px){
          .clas-grid { grid-template-columns:repeat(2,1fr) !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── 6. BANNER MOTIVACIONAL ───────────────

function Banner(){
  const sectionRef = useRef(null);
  const photoRef = useRef(null);

  useEffect(()=>{
    const section = sectionRef.current;
    const photo = photoRef.current;
    if (!section || !photo) return;
    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;

    let raf = 0;
    const update = () => {
      raf = 0;
      const rect = section.getBoundingClientRect();
      const vh = window.innerHeight;
      // Only animate when in view (with a buffer)
      if (rect.bottom < -100 || rect.top > vh + 100) return;
      // Section center relative to viewport center (negative = above)
      const sectionCenter = rect.top + rect.height / 2;
      const offsetFromCenter = sectionCenter - vh / 2;
      // Parallax: photo moves opposite direction at ~25% speed
      const translate = offsetFromCenter * -0.18;
      photo.style.transform = `translate3d(0, ${translate}px, 0) scale(1.18)`;
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, {passive:true});
    window.addEventListener('resize', onScroll);
    return ()=>{
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  return (
    <section ref={sectionRef} data-screen-label="05 Banner motivacional" className="banner-section" style={{
      position:'relative', overflow:'hidden',
      background:'var(--c-black)',
      padding:'140px 0'
    }}>
      <style>{`
        @media (max-width: 720px){
          .banner-section { padding:80px 0 !important; }
        }
        @media (max-width: 540px){
          .banner-section { padding:64px 0 !important; }
        }
      `}</style>
      {/* Real celebration photo with parallax (scaled up so it never reveals edges) */}
      <div ref={photoRef} aria-hidden="true" style={{
        position:'absolute', inset:0,
        backgroundImage:'url(assets/photos/celebration.jpg)',
        backgroundSize:'cover', backgroundPosition:'center 35%',
        opacity:.45,
        filter:'contrast(1.05) saturate(.9)',
        transform:'translate3d(0,0,0) scale(1.18)',
        willChange:'transform',
        transition:'transform .05s linear'
      }}/>
      {/* Strong darkening + warm vignette */}
      <div aria-hidden="true" style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at center, rgba(11,11,11,.45) 0%, rgba(11,11,11,.88) 75%), linear-gradient(180deg, rgba(11,11,11,.55), rgba(11,11,11,.85))'
      }}/>
      {/* Warm accent glow from the side */}
      <div aria-hidden="true" style={{
        position:'absolute', left:'-10%', top:'-20%', width:'60%', height:'80%',
        background:'radial-gradient(ellipse at center, rgba(184,146,74,.18), transparent 60%)',
        pointerEvents:'none'
      }}/>
      <div aria-hidden="true" style={{
        position:'absolute', right:'-10%', bottom:'-30%', width:'60%', height:'80%',
        background:'radial-gradient(ellipse at center, rgba(226,35,26,.18), transparent 60%)',
        pointerEvents:'none'
      }}/>

      <div className="wrap" style={{textAlign:'center', position:'relative', zIndex:1}} data-reveal="up">
        <div className="eyebrow" style={{color:'var(--c-warm-soft)', marginBottom:24}}>El llamado · XI Edición 2026</div>
        <h2 className="display h-mega" style={{margin:0, color:'#fff', maxWidth:1100, marginInline:'auto', lineHeight:.9}}>
          Sé el <span className="script" style={{color:'var(--c-red)', fontSize:'.95em', display:'inline-block', transform:'rotate(-3deg) translateY(.04em)', lineHeight:1}}>plato fuerte</span><br/>
          de esta edición.
        </h2>
        <p style={{marginTop:32, color:'rgba(255,255,255,.78)', fontSize:18, maxWidth:600, marginInline:'auto', lineHeight:1.6}}>
          Conviértete en uno de los grandes del talento culinario chileno. Las inscripciones cierran el 25 de julio.
        </p>
        <div style={{marginTop:44, display:'flex', justifyContent:'center', gap:14, flexWrap:'wrap'}}>
          <button className="btn btn-primary btn-lg" onClick={()=>scrollToForm()}>Quiero participar <Arrow/></button>
          <button className="btn btn-ghost btn-lg" onClick={()=>{
            const el = document.getElementById('premios');
            if (el) window.scrollTo({top:el.offsetTop-60, behavior:'smooth'});
          }}>Ver los premios</button>
        </div>
      </div>
    </section>
  );
}

// ─────────────── 7. PREMIOS ───────────────

function Premios(){
  // Premios por categoría. Junior incluye reconocimiento al Coach.
  // Senior NO tiene premio para ayudante.
  const premiosJunior = [
    {place:'2°', amount:'7.500', unit:'USD', coach:'$750.000'},
    {place:'1°', amount:'10.000', unit:'USD', winner:true, coach:'$1.000.000'},
    {place:'3°', amount:'2.500', unit:'USD', coach:'$500.000'},
  ];
  const premiosSenior = [
    {place:'2°', amount:'3.000.000', unit:'CLP'},
    {place:'1°', amount:'5.000.000', unit:'CLP', winner:true},
    {place:'3°', amount:'2.000.000', unit:'CLP'},
  ];

  const TrophyIcon = ({color, size=42}) => (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <path d="M14 6h20v6a10 10 0 0 1-10 10A10 10 0 0 1 14 12V6z" stroke={color} strokeWidth="1.6" fill="none"/>
      <path d="M34 8h6v4a6 6 0 0 1-6 6M14 8H8v4a6 6 0 0 0 6 6" stroke={color} strokeWidth="1.6" fill="none"/>
      <path d="M24 22v8M18 30h12M16 38h16v4H16z" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  );

  const PrizeCard = ({p, large}) => (
    <div style={{
      background: p.winner ? 'var(--c-red)' : '#fff',
      color: p.winner ? '#fff' : 'var(--c-ink)',
      border: !p.winner ? '1px solid rgba(0,0,0,.08)' : 'none',
      padding: large ? '36px 22px 32px' : '30px 20px 26px',
      borderRadius: 8,
      textAlign:'center',
      position:'relative',
      display:'flex', flexDirection:'column',
      minHeight: large ? 310 : 280,
      transform: large ? 'translateY(-16px) scale(1.03)' : 'none',
      boxShadow: large ? '0 30px 60px -20px rgba(226,35,26,.4)' : '0 6px 16px -8px rgba(0,0,0,.08)',
      transition:'transform .25s'
    }}>
      <div style={{display:'flex', justifyContent:'center', marginBottom:10}}>
        <TrophyIcon color={p.winner ? '#fff' : 'var(--c-warm)'} size={large ? 48 : 38}/>
      </div>
      <div className="display" style={{
        fontSize: large ? 56 : 42, lineHeight:1,
        color: p.winner ? '#fff' : 'var(--c-warm)',
        marginBottom: 6
      }}>{p.place}</div>
      <div style={{fontSize:10, letterSpacing:'.22em', textTransform:'uppercase', fontWeight:700, opacity: p.winner ? .85 : .6, marginBottom: 12}}>Lugar · Participante</div>
      <div className="display" style={{fontSize: large ? 26 : 20, color: p.winner ? '#fff' : 'var(--c-navy)'}}>{p.amount}</div>
      <div style={{fontSize:11, opacity:.7, letterSpacing:'.1em', fontWeight:600, marginTop:2}}>{p.unit}</div>
      {p.coach && (
        <div style={{marginTop:'auto', paddingTop:14, borderTop: `1px solid ${p.winner ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.08)'}`}}>
          <div style={{fontSize:9, letterSpacing:'.22em', textTransform:'uppercase', fontWeight:700, opacity: p.winner ? .8 : .55, marginBottom:4}}>Coach</div>
          <div style={{fontSize:14, fontWeight:700}}>{p.coach}</div>
        </div>
      )}
    </div>
  );

  const Podium = ({title, items, kicker}) => (
    <div style={{
      padding:'52px 44px 56px', background:'#fff', borderRadius:8,
      border:'1px solid rgba(0,0,0,.06)', position:'relative',
      height:'100%', display:'flex', flexDirection:'column'
    }}>
      <div style={{textAlign:'center', marginBottom:36}}>
        <div className="eyebrow" style={{color:'var(--c-warm)'}}>{kicker}</div>
        <h3 className="display" style={{fontSize:54, margin:'10px 0 0', color:'var(--c-navy)'}}>{title}</h3>
      </div>

      <div style={{display:'grid', gridTemplateColumns:'1fr 1.15fr 1fr', gap:14, alignItems:'end', flex:1}} className="podium-grid">
        {items.map(p => <PrizeCard key={p.place} p={p} large={p.winner}/>)}
      </div>
    </div>
  );

  return (
    <section id="premios" data-screen-label="06 Premios" className="bg-cream pad-y">
      <div className="wrap">
        <div data-reveal="up" style={{textAlign:'center', maxWidth:720, marginInline:'auto', marginBottom:60}}>
          <div className="section-label" style={{justifyContent:'center'}}>El premio</div>
          <h2 className="display h-xl" style={{margin:'18px 0 14px', color:'var(--c-navy)'}}>Premios que cambian carreras.</h2>
          <p style={{color:'#555', fontSize:16, margin:0}}>Más de USD 20.000 y CLP 11 millones repartidos entre las dos categorías, más el reconocimiento del coach.</p>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:22, alignItems:'stretch'}} className="premios-grid">
          <div data-reveal="up" data-reveal-delay={0}><Podium title="Junior" items={premiosJunior} kicker="Categoría · Junior"/></div>
          <div data-reveal="up" data-reveal-delay={140}><Podium title="Senior" items={premiosSenior} kicker="Categoría · Senior"/></div>
        </div>

        <div style={{marginTop:44, textAlign:'center'}}>
          <button className="btn btn-primary btn-lg" onClick={()=>scrollToForm()}>Quiero competir <Arrow/></button>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){
          .premios-grid { grid-template-columns:1fr !important; }
        }
        @media (max-width: 720px){
          .premios-grid > div > div { padding: 32px 24px 36px !important; }
        }
        @media (max-width: 560px){
          .podium-grid { grid-template-columns:1fr !important; }
          .podium-grid > div { transform:none !important; min-height:0 !important; }
        }
      `}</style>
    </section>
  );
}

// ─────────────── 9. SPONSORS ───────────────

function Sponsors(){
  const sponsors = [
    {name:'Carozzi Food Service', src:'assets/sponsors/carozzi-fs.png?v=9'},
    {name:'Canal 13', src:'assets/sponsors/canal-13.png?v=9'},
    {name:'Fegach', src:'assets/sponsors/fegach.png?v=9'},
    {name:'Espacio Food Service', src:'assets/sponsors/espacio-fs.png?v=9'},
    {name:'Chef & Hotel', src:'assets/sponsors/chef-hotel.png?v=9'},
    {name:'Achiga', src:'assets/sponsors/achiga.png?v=9'},
    {name:'Académie Culinaire de France', src:'assets/sponsors/academie-cf.png?v=9'},
    {name:'Hoteleros de Chile', src:'assets/sponsors/hoteleros.png?v=9'},
    {name:'Círculo Cronistas Gastronómicos', src:'assets/sponsors/cronistas.png?v=9'},
    {name:'Culinary', src:'assets/sponsors/culinary.png?v=9'},
    {name:'Le Cordon Bleu', src:'assets/sponsors/le-cordon.png?v=9'},
    {name:'Santo Tomás', src:'assets/sponsors/santotomas.png?v=9'},
    {name:'INACAP', src:'assets/sponsors/inacap.png?v=9'},
    {name:'DUOC UC', src:'assets/sponsors/duoc.png?v=9'},
    {name:'AIEP', src:'assets/sponsors/aiep.png?v=9'},
    {name:'UDLA', src:'assets/sponsors/udla.png?v=9'},
    {name:'Ecole', src:'assets/sponsors/ecole.png?v=9'},
    {name:'IPDP', src:'assets/sponsors/ipdp.png?v=9'},
  ];
  return (
    <section data-screen-label="07 Sponsors" className="bg-bone pad-y-sm" style={{borderTop:'1px solid rgba(0,0,0,.06)'}}>
      <div className="wrap">
        <div data-reveal="up" style={{textAlign:'center', marginBottom:40}}>
          <div className="section-label" style={{justifyContent:'center'}}>Auspiciadores y partners</div>
          <h3 className="display h-md" style={{margin:'14px 0 0', color:'var(--c-navy)'}}>Aliados del talento culinario chileno.</h3>
        </div>

        <div style={{
          display:'grid', gridTemplateColumns:'repeat(6, 1fr)',
          gap:0, border:'1px solid rgba(0,0,0,.08)', background:'#fff', borderRadius:6, overflow:'hidden'
        }} className="sponsor-grid" data-reveal="fade">
          {sponsors.map((s, i) => (
            <div key={s.name} title={s.name} style={{
              padding:'24px 18px', textAlign:'center',
              borderRight: ((i+1)%6 !== 0) ? '1px solid rgba(0,0,0,.06)' : 'none',
              borderBottom: i < sponsors.length - (sponsors.length % 6 || 6) ? '1px solid rgba(0,0,0,.06)' : 'none',
              minHeight:104, display:'flex', alignItems:'center', justifyContent:'center',
              background:'#fff', transition:'all .25s'
            }}
            onMouseEnter={e=>{
              e.currentTarget.style.background='var(--c-bone)';
            }}
            onMouseLeave={e=>{
              e.currentTarget.style.background='#fff';
            }}>
              <img src={s.src} alt={s.name}
                style={{
                  maxWidth:'100%', maxHeight:60, width:'auto', height:'auto', objectFit:'contain',
                  transition:'all .25s'
                }}/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 860px){ .sponsor-grid { grid-template-columns:repeat(2,1fr) !important; } }
        @media (min-width: 861px) and (max-width: 1100px){ .sponsor-grid { grid-template-columns:repeat(3,1fr) !important; } }
      `}</style>
    </section>
  );
}

// ─────────────── 10. FOOTER ───────────────

function Footer(){
  return (
    <footer id="contacto" data-screen-label="08 Footer" className="bg-black" style={{paddingTop:80, paddingBottom:32, borderTop:'1px solid rgba(255,255,255,.06)'}}>
      <div className="wrap">
        <div style={{display:'grid', gridTemplateColumns:'2fr 1.2fr 1fr 1fr', gap:48}} className="footer-grid">
          <div>
            <LogoMark white={true} size={56}/>
            <p style={{marginTop:22, color:'rgba(255,255,255,.6)', fontSize:14, lineHeight:1.55, maxWidth:340}}>
              La competencia gastronómica más importante de Chile, presentada por Carozzi Food Service. Transmisión por Canal 13.
            </p>
            <div style={{display:'flex', gap:10, marginTop:24}}>
              {[
                {label:'YouTube', path:'M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8.4A2.5 2.5 0 0 0 2.4 7.2C2 8.8 2 12 2 12s0 3.2.4 4.8A2.5 2.5 0 0 0 4.2 18.6C5.8 19 12 19 12 19s6.2 0 7.8-.4a2.5 2.5 0 0 0 1.8-1.8C22 15.2 22 12 22 12s0-3.2-.4-4.8zM10 15V9l5.2 3L10 15z'},
                {label:'Instagram', path:'M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.22.42a3.7 3.7 0 0 1 1.37.9c.4.4.7.84.9 1.37.17.42.37 1.05.42 2.22.07 1.25.07 1.65.07 4.85s0 3.6-.07 4.85c-.05 1.17-.25 1.8-.42 2.22-.2.53-.5.97-.9 1.37a3.7 3.7 0 0 1-1.37.9c-.42.17-1.05.37-2.22.42-1.25.07-1.65.07-4.85.07s-3.6 0-4.85-.07c-1.17-.05-1.8-.25-2.22-.42a3.7 3.7 0 0 1-1.37-.9 3.7 3.7 0 0 1-.9-1.37c-.17-.42-.37-1.05-.42-2.22C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.85c.05-1.17.25-1.8.42-2.22.2-.53.5-.97.9-1.37a3.7 3.7 0 0 1 1.37-.9c.42-.17 1.05-.37 2.22-.42C8.4 2.2 8.8 2.2 12 2.2zm0 1.8c-3.15 0-3.52 0-4.76.06-1 .05-1.55.22-1.91.36-.48.18-.82.4-1.18.76-.36.36-.58.7-.76 1.18-.14.36-.31.91-.36 1.91-.06 1.24-.06 1.61-.06 4.76s0 3.52.06 4.76c.05 1 .22 1.55.36 1.91.18.48.4.82.76 1.18.36.36.7.58 1.18.76.36.14.91.31 1.91.36 1.24.06 1.61.06 4.76.06s3.52 0 4.76-.06c1-.05 1.55-.22 1.91-.36.48-.18.82-.4 1.18-.76.36-.36.58-.7.76-1.18.14-.36.31-.91.36-1.91.06-1.24.06-1.61.06-4.76s0-3.52-.06-4.76c-.05-1-.22-1.55-.36-1.91-.18-.48-.4-.82-.76-1.18-.36-.36-.7-.58-1.18-.76-.36-.14-.91-.31-1.91-.36C15.52 4 15.15 4 12 4zm0 3.06A4.94 4.94 0 1 1 12 16.94 4.94 4.94 0 0 1 12 7.06zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28zM18.4 6.5a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0z'},
                {label:'Facebook', path:'M22 12a10 10 0 1 0-11.56 9.88v-7H8v-2.88h2.44V9.8c0-2.4 1.43-3.74 3.63-3.74 1.05 0 2.15.19 2.15.19v2.36h-1.21c-1.19 0-1.57.74-1.57 1.5v1.8h2.67l-.43 2.88h-2.24v7A10 10 0 0 0 22 12z'},
              ].map(s => (
                <a key={s.label} href="#" aria-label={s.label} style={{
                  width:38, height:38, borderRadius:'50%', border:'1px solid rgba(255,255,255,.18)',
                  display:'inline-flex', alignItems:'center', justifyContent:'center',
                  color:'rgba(255,255,255,.85)', transition:'all .2s'
                }}
                onMouseEnter={e=>{e.currentTarget.style.borderColor='var(--c-red)'; e.currentTarget.style.background='var(--c-red)'; e.currentTarget.style.color='#fff'}}
                onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,.18)'; e.currentTarget.style.background='transparent'; e.currentTarget.style.color='rgba(255,255,255,.85)'}}>
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d={s.path}/></svg>
                </a>
              ))}
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{color:'var(--c-red)', marginBottom:18}}>Encuéntranos</div>
            <div style={{fontSize:14, color:'rgba(255,255,255,.8)', lineHeight:1.9}}>
              <div><span style={{color:'rgba(255,255,255,.5)'}}>Correo</span><br/>contacto@copaculinariacarozzi.cl</div>
              <div style={{marginTop:14}}><span style={{color:'rgba(255,255,255,.5)'}}>Teléfono</span><br/>+56 9 8806 9365</div>
              <div style={{marginTop:14}}><span style={{color:'rgba(255,255,255,.5)'}}>Horario</span><br/>Lun – Vie · 9:00 a 18:00 hrs</div>
            </div>
          </div>

          <div>
            <div className="eyebrow" style={{color:'var(--c-red)', marginBottom:18}}>Información</div>
            <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:12, fontSize:14}}>
              <li><a id="bases" href="#" style={{color:'rgba(255,255,255,.8)'}}>Bases legales</a></li>
              <li><a href="#" style={{color:'rgba(255,255,255,.8)'}}>Preguntas frecuentes</a></li>
              <li><a href="#" style={{color:'rgba(255,255,255,.8)'}}>Contacto</a></li>
              <li><a href="#" style={{color:'rgba(255,255,255,.8)'}}>Política de privacidad</a></li>
            </ul>
          </div>

          <div>
            <div className="eyebrow" style={{color:'var(--c-red)', marginBottom:18}}>Súbete</div>
            <p style={{fontSize:14, color:'rgba(255,255,255,.7)', marginTop:0}}>Tu carrera comienza con una postulación.</p>
            <button className="btn btn-primary" onClick={()=>scrollToForm()} style={{width:'100%'}}>Inscríbete <Arrow size={12}/></button>
          </div>
        </div>

        <div style={{borderTop:'1px solid rgba(255,255,255,.08)', marginTop:60, paddingTop:24, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:14}}>
          <div style={{fontSize:12, color:'rgba(255,255,255,.45)'}}>© 2026 Copa Culinaria Carozzi FS. Todos los derechos reservados.</div>
          <div style={{fontSize:11, color:'rgba(255,255,255,.4)', letterSpacing:'.18em', textTransform:'uppercase', fontWeight:600}}>Carozzi · Food Service</div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px){ .footer-grid { grid-template-columns:1fr 1fr !important; } }
        @media (max-width: 540px){ .footer-grid { grid-template-columns:1fr !important; } }
      `}</style>
    </footer>
  );
}

Object.assign(window, {Header, Hero, About, Categories, Clasificatorias, Banner, Premios, Sponsors, Footer, Arrow, scrollToForm, LogoMark});
