/* eslint-disable */
/* global React, Reveal, SectionHead, CountUp, useCycle, Arrow, waLink, WA */
const { useState: useStateS } = React;

const WORDS = ['resultados', 'ventas', 'leads', 'seguidores'];

/* ================= HERO ================= */
function Hero(){
  const i = useCycle(WORDS, 1900);
  return (
    <header className="hero">
      <div className="hero__glow"></div>
      <div className="wrap">
        <Reveal><span className="eyebrow hero__eyebrow">Comunicación y publicidad digital</span></Reveal>
        <Reveal delay={80}>
          <h1 className="hero__kick">Campañas<br/>que generan</h1>
          <div className="hero__slabline">
            <span className="hero__slab"><span className="hero__word" key={i}>{WORDS[i]}</span></span>
          </div>
        </Reveal>
        <Reveal delay={160} className="hero__row">
          <p className="hero__sub">Estrategia, gestión y optimización de Meta Ads para marcas que quieren resultados reales. No solo impresiones.</p>
          <div className="hero__cta">
            <a className="btn btn--lg" href="#contacto">Solicitar presupuesto <Arrow/></a>
          </div>
        </Reveal>
        <Reveal delay={240}>
          <a className="hero__scroll" href="#clientes"><span>conocé cómo trabajo</span><span className="a">↓</span></a>
        </Reveal>
      </div>
    </header>
  );
}

