// Remaining pages: Servicios, Comunidades, Proyectos, Nosotros, Contacto

function PageHeader({ eyebrow, title, titleEm, lead, breadcrumb }) {
  return (
    <section className="page-header">
      <div className="container">
        <div className="breadcrumb">Inicio <span>/ {breadcrumb}</span></div>
        <span className="eyebrow">{eyebrow}</span>
        <h1>{title} <em>{titleEm}</em></h1>
        <p>{lead}</p>
      </div>
    </section>
  );
}

/* ============================================
   SERVICIOS PAGE
   ============================================ */
function ServiciosPage({ setPage }) {
  const services = [
    {
      eyebrow: '01 · Reformas integrales',
      title: 'Rediseñamos tu hogar',
      em: 'de principio a fin.',
      lead: 'Asumimos la reforma completa de tu vivienda: demolición, instalaciones, albañilería, acabados y decoración. Un único equipo responsable de todo.',
      includes: ['Proyecto y plan de obra', 'Albañilería estructural', 'Fontanería y electricidad', 'Carpintería a medida', 'Suelos y alicatados', 'Pintura y acabados'],
      num: '01',
      label: 'Reforma integral · piso 85m² · Terrassa',
    },
    {
      eyebrow: '02 · Baños',
      title: 'Baños elegantes,',
      em: 'duraderos y funcionales.',
      lead: 'Reforma completa o renovación parcial. Trabajamos con materiales de primera calidad y resolvemos la fontanería y los problemas invisibles que otros no ven.',
      includes: ['Sanitarios y grifería', 'Platos de ducha', 'Alicatado y pavimento', 'Mamparas a medida', 'Iluminación', 'Muebles de baño'],
      num: '02',
      label: 'Baño principal · reforma completa',
    },
    {
      eyebrow: '03 · Cocinas',
      title: 'Cocinas pensadas',
      em: 'para durar años.',
      lead: 'Desde el rediseño de la distribución hasta los acabados finales. Trabajamos con carpinteros y electrodomésticos de primera.',
      includes: ['Mobiliario a medida', 'Encimeras de silestone / granito', 'Electrodomésticos integrados', 'Iluminación técnica', 'Campanas y extracción', 'Islas y penínsulas'],
      num: '03',
      label: 'Cocina abierta al salón',
    },
    {
      eyebrow: '04 · Pintura y acabados',
      title: 'Pintura limpia,',
      em: 'sin polvo ni sorpresas.',
      lead: 'Pintura interior y exterior. Técnicas decorativas, esmaltes, plásticas y tratamientos especiales. Protegemos el mobiliario y dejamos la obra impecable.',
      includes: ['Pintura plástica interior', 'Esmaltes y lacados', 'Pintura exterior fachadas', 'Estucos y veladuras', 'Reparación de humedades', 'Preparación de superficies'],
      num: '04',
      label: 'Pintura integral vivienda',
    },
    {
      eyebrow: '05 · Comunidades de propietarios',
      title: 'El contratista de confianza',
      em: 'para tu comunidad.',
      lead: 'Fachadas, tejados, patios de luces, escaleras, zonas comunes. Trabajamos con administradores de fincas de todo el Vallès con presupuestos por partidas y facturación clara.',
      includes: ['Rehabilitación de fachadas', 'Impermeabilización de tejados', 'Patios de luces', 'Escaleras y portales', 'Zonas comunes', 'Pintura exterior'],
      num: '05',
      label: 'Rehabilitación fachada · 4 plantas',
    },
    {
      eyebrow: '06 · Reparaciones y mantenimiento',
      title: 'Pequeños arreglos,',
      em: 'mismo cuidado.',
      lead: 'Goteras, desperfectos, arreglos puntuales y mantenimiento preventivo. Respondemos rápido porque entendemos que lo pequeño también urge.',
      includes: ['Reparación de humedades', 'Pequeños arreglos', 'Mantenimiento preventivo', 'Instalaciones puntuales', 'Carpintería', 'Cerrajería'],
      num: '06',
      label: 'Mantenimiento · servicio rápido',
    },
  ];
  return (
    <div className="page active">
      <PageHeader
        eyebrow="Servicios"
        title="Todo lo que hacemos,"
        titleEm="bien hecho."
        lead="De la reforma integral de una vivienda a la rehabilitación de una comunidad entera. Un mismo equipo, un mismo estándar."
        breadcrumb="Servicios"
      />
      {services.map((s, i) => (
        <div key={i} className="service-detail">
          <div className="container">
            <div className="service-detail-grid">
              <div>
                <span className="eyebrow">{s.eyebrow}</span>
                <h2>{s.title} <em>{s.em}</em></h2>
                <p className="lead">{s.lead}</p>
                <ul className="includes">
                  {s.includes.map((x, j) => <li key={j}>{x}</li>)}
                </ul>
                <a className="btn btn-primary" onClick={() => { setPage('contacto'); window.scrollTo({top:0}); }}>
                  Solicitar presupuesto <Icon.Arrow />
                </a>
              </div>
              <div className="service-detail-visual">
                <span className="ph-num">{s.num}</span>
                <span className="ph-label">{s.label}</span>
              </div>
            </div>
          </div>
        </div>
      ))}
      <ContactSection setPage={setPage} />
    </div>
  );
}

