/* =========================================================
   App — Invitación "Sin Datos No Hay Paraíso (Ni IA)"
   Road to Data × SAS
   ========================================================= */
const { useState, useEffect, useRef } = React;

/* ---------- DATA ---------- */
const SPEAKERS = [
  { id:"julian",  org:"Road to Data", name:"Julián Rioja",              role:"Founder & CEO, Road to Data",       tbd:false, img:"resources/FOUNDER2.jpg"          },
  { id:"antonio", org:"SAS",          name:"Antonio Calvo",             role:"SAS España",                        tbd:false, img:"resources/sas-speaker.jpg"       },
  { id:"leroy",   org:"Leroy Merlin", name:"Invitado sorpresa",           role:"",                                  tbd:false },
  { id:"iveco",   org:"IVECO",        name:"David Maldonado de la Vega",role:"Fleet Manager & Mobility, IVECO",   tbd:false },
];

const AGENDA = [
  { t:"18:00", e:"18:30", title:"Llegada de invitados", desc:"Bienvenida, saludo y acomodación.", by:[] },
  { t:"18:30", e:"18:40", title:"¿Por qué SAS & Road to Data?", desc:"Presentación del evento y de las dos casas que lo organizan.", by:["sas","r2d"], hl:true },
  { t:"18:40", e:"19:00", title:"De los datos a las decisiones con IA fiable", speaker:"Julián Rioja", desc:"", by:["r2d"] },
  { t:"19:00", e:"19:20", title:"SAS Get Your Data AI Ready", speaker:"Antonio Calvo", desc:"", by:["sas"] },
  { t:"19:20", e:"19:30", title:"Actividad", desc:"Un break interactivo para mover las ideas.", by:[] },
  { t:"19:30", e:"19:55", title:"Speech conjunto", desc:"Mesa conjunta: contaremos con la experiencia de ponentes de El Corte Inglés, IVECO, Coca-Cola...", by:["sas","r2d"], hl:true },
  { t:"19:55", e:"20:30", title:"Quiz · Trivial", desc:"Pon a prueba tu olfato para el dato. El ganador se lleva una cena para dos.", by:[], prize:true },
  { t:"20:30", e:"22:00", title:"Cóctel & networking", desc:"Lo que pasa después de los datos: conversaciones, contactos y copas.", by:[] },
];

const PLACEHOLDER_IMG = "resources/avatar-placeholder.svg";

const EVENT_DATE = new Date("2026-06-17T18:00:00+02:00");
const REG_URL = "https://www.sas.com/sas/events/innovate-on-tour/26/madrid.html";

/* ---------- small helpers ---------- */
function useReveal(){
  useEffect(()=>{
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver((ents)=>{
      ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add("in"); io.unobserve(e.target);} });
    }, { threshold:.12, rootMargin:"0px 0px -8% 0px" });
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  },[]);
}

function Tag({k}){
  const map = { r2d:["r2d","Road to Data"], sas:["sas","SAS"] };
  const [cls,label] = map[k] || ["",k];
  return <span className={"tag "+cls}>{label}</span>;
}

/* ---------- NAV ---------- */
function Nav(){
  const [scrolled,setScrolled] = useState(false);
  const [open,setOpen] = useState(false);
  const close = ()=>setOpen(false);

  useEffect(()=>{
    const h=()=>{ setScrolled(window.scrollY>40); };
    h(); window.addEventListener("scroll",h,{passive:true});
    return ()=>window.removeEventListener("scroll",h);
  },[]);

  useEffect(()=>{
    if(!open) return;
    const h=()=>setOpen(false);
    window.addEventListener("scroll",h,{passive:true,once:true});
  },[open]);

  return (
    <nav className={"nav"+(scrolled?" scrolled":"")+(open?" nav--open":"")}>
      <a className="nav__brand" href="#top" onClick={close}>
        <span className="dot"></span>
        R2D <small>×&nbsp;SAS</small>
      </a>
      <div className="nav__links">
        <a href="#evento">Evento</a>
        <a href="#ponentes">Ponentes</a>
        <a href="#programa">Programa</a>
        <a href="#ubicacion">Ubicación</a>
      </div>
      <div className="nav__cta">
        <a className="btn" href="#registro">Reserva tu plaza <span className="arrow">→</span></a>
        <button className="nav__burger" onClick={()=>setOpen(o=>!o)} aria-label={open?"Cerrar menú":"Abrir menú"} aria-expanded={open}>
          <span/><span/><span/>
        </button>
      </div>
      {open && (
        <div className="nav__mobile">
          <a href="#evento"    onClick={close}>Evento</a>
          <a href="#ponentes"  onClick={close}>Ponentes</a>
          <a href="#programa"  onClick={close}>Programa</a>
          <a href="#ubicacion" onClick={close}>Ubicación</a>
          <a href="#registro"  onClick={close} className="mob-cta">Reserva tu plaza →</a>
        </div>
      )}
    </nav>
  );
}

