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

// ============ HERO ============
function HeroDWS() {
  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 · Diseño Web &amp; SEO</div>

      <h2 className="rs-hero-title">
        TU PRIMERA<br />IMPRESIÓN<br /><span className="rs-accent">LO ES TODO</span>
      </h2>

      <p className="rs-hero-sub">
        Diseñamos webs que convierten y las posicionamos para que te encuentren primero en Google.
      </p>

      <div className="rs-hero-cta-row">
        <a href="#contacto" className="btn-lime">Hablemos <span>→</span></a>
        <div className="rs-hero-cta-meta">Web + SEO en una <b>sola estrategia</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>);
}

// ============ DOS SERVICIOS ============
function DosServicios() {
  const web = [
    "Webs a medida desde cero",
    "Diseño responsive para móvil y escritorio",
    "Velocidad y rendimiento optimizados",
    "Integración con formularios, CRM y pasarelas de pago",
    "Diseño orientado a conversión"
  ];
  const seo = [
    "Auditoría SEO completa",
    "Optimización técnica y de contenido",
    "Posicionamiento local en Murcia y toda España",
    "Link building y autoridad de dominio",
    "Reporting mensual de posiciones"
  ];
  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">DOS SERVICIOS,<br />UN OBJETIVO</h2>
            <p className="rs-para-sub">Que te encuentren y que se queden. No vendemos diseño y SEO por separado — los entendemos como una sola estrategia, porque una web bonita sin tráfico no vende y posicionar una web que no convierte tampoco.</p>
          </div>
        </Reveal>
        <div className="dws-duo">
          <Reveal>
            <div className="dws-duo-card" data-hover>
              <div className="dws-duo-head">
                <span className="dws-duo-tag">Diseño · UI/UX · Desarrollo</span>
                <span className="dws-duo-num">01 / 02</span>
              </div>
              <h3 className="dws-duo-name">Diseño<br />Web</h3>
              <div className="dws-duo-rule"></div>
              <ul className="dws-duo-list">
                {web.map((item, i) => (
                  <li key={i} data-n={`0${i + 1}`}>{item}</li>
                ))}
              </ul>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div className="dws-duo-card" data-hover>
              <div className="dws-duo-head">
                <span className="dws-duo-tag">Posicionamiento · Autoridad</span>
                <span className="dws-duo-num">02 / 02</span>
              </div>
              <h3 className="dws-duo-name">SEO</h3>
              <div className="dws-duo-rule"></div>
              <ul className="dws-duo-list">
                {seo.map((item, i) => (
                  <li key={i} data-n={`0${i + 1}`}>{item}</li>
                ))}
              </ul>
            </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", "Análisis", "Auditoría de tu web actual, competencia y oportunidades de posicionamiento. Detectamos qué te frena y qué palabras clave pueden traer clientes reales."],
    ["02", "Diseño", "Creamos la estructura, el diseño y el contenido orientado a conversión y SEO. Cada sección tiene un porqué — y un sitio en el que ranquear."],
    ["03", "Desarrollo", "Construimos la web con código limpio, rápido e indexable por Google. Lighthouse en verde, Core Web Vitals optimizados y CMS si lo necesitas."],
    ["04", "Posicionamiento", "Optimización continua para subir posiciones y mantenerlas. Contenido, autoridad y reporting mensual claro de cada palabra clave."]
  ];
  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. Diseñamos y desarrollamos pensando en Google desde el primer wireframe — no como un parche al final.</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",
      bullets: [
        ["Primera posición", "Google Maps"],
        ["+500 reseñas", "Verificadas"],
        ["Sold out", "Reservas saturadas"]
      ]
    },
    {
      tag: "Joyería · Murcia",
      name: "Joyería Muñoz 1943",
      bullets: [
        ["+20M visitas", "Tráfico acumulado"],
        ["Comunidad activa", "De compradores online"],
        ["Autoridad", "Referente en sector joyero"]
      ]
    },
    {
      tag: "Restaurante · Villajoyosa",
      name: "Vi Sushi",
      bullets: [
        ["Sold out", "Semana 2 de apertura"],
        ["SEO local", "Posicionamiento por barrio"],
        ["Aforo lleno", "Desde el día del lanzamiento"]
      ]
    }
  ];
  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 webs que diseñamos y posicionamos. Números verificables — no proyecciones ni dashboards de demo.</p>
          </div>
        </Reveal>
        <div className="dws-results-grid">
          {cases.map((c, i) =>
            <Reveal key={i} delay={i * 120}>
              <div className="dws-result-card" data-hover>
                <div className="dws-result-cell-tag">
                  <span>Caso real</span>
                  <span className="dws-result-idx">0{i + 1} / 03</span>
                </div>
                <div>
                  <h3 className="dws-result-name">{c.name}</h3>
                  <div className="dws-result-meta">{c.tag}</div>
                </div>
                <ul className="dws-result-bullets">
                  {c.bullets.map(([v, l], k) => (
                    <li key={k}><span><b>{v}</b> · {l}</span></li>
                  ))}
                </ul>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

// ============ POR QUÉ ============
function PorQueDWS() {
  const reasons = [
    { n: "01", name: "Sin permanencia", body: "Mes a mes. Sin ataduras. Si no funcionamos para ti, no hay contrato que te obligue a quedarte." },
    { n: "02", name: "Web + SEO integrados", body: "No son servicios separados, son una sola estrategia. Diseñamos pensando en posicionar — y posicionamos lo que ya está diseñado para convertir." },
    { n: "03", name: "Código limpio", body: "Google premia las webs rápidas, indexables y bien estructuradas con mejores posiciones. Nosotros las construimos así desde el primer commit." },
    { n: "04", name: "Resultados medibles", body: "Sabes exactamente en qué posición estás cada mes. Reporting transparente de keywords, tráfico orgánico y conversiones — sin métricas de vanidad." }
  ];
  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 construir tu web y tu posicionamiento con FromZero — y no con una agencia generalista ni con plantillas recicladas.</p>
          </div>
        </Reveal>
        <div className="dws-why-grid">
          {reasons.map((r, i) =>
            <Reveal key={i} delay={i * 90}>
              <div className="dws-why-card" data-hover>
                <div className="dws-why-num">{r.n}</div>
                <h3 className="dws-why-name">{r.name}</h3>
                <p className="dws-why-body">{r.body}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);
}

// ============ CONTACTO ============
function ContactoDWS() {
  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 dws-contact">
      <div className="wrap">
        <div className="rs-contact-grid">
          <Reveal>
            <div>
              <h2 className="rs-contact-title dws-contact-title">¿HABLAMOS<br />DE TU WEB?</h2>
              <p className="rs-contact-sub dws-contact-sub">Cuéntanos qué necesitas: web nueva, rediseño o solo SEO. Te respondemos en menos de 24h con una propuesta concreta.</p>
              <div className="rs-contact-extras dws-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 diseno-web-seo · FromZero.es" />
              <input type="hidden" name="_origen" value="diseno-web-seo" />
              <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">Diseño Web y SEO en Murcia - FromZero</h1>
      <main>
        <HeroDWS />
        <DosServicios />
        <Metodo />
        <Resultados />
        <PorQueDWS />
        <ContactoDWS />
      </main>
      <Footer lang={lang} />
    </>
  );
}

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