/* global React, HeroPreview, SectorArt, Glyphs, Social */
// sections.jsx — Secciones de la landing FersaMedia
const { useRef, useEffect, useState } = React;

/* ---------- Hook: scroll reveal ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
      });
    }, { threshold: 0.16, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---------- Wordmark ---------- */
function Wordmark() {
  return <span className="wordmark"><span className="b" style={{ fontWeight: "700" }}>FERSA</span><span className="t">MEDIA</span></span>;
}

/* ---------- NAV ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['#sectores', 'Sectores'], ['#filosofia', 'Cómo trabajamos'], ['#testimonios', 'Testimonios']];
  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
        <div className="nav-inner">
          <a href="#top" aria-label="FersaMedia inicio"><Wordmark /></a>
          <div className="nav-links">
            {links.map(([h, l]) => <a key={h} href={h}>{l}</a>)}
          </div>
          <div className="nav-actions">
            <div className="nav-divider" />
            <a className="btn btn-primary" href="contacto.html">Contactar</a>
            <button className="nav-toggle" aria-label="Abrir menú" onClick={() => setMenu(true)}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
            </button>
          </div>
        </div>
      </nav>
      <div className={'mobile-menu' + (menu ? ' open' : '')}>
        <button className="menu-close" aria-label="Cerrar menú" onClick={() => setMenu(false)}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M6 6l12 12M18 6 6 18" /></svg>
        </button>
        {links.map(([h, l]) => <a key={h} href={h} onClick={() => setMenu(false)}>{l}</a>)}
      </div>
    </React.Fragment>);

}

/* ---------- HERO ---------- */
function Hero({ variant }) {
  const videoRef = useRef(null);
  useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    const tryPlay = () => {const p = v.play();if (p && p.catch) p.catch(() => {});};
    tryPlay();
    document.addEventListener('pointerdown', tryPlay, { once: true });
    return () => document.removeEventListener('pointerdown', tryPlay);
  }, []);
  return (
    <header className="hero shell" id="top">
      <div className="hero-glow" />
      {variant === 'stacked' ?
      <h1 className="reveal" data-delay="1">
          <span className="lead">Una agencia</span>
          <span>que trabaja para</span>
          <span className="em">tus clientes.</span>
        </h1> :

      <h1 className="reveal" data-delay="1">Una agencia que trabaja para <span className="em">tus clientes.</span></h1>
      }
      <p className="hero-sub reveal" data-delay="2">
        Somos expertos en generar relevancia para marcas, con las redes sociales como eje central de todo lo que hacemos.
      </p>
      <div className="hero-cta reveal" data-delay="3">
        <a className="btn btn-primary btn-lg" href="contacto.html">Agenda una llamada <span className="arrow">→</span></a>
      </div>
      <div className="preview-wrap reveal" data-delay="4">
        <div className="preview">
          <video ref={videoRef} className="preview-video" src={(window.__resources && window.__resources.heroVideo) || 'media/hero-loop.mp4'}
          autoPlay loop muted playsInline preload="auto" aria-hidden="true" />
        </div>
      </div>
    </header>);

}

/* ---------- BANNER MARQUEE ---------- */
function Banner() {
  const items = ['Contenido Trending', 'SEO & GEO', 'Google Ads', 'Meta Ads', 'Contenido Organico', 'Automatización con IA',
  'Reputación online', 'Diseño web', 'Redes sociales'];
  const Group = () =>
  <span className="marquee-group" aria-hidden="true">
      {items.map((t, i) =>
    <span className="marquee-item" key={i}>{t}<span className="marquee-dot" style={{ marginLeft: 34 }} /></span>
    )}
    </span>;

  return (
    <div className="banner" role="img" aria-label="Servicios de FersaMedia">
      <div className="marquee"><Group /><Group /></div>
    </div>);

}

/* ---------- PHILOSOPHY (word-by-word) ---------- */
const PHILO = [
'Creamos esta agencia porque tus clientes merecen ser encontrados.',
'Somos especialistas en crear relevancia para marcas y las redes sociales son el eje central de todo lo que construimos.',
'Los algoritmos de redes sociales ya no perdonan la mediocridad. En un mundo cambiante por el impulso de la IA. Nosotros nos adaptamos por ti.',
'Más de 50 empresas, locales e internacionales, ya crecen con nosotros. Cada servicio que ofrecemos es diseñado para tu cliente ideal.'];


