import React, {useEffect, useRef, useState} from 'react';
import {createRoot} from 'react-dom/client';
import {motion, useScroll, useTransform, useReducedMotion, useMotionValueEvent} from 'framer-motion';
import Lenis from 'lenis';
import {highlightFrames} from './highlight-motion.mjs';
import './styles.css';
import headerLogo from '../logo-metadron-emblema-3d.webp';
import footerLogo from '../logo-metadron-texto.webp';

const ease=[0.16,1,0.3,1];

function ArrowUpRight({className=''}){
 return <svg className={`link-arrow link-arrow-up-right ${className}`.trim()} viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M5 15 15 5M7 5h8v8"/></svg>;
}

function ArrowUp({className=''}){
 return <svg className={`link-arrow link-arrow-up ${className}`.trim()} viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 16V4M5.5 8.5 10 4l4.5 4.5"/></svg>;
}

function useMediaQuery(query){
 const [matches,setMatches]=useState(()=>typeof window!=='undefined'&&window.matchMedia(query).matches);
 useEffect(()=>{
  const media=window.matchMedia(query);
  const update=()=>setMatches(media.matches);
  update();
  media.addEventListener('change',update);
  return()=>media.removeEventListener('change',update);
 },[query]);
 return matches;
}

function Reveal({children,className='',delay=0}){
  return <motion.div className={className} initial={{y:'105%',opacity:0}} whileInView={{y:0,opacity:1}} viewport={{once:true,amount:.25}} transition={{duration:1.05,delay,ease}}>{children}</motion.div>
}

function RepeatingTitle({first,second}){
 const reducedMotion=useReducedMotion();
 const hidden={y:'110%'};
 const visible={y:'0%'};
 return <motion.div initial={reducedMotion?false:'hidden'} whileInView="visible" viewport={{once:false,amount:.35}}>
  <h2>{[first,second].map((line,index)=><React.Fragment key={line}>{index>0&&<br/>}<span style={{display:'inline-block',overflow:'hidden',verticalAlign:'top',paddingBottom:'.08em',marginBottom:'-.08em'}}><motion.span style={{display:'inline-block'}} variants={{hidden:reducedMotion?visible:hidden,visible}} transition={{duration:reducedMotion?0:.85,delay:reducedMotion?0:index*.14,ease}}>{line}</motion.span></span></React.Fragment>)}</h2>
 </motion.div>
}

function Loader(){
  return <motion.div className="loader" aria-hidden="true" initial={{y:0}} animate={{y:'100%'}} transition={{duration:1.9,delay:.28,ease}}/>;
}

function MagneticButton({children,href='#contacto',dark=false}){
  const ref=useRef(null);
  function move(e){const r=ref.current.getBoundingClientRect();ref.current.style.transform=`translate(${(e.clientX-r.left-r.width/2)*.12}px,${(e.clientY-r.top-r.height/2)*.12}px)`}
  function reset(){ref.current.style.transform='translate(0,0)'}
  return <a ref={ref} onMouseMove={move} onMouseLeave={reset} className={`magnetic ${dark?'dark':''}`} href={href}><span>{children}</span><i><ArrowUpRight/></i></a>
}

function Header(){
 const [open,setOpen]=useState(false);
 return <><header><a className="brand brand-logo" href="#inicio" aria-label="MetaDron — inicio"><img src={headerLogo} alt="Logotipo tridimensional de MetaDron con un dron azul" width="768" height="768" decoding="async"/></a><nav><a href="#ventajas">Ventajas</a><a href="#proceso">Proceso</a><a href="#sectores">Dónde operamos</a></nav><a className="header-cta" href="#contacto">Cotizar proyecto <ArrowUpRight/></a><button className="menu" onClick={()=>setOpen(!open)} aria-label="Abrir menú"><b/><b/></button></header>
 <motion.div className="mobile-nav" animate={{clipPath:open?'circle(150% at 92% 5%)':'circle(0% at 92% 5%)'}} transition={{duration:.7,ease}}><button onClick={()=>setOpen(false)}>Cerrar</button>{[['Ventajas','#ventajas'],['Proceso','#proceso'],['Dónde operamos','#sectores'],['Contacto','#contacto']].map(([label,href])=><a key={label} onClick={()=>setOpen(false)} href={href}>{label}</a>)}</motion.div></>
}

