// home.jsx — homepage content (after header)
const HERO_SLIDES = [
  {
    eyebrow: 'Continuidad operativa',
    title: <>Aseguramos la<br/>continuidad de<br/><span className="accent">tu operación</span></>,
    lead: 'Soluciones técnicas especializadas para trabajos en correas transportadoras, orientadas a maximizar la continuidad operacional y el rendimiento en faena.',
  },
  {
    eyebrow: 'Foco comercial',
    title: <>Arriendo de<br/><span className="accent">equipos vulcanizadores</span></>,
    lead: 'Equipos vulcanizadores disponibles para mantenciones, reparaciones y trabajos en correas transportadoras, con respaldo técnico y enfoque en continuidad operacional.',
  },
];

const CASO_GRADIENTS_HOME = {
  'cobre':         'linear-gradient(135deg,#7a3010,#171411)',
  'teal':          'linear-gradient(135deg,#00594a,#171411)',
  'cobre-bright':  'linear-gradient(135deg,#C85217,#2b2927)',
  'negro':         'linear-gradient(135deg,#3f3c39,#171411)',
  'teal-deep':     'linear-gradient(135deg,#004d3e,#171411)',
};

function Home({ go }) {
  useLucide();
  const [slideIdx, setSlideIdx] = useState(0);
  const [casos, setCasos] = useState([]);
  useEffect(() => {
    const id = setInterval(() => {
      setSlideIdx((i) => (i + 1) % HERO_SLIDES.length);
    }, 6500);
    return () => clearInterval(id);
  }, []);
  useEffect(() => {
    const supa = window.supabaseClient;
    if (!supa) return;
    supa.from('casos')
      .select('*')
      .eq('visible_en_home', true)
      .order('orden', { ascending: true })
      .order('created_at', { ascending: true })
      .limit(3)
      .then(({ data, error }) => {
        if (error) console.error('casos home read failed', error);
        setCasos(data || []);
      });
  }, []);
  const slide = HERO_SLIDES[slideIdx];
  return (
    <>
      {/* Hero with video background */}
      <section className="hero">
        <video
          className="hero-video"
          src="assets/hero-bg.mp4"
          poster="assets/hero-bg-poster.jpg"
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
        />
        <div className="hero-overlay"></div>
        <div className="hero-hatch"></div>
        <div className="hero-copper-edge"></div>
        <div className="hero-inner">
          <div>
            <div key={`e-${slideIdx}`} className="eyebrow on-dark hero-eyebrow hero-text-fade">{slide.eyebrow}</div>
            <h1 key={`t-${slideIdx}`} className="hero-title hero-text-fade">
              {slide.title}
            </h1>
            <p key={`l-${slideIdx}`} className="hero-lead hero-text-fade">
              {slide.lead}
            </p>
            <div className="hero-cta">
              <a className="btn primary lg" onClick={() => go('contacto')}>
                Cotizar ahora <i data-lucide="arrow-right" className="arrow"></i>
              </a>
              <a className="btn onblack lg" onClick={() => go('servicios')}>Conocer servicios</a>
            </div>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-row"><span className="hero-meta-k">+15<span className="unit">años</span></span><span className="hero-meta-v">Experiencia en minería</span></div>
            <div className="hero-meta-row"><span className="hero-meta-k">24/7</span><span className="hero-meta-v">Soporte en terreno</span></div>
            <div className="hero-meta-row"><span className="hero-meta-k">52</span><span className="hero-meta-v">Colaboradores dotación permanente</span></div>
            <div className="hero-meta-row"><span className="hero-meta-k">72"</span><span className="hero-meta-v">Capacidad ancho de correa</span></div>
          </div>
        </div>
        <div className="hero-scroll">
          <span>Scroll</span>
          <div className="hero-scroll-line"></div>
        </div>
      </section>

      {/* Three business lines */}
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr">
            <div className="eyebrow">Líneas de negocio</div>
            <h2 className="section-title">Tres líneas, una promesa: continuidad</h2>
            <p className="section-lead">Una oferta técnica integrada para mantener sus correas transportadoras operativas y sus faenas productivas.</p>
          </Reveal>
          <Reveal className="lines">
            <div className="line-card" onClick={() => go('mantenimiento')}>
              <div className="line-num">01 / Servicios</div>
              <h3 className="line-title">Mantenimiento de correas transportadoras</h3>
              <p className="line-body">Inspección, intervención, reparación y evaluación técnica de correas. Cambios y empalmes planificados con control operativo.</p>
              <div className="line-meta">
                <div className="line-meta-item"><i data-lucide="check"></i>Cambios y empalmes ST / EP</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Reparación de daños</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Inspecciones preventivas</div>
              </div>
              <span className="line-cta">Ver línea <i data-lucide="arrow-right"></i></span>
            </div>
            <div className="line-card highlight" onClick={() => go('arriendo')}>
              <div className="line-num">02 / Arriendo</div>
              <h3 className="line-title">Arriendo de maquinaria y equipos</h3>
              <p className="line-body">Equipos vulcanizadores certificados ALMEX y Bureau Veritas CESMEC. Disponibilidad para correas de hasta 72″ y 15 m lineales.</p>
              <div className="line-meta">
                <div className="line-meta-item"><i data-lucide="check"></i>Equipos vulcanizadores</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Certificación vigente</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Soporte técnico incluido</div>
              </div>
              <span className="line-cta">Ver catálogo <i data-lucide="arrow-right"></i></span>
            </div>
            <div className="line-card" onClick={() => go('tecnicos')}>
              <div className="line-num">03 / Diagnóstico</div>
              <h3 className="line-title">Servicios técnicos especializados</h3>
              <p className="line-body">Inspección, diagnóstico, monitoreo y seguimiento técnico aplicado. Tecnología preventiva y predictiva con reportabilidad.</p>
              <div className="line-meta">
                <div className="line-meta-item"><i data-lucide="check"></i>Radiografía industrial</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Ultrasonido y termografía</div>
                <div className="line-meta-item"><i data-lucide="check"></i>Monitoreo 3D 24/7</div>
              </div>
              <span className="line-cta">Ver línea <i data-lucide="arrow-right"></i></span>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Stats */}
      <section className="stats">
        <div className="stats-inner">
          <Reveal className="stat"><div className="stat-num">+15<span className="u">años</span></div><div className="stat-lbl">Experiencia en gran minería</div></Reveal>
          <Reveal className="stat" delay={1}><div className="stat-num">52</div><div className="stat-lbl">Colaboradores en dotación permanente</div></Reveal>
          <Reveal className="stat" delay={2}><div className="stat-num">5</div><div className="stat-lbl">Contratos base en faenas activas</div></Reveal>
          <Reveal className="stat" delay={3}><div className="stat-num">72"</div><div className="stat-lbl">Ancho máximo de correa atendido</div></Reveal>
        </div>
      </section>

      {/* Service grid */}
      <section className="section stone" id="servicios">
        <div className="wrap">
          <Reveal className="section-hdr">
            <div className="eyebrow">Capacidades técnicas</div>
            <h2 className="section-title">Ingeniería, inspección y continuidad operacional</h2>
            <p className="section-lead">Procesos técnicos especializados para correas transportadoras, con metodología estandarizada, inspección avanzada y respaldo operacional orientado a maximizar la disponibilidad en faena.</p>
          </Reveal>
          <Reveal className="svc-grid">
            {[
              ['shield-check','Inspecciones programadas','Inspección preventiva y programada de correas transportadoras con checklist técnico y reporte de hallazgos.'],
              ['repeat','Cambios y empalmes','Cambios de correa y empalmes ST / EP planificados con control dimensional, alineación y tensión.'],
              ['wrench','Reparación de daños','Reparación vulcanizada en caliente y protección con polímeros según tipo y severidad del daño.'],
              ['radio','Inspección radiográfica','Rayos-X industrial para empalmes y correas con cable de acero. Protección radiológica certificada.'],
              ['gauge','Medición de espesores','Evaluación de desgaste en cubiertas de carga, retorno y refuerzos. Estimación de vida útil.'],
              ['audio-waveform','Ultrasonido aplicado','Medición de revestimientos, estructuras, mantos de poleas y piping con dashboard de reportabilidad.'],
              ['thermometer','Inspección termográfica','Identificación temprana de anomalías térmicas antes de falla. Predictivo y preventivo.'],
              ['activity','Monitoreo y seguimiento','Visión artificial 3D 24/7 remoto. Cuantificación de desgaste, alineamiento y rajadura longitudinal.'],
            ].map(([ico, name, desc], i) => (
              <div key={i} className="svc-card" onClick={() => go('servicio-detalle')}>
                <div className="svc-ico"><i data-lucide={ico}></i></div>
                <h3 className="svc-name">{name}</h3>
                <p className="svc-desc">{desc}</p>
                <div className="svc-more">Ver detalle <i data-lucide="arrow-right"></i></div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* Arriendo feature */}
      <section className="rent-feat">
        <div className="rent-inner">
          <Reveal className="rent-visual-wrap">
            <div className="rent-visual">
              <div className="rent-visual-frame">
                <img
                  src="assets/equipo-vulcanizador-foco.jpg"
                  alt="Equipo vulcanizador PERTEC certificado ALMEX y CESMEC"
                  className="rent-visual-img"
                  loading="lazy"
                />
              </div>
              <div className="rent-cert">
                <div className="rent-cert-rule"></div>
                <div className="rent-cert-t">Certificado</div>
                <div className="rent-cert-v">ALMEX · Bureau Veritas CESMEC · Marzo 2026</div>
              </div>
            </div>
          </Reveal>
          <div>
            <Reveal><div className="eyebrow on-dark">Arriendo · equipos vulcanizadores</div></Reveal>
            <Reveal delay={1}><h2 className="section-title" style={{color:'#fff', marginTop:18}}>Equipos certificados para vulcanización en terreno</h2></Reveal>
            <Reveal delay={2}><p className="section-lead" style={{color:'rgba(255,255,255,.8)', marginTop:16}}>Prensas y equipos vulcanizadores para correas de hasta 72″ y 15 m lineales, con configuraciones para anchos superiores. Respaldados por la Escuela de Vulca.</p></Reveal>
            <Reveal delay={3} className="rent-list">
              <div className="rent-list-item"><i data-lucide="check"></i>Certificación vigente ALMEX y CESMEC actualizada a marzo 2026</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Respaldo técnico y soporte operacional durante el arriendo</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Know-how real en empalmes ST y EP sobre faenas mineras</div>
              <div className="rent-list-item"><i data-lucide="check"></i>Disponibilidad para trabajos planificados y necesidades críticas</div>
            </Reveal>
            <Reveal delay={4}>
              <div style={{display:'flex', gap:12, marginTop:8, flexWrap:'wrap'}}>
                <a className="btn primary lg" onClick={() => go('arriendo')}>Ver catálogo de arriendo <i data-lucide="arrow-right" className="arrow"></i></a>
                <a className="btn onblack lg" onClick={() => go('contacto')}>Cotizar equipo</a>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Methodology */}
      <section className="section white">
        <div className="wrap">
          <Reveal className="section-hdr">
            <div className="eyebrow">Metodología operativa</div>
            <h2 className="section-title">Planificación, control y ejecución en siete etapas</h2>
            <p className="section-lead">Cada intervención se desarrolla bajo una metodología estructurada, enfocada en seguridad, trazabilidad, control técnico y continuidad operacional.</p>
          </Reveal>
          <Reveal className="method">
            {[
              ['Evaluación', 'Levantamiento en terreno e inspección de correa y componentes.'],
              ['Ingeniería', 'Metodología de cambio, secuencia, recursos y materiales críticos.'],
              ['Recursos', 'Gestión de materiales, kits, certificaciones y acreditación del personal.'],
              ['Área', 'Segregación, cierre, housekeeping y control de seguridad.'],
              ['Ejecución', 'Retiro, instalación, empalme, control dimensional y supervisión.'],
              ['Puesta en marcha', 'Monitoreo de arranque, ajustes y liberación controlada.'],
              ['Cierre', 'Inspección final, informe técnico, hallazgos y recomendaciones.'],
            ].map(([t, d], i) => (
              <div key={i} className="method-step">
                <div className="method-n">Etapa {String(i+1).padStart(2,'0')}</div>
                <div className="method-t">{t}</div>
                <div className="method-d">{d}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </section>

      {/* Trust block */}
      <section className="section trust">
        <div className="wrap">
          <Reveal className="section-hdr">
            <div className="eyebrow">HSE y cumplimiento</div>
            <h2 className="section-title">Seguridad y cumplimiento en cada intervención</h2>
          </Reveal>
          <div className="trust-grid">
            <Reveal className="trust-cert">
              {[
                ['award','ALMEX','Certificación de equipos vulcanizadores vigente a marzo 2026.'],
                ['badge-check','Bureau Veritas CESMEC','Respaldo técnico independiente de equipos y procedimientos.'],
                ['shield','Protección radiológica','Procedimientos certificados para inspección radiográfica industrial.'],
                ['hard-hat','Seguridad en faena','Metodología, formación y liderazgo en seguridad integrados.'],
              ].map(([ico, name, d], i) => (
                <div key={i} className="trust-cert-item">
                  <div className="trust-cert-seal"><i data-lucide={ico}></i></div>
                  <div className="trust-cert-name">{name}</div>
                  <div className="trust-cert-d">{d}</div>
                </div>
              ))}
            </Reveal>
            <Reveal delay={2}>
              <div className="eyebrow">Centro de confianza</div>
              <h3 style={{fontWeight:500, fontSize:32, textTransform:'uppercase', letterSpacing:'.01em', margin:'16px 0 20px', lineHeight:1.1}}>Políticas, certificados y materiales de respaldo técnico</h3>
              <p className="section-lead" style={{marginBottom:28}}>Coordinación directa con especialistas para servicios técnicos, arriendo de equipos y operaciones en terreno.</p>
              <a className="btn primary" onClick={() => go('hse')}>Ir al centro de confianza <i data-lucide="arrow-right" className="arrow"></i></a>
            </Reveal>
          </div>
        </div>
      </section>

      {/* Contact CTA */}
      <ContactBlock go={go} />
    </>
  );
}

function ContactBlock({ go }) {
  const [tab, setTab] = useState('servicios');
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [errMsg, setErrMsg] = useState('');
  const cfg = useWaConfig();
  useLucide(tab + sent + sending);
  const labels = {
    servicios: 'Servicios',
    arriendo:  'Arriendo',
    general:   'General',
  };
  const formRef = useRef(null);
  const submit = async (channel) => {
    const formEl = formRef.current;
    if (!formEl) {
      console.error('submit: form element no disponible');
      return;
    }
    const fd = new FormData(formEl);
    const payload = {
      tipo: tab,
      nombre:       fd.get('nombre')      || null,
      empresa:      fd.get('empresa')     || null,
      email:        fd.get('email')       || null,
      telefono:     fd.get('telefono')    || null,
      servicio:     fd.get('servicio')    || null,
      tipo_equipo:  fd.get('tipoEquipo')  || null,
      ancho_correa: fd.get('anchoCorrea') || null,
      mensaje:      fd.get('mensaje')     || null,
    };

    // Canal WhatsApp: abrir wa.me con la solicitud pre-llenada en un tab nuevo.
    if (channel === 'whatsapp') {
      const lines = [
        `*Nueva solicitud — ${labels[tab]}*`,
        `Nombre: ${payload.nombre || '-'}`,
        `Empresa: ${payload.empresa || '-'}`,
        `Email: ${payload.email || '-'}`,
        `Teléfono: ${payload.telefono || '-'}`,
      ];
      if (payload.servicio)     lines.push(`Servicio: ${payload.servicio}`);
      if (payload.tipo_equipo)  lines.push(`Tipo de equipo: ${payload.tipo_equipo}`);
      if (payload.ancho_correa) lines.push(`Ancho de correa: ${payload.ancho_correa}`);
      if (payload.mensaje)      lines.push('', 'Mensaje:', payload.mensaje);
      const url = buildWhatsAppUrl(cfg.numbers[tab], lines.join('\n'));
      window.open(url, '_blank', 'noopener,noreferrer');
      setSent(true);
      // scroll suave al mensaje
      setTimeout(() => formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' }), 50);
      return false;
    }

    // Canal email: Edge Function send-catalog (graba solicitud + manda correos).
    const supa = window.supabaseClient;
    setSending(true);
    setErrMsg('');
    try {
      let equipos = [];
      if (supa) {
        const { data } = await supa.from('equipos')
          .select('*')
          .eq('disponible', true)
          .order('orden', { ascending: true })
          .order('created_at', { ascending: true });
        equipos = data || [];
      }
      const pdfBase64 = await window.generateCatalogPDF(equipos, { output: 'base64' });
      const pdfFilename = `catalogo-pertec-${new Date().toISOString().slice(0, 10)}.pdf`;
      const fnUrl = `${window.SUPABASE_URL}/functions/v1/send-catalog`;
      const res = await fetch(fnUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${window.SUPABASE_KEY}`,
          'apikey': window.SUPABASE_KEY,
        },
        body: JSON.stringify({ ...payload, pdfBase64, pdfFilename }),
      });
      if (!res.ok) {
        const t = await res.text();
        throw new Error(`HTTP ${res.status}: ${t}`);
      }
      setSent(true);
      // scroll suave al mensaje de éxito (sin esto el user ve la zona donde
      // estaba el form, que ahora se contrajo, dando sensación de "página en blanco")
      setTimeout(() => formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' }), 50);
    } catch (err) {
      console.error('send-catalog error', err);
      setErrMsg('No pudimos enviar tu solicitud. Por favor, intenta de nuevo en un momento.');
    } finally {
      setSending(false);
    }
    return false;
  };
  return (
    <section className="contact" id="contacto">
      <div className="contact-inner">
        <div>
          <Reveal><div className="eyebrow on-dark">Contacto · Cotización</div></Reveal>
          <Reveal delay={1}><h2 className="section-title" style={{color:'#fff', marginTop:18}}>Hablemos de su operación</h2></Reveal>
          <Reveal delay={2}><p className="section-lead" style={{color:'rgba(255,255,255,.8)', marginTop:16}}>Coordinación directa con especialistas para servicios técnicos, arriendo de equipos y operaciones en terreno.</p></Reveal>
          <Reveal delay={3} className="contact-info">
            <div className="contact-info-row">
              <i data-lucide="phone"></i>
              <div className="contact-info-col">
                <span className="contact-info-lbl">Teléfono comercial</span>
                <span className="contact-info-val">+56 9 8456 7670</span>
              </div>
            </div>
            <div className="contact-info-row">
              <i data-lucide="mail"></i>
              <div className="contact-info-col">
                <span className="contact-info-lbl">Email</span>
                <span className="contact-info-val">comercial@pertec.cl</span>
              </div>
            </div>
            <div className="contact-info-row">
              <i data-lucide="map-pin"></i>
              <div className="contact-info-col">
                <span className="contact-info-lbl">Oficinas</span>
                <span className="contact-info-val">Santiago · Antofagasta · Calama</span>
              </div>
            </div>
            <div className="contact-info-row">
              <i data-lucide="clock"></i>
              <div className="contact-info-col">
                <span className="contact-info-lbl">Soporte en terreno</span>
                <span className="contact-info-val">24/7 en faenas activas</span>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={2}>
          <div className="contact-tabs">
            {Object.entries(labels).map(([k, v]) => (
              <button key={k} className={`contact-tab ${tab === k ? 'active' : ''}`} onClick={() => { setTab(k); setSent(false); }}>
                {tab === k && <span className="tab-dot"></span>}{v}
              </button>
            ))}
          </div>
          {sent ? (
            <div className="contact-form" ref={formRef}>
              <div className="sent-msg">
                <div className="sent-ico"><i data-lucide="check"></i></div>
                <div className="sent-t">Solicitud enviada</div>
                <p className="sent-d">Acabamos de enviarte un correo con nuestro catálogo en PDF y un acuse de tu solicitud. Un especialista te contactará en menos de 24 horas hábiles.</p>
                <button type="button" className="btn ghost-light" style={{marginTop:18}} onClick={() => { setSent(false); setErrMsg(''); }}>Enviar otra solicitud</button>
              </div>
            </div>
          ) : (
            <form
              className="contact-form"
              ref={formRef}
              action="javascript:void(0)"
              onSubmit={(e) => { e.preventDefault(); return false; }}
              noValidate
            >
              <div className="fld"><label>Nombre</label><input name="nombre" placeholder="Su nombre" required /></div>
              <div className="fld"><label>Empresa / Faena</label><input name="empresa" placeholder="Operación o faena" required /></div>
              <div className="fld"><label>Email corporativo</label><input name="email" type="email" placeholder="nombre@empresa.cl" required /></div>
              <div className="fld"><label>Teléfono</label><input name="telefono" placeholder="+56" /></div>
              {tab === 'servicios' && (
                <div className="fld full">
                  <label>Servicio requerido</label>
                  <input name="servicio" type="text" placeholder="Indique el servicio que necesita" />
                </div>
              )}
              {tab === 'arriendo' && (
                <div className="fld full">
                  <label>Arriendo requerido</label>
                  <input name="tipoEquipo" type="text" placeholder="Indique el equipo o tipo de arriendo que necesita" />
                </div>
              )}
              <div className="fld full"><label>Mensaje</label><textarea name="mensaje" placeholder="Cuéntenos sobre la operación, plazos y requerimientos técnicos." /></div>
              <div className="fld full contact-actions">
                <span className="contact-actions-note">Tu solicitud será enviada a nuestro equipo.</span>
                {errMsg && <div className="contact-err full">{errMsg}</div>}
                <div className="contact-actions-btns">
                  <button
                    type="button"
                    className="btn primary"
                    disabled={sending}
                    onClick={() => submit('email')}
                  >
                    <i data-lucide={sending ? 'loader-2' : 'mail'} className={sending ? 'is-spinning' : ''}></i>
                    {sending ? 'Enviando…' : 'Enviar'}
                    {!sending && <i data-lucide="arrow-right" className="arrow"></i>}
                  </button>
                  <button
                    type="button"
                    className="btn ghost-light"
                    disabled={sending}
                    onClick={() => submit('whatsapp')}
                  >
                    <i data-lucide="message-circle"></i> WhatsApp
                  </button>
                </div>
              </div>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

window.Home = Home;
window.ContactBlock = ContactBlock;