const { useState, useEffect, useRef } = React;
/* Shared primitives (Icon, ArrowRight/UpRight, useInView, PingPongVideo,
   Navbar, MobileMenu, Footer, applySdTweaks, SdTweaks) come from shared.jsx.
   Tweak controls (useTweaks, TweaksPanel, …) come from tweaks-panel.jsx. */

/* ============ HERO (dark / navy mode) ============ */
function Hero({ heroRef }) {
  const [, on] = useInView(true);
  return (
    <section id="hero" ref={heroRef} className={`reveal ${on ? 'in' : ''} relative w-full overflow-hidden`}
    style={{ minHeight: '100svh', background: 'var(--dark-b)' }}>
      <video className="hero-video absolute inset-0 w-full h-full object-cover z-0"
      src="uploads/hero2.mp4" autoPlay muted loop playsInline />
      <div className="absolute inset-0 z-[1] pointer-events-none"
      style={{ background: 'rgba(8,18,34,0.14)' }} />
      <div className="absolute top-0 left-0 right-0 h-[20vh] z-[2] pointer-events-none"
      style={{ background: 'linear-gradient(to bottom, var(--dark-b) 0%, rgba(10,22,38,0.45) 42%, rgba(10,22,38,0) 100%)' }} />
      <div className="absolute inset-0 z-[1] pointer-events-none"
      style={{ background: 'radial-gradient(150% 105% at 50% 45%, transparent 62%, rgba(5,10,18,0.6) 100%)' }} />
      <div className="absolute inset-0 z-[1] pointer-events-none"
      style={{ background: 'linear-gradient(100deg, rgba(5,10,18,0.86) 0%, rgba(7,14,26,0.45) 34%, rgba(5,10,18,0) 60%)' }} />
      <div className="absolute bottom-0 left-0 right-0 h-[26vh] z-[2] pointer-events-none"
      style={{ background: 'linear-gradient(to top, var(--dark-a) 0%, rgba(5,10,18,0) 100%)' }} />

      <div className="relative z-10 max-w-[1400px] mx-auto px-5 sm:px-8 flex flex-col justify-end lg:justify-center"
      style={{ minHeight: '100svh', paddingTop: '120px', paddingBottom: '9vh' }}>
        <div className="max-w-[640px] text-center lg:text-left mx-auto lg:mx-0">
          <div className="bfu inline-flex items-center gap-2 glass-light rounded-full px-3.5 py-1.5 mb-7"
          style={{ color: 'var(--light-text)', borderRadius: '999px', transitionDelay: '.35s' }}>
            <span className="inline-block w-1.5 h-1.5 rounded-full" style={{ background: 'var(--cyan)', boxShadow: '0 0 10px var(--cyan)' }} />
            <span className="text-[11.5px] font-grotesk uppercase tracking-[.18em] whitespace-nowrap">Inteligencia artificial</span>
          </div>

          <h1 className="bfu font-grotesk font-600 uppercase leading-[0.92]"
          style={{ color: 'var(--light-text)', letterSpacing: '-0.04em', fontSize: 'clamp(44px, 8.5vw, 104px)', transitionDelay: '.45s' }}>
            Skyline<br />
            Dataforce
          </h1>

          <p className="bfu mt-6 text-[16px] sm:text-[19px] leading-relaxed max-w-[480px] mx-auto lg:mx-0"
          style={{ color: 'rgba(234,240,248,0.72)', fontWeight: 300, transitionDelay: '.6s' }}>
            Automatizamos tus procesos explotando tus datos. Analítica avanzada
            y mantenimiento predictivo, a escala industrial.
          </p>

          <div className="bfu mt-9 flex flex-col items-center lg:items-start gap-3" style={{ transitionDelay: '.75s' }}>
            <a href="#analitica" className="cta-cyan inline-flex items-center gap-2.5 rounded-full pl-7 pr-6 py-4 text-[14px] font-grotesk uppercase tracking-[.06em] whitespace-nowrap"
            style={{ borderRadius: '999px' }}>
              Analítica avanzada <ArrowRight size={16} className="arrow" />
            </a>
            <a href="#mantenimiento" className="glass-light inline-flex items-center gap-2.5 rounded-full pl-7 pr-6 py-4 text-[14px] font-grotesk uppercase tracking-[.06em] whitespace-nowrap"
            style={{ color: 'var(--light-text)', borderRadius: '999px' }}>
              Mantenimiento predictivo <ArrowRight size={16} className="arrow" />
            </a>
          </div>
        </div>
      </div>
    </section>);

}

