/* eslint-disable */
/* global React */
const { useState, useEffect, useRef, useCallback } = React;

const WA = "https://wa.me/541126285230";
const waLink = (t) => `${WA}?text=${encodeURIComponent(t)}`;

/* ---------- hooks ---------- */
function useScrolled(threshold){
  const [s, setS] = useState(false);
  useEffect(() => {
    const on = () => setS(window.scrollY > (threshold||20));
    on(); window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return s;
}

function useInView(opts){
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    const el = ref.current; if(!el) return;
    if(!('IntersectionObserver' in window)){ setSeen(true); return; }
    const io = new IntersectionObserver(([e]) => {
      if(e.isIntersecting){ setSeen(true); io.disconnect(); }
    }, { threshold: 0.18, rootMargin: '0px 0px -8% 0px', ...(opts||{}) });
    io.observe(el);
    // Fallback: never leave content hidden if IO doesn't fire (bg tab / print / capture).
    // Only force-reveal elements that are already at/above the viewport, or when the page
    // isn't visible (print/capture/background) — so below-the-fold sections keep waiting
    // for the observer and animate when the user actually scrolls to them.
    const fb = setTimeout(() => {
      const r = el.getBoundingClientRect();
      if(r.top < window.innerHeight || document.visibilityState === 'hidden'){ setSeen(true); }
    }, 1400);
    return () => { io.disconnect(); clearTimeout(fb); };
  }, []);
  return [ref, seen];
}

function Reveal({ children, className, delay, as, ...rest }){
  const [ref, seen] = useInView();
  const Tag = as || 'div';
  const style = delay ? { transitionDelay: delay+'ms', ...(rest.style||{}) } : rest.style;
  return <Tag ref={ref} {...rest} style={style} className={"reveal "+(seen?"in ":"")+(className||"")}>{children}</Tag>;
}

function useCycle(list, ms){
  const [i, setI] = useState(0);
  useEffect(() => { const t = setInterval(() => setI(p => (p+1)%list.length), ms); return () => clearInterval(t); }, []);
  return i;
}

function CountUp({ to, suffix, prefix, dur }){
  const [ref, seen] = useInView();
  const [v, setV] = useState(0);
  useEffect(() => {
    if(!seen) return;
    let raf, start; const D = dur||1500;
    const tick = (t) => { if(!start) start = t; const p = Math.min((t-start)/D, 1);
      setV(Math.floor((1-Math.pow(1-p,3))*to)); if(p<1) raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [seen, to]);
  return <span ref={ref}>{prefix||''}{v.toLocaleString('es-AR')}{suffix||''}</span>;
}

/* ---------- icons ---------- */
const IgIcon = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg>);
const InIcon = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="7" y1="10" x2="7" y2="17"/><circle cx="7" cy="7" r="0.8" fill="currentColor" stroke="none"/><path d="M11 17v-4a2 2 0 0 1 4 0v4M11 11v6"/></svg>);
const WaIcon = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 21l1.6-4.5A8 8 0 1 1 8 19.5L3 21z"/><path d="M9 9.5c0 3 2.5 5.5 5.5 5.5.6 0 1-.5 1-.5l-1.3-1-1.2.6c-1-.4-2-1.4-2.4-2.4l.6-1.2-1-1.3s-.5.4-.5 1z" fill="currentColor" stroke="none"/></svg>);
const Arrow = () => (<svg className="ar" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="2"><path d="M4 12h15M13 6l6 6-6 6"/></svg>);
const Check = () => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><path d="M5 12.5l4.5 4.5L19 7"/></svg>);

/* nav links for inner pages — anchors resolve back to the home page */
const SUB_LINKS = [
  ['Servicios', '/#servicios'], ['Auditoría', '/auditoria'], ['Asesoría', '/asesoria'],
  ['Sobre mí', '/#sobremi'], ['Proceso', '/#proceso'],
  ['Recursos', '/recursos'], ['FAQ', '/#faq'],
];

/* ---------- Nav ---------- */
const NAV_LINKS = [
  ['Servicios', '#servicios'], ['Auditoría', '/auditoria'], ['Asesoría', '/asesoria'],
  ['Sobre mí', '#sobremi'], ['Proceso', '#proceso'],
  ['Recursos', '/recursos'], ['FAQ', '#faq'],
];
function Nav({ links }){
  const scrolled = useScrolled();
  const [open, setOpen] = React.useState(false);
  const items = links || NAV_LINKS;
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);
  return (
    <>
    <nav className={"nav"+(scrolled?" is-scrolled":"")+(open?" is-open":"")}>
      <div className="wrap nav__in">
        <a className="nav__brand" href="/">Mariela Grossi</a>
        <div className="nav__links">
          {items.map(([l,h]) => <a key={l} className="nav__link" href={h}>{l.toLowerCase()}</a>)}
        </div>
        <a className="nav__cta" href={waLink("Hola Mariela! Visité tu web y quiero que trabajemos juntas.")} target="_blank" rel="noreferrer">Hablemos</a>
        <button className="nav__burger" aria-label="Menú" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
    <div className={"nav__sheet"+(open?" is-open":"")} onClick={() => setOpen(false)}>
      <div className="nav__sheet-in">
        {items.map(([l,h]) => <a key={l} className="nav__sheet-link" href={h} onClick={() => setOpen(false)}>{l.toLowerCase()}</a>)}
        <a className="nav__sheet-cta" href={waLink("Hola Mariela! Visité tu web y quiero que trabajemos juntas.")} target="_blank" rel="noreferrer">Hablemos</a>
      </div>
    </div>
    </>
  );
}

/* ---------- Footer ---------- */
function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__top">
          <div>
            <div className="footer__brand">Mariela Grossi</div>
            <p className="footer__tag">Especialista en comunicación y publicidad digital.</p>
          </div>
          <div className="footer__col">
            <h4>Navegá</h4>
            <a href="/#servicios">Servicios</a>
            <a href="/#sobremi">Sobre mí</a>
            <a href="/#proceso">Proceso</a>
            <a href="/#faq">FAQ</a>
          </div>
          <div className="footer__col">
            <h4>Trabajemos</h4>
            <a href="/auditoria">Auditoría</a>
            <a href="/asesoria">Asesoría 1 a 1</a>
            <a href="/recursos">Recursos</a>
            <a href={waLink("Hola Mariela! Me interesa saber más sobre tus servicios.")} target="_blank" rel="noreferrer">Presupuesto</a>
          </div>
        </div>
        <div className="footer__bottom">
          <p className="footer__c">© 2026 Mariela Grossi. Todos los derechos reservados.</p>
          <div className="footer__social">
            <a href="https://instagram.com/marielagrossi_" target="_blank" rel="noreferrer" aria-label="Instagram"><IgIcon/></a>
            <a href="https://www.linkedin.com/in/marielasolgrossi/" target="_blank" rel="noreferrer" aria-label="LinkedIn"><InIcon/></a>
            <a href={WA} target="_blank" rel="noreferrer" aria-label="WhatsApp"><WaIcon/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- SectionHead ---------- */
function SectionHead({ idx, title, lead, id }){
  return (
    <Reveal className="shead">
      <div className="shead__idx">{idx}</div>
      <h2 className="shead__title" id={id}>{title}</h2>
      {lead ? <p className="shead__lead">{lead}</p> : null}
    </Reveal>
  );
}

Object.assign(window, {
  useScrolled, useInView, Reveal, useCycle, CountUp,
  IgIcon, InIcon, WaIcon, Arrow, Check, Nav, Footer, SectionHead,
  WA, waLink, NAV_LINKS, SUB_LINKS,
});