// All pages — Home, Servicios, Automatizaciones, Precios, Portafolio, Proceso, Contacto

// ───────────────────────────── HOME ─────────────────────────────
function HomePage() {
  const copy = useClientCopy();
  const services = [
    { icon: <Icon.monitor width="22" height="22"/>, title: 'Landing Pages', desc: 'Sitios web a medida, rápidos y pensados para convertir visitas en clientes.', tag: '01' },
    { icon: <Icon.workflow width="22" height="22"/>, title: 'Automatizaciones IA', desc: 'Flujos que capturan, notifican y dan seguimiento sin que muevas un dedo.', tag: '02' },
    { icon: <Icon.mail width="22" height="22"/>, title: 'Correo Profesional', desc: 'Configuración con tu dominio en menos de 24 horas. Imagen seria desde día uno.', tag: '03' },
  ];

  return (
    <main className="pt-[68px]" data-screen-label="Home">
      {/* HERO */}
      <Section className="relative pt-20 md:pt-28 pb-20">
        <div aria-hidden className="absolute inset-x-0 top-0 h-[420px] hero-glow pointer-events-none"/>
        <div className="relative grid lg:grid-cols-12 gap-10 items-center">
          <div className="lg:col-span-7">
            <div className="badge anim-fadeUp"><span className="w-1.5 h-1.5 rounded-full bg-accent pulse-dot"/> {copy.badge}</div>
            <TypingHero part1={copy.heroPart1} part2={copy.heroPart2}/>
            <p className="mt-6 text-lg md:text-xl text-muted leading-relaxed max-w-2xl anim-fadeUp-d2">
              Soy Cristian Salazar — {copy.heroSub}
            </p>
            <div className="mt-9 flex flex-wrap gap-3 anim-fadeUp-d3">
              <a href={waLink(copy.ctaWA)} target="_blank" rel="noreferrer" className="btn-primary">
                <Icon.whatsapp width="16" height="16"/> Escríbeme por WhatsApp <Icon.arrow width="16" height="16"/>
              </a>
              <Link to="/servicios" className="btn-secondary">Ver mis servicios</Link>
            </div>
            <div className="mt-7 flex flex-wrap gap-2 anim-fadeUp-d4">
              {copy.heroChips.map(chip => (
                <span key={chip} className="chip flex items-center gap-2"><Icon.check width="12" height="12" className="text-accent"/> {chip}</span>
              ))}
            </div>
            <div className="mt-6"><SlotsIndicator/></div>
          </div>
          <div className="lg:col-span-5 hidden lg:block"><HeroWidget/></div>
        </div>

        {/* Stat strip — bento grid */}
        <div className="mt-20" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridTemplateRows: 'auto auto', gap: '10px' }}>
          {/* Proyectos — grande, ocupa 2 cols y 2 filas */}
          <div style={{
            gridColumn: 'span 2', gridRow: 'span 2',
            background: 'rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.06)',
            backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
            border: '0.5px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.15)',
            borderRadius: '16px', padding: '32px 28px',
            display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
          }}>
            <div className="text-5xl font-bold tracking-tight text-grad" style={{ lineHeight: 1 }}>+15</div>
            <div className="text-xs uppercase tracking-widest text-muted mt-3">Proyectos entregados</div>
          </div>
          {/* Entrega */}
          <div style={{
            gridColumn: 'span 1',
            background: 'rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.04)',
            backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
            border: '0.5px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10)',
            borderRadius: '16px', padding: '20px',
          }}>
            <div className="text-3xl font-bold tracking-tight text-grad">5–10</div>
            <div className="text-xs uppercase tracking-widest text-muted mt-2">Días de entrega típica</div>
          </div>
          {/* Carga */}
          <div style={{
            gridColumn: 'span 1',
            background: 'rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.04)',
            backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
            border: '0.5px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10)',
            borderRadius: '16px', padding: '20px',
          }}>
            <div className="text-3xl font-bold tracking-tight text-grad">&lt;2s</div>
            <div className="text-xs uppercase tracking-widest text-muted mt-2">Tiempo de carga objetivo</div>
          </div>
          {/* Respuesta — ocupa 2 cols */}
          <div style={{
            gridColumn: 'span 2',
            background: 'rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.04)',
            backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
            border: '0.5px solid rgba(var(--accent-r),var(--accent-g),var(--accent-b),0.10)',
            borderRadius: '16px', padding: '20px',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          }}>
            <div>
              <div className="text-3xl font-bold tracking-tight text-grad">24h</div>
              <div className="text-xs uppercase tracking-widest text-muted mt-2">Respuesta máxima</div>
            </div>
            <div style={{ fontSize: '28px', opacity: 0.4 }}>⚡</div>
          </div>
        </div>
      </Section>

      {/* TRUSTED BY */}
      <Section className="py-14"><TrustedBy/></Section>

      {/* ABOUT */}
      <Section className="py-20"><AboutSection/></Section>

      {/* SERVICES */}
      <Section className="py-20">
        <SectionHeader label="Lo que hago" title="Tres servicios. Cero rodeos." sub="Cada uno resuelve un problema concreto, con entregas claras y tiempos cortos."/>
        <div className="grid md:grid-cols-3 gap-5">
          {services.map((s, i) => (
            <Link key={s.title} to="/servicios" className="card card-interactive p-7 group block">
              <div className="flex items-center justify-between">
                <div className="w-11 h-11 rounded-lg grid place-items-center" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>{s.icon}</div>
                <div className="font-mono text-[11px] text-muted">/ {s.tag}</div>
              </div>
              <div className="mt-6 text-xl font-bold tracking-tight">{s.title}</div>
              <p className="mt-2 text-muted leading-relaxed text-[15px]">{s.desc}</p>
              <div className="mt-6 inline-flex items-center gap-2 text-accent text-sm font-medium link-arrow">
                Ver más <Icon.arrow width="14" height="14"/>
              </div>
            </Link>
          ))}
        </div>
      </Section>

      {/* CASE STUDY PREVIEW */}
      <Section className="py-20">
        <div className="grid lg:grid-cols-12 gap-8 items-center">
          <div className="lg:col-span-5">
            <div className="badge mb-4">Trabajo reciente</div>
            <h2 className="text-3xl md:text-[40px] font-bold tracking-tight leading-tight">manumoreno.mx</h2>
            <div className="mt-2 text-accent font-medium">Compositor · Latin Grammy Winner</div>
            <p className="mt-5 text-muted leading-relaxed">
              Sitio íntimo y cinematográfico para un compositor con presencia internacional. Tipografía sobria, narrativa pausada y catálogo de obra organizado para industria. Construido en menos de dos semanas.
            </p>
            <div className="mt-5 flex flex-wrap gap-2">
              {['Artista','Premium','Landing','Bilingüe'].map(t => <span key={t} className="chip">{t}</span>)}
            </div>
            <div className="mt-7 flex flex-wrap gap-3">
              <Link to="/portafolio" className="btn-secondary">Ver portafolio completo <Icon.arrow width="14" height="14"/></Link>
              <a href="https://manumoreno.mx" target="_blank" rel="noreferrer" className="text-sm text-muted hover:text-accent inline-flex items-center gap-1.5 self-center">
                manumoreno.mx <Icon.external width="12" height="12"/>
              </a>
            </div>
          </div>
          <div className="lg:col-span-7">
            <BrowserFrame url="https://manumoreno.mx" height={460}>
              <ManuMorenoMockup/>
            </BrowserFrame>
          </div>
        </div>
      </Section>

      {/* TESTIMONIALS */}
      <Section className="py-20">
        <SectionHeader label="Voces de clientes" title="Lo que dicen quienes ya trabajaron conmigo."/>
        <div className="grid md:grid-cols-2 gap-5">
          {[
            { initials: 'MM', name: 'Manuel Moreno', role: 'Compositor · CDMX', text: 'Cristian entendió la atmósfera del proyecto a la primera. Entregó un sitio que se siente premium sin estridencias. Lo recomiendo.' },
            { initials: 'AR', name: 'Ana Robles', role: 'Pastelería La Lola', text: 'Mis ventas en línea empezaron desde la primera semana. La automatización de WhatsApp me ahorra horas al día.' },
          ].map(t => (
            <div key={t.name} className="card !p-7">
              <div className="flex items-center gap-3">
                <div className="w-11 h-11 rounded-full grid place-items-center font-bold" style={{ background: 'var(--accent-soft)', color: 'var(--accent)', border: '0.5px solid rgba(167,139,250,0.4)' }}>
                  {t.initials}
                </div>
                <div>
                  <div className="font-semibold">{t.name}</div>
                  <div className="text-xs text-muted">{t.role}</div>
                </div>
              </div>
              <div className="mt-5 text-[15px] leading-relaxed text-text">
                <span className="text-accent text-2xl leading-none mr-1 align-top">“</span>
                {t.text}
              </div>
            </div>
          ))}
        </div>
      </Section>

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