function Hero(){
 const ref=useRef(null); const {scrollYProgress}=useScroll({target:ref,offset:['start start','end end']});
 const imageScale=useTransform(scrollYProgress,[0,.21,.5,1],[1,1.08,1.78,1.78]);
 const imageY=useTransform(scrollYProgress,[0,.52,.78,1],['0%','0%','-100%','-100%']);
 const imageRadius=useTransform(scrollYProgress,[.52,.78],[0,160]);
 const blueMaskScale=useTransform(scrollYProgress,value=>value<.21?Math.max(0,1-value/.21):0);
 const blueMaskOpacity=useTransform(scrollYProgress,value=>value<.207?1:0);
 const titleOpacity=useTransform(scrollYProgress,value=>value<.15?Math.max(0,1-value/.15):0); const titleY=useTransform(scrollYProgress,[0,.15],['0px','34px']);
 const taglineClip=useTransform(scrollYProgress,value=>`inset(${Math.min(value/.21,1)*100}% 0% 0% 0%)`);
 const taglineVisibility=useTransform(scrollYProgress,value=>value<.21?1:0);
 const detailOpacity=useTransform(scrollYProgress,[.24,.33,.43,.5],[0,1,1,0]); const detailY=useTransform(scrollYProgress,[.24,.33],['34px','0px']);
 const chapterScale=useTransform(scrollYProgress,[.52,.78,.90,1],[.48,1,1,.72]);
 const chapterY=useTransform(scrollYProgress,[.52,.78,.90,1],['100vh','0vh','0vh','-24vh']);
 const stageLightOpacity=useTransform(scrollYProgress,[0,.82,.92,1],[0,0,1,1]);
 const chapterColor=useTransform(scrollYProgress,[0,.82,.92,1],['#ffffff','#ffffff','#06152d','#06152d']);
 return <section ref={ref} id="inicio" className="hero-scroll"><motion.div className="hero">
   <motion.div className="hero-stage-light" aria-hidden="true" style={{opacity:stageLightOpacity}}/>
   <motion.h2 className="hero-chapter-title" style={{scale:chapterScale,y:chapterY,color:chapterColor}}>Más seguridad. Más alcance.</motion.h2>
   <motion.div className="hero-media" style={{y:imageY,borderBottomLeftRadius:imageRadius,borderBottomRightRadius:imageRadius}}>
    <picture><source media="(max-width: 800px)" srcSet="/images/dron-limpieza-fachada-panoramica-cdmx-mobile.webp"/><motion.img style={{scale:imageScale,transformOrigin:'62% 43%'}} src="/images/dron-limpieza-fachada-panoramica-cdmx.webp" fetchPriority="high" loading="eager" decoding="async" alt="Dron industrial con sistema de agua limpiando una fachada de vidrio sobre la Ciudad de México"/></picture>
    <div className="hero-shade"/>
   </motion.div>
   <motion.div className="hero-blue-mask" aria-hidden="true" style={{scaleY:blueMaskScale,opacity:blueMaskOpacity}}/>
   <motion.div className="hero-copy" style={{opacity:titleOpacity,y:titleY}}>
    <h1><span><motion.b initial={{y:'110%'}} animate={{y:0}} transition={{duration:1,delay:1.9,ease}}>La altura ya</motion.b></span><span><motion.b initial={{y:'110%'}} animate={{y:0}} transition={{duration:1,delay:2.02,ease}}>no es un límite.</motion.b></span></h1>
   </motion.div>
   <motion.div className="hero-tagline-clip" style={{clipPath:taglineClip,opacity:taglineVisibility}}><motion.p className="hero-tagline" initial={{opacity:0}} animate={{opacity:1}} transition={{duration:1.4,delay:.8,ease:'easeInOut'}}>Limpieza de fachadas con drones</motion.p></motion.div>
   <motion.p className="hero-detail" style={{opacity:detailOpacity,y:detailY}}><span>Limpiamos fachadas y estructuras</span><span>de difícil acceso con drones industriales.</span><span>Servicio en CDMX y Zona Conurbada.</span></motion.p>
 </motion.div></section>
}

const highlightItems=[
 {image:'/images/dron-sobre-techo-nave-industrial.webp',alt:'Dron industrial conectado a una manguera sobre el techo curvo de una nave urbana',text:'Acceso aéreo a superficies elevadas que dificultan la limpieza convencional del inmueble.'},
 {image:'/images/piloto-dron-limpieza-muro-ladrillo.webp',alt:'Piloto opera un dron industrial que lava con agua un muro de ladrillo en una zona delimitada con conos',text:'El personal permanece a nivel de piso, evitando realizar la limpieza suspendido en un andamio de alto riesgo.'},
 {image:'/images/dron-limpieza-fachada-ladrillo-altura.webp',alt:'Dron industrial en vuelo limpia con agua la fachada de ladrillo de un edificio',text:'Trabajamos por zonas y horarios para reducir las interferencias con los accesos y el transito diario.'}
];

function HighlightVisual({item,index,progress,exitProgress}){
 const frame=useTransform(progress,value=>highlightFrames(value)[index]);
 const scale=useTransform(frame,value=>value.scale);
 const x=useTransform(frame,value=>`${value.x*100}%`);
 const y=useTransform(frame,value=>`calc(var(--highlight-height) * ${value.y})`);
 // Counter-scale the photo: only its mask grows, revealing the full crop.
 const innerScale=useTransform(scale,value=>1/Math.max(value,.0001));
 const parallaxScale=useTransform(exitProgress,[0,1],[1,index===highlightItems.length-1?1.24:1]);
 const parallaxY=useTransform(exitProgress,[0,1],['0%',index===highlightItems.length-1?'10%':'0%']);
 return <motion.figure className="highlight-visual" style={{scale,x,y}}><motion.div className="highlight-crop" style={{scale:innerScale,transformOrigin:'center center'}}><motion.img style={{scale:parallaxScale,y:parallaxY}} src={item.image} alt={item.alt} loading="lazy" decoding="async"/></motion.div></motion.figure>
}

function HighlightCopy({item,index,progress}){
 const start=[.18,.44,.74][index];
 const opacity=useTransform(progress,[start,start+.04,start+.10,start+.14],[0,1,1,index===2?1:0]);
 const y=useTransform(progress,[start,start+.04,start+.18],['18px','0px','0px']);
 const visibility=useTransform(opacity,value=>value>.01?'visible':'hidden');
 return <motion.div className="highlight-copy" style={{opacity,y,visibility}}><p>{item.text}</p><a href="#proceso">Conoce el proceso</a></motion.div>
}

function FillWord({children,index,total,progress}){
 const start=.12+(index/total)*.68; const color=useTransform(progress,[start,Math.min(start+.055,.86)],['#c8cbc6','#06152d']);
 return <motion.span style={{color}}>{children}{' '}</motion.span>
}

function FillStatement(){
 const ref=useRef(null); const {scrollYProgress}=useScroll({target:ref,offset:['start 92%','end 35%']});
 const words='La fachada es la primera impresión de un inmueble. El polvo y la suciedad alteran su apariencia. Una limpieza exterior planificada devuelve protagonismo a los materiales, las líneas y la arquitectura'.split(' ');
 return <section className="fill-statement"><p ref={ref}>{words.map((word,index)=><FillWord key={`${word}-${index}`} index={index} total={words.length} progress={scrollYProgress}>{word}</FillWord>)}</p></section>
}

