function PageShell({ active = "contact", kicker, title, intro, children }) {
  return (
    <div className="ea-root">
      <window.NavBar active={active}/>
      <section className="ea-page-hero">
        <div className="ea-page-hero-inner">
          <div className="ea-kicker">{kicker}</div>
          <h1>{title}</h1>
          <p>{intro}</p>
        </div>
      </section>
      <main className="ea-page-body">{children}</main>
      <window.FooterFull/>
      <window.ContactModal/>
      <a href={window.COMPANY.whatsapp} target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 2.5 1.1 3 .9 3.5.8.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
    </div>
  );
}


function PrivacyPage() {
  return (
    <PageShell
      kicker="LEGAL"
      title="Política de privacidad"
      intro="Información general sobre el tratamiento de datos personales recibidos por Enfoque Ambiental S.A.S. a través de sus canales digitales."
    >
      <h2>Responsable del tratamiento</h2>
      <p>El responsable del tratamiento es Enfoque Ambiental S.A.S., con operación en Cartagena de Indias, Bolívar, Colombia. Para consultas sobre datos personales puedes escribir a <a href={window.COMPANY.emailHref}>{window.COMPANY.email}</a>.</p>
      <h2>Datos que podemos recibir</h2>
      <p>Podemos recibir nombre, empresa, correo electrónico, teléfono, servicio de interés y mensaje enviado voluntariamente mediante formularios, correo electrónico, teléfono o WhatsApp.</p>
      <h2>Finalidades</h2>
      <ul>
        <li>Responder solicitudes de información, cotización o contacto comercial.</li>
        <li>Preparar propuestas técnicas y hacer seguimiento a oportunidades de servicio.</li>
        <li>Conservar trazabilidad de comunicaciones relacionadas con proyectos.</li>
        <li>Cumplir obligaciones legales o contractuales aplicables.</li>
      </ul>
      <h2>Derechos del titular</h2>
      <p>El titular puede solicitar consulta, actualización, corrección o supresión de sus datos cuando proceda. También puede revocar autorizaciones conforme a la normativa colombiana aplicable.</p>
      <h2>Conservación y seguridad</h2>
      <p>La información se conserva por el tiempo necesario para responder la solicitud y gestionar la relación comercial o técnica. Se aplican medidas razonables de seguridad para reducir accesos no autorizados.</p>
      <h2>Actualizaciones</h2>
      <p>Esta política puede actualizarse para reflejar cambios operativos, normativos o técnicos. Última actualización: mayo de 2026.</p>
    </PageShell>
  );
}

function TermsPage() {
  return (
    <PageShell
      kicker="LEGAL"
      title="Términos y condiciones"
      intro="Condiciones generales de uso del sitio web de Enfoque Ambiental S.A.S. y de sus canales de contacto digital."
    >
      <h2>Uso del sitio</h2>
      <p>El contenido del sitio tiene fines informativos sobre servicios ambientales, sanitarios, geomáticos y de consultoría. El acceso al sitio no crea por sí mismo una relación contractual.</p>
      <h2>Solicitudes y propuestas</h2>
      <p>Los formularios y canales de contacto permiten solicitar información o cotizaciones. Toda propuesta, alcance, valor, plazo o condición técnica deberá confirmarse por escrito mediante documento comercial o contractual independiente.</p>
      <h2>Propiedad intelectual</h2>
      <p>Textos, marcas, logotipos, imágenes, composiciones visuales y demás contenidos pertenecen a Enfoque Ambiental S.A.S. o se usan con autorización. No se permite su reproducción no autorizada.</p>
      <h2>Limitación de responsabilidad</h2>
      <p>Enfoque Ambiental S.A.S. procura mantener información actualizada y disponible, pero no garantiza ausencia de errores, interrupciones o desactualizaciones puntuales del sitio.</p>
      <h2>Enlaces externos</h2>
      <p>El sitio puede enlazar a servicios de terceros como WhatsApp, correo electrónico o plataformas de despliegue. Cada tercero opera bajo sus propias condiciones.</p>
      <h2>Contacto</h2>
      <p>Para inquietudes sobre estos términos puedes escribir a <a href={window.COMPANY.emailHref}>{window.COMPANY.email}</a>.</p>
    </PageShell>
  );
}

function ContactPage() {
  const open = () => window.openContactModal?.({ source: "Página contacto" });
  return (
    <PageShell
      kicker="CONTACTO"
      title="Trabajemos juntos"
      intro="Solicita una propuesta técnica, agenda una conversación o cuéntanos el estado actual de tu proyecto ambiental o territorial."
    >
      <div className="ea-contact-page-card">
        <h2>Canales directos</h2>
        <p><strong>Correo:</strong> <a href={window.COMPANY.emailHref}>{window.COMPANY.email}</a></p>
        <p><strong>Teléfono:</strong> <a href={window.COMPANY.phoneHref}>{window.COMPANY.phone}</a></p>
        <p><strong>Ubicación:</strong> {window.COMPANY.city}</p>
        <div className="ea-form-actions">
          <button type="button" className="ea-btn ea-btn-green" onClick={open}>ESCRÍBENOS <span className="ea-arrow">→</span></button>
          <a className="ea-btn ea-btn-outline-dark" href={window.COMPANY.whatsapp} target="_blank" rel="noopener">WHATSAPP</a>
        </div>
      </div>
      <h2>Qué incluir en tu solicitud</h2>
      <ul>
        <li>Municipio o ubicación del proyecto.</li>
        <li>Servicio requerido o problema a resolver.</li>
        <li>Estado actual: idea, estudios, licenciamiento, ejecución o seguimiento.</li>
        <li>Plazos esperados y documentos disponibles.</li>
      </ul>
    </PageShell>
  );
}

window.PrivacyPage = PrivacyPage;
window.TermsPage = TermsPage;
window.ContactPage = ContactPage;