/* Home Page */

const Placeholder = ({ label, dark = false, className = '' }) => (
  <div className={`placeholder ${dark ? 'dark' : ''} ${className}`}>
    <span className="placeholder-label">{label}</span>
  </div>
);

const useFadeIn = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.fade-in:not(.visible)');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('visible');
          obs.unobserve(e.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  });
};

const Hero = ({ goto }) => (
  <section className="hero">
    <div className="hero-bg"></div>

    <div className="hero-content">
      <div className="container">
        <div className="hero-eyebrow">Desde 1981 · Ingeniería y Montajes</div>
        <h1>
          Fabricamos el <span className="accent">acero</span> que mueve la industria chilena
        </h1>
        <p className="lead">
          Más de 40 años diseñando, fabricando y montando estructuras, piping y sistemas
          de transporte para minería, energía y proceso industrial. Precisión técnica,
          trazabilidad y entrega a tiempo.
        </p>
        <div className="hero-actions">
          <button className="btn btn-primary btn-lg" onClick={() => goto('servicios')}>
            Ver Nuestros Servicios
            <Icon name="arrow-right" size={18} />
          </button>
          <button className="btn btn-outline btn-lg" onClick={() => goto('contacto')}>
            Contáctanos
          </button>
        </div>
      </div>
    </div>

    <div className="hero-metrics">
      <div className="container">
        <div className="metrics-grid">
          <Metric value="+40" label="Años de experiencia" plus />
          <Metric value="4" label="Especialidades técnicas" />
          <Metric value="100%" label="Compromiso" />
          <Metric value="100%" label="Innovación" />
        </div>
      </div>
    </div>
  </section>
);

const Metric = ({ value, label, plus }) => {
  // Animated count for numeric values like "+40"
  const numericMatch = value.match(/^(\+)?(\d+)(.*)$/);
  const [shown, setShown] = React.useState(numericMatch ? '0' : value);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!numericMatch) return;
    const target = parseInt(numericMatch[2], 10);
    const suffix = numericMatch[3] || '';
    const prefix = numericMatch[1] || '';
    let started = false;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting && !started) {
          started = true;
          const dur = 1100;
          const start = performance.now();
          const step = (t) => {
            const p = Math.min(1, (t - start) / dur);
            const eased = 1 - Math.pow(1 - p, 3);
            const v = Math.round(target * eased);
            setShown(`${prefix}${v}${suffix}`);
            if (p < 1) requestAnimationFrame(step);
          };
          requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <div className="metric" ref={ref}>
      <div className="metric-value">{shown}</div>
      <div className="metric-label">{label}</div>
    </div>
  );
};

const ServicesPreview = ({ goto }) => (
  <section className="section services-bg">
    <div className="container">
      <div className="section-head center fade-in">
        <div className="section-eyebrow">Nuestros Servicios</div>
        <h2 className="section-title">Cuatro especialidades, una sola exigencia</h2>
        <p className="section-sub">
          Desde el diseño y el corte de la primera plancha hasta el montaje y la puesta en marcha.
          Capacidades integradas en taller y en faena.
        </p>
      </div>

      <div className="service-grid">
        {SERVICES.map((s, i) => (
          <div key={s.id} className="service-card fade-in"
               style={{ transitionDelay: `${i * 80}ms` }}
               onClick={() => goto('servicios')}>
            <div className="service-icon"><Icon name={s.icon} size={28} stroke={1.8} /></div>
            <h3>{s.title}</h3>
            <p>{s.short}</p>
            <span className="arrow">
              Ver detalle <Icon name="arrow-right" size={14} />
            </span>
          </div>
        ))}
      </div>

      <div className="section-foot fade-in">
        <button className="btn btn-outline-dark" onClick={() => goto('servicios')}>
          Ver todos los servicios <Icon name="arrow-right" size={16} />
        </button>
      </div>
    </div>
  </section>
);

const AboutPreview = ({ goto }) => (
  <section className="section">
    <div className="container">
      <div className="about-preview">
        <div className="about-text fade-in">
          <div className="section-eyebrow">Sobre Nosotros</div>
          <div className="about-since">1981</div>
          <div className="about-since-label">Desde</div>
          <p>
            Nacimos en un pequeño taller con una soldadora prestada y un compromiso
            grande: construir lo que mueve a la industria con la precisión que merece.
          </p>
          <p>
            Cuatro décadas después, seguimos siendo una empresa familiar — pero hoy nuestras
            piezas viajan a faenas mineras, plantas de proceso y obras civiles a lo largo de Chile.
          </p>
          <button className="btn btn-outline-dark" style={{ marginTop: 16 }} onClick={() => goto('nosotros')}>
            Conocer la historia <Icon name="arrow-right" size={16} />
          </button>
        </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 planta" />
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HomePage = ({ goto }) => {
  useFadeIn();
  return (
    <>
      <Hero goto={goto} />
      <ServicesPreview goto={goto} />
      <AboutPreview goto={goto} />
    </>
  );
};

Object.assign(window, { HomePage, Placeholder, useFadeIn });