function Philosophy() {
  const ref = useRef(null);
  useEffect(() => {
    const container = ref.current;
    if (!container) return;
    const words = Array.from(container.querySelectorAll('.philo-word'));
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
      words.forEach((w) => w.classList.add('lit'));return;
    }
    let ticking = false;
    const update = () => {
      ticking = false;
      const vh = window.innerHeight;
      const start = vh * 0.82;
      const end = vh * 0.30;
      words.forEach((w) => {
        const r = w.getBoundingClientRect();
        const mid = r.top + r.height / 2;
        if (mid < start) w.classList.add('lit');else w.classList.remove('lit');
        // keep "end" referenced for tighter band on tall paragraphs
        void end;
      });
    };
    const onScroll = () => {if (!ticking) {ticking = true;requestAnimationFrame(update);}};
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    update();
    return () => {window.removeEventListener('scroll', onScroll);window.removeEventListener('resize', onScroll);};
  }, []);
  return (
    <section className="philosophy shell" id="filosofia" ref={ref}>
      <p className="philo-label reveal">Filosofía</p>
      <div className="philo-text">
        {PHILO.map((para, pi) =>
        <p className="para" key={pi}>
            {para.split(' ').map((word, wi) =>
          <React.Fragment key={wi}><span className="philo-word">{word}</span>{' '}</React.Fragment>
          )}
          </p>
        )}
      </div>
      <div className="philo-sign reveal">
        <span className="who"><strong>Augusto</strong> — Co-Fundador, FersaMedia</span>
      </div>
    </section>);

}

/* ---------- SECTORES ---------- */
const SECTORES = [
{ k: 'pymes', n: '01', name: 'PYMES', desc: 'Pequeñas y medianas empresas que quieren ser encontradas y llenar su agenda.' },
{ k: 'negocios', n: '02', name: 'Negocios', desc: 'Locales y servicios que necesitan clientes nuevos cada mes, con ROI visible.' },
{ k: 'marcas', n: '03', name: 'Marcas Personales', desc: 'Profesionales que construyen autoridad y reputación en sus redes.' }];

function Sectores() {
  return (
    <section className="sectores shell" id="sectores">
      <div className="sec-head reveal">
        <p className="sec-kicker">Sectores</p>
        <h2 className="sec-title">Nos adaptamos a cada necesidad</h2>
        <p className="sec-sub">Cada estrategia se adapta a quién eres y a cómo te buscan tus clientes.</p>
      </div>
      <div className="sectores-grid">
        {SECTORES.map((s, i) =>
        <a className="sector-card reveal" data-delay={i + 1} key={s.k} href="#contacto">
            <div className="sector-body">
              <div className="sector-head">
                <SectorArt kind={s.k} />
                <h3 className="sector-name">{s.name}</h3>
              </div>
              <p className="sector-desc">{s.desc}</p>
              <span className="sector-go">Ver enfoque <span className="arrow">→</span></span>
            </div>
          </a>
        )}
      </div>
    </section>);

}

/* ---------- SERVICIOS ---------- */
const SERVICIOS = [
{ n: '01', g: 'seo', name: 'SEO & GEO', desc: 'Aparece cuando te buscan en Google y cuando le preguntan a la IA.' },
{ n: '02', g: 'ads', name: 'Ads', desc: 'Campañas en Google, Meta y TikTok que generan clientes desde el primer mes, con ROI visible.' },
{ n: '03', g: 'web', name: 'Diseño Web', desc: 'Webs rápidas, claras y orientadas a convertir visitas en llamadas o consultas.' },
{ n: '04', g: 'rep', name: 'Reputación Online', desc: 'Blog y noticias del sector. Gestión de reseñas en Google que generan confianza y te diferencian.' },
{ n: '05', g: 'crm', name: 'CRM y Automatización', desc: 'Organiza contactos, automatiza seguimientos y no pierdas ninguna oportunidad.' },
{ n: '06', g: 'social', name: 'Redes y Contenido', desc: 'Presencia social que refleja el valor de tu negocio y atrae clientes de forma orgánica.' }];

function Servicios() {
  return (
    <section className="servicios shell" id="servicios">
      <div className="sec-head reveal">
        <p className="sec-kicker">Servicios</p>
        <h2 className="sec-title">Cómo podemos ayudarte</h2>
        <p className="sec-sub">Todo lo que necesitas para atraer clientes y fidelizarlos de acuerdo a tu sector.</p>
      </div>
      <div className="serv-grid">
        {SERVICIOS.map((s, i) =>
        <div className="serv-card reveal" data-delay={i % 3 + 1} key={s.n}>
            <div className="serv-top">
              <h3 className="serv-name">{s.name}</h3>
              {Glyphs[s.g]}
            </div>
            <p className="serv-desc">{s.desc}</p>
          </div>
        )}
      </div>
    </section>);

}