/* ---------- COUNTDOWN ---------- */
function Countdown(){
  const calc = ()=>{
    const d = Math.max(0, EVENT_DATE - new Date());
    return {
      d: Math.floor(d/86400000),
      h: Math.floor(d/3600000)%24,
      m: Math.floor(d/60000)%60,
      s: Math.floor(d/1000)%60,
    };
  };
  const [t,setT] = useState(calc);
  useEffect(()=>{ const i=setInterval(()=>setT(calc()),1000); return ()=>clearInterval(i); },[]);
  const pad = n=>String(n).padStart(2,"0");
  const boxes = [["Días",t.d],["Horas",pad(t.h)],["Min",pad(t.m)],["Seg",pad(t.s)]];
  return (
    <div className="countdown">
      {boxes.map(([l,v])=>(
        <div className="cd-box" key={l}><b>{v}</b><span>{l}</span></div>
      ))}
    </div>
  );
}

/* ---------- DATA NODES BACKGROUND ---------- */
function DataNodesBackground(){
  const canvasRef = useRef(null);
  useEffect(()=>{
    const canvas = canvasRef.current;
    if(!canvas) return;
    if(window.matchMedia("(prefers-reduced-motion:reduce)").matches) return;
    const ctx = canvas.getContext("2d");
    let animId;

    const parseHex = hex => {
      hex = hex.replace("#","");
      return /^[0-9a-fA-F]{6}$/.test(hex)
        ? [parseInt(hex.slice(0,2),16), parseInt(hex.slice(2,4),16), parseInt(hex.slice(4,6),16)]
        : null;
    };
    const getCSSColor = v => parseHex(
      getComputedStyle(document.documentElement).getPropertyValue(v).trim()
    );

    // --faint  = #6A8DA4 (ink3/blue) → lines
    // --violet-2 = #1D5A7A (ink2)   → dots
    let lineRgb = [106,141,164];
    let dotRgb  = [29, 90, 122];
    const readColors = ()=>{
      lineRgb = getCSSColor("--faint")    || [106,141,164];
      dotRgb  = getCSSColor("--violet-2") || [29, 90, 122];
    };
    readColors();

    const COUNT   = ()=> window.innerWidth < 640 ? 28 : 65;
    const MAX_DIST = 160;
    let nodes = [];
    const mouse = {x:-9999, y:-9999};

    const resize = ()=>{ canvas.width=window.innerWidth; canvas.height=window.innerHeight; };
    const mkNode = ()=>({
      x:Math.random()*canvas.width, y:Math.random()*canvas.height,
      vx:(Math.random()-.5)*.38, vy:(Math.random()-.5)*.38,
      r:Math.random()*1.5+1
    });
    const init = ()=>{ nodes=Array.from({length:COUNT()},mkNode); };

    const onMove = e=>{ mouse.x=e.clientX; mouse.y=e.clientY+window.scrollY; };
    const onOut  = ()=>{ mouse.x=-9999; mouse.y=-9999; };

    const draw = ()=>{
      ctx.clearRect(0,0,canvas.width,canvas.height);
      const [lr,lg,lb] = lineRgb;
      const [dr,dg,db] = dotRgb;
      const scrollY = window.scrollY;

      for(const n of nodes){
        const mx = mouse.x;
        const my = mouse.y - scrollY;
        const dx=mx-n.x, dy=my-n.y, d=Math.hypot(dx,dy);
        if(d<180&&d>0){ const f=(180-d)/180*.014; n.vx+=dx*f; n.vy+=dy*f; }
        n.vx*=.97; n.vy*=.97; n.x+=n.vx; n.y+=n.vy;
        if(n.x<0){n.x=0;n.vx*=-1;}else if(n.x>canvas.width){n.x=canvas.width;n.vx*=-1;}
        if(n.y<0){n.y=0;n.vy*=-1;}else if(n.y>canvas.height){n.y=canvas.height;n.vy*=-1;}
        ctx.beginPath(); ctx.arc(n.x,n.y,n.r,0,Math.PI*2);
        ctx.fillStyle=`rgba(${dr},${dg},${db},.38)`; ctx.fill();
      }

      for(let i=0;i<nodes.length-1;i++) for(let j=i+1;j<nodes.length;j++){
        const dx=nodes[i].x-nodes[j].x, dy=nodes[i].y-nodes[j].y, d=Math.hypot(dx,dy);
        if(d<MAX_DIST){
          ctx.beginPath();
          ctx.strokeStyle=`rgba(${lr},${lg},${lb},${(1-d/MAX_DIST)*.2})`;
          ctx.lineWidth=.8;
          ctx.moveTo(nodes[i].x,nodes[i].y); ctx.lineTo(nodes[j].x,nodes[j].y); ctx.stroke();
        }
      }
      animId=requestAnimationFrame(draw);
    };

    const onResize=()=>{ resize(); init(); };
    resize(); init(); draw();
    window.addEventListener("resize",   onResize,    {passive:true});
    window.addEventListener("mousemove",onMove,      {passive:true});
    document.addEventListener("mouseleave",onOut);
    window.addEventListener("tweakchange",readColors);
    return ()=>{
      cancelAnimationFrame(animId);
      window.removeEventListener("resize",   onResize);
      window.removeEventListener("mousemove",onMove);
      document.removeEventListener("mouseleave",onOut);
      window.removeEventListener("tweakchange",readColors);
    };
  },[]);
  return <canvas ref={canvasRef} className="nodes-bg" aria-hidden="true"/>;
}