// ───────────────────────────── SERVICIOS ─────────────────────────────
function ServiciosPage() {
  const blocks = [
    {
      tag: 'Servicio 01',
      icon: <Icon.monitor width="28" height="28"/>,
      title: 'Landing Pages',
      headline: 'Tu sitio web, hecho para vender.',
      desc: 'Diseñado para que tu visitante haga una sola cosa: contactarte o comprar. Cero plantillas reusadas, cero plugins inflados.',
      list: [
        'Diseño personalizado desde cero',
        'Optimizado para móvil',
        'Velocidad de carga < 2 segundos',
        'Integración con WhatsApp y formularios',
        'Dominio y hosting opcionales',
      ],
      cta: { label: 'Ver casos', to: '/portafolio' },
    },
    {
      tag: 'Servicio 02',
      icon: <Icon.workflow width="28" height="28"/>,
      title: 'Automatizaciones',
      headline: 'Trabaja menos. Vende más.',
      desc: 'Flujos que capturan leads, los califican y los notifican donde sí los vas a leer. WhatsApp, correo, Sheets, lo que necesites.',
      list: [
        'Captura de leads automática',
        'Notificaciones por WhatsApp y correo',
        'Integración con Google Sheets / CRMs',
        'Reportes y resúmenes diarios',
      ],
      cta: { label: 'Ver demo interactivo', to: '/automatizaciones' },
    },
    {
      tag: 'Servicio 03',
      icon: <Icon.mail width="28" height="28"/>,
      title: 'Correo Profesional',
      headline: 'Correo con tu dominio propio.',
      desc: 'Que un cliente vea hola@tunegocio.mx en lugar de un gmail genérico cambia todo. Lo dejo listo en menos de un día.',
      list: [
        'Google Workspace o Zoho',
        'Entrega en 24 horas',
        'Hasta 5 cuentas incluidas',
        'Soporte post-configuración',
      ],
      cta: null,
    },
  ];
  const faqs = [
    { q: '¿Cuánto tiempo tarda la entrega?', a: 'Entre 5 y 10 días según el plan. Si tienes contenido listo, puede ser más rápido.' },
    { q: '¿Puedo empezar con el plan básico?', a: 'Sí. El plan Starter es perfecto para validar una idea. Después subes sin pagar de nuevo lo que ya invertiste.' },
    { q: '¿Trabajas fuera de México?', a: 'Sí. Trabajo 100% remoto. He tenido clientes en Estados Unidos, Argentina y España.' },
  ];

  return (
    <main className="pt-[68px]" data-screen-label="Servicios">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Servicios</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          ¿En qué te puedo ayudar?
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Tres servicios pensados para resolver lo que realmente mueve la aguja en negocios pequeños y proyectos personales.</p>
      </Section>

      <Section className="py-12 space-y-5">
        <BeforeAfter/>
        {blocks.map((b, i) => (
          <div key={b.title} className="card !p-0 overflow-hidden">
            <div className="grid lg:grid-cols-12">
              <div className="lg:col-span-7 p-8 md:p-10">
                <div className="flex items-center gap-3 mb-5">
                  <div className="w-14 h-14 rounded-xl grid place-items-center" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>{b.icon}</div>
                  <div className="font-mono text-[11px] text-muted uppercase tracking-widest">{b.tag}</div>
                </div>
                <h2 className="text-2xl md:text-3xl font-bold tracking-tight">{b.headline}</h2>
                <p className="mt-3 text-muted leading-relaxed max-w-lg">{b.desc}</p>
                {b.cta && (
                  <div className="mt-6">
                    <Link to={b.cta.to} className="text-accent inline-flex items-center gap-2 font-medium link-arrow">{b.cta.label} <Icon.arrow width="14" height="14"/></Link>
                  </div>
                )}
              </div>
              <div className="lg:col-span-5 p-8 md:p-10" style={{ background: 'rgba(167,139,250,0.025)', borderLeft: '0.5px solid var(--border)' }}>
                <div className="label text-muted mb-4">Lo que incluye</div>
                <ul className="space-y-3">
                  {b.list.map(item => (
                    <li key={item} className="flex items-start gap-3 text-[15px]">
                      <span className="mt-1 w-4 h-4 rounded-full grid place-items-center shrink-0" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>
                        <Icon.check width="10" height="10"/>
                      </span>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </Section>

      <Section className="py-20">
        <SectionHeader label="Preguntas frecuentes" title="Lo que la gente suele preguntar antes de contratar."/>
        <div className="space-y-3">
          {faqs.map((f, i) => <FAQItem key={i} q={f.q} a={f.a} defaultOpen={i === 0}/>)}
        </div>
      </Section>

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

function FAQItem({ q, a, defaultOpen }) {
  const [open, setOpen] = useState(!!defaultOpen);
  return (
    <div className="card !p-0">
      <button onClick={() => setOpen(o => !o)} className="w-full text-left p-5 md:p-6 flex items-center justify-between gap-4">
        <span className="font-semibold text-[16px]">{q}</span>
        <span className="w-8 h-8 rounded-full grid place-items-center shrink-0" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" style={{ transform: open ? 'rotate(45deg)' : 'none', transition: 'transform .2s' }}>
            <path d="M12 5v14M5 12h14"/>
          </svg>
        </span>
      </button>
      {open && (
        <div className="px-5 md:px-6 pb-6 text-muted leading-relaxed anim-fadeUp">{a}</div>
      )}
    </div>
  );
}

// ───────────────────────────── AUTOMATIZACIONES ─────────────────────────────
function AutomatizacionesPage() {
  const [scenario, setScenario] = useState('pasteleria');
  return (
    <ScenarioCtx.Provider value={SCENARIOS[scenario]}>
      <main className="pt-[68px]" data-screen-label="Automatizaciones">
        <Section className="pt-20 pb-10">
          <div className="badge anim-fadeUp"><Icon.bolt width="11" height="11"/> Demos interactivos</div>
          <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
            Mira cómo funciona una automatización.
          </h1>
          <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Casos reales de flujos que construyo para mis clientes. Elige un tipo de negocio, simula y observa el recorrido con datos concretos.</p>
        </Section>

        <Section className="py-10 space-y-5">
          <ScenarioPicker active={scenario} onChange={setScenario}/>
          <FlowWhatsApp/>
          <FlowSheets/>
          <FlowEmail/>
          <FlowKanban/>
        </Section>

        <Section className="py-20">
          <div className="card !p-10 text-center" style={{ background: 'linear-gradient(135deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02))' }}>
            <div className="badge mb-4 mx-auto">Construyamos el tuyo</div>
            <h3 className="text-3xl md:text-4xl font-bold tracking-tight max-w-2xl mx-auto">¿Quieres una automatización así para tu negocio?</h3>
            <p className="mt-4 text-muted max-w-xl mx-auto">Cuéntame qué tarea repites cada semana. En 24 horas te paso una propuesta concreta.</p>
            <a href={waLink('Hola Cristian, quiero automatizar un proceso de mi negocio.')} target="_blank" rel="noreferrer" className="btn-primary mt-7 mx-auto">
              <Icon.whatsapp width="16" height="16"/> Hablar por WhatsApp <Icon.arrow width="16" height="16"/>
            </a>
          </div>
        </Section>
      </main>
    </ScenarioCtx.Provider>
  );
}

// ───────────────────────────── PRECIOS ─────────────────────────────
function PreciosPage() {
  const plans = [
    {
      name: 'Starter', price: '7,000', popular: false,
      desc: 'Una página, una conversión.',
      features: ['1 página landing', 'Diseño personalizado', 'Optimizado para móvil', 'Formulario de contacto'],
      cta: 'Hola Cristian, me interesa el plan Starter.',
    },
    {
      name: 'Pro', price: '18,000', popular: true,
      desc: 'Lo más pedido. Cubre el 80% de los casos.',
      features: ['Hasta 3 páginas', 'Diseño personalizado', 'Dominio + hosting', 'Correo profesional', '1 mes de mantenimiento'],
      cta: 'Hola Cristian, me interesa el plan Pro.',
    },
    {
      name: 'Elite', price: '35,000', popular: false,
      desc: 'Sitio completo + automatización inicial.',
      features: ['Sitio completo', 'Dominio + hosting', 'Correo profesional', 'Automatización básica', '2 meses de mantenimiento'],
      cta: 'Hola Cristian, me interesa el plan Elite.',
    },
  ];

  const compareRows = [
    ['Páginas', '1', 'Hasta 3', 'Completo'],
    ['Diseño personalizado', true, true, true],
    ['Dominio + hosting', false, true, true],
    ['Correo profesional', false, true, true],
    ['Automatización básica', false, false, true],
    ['Mantenimiento incluido', '—', '1 mes', '2 meses'],
    ['Entrega estimada', '5 días', '7 días', '10 días'],
  ];

  const cell = (v) => {
    if (v === true) return <span className="inline-grid place-items-center w-6 h-6 rounded-full" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}><Icon.check width="12" height="12"/></span>;
    if (v === false) return <span className="text-muted">—</span>;
    return <span className="text-text">{v}</span>;
  };

  return (
    <main className="pt-[68px]" data-screen-label="Precios">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Inversión</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          Elige tu punto de entrada.
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Precios claros, sin asteriscos. Todo MXN, una sola transferencia o pago dividido si lo necesitas.</p>
      </Section>

      <Section className="py-10">
        <div className="grid md:grid-cols-3 gap-5">
          {plans.map(p => (
            <div
              key={p.name}
              className={`card !p-7 relative ${p.popular ? 'scale-[1.02]' : ''}`}
              style={p.popular ? { borderColor: 'var(--accent)', boxShadow: '0 0 32px rgba(167,139,250,0.18)' } : {}}
            >
              {p.popular && (
                <div className="absolute -top-3 left-1/2 -translate-x-1/2 badge !bg-accent !text-bg !text-[10px] !px-3 !py-1.5" style={{ background: 'var(--accent)', color: 'var(--bg-primary)' }}>
                  Más popular
                </div>
              )}
              <div className="label text-muted">{p.name}</div>
              <div className="mt-4 flex items-baseline gap-1.5">
                <span className="text-4xl md:text-5xl font-bold tracking-tight">${p.price}</span>
                <span className="text-muted text-sm">MXN</span>
              </div>
              <p className="mt-2 text-muted text-sm">{p.desc}</p>
              <div className="divider my-6"/>
              <ul className="space-y-3 text-[15px]">
                {p.features.map(f => (
                  <li key={f} className="flex items-start gap-3">
                    <span className="mt-1 w-4 h-4 rounded-full grid place-items-center shrink-0" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>
                      <Icon.check width="10" height="10"/>
                    </span>
                    {f}
                  </li>
                ))}
              </ul>
              <a
                href={waLink(p.cta)}
                target="_blank" rel="noreferrer"
                className={`mt-7 w-full justify-center ${p.popular ? 'btn-primary' : 'btn-secondary'}`}
              >
                Empezar con {p.name} <Icon.arrow width="14" height="14"/>
              </a>
            </div>
          ))}
        </div>
      </Section>

      <Section className="py-10">
        <BudgetCalc/>
      </Section>

      {/* Comparativa */}
      <Section className="py-16">
        <SectionHeader label="Comparativa completa" title="Todo lo que incluye cada plan."/>
        <div className="card !p-0 overflow-hidden">
          <div className="overflow-x-auto scrollbar-thin">
            <table className="w-full text-left text-sm min-w-[640px]">
              <thead>
                <tr style={{ borderBottom: '0.5px solid var(--border)' }}>
                  <th className="p-5 label text-muted font-medium">Feature</th>
                  <th className="p-5 label text-muted font-medium text-center">Starter</th>
                  <th className="p-5 label text-accent font-medium text-center">Pro</th>
                  <th className="p-5 label text-muted font-medium text-center">Elite</th>
                </tr>
              </thead>
              <tbody>
                {compareRows.map((r, i) => (
                  <tr key={i} style={{ borderBottom: i < compareRows.length - 1 ? '0.5px solid var(--border)' : 'none' }}>
                    <td className="p-5 text-text">{r[0]}</td>
                    <td className="p-5 text-center">{cell(r[1])}</td>
                    <td className="p-5 text-center" style={{ background: 'rgba(167,139,250,0.04)' }}>{cell(r[2])}</td>
                    <td className="p-5 text-center">{cell(r[3])}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </Section>

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

// ───────────────────────────── PORTAFOLIO ─────────────────────────────
function PortafolioPage() {
  return (
    <main className="pt-[68px]" data-screen-label="Portafolio">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Portafolio</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          Trabajo real. Resultados visibles.
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Cada proyecto pasa por el mismo nivel de cuidado: desde la primera reunión hasta el último ajuste post-lanzamiento.</p>
      </Section>

      <Section className="py-10">
        <div className="card !p-0 overflow-hidden">
          <div className="grid lg:grid-cols-12">
            <div className="lg:col-span-5 p-8 md:p-10">
              <div className="flex items-center gap-3">
                <div className="font-mono text-[11px] text-muted">CASO 001</div>
                <div className="badge !text-[10px]"><Icon.trophy width="11" height="11"/> Latin Grammy</div>
              </div>
              <h2 className="mt-5 text-3xl md:text-4xl font-bold tracking-tight">manumoreno.mx</h2>
              <div className="mt-2 text-accent font-medium">Manuel Moreno · Compositor</div>
              <p className="mt-5 text-muted leading-relaxed">
                Sitio íntimo y cinematográfico para un compositor con presencia internacional. Buscaba una pieza digital que se sintiera como su música: contemplativa, precisa, sin ruido. Trabajamos en tipografía, ritmo de scroll y un sistema bilingüe pensado para industria.
              </p>
              <div className="mt-6 grid grid-cols-3 gap-3">
                {[
                  ['2 sem', 'Tiempo'],
                  ['ES / EN', 'Idiomas'],
                  ['1.4s', 'Carga'],
                ].map(([n, l]) => (
                  <div key={l} className="rounded-lg p-3 text-center" style={{ background: 'rgba(255,255,255,0.02)', border: '0.5px solid var(--border)' }}>
                    <div className="text-xl font-bold tracking-tight">{n}</div>
                    <div className="text-[10px] uppercase tracking-widest text-muted mt-1">{l}</div>
                  </div>
                ))}
              </div>
              <div className="mt-6 flex flex-wrap gap-2">
                {['Diseño','Landing','Artista','Premium','Bilingüe'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
              <div className="mt-7 flex flex-wrap 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>
                <Link to="/portafolio/manumoreno" className="btn-secondary">Leer caso completo <Icon.arrow width="14" height="14"/></Link>
              </div>
              <div className="mt-7 text-sm text-muted italic border-l-2 pl-4" style={{ borderColor: 'var(--accent)' }}>
                Este es el nivel de cuidado que pongo en cada proyecto.
              </div>
            </div>
            <div className="lg:col-span-7 p-6 md:p-8" style={{ background: 'rgba(167,139,250,0.025)', borderLeft: '0.5px solid var(--border)' }}>
              <BrowserFrame url="https://manumoreno.mx" height={520}>
                <ManuMorenoMockup/>
              </BrowserFrame>
            </div>
          </div>
        </div>
      </Section>

      {/* CASO 002 — Orden Seguridad Privada */}
      <Section className="py-10">
        <div className="card !p-0 overflow-hidden">
          <div className="grid lg:grid-cols-12">
            {/* Mockup izquierda en mobile, derecha en desktop */}
            <div className="lg:col-span-7 lg:order-first order-last p-6 md:p-8" style={{ background: 'rgba(59,130,246,0.025)', borderRight: '0.5px solid var(--border)' }}>
              <BrowserFrame url="https://ordenseguridadprivada.com" height={480}>
                <OrdenMockup/>
              </BrowserFrame>
            </div>
            <div className="lg:col-span-5 p-8 md:p-10">
              <div className="flex items-center gap-3">
                <div className="font-mono text-[11px] text-muted">CASO 002</div>
                <div className="badge !text-[10px]" style={{ background: 'rgba(59,130,246,0.12)', color: '#3B82F6', borderColor: 'rgba(59,130,246,0.3)' }}>
                  Seguridad Privada
                </div>
              </div>
              <h2 className="mt-5 text-3xl md:text-4xl font-bold tracking-tight" style={{ color: 'var(--text)' }}>
                Orden Seguridad Privada
              </h2>
              <div className="mt-2 font-medium" style={{ color: '#3B82F6' }}>Empresa · Servicios Tácticos</div>
              <p className="mt-5 text-muted leading-relaxed">
                Sitio corporativo de alto impacto para empresa de seguridad privada. Diseño oscuro, atmosférico y contundente — con partículas animadas, secciones de servicios tácticos y formulario de contacto directo. El objetivo: transmitir confianza y capacidad desde el primer segundo.
              </p>
              <div className="mt-6 grid grid-cols-3 gap-3">
                {[
                  ['10 días', 'Entrega'],
                  ['React', 'Stack'],
                  ['24/7', 'Uptime'],
                ].map(([n, l]) => (
                  <div key={l} className="rounded-lg p-3 text-center" style={{ background: 'rgba(59,130,246,0.06)', border: '0.5px solid rgba(59,130,246,0.15)' }}>
                    <div className="text-xl font-bold tracking-tight" style={{ color: '#3B82F6' }}>{n}</div>
                    <div className="text-[10px] uppercase tracking-widest text-muted mt-1">{l}</div>
                  </div>
                ))}
              </div>
              <div className="mt-6 flex flex-wrap gap-2">
                {['Corporativo','Seguridad','React','TailwindCSS','Animaciones'].map(t => <span key={t} className="chip">{t}</span>)}
              </div>
              <div className="mt-7 flex flex-wrap gap-3">
                <Link to="/portafolio/orden-seguridad" className="btn-primary">
                  Leer caso completo <Icon.arrow width="14" height="14"/>
                </Link>
              </div>
              <div className="mt-7 text-sm text-muted italic border-l-2 pl-4" style={{ borderColor: '#3B82F6' }}>
                Diseño que comunica autoridad antes de leer una sola palabra.
              </div>
            </div>
          </div>
        </div>
      </Section>

      {/* CASO 003 — Próximamente */}
      <Section className="py-10">
        <div className="grid md:grid-cols-2 gap-5">
          {[
            { tag: 'Caso 003', industry: 'Consultoría legal', soon: 'Captación + agenda automática' },
            { tag: 'Caso 004', industry: 'Restaurante artesanal', soon: 'Catálogo + pedidos por WhatsApp' },
          ].map(p => (
            <div key={p.tag} className="card !p-0 overflow-hidden">
              <div className="ph" style={{ height: 220, borderRadius: 0, borderLeft: 0, borderRight: 0, borderTop: 0 }}>
                · próximamente ·
              </div>
              <div className="p-6">
                <div className="font-mono text-[11px] text-muted uppercase tracking-widest">{p.tag} · Próximamente</div>
                <div className="mt-2 text-lg font-bold tracking-tight">{p.industry}</div>
                <p className="text-muted text-sm mt-1">{p.soon}</p>
              </div>
            </div>
          ))}
        </div>
      </Section>

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

// ───────────────────────────── PROCESO ─────────────────────────────
function ProcesoPage() {
  const steps = [
    { n: '01', t: 'Briefing', d: 'Me cuentas tu proyecto por WhatsApp. 30 minutos bastan para entender el problema y el alcance.' },
    { n: '02', t: 'Propuesta', d: 'Te envío estructura, paleta y presupuesto en 24 horas. Cero ambigüedad sobre lo que recibes.' },
    { n: '03', t: 'Diseño', d: 'Construyo el sitio con revisiones incluidas. Tú apruebas cada hito antes de avanzar al siguiente.' },
    { n: '04', t: 'Entrega', d: 'Publico en tu dominio y te entrego accesos completos. El sitio es tuyo desde el primer día.' },
    { n: '05', t: 'Soporte', d: 'Quedo disponible para ajustes post-lanzamiento. Sin contratos atados, sin sorpresas.' },
  ];

  return (
    <main className="pt-[68px]" data-screen-label="Proceso">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Cómo trabajo</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          Así trabajo.
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Sin reuniones infinitas ni sorpresas. Un proceso claro de cinco pasos, pensado para entregar rápido sin sacrificar calidad.</p>
      </Section>

      <Section className="py-10">
        <div className="relative">
          {/* Vertical line */}
          <div className="absolute left-[28px] md:left-[40px] top-2 bottom-2 w-px" style={{ background: 'linear-gradient(180deg, var(--accent), rgba(167,139,250,0.2) 80%, transparent)' }}/>
          <ol className="space-y-6">
            {steps.map((s, i) => (
              <li key={s.n} className="flex gap-5 md:gap-7 items-start anim-fadeUp" style={{ animationDelay: `${i * 70}ms` }}>
                <div className="shrink-0 relative">
                  <div
                    className="w-[56px] h-[56px] md:w-[80px] md:h-[80px] rounded-full grid place-items-center font-bold text-xl md:text-2xl tracking-tight relative z-10"
                    style={{
                      background: 'var(--bg-primary)',
                      border: '0.5px solid var(--accent)',
                      color: 'var(--accent)',
                      boxShadow: '0 0 0 4px var(--bg-primary), 0 0 24px rgba(167,139,250,0.2)',
                    }}
                  >
                    {s.n}
                  </div>
                </div>
                <div className="card !p-6 md:!p-7 flex-1">
                  <h3 className="text-xl md:text-2xl font-bold tracking-tight">{s.t}</h3>
                  <p className="mt-2 text-muted leading-relaxed text-[15px]">{s.d}</p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </Section>

      <Section className="py-20">
        <div className="card !p-10 text-center" style={{ background: 'linear-gradient(135deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02))' }}>
          <h3 className="text-3xl md:text-4xl font-bold tracking-tight">¿Empezamos?</h3>
          <p className="mt-3 text-muted max-w-xl mx-auto">Cuéntame tu idea. En menos de 24 horas tienes una propuesta concreta sobre la mesa.</p>
          <a href={waLink('Hola Cristian, quiero empezar un proyecto.')} target="_blank" rel="noreferrer" className="btn-primary mt-7 mx-auto">
            <Icon.whatsapp width="16" height="16"/> Hablar por WhatsApp <Icon.arrow width="16" height="16"/>
          </a>
        </div>
      </Section>
    </main>
  );
}

// ───────────────────────────── CONTACTO ─────────────────────────────
function ContactoPage() {
  const [form, setForm] = useState({ name: '', email: '', msg: '', service: 'Landing Page' });
  const [sent, setSent] = useState(false);
  const [errors, setErrors] = useState({});
  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = 'Falta tu nombre';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = 'Correo no válido';
    if (form.msg.trim().length < 10) errs.msg = 'Cuéntame un poco más';
    setErrors(errs);
    if (Object.keys(errs).length) return;
    setSent(true);
  };
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <main className="pt-[68px]" data-screen-label="Contacto">
      <Section className="pt-20 pb-10">
        <div className="badge anim-fadeUp">Contacto</div>
        <h1 className="mt-5 font-bold tracking-tight leading-[1.05] anim-fadeUp-d1" style={{ fontSize: 'clamp(36px, 5.5vw, 56px)' }}>
          Hablemos de tu proyecto.
        </h1>
        <p className="mt-5 text-muted text-lg max-w-2xl anim-fadeUp-d2">Elige el canal que prefieras. Respondo en menos de 24 horas, siempre.</p>
      </Section>

      <Section className="py-10">
        <div className="grid lg:grid-cols-12 gap-6">
          {/* Left card */}
          <div className="lg:col-span-5">
            <div className="card !p-8 h-full">
              <div className="flex items-center gap-4">
                <div className="w-16 h-16 rounded-full grid place-items-center font-bold text-xl tracking-tight" style={{ background: 'var(--accent-soft)', color: 'var(--accent)', border: '0.5px solid rgba(167,139,250,0.4)' }}>
                  CS
                </div>
                <div>
                  <div className="font-semibold text-lg">Cristian Salazar</div>
                  <div className="text-xs text-muted flex items-center gap-1.5 mt-1">
                    <span className="w-1.5 h-1.5 rounded-full bg-green-400 pulse-dot"/> Disponible esta semana
                  </div>
                </div>
              </div>

              <div className="divider my-6"/>

              <div className="grid grid-cols-3 gap-3">
                {[
                  ['+15', 'Proyectos'],
                  ['5d', 'Entrega'],
                  ['100%', 'Remoto'],
                ].map(([n,l]) => (
                  <div key={l} className="text-center">
                    <div className="text-xl font-bold tracking-tight">{n}</div>
                    <div className="text-[10px] uppercase tracking-widest text-muted mt-1">{l}</div>
                  </div>
                ))}
              </div>

              <div className="divider my-6"/>

              <ul className="space-y-4 text-[15px]">
                <li className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-lg grid place-items-center" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}><Icon.mail width="16" height="16"/></span>
                  <div>
                    <div className="text-[11px] text-muted uppercase tracking-widest">Email</div>
                    <a className="hover:text-accent transition" href="mailto:cristian93salazar@gmail.com">cristian93salazar@gmail.com</a>
                  </div>
                </li>
                <li className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-lg grid place-items-center" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}><Icon.whatsapp width="16" height="16"/></span>
                  <div>
                    <div className="text-[11px] text-muted uppercase tracking-widest">WhatsApp</div>
                    <a className="hover:text-accent transition" href={waLink()} target="_blank" rel="noreferrer">55 1112 5961</a>
                  </div>
                </li>
                <li className="flex items-center gap-3">
                  <span className="w-9 h-9 rounded-lg grid place-items-center" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}><Icon.globe width="16" height="16"/></span>
                  <div>
                    <div className="text-[11px] text-muted uppercase tracking-widest">Ubicación</div>
                    <span>CDMX · 100% remoto</span>
                  </div>
                </li>
              </ul>

              <a href={waLink('Hola Cristian, quiero platicar de un proyecto.')} target="_blank" rel="noreferrer" className="btn-primary w-full justify-center mt-8">
                <Icon.whatsapp width="16" height="16"/> Abrir WhatsApp <Icon.arrow width="16" height="16"/>
              </a>
            </div>
          </div>

          {/* Right form */}
          <div className="lg:col-span-7">
            <div className="card !p-8">
              {sent ? (
                <div className="py-10 text-center anim-fadeUp">
                  <div className="w-14 h-14 rounded-full grid place-items-center mx-auto" style={{ background: 'var(--accent-soft)', color: 'var(--accent)' }}>
                    <Icon.check width="22" height="22"/>
                  </div>
                  <h3 className="mt-5 text-2xl font-bold tracking-tight">Mensaje recibido, {form.name.split(' ')[0]}.</h3>
                  <p className="mt-2 text-muted">Te respondo en menos de 24 horas. Mientras tanto, puedes seguir conversando por WhatsApp.</p>
                  <div className="mt-6 flex gap-2 justify-center flex-wrap">
                    <a href={waLink(`Hola Cristian, soy ${form.name}. ${form.msg}`)} target="_blank" rel="noreferrer" className="btn-primary"><Icon.whatsapp width="14" height="14"/> Continuar por WhatsApp</a>
                    <button onClick={() => { setSent(false); setForm({ name:'',email:'',msg:'',service:'Landing Page' }); }} className="btn-secondary">Enviar otro</button>
                  </div>
                </div>
              ) : (
                <form onSubmit={submit} className="space-y-5">
                  <div className="label text-muted">Formulario de contacto</div>
                  <div className="grid sm:grid-cols-2 gap-4">
                    <Field label="Nombre" error={errors.name}>
                      <input className="input" placeholder="Tu nombre completo" value={form.name} onChange={set('name')}/>
                    </Field>
                    <Field label="Email" error={errors.email}>
                      <input className="input" type="email" placeholder="tu@correo.com" value={form.email} onChange={set('email')}/>
                    </Field>
                  </div>
                  <Field label="Servicio de interés">
                    <select className="select" value={form.service} onChange={set('service')}>
                      <option>Landing Page</option>
                      <option>Automatización</option>
                      <option>Correo profesional</option>
                      <option>No sé aún</option>
                    </select>
                  </Field>
                  <Field label="¿Cuál es tu proyecto?" error={errors.msg}>
                    <textarea className="textarea" rows="5" placeholder="Cuéntame qué estás imaginando…" value={form.msg} onChange={set('msg')}/>
                  </Field>
                  <div className="flex flex-col sm:flex-row items-center justify-between gap-3 pt-2">
                    <div className="text-xs text-muted">Respondo en menos de 24 horas</div>
                    <button type="submit" className="btn-primary">Enviar mensaje <Icon.arrow width="14" height="14"/></button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </Section>
    </main>
  );
}

function Field({ label, error, children }) {
  return (
    <label className="block">
      <span className="label text-muted block mb-2">{label}</span>
      {children}
      {error && <span className="block mt-1.5 text-xs text-red-300">{error}</span>}
    </label>
  );
}

// ───────────────────────────── NOT FOUND ─────────────────────────────
function NotFound() {
  return (
    <main className="pt-[68px] min-h-[70vh] grid place-items-center">
      <div className="text-center">
        <div className="font-mono text-muted text-[11px] uppercase tracking-widest">Error 404</div>
        <h1 className="text-4xl md:text-5xl font-bold tracking-tight mt-3">Esta página aún no existe.</h1>
        <Link to="/" className="btn-primary mt-7 inline-flex">Volver al inicio <Icon.arrow width="14" height="14"/></Link>
      </div>
    </main>
  );
}

Object.assign(window, {
  HomePage, ServiciosPage, AutomatizacionesPage, PreciosPage,
  PortafolioPage, ProcesoPage, ContactoPage, NotFound,
});