/* global React, Reveal, SectionHead, PhoneMock, PalmMark, Logo */
// ====================================================================
// Tab pages: Nosotros · Productos · Servicios · Contacto + Footer
// ====================================================================

function PageHero({ eyebrow, title, sub }) {
  return (
    <div className="page-hero">
      <div className="page-hero-glow" />
      <div className="wrap">
        <Reveal as="span" className="eyebrow">{eyebrow}</Reveal>
        <Reveal as="h1" className="page-hero-title" delay={70}>{title}</Reveal>
        {sub && <Reveal as="p" className="page-hero-sub" delay={130}>{sub}</Reveal>}
      </div>
    </div>
  );
}

/* ---------------- NOSOTROS ---------------- */
const VALUES = [
  { t: "Tecnología que empodera", d: "Creemos que la tecnología debe servir a las personas, no complicarles la vida. Construimos para resolver problemas reales." },
  { t: "Elegancia funcional", d: "Lo simple es difícil. Pulimos hasta que cada interacción se sienta obvia, rápida y agradable." },
  { t: "Orgullo fronterizo", d: "Desde Mexicali para el mundo. Nuestro nombre y nuestra palmera nacen del desierto que llamamos casa." },
];
const STACK = {
  "Móvil": ["Swift", "SwiftUI", "Kotlin", "Jetpack Compose", "Android SDK"],
  "Backend": ["Node.js", "Express", "Railway", "APIs REST"],
  "Datos": ["Web Scraping", "Tiempo real", "Conversión de moneda"],
  "Herramientas": ["Git", "GitHub", "Xcode", "Android Studio", "VS Code"],
};