/* ---------- HERO ---------- */
function Hero(){
  const innerRef = useRef(null);
  const g1Ref = useRef(null);
  const g2Ref = useRef(null);
  useEffect(()=>{
    if(window.matchMedia("(prefers-reduced-motion:reduce)").matches) return;
    let rafId;
    const onScroll=()=>{
      cancelAnimationFrame(rafId);
      rafId=requestAnimationFrame(()=>{
        const y=window.scrollY;
        if(innerRef.current) innerRef.current.style.transform=`translateY(${y*.1}px)`;
        if(g1Ref.current)    g1Ref.current.style.transform   =`translateY(${y*.45}px)`;
        if(g2Ref.current)    g2Ref.current.style.transform   =`translateY(${y*.1}px)`;
      });
    };
    window.addEventListener("scroll",onScroll,{passive:true});
    return ()=>{ window.removeEventListener("scroll",onScroll); cancelAnimationFrame(rafId); };
  },[]);
  return (
    <header className="hero" id="top">
      <div className="hero__glow g1" ref={g1Ref}></div>
      <div className="hero__glow g2" ref={g2Ref}></div>
      <div className="wrap hero__inner" ref={innerRef}>
        <div className="hero__meta">
          <span className="pill"><span className="blink"></span>Madrid · 17 junio 2026</span>
          <span className="pill">18:00 a 22:00</span>
          <span className="pill">Solo por invitación</span>
        </div>

        <h1>
          Sin datos<br/>
          no hay paraíso<br/>
          <span className="ni">(ni</span> <span className="ia">IA)</span>
        </h1>

        <p className="hero__sub">
          <b>«El problema no es la IA, es que no entendemos el dato.»</b> Una tarde con
          Road&nbsp;to&nbsp;Data y SAS para volver a lo esencial: el dato que de verdad mueve las decisiones.
        </p>

        <div className="hero__cta">
          <a className="btn" href="#registro">Reserva tu plaza <span className="arrow">→</span></a>
          <a className="btn btn--ghost" href="#programa">Ver el programa</a>
        </div>

        <div className="hero__orgline">
          <span>Organizan</span>
          <div className="org-logos">
            <img src="resources/PNG/Road to data EDITABLES-20.png" alt="Road to Data" className="hero__logo-r2d"/>
            <span className="sep"></span>
            <img src="resources/SAS_logo_horiz.svg.png" alt="SAS" className="hero__logo-sas"/>
          </div>
        </div>

        <div>
          <div className="eyebrow" style={{marginBottom:"18px"}}>Empieza en</div>
          <Countdown/>
        </div>
      </div>

    </header>
  );
}