function ExperienceHighlights(){
 const ref=useRef(null); const {scrollYProgress}=useScroll({target:ref,offset:['start start','end end']});
 const [logoVisible,setLogoVisible]=useState(false);
 // Track the normal-flow exit separately, after the sticky gallery releases.
 const {scrollYProgress:exitProgress}=useScroll({target:ref,offset:['end end','end start']});
 useMotionValueEvent(scrollYProgress,'change',value=>setLogoVisible(value>=.6));
 return <section className="experience"><div ref={ref} className="experience-scroll"><div className="experience-sticky">
   {highlightItems.map((item,index)=><HighlightVisual key={item.image} item={item} index={index} progress={scrollYProgress} exitProgress={exitProgress}/>)}
   {highlightItems.map((item,index)=><HighlightCopy key={item.text} item={item} index={index} progress={scrollYProgress}/>)}
   <motion.div className="experience-logo" initial={{opacity:0,y:28,scale:.92}} animate={logoVisible?{opacity:1,y:0,scale:1}:{opacity:0,y:28,scale:.92}} transition={{duration:.75,ease}}><img src={headerLogo} alt="Logotipo tridimensional de MetaDron con un dron azul" width="1568" height="1568" loading="lazy" decoding="async"/></motion.div>
  </div></div><FillStatement/></section>
}

function EditorialGallery(){
 const ref=useRef(null);
 const sectionRef=useRef(null);
 const reducedMotion=useReducedMotion();
 const {scrollYProgress}=useScroll({target:ref,offset:['start 90%','end 45%']});
 const firstY=useTransform(scrollYProgress,[0,.48],['110%','0%']);
 const secondY=useTransform(scrollYProgress,[.12,.68],['110%','0%']);
 return <section ref={sectionRef} className="system-editorial" id="sistema">
  <div className="system-heading-area">
   <div ref={ref} className="system-heading">
    <span className="system-eyebrow">02 — El sistema</span>
    <h2><span><motion.b style={{y:firstY}}>Preparados antes</motion.b></span><span><motion.b style={{y:secondY}}>de despegar.</motion.b></span></h2>
   </div>
  </div>
  <div className="system-single-stage">
   <p className="system-single-copy"><span>La seguridad reúne 3 controles:</span><span>Revisión del Equipo, Delimitación</span><span>del entorno y Ejecución de los trabajos.</span></p>
   <motion.figure className="system-single-photo" initial={reducedMotion?false:{opacity:0,y:56,scale:.94,rotate:.65,clipPath:'inset(14% 18% 14% 18% round 96px)'}} whileInView={{opacity:1,y:0,scale:1,rotate:0,clipPath:'inset(0% 0% 0% 0% round 16px)'}} viewport={{once:true,amount:.22}} transition={{duration:1.15,ease}}>
    <motion.div className="system-single-parallax" initial={reducedMotion?false:{scale:1.12}} whileInView={{scale:1}} viewport={{once:true,amount:.22}} transition={{duration:1.35,ease}}><img src="/images/dron-industrial-metadron-preparacion-tecnica.webp" alt="Dron industrial MetaDron visto de frente durante una revisión técnica sobre una superficie metálica" loading="lazy" decoding="async"/></motion.div>
    <motion.figcaption initial={reducedMotion?false:{opacity:0,x:-18}} whileInView={{opacity:1,x:0}} viewport={{once:true,amount:.22}} transition={{duration:.7,delay:.55,ease}}><span>01</span>Preparación técnica</motion.figcaption>
   </motion.figure>
  </div>
 </section>
}

const sectorData=['Fachadas','Vidrio','Concreto','Acero','Aluminio','Oficinas','Centros comerciales','Naves industriales','Hoteles','Estadios','Monumentos','Granjas solares'];
function Sectors(){
 const ref=useRef(null);
 const reducedMotion=useReducedMotion();
 const [active,setActive]=useState(0);
 const {scrollYProgress}=useScroll({target:ref,offset:['start start','end end']});
 const orbitProgress=useTransform(scrollYProgress,[0,.84],[0,1],{clamp:true});
 const logoY=useTransform(scrollYProgress,[0,.84,.995,1],['0vh','0vh','68vh','70vh']);
 useMotionValueEvent(scrollYProgress,'change',value=>{
  const orbitValue=Math.min(1,value/.84);
  setActive(Math.min(sectorData.length-1,Math.round(orbitValue*(sectorData.length-1))));
 });
 return <section ref={ref} id="sectores" className="sectors sector-wheel-scroll" aria-label="Sectores y superficies">
  <div className="sector-wheel-sticky">
   <div className="sector-wheel-index">{sectorData.map((_,index)=><span key={index} className={active===index?'active':''}>{index+1}</span>)}</div>
   <div className="sector-wheel-visual">
    <div className="sector-orbit-logo"><motion.img style={reducedMotion?{}:{y:logoY}} src={headerLogo} alt="Logotipo tridimensional de MetaDron con un dron azul" width="1568" height="1568" loading="lazy" decoding="async"/></div>
    <div className="sector-orbit">{sectorData.map((sector,index)=><SectorOrbitItem key={sector} sector={sector} index={index} progress={orbitProgress}/>)}</div>
   </div>
  </div>
 </section>
}
function SectorOrbitItem({sector,index,progress}){
 const angle=useTransform(progress,value=>(index-value*(sectorData.length-1))*8);
 const transform=useTransform(angle,value=>`rotate(${value}deg) translateX(var(--sector-radius))`);
 const opacity=useTransform(angle,value=>Math.abs(value)>60?0:Math.max(.14,1-Math.abs(value)/38));
 return <motion.div className="sector-orbit-item" style={{transform,opacity}}><span className={sector.length>=17?'sector-orbit-label-long':undefined}>{sector}</span></motion.div>
}
function AnimateText({children}){return <motion.p initial={{y:22,opacity:0}} animate={{y:0,opacity:1}} transition={{duration:.55,ease}}>{children}</motion.p>}

