/* Servicios Page — zigzag layout */

const PageHeader = ({ title, subtitle, current, goto }) => (
  <section className="page-header" data-screen-label={`Header ${current}`}>
    <div className="container">
      <div className="breadcrumb">
        <span className="crumb" onClick={() => goto('inicio')}>Inicio</span>
        <span className="sep">/</span>
        <span className="current">{current}</span>
      </div>
      <h1>{title}</h1>
      <p>{subtitle}</p>
    </div>
  </section>
);

const ServiciosPage = ({ goto }) => {
  useFadeIn();
  return (
    <div data-screen-label="Servicios">
      <PageHeader
        current="Servicios"
        title="Servicios de ingeniería y montaje"
        subtitle="Cuatro líneas de especialidad técnica, con capacidad integral desde el diseño y el corte hasta el montaje certificado en faena."
        goto={goto}
      />

      <section className="section" style={{ paddingTop: 40 }}>
        <div className="container">
          {SERVICES.map((s, i) => (
            <FeatureRow key={s.id} service={s} index={i} goto={goto} />
          ))}
        </div>
      </section>

      <section style={{ background: 'var(--gray-50)', padding: '72px 0' }}>
        <div className="container center-text">
          <div className="section-eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>¿Tienes un proyecto?</div>
          <h2 className="section-title" style={{ marginBottom: 14 }}>Cotizamos en menos de 24 horas</h2>
          <p className="section-sub" style={{ margin: '0 auto 32px' }}>
            Cuéntanos qué necesitas fabricar o montar. Nuestro equipo técnico evalúa, cotiza y agenda visita a faena.
          </p>
          <button className="btn btn-primary btn-lg" onClick={() => goto('contacto')}>
            Solicitar cotización <Icon name="arrow-right" size={16} />
          </button>
        </div>
      </section>
    </div>
  );
};

const FeatureRow = ({ service, index, goto }) => {
  const reverse = index % 2 === 1;
  return (
    <div className={`feature-row fade-in ${reverse ? 'reverse' : ''}`}>
      <div>
        <div className="feature-num">// 0{index + 1} / 04 — {service.id.toUpperCase()}</div>
        <h2>{service.title}</h2>
        <p className="intro">{service.intro}</p>

        <div className="feature-list">
          {service.features.map((f, k) => (
            <div className="feature-item" key={k}>
              <span className="feature-check"><Icon name="check" size={13} stroke={3} /></span>
              <span>{f}</span>
            </div>
          ))}
        </div>

        <div className="material-tags">
          {service.materials.map(m => (
            <span className="material-tag" key={m}>{m}</span>
          ))}
        </div>

        <button className="btn btn-primary" onClick={() => goto('contacto')}>
          Solicitar cotización <Icon name="arrow-right" size={16} />
        </button>
      </div>

      <div className="feature-image-wrap">
        {service.gallery
          ? <Carousel images={service.gallery} />
          : <Placeholder label={`foto: ${service.title.toLowerCase()}`} />}
      </div>
    </div>
  );
};

const Carousel = ({ images, interval = 5000 }) => {
  const [idx, setIdx] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const t = setInterval(() => {
      setIdx(i => (i + 1) % images.length);
    }, interval);
    return () => clearInterval(t);
  }, [paused, images.length, interval]);

  const goTo = (i) => setIdx((i + images.length) % images.length);

  return (
    <div className="carousel"
         onMouseEnter={() => setPaused(true)}
         onMouseLeave={() => setPaused(false)}>
      <div className="carousel-track">
        {images.map((img, i) => (
          <div key={i}
               className={`carousel-slide ${i === idx ? 'active' : ''}`}
               aria-hidden={i !== idx}>
            <img src={img.src} alt={img.caption || ''} />
          </div>
        ))}
      </div>

      <button className="carousel-nav prev" onClick={() => goTo(idx - 1)} aria-label="Anterior">
        <Icon name="arrow-right" size={18} stroke={2.5} />
      </button>
      <button className="carousel-nav next" onClick={() => goTo(idx + 1)} aria-label="Siguiente">
        <Icon name="arrow-right" size={18} stroke={2.5} />
      </button>

      {images[idx].caption && (
        <div className="carousel-caption">
          <span className="counter">{String(idx + 1).padStart(2, '0')} / {String(images.length).padStart(2, '0')}</span>
          <span>{images[idx].caption}</span>
        </div>
      )}

      <div className="carousel-dots">
        {images.map((_, i) => (
          <button key={i}
                  className={`carousel-dot ${i === idx ? 'active' : ''}`}
                  onClick={() => goTo(i)}
                  aria-label={`Imagen ${i + 1}`} />
        ))}
      </div>
    </div>
  );
};

