/* global React, ReactDOM, Cursor, TopBar, MenuOverlay, Footer, Reveal */
const { useState, useEffect, useRef } = React;

// ============ HERO ============
function HeroPD() {
  const geo = ["Murcia", "Alicante", "Almería", "Madrid", "Valencia", "Barcelona", "Málaga", "Toda España"];
  return (
    <section id="hero" className="rs-hero bg-navy">
      <div className="rs-hero-grid" aria-hidden="true"></div>
      <div className="rs-hero-glow" aria-hidden="true"></div>

      <div className="rs-hero-tag">Servicio · Publicidad Digital</div>

      <h2 className="rs-hero-title">
        CADA EURO,<br />UN <span className="rs-accent">RESULTADO</span>
      </h2>

      <p className="rs-hero-sub">
        Campañas de Google Ads, Meta Ads y TikTok Ads orientadas a ventas reales. Sin métricas de vanidad.
      </p>

      <div className="rs-hero-cta-row">
        <a href="#contacto" className="btn-lime">Hablemos <span>→</span></a>
        <div className="rs-hero-cta-meta">Resultados desde el <b>primer mes</b></div>
      </div>

      <div className="rs-hero-geo">
        <div className="rs-hero-geo-label">↳ Trabajamos en</div>
        <div className="rs-hero-geo-list">
          {geo.map((g, i) => <span key={i}>{g}</span>)}
        </div>
      </div>

      <div className="rs-hero-scroll-cue" aria-hidden="true">
        <span>Scroll</span>
        <span className="dot"></span>
      </div>
    </section>);
}