function ExpandingDifference(){
 const ref=useRef(null);const {scrollYProgress}=useScroll({target:ref,offset:['start start','end end']});
 const edge=useTransform(scrollYProgress,[0,.10,.82,1],[.46,.46,1,1]);
 const clipPath=useTransform(edge,value=>`inset(0 ${(1-value)*100}% 0 0 round 16px)`);
 const copyX=useTransform(edge,value=>`calc(var(--expansion-width) * ${value})`);
 return <section ref={ref} id="ventajas" className="expansion-scroll" aria-label="La diferencia MetaDron"><div className="expansion-sticky"><div className="expansion-stage">
  <motion.figure className="expansion-image" style={{clipPath}}><img src="/images/dron-industrial-aeronave-pista.webp" alt="Vista aérea de un dron industrial y un operador junto a una aeronave blanca en una pista delimitada con conos" loading="lazy" decoding="async"/></motion.figure>
  <motion.div className="expansion-copy" style={{x:copyX}}><div><h2>No todas las fachadas necesitan el mismo tratamiento. El material, el acabado y la suciedad determinan como se aplican los agentes de limpieza y el agua sobre cada superficie.</h2><p>El acceso con dron evita el montaje de andamios en las intervenciones compatibles.</p></div></motion.div>
 </div></div></section>
}

function Intro(){
 const sceneRef=useRef(null);
 const reducedMotion=useReducedMotion();
 const isMobile=useMediaQuery('(max-width: 800px)');
 // Start changing the frame the instant its initial top edge enters the viewport.
 const {scrollYProgress}=useScroll({target:sceneRef,offset:['start 76%','end end']});
 const frameY=useTransform(scrollYProgress,[0,.34,1],['24dvh','0dvh','0dvh']);
 const frameClip=useTransform(scrollYProgress,value=>{
  const entry=Math.min(1,value/.34);
  const square=Math.min(1,value/.13);
  const side=24*(1-entry);
  const radius=180*(1-square);
  return `inset(0 ${side}px 0 ${side}px round ${radius}px ${radius}px ${radius*.35}px ${radius*.35}px)`;
 });
 const copyClip=useTransform(scrollYProgress,value=>{
  const entry=Math.min(1,value/.34);
  const square=Math.min(1,value/.13);
  const top=24*(1-entry);
  const side=24*(1-entry);
  const radius=180*(1-square);
  return `inset(${top}vh ${side}px 0 ${side}px round ${radius}px ${radius}px ${radius*.35}px ${radius*.35}px)`;
 });
 const imageY=useTransform(scrollYProgress,[0,.34,1],['-10%','-4%','10%']);
 const copyOpacity=useTransform(scrollYProgress,[0,.13,.2,1],[0,0,1,1]);
 const copyYDesktop=useTransform(scrollYProgress,[.13,.34,.72,1],['-7vh','4vh','11vh','11vh']);
 const copyYMobile=useTransform(scrollYProgress,[.13,.34,.72,1],['-7dvh','0dvh','2dvh','2dvh']);
 return <section id="tratamiento" className="chapter-transition" aria-label="Tratamiento de superficies">
  <div ref={sceneRef} className="cinematic-scroll">
   <div className="cinematic-sticky">
    <motion.figure className="cinematic-frame" style={reducedMotion?{y:0,clipPath:'inset(0)'}:{y:frameY,clipPath:frameClip}}>
     <motion.img style={reducedMotion?{}:{y:imageY}} src="/images/fachada-vidrio-piedra-reflejo-atardecer.webp" alt="Fachada contemporánea de vidrio y piedra con el cielo del atardecer reflejado en los ventanales" loading="lazy" decoding="async"/>
     <div className="cinematic-shade"/>
    </motion.figure>
    <motion.div className="cinematic-copy-reveal" style={reducedMotion?{clipPath:'inset(0)'}:{clipPath:copyClip}}>
     <motion.div className="cinematic-copy" style={reducedMotion?{}:{opacity:copyOpacity,y:isMobile?copyYMobile:copyYDesktop}}>
      <div><h2><span className="cinematic-heading-line">Respaldamos nuestras</span><span className="cinematic-heading-line">operaciones con todos los</span><span className="cinematic-heading-line">permisos oficiales y pilotos</span><span className="cinematic-heading-line">certificados por AFAC</span></h2><a href="#proceso">Conoce el proceso <ArrowUpRight/></a></div>
     </motion.div>
    </motion.div>
   </div>
  </div>
 </section>
}

function ProcessLine({main=false}){
 const ref=useRef(null);
 const reducedMotion=useReducedMotion();
 const {scrollYProgress}=useScroll({target:ref,offset:['start 95%','end 65%']});
 return <span ref={ref} className={`process-line${main?' process-line-main':''}`} aria-hidden="true"><motion.i style={{scaleY:reducedMotion?1:scrollYProgress}}/></span>
}

function Process(){
 const steps=[['Consulta','Envíanos Ubicación y fotografías del Inmueble.'],['Visita','Evaluamos la viabilidad y el alcance del servicio.'],['Propuesta','Recibe la cotización por metro cuadrado y fechas disponibles.'],['Servicio','Hacemos reporte fotográfico estado actual, ejecutamos servicio y reporte final.']];
 return <section id="proceso" className="process process-snapshot">
  <div className="process-snapshot-shell">
   <div className="process-snapshot-intro">
    <ProcessLine main/>
    <span>04 — Así trabajamos</span>
    <RepeatingTitle first="Una operación." second="Cuatro movimientos."/>
    <p>Te acompañamos en cada paso, desde la evaluación hasta la limpieza de tu inmueble.</p>
    <a href="#contacto">Planificar operación <ArrowUpRight/></a>
   </div>
   <div className="process-snapshot-data">
    <div className="process-snapshot-total"><motion.b initial={{opacity:0,y:28}} whileInView={{opacity:1,y:0}} viewport={{once:true}} transition={{duration:.8,ease}}>04</motion.b><span>movimientos</span></div>
    <div className="process-snapshot-steps">{steps.map((step,index)=><motion.article key={step[0]} initial={{opacity:0,y:18}} whileInView={{opacity:1,y:0}} viewport={{once:true}} transition={{duration:.65,delay:index*.08,ease}}>{index>0&&<ProcessLine/>}<span>0{index+1}</span><h3>{step[0]}</h3><p>{step[1]}</p></motion.article>)}</div>
   </div>
  </div>
 </section>
}