/* ---------- TESTIMONIOS ---------- */
const TESTI = [
{ tag: 'Redes Sociales', q: 'En tres meses pasamos de 400 a 4.200 seguidores en Instagram. Ahora tenemos lista de espera los fines de semana.', name: 'Carlos M.', role: 'Restaurante local', place: 'Valencia', i: 'CM' },
{ tag: 'SEO & GEO', q: 'Aparecemos en el top 3 de Google para todas las búsquedas de nuestra zona. Las consultas nuevas se triplicaron en seis meses.', name: 'Dra. Laura F.', role: 'Clínica dental', place: 'Madrid', i: 'LF' },
{ tag: 'SEO & GEO', q: 'Clientes nos dicen que nos encontraron "preguntándole a la IA". Algo que nunca habíamos considerado y ya es el 30% de las consultas.', name: 'Alejandro V.', role: 'Despacho de abogados', place: 'Mendoza', i: 'AV' },
{ tag: 'Automatización con IA', q: 'El CRM automatizado redujo nuestro tiempo de gestión a la mitad. Más tiempo para enseñar, menos para perseguir leads.', name: 'Marta G.', role: 'Academia de idiomas', place: 'Buenos Aires', i: 'MG' }];

function Testimonios() {
  return (
    <section className="testimonios shell" id="testimonios">
      <div className="sec-head reveal">
        <p className="sec-kicker">Casos de éxito</p>
        <h2 className="sec-title">Lo que ustedes dicen de nosotros.</h2>
        <p className="sec-sub">Negocios reales, locales e internacionales, que ya crecen con nosotros.</p>
      </div>
      <div className="testi-grid">
        {TESTI.map((t, i) =>
        <figure className="testi-card reveal" data-delay={i % 3 + 1} key={i}>
            <blockquote className="testi-quote">“{t.q}”</blockquote>
            <div className="testi-foot">
              <span className="testi-avatar">{t.i}</span>
              <span className="testi-meta">
                <span className="name">{t.name}</span><br />
                <span className="place">{t.role} · {t.place}</span>
              </span>
            </div>
          </figure>
        )}
      </div>
    </section>);

}

/* ---------- CTA FINAL ---------- */
function CtaFinal() {
  return (
    <section className="cta-final shell" id="contacto">
      <div className="cta-glow" />
      <h2 className="reveal">Tu próximo cliente está a un clic.</h2>
      <div className="hero-cta reveal" data-delay="2">
        <a className="btn btn-primary btn-lg" href="contacto.html">Te llamamos <span className="arrow">→</span></a>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
const FOOTER_COLS = [
{ h: 'Sobre nosotros', links: [['Nuestra historia', '#filosofia'], ['Cómo trabajamos', '#filosofia'], ['Testimonios', '#testimonios'], ['Contacto', 'contacto.html']] },
{ h: 'Verticales', links: [['Asesorías y Despachos', 'asesoriasydespachos.html'], ['Salud y Bienestar', 'saludybienestar.html'], ['Fontaneros y Electricistas', 'fontanerosyelectricistas.html']] },
{ h: 'Servicios', links: [['SEO Local', '#servicios'], ['Publicidad de Pago', '#servicios'], ['Diseño Web', '#servicios'], ['Reputación Online', '#servicios'], ['CRM y Automatización', '#servicios'], ['Redes Sociales', '#servicios']] }];

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-top">
          <div className="footer-brand">
            <Wordmark />
            <p className="footer-tag">Apasionados por el marketing, responsables de tu crecimiento.</p>
            <div className="footer-social">
              <a href="https://www.instagram.com/fersamedia/" target="_blank" rel="noopener" aria-label="Instagram">{Social.ig}</a>
              <a href="https://www.linkedin.com/company/fersamedia/" target="_blank" rel="noopener" aria-label="LinkedIn">{Social.li}</a>
              <a href="https://x.com/fersamedia" target="_blank" rel="noopener" aria-label="X">{Social.x}</a>
            </div>
          </div>
          <div className="footer-cols">
            {FOOTER_COLS.map((c) =>
            <div className="footer-col" key={c.h}>
                <h4>{c.h}</h4>
                <ul>{c.links.map(([l, h]) => <li key={l}><a href={h}>{l}</a></li>)}</ul>
              </div>
            )}
          </div>
        </div>
        <div className="footer-bottom">
          <p>© FersaMedia 2026</p>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { useReveal, Nav, Hero, Banner, Philosophy, Sectores, Servicios, Testimonios, CtaFinal, Footer });