// Page: Home (Inicio)
const { useState: useStateH, useEffect: useEffectH } = React;

function HomePage({ setPage }) {
  const go = (id) => { setPage(id); window.scrollTo({ top: 0, behavior: 'instant' }); };

  return (
    <div className="page active">
      {/* HERO */}
      <section className="hero">
        <div className="hero-bg" />
        <div className="container hero-content">
          <div className="hero-text">
            <span className="eyebrow">Next Moon · Reformas integrales</span>
            <h1>Reformamos tu hogar <em>como si fuera el nuestro.</em></h1>
            <p className="hero-sub">
              Reformas integrales, baños, cocinas y rehabilitación de comunidades
              en Terrassa y el Vallès Occidental. Calidad artesanal,
              presupuestos claros y plazos que se cumplen.
            </p>
            <div className="hero-ctas">
              <a className="btn btn-primary" onClick={() => go('contacto')}>
                Pide tu presupuesto gratuito <Icon.Arrow />
              </a>
              <a className="btn btn-ghost-light" onClick={() => go('servicios')}>
                Ver nuestros servicios
              </a>
            </div>
          </div>
          <div className="hero-visual">
            <div className="placeholder">
              <span className="placeholder-label">Reforma integral · Terrassa</span>
            </div>
            <div className="gold-accent" />
            <div className="gold-fill" />
          </div>
        </div>
        <div className="hero-meta">
          <div>EST. 2019 · VACARISSES</div>
          <div className="scroll-ind">
            <span>SCROLL</span>
            <span className="line" />
          </div>
          <div className="loc">
            <span>41.6°N</span>
            <span>1.9°E</span>
          </div>
        </div>
      </section>

      {/* INTRO */}
      <section className="intro">
        <div className="container">
          <div className="intro-grid">
            <div>
              <span className="eyebrow">Quiénes somos</span>
              <h2>Una empresa local con <em>trato directo</em> del propietario.</h2>
            </div>
            <div className="intro-body">
              <p>En Next Moon cuidamos cada detalle porque sabemos lo que significa reformar una casa o una comunidad: confianza, tiempo y dinero.</p>
              <p>Somos una empresa con sede en Vacarisses especializada en reformas integrales y rehabilitación de zonas comunes. Hablarás siempre con el propietario de la empresa, sin intermediarios.</p>
            </div>
          </div>
          <div className="intro-stats">
            <div className="stat">
              <div className="stat-num">+80<sup>+</sup></div>
              <div className="stat-label">Proyectos entregados</div>
            </div>
            <div className="stat">
              <div className="stat-num">+15</div>
              <div className="stat-label">Años de experiencia</div>
            </div>
            <div className="stat">
              <div className="stat-num">100<sup>%</sup></div>
              <div className="stat-label">Presupuestos detallados</div>
            </div>
            <div className="stat">
              <div className="stat-num">24h</div>
              <div className="stat-label">Respuesta garantizada</div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="services">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Servicios</span>
              <h2>Lo que hacemos, <em>bien hecho.</em></h2>
            </div>
            <p>De la reforma integral a un pequeño arreglo. Cuidamos cada obra con el mismo rigor, porque la confianza se construye en los detalles.</p>
          </div>
          <div className="service-grid">
            {[
              { num: '01', icon: <ServiceIcon.Home />, title: 'Reformas integrales', desc: 'Rediseñamos tu vivienda de principio a fin: obra, instalaciones, acabados y decoración.' },
              { num: '02', icon: <ServiceIcon.Bath />, title: 'Baños', desc: 'Reforma completa de baños con materiales de primera y acabados a medida.' },
              { num: '03', icon: <ServiceIcon.Kitchen />, title: 'Cocinas', desc: 'Cocinas funcionales, duraderas y con un acabado que dura años.' },
              { num: '04', icon: <ServiceIcon.Paint />, title: 'Pintura y acabados', desc: 'Pintura interior y exterior con técnicas limpias y sin polvo.' },
              { num: '05', icon: <ServiceIcon.Building />, title: 'Comunidades', desc: 'Fachadas, tejados, patios, escaleras y zonas comunes. Experiencia con administradores.', featured: true, tag: 'Destacado' },
              { num: '06', icon: <ServiceIcon.Tools />, title: 'Reparaciones', desc: 'Pequeñas reparaciones y mantenimiento con respuesta rápida.' },
            ].map((s, i) => (
              <div key={i} className={`service-card ${s.featured ? 'featured' : ''}`} onClick={() => go(s.title.includes('Comunidades') ? 'comunidades' : 'servicios')}>
                {s.tag && <span className="tag">{s.tag}</span>}
                <div className="service-num">{s.num} / 06</div>
                <div className="service-icon-wrap">{s.icon}</div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <span className="service-arrow"><Icon.Arrow /></span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* WHY */}
      <section className="why">
        <div className="container">
          <div className="section-head kicker-navy">
            <div>
              <span className="eyebrow">¿Por qué elegirnos?</span>
              <h2>Seriedad, transparencia y <em>cumplimiento.</em></h2>
            </div>
            <p>Trabajamos como nos gustaría que trabajaran en nuestra propia casa: con honestidad, limpieza y un plazo que se respeta.</p>
          </div>
          <div className="why-grid">
            {[
              { n: '01', t: 'Empresa local', d: 'Desde Vacarisses, con equipo propio que conoce el Vallès y sus particularidades.' },
              { n: '02', t: 'Trato directo', d: 'Hablarás siempre con el propietario de la empresa, sin intermediarios ni comerciales.' },
              { n: '03', t: 'Presupuestos claros', d: 'Sin sorpresas, todo detallado por partidas. Lo que firmas es lo que pagas.' },
              { n: '04', t: 'Garantía de obra', d: 'Ofrecemos garantía por escrito de todos nuestros trabajos y materiales.' },
              { n: '05', t: 'Plazos que se cumplen', d: 'Planificamos la obra con realismo y cumplimos los plazos acordados.' },
              { n: '06', t: 'Experiencia en comunidades', d: 'Colaboramos con administradores de fincas y presidentes de comunidad del Vallès.' },
            ].map((x, i) => (
              <div key={i} className="why-item">
                <div className="why-num">{x.n}</div>
                <div>
                  <h3>{x.t}</h3>
                  <p>{x.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECTS + TESTIMONIALS — ocultos hasta tener contenido real */}

      {/* CONTACT */}
      <ContactSection setPage={setPage} />
    </div>
  );
}

function TestimonialsSection() {
  const [idx, setIdx] = useStateH(0);
  const items = [
    { q: 'Reformaron nuestro piso de Terrassa en el plazo exacto que prometieron. Trato impecable de Gerjant y su equipo. Recomendado 100%.', n: 'Marta Ferrer', role: 'Particular · Terrassa' },
    { q: 'Llevamos tres comunidades con Next Moon. Presupuestos claros, facturación por partidas y cero problemas en juntas. Una tranquilidad.', n: 'Jordi Ribas', role: 'Administrador de fincas · Sabadell' },
    { q: 'La cocina quedó mejor de lo que imaginábamos. Nos explicaron cada decisión y respetaron el presupuesto al céntimo.', n: 'Anna Puig', role: 'Particular · Rubí' },
    { q: 'Rehabilitación de fachada completa, incluida derrama. Todo documentado, limpio y a tiempo. Volveremos a contar con ellos.', n: 'Carles Nadal', role: 'Presidente comunidad · Terrassa' },
  ];
  const t = items[idx];
  return (
    <section className="testimonials">
      <div className="container">
        <div className="testimonial-wrap">
          <div className="testimonial-side">
            <span className="eyebrow">Testimonios</span>
            <h2>Lo que dicen <em>de nosotros.</em></h2>
            <p>Particulares, presidentes de comunidad y administradores de fincas confían en nosotros año tras año.</p>
            <div className="testimonial-nav">
              <button onClick={() => setIdx((idx - 1 + items.length) % items.length)} aria-label="Anterior"><Icon.ArrowLeft /></button>
              <button onClick={() => setIdx((idx + 1) % items.length)} aria-label="Siguiente"><Icon.Arrow /></button>
            </div>
          </div>
          <div>
            <div className="testimonial-card">
              <span className="quote-mark">"</span>
              <blockquote>"{t.q}"</blockquote>
              <div className="author">
                <div className="author-avatar">{t.n.split(' ').map(w => w[0]).slice(0,2).join('')}</div>
                <div className="author-info">
                  <strong>{t.n}</strong>
                  <span>{t.role}</span>
                </div>
              </div>
            </div>
            <div className="testimonial-dots">
              {items.map((_, i) => (
                <span key={i} className={`testimonial-dot ${i === idx ? 'active' : ''}`} onClick={() => setIdx(i)} />
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContactSection({ setPage }) {
  const [status, setStatus] = useStateH('idle');
  const [form, setForm] = useStateH({ nombre: '', tel: '', email: '', tipo: 'Reforma integral', mensaje: '' });
  const submit = (e) => {
    e.preventDefault();
    if (!form.nombre || !form.email || !form.tel) return;
    setStatus('sending');
    setTimeout(() => {
      setStatus('sent');
      setTimeout(() => setStatus('idle'), 3500);
    }, 900);
  };
  return (
    <section className="contact" id="contacto">
      <div className="container">
        <div className="section-head kicker-navy">
          <div>
            <span className="eyebrow">Contacto</span>
            <h2>Cuéntanos tu <em>proyecto.</em></h2>
          </div>
          <p style={{color:'rgba(250,247,242,0.7)'}}>Respondemos en menos de 24 horas con un presupuesto detallado y gratuito. Sin compromiso.</p>
        </div>
        <div className="contact-grid">
          <div className="contact-info">
            <h3>Estamos a un mensaje.</h3>
            <div className="info-item">
              <span className="info-label">Teléfono</span>
              <div className="info-value"><a href="tel:+34614007303">+34 614 007 303</a></div>
            </div>
            <div className="info-item">
              <span className="info-label">Email</span>
              <div className="info-value"><a href="mailto:nextmoon@gpamoon.com">nextmoon@gpamoon.com</a></div>
            </div>
            <div className="info-item">
              <span className="info-label">Dirección</span>
              <div className="info-value">C/ Montsià 15<br/>08233 Vacarisses (Barcelona)</div>
            </div>
            <div className="info-item">
              <span className="info-label">Horario</span>
              <div className="info-value">Lun–Vie · 08:00 – 19:00<br/>Sáb · 09:00 – 14:00</div>
            </div>
            <div className="info-item">
              <span className="info-label">Zona</span>
              <div className="info-value">Terrassa, Vallès Occidental<br/>y alrededores</div>
            </div>
          </div>
          <form className="contact-form" onSubmit={submit}>
            <div className="form-row">
              <div className="form-field">
                <label>Nombre</label>
                <input type="text" placeholder="Tu nombre" value={form.nombre} onChange={e => setForm({...form, nombre: e.target.value})} required />
              </div>
              <div className="form-field">
                <label>Teléfono</label>
                <input type="tel" placeholder="600 000 000" value={form.tel} onChange={e => setForm({...form, tel: e.target.value})} required />
              </div>
            </div>
            <div className="form-row">
              <div className="form-field">
                <label>Email</label>
                <input type="email" placeholder="tu@email.com" value={form.email} onChange={e => setForm({...form, email: e.target.value})} required />
              </div>
              <div className="form-field">
                <label>Tipo de obra</label>
                <select value={form.tipo} onChange={e => setForm({...form, tipo: e.target.value})}>
                  <option>Reforma integral</option>
                  <option>Baño</option>
                  <option>Cocina</option>
                  <option>Pintura</option>
                  <option>Comunidad de propietarios</option>
                  <option>Reparación / mantenimiento</option>
                  <option>Otra</option>
                </select>
              </div>
            </div>
            <div className="form-row">
              <div className="form-field full">
                <label>Cuéntanos tu proyecto</label>
                <textarea placeholder="Metros, estado actual, qué te gustaría hacer, plazos…" value={form.mensaje} onChange={e => setForm({...form, mensaje: e.target.value})} />
              </div>
            </div>
            <div className="form-check">
              <input type="checkbox" id="rgpd" required />
              <label htmlFor="rgpd">Acepto la <a onClick={(e) => { e.preventDefault(); setPage && setPage('privacidad'); window.scrollTo({top:0}); }} style={{cursor:'pointer', textDecoration:'underline', textUnderlineOffset:'3px'}}>política de privacidad</a> y el tratamiento de mis datos para recibir un presupuesto.</label>
            </div>
            <button type="submit" className={`form-submit ${status === 'sent' ? 'success' : ''}`} disabled={status === 'sending'}>
              {status === 'idle' && <>Enviar y pedir presupuesto <Icon.Arrow /></>}
              {status === 'sending' && 'Enviando…'}
              {status === 'sent' && '✓ Mensaje enviado. Te contactamos en 24h.'}
            </button>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HomePage, TestimonialsSection, ContactSection });