function Footer(){
 const links=[['MetaDron','#inicio'],['Ventajas','#ventajas'],['Proceso','#proceso'],['Dónde operamos','#sectores'],['Contacto','mailto:info@metadron.com.mx']];
 return <footer id="contacto" className="site-footer">
  <a className="site-footer-brand site-footer-logo" href="#inicio" aria-label="MetaDron — inicio">
   <img src={headerLogo} alt="Logotipo tridimensional de MetaDron con un dron azul" width="768" height="768" loading="lazy" decoding="async"/>
  </a>
  <div className="site-footer-links">
   <nav className="site-footer-nav" aria-label="Navegación del pie de página">{links.map(([label,href])=><a key={label} href={href}>{label}</a>)}</nav>
   <div className="site-footer-socials" aria-label="Redes sociales de MetaDron">
    <span>Síguenos</span>
    <div>
     <a href="https://www.instagram.com/meta.dron?stkn=MWs0eTM2bHl0ODBmaA%3D%3D&utm_source=qr" target="_blank" rel="noopener noreferrer" aria-label="Instagram de MetaDron"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4.25"/><circle className="social-dot" cx="17.4" cy="6.7" r="1"/></svg></a>
     <a href="https://www.facebook.com/share/1DhhdGCWou/?mibextid=wwXIfr" target="_blank" rel="noopener noreferrer" aria-label="Facebook de MetaDron"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14.4 21v-8h2.8l.4-3.2h-3.2v-2c0-.9.3-1.6 1.7-1.6H18V3.3c-.8-.1-1.6-.3-2.5-.3-2.6 0-4.4 1.6-4.4 4.5v2.3H8.2V13h2.9v8h3.3Z"/></svg></a>
     <a href="https://www.tiktok.com/@meta.dron?_r=1&_t=ZS-99ofKWk63ux" target="_blank" rel="noopener noreferrer" aria-label="TikTok de MetaDron"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15.2 3c.3 2.3 1.6 3.7 3.8 3.9v3.2a8.2 8.2 0 0 1-3.8-1.2v6.2a5.9 5.9 0 1 1-5.1-5.8v3.3a2.7 2.7 0 1 0 1.8 2.5V3h3.3Z"/></svg></a>
    </div>
   </div>
  </div>
  <div className="site-footer-contact" aria-label="Datos de contacto">
   <a className="site-footer-contact-item" href="mailto:info@metadron.com.mx"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m4 7 8 6 8-6"/></svg><span><small>Correo</small>info@metadron.com.mx</span></a>
   <a className="site-footer-contact-item" href="https://wa.me/525530400303?text=Hola%2C%20me%20interesa%20cotizar%20la%20limpieza%20de%20un%20inmueble%20con%20drones.%20La%20ubicaci%C3%B3n%20es%3A%20%5Bescribe%20aqu%C3%AD%5D.%20Tambi%C3%A9n%20puedo%20compartir%20fotograf%C3%ADas.%20%C2%BFMe%20ayudan%20a%20evaluar%20la%20viabilidad%2C%20el%20alcance%20y%20las%20fechas%20disponibles%3F"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.5 11.7a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.4-4.7a8.5 8.5 0 1 1 16.1-4.1Z"/><g transform="translate(12 12) scale(.82) translate(-12 -12)"><path d="M8.2 7.8c.3-.3.7-.3 1-.1l1.2 1.8c.2.3.1.7-.1.9l-.7.7c.8 1.6 1.8 2.6 3.4 3.4l.7-.7c.3-.3.6-.3.9-.1l1.8 1.2c.3.2.3.7.1 1-1 1.3-2.4 1.6-4 .9-2.7-1.1-5.3-3.7-6.4-6.4-.6-1.7-.2-3.1 1.1-4Z"/></g></svg><span><small>WhatsApp</small>+52 55 3040 0303</span></a>
   <div className="site-footer-contact-item"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg><span><small>Horario</small>Lun–Vie · 09:00–18:00</span></div>
  </div>
  <nav className="site-footer-legal" aria-label="Información legal"><a href="/aviso-legal">Aviso legal</a><a href="/aviso-de-privacidad">Aviso de privacidad</a><a href="/politica-de-cookies">Política de cookies</a><a href="/terminos-y-condiciones">Términos y condiciones</a></nav>
  <div className="site-footer-bottom"><small>© 2026 MetaDron</small><span>Tecnología de altura en limpieza</span><a href="#inicio">Volver arriba <ArrowUp/></a></div>
 </footer>
}

