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

// ============ HERO ============
function HeroRS() {
  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 · Gestión de Redes Sociales</div>

      <h2 className="rs-hero-title">
        CONTENIDO QUE<br /><span className="rs-accent">CONSTRUYE MARCAS</span>
      </h2>

      <p className="rs-hero-sub">
        Contenido estratégico para influencers, expertos y empresas. De la estrategia a la publicación — nos encargamos de todo.
      </p>

      <div className="rs-hero-cta-row">
        <a href="#contacto" className="btn-lime">Hablemos <span>→</span></a>
        <div className="rs-hero-cta-meta">Respuesta en <b>menos de 24h</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>);
}

// ============ ¿PARA QUIÉN TRABAJAMOS? ============
function ParaQuien() {
  const cards = [
    {
      n: "01",
      name: "Influencers y Expertos",
      body: "Construimos tu marca personal. Definimos posicionamiento, pilares, narrativa y formatos. Producimos contenido end-to-end y preparamos funnels que convierten. Tú aportas valor, nosotros hacemos que se vea y se venda."
    },
    {
      n: "02",
      name: "Estrategia y Dirección Creativa",
      body: "Auditoría, workshops, pilares, calendario 30-90 días e ideas accionables. Te entregamos el playbook para que tu equipo ejecute con claridad."
    },
    {
      n: "03",
      name: "Empresas · Contenido 360º",
      body: "Estrategia, ideas, guiones, rodaje, edición, diseño, copies y publicación. Adaptado a tu presupuesto y orientado a ventas, leads o reservas."
    }
  ];
  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">¿PARA QUIÉN<br />TRABAJAMOS?</h2>
            <p className="rs-para-sub">Tres perfiles. Tres formas de trabajar. Nada de paquetes cerrados — ajustamos el alcance al objetivo real de tu marca.</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="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 (4 pasos, timeline) ============
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", "Visión y objetivos", "Sesiones de descubrimiento, auditoría de canales y análisis de competidores. Salimos con una foto clara del punto de partida y los KPIs que vamos a mover."],
    ["02", "Creación de la estrategia", "Plan accionable con pilares de contenido, tono, formatos y calendario 30-90 días. Te lo presentamos y validamos juntos antes de producir."],
    ["03", "Grabación y edición", "Rodaje por lotes en tu negocio o en estudio. Edición con subtítulos, gráficos y versiones adaptadas a cada canal — Reels, TikTok, Shorts."],
    ["04", "Publicación, análisis y optimización", "Copies con CTAs claros, programación inteligente, gestión de comunidad y reporting semanal con métricas y siguiente paso."]
  ];
  return (
    <section id="metodo" className="bg-black rs-section">
      <div className="wrap">
        <Reveal>
          <div className="rs-metodo-head">
            <h2 className="rs-metodo-title">NUESTRO<br />MÉTODO</h2>
            <div className="rs-metodo-kicker">Cuatro fases. Cero improvisación. Cada paso conecta con el siguiente para que el contenido salga, convierta y se mida.</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>);
}

// ============ PROCESO 5 PASOS (abanico) ============
function ProcesoFan() {
  const steps = [
    ["01", "Conoce a tu audiencia", "Investigamos perfiles ICP y Buyer Persona para que cada pieza hable su idioma. Sin asunciones — datos reales y entrevistas."],
    ["02", "Desarrolla ideas ganadoras", "Convertimos insights en conceptos con alto potencial de retención. Hooks, ángulos y formatos que funcionan en tu nicho."],
    ["03", "Empaqueta la marca", "Unificamos mensaje, tono y diseño. Tu marca se reconoce en 3 segundos, en cualquier plataforma y formato."],
    ["04", "Genera impacto", "Publicamos con timing inteligente y CTAs claros orientados a conversión. Reels, Stories, TikToks y Shorts coordinados."],
    ["05", "Crea soluciones", "Transformamos los dolores de tu público en contenidos prácticos y ofertas. Del problema a la venta, sin fricción."]
  ];
  const procesoImgs = ["assets/proceso/paso1.jpg", "assets/proceso/paso2.png", "assets/proceso/paso3.webp", "assets/proceso/paso4.webp", "assets/proceso/paso5.webp"];
  const [active, setActive] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setTimeout(() => setActive(0), 500); }, { threshold: 0.3 });
    io.observe(el); return () => io.disconnect();
  }, []);
  const n = steps.length;
  return (
    <section id="proceso" 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="proceso-head">
            <div className="tag">05 — Cubrimos cada paso</div>
            <h2 className="proceso-title">CUBRIMOS<br />CADA PASO</h2>
          </div>
        </Reveal>
        <div className="fan" ref={ref}>
          {steps.map(([num, title, desc], i) => {
            const isActive = i === active;
            const containerW = 100, activeW = 56;
            const compactW = (containerW - activeW) / (n - 1);
            let left = 0;
            for (let k = 0; k < i; k++) left += k === active ? activeW : compactW;
            const width = isActive ? activeW : compactW;
            return (
              <div key={i} className={`fan-card ${isActive ? 'active' : ''}`}
                style={{ left: `${left}%`, width: `${width}%`, zIndex: isActive ? 10 : n - Math.abs(active - i), transform: `rotate(${isActive ? 0 : (i - active) * 1.2}deg)` }}
                onMouseEnter={() => setActive(i)} onClick={() => setActive(i)} data-hover>
                <div className="fan-img"><img src={procesoImgs[i]} alt={title} loading="lazy" /></div>
                <span className="fan-num-bg">{num}</span>
                <div className="fan-step-label">PASO / {num}</div>
                <h3 className="fan-title">{title}</h3>
                <div className="fan-line"></div>
                <div className="fan-desc">{desc}</div>
                <div className="fan-step-vert">{num} · {title}</div>
              </div>);
          })}
        </div>
      </div>
    </section>);
}

