// Extra pages — Caso de estudio Manu, Blog, Privacidad, Términos

// ── /portafolio/manumoreno ──
function CasoManuMoreno() {
  return (
    <main className="pt-[68px]" data-screen-label="Caso Manu Moreno">
      <Section className="pt-16 pb-6">
        <Link to="/portafolio" className="text-sm text-muted hover:text-accent inline-flex items-center gap-1.5 mb-6">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
          Volver al portafolio
        </Link>
        <div className="badge mb-4">Caso 001 · Latin Grammy</div>
        <h1 className="font-bold tracking-tight leading-[1.02]" style={{ fontSize: 'clamp(40px, 6vw, 64px)' }}>
          manumoreno.mx
        </h1>
        <div className="mt-3 text-accent font-medium text-lg">Manuel Moreno · Compositor</div>
      </Section>

      <Section className="py-6">
        <BrowserFrame url="https://manumoreno.mx" height={560}>
          <ManuMorenoMockup/>
        </BrowserFrame>
        <div className="mt-4 flex flex-wrap items-center gap-3">
          <a href="https://manumoreno.mx" target="_blank" rel="noreferrer" className="btn-primary">Ver sitio en vivo <Icon.external width="14" height="14"/></a>
          {['Diseño','Landing','Artista','Premium','Bilingüe'].map(t => <span key={t} className="chip">{t}</span>)}
        </div>
      </Section>

      <Section className="py-14">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-4">
            <div className="label text-muted mb-3">Datos del proyecto</div>
            <dl className="space-y-4">
              {[
                ['Cliente', 'Manuel Moreno'],
                ['Industria', 'Música · Composición'],
                ['Tiempo', '2 semanas'],
                ['Idiomas', 'Español / Inglés'],
                ['Carga', '1.4 segundos'],
                ['Plan', 'Pro'],
              ].map(([k, v]) => (
                <div key={k} className="flex justify-between border-b pb-3 text-sm" style={{ borderColor: 'var(--border)' }}>
                  <dt className="text-muted">{k}</dt>
                  <dd className="font-medium text-right">{v}</dd>
                </div>
              ))}
            </dl>
          </div>
          <div className="lg:col-span-8 space-y-10">
            <div>
              <div className="label text-muted mb-3">El reto</div>
              <p className="text-lg leading-relaxed">
                Manuel necesitaba una pieza digital que se sintiera como su música: contemplativa, precisa, sin ruido. La mayoría de los sitios de músicos son ruidosos, llenos de embeds y badges. Aquí queríamos lo opuesto.
              </p>
            </div>
            <div>
              <div className="label text-muted mb-3">El enfoque</div>
              <p className="text-lg leading-relaxed">
                Trabajamos en tipografía como protagonista, un ritmo de scroll pausado y una jerarquía clara entre obra, prensa y contacto. El sistema bilingüe se diseñó pensando en industria: programadores de festivales y directores buscan información concreta.
              </p>
            </div>
            <div>
              <div className="label text-muted mb-3">El resultado</div>
              <div className="grid sm:grid-cols-3 gap-3">
                {[
                  ['1.4s', 'Tiempo de carga'],
                  ['+3', 'Solicitudes / mes desde el sitio'],
                  ['100%', 'Aprobado en la primera revisión'],
                ].map(([n, l]) => (
                  <div key={l} className="card !p-5">
                    <div className="text-3xl font-bold tracking-tight text-grad">{n}</div>
                    <div className="text-[11px] uppercase tracking-widest text-muted mt-2">{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="card !p-7" style={{ background: 'rgba(167,139,250,0.06)' }}>
              <div className="text-accent text-3xl leading-none">“</div>
              <div className="text-lg leading-relaxed mt-2">
                Cristian entendió la atmósfera del proyecto a la primera. Entregó un sitio que se siente premium sin estridencias.
              </div>
              <div className="text-sm text-muted mt-4">— Manuel Moreno, compositor</div>
            </div>
          </div>
        </div>
      </Section>

      <Section className="py-10"><PromoBanner/></Section>
    </main>
  );
}

// ── /blog ──
const POSTS = [
  {
    slug: 'landing-en-5-dias',
    title: '¿Cómo entrego una landing page en 5 días?',
    tag: 'Proceso',
    read: '4 min',
    date: 'Mar 2026',
    excerpt: 'El secreto no es trabajar más rápido, es eliminar decisiones innecesarias. Aquí va el método paso a paso.',
    body: [
      'Cuando alguien me pregunta cómo entrego una landing en cinco días, asume que trabajo doble turno. La verdad es más aburrida: trabajo lo mismo que cualquiera, pero elimino las decisiones que no mueven la aguja.',
      'Día 1: briefing y estructura. Una llamada de 30 minutos basta para entender qué vende el cliente, a quién, y qué quiere que pase cuando alguien aterrice en la página. Salgo con un wireframe de baja fidelidad.',
      'Día 2: diseño visual. Defino tipografía, paleta y un componente hero. Si esos tres elementos funcionan, el resto se construye solo.',
      'Día 3: contenido y maquetación. Aquí es donde el cliente envía textos finales. Si no los tiene, escribo borradores. Lo importante es no detener el avance.',
      'Día 4: ajustes y revisión. Mando una versión en staging. El cliente comenta. Yo ajusto. Una sola ronda de revisiones, profunda, vale más que cinco superficiales.',
      'Día 5: publicación. Compro/conecto dominio, configuro hosting, instalo analytics y entrego accesos. El sitio queda en manos del cliente desde el día uno.',
    ],
  },
  {
    slug: 'automatizacion-vs-app',
    title: 'No necesitas una app. Probablemente necesitas una automatización.',
    tag: 'Automatización',
    read: '5 min',
    date: 'Feb 2026',
    excerpt: 'La mayoría de pymes que me piden "una app" en realidad necesitan que tres herramientas que ya usan se hablen entre sí.',
    body: [
      'Cada mes alguien me escribe pidiendo una app. Cuando pregunto qué problema quieren resolver, la respuesta casi siempre es algo así: "Es que tengo que copiar los pedidos de WhatsApp a Excel, luego a Sheets, luego mandar correo de confirmación."',
      'Eso no es un problema de app. Es un problema de plomería.',
      'Una automatización conecta herramientas que ya usas: WhatsApp Business, Google Sheets, tu correo, tu calendario. Cuesta una fracción de lo que cuesta una app y resuelve el 80% de los casos.',
      'Una app se justifica cuando necesitas una experiencia visual única, control offline, o llegar al usuario final con tu marca. Si solo quieres que un proceso interno deje de ser doloroso, una automatización es la respuesta.',
    ],
  },
  {
    slug: 'wordpress-no',
    title: 'Por qué ya no construyo en WordPress.',
    tag: 'Opinión',
    read: '3 min',
    date: 'Ene 2026',
    excerpt: 'No es snobismo técnico. Es que el costo escondido de WordPress se paga durante años, no al inicio.',
    body: [
      'WordPress es barato al construir y caro al mantener. Cada plugin es una superficie de ataque. Cada actualización rompe algo. Cada año pagas hosting de más para sostener un CMS que tu cliente nunca abre.',
      'Para landings pequeñas (1-5 páginas), un sitio estático bien construido es más rápido, más seguro y más barato a lo largo de tres años. Punto.',
      'Si necesitas un blog con cientos de entradas y editor real, WordPress sigue teniendo sentido. Para todo lo demás, hay opciones mejores.',
    ],
  },
  {
    slug: 'correo-profesional',
    title: 'Correo profesional: la inversión más subestimada.',
    tag: 'Operación',
    read: '3 min',
    date: 'Ene 2026',
    excerpt: 'Por menos de 200 pesos al mes, dejas de mandar correos desde una cuenta de gmail. La diferencia en percepción es enorme.',
    body: [
      'Si vendes algo y tu correo termina en @gmail.com o @hotmail.com, estás pagando un costo que no ves. Cada vez que un cliente recibe tu propuesta, su cerebro registra "esto es informal".',
      'Un correo con tu dominio propio cuesta entre 150 y 200 pesos al mes en Google Workspace. Lo configuro en menos de un día. Incluye almacenamiento, calendario y todo Workspace.',
      'Es la mejora con mejor relación costo/percepción que existe para un negocio chico.',
    ],
  },
];

function BlogIndexPage() {
  return (
    <main className="pt-[68px]" data-screen-label="Blog">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Notas</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          Apuntes sobre diseño y automatización.
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Lo que aprendo construyendo proyectos. Sin teoría, sin filler.</p>
      </Section>

      <Section className="py-10">
        <div className="grid md:grid-cols-2 gap-5">
          {POSTS.map((p, i) => (
            <Link key={p.slug} to={`/blog/${p.slug}`} className="card card-interactive p-7 group block">
              <div className="flex items-center justify-between text-[11px] uppercase tracking-widest text-muted">
                <span className="text-accent">{p.tag}</span>
                <span>{p.date} · {p.read}</span>
              </div>
              <h2 className="mt-4 text-xl md:text-2xl font-bold tracking-tight leading-tight group-hover:text-accent transition">{p.title}</h2>
              <p className="mt-3 text-muted leading-relaxed text-[15px]">{p.excerpt}</p>
              <div className="mt-5 text-accent inline-flex items-center gap-2 text-sm font-medium link-arrow">
                Leer nota <Icon.arrow width="14" height="14"/>
              </div>
            </Link>
          ))}
        </div>
      </Section>
    </main>
  );
}

function BlogPostPage({ slug }) {
  const post = POSTS.find(p => p.slug === slug);
  if (!post) return <NotFound/>;
  const others = POSTS.filter(p => p.slug !== slug).slice(0, 2);
  return (
    <main className="pt-[68px]" data-screen-label={`Blog ${post.slug}`}>
      <Section className="pt-16 pb-6 max-w-[720px]">
        <Link to="/blog" className="text-sm text-muted hover:text-accent inline-flex items-center gap-1.5 mb-6">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
          Todas las notas
        </Link>
        <div className="flex items-center gap-3 text-[11px] uppercase tracking-widest">
          <span className="text-accent">{post.tag}</span>
          <span className="text-muted">{post.date} · {post.read}</span>
        </div>
        <h1 className="mt-4 font-bold tracking-tight leading-[1.05]" style={{ fontSize: 'clamp(32px, 5vw, 48px)' }}>{post.title}</h1>
      </Section>

      <Section className="py-8 max-w-[720px]">
        <div className="space-y-5 text-[17px] leading-[1.7] text-text">
          {post.body.map((p, i) => (
            <p key={i} className={i === 0 ? 'text-xl text-text leading-[1.6]' : ''}>{p}</p>
          ))}
        </div>
      </Section>

      <Section className="py-16 max-w-[720px]">
        <div className="card !p-7" style={{ background: 'linear-gradient(135deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02))' }}>
          <div className="text-lg font-bold tracking-tight">¿Quieres que trabajemos juntos?</div>
          <p className="text-muted mt-1 text-sm">Mándame un WhatsApp y platicamos. Sin compromiso.</p>
          <a href={waLink('Hola Cristian, leí una de tus notas y quiero platicar de un proyecto.')} target="_blank" rel="noreferrer" className="btn-primary mt-5">
            <Icon.whatsapp width="14" height="14"/> Hablar por WhatsApp
          </a>
        </div>
      </Section>

      <Section className="py-10">
        <div className="label text-muted mb-5">Sigue leyendo</div>
        <div className="grid md:grid-cols-2 gap-5">
          {others.map(p => (
            <Link key={p.slug} to={`/blog/${p.slug}`} className="card card-interactive p-6 block">
              <div className="text-[11px] uppercase tracking-widest text-accent">{p.tag}</div>
              <div className="mt-2 font-bold text-lg tracking-tight">{p.title}</div>
              <div className="mt-2 text-sm text-muted">{p.excerpt}</div>
            </Link>
          ))}
        </div>
      </Section>
    </main>
  );
}

// ── /legal/privacidad ──
function PrivacidadPage() {
  return (
    <main className="pt-[68px]" data-screen-label="Privacidad">
      <Section className="pt-16 pb-10 max-w-[720px]">
        <div className="badge mb-4">Legal</div>
        <h1 className="font-bold tracking-tight leading-[1.05]" style={{ fontSize: 'clamp(32px, 5vw, 48px)' }}>Aviso de privacidad</h1>
        <p className="text-muted mt-3 text-sm">Última actualización: mayo 2026</p>
      </Section>
      <Section className="pb-20 max-w-[720px] space-y-7 text-[16px] leading-[1.75] text-text">
        <LegalBlock title="Responsable del tratamiento" body="Cristian Salazar (en adelante, 'el responsable'), con domicilio en Ciudad de México, México, y correo de contacto cristian93salazar@gmail.com, es responsable del tratamiento de los datos personales que se obtengan a través de este sitio."/>
        <LegalBlock title="Datos que recabamos" body="Nombre, correo electrónico, número de WhatsApp y la descripción del proyecto que envíes mediante el formulario de contacto. No solicitamos datos sensibles."/>
        <LegalBlock title="Finalidad del tratamiento" body="Los datos se usan exclusivamente para responder tu solicitud, enviarte una propuesta y dar seguimiento al proyecto. No vendemos ni compartimos tu información con terceros."/>
        <LegalBlock title="Tus derechos (ARCO)" body="Tienes derecho a Acceder, Rectificar, Cancelar u Oponerte al tratamiento de tus datos en cualquier momento. Para ejercerlos escribe a cristian93salazar@gmail.com y te responderé en un plazo máximo de 20 días."/>
        <LegalBlock title="Almacenamiento" body="Los datos se almacenan en servidores de Google Workspace y herramientas profesionales con cifrado en tránsito y reposo. Se conservan por el tiempo necesario para atender la consulta."/>
        <LegalBlock title="Cookies" body="Este sitio usa cookies estrictamente necesarias para funcionar y, opcionalmente, herramientas de analítica anónima. No se rastrea información personal identificable sin consentimiento."/>
      </Section>
    </main>
  );
}

function TerminosPage() {
  return (
    <main className="pt-[68px]" data-screen-label="Términos">
      <Section className="pt-16 pb-10 max-w-[720px]">
        <div className="badge mb-4">Legal</div>
        <h1 className="font-bold tracking-tight leading-[1.05]" style={{ fontSize: 'clamp(32px, 5vw, 48px)' }}>Términos y condiciones</h1>
        <p className="text-muted mt-3 text-sm">Última actualización: mayo 2026</p>
      </Section>
      <Section className="pb-20 max-w-[720px] space-y-7 text-[16px] leading-[1.75] text-text">
        <LegalBlock title="Alcance" body="Estos términos rigen los servicios de diseño web, automatización y configuración de correo profesional ofrecidos por Cristian Salazar. Al contratar un plan, aceptas las condiciones aquí descritas."/>
        <LegalBlock title="Forma de pago" body="El 50% se cubre al inicio del proyecto y el 50% restante al momento de la entrega. Aceptamos transferencia SPEI y pagos en una sola exhibición o en dos parcialidades."/>
        <LegalBlock title="Revisiones" body="Cada plan incluye una ronda de revisiones profundas. Cambios mayores fuera del alcance original se cotizan por separado."/>
        <LegalBlock title="Propiedad" body="Una vez liquidado el proyecto, el cliente es propietario absoluto del código, los diseños y los accesos. Cristian Salazar puede mostrar el trabajo en su portafolio salvo acuerdo en contrario."/>
        <LegalBlock title="Tiempos" body="Los tiempos de entrega son estimaciones realistas, no garantías rígidas. Dependen de la entrega oportuna de contenido por parte del cliente. Si hay retrasos por parte del cliente, los plazos se ajustan proporcionalmente."/>
        <LegalBlock title="Mantenimiento" body="El mantenimiento incluido cubre ajustes menores: cambio de copy, imágenes, links y datos de contacto. No incluye desarrollo de nuevas funcionalidades."/>
      </Section>
    </main>
  );
}
function LegalBlock({ title, body }) {
  return (
    <section>
      <h2 className="text-xl font-bold tracking-tight">{title}</h2>
      <p className="text-muted mt-2 leading-[1.7]">{body}</p>
    </section>
  );
}

function CasoOrdenSeguridad() {
  const blue = '#3B82F6';
  return (
    <main className="pt-[68px]" data-screen-label="Caso Orden Seguridad">
      <Section className="pt-16 pb-6">
        <Link to="/portafolio" className="text-sm text-muted hover:text-accent inline-flex items-center gap-1.5 mb-6">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 12H5M11 18l-6-6 6-6"/></svg>
          Volver al portafolio
        </Link>
        <div className="badge mb-4" style={{ background: 'rgba(59,130,246,0.12)', color: blue }}>Caso 002 · Seguridad Privada</div>
        <h1 className="font-bold tracking-tight leading-[1.02]" style={{ fontSize: 'clamp(38px, 6vw, 60px)' }}>
          Orden Seguridad Privada
        </h1>
        <div className="mt-3 font-medium text-lg" style={{ color: blue }}>Empresa · Servicios Tácticos de Protección</div>
      </Section>

      <Section className="py-6">
        <BrowserFrame url="https://ordenseguridadprivada.com" height={540}>
          <OrdenMockup/>
        </BrowserFrame>
        <div className="mt-4 flex flex-wrap items-center gap-3">
          {['Corporativo','Seguridad','React','TailwindCSS','Vite','Animaciones','TanStack Router'].map(t => <span key={t} className="chip">{t}</span>)}
        </div>
      </Section>

      <Section className="py-14">
        <div className="grid lg:grid-cols-12 gap-10">
          <div className="lg:col-span-4">
            <div className="label text-muted mb-3">Datos del proyecto</div>
            <dl className="space-y-4">
              {[
                ['Cliente', 'Orden Seguridad Privada'],
                ['Industria', 'Seguridad · Corporativo'],
                ['Tiempo', '10 días'],
                ['Stack', 'React + Vite + TanStack'],
                ['Estilos', 'TailwindCSS v4'],
                ['Plan', 'Pro'],
              ].map(([k, v]) => (
                <div key={k} className="flex justify-between border-b pb-3 text-sm" style={{ borderColor: 'var(--border)' }}>
                  <dt className="text-muted">{k}</dt>
                  <dd className="font-medium text-right">{v}</dd>
                </div>
              ))}
            </dl>
          </div>

          <div className="lg:col-span-8 space-y-10">
            <div>
              <div className="label text-muted mb-3">El reto</div>
              <p className="text-lg leading-relaxed">
                Orden Seguridad Privada necesitaba un sitio que transmitiera autoridad y confianza desde el primer segundo. El mercado de seguridad está lleno de sitios genéricos con imágenes de stock. El objetivo era diferenciarse con un diseño propio, atmosférico y técnico.
              </p>
            </div>
            <div>
              <div className="label text-muted mb-3">El enfoque</div>
              <p className="text-lg leading-relaxed">
                Diseñamos una estética dark con acento azul eléctrico — el color asociado con tecnología y precisión. Implementamos partículas animadas tipo red neuronal que evocan vigilancia y conexión. Cada sección fue construida para guiar al visitante de forma natural hacia el contacto.
              </p>
            </div>
            <div>
              <div className="label text-muted mb-3">Características técnicas</div>
              <div className="grid sm:grid-cols-2 gap-3">
                {[
                  ['ParticlesNet', 'Red de partículas animadas en el hero — generada con canvas, sin librerías externas'],
                  ['CountUp', 'Estadísticas animadas al hacer scroll (10 años, 24/7, 3C)'],
                  ['Reveal', 'Animaciones de entrada escalonadas con IntersectionObserver'],
                  ['Multi-página', 'Home, Servicios, Nosotros, ¿Por qué nosotros?, Contacto, Reporte'],
                ].map(([t, d]) => (
                  <div key={t} className="rounded-lg p-4" style={{ background: 'rgba(59,130,246,0.06)', border: '0.5px solid rgba(59,130,246,0.15)' }}>
                    <div className="font-semibold text-sm mb-1" style={{ color: blue }}>{t}</div>
                    <p className="text-muted text-[13px] leading-relaxed">{d}</p>
                  </div>
                ))}
              </div>
            </div>
            <div>
              <div className="label text-muted mb-3">El resultado</div>
              <div className="grid sm:grid-cols-3 gap-3">
                {[
                  ['10 días', 'De entrega completa'],
                  ['6 páginas', 'Sitio multi-página completo'],
                  ['100%', 'Aprobado en primera revisión'],
                ].map(([n, l]) => (
                  <div key={l} className="card !p-5">
                    <div className="text-3xl font-bold tracking-tight" style={{ color: blue }}>{n}</div>
                    <div className="text-[11px] uppercase tracking-widest text-muted mt-2">{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div className="card !p-7" style={{ background: 'rgba(59,130,246,0.06)', borderColor: 'rgba(59,130,246,0.2)' }}>
              <div className="text-3xl leading-none" style={{ color: blue }}>"</div>
              <div className="text-lg leading-relaxed mt-2">
                El sitio comunica exactamente lo que somos. Serio, técnico y con presencia. Nuestros clientes corporativos lo notan al primer vistazo.
              </div>
              <div className="text-sm text-muted mt-4">— Cliente, Orden Seguridad Privada</div>
            </div>
          </div>
        </div>
      </Section>

      <Section className="py-10">
        <div className="divider mb-10"/>
        <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
          <div>
            <div className="font-bold text-xl">¿Quieres algo similar?</div>
            <p className="text-muted text-sm mt-1">Un sitio profesional que represente bien tu empresa o negocio.</p>
          </div>
          <a href={waLink('Hola Cristian, vi el caso de Orden Seguridad Privada y quiero algo similar para mi negocio.')} target="_blank" rel="noreferrer" className="btn-primary whitespace-nowrap">
            Escríbeme <Icon.whatsapp width="14" height="14"/>
          </a>
        </div>
      </Section>
    </main>
  );
}

Object.assign(window, { CasoManuMoreno, CasoOrdenSeguridad, BlogIndexPage, BlogPostPage, PrivacidadPage, TerminosPage, POSTS });