function ClosingImage(){
 const ref=useRef(null);
 const reducedMotion=useReducedMotion();
 const {scrollYProgress}=useScroll({target:ref,offset:['start end','end end']});
 // Counter the frame's ascent: reveal a stationary photo and headline behind it.
 const y=useTransform(scrollYProgress,[0,1],['-100%','0%']);
 return <section ref={ref} className="closing-image" aria-label="El cierre MetaDron">
  <motion.div className="closing-image-content" style={{y:reducedMotion?0:y}}>
   <img src="/images/skyline-edificios-vidrio-anochecer.webp" alt="Panorámica nocturna de una ciudad con edificios iluminados y una torre de vidrio en primer plano" loading="lazy" decoding="async"/>
   <div className="closing-image-shade"/>
   <motion.a className="closing-brand" href="#inicio" aria-label="MetaDron — volver al inicio" initial={reducedMotion?false:{opacity:0,x:-20}} whileInView={{opacity:1,x:0}} viewport={{once:true,amount:.45}} transition={{duration:reducedMotion?0:.9,ease}}><img src={footerLogo} alt="Logotipo tipográfico de MetaDron" width="800" height="800" loading="lazy" decoding="async"/></motion.a>
   <h2><strong>Sube el estándar.</strong> <span>No el riesgo.</span></h2>
  </motion.div>
 </section>
}

const legalNavigation=[
 ['aviso-legal','Aviso legal'],
 ['aviso-de-privacidad','Aviso de privacidad'],
 ['politica-de-cookies','Política de cookies'],
 ['terminos-y-condiciones','Términos y condiciones']
];

const legalMetadata={
 'aviso-legal':{title:'Aviso legal | MetaDron',description:'Información legal, titularidad, propiedad intelectual y condiciones de uso del sitio web de MetaDron.'},
 'aviso-de-privacidad':{title:'Aviso de privacidad | MetaDron',description:'Información sobre el tratamiento de datos personales y el ejercicio de derechos ARCO en MetaDron.'},
 'politica-de-cookies':{title:'Política de cookies | MetaDron',description:'Información sobre las cookies técnicas utilizadas en el sitio web de MetaDron.'},
 'terminos-y-condiciones':{title:'Términos y condiciones | MetaDron',description:'Términos y condiciones aplicables al acceso y uso del sitio web de MetaDron.'}
};

const SiteLink=()=> <a href="https://metadron.com.mx">https://metadron.com.mx</a>;
const EmailLink=()=> <a href="mailto:info@metadron.com.mx">info@metadron.com.mx</a>;
const WhatsAppLink=()=> <a href="https://wa.me/525530400303">+52 55 3040 0303</a>;

function CompanyDetails({includeType=false}){
 return <dl className="legal-details">
  <div><dt>Razón social</dt><dd>METADRON S.A.S. de C.V.</dd></div>
  <div><dt>RFC</dt><dd>MET260518G81</dd></div>
  {includeType&&<div><dt>Tipo de persona</dt><dd>Persona Moral (Sociedad por Acciones Simplificada de Capital Variable)</dd></div>}
  <div><dt>Domicilio fiscal</dt><dd>Av. Revolución 835 Local 8, Col. Santa María Nonoalco, C.P. 03700, Benito Juárez, Ciudad de México</dd></div>
  {includeType&&<div><dt>Nombre comercial</dt><dd>MetaDron</dd></div>}
  <div><dt>Correo electrónico</dt><dd><EmailLink/></dd></div>
  <div><dt>WhatsApp</dt><dd><WhatsAppLink/></dd></div>
 </dl>
}