/* ============ generic dark video section ============ */
function VideoSection({ id, src, eyebrow, title, line, mirror, href }) {
  const [ref, on] = useInView(false);
  const align = mirror ? 'items-end text-right' : 'items-start text-left';
  const padSide = mirror ? 'pr-0 lg:pr-4' : 'pl-0 lg:pl-4';
  return (
    <section id={id} ref={ref} className={`reveal ${on ? 'in' : ''} relative w-full overflow-hidden`} style={{ minHeight: '100svh' }}>
      <PingPongVideo src={src} className="absolute inset-0 w-full h-full object-cover z-0" />
      <div className="absolute inset-0 z-[1] pointer-events-none vignette" />
      <div className="absolute inset-0 z-[1] pointer-events-none"
      style={{ background: mirror ?
        'linear-gradient(260deg, rgba(5,10,18,var(--g1)) 0%, rgba(5,10,18,var(--g2)) 38%, rgba(5,10,18,0) 62%)' :
        'linear-gradient(100deg, rgba(5,10,18,var(--g1)) 0%, rgba(5,10,18,var(--g2)) 38%, rgba(5,10,18,0) 62%)' }} />
      <div className="absolute top-0 left-0 right-0 h-[18vh] z-[2] pointer-events-none"
      style={{ background: 'linear-gradient(to bottom, var(--dark-a), rgba(5,10,18,0))' }} />
      <div className="absolute bottom-0 left-0 right-0 h-[20vh] z-[2] pointer-events-none"
      style={{ background: 'linear-gradient(to top, var(--dark-a), rgba(5,10,18,0))' }} />

      <div className="relative z-10 max-w-[1400px] mx-auto px-5 sm:px-8 flex flex-col justify-center"
      style={{ minHeight: '100svh' }}>
        <div className={`flex flex-col ${align} ${padSide} w-full`}>
          <div className="bfu inline-flex items-center gap-2.5 mb-7">
            <span className="font-grotesk uppercase tracking-[.32em] text-[11px]" style={{ color: 'var(--cyan)' }}>{eyebrow}</span>
            <span className="h-px w-10" style={{ background: 'linear-gradient(90deg, var(--cyan), transparent)' }} />
          </div>

          <h2 className="bfu font-grotesk font-500 leading-[0.94]"
          style={{ color: 'var(--light-text)', letterSpacing: '-0.035em', fontSize: 'clamp(40px, 7.5vw, 96px)', maxWidth: '14ch', transitionDelay: '.1s' }}>
            {title}
          </h2>

          <p className="bfu mt-7 text-[16px] sm:text-[19px] leading-relaxed max-w-[440px]"
          style={{ color: 'rgba(234,240,248,0.66)', fontWeight: 300, transitionDelay: '.22s' }}>
            {line}
          </p>

          <a href={href} className="explore-box bfu group mt-10 inline-flex items-center justify-between gap-10 w-full max-w-[360px] px-7 py-6"
          style={{ transitionDelay: '.34s' }}>
            <span className="font-grotesk uppercase tracking-[.05em] text-[15px] whitespace-nowrap" style={{ color: 'var(--light-text)' }}>Ven a explorar</span>
            <ArrowUpRight size={20} className="arrow" style={{ color: 'var(--cyan)' }} />
          </a>
        </div>
      </div>
    </section>);

}

/* ============ CLOSING (big CTA) + shared FOOTER ============ */
function Closing() {
  const [ref, on] = useInView(false);
  return (
    <section id="cierre" ref={ref} className={`reveal ${on ? 'in' : ''} relative w-full`} style={{ background: 'var(--dark-a)' }}>
      <div className="absolute top-0 left-0 right-0 h-[22vh] pointer-events-none"
      style={{ background: 'linear-gradient(to bottom, var(--dark-a), rgba(5,10,18,0))' }} />
      <div className="relative max-w-[1400px] mx-auto px-5 sm:px-8">
        <div className="py-[18vh] flex flex-col items-center text-center">
          <span className="bfu font-grotesk uppercase tracking-[.32em] text-[11px] mb-8" style={{ color: 'var(--cyan)' }}>Skyline Dataforce</span>
          <h2 className="bfu font-grotesk font-500 leading-[0.95]"
          style={{ color: 'var(--light-text)', letterSpacing: '-0.035em', fontSize: 'clamp(40px, 7vw, 92px)', maxWidth: '16ch', transitionDelay: '.1s' }}>
            Tu operación, un paso adelante.
          </h2>
          <a href="#" onClick={openContact} className="cta-cyan bfu mt-12 inline-flex items-center gap-3 rounded-full pl-8 pr-7 py-5 font-grotesk uppercase tracking-[.06em] text-[15px] whitespace-nowrap"
          style={{ borderRadius: '999px', transitionDelay: '.22s' }}>
            Agendar una demo <ArrowRight size={17} className="arrow" />
          </a>
        </div>
        <Footer />
      </div>
    </section>);

}

/* ============ TWEAKS (per-file persistence block) ============ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#4FD8FF",
  "atmosphere": "Equilibrio",
  "motion": "Medio"
} /*EDITMODE-END*/;

/* ============ APP ============ */
function App() {
  const heroRef = useRef(null);
  const [navHidden, setNavHidden] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {applySdTweaks(t);}, [t.accent, t.atmosphere, t.motion]);

  // nav fades out once you leave the hero
  useEffect(() => {
    const hero = heroRef.current;
    if (!hero) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => setNavHidden(e.intersectionRatio < 0.4));
    }, { threshold: [0, 0.4, 0.6, 1] });
    io.observe(hero);
    return () => io.disconnect();
  }, []);

  return (
    <React.Fragment>
      <Navbar tone="light" logoSrc="uploads/logo-hero.png" hidden={navHidden || menuOpen} onOpenMenu={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} tone="light" logoSrc="uploads/logo-hero.png" />
      <Hero heroRef={heroRef} />
      <VideoSection
        id="analitica"
        src="uploads/analitica.mp4"
        eyebrow="01 / Analítica"
        title="Analítica avanzada"
        line="Tus datos, convertidos en decisiones en tiempo real."
        href="Analítica Avanzada.html" />
      
      <VideoSection
        id="mantenimiento"
        src="uploads/mantenimiento.mp4"
        eyebrow="02 / Mantenimiento"
        title="Mantenimiento predictivo"
        line="Detectamos la falla antes de que detenga la operación."
        href="Mantenimiento Predictivo.html"
        mirror />
      
      <Closing />
      <ContactModal />
      <SdTweaks t={t} setTweak={setTweak} />
    </React.Fragment>);

}

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