/* ============================================
   COMUNIDADES PAGE
   ============================================ */
function ComunidadesPage({ setPage }) {
  return (
    <div className="page active">
      <PageHeader
        eyebrow="Comunidades de propietarios"
        title="Especialistas en comunidades"
        titleEm="del Vallès."
        lead="Presupuestos detallados por partidas, facturación clara y trato profesional con administradores de fincas, presidentes y vecinos."
        breadcrumb="Comunidades"
      />

      <section className="comunidades">
        <div className="container">
          <div className="com-hero">
            <div>
              <span className="eyebrow">Para administradores y presidentes</span>
              <h2>La tranquilidad de un <em>contratista serio.</em></h2>
              <p>Sabemos cómo funciona una comunidad: las juntas, las derramas, los plazos ajustados y la necesidad de documentarlo todo. Te lo ponemos fácil.</p>
              <ul className="features-list">
                <li>Presupuestos por partidas</li>
                <li>Facturación detallada</li>
                <li>Visitas a junta si es necesario</li>
                <li>Documentación fotográfica</li>
                <li>Plazos y fases claras</li>
                <li>Seguro de responsabilidad civil</li>
                <li>Disponibilidad para imprevistos</li>
                <li>Trato directo con el propietario</li>
              </ul>
              <div style={{display:'flex', gap: 14, flexWrap: 'wrap'}}>
                <a className="btn btn-primary" onClick={() => { setPage('contacto'); window.scrollTo({top:0}); }}>
                  Solicitar presupuesto <Icon.Arrow />
                </a>
                <a className="btn btn-secondary" href="tel:+34614007303">
                  <Icon.Phone /> Llamar ahora
                </a>
              </div>
            </div>
            <div className="com-visual">
              <span className="label">Rehabilitación fachada · 5 plantas · Terrassa</span>
            </div>
          </div>

          <div className="section-head" style={{marginTop: 40}}>
            <div>
              <span className="eyebrow">Obras habituales</span>
              <h2>Lo que solemos <em>hacer.</em></h2>
            </div>
            <p>Intervenciones típicas en comunidades del Vallès. Desde rehabilitaciones completas a mantenimientos puntuales.</p>
          </div>

          <div className="com-works">
            {[
              { icon: <ServiceIcon.Building />, t: 'Fachadas', d: 'Rehabilitación, pintura y tratamiento de humedades.' },
              { icon: <ServiceIcon.Roof />, t: 'Tejados', d: 'Impermeabilización, tejas y estructuras.' },
              { icon: <ServiceIcon.Water />, t: 'Patios de luces', d: 'Pintura, alicatados e impermeabilización.' },
              { icon: <ServiceIcon.Home />, t: 'Zonas comunes', d: 'Escaleras, portales, vestíbulos y pasillos.' },
              { icon: <ServiceIcon.Paint />, t: 'Pintura exterior', d: 'Protección y renovación estética de fachadas.' },
              { icon: <ServiceIcon.Tools />, t: 'Mantenimiento', d: 'Servicios recurrentes y arreglos puntuales.' },
              { icon: <ServiceIcon.Bath />, t: 'Bajantes', d: 'Reparación y sustitución de bajantes.' },
              { icon: <ServiceIcon.Kitchen />, t: 'Ascensores', d: 'Coordinación de obra con empresa ascensorista.' },
            ].map((x, i) => (
              <div key={i} className="com-work">
                <div className="icon" style={{width: 36, height: 36}}>{x.icon}</div>
                <h4>{x.t}</h4>
                <p>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="process">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Nuestro proceso</span>
              <h2>Claro, <em>paso a paso.</em></h2>
            </div>
            <p>Sin ambigüedades. Así trabajamos con comunidades y administradores desde el primer contacto hasta la entrega final.</p>
          </div>
          <div className="process-grid">
            {[
              { n: '01 · Visita', t: 'Visita gratuita', d: 'Pasamos por la comunidad, medimos y documentamos el estado actual con fotografías.' },
              { n: '02 · Presupuesto', t: 'Presupuesto detallado', d: 'Entregamos un presupuesto por partidas, con descripción técnica de cada intervención.' },
              { n: '03 · Junta', t: 'Presentación en junta', d: 'Si hace falta, acudimos a la junta a resolver dudas de vecinos y presidente.' },
              { n: '04 · Obra', t: 'Ejecución y entrega', d: 'Ejecutamos la obra con documentación fotográfica y entrega firmada con garantía.' },
            ].map((x, i) => (
              <div key={i} className="process-step">
                <span className="step-num">{x.n}</span>
                <h4>{x.t}</h4>
                <p>{x.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

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

/* ============================================
   PROYECTOS PAGE — placeholder hasta tener contenido real
   ============================================ */
function ProyectosPage({ setPage }) {
  return (
    <div className="page active">
      <PageHeader
        eyebrow="Galería"
        title="Galería de"
        titleEm="proyectos."
        lead="Estamos preparando una selección de nuestros trabajos más recientes. Mientras tanto, escríbenos y te enseñamos ejemplos reales cercanos a tu proyecto."
        breadcrumb="Proyectos"
      />
      <section style={{padding: '40px 0 80px'}}>
        <div className="container">
          <div style={{maxWidth: 560, margin: '0 auto', textAlign: 'center', padding: '40px 0 20px'}}>
            <p style={{color: 'var(--gold-deep)', fontFamily: 'var(--f-mono)', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 22}}>— Próximamente —</p>
            <h3 style={{fontFamily: 'var(--f-display)', fontSize: 'clamp(22px, 2.8vw, 30px)', fontWeight: 500, marginBottom: 18, color: 'var(--navy)'}}>Galería en preparación</h3>
            <p style={{color: 'var(--gray-700)', lineHeight: 1.7, marginBottom: 34}}>Estamos recopilando fotografías y fichas técnicas de nuestros proyectos para publicarlos aquí. Si quieres ver ejemplos de trabajos recientes, contáctanos y los vemos juntos.</p>
            <a className="btn btn-primary" onClick={() => { setPage('contacto'); window.scrollTo({top: 0}); }} style={{cursor:'pointer'}}>
              Pedir ejemplos <Icon.Arrow />
            </a>
          </div>
        </div>
      </section>
      <ContactSection setPage={setPage} />
    </div>
  );
}

/* ============================================
   NOSOTROS PAGE
   ============================================ */
function NosotrosPage({ setPage }) {
  return (
    <div className="page active">
      <PageHeader
        eyebrow="Sobre Next Moon"
        title="Una empresa local,"
        titleEm="una relación personal."
        lead="Next Moon S.L. nace en Vacarisses con una idea muy clara: tratar cada obra como si fuese la casa del propietario de la empresa."
        breadcrumb="Nosotros"
      />

      <section className="about-intro">
        <div className="container">
          <div className="big-quote">
            "Cuando reformas una casa no vendes metros ni materiales: <em>vendes confianza.</em> Por eso, en Next Moon, hablamos claro, cumplimos plazos y cuidamos cada detalle como si fuera el nuestro."
          </div>
          <div style={{textAlign: 'center', marginTop: 30, color: 'var(--gray-500)', fontSize: 13, fontFamily: 'var(--f-mono)', letterSpacing: '0.1em'}}>
            — GERJANT · Fundador de Next Moon S.L.
          </div>
        </div>
      </section>

      <section className="about-values">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Nuestros valores</span>
              <h2>Cómo trabajamos, <em>cada día.</em></h2>
            </div>
            <p>No son valores de manual. Son la razón por la que nuestros clientes nos recomiendan y vuelven.</p>
          </div>
          <div className="values-grid">
            {[
              { n: '01', t: 'Profesionalidad', d: 'Equipo con experiencia, herramientas propias y seguros al día. Nada se improvisa.' },
              { n: '02', t: 'Cumplimiento de plazos', d: 'Si decimos tres semanas, son tres semanas. Planificamos con realismo y honestidad.' },
              { n: '03', t: 'Transparencia', d: 'Presupuestos claros por partidas, sin cargos sorpresa ni ambigüedades al final de obra.' },
            ].map((v, i) => (
              <div key={i} className="value-card">
                <div className="value-num">{v.n}</div>
                <h3>{v.t}</h3>
                <p>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="about-area">
        <div className="container">
          <div className="area-grid">
            <div>
              <span className="eyebrow">Zona de actuación</span>
              <h2 style={{fontSize: 'clamp(32px, 4vw, 52px)', fontWeight: 400, marginBottom: 20}}>Terrassa, el <em style={{fontStyle:'italic', color:'var(--gold-deep)'}}>Vallès</em> y alrededores.</h2>
              <p style={{color: 'var(--gray-700)', lineHeight: 1.65, marginBottom: 10}}>Tenemos nuestra sede en Vacarisses y trabajamos en toda la comarca del Vallès Occidental y zonas limítrofes.</p>
              <ul className="area-list">
                <li>Terrassa</li>
                <li>Sabadell</li>
                <li>Vacarisses</li>
                <li>Rubí</li>
                <li>Sant Cugat</li>
                <li>Matadepera</li>
                <li>Viladecavalls</li>
                <li>Castellbisbal</li>
                <li>Olesa</li>
                <li>Ullastrell</li>
              </ul>
            </div>
            <div className="area-map">
              <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
                <defs>
                  <pattern id="mapgrid" width="20" height="20" patternUnits="userSpaceOnUse">
                    <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(201,168,76,0.08)" strokeWidth="0.5"/>
                  </pattern>
                </defs>
                <rect width="400" height="300" fill="#0F1C2E"/>
                <rect width="400" height="300" fill="url(#mapgrid)"/>
                {/* Area circle */}
                <circle cx="200" cy="150" r="100" fill="none" stroke="rgba(201,168,76,0.25)" strokeWidth="1" strokeDasharray="3 4"/>
                <circle cx="200" cy="150" r="60" fill="rgba(201,168,76,0.08)" stroke="rgba(201,168,76,0.3)" strokeWidth="1"/>
                {/* Cities */}
                {[
                  { x: 200, y: 150, name: 'Vacarisses', main: true },
                  { x: 240, y: 135, name: 'Terrassa' },
                  { x: 275, y: 115, name: 'Sabadell' },
                  { x: 230, y: 180, name: 'Rubí' },
                  { x: 285, y: 180, name: 'Sant Cugat' },
                  { x: 220, y: 110, name: 'Matadepera' },
                  { x: 170, y: 165, name: 'Viladecavalls' },
                  { x: 250, y: 210, name: 'Castellbisbal' },
                ].map((c, i) => (
                  <g key={i}>
                    <circle cx={c.x} cy={c.y} r={c.main ? 5 : 3} fill={c.main ? '#C9A84C' : '#FAF7F2'} opacity={c.main ? 1 : 0.8}/>
                    {c.main && <circle cx={c.x} cy={c.y} r="10" fill="none" stroke="#C9A84C" strokeWidth="1" opacity="0.5"><animate attributeName="r" from="5" to="20" dur="2s" repeatCount="indefinite"/><animate attributeName="opacity" from="0.6" to="0" dur="2s" repeatCount="indefinite"/></circle>}
                    <text x={c.x + 8} y={c.y + 4} fill={c.main ? '#C9A84C' : 'rgba(250,247,242,0.8)'} fontSize={c.main ? 12 : 10} fontFamily="Inter, sans-serif" fontWeight={c.main ? 600 : 400}>{c.name}</text>
                  </g>
                ))}
                <text x="20" y="30" fill="rgba(201,168,76,0.6)" fontSize="10" fontFamily="monospace" letterSpacing="2">VALLÈS OCCIDENTAL</text>
                <text x="20" y="285" fill="rgba(250,247,242,0.3)" fontSize="9" fontFamily="monospace">41.61°N · 1.91°E</text>
              </svg>
            </div>
          </div>
        </div>
      </section>

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

/* ============================================
   CONTACTO PAGE
   ============================================ */
function ContactoPage({ setPage }) {
  return (
    <div className="page active">
      <PageHeader
        eyebrow="Contacto"
        title="Cuéntanos tu"
        titleEm="proyecto."
        lead="Respondemos en menos de 24 horas con un presupuesto detallado y gratuito. Sin compromiso."
        breadcrumb="Contacto"
      />
      <ContactSection setPage={setPage} />
    </div>
  );
}

Object.assign(window, {
  ServiciosPage, ComunidadesPage, ProyectosPage, NosotrosPage, ContactoPage, PageHeader
});