function LegalContent({slug}){
 if(slug==='aviso-legal')return <>
  <section id="identificacion"><h2><span>01</span>Identificación del Titular</h2><p>En cumplimiento con las disposiciones legales vigentes en México, se informa que el sitio web <SiteLink/> es titularidad de:</p><CompanyDetails includeType/></section>
  <section id="objeto"><h2><span>02</span>Objeto del Sitio Web</h2><p>El sitio web <SiteLink/> tiene como finalidad presentar los servicios de MetaDron, empresa especializada en la limpieza de fachadas y ventanas mediante drones industriales para inmuebles comerciales e industriales en la Ciudad de México y Estado de México. El sitio permite al usuario conocer los servicios disponibles y contactar al equipo técnico a través de correo electrónico o WhatsApp para solicitar una valoración. El sitio es de carácter exclusivamente informativo y no realiza cobros en línea.</p></section>
  <section id="propiedad"><h2><span>03</span>Propiedad Intelectual</h2><p>Todos los contenidos del sitio web —incluyendo textos, imágenes, vídeos, logotipos, diseño gráfico y código fuente— son propiedad de METADRON S.A.S. de C.V. o de terceros que han autorizado su uso, y se encuentran protegidos por la Ley Federal del Derecho de Autor y demás normativa aplicable. Queda expresamente prohibida la reproducción total o parcial de los contenidos sin autorización escrita del titular.</p></section>
  <section id="responsabilidad"><h2><span>04</span>Responsabilidad</h2><p>METADRON S.A.S. de C.V. no se hace responsable de los daños o perjuicios que pudieran derivarse del uso del sitio web, de errores u omisiones en los contenidos, ni de la indisponibilidad temporal del servicio por causas ajenas a su control. La viabilidad técnica de cada proyecto queda sujeta a valoración presencial y puede variar según las características del inmueble.</p></section>
  <section id="legislacion"><h2><span>05</span>Legislación Aplicable y Jurisdicción</h2><p>El presente aviso legal se rige por la legislación mexicana vigente. Para cualquier controversia derivada del acceso o uso de este sitio, las partes se someten a los tribunales competentes de la Ciudad de México.</p></section>
  <section id="contacto"><h2><span>06</span>Contacto</h2><p>Para cualquier consulta: <EmailLink/> <i>·</i> <WhatsAppLink/></p></section>
 </>;
 if(slug==='aviso-de-privacidad')return <>
  <section id="responsable"><h2><span>01</span>Responsable del Tratamiento de Datos</h2><p>En cumplimiento con la Ley Federal de Protección de Datos Personales en Posesión de los Particulares (LFPDPPP), su Reglamento y los Lineamientos del Aviso de Privacidad, se informa que el responsable del tratamiento de sus datos personales es:</p><CompanyDetails/></section>
  <section id="datos"><h2><span>02</span>Datos Personales que se Recaban</h2><p>Al contactar con MetaDron a través de los medios habilitados en el sitio (correo electrónico y WhatsApp), podemos recabar los siguientes datos personales:</p><ul><li>Nombre completo o razón social</li><li>Correo electrónico</li><li>Número de teléfono o WhatsApp</li><li>Dirección o ubicación del inmueble objeto del servicio</li><li>Descripción del proyecto o necesidad de limpieza</li></ul><p>No se recaban datos personales sensibles ni datos de pago a través del sitio web.</p></section>
  <section id="finalidades"><h2><span>03</span>Finalidades del Tratamiento</h2><p>Sus datos personales serán utilizados para las siguientes finalidades primarias:</p><ul><li>Atender su solicitud de información o valoración técnica del proyecto</li><li>Coordinar visitas de inspección al inmueble</li><li>Elaborar propuestas técnicas y económicas personalizadas</li><li>Gestionar contratos de prestación del servicio de limpieza</li></ul><p>Finalidades secundarias (puede oponerse a ellas):</p><ul><li>Envío de información sobre nuevos servicios y capacidades técnicas de MetaDron</li><li>Comunicaciones comerciales relacionadas con limpieza industrial y servicios con drones</li></ul></section>
  <section id="transferencia"><h2><span>04</span>Transferencia de Datos</h2><p>METADRON S.A.S. de C.V. no transfiere sus datos personales a terceros sin su consentimiento, salvo en los casos previstos por el artículo 37 de la LFPDPPP.</p></section>
  <section id="arco"><h2><span>05</span>Derechos ARCO</h2><p>Usted tiene derecho a Acceder, Rectificar, Cancelar u Oponerse (derechos ARCO) al tratamiento de sus datos personales. Para ejercerlos, envíe su solicitud incluyendo nombre completo, descripción del derecho a ejercer y copia de identificación oficial a:</p><dl className="legal-details"><div><dt>Correo electrónico</dt><dd><EmailLink/></dd></div><div><dt>Asunto</dt><dd>Derechos ARCO</dd></div><div><dt>WhatsApp</dt><dd><WhatsAppLink/></dd></div></dl><p>Responderemos en un plazo máximo de 20 días hábiles.</p></section>
  <section id="cookies"><h2><span>06</span>Uso de Cookies</h2><p>El sitio web <SiteLink/> utiliza únicamente cookies técnicas estrictamente necesarias para el correcto funcionamiento del sitio. No se utilizan cookies de analítica, publicidad ni de terceros de ningún tipo.</p></section>
  <section id="cambios"><h2><span>07</span>Cambios al Aviso de Privacidad</h2><p>Nos reservamos el derecho de modificar esta política en cualquier momento. Los cambios serán publicados en <SiteLink/>.</p></section>
  <section id="contacto"><h2><span>08</span>Contacto</h2><p>Para dudas sobre este aviso de privacidad: <EmailLink/> <i>·</i> <WhatsAppLink/></p></section>
 </>;
 if(slug==='politica-de-cookies')return <>
  <section id="definicion"><h2><span>01</span>¿Qué son las Cookies?</h2><p>Las cookies son pequeños archivos de texto que se almacenan en el dispositivo del usuario al visitar un sitio web, permitiendo recordar información sobre su navegación.</p></section>
  <section id="cookies-utilizadas"><h2><span>02</span>Cookies Utilizadas en este Sitio</h2><p>El sitio web <SiteLink/> utiliza exclusivamente cookies técnicas o de sesión, estrictamente necesarias para el correcto funcionamiento del sitio. Estas cookies:</p><ul><li>No recopilan información personal identificable</li><li>No rastrean la navegación en otros sitios web</li><li>Se eliminan automáticamente al cerrar el navegador</li><li>No requieren consentimiento del usuario bajo la normativa aplicable</li></ul><p>En este sitio NO se utilizan:</p><ul><li>Cookies de analítica (Google Analytics u similares)</li><li>Cookies de publicidad o retargeting</li><li>Píxeles de seguimiento de redes sociales</li><li>Cookies de terceros de ningún tipo</li></ul><p>Los enlaces a WhatsApp y redes sociales presentes en el sitio son simples hipervínculos externos. Al acceder a ellos, el usuario entra en plataformas de terceros con sus propias políticas de privacidad y cookies, ajenas a MetaDron.</p></section>
  <section id="gestion"><h2><span>03</span>Gestión de Cookies en el Navegador</h2><p>Puede configurar su navegador para bloquear o eliminar cookies en cualquier momento:</p><ul><li>Google Chrome: Configuración &gt; Privacidad y seguridad &gt; Cookies y otros datos de sitios</li><li>Mozilla Firefox: Opciones &gt; Privacidad y seguridad</li><li>Safari: Preferencias &gt; Privacidad</li><li>Microsoft Edge: Configuración &gt; Privacidad, búsqueda y servicios</li></ul></section>
  <section id="actualizaciones"><h2><span>04</span>Actualizaciones</h2><p>Esta política puede actualizarse si se incorporan nuevas funcionalidades al sitio. Consulte esta página periódicamente en <SiteLink/>.</p></section>
  <section id="contacto"><h2><span>05</span>Contacto</h2><p>Para consultas sobre el uso de cookies: <EmailLink/></p></section>
 </>;
 return <>
  <section id="aceptacion"><h2><span>01</span>Aceptación de los Términos</h2><p>El acceso y uso del sitio web <SiteLink/> implica la aceptación plena y sin reservas de los presentes términos y condiciones. Si no está de acuerdo, le rogamos que se abstenga de utilizar el sitio.</p></section>
  <section id="titular"><h2><span>02</span>Identificación del Titular</h2><p>Este sitio es operado por METADRON S.A.S. de C.V., con RFC MET260518G81, domiciliada en Av. Revolución 835 Local 8, Col. Santa María Nonoalco, C.P. 03700, Benito Juárez, Ciudad de México, bajo el nombre comercial MetaDron.</p></section>
  <section id="objeto"><h2><span>03</span>Objeto del Sitio</h2><p><SiteLink/> es el sitio web corporativo de MetaDron, empresa especializada en la limpieza de fachadas y ventanas mediante drones industriales para inmuebles comerciales e industriales en la Ciudad de México y Estado de México. El sitio permite al usuario conocer los servicios disponibles y contactar al equipo técnico para solicitar una valoración gratuita de su proyecto. No realiza cobros en línea; toda contratación se formaliza directamente entre las partes.</p></section>
  <section id="uso"><h2><span>04</span>Uso Permitido</h2><p>El usuario se compromete a hacer un uso lícito del sitio y en particular se obliga a:</p><ul><li>No realizar actividades ilícitas o que vulneren derechos de terceros</li><li>No introducir virus, malware o cualquier código dañino</li><li>No utilizar el sitio con fines comerciales no autorizados</li><li>No reproducir, copiar o distribuir contenidos del sitio sin autorización escrita</li></ul></section>
  <section id="servicios"><h2><span>05</span>Información sobre Servicios</h2><p>Las descripciones, imágenes y características de los servicios publicados en el sitio tienen carácter informativo y orientativo. La viabilidad técnica de cada proyecto queda sujeta a valoración presencial por parte del equipo de MetaDron, y puede variar según las características, altura y tipo de fachada del inmueble. METADRON S.A.S. de C.V. se reserva el derecho de modificar sus servicios y condiciones sin previo aviso.</p></section>
  <section id="propiedad"><h2><span>06</span>Propiedad Intelectual</h2><p>Todos los contenidos del sitio (textos, imágenes, vídeos, logotipos, diseño y código) son propiedad de METADRON S.A.S. de C.V. o se utilizan con la debida autorización, y están protegidos por la Ley Federal del Derecho de Autor.</p></section>
  <section id="responsabilidad"><h2><span>07</span>Exclusión de Responsabilidad</h2><p>METADRON S.A.S. de C.V. no garantiza la disponibilidad continua del sitio ni la ausencia de errores en los contenidos. No será responsable de daños derivados del uso del sitio ni de los contenidos de sitios de terceros enlazados.</p></section>
  <section id="terceros"><h2><span>08</span>Links a Terceros</h2><p>El sitio contiene enlaces a WhatsApp y redes sociales. Estos servicios son operados por terceros y se rigen por sus propios términos y políticas de privacidad, ajenos a METADRON S.A.S. de C.V.</p></section>
  <section id="modificaciones"><h2><span>09</span>Modificaciones</h2><p>METADRON S.A.S. de C.V. se reserva el derecho de modificar en cualquier momento estos términos. Las modificaciones entrarán en vigor desde su publicación en <SiteLink/>.</p></section>
  <section id="legislacion"><h2><span>10</span>Legislación Aplicable y Jurisdicción</h2><p>Los presentes términos se rigen por la legislación mexicana vigente. Para cualquier controversia, las partes se someten a los tribunales competentes de la Ciudad de México.</p></section>
  <section id="contacto"><h2><span>11</span>Contacto</h2><p>Para cualquier consulta: <EmailLink/> <i>·</i> <WhatsAppLink/></p></section>
 </>;
}