/* ---------- INTRO ---------- */
function Intro(){
  return (
    <section className="section" id="evento">
      <div className="wrap">
        <div className="reveal">
          <div className="eyebrow">El encuentro</div>
          <p className="statement" style={{marginTop:"22px"}}>
            Todos hablan de inteligencia artificial. Casi nadie habla
            del <em>dato</em> que la alimenta. Esta tarde le damos la vuelta: sin un dato que
            entendamos, no hay IA. <em>Ni paraíso</em>.
          </p>
        </div>

        <div className="facts reveal">
          <div className="fact"><span className="ic">Cuándo</span><b>17 junio</b><span>18:00 a 22:00. 4 horas</span></div>
          <div className="fact"><span className="ic">Quién</span><b>SAS × R2D</b><span>+ Leroy Merlin e IVECO</span></div>
          <div className="fact"><span className="ic">Formato</span><b>Presencial</b><span>Ponencias, quiz y networking</span></div>
          <div className="fact"><span className="ic">Plazas</span><b>Limitadas</b><span>Acceso solo por invitación</span></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SPEAKERS ---------- */
function Speakers(){
  return (
    <section className="section" id="ponentes">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">Ponentes</div>
          <h2>Las voces que entienden el dato</h2>
          <p className="lead" style={{marginTop:"18px"}}>
            Dos casas, un escenario y la experiencia de marcas que viven del dato cada día.
          </p>
        </div>
        <div className="spk-grid reveal">
          {SPEAKERS.map(s=>(
            <article className={"spk"+(s.tbd?" is-tbd":"")} key={s.id}>
              <img
                src={s.img || PLACEHOLDER_IMG}
                alt={s.name}
                className="spk__photo"
              />
              <div className="spk__body">
                <div className="spk__org">{s.org}</div>
                <div className="spk__name">{s.name}</div>
                {s.role && <div className="spk__role">{s.role}</div>}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- AGENDA ---------- */
function Agenda(){
  return (
    <section className="section" id="programa" style={{background:"var(--surface-section)"}}>
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">Programa</div>
          <h2>De 18:00 a 22:00</h2>
          <p className="lead" style={{marginTop:"18px"}}>
            Cuatro horas que empiezan en el dato y terminan en networking con cóctel. Programa sujeto a pequeños ajustes.
          </p>
        </div>

        <div className="agenda reveal">
          {AGENDA.map((r,i)=>(
            <div className={"row"+(r.hl?" hl":"")} key={i}>
              {!r.hl && <span className="dotmark"></span>}
              <div className="row__time">{r.t}<small>hasta {r.e}</small></div>
              <div className="row__main">
                <div className="row__title">
                  {r.title}
                  {r.prize && <span className="accent"> · cena para dos</span>}
                </div>
                {r.speaker && <div className="row__speaker">{r.speaker}</div>}
                {r.by.length>0 && <div className="row__by">{r.by.map(b=><Tag k={b} key={b}/>)}</div>}
                {r.desc && <div className="row__desc">{r.desc}</div>}
                {r.note && <div className="row__note">{r.note}</div>}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- PRIZE / QUIZ ---------- */
function Prize(){
  return (
    <section className="section">
      <div className="wrap">
        <div className="prize reveal">
          <div className="prize__l">
            <div className="eyebrow">La actividad</div>
            <h3>Un quiz. Una cena.<br/>Un solo ganador.</h3>
            <p>
              A las 19:25 ponemos a prueba quién entiende de verdad el dato. Un trivial rápido,
              competitivo y con premio: el ganador se lleva una <b style={{color:"var(--text)"}}>cena para dos</b>.
              Trae tu instinto analítico.
            </p>
          </div>
          <div className="prize__r">
            <span className="cap">El premio</span>
            <span className="big">Cena<br/>para 2</span>
            <span className="cap" style={{marginTop:"10px"}}>al ganador del trivial</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- LOCATION ---------- */
function Location(){
  return (
    <section className="section" id="ubicacion" style={{background:"var(--surface-section)"}}>
      <div className="wrap">
        <div className="section-head reveal">
          <div className="eyebrow">Ubicación</div>
          <h2>Nos vemos en Madrid</h2>
        </div>
        <div className="loc reveal">
          <img src="resources/local-sas.png" alt="Espacio del evento · Madrid" className="loc__photo"/>
          <div className="loc__info">
            <h3>Madrid · 17 de junio</h3>
            <p className="addr">
              La dirección exacta se comparte con tu confirmación de plaza.<br/>
              Evento presencial · entrada solo con invitación.
            </p>
            <div className="loc__row">
              <div className="loc__chip"><span><b>18:00</b> · puertas</span></div>
              <div className="loc__chip"><span><b>20:30</b> · cóctel</span></div>
              <div className="loc__chip"><span>Madrid centro</span></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- REGISTRATION ---------- */
function Registration(){
  const [data,setData] = useState({nombre:"",apellidos:"",email:"",empresa:"",cargo:""});
  const [errs,setErrs] = useState({});
  const [sent,setSent] = useState(false);
  const [sending,setSending] = useState(false);
  const [serverErr,setServerErr] = useState("");

  const set = (k)=>(e)=>setData(d=>({...d,[k]:e.target.value}));
  const validate = ()=>{
    const e={};
    if(!data.nombre.trim()) e.nombre="Indica tu nombre";
    if(!data.apellidos.trim()) e.apellidos="Indica tus apellidos";
    if(!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email="Email no válido";
    if(!data.empresa.trim()) e.empresa="Indica tu empresa";
    setErrs(e);
    return Object.keys(e).length===0;
  };
  const submit = async (ev)=>{
    ev.preventDefault();
    if(!validate()) return;
    setSending(true);
    setServerErr("");
    try{
      const res = await fetch("/api/contact",{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(data),
      });
      const json = await res.json();
      if(json.ok){ setSent(true); }
      else{ setServerErr(json.error||"Error al enviar. Inténtalo de nuevo."); }
    }catch(e){
      setServerErr("No se pudo conectar con el servidor.");
    }finally{
      setSending(false);
    }
  };

  if(sent){
    return (
      <section className="section reg" id="registro">
        <div className="wrap" style={{maxWidth:"640px"}}>
          <div className="form success">
            <div className="check">✓</div>
            <h3>¡Plaza reservada, {data.nombre}!</h3>
            <p>Te hemos apuntado. Recibirás la confirmación y la dirección exacta en tu email <b style={{color:"var(--text)"}}>{data.email}</b>. Nos vemos el 17 de junio.</p>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section reg" id="registro">
      <div className="wrap">
        <div className="reg__grid">
          <div className="reg__l reveal">
            <div className="eyebrow">Registro</div>
            <h2>Reserva<br/>tu plaza</h2>
            <p className="lead" style={{marginTop:"20px"}}>
              Evento gratuito, exclusivo y con aforo limitado. Si has recibido una invitación, confirma para guardar tu sitio.
            </p>
            <div className="reg__note">
              <span><b>Última inscripción abierta.</b> Las plazas vuelan, confirma cuanto antes para asegurar la tuya.</span>
            </div>
          </div>

          <form className="form reveal" onSubmit={submit} noValidate>
            <div className="grid-2">
              <div className={"field"+(errs.nombre?" err":"")}>
                <label>Nombre</label>
                <input value={data.nombre} onChange={set("nombre")} placeholder="Tu nombre"/>
                <div className="msg">{errs.nombre}</div>
              </div>
              <div className={"field"+(errs.apellidos?" err":"")}>
                <label>Apellidos</label>
                <input value={data.apellidos} onChange={set("apellidos")} placeholder="Tus apellidos"/>
                <div className="msg">{errs.apellidos}</div>
              </div>
            </div>
            <div className={"field"+(errs.email?" err":"")}>
              <label>Email corporativo</label>
              <input value={data.email} onChange={set("email")} placeholder="nombre@empresa.com" type="email"/>
              <div className="msg">{errs.email}</div>
            </div>
            <div className="grid-2">
              <div className={"field"+(errs.empresa?" err":"")}>
                <label>Empresa</label>
                <input value={data.empresa} onChange={set("empresa")} placeholder="Tu organización"/>
                <div className="msg">{errs.empresa}</div>
              </div>
              <div className="field">
                <label>Cargo</label>
                <input value={data.cargo} onChange={set("cargo")} placeholder="Tu puesto (opcional)"/>
              </div>
            </div>
            {serverErr && <p style={{color:"#c5343f",fontSize:"13px",fontFamily:"var(--mono)",margin:"0 0 10px"}}>{serverErr}</p>}
            <button className="btn form__submit" type="submit" disabled={sending}>{sending ? "Enviando…" : "Confirmar mi plaza"} {!sending && <span className="arrow">→</span>}</button>
            <p className="form__fine">
              Al registrarte aceptas recibir información sobre el evento de Road to Data y SAS.
              ¿Vienes desde la invitación oficial? <a href={REG_URL} target="_blank" style={{color:"var(--violet-2)"}}>Abrir el formulario original →</a>
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

/* ---------- FOOTER ---------- */
function Footer(){
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot__top">
          <div className="foot__brand">
            Sin datos no hay paraíso <span className="accent">(ni IA)</span>.
          </div>
          <div>
            <div className="eyebrow" style={{marginBottom:"14px"}}>Organizan</div>
            <div className="foot__orgs">
              <img src="resources/PNG/Road to data EDITABLES-20.png" alt="Road to Data" className="foot__logo-r2d"/>
              <img src="resources/SAS_logo_horiz.svg.png" alt="SAS" className="foot__logo-sas"/>
            </div>
          </div>
        </div>
        <div className="foot__bottom">
          <span>© 2026 Road to Data × SAS</span>
          <span>Madrid · 17.06.2026 · 18:00 a 22:00</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- TWEAKS ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0B3D5C",
  "display": "Space Grotesk"
}/*EDITMODE-END*/;

function TweaksUI(){
  const [t,setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(()=>{
    const r=document.documentElement.style;
    r.setProperty("--violet", t.accent);
    r.setProperty("--accent", t.accent);
    r.setProperty("--display", `"${t.display}", "Space Grotesk", sans-serif`);
  },[t.accent,t.display]);
  return (
    <TweaksPanel>
      <TweakSection label="Color de marca"/>
      <TweakColor label="Acento Road to Data" value={t.accent}
        options={["#0B3D5C","#1D5A7A","#6A8DA4","#0a2535","#B3C4D1"]}
        onChange={v=>setTweak("accent",v)}/>
      <TweakSection label="Tipografía display"/>
      <TweakSelect label="Fuente titulares" value={t.display}
        options={["Space Grotesk","Syne","Sora","Archivo","Familjen Grotesk"]}
        onChange={v=>setTweak("display",v)}/>
    </TweaksPanel>
  );
}

/* ---------- APP ---------- */
function App(){
  useReveal();
  return (
    <React.Fragment>
      <DataNodesBackground/>
      <Nav/>
      <Hero/>
      <Intro/>
      <Speakers/>
      <Agenda/>
      <Prize/>
      <Location/>
      <Registration/>
      <Footer/>
      <TweaksUI/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);