function Nosotros() {
  return (
    <div className="page">
      <PageHero
        eyebrow="Nosotros"
        title={<>Un estudio nacido en el <span className="serif-em">oasis</span> del desierto.</>}
        sub="Oasis Dev Labs es un estudio de desarrollo móvil fundado en 2026 en Mexicali, Baja California. Pequeño de tamaño, grande en cuidado."
      />

      <section className="section wrap about-split">
        <Reveal className="about-card card">
          <h3>Nuestra misión</h3>
          <p>En Oasis Dev Labs creemos que la tecnología debe empoderar a las personas, no complicarles la vida. Creamos aplicaciones móviles que resuelven problemas reales con soluciones elegantes y fáciles de usar.</p>
        </Reveal>
        <Reveal className="about-card card" delay={120}>
          <h3>Qué hacemos</h3>
          <p>Nos especializamos en el desarrollo de apps móviles para iOS y Android. Del concepto al despliegue, manejamos cada aspecto de dar vida a tus ideas con tecnología de punta y prácticas modernas.</p>
        </Reveal>
      </section>

      <section className="section-tight wrap">
        <SectionHead eyebrow="Lo que nos mueve" title="Tres cosas en las que no cedemos." />
        <div className="values">
          {VALUES.map((v, i) => (
            <Reveal key={v.t} delay={i * 100} className="value">
              <span className="value-mark"><span /></span>
              <h3>{v.t}</h3>
              <p>{v.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section wrap">
        <SectionHead eyebrow="Nuestro stack" title={<>Herramientas modernas, <span className="serif-em">elegidas</span> con criterio.</>} />
        <div className="stack-grid">
          {Object.entries(STACK).map(([cat, items], i) => (
            <Reveal key={cat} delay={i * 90} className="stack-col card">
              <h4>{cat}</h4>
              <div className="chips">
                {items.map((it) => <span className="chip" key={it}>{it}</span>)}
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="wrap">
        <Reveal className="locale">
          <div className="locale-art">
            <div className="locale-sun" />
            <PalmMark size={150} color="var(--palm-deep)" trunk="var(--sunset-deep)" animated />
            <div className="locale-dune" />
          </div>
          <div className="locale-copy">
            <span className="eyebrow">Basados en Mexicali</span>
            <h2>Baja California, México.<br /><span className="serif-em">Sirviendo al mundo.</span></h2>
            <p>Fundados en 2026, desarrollamos soluciones innovadoras desde la frontera — con la mira puesta en usuarios de todo el planeta.</p>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

/* ---------------- PRODUCTOS ---------------- */
const CART_FEATURES = [
  { t: "Todos en un solo lugar", d: "Guarda productos de cualquier tienda en línea y organízalos en listas a tu manera." },
  { t: "Visualiza tus gastos", d: "Gráficas claras de tu gasto mensual, tus productos y tus ahorros para decidir mejor." },
  { t: "Pagos a meses sin intereses", d: "Controla tus compras a MSI, tu crédito disponible y las fechas de pago — sin sorpresas." },
  { t: "Saldo y recordatorios", d: "Consulta el saldo de tus tarjetas de regalo y recibe avisos para que nunca se te pase un pago." },
];

function Productos({ go }) {
  return (
    <div className="page">
      <PageHero
        eyebrow="Productos"
        title={<>Cosas que <span className="serif-em">construimos</span> y amamos.</>}
        sub="Nuestro primer producto está casi listo. Y hay más en el horizonte."
      />

      <section className="section wrap prod-feature">
        <Reveal className="prod-phone">
          <div className="feat-phone-glow" />
          <PhoneMock />
        </Reveal>
        <div className="prod-info">
          <Reveal className="prod-appicon">
            <img src="assets/cartanywhere-icon.jpg" alt="CartAnywhere" />
            <span><strong>CartAnywhere</strong>App de compras</span>
          </Reveal>
          <Reveal className="prod-badge" delay={60}><span className="dot-pulse" />Próximamente · App Store &amp; Play Store</Reveal>
          <Reveal as="h2" className="prod-name" delay={110}>Organiza tus compras en línea.</Reveal>
          <Reveal as="p" className="prod-lead" delay={150}>
            Guarda los productos que te interesan de cualquier tienda y tenlos
            organizados en un solo lugar — con el control total de tus gastos,
            tus pagos y tus ahorros.
          </Reveal>
          <Reveal className="prod-tags" delay={200}>
            <span className="chip chip-accent">Organizador de compras</span>
            <span className="chip chip-accent">iOS &amp; Android</span>
            <span className="chip chip-accent">Finanzas personales</span>
          </Reveal>
        </div>
      </section>

      <section className="section-tight wrap">
        <div className="feat-cards feat-cards-4">
          {CART_FEATURES.map((f, i) => (
            <Reveal key={f.t} delay={(i % 2) * 90} className="feat-mini card">
              <span className="feat-mini-glyph" />
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="wrap">
        <Reveal className="roadmap card">
          <div>
            <span className="eyebrow">En el horizonte</span>
            <h2>Más proyectos en desarrollo.</h2>
            <p>Estamos cocinando nuevas ideas. ¿Quieres ser de los primeros en saber?</p>
          </div>
          <button className="btn btn-sun" onClick={() => go("contacto")}>Mantente al tanto <span className="arrow">→</span></button>
        </Reveal>
      </section>
    </div>
  );
}

/* ---------------- SERVICIOS ---------------- */
const SERVICES = [
  { t: "Apps iOS", d: "Experiencias nativas en Swift y SwiftUI que se sienten en casa en iPhone y iPad." },
  { t: "Apps Android", d: "Apps modernas con Kotlin y Jetpack Compose, rápidas y fieles a Material." },
  { t: "Backend & APIs", d: "Servidores en Node.js, APIs en tiempo real y procesamiento de datos que escala." },
  { t: "Diseño de producto", d: "De wireframe a UI pulida — prototipos que puedes tocar antes de invertir en código." },
];
const PROCESS = [
  { n: "01", t: "Descubrimiento", d: "Entendemos el problema, los usuarios y la meta antes de escribir una línea." },
  { n: "02", t: "Diseño", d: "Prototipamos la experiencia y la iteramos contigo hasta que se sienta bien." },
  { n: "03", t: "Desarrollo", d: "Construimos en ciclos cortos, con builds que puedes probar en tu propio teléfono." },
  { n: "04", t: "Lanzamiento", d: "Publicamos en las tiendas y te acompañamos en el mantenimiento y mejoras." },
];

function Servicios({ go }) {
  return (
    <div className="page">
      <PageHero
        eyebrow="Servicios"
        title={<>Llevamos tu idea del <span className="serif-em">boceto</span> a la tienda.</>}
        sub="Un solo equipo para todo el ciclo: estrategia, diseño, desarrollo móvil, backend y publicación."
      />

      <section className="section wrap">
        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <Reveal key={s.t} delay={(i % 2) * 110} className="svc card">
              <span className="svc-num">0{i + 1}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="section-tight wrap">
        <SectionHead eyebrow="Nuestro proceso" title={<>Claro, colaborativo, <span className="serif-em">sin sorpresas</span>.</>} />
        <div className="process">
          {PROCESS.map((p, i) => (
            <Reveal key={p.n} delay={i * 90} className="proc-step">
              <span className="proc-n">{p.n}</span>
              <div className="proc-line" />
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </Reveal>
          ))}
        </div>
      </section>

      <section className="wrap">
        <Reveal className="cta-band">
          <div className="cta-band-bg" />
          <div className="cta-band-content">
            <h2>¿Listo para construir algo?</h2>
            <p>Cuéntanos qué tienes en mente. La primera plática siempre es gratis.</p>
            <button className="btn btn-sun" onClick={() => go("contacto")}>Hablemos de tu proyecto <span className="arrow">→</span></button>
          </div>
        </Reveal>
      </section>
    </div>
  );
}

/* ---------------- CONTACTO ---------------- */
function Contacto() {
  const [sent, setSent] = React.useState(false);
  return (
    <div className="page">
      <PageHero
        eyebrow="Contacto"
        title={<>Hagámoslo <span className="serif-em">realidad</span>.</>}
        sub="¿Tienes un proyecto en mente? Trabajemos juntos para dar vida a tus ideas."
      />

      <section className="section wrap contact-split">
        <div className="contact-info">
          <Reveal className="contact-item">
            <span className="contact-k">Email</span>
            <a className="contact-v" href="mailto:administration@oasisdevlabs.com">administration@oasisdevlabs.com</a>
          </Reveal>
          <Reveal className="contact-item" delay={80}>
            <span className="contact-k">Ubicación</span>
            <span className="contact-v">Baja California — México</span>
          </Reveal>
          <Reveal className="contact-item" delay={160}>
            <span className="contact-k">GitHub</span>
            <a className="contact-v" href="https://github.com/Macaneitor" target="_blank" rel="noopener">@Oasisdevlabs</a>
          </Reveal>
          <Reveal className="contact-note" delay={220}>
            <PalmMark size={34} color="var(--palm)" trunk="var(--sunset-deep)" />
            <p>¿Buscas desarrollo de apps móviles? Siempre nos emociona platicar sobre nuevos proyectos y oportunidades.</p>
          </Reveal>
        </div>

        <Reveal className="contact-form card" delay={120}>
          {sent ? (
            <div className="form-done">
              <div className="form-done-mark"><PalmMark size={48} color="var(--palm)" trunk="var(--sunset-deep)" animated /></div>
              <h3>¡Gracias!</h3>
              <p>Tu mensaje quedó listo. En cuanto conectemos el envío, llegará directo a nuestra bandeja. Mientras, escríbenos a <a href="mailto:enrique.ocampo97@outlook.com">enrique.ocampo97@outlook.com</a>.</p>
            </div>
          ) : (
            <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <h3>Cuéntanos de tu proyecto</h3>
              <label>Nombre<input type="text" required placeholder="¿Cómo te llamas?" /></label>
              <label>Email<input type="email" required placeholder="tucorreo@ejemplo.com" /></label>
              <label>¿En qué podemos ayudar?<textarea rows="4" required placeholder="Una app para…"></textarea></label>
              <button type="submit" className="btn btn-sun">Enviar mensaje <span className="arrow">→</span></button>
            </form>
          )}
        </Reveal>
      </section>
    </div>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <Logo mono onClick={() => go("inicio")} />
            <p className="footer-blurb">Construyendo soluciones móviles que simplifican la vida diaria — desde Mexicali para el mundo.</p>
          </div>
          <div className="footer-col">
            <h4>Estudio</h4>
            <ul>
              <li><a onClick={() => go("nosotros")}>Nosotros</a></li>
              <li><a onClick={() => go("servicios")}>Servicios</a></li>
              <li><a onClick={() => go("contacto")}>Contacto</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Productos</h4>
            <ul>
              <li><a onClick={() => go("productos")}>CartAnywhere</a></li>
              <li><a href="cartanywhere/privacy.html" target="_blank" rel="noopener" style={{ opacity: 0.7, fontSize: '13px' }}>Privacidad · CartAnywhere</a></li>
              <li><span style={{ opacity: 0.6 }}>Más en desarrollo…</span></li>
            </ul>
        </div>
          <div className="footer-col">
            <h4>Conecta</h4>
            <ul>
              <li><a href="mailto:enrique.ocampo97@outlook.com">Email</a></li>
              <li><a href="https://github.com/Macaneitor" target="_blank" rel="noopener">GitHub</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Oasis Dev Labs. Todos los derechos reservados.</span>
          <span>
            <a href="cartanywhere/privacy.html" target="_blank" rel="noopener" style={{ color: 'inherit', opacity: 0.6 }}>Política de Privacidad</a>
            {' · '}Hecho por Enrique A. Ocampo · Mexicali, BC, MX
          </span>
        </div>
      </div>
    </footer>
  );
}

window.PageHero = PageHero;
window.Nosotros = Nosotros;
window.Productos = Productos;
window.Servicios = Servicios;
window.Contacto = Contacto;
window.Footer = Footer;