/* ── About / Sobre Nosotros ────────────────── */

const AboutPage = ({ goto }) => {
  useFadeIn();
  return (
    <div data-screen-label="Sobre Nosotros">
      <PageHeader
        current="Sobre Nosotros"
        title="Cuatro décadas construyendo en acero"
        subtitle="Una empresa familiar chilena que creció junto a la industria nacional. Misma exigencia técnica, escalada al tamaño de los proyectos de hoy."
        goto={goto}
      />

      {/* Storytelling 50/50 */}
      <section className="section">
        <div className="container">
          <div className="about-preview">
            <div className="about-text fade-in">
              <div className="about-since">1981</div>
              <div className="about-since-label">Año de fundación</div>
              <p>
                Don Juan Carlos Mora abrió las puertas de un pequeño taller en la región
                de Valparaíso con una idea simple: hacer las cosas bien a la primera.
                Esa frase se transformó en estándar de trabajo.
              </p>
              <p>
                Cuatro décadas después, la empresa sigue siendo familiar. Hoy fabricamos
                piping para plantas de proceso, estructuras para faenas mineras y
                sistemas de transporte que operan 24/7 a lo largo del país.
              </p>
              <p>
                Lo que no ha cambiado: cada junta de soldadura lleva el nombre de quien
                la hizo, y cada plano se revisa dos veces antes de cortar la primera plancha.
              </p>
            </div>

            <div className="about-image-wrap fade-in">
              <div className="frame-deco"></div>
              <div style={{ position: 'relative', zIndex: 1, width: '100%', height: '100%' }}>
                <Placeholder label="foto: equipo en taller" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Mission / Vision / Purpose */}
      <section className="mvp-section">
        <div className="container">
          <div className="section-head center fade-in">
            <div className="section-eyebrow">Lo que nos mueve</div>
            <h2 className="section-title">Misión, visión y propósito</h2>
          </div>

          <div className="mvp-grid">
            <MvpCard
              icon="gear"
              title="Misión"
              text="Entregar soluciones de fabricación y montaje en acero con la precisión técnica, los plazos y la trazabilidad que la industria exige, cuidando cada detalle del proceso."
            />
            <MvpCard
              icon="telescope"
              title="Visión"
              text="Ser el aliado técnico de referencia para empresas chilenas que necesitan precisión industrial sin perder cercanía, trato directo y compromiso con cada obra."
            />
            <MvpCard
              icon="rocket"
              title="Propósito"
              text="Construir, junto a nuestros clientes, la infraestructura que permite que la minería, la energía y la industria nacional sigan creciendo."
            />
          </div>
        </div>
      </section>

      {/* Values strip */}
      <section className="values-strip">
        <div className="container">
          <div className="section-head center fade-in" style={{ marginBottom: 32 }}>
            <div className="section-eyebrow">Nuestros valores</div>
          </div>
          <div className="values-grid">
            <ValueBadge icon="shield" name="Seguridad" desc="Cero accidentes como objetivo." />
            <ValueBadge icon="award" name="Calidad" desc="Certificación por junta." />
            <ValueBadge icon="lightbulb" name="Innovación" desc="Tecnología CNC HD." />
            <ValueBadge icon="handshake" name="Compromiso" desc="Plazo y palabra." />
          </div>
        </div>
      </section>
    </div>
  );
};

const MvpCard = ({ icon, title, text }) => (
  <div className="mvp-card fade-in">
    <div className="mvp-icon"><Icon name={icon} size={28} stroke={1.8} /></div>
    <h3>{title}</h3>
    <p>{text}</p>
  </div>
);

const ValueBadge = ({ icon, name, desc }) => (
  <div className="value-badge fade-in">
    <div className="value-icon"><Icon name={icon} size={22} stroke={1.8} /></div>
    <div>
      <div className="value-name">{name}</div>
      <div className="value-desc">{desc}</div>
    </div>
  </div>
);

Object.assign(window, { ServiciosPage, AboutPage, PageHeader });