function LegalPage({slug}){
 const metadata=legalMetadata[slug];
 const title=legalNavigation.find(([key])=>key===slug)?.[1]||'Información legal';
 useEffect(()=>{
  document.title=metadata.title;
  const setMeta=(selector,value)=>document.querySelector(selector)?.setAttribute('content',value);
  setMeta('meta[name="description"]',metadata.description);
  setMeta('meta[property="og:title"]',metadata.title);
  setMeta('meta[property="og:description"]',metadata.description);
  setMeta('meta[property="og:url"]',`https://metadron.com.mx/${slug}`);
  setMeta('meta[name="twitter:title"]',metadata.title);
  setMeta('meta[name="twitter:description"]',metadata.description);
  document.querySelector('link[rel="canonical"]')?.setAttribute('href',`https://metadron.com.mx/${slug}`);
  window.scrollTo(0,0);
 },[metadata,slug]);
 return <div className="legal-page">
  <div className="legal-header"><a className="legal-brand" href="/"><img src={headerLogo} alt="Logotipo tridimensional de MetaDron con un dron azul" width="768" height="768"/><span>MetaDron</span></a><a className="legal-back" href="/">Volver al sitio <ArrowUpRight/></a></div>
  <main className="legal-main">
   <div className="legal-hero"><span>Información legal</span><h1>{title}</h1><p>Fecha de última actualización: 23 de septiembre de 2026</p></div>
   <div className="legal-grid"><aside><span>Documentos</span><nav aria-label="Documentos legales">{legalNavigation.map(([key,label])=><a key={key} className={key===slug?'active':''} href={`/${key}`}>{label}<ArrowUpRight/></a>)}</nav></aside><article><LegalContent slug={slug}/></article></div>
  </main>
  <div className="legal-footer"><span>© 2026 MetaDron</span><a href="mailto:info@metadron.com.mx">info@metadron.com.mx</a><a href="https://wa.me/525530400303">+52 55 3040 0303</a></div>
 </div>;
}

function App(){
 useEffect(()=>{const lenis=new Lenis({duration:1.2,smoothWheel:true,wheelMultiplier:.9});let id;function raf(t){lenis.raf(t);id=requestAnimationFrame(raf)}id=requestAnimationFrame(raf);return()=>{cancelAnimationFrame(id);lenis.destroy()}},[]);
 const slug=window.location.pathname.replace(/^\/+|\/+$/g,'');
 if(legalMetadata[slug])return <LegalPage slug={slug}/>;
 return <><Loader/><Header/><main><Hero/><ExperienceHighlights/><ExpandingDifference/><EditorialGallery/><Intro/><Process/><Sectors/></main><Footer/><ClosingImage/></>;
}

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