// ============ SERVICIOS — ¿Qué gestionamos? ============
function QueGestionamos() {
  const cards = [
    {
      n: "01",
      tag: "Search · Display · Shopping",
      name: "Google Ads",
      body: "Campañas de búsqueda, display y shopping orientadas a captar clientes que ya te están buscando. Puja inteligente y optimización continua sobre las palabras clave que mueven tu negocio."
    },
    {
      n: "02",
      tag: "Facebook · Instagram",
      name: "Meta Ads",
      body: "Campañas en Facebook e Instagram para generar leads, ventas y reconocimiento de marca. Segmentación avanzada por audiencias, públicos similares y creatividades que convierten."
    },
    {
      n: "03",
      tag: "Vídeo vertical · UGC",
      name: "TikTok Ads",
      body: "Publicidad en el formato que más crece. Creamos los creativos y gestionamos las campañas para maximizar el retorno en la red social con mayor crecimiento del último año."
    }
  ];
  return (
    <section id="servicios" className="bg-cream rs-section">
      <div className="wipe wipe-top"><svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,80 L1440,80 L1440,40 Q720,-30 0,40 Z" fill="#F5F4EF" /></svg></div>
      <div className="wrap">
        <Reveal>
          <div className="rs-para-head">
            <h2 className="rs-para-title">¿QUÉ<br />GESTIONAMOS?</h2>
            <p className="rs-para-sub">Las tres plataformas donde tu cliente está hoy. Gestionamos cada euro como si fuera nuestro — porque tu retorno es lo que mide nuestro trabajo.</p>
          </div>
        </Reveal>
        <div className="rs-para-grid">
          {cards.map((c, i) =>
            <Reveal key={i} delay={i * 100}>
              <div className="rs-para-card" data-hover>
                <div className="rs-para-num">{c.n} / 03</div>
                <h3 className="rs-para-name">{c.name}</h3>
                <div className="pd-card-tag">{c.tag}</div>
                <div className="rs-para-rule"></div>
                <p className="rs-para-body">{c.body}</p>
                <span className="rs-para-arrow">Saber más →</span>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

// ============ MÉTODO ============
function MetodoStep({ num, name, body, idx }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setVis(true); }, { threshold: 0.25 });
    io.observe(el); return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={`rs-metodo-step ${vis ? 'in' : ''}`} style={{ transitionDelay: `${idx * 80}ms` }}>
      <div className="rs-metodo-num">{num}</div>
      <h3 className="rs-metodo-name">{name}</h3>
      <p className="rs-metodo-body">{body}</p>
    </div>);
}

function Metodo() {
  const steps = [
    ["01", "Auditoría", "Analizamos tu situación actual, competencia y oportunidades. Revisamos cuentas activas, históricos y datos de tu CRM para no partir de cero."],
    ["02", "Estrategia", "Definimos objetivos, presupuesto, audiencias y creatividades. Plan accionable validado contigo antes de gastar el primer euro."],
    ["03", "Lanzamiento", "Activamos las campañas con seguimiento diario los primeros 15 días. Tracking limpio, eventos correctos y aprendizaje rápido."],
    ["04", "Optimización", "Ajustamos cada semana para maximizar el retorno. Pausamos lo que no funciona, escalamos lo que sí, e iteramos los creativos en continuo."]
  ];
  return (
    <section id="metodo" className="bg-black rs-section">
      <div className="wrap">
        <Reveal>
          <div className="rs-metodo-head">
            <h2 className="rs-metodo-title">CÓMO LO<br />HACEMOS</h2>
            <div className="rs-metodo-kicker">Cuatro fases. Cero improvisación. Cada euro invertido tiene un porqué, un canal y una métrica que lo respalda.</div>
          </div>
        </Reveal>
        <div className="rs-metodo">
          {steps.map(([n, t, b], i) => <MetodoStep key={i} num={n} name={t} body={b} idx={i} />)}
        </div>
      </div>
    </section>);
}

// ============ RESULTADOS ============
function Resultados() {
  const cases = [
    {
      tag: "Restaurante · Alicante",
      name: "Sushi Cero",
      metrics: [["+500", "Reseñas Google"], ["Sold out", "Reservas saturadas"], ["3.500", "Seguidores orgánicos"]]
    },
    {
      tag: "Gimnasio · Murcia",
      name: "CMC Fitness",
      metrics: [["+100", "Nuevos suscriptores"], ["< 3 meses", "Tiempo de ejecución"], ["ROI", "Positivo desde el mes 1"]]
    },
    {
      tag: "Restaurante · Villajoyosa",
      name: "Vi Sushi",
      metrics: [["Sold out", "Semana 2 de apertura"], ["40K", "Visualizaciones"], ["100 %", "Aforo lleno"]]
    }
  ];
  return (
    <section id="resultados" className="bg-navy rs-section">
      <div className="wrap">
        <Reveal>
          <div className="rs-results-head">
            <h2 className="rs-results-title">LO QUE<br />CONSEGUIMOS</h2>
            <p className="rs-results-sub">Casos reales de marcas que confiaron en nosotros. Números verificables — no proyecciones ni "mejores meses".</p>
          </div>
        </Reveal>
        <div className="rs-results-grid">
          {cases.map((c, i) =>
            <Reveal key={i} delay={i * 120}>
              <div className="rs-result-card" data-hover>
                <div className="rs-result-cell-tag">
                  <span>Caso real</span>
                  <span className="rs-result-idx">0{i + 1} / 03</span>
                </div>
                <div>
                  <h3 className="rs-result-name">{c.name}</h3>
                  <div className="rs-result-meta">{c.tag}</div>
                </div>
                <div className="rs-result-metrics">
                  {c.metrics.map(([v, l], k) =>
                    <div key={k} className="rs-result-metric">
                      <span className="rs-result-metric-v">{v}</span>
                      <span className="rs-result-metric-l">{l}</span>
                    </div>
                  )}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

// ============ POR QUÉ FROMZERO ============
function PorQue() {
  const reasons = [
    {
      n: "01",
      name: "Sin permanencia",
      body: "Trabajamos mes a mes. Confiamos en nuestros resultados — si no funcionamos para ti, no hay contrato que te ate."
    },
    {
      n: "02",
      name: "Resultados desde el primer mes",
      body: "No esperamos 6 meses para ver si funciona. Si el primer mes no da señales, lo ajustamos. Si no es viable, te lo decimos."
    },
    {
      n: "03",
      name: "Creatividades incluidas",
      body: "Nos encargamos del diseño de los anuncios — copy, imagen y vídeo. Sin pasarte la pelota a un diseñador externo."
    },
    {
      n: "04",
      name: "Reporting transparente",
      body: "Sabes exactamente en qué se invierte cada euro. Dashboards claros, llamadas mensuales y acceso a la cuenta — siempre."
    }
  ];
  return (
    <section id="porque" className="bg-cream rs-section">
      <div className="wipe wipe-top"><svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,80 L1440,80 L1440,30 Q720,90 0,30 Z" fill="#F5F4EF" /></svg></div>
      <div className="wrap">
        <Reveal>
          <div className="rs-para-head">
            <h2 className="rs-para-title">¿POR QUÉ<br />NOSOTROS?</h2>
            <p className="rs-para-sub">Cuatro razones para gestionar tu inversión publicitaria con FromZero — y no con una agencia tradicional ni con un freelance suelto.</p>
          </div>
        </Reveal>
        <div className="pd-why-grid">
          {reasons.map((r, i) =>
            <Reveal key={i} delay={i * 90}>
              <div className="pd-why-card" data-hover>
                <div className="pd-why-num">{r.n}</div>
                <h3 className="pd-why-name">{r.name}</h3>
                <p className="pd-why-body">{r.body}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

// ============ CONTACTO ============
function ContactoPD() {
  const [form, setForm] = useState({ email: '', name: '', phone: '', message: '' });
  const [errs, setErrs] = useState({});
  const [status, setStatus] = useState('idle');
  const u = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!form.email.trim()) er.email = "Requerido";
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) er.email = "Email no válido";
    if (!form.name.trim()) er.name = "Requerido";
    if (!form.message.trim()) er.message = "Requerido";
    setErrs(er);
    if (Object.keys(er).length > 0) return;
    setStatus('sending');
    try {
      const fd = new FormData(e.target);
      const res = await fetch('https://formspree.io/f/xrejvgea', { method: 'POST', body: fd, headers: { 'Accept': 'application/json' } });
      if (res.ok) { setStatus('success'); setForm({ email: '', name: '', phone: '', message: '' }); }
      else setStatus('error');
    } catch (_) { setStatus('error'); }
  };
  return (
    <section id="contacto" className="bg-navy rs-section pd-contact">
      <div className="wrap">
        <div className="rs-contact-grid pd-contact-grid">
          <Reveal>
            <div>
              <h2 className="rs-contact-title pd-contact-title">¿HABLAMOS<br />DE TU CAMPAÑA?</h2>
              <p className="rs-contact-sub pd-contact-sub">Cuéntanos tu objetivo y tu presupuesto. Te respondemos en menos de 24h con una propuesta concreta.</p>
              <div className="rs-contact-extras pd-contact-extras">
                <a href="mailto:hola@fromzero.es" data-hover>hola@fromzero.es</a>
                <a href="tel:+34650720278" data-hover>+34 650 720 278</a>
                <div style={{opacity:0.5}}>Murcia · España</div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={140}>
            <form className="contact-form" action="https://formspree.io/f/xrejvgea" method="POST" onSubmit={submit} noValidate>
              <input type="hidden" name="_subject" value="Nuevo contacto desde publicidad-digital · FromZero.es" />
              <input type="hidden" name="_origen" value="publicidad-digital" />
              <div className="field"><label htmlFor="fz-email">Correo electrónico</label><input id="fz-email" name="email" type="email" value={form.email} onChange={u('email')} /><div className="err">{errs.email || ''}</div></div>
              <div className="field"><label htmlFor="fz-nombre">Nombre</label><input id="fz-nombre" name="nombre" value={form.name} onChange={u('name')} /><div className="err">{errs.name || ''}</div></div>
              <div className="field"><label htmlFor="fz-tel">Número de teléfono</label><input id="fz-tel" name="telefono" type="tel" value={form.phone} onChange={u('phone')} /><div className="err"></div></div>
              <div className="field"><label htmlFor="fz-msg">Mensaje</label><textarea id="fz-msg" name="mensaje" rows={3} value={form.message} onChange={u('message')}></textarea><div className="err">{errs.message || ''}</div></div>
              <button type="submit" className="btn-send" disabled={status === 'sending'}>
                {status === 'sending' ? 'Enviando…' : 'Enviar →'}
              </button>
              {status === 'success' && (
                <div role="status" style={{ marginTop: 16, padding: '14px 18px', border: '1px solid #BFFF00', background: 'rgba(191,255,0,0.10)', color: '#BFFF00', fontWeight: 500, fontSize: 15 }}>
                  ¡Mensaje enviado! Te contactamos en menos de 24 horas.
                </div>
              )}
              {status === 'error' && (
                <div role="alert" style={{ marginTop: 16, padding: '14px 18px', border: '1px solid #ff4d4d', background: 'rgba(255,77,77,0.08)', color: '#ff4d4d', fontWeight: 500, fontSize: 15 }}>
                  Algo salió mal. Escríbenos a <a href="mailto:hola@fromzero.es" style={{ color: '#ff4d4d', textDecoration: 'underline' }}>hola@fromzero.es</a>
                </div>
              )}
            </form>
          </Reveal>
        </div>
      </div>
    </section>);
}

// ============ APP ============
function App() {
  const [lang, setLang] = useState('es');
  const [menuOpen, setMenuOpen] = useState(false);
  const [onCream, setOnCream] = useState(false);
  useEffect(() => {
    const handle = () => {
      const y = 50, x = window.innerWidth / 2;
      const el = document.elementFromPoint(x, y); if (!el) return;
      const section = el.closest('section, footer');
      setOnCream(section && section.classList.contains('bg-cream'));
    };
    handle();
    window.addEventListener('scroll', handle, { passive: true });
    window.addEventListener('resize', handle);
    return () => { window.removeEventListener('scroll', handle); window.removeEventListener('resize', handle); };
  }, []);
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);
  useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; }, [menuOpen]);
  return (
    <>
      <Cursor />
      <TopBar lang={lang} setLang={setLang} onMenu={() => setMenuOpen(true)} onCream={onCream && !menuOpen} backToHome />
      <MenuOverlay open={menuOpen} onClose={() => setMenuOpen(false)} lang={lang} />
      <h1 className="sr-only">Publicidad Digital en Murcia - Google Ads, Meta Ads y TikTok Ads - FromZero</h1>
      <main>
        <HeroPD />
        <QueGestionamos />
        <Metodo />
        <Resultados />
        <PorQue />
        <ContactoPD />
      </main>
      <Footer lang={lang} />
    </>
  );
}

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