/* ================= STATS ================= */
function Stats(){
  return (
    <section className="section--tight" id="clientes">
      <div className="wrap">
        <Reveal><span className="eyebrow" style={{marginBottom:'8px',display:'inline-flex'}}>Clientes que confían</span></Reveal>
      </div>
      <div className="stats" style={{marginTop:'28px'}}>
        <div className="wrap">
          <div className="stats__grid">
            <Reveal className="stat"><div className="stat__v"><CountUp to={100} prefix="+"/></div><div className="stat__l">Marcas gestionadas en Argentina y el mundo</div></Reveal>
            <Reveal className="stat" delay={120}><div className="stat__v"><CountUp to={500} prefix="+USD " suffix="K"/></div><div className="stat__l">En inversión publicitaria gestionada</div></Reveal>
            <Reveal className="stat" delay={240}><div className="stat__v"><CountUp to={5} prefix="+"/></div><div className="stat__l">Años especializada en Meta Ads</div></Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= SERVICES ================= */
const SERVICES = [
  ['01','Meta Ads','Campañas en Facebook e Instagram diseñadas para convertir. Segmentación precisa, creatividades estratégicas y optimización constante.','Core'],
  ['02','Estrategia digital','Planificación de funnel completo: desde la captación de audiencias frías hasta el nurturing y la conversión final.','Funnel'],
  ['03','Reportes y auditorías','Diagnóstico profundo de tu cuenta publicitaria con métricas claras y recomendaciones accionables.','Diagnóstico'],
  ['04','Asesorías y mentorías','Sesiones 1 a 1 donde te enseño a gestionar tus propias campañas con confianza.','1 a 1'],
  ['05','Gestión mensual','Servicio continuo de gestión, optimización y seguimiento de todas tus campañas activas.','Continuo'],
];
function Services(){
  return (
    <section className="section" id="servicios">
      <div className="wrap">
        <SectionHead idx="01 — Servicios" title={<>Lo que hago<br/>por tu marca</>} lead="Trabajo cada cuenta con una sola obsesión: que cada peso invertido tenga un propósito medible." />
        <div className="svcs">
          {SERVICES.map(([n,t,d,tag]) => (
            <Reveal key={n} className="svc">
              <div className="svc__n">{n}</div>
              <div className="svc__main">
                <h3 className="svc__t">{t}</h3>
                <p className="svc__d">{d}</p>
              </div>
              <div className="svc__tag">{tag}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= ABOUT ================= */
function About(){
  const onErr = (e) => { e.target.src = 'assets/placeholder-mariela.svg'; e.target.onerror = null; };
  return (
    <section className="section" id="sobremi">
      <div className="wrap">
        <SectionHead idx="02 — Sobre mí" title="Soy Mariela" />
        <div className="about__grid">
          <Reveal className="about__portrait">
            <img src="foto-mariela.jpg?v=2" onError={onErr} alt="Mariela Grossi" />
            <span className="about__sig">Mariela Grossi</span>
          </Reveal>
          <Reveal className="about__body" delay={120}>
            <p className="about__big">Hace más de 5 años vivo de la publicidad digital, especializada en <span className="mk">Meta Ads</span>.</p>
            <p className="about__p">Trabajé con más de 100 marcas de Argentina y el mundo, gestionando campañas desde cero. Mi forma de trabajar es simple: primero entiendo tu negocio a fondo, después diseño una estrategia a medida y me ocupo de todo.</p>
            <p className="about__p">Comunicación directa, sin vueltas, con reportes claros. Si estás buscando a alguien que se ponga la camiseta con tu marca como si fuera propia, estás en el lugar correcto.</p>
            <a className="btn" href="#contacto">Trabajemos juntas <Arrow/></a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ================= PROCESS ================= */
const STEPS = [
  ['01','Auditoría profunda','Análisis completo de tu cuenta, métricas y oportunidades reales de mejora.'],
  ['02','Estrategia','Plan a medida: audiencias, funnel, presupuestos y creatividades.'],
  ['03','Lanzamiento','Configuro y lanzo con nomenclatura correcta. A/B testing desde día uno.'],
  ['04','Reportes y mejoras','Informe mensual con métricas claras. Optimización continua.'],
];
function Process(){
  return (
    <section className="section proc" id="proceso">
      <div className="proc__ghost" aria-hidden="true">Proceso</div>
      <div className="wrap">
        <SectionHead idx="03 — Proceso" title="Cómo trabajo" lead="Un método de cuatro pasos, sin improvisar. Claro de principio a fin." />
        <div className="steps">
          {STEPS.map(([n,t,d],idx) => (
            <Reveal key={n} className="step" delay={idx*100}>
              <div className="step__n">{n}</div>
              <h3 className="step__t">{t}</h3>
              <p className="step__d">{d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= RUPTURE ================= */
function Rupture(){
  return (
    <section className="rupture">
      <div className="wrap">
        <Reveal>
          <span className="rupture__label">Cómo trabajo</span>
          <p className="rupture__q">Cada peso invertido tiene <span className="mk">un propósito medible</span>.</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ================= TESTIMONIALS ================= */
const TST = [
  ['Es poco común encontrar un socio de marketing capaz de ofrecer tanto visión estratégica como resultados consistentes. La recomendaría con total confianza a cualquier organización que busque un crecimiento serio.','Giovanni Santos Fábrega','CEO · Panamá Vaults'],
  ['Me siento muy acompañada. Siento que ya no gasto en publicidad, ahora INVIERTO y es una gran diferencia.','Clienta de gestión mensual','Argentina'],
  ['Fue muy clara y organizada, se preocupó por resolver todas mis dudas y darme accionables para conseguir mejores resultados.','Clienta de asesoría','Argentina'],
  ['Gracias por tu dedicación y paciencia. Valoro tu disponibilidad y tu modo didáctico de transmitir conocimiento.','Daniel','Cliente de asesoría'],
];
function Testimonials(){
  return (
    <section className="section" id="testimonios">
      <div className="wrap">
        <SectionHead idx="04 — Testimonios" title="Lo que dicen mis clientes" />
        <div className="tst__grid">
          {TST.map(([q,n,r],idx) => (
            <Reveal key={n} className="tst" delay={(idx%2)*120}>
              <div className="tst__mark">"</div>
              <p className="tst__q">{q}</p>
              <div className="tst__by"><span className="tst__n">{n}</span><span className="tst__r">{r}</span></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ================= RECURSOS TEASER ================= */
function RecursosTeaser(){
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="recursos">
            <div className="recursos__l">
              <span className="recursos__badge">Para vos</span>
              <h3 className="recursos__t">Recursos<br/>para crecer</h3>
              <p className="recursos__d">Tutoriales sobre comunicación, diseño, inteligencia artificial y publicidad digital. Herramientas reales para hacer crecer tu marca.</p>
              <a className="btn" href="/recursos">Ver recursos <Arrow/></a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ================= FAQ ================= */
const FAQS = [
  ['¿Cuánto tiempo tarda en verse resultados?','Los primeros datos relevantes suelen aparecer entre las 2 y 4 semanas de campaña activa. El primer mes es de aprendizaje y testeo; a partir del segundo, ya tenemos información sólida para optimizar y escalar.'],
  ['¿Cuál es la inversión mínima en publicidad?','La inversión mínima en publicidad es de USD 600 mensuales. Este monto permite al algoritmo de Meta salir de la etapa de aprendizaje y generar datos suficientes para optimizar.'],
  ['¿Qué incluye el servicio de gestión mensual?','Creación y configuración de campañas, optimización semanal, testing de audiencias y creatividades, reporte mensual y comunicación directa por WhatsApp.'],
  ['¿Necesito tener experiencia previa?','Para nada. Si contratás la gestión mensual, yo me encargo de todo. Si querés aprender, las asesorías están diseñadas para que entiendas Meta Ads desde cero.'],
  ['¿Cómo es la forma de trabajo?','Trabajo 100% remoto y de forma asincrónica. Comunicación por WhatsApp. Al comenzar, te pido acceso a tu Business Suite y completar un brief.'],
  ['¿Trabajás solo con Meta Ads?','Mi especialidad principal es Meta Ads (Facebook e Instagram). Es donde tengo más experiencia y donde puedo garantizarte los mejores resultados.'],
];
function FAQItem({ q, a, open, onClick }){
  const ref = React.useRef(null);
  return (
    <div className={"faq__i"+(open?" is-open":"")}>
      <button className="faq__h" onClick={onClick} aria-expanded={open}>
        <span className="faq__q">{q}</span>
        <span className="faq__ico" aria-hidden="true"></span>
      </button>
      <div className="faq__a" ref={ref} style={{maxHeight: open ? (ref.current ? ref.current.scrollHeight : 400)+'px' : '0px'}}>
        <div className="faq__inner">{a}</div>
      </div>
    </div>
  );
}
function FAQ(){
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section" id="faq">
      <div className="wrap">
        <SectionHead idx="05 — FAQ" title="Lo que siempre me preguntan" />
        <div className="faq__list">
          {FAQS.map(([q,a],idx) => <FAQItem key={idx} q={q} a={a} open={open===idx} onClick={() => setOpen(open===idx?-1:idx)} />)}
        </div>
      </div>
    </section>
  );
}

/* ================= CONTACT ================= */
const CONDS = [
  ['Producto o servicio activo','Tu negocio tiene que estar en funcionamiento con algo listo para vender.'],
  ['Inversión mínima USD 600/mes','Monto mínimo en publicidad para que Meta genere resultados medibles.'],
  ['Compromiso con el proceso','Mínimo 3 meses para optimizar y escalar tus campañas de forma sostenible.'],
];
function Contact(){
  const [f, setF] = useStateS({ nombre:'', negocio:'', ig:'', vende:'', presu:'', obj:'', contacto:'', extra:'' });
  const [err, setErr] = useStateS('');
  const set = (k) => (e) => setF({ ...f, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if(!f.nombre || !f.contacto){ setErr('Completá al menos tu nombre y un contacto.'); return; }
    setErr('');
    const msg = `Hola Mariela! Quiero trabajar con vos.\n\nNombre: ${f.nombre}\nNegocio: ${f.negocio}\nIG/Web: ${f.ig}\nQué vendo: ${f.vende}\nPresupuesto: ${f.presu}\nObjetivo: ${f.obj}\nContacto: ${f.contacto}\nMás: ${f.extra}`;
    window.open(waLink(msg), '_blank');
  };
  return (
    <section className="section" id="contacto">
      <div className="wrap">
        <SectionHead idx="06 — Empecemos" title="Quiero trabajar con vos" lead="Antes de agendar nuestra primera reunión, revisá que tu negocio cumpla con estas condiciones." />
        <Reveal className="cond">
          {CONDS.map(([t,d],idx) => (
            <div className="cond__i" key={t}><div className="cond__n">{String(idx+1).padStart(2,'0')}</div><h3 className="cond__t">{t}</h3><p className="cond__d">{d}</p></div>
          ))}
        </Reveal>
        <Reveal className="formwrap">
          <form className="form" onSubmit={submit}>
            <h3 className="form__t">¿Cumplís con todo?</h3>
            <p className="form__sub">Completá el formulario y te contacto en 48hs para coordinar nuestra primera reunión.</p>
            <div className="form__grid">
              <div className="field"><label>Tu nombre</label><input value={f.nombre} onChange={set('nombre')} placeholder="Nombre y apellido" /></div>
              <div className="field"><label>Negocio</label><input value={f.negocio} onChange={set('negocio')} placeholder="Nombre de tu marca" /></div>
              <div className="field"><label>Instagram o web</label><input value={f.ig} onChange={set('ig')} placeholder="@tumarca" /></div>
              <div className="field"><label>¿Qué vendés?</label><input value={f.vende} onChange={set('vende')} placeholder="Producto o servicio" /></div>
              <div className="field"><label>Presupuesto mensual</label>
                <select value={f.presu} onChange={set('presu')}><option value="">Seleccioná</option><option>USD 600 – 1.000</option><option>USD 1.000 – 2.000</option><option>USD 2.000 – 5.000</option><option>USD 5.000+</option></select>
              </div>
              <div className="field"><label>Objetivo principal</label>
                <select value={f.obj} onChange={set('obj')}><option value="">Elegí</option><option>Generar ventas</option><option>Conseguir leads</option><option>Más seguidores</option><option>No estoy seguro/a</option></select>
              </div>
              <div className="field field--full"><label>WhatsApp o email</label><input value={f.contacto} onChange={set('contacto')} placeholder="Cómo te contacto" /></div>
              <div className="field field--full"><label>¿Algo más?</label><textarea rows="3" value={f.extra} onChange={set('extra')} placeholder="Contame lo que quieras"></textarea></div>
            </div>
            {err ? <p className="form__note form__err">{err}</p> : null}
            <button className="btn btn--lg" type="submit">Enviar solicitud <Arrow/></button>
            <p className="form__note">Al enviar, se abre WhatsApp con tu info.</p>
          </form>
          <div className="aside">
            <span className="aside__sep">— o</span>
            <h3 className="aside__t">¿Ya corrés campañas por tu cuenta?</h3>
            <p className="aside__d">Si ya estás haciendo publicidad pero querés sacarle más jugo, una asesoría puntual puede ser lo que necesitás.</p>
            <a className="btn btn--ghost" href="/asesoria">Quiero una asesoría <Arrow/></a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Stats, Services, About, Process, Rupture, Testimonials, RecursosTeaser, FAQ, Contact });