// ============ RESULTADOS ============
function Resultados() {
  const cases = [
    {
      tag: "Joyería · Murcia",
      name: "Joyería Muñoz 1943",
      metrics: [["+20M", "Visitas en redes"], ["+40K", "Seguidores en Instagram"], ["+90K", "Seguidores en TikTok"]]
    },
    {
      tag: "Relaciones conscientes",
      name: "El Código del Amor",
      metrics: [["+50K", "Seguidores orgánicos"], ["14 ×", "Ventas de 6.000€"], ["0 €", "Invertidos en publicidad"]]
    },
    {
      tag: "Salón de belleza · Murcia",
      name: "Natalia's Secret",
      metrics: [["1,9M", "Visualizaciones"], ["3K → 5,6K", "Seguidores"], ["3 meses", "Tiempo de ejecución"]]
    }
  ];
  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">Resultados verificables de marcas reales. Sin filtros, sin métricas de vanidad — sólo lo que mueve el negocio.</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>);
}

// ============ CONSULTA GRATUITA ============
function Consulta() {
  const steps = [
    ["Paso 1", "Rellena el formulario"],
    ["Paso 2", "Nos ponemos en contacto y analizamos tu situación actual"],
    ["Paso 3", "Te proponemos una estrategia para tus redes sociales"]
  ];
  return (
    <section id="consulta" className="bg-black rs-consulta">
      <div className="wrap">
        <Reveal>
          <div className="rs-consulta-head">
            <div className="rs-consulta-eyebrow">↳ Sin compromiso · Online o presencial</div>
            <h2 className="rs-consulta-title">
              RESERVA TU CONSULTA<br /><em>DIAGNÓSTICA GRATUITA</em>
            </h2>
            <p className="rs-consulta-sub">Analizamos tu situación y te proponemos una estrategia concreta. Sin contratos, sin permanencia, sin letra pequeña.</p>
          </div>
        </Reveal>
        <div className="rs-consulta-steps">
          {steps.map(([label, body], i) => (
            <React.Fragment key={i}>
              <Reveal delay={i * 100}>
                <div className="rs-cstep" data-hover>
                  <div className="rs-cstep-num">0{i + 1}</div>
                  <div className="rs-cstep-label">{label}</div>
                  <div className="rs-cstep-body">{body}</div>
                </div>
              </Reveal>
              {i < steps.length - 1 && <div className="rs-cstep-connector" aria-hidden="true">→</div>}
            </React.Fragment>
          ))}
        </div>
        <div className="rs-consulta-cta">
          <a href="#contacto" className="btn-lime">Reservar consulta <span>→</span></a>
        </div>
      </div>
    </section>);
}

// ============ CONTACTO ============
function ContactoRS() {
  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-cream rs-section">
      <div className="wipe wipe-top"><svg viewBox="0 0 1440 80" preserveAspectRatio="none"><path d="M0,80 L1440,80 L1440,45 Q720,-20 0,45 Z" fill="#F5F4EF" /></svg></div>
      <div className="wrap">
        <div className="rs-contact-grid">
          <Reveal>
            <div>
              <h2 className="rs-contact-title">¿HABLAMOS?</h2>
              <p className="rs-contact-sub">Cuéntanos tu proyecto. Te respondemos en menos de 24h con una propuesta concreta.</p>
              <div className="rs-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 redes-sociales · FromZero.es" />
              <input type="hidden" name="_origen" value="redes-sociales" />
              <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 var(--navy)', background: 'rgba(6,13,30,0.06)', color: 'var(--navy)', 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 #c5252a', background: 'rgba(197,37,42,0.06)', color: '#c5252a', fontWeight: 500, fontSize: 15 }}>
                  Algo salió mal. Escríbenos a <a href="mailto:hola@fromzero.es" style={{ color: '#c5252a', 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">Gestión de Redes Sociales en Murcia - FromZero</h1>
      <main>
        <HeroRS />
        <ParaQuien />
        <Metodo />
        <ProcesoFan />
        <Resultados />
        <Consulta />
        <ContactoRS />
      </main>
      <Footer lang={lang} />
    </>
  );
}

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