// Café La Julia — data reales desde WordPress export (2026-04-22)

const PRODUCTS = [
  {
    id: 'chiapas-1kg', slug: 'cafe-de-chiapas-1-kg',
    name: 'Café de Chiapas', size: '1 Kg', origin: 'Chiapas · Concordia', originTag: 'chiapas',
    price: 590, priceOld: null, unit: '1 Kg', sku: 'cafe-1-kg-6', stock: 13,
    finca: 'Finca Nuevo México', altura: '1,300 msnm', variedad: 'Bourbon Rosado', proceso: 'Semi-Lavado',
    notas: ['chocolate', 'ralladura de naranja', 'panela', 'caramelo'],
    perfil: 'Acidez brillante y cítrica · Dulzor medio-alto · Cuerpo medio',
    desc: 'Nuestro café de Chiapas proviene de Concordia, una región reconocida por su riqueza natural y condiciones ideales para la producción de café de especialidad. Cultivado a 1,300 msnm en la Finca Nuevo México, este café refleja el trabajo cuidadoso del productor y un proceso bien controlado que resalta sus mejores cualidades.',
    img: '../../assets/products/chiapas-1kg.png',
    badges: ['100% Chiapas', 'Tueste fresco', 'Proceso Semi-Lavado', 'Envío a todo México'],
    highlight: 'Perfil dulce y balanceado',
    featured: true
  },
  {
    id: 'chiapas-500', slug: 'cafe-de-chiapas-500-g',
    name: 'Café de Chiapas', size: '500 g', origin: 'Chiapas · Concordia', originTag: 'chiapas',
    price: 355, priceOld: null, unit: '500 g', sku: 'cafe-1-kg-7', stock: 13,
    finca: 'Finca Nuevo México', altura: '1,300 msnm', variedad: 'Bourbon Rosado', proceso: 'Semi-Lavado',
    notas: ['chocolate', 'ralladura de naranja', 'panela', 'caramelo'],
    perfil: 'Acidez brillante y cítrica · Dulzor medio-alto · Cuerpo medio',
    desc: 'Café de Chiapas cultivado a 1,300 msnm en Finca Nuevo México. Perfil complejo y aromático, ideal para métodos de goteo.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/20-1.png',
    badges: ['100% Chiapas', 'Tueste fresco', 'Proceso Semi-Lavado', 'Envío a todo México']
  },
  {
    id: 'chiapas-250', slug: 'cafe-de-chiapas-250-g',
    name: 'Café de Chiapas', size: '250 g', origin: 'Chiapas · Concordia', originTag: 'chiapas',
    price: 205, priceOld: null, unit: '250 g', sku: 'cafe-1-kg-8', stock: 13,
    finca: 'Finca Nuevo México', altura: '1,300 msnm', variedad: 'Bourbon Rosado', proceso: 'Semi-Lavado',
    notas: ['chocolate', 'ralladura de naranja', 'panela', 'caramelo'],
    perfil: 'Acidez brillante y cítrica · Dulzor medio-alto',
    desc: 'El origen de la sierra chiapaneca para probar en casa.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/21-1.png',
    badges: ['100% Chiapas', 'Tueste fresco', 'Proceso Semi-Lavado', 'Envío a todo México']
  },
  {
    id: 'puebla-500', slug: 'cafe-de-puebla-500-g',
    name: 'Café de Puebla', size: '500 g', origin: 'Puebla · Tlacuilotepec', originTag: 'puebla',
    price: 360, priceOld: null, unit: '500 g', sku: 'cafe-1-kg-12', stock: 13,
    finca: 'Finca Ofelia', altura: '1,400 msnm', variedad: 'Catimor', proceso: 'Lavado',
    notas: ['avellana', 'durazno', 'miel', 'caramelo'],
    perfil: 'Acidez balanceada · Dulzor medio-alto · Notas florales',
    desc: 'Nuestro café de Puebla proviene de Tlacuilotepec. Cultivado a 1,400 msnm en la Finca Ofelia, refleja un equilibrio perfecto entre dulzor, aroma y suavidad en taza.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/31.png',
    badges: ['100% Puebla', 'Tueste fresco', 'Proceso Lavado', 'Envío a todo México'],
    highlight: 'Notas florales',
    featured: true
  },
  {
    id: 'veracruz-1kg', slug: 'cafe-1-kg',
    name: 'Café de Veracruz', size: '1 Kg', origin: 'Veracruz · Córdoba', originTag: 'veracruz',
    price: 470, priceOld: 490, unit: '1 Kg', sku: 'cafe-1-kg', stock: 13,
    finca: 'Region Córdoba', altura: '1,200 – 1,400 msnm', variedad: 'Sarchimor', proceso: 'Lavado',
    notas: ['chocolate', 'nuez', 'cacao suave'],
    perfil: 'Balanceado · Cuerpo medio · Aromático',
    desc: 'Nuestro café de Veracruz proviene de la región montañosa de Córdoba, donde el clima húmedo y la altura crean condiciones ideales para el cultivo de café arábica de alta calidad. Perfecto para quienes buscan un café equilibrado para el día a día.',
    img: 'https://cafelajulia.com/wp-content/uploads/2023/09/11-3.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Lavado', 'Envío a todo México'],
    sale: true, badge: 'Oferta', highlight: 'Favorito del barista', featured: true
  },
  {
    id: 'veracruz-500', slug: 'cafe-de-veracruz-500-g',
    name: 'Café de Veracruz', size: '500 g', origin: 'Veracruz · Córdoba', originTag: 'veracruz',
    price: 340, priceOld: null, unit: '500 g', sku: 'cafe-1-kg-4', stock: 13,
    finca: 'Region Córdoba', altura: '1,200 – 1,400 msnm', variedad: 'Sarchimor', proceso: 'Lavado',
    notas: ['chocolate', 'nuez', 'cacao suave'],
    perfil: 'Balanceado · Cuerpo medio · Aromático',
    desc: 'Nuestro clásico de Córdoba para el día a día.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/13.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Lavado', 'Envío a todo México']
  },
  {
    id: 'veracruz-250', slug: 'cafe-de-veracruz-250-g',
    name: 'Café de Veracruz', size: '250 g', origin: 'Veracruz · Córdoba', originTag: 'veracruz',
    price: 205, priceOld: null, unit: '250 g', sku: 'cafe-1-kg-5', stock: 13,
    finca: 'Region Córdoba', altura: '1,200 – 1,400 msnm', variedad: 'Sarchimor', proceso: 'Lavado',
    notas: ['chocolate', 'nuez', 'cacao suave'],
    perfil: 'Balanceado · Cuerpo medio',
    desc: 'Prueba la dulzura del café de Córdoba en tamaño chico.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/16-1.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Lavado', 'Envío a todo México']
  },
  {
    id: 'robusta-1kg', slug: 'cafe-de-veracruz-robusta-1-kg',
    name: 'Café de Veracruz Robusta', size: '1 Kg', origin: 'Veracruz · Córdoba', originTag: 'robusta',
    price: 430, priceOld: null, unit: '1 Kg', sku: 'cafe-1-kg-9', stock: 13,
    finca: 'Region Córdoba', altura: 'Baja a media altitud', variedad: 'Robusta', proceso: 'Natural',
    notas: ['cacao intenso', 'madera', 'tierra húmeda', 'chocolate oscuro'],
    perfil: 'Alto cuerpo · Baja acidez · Taza fuerte',
    desc: 'Café Robusta de Córdoba, cultivado en zonas de baja a media altitud. Destaca por su fuerza, cuerpo y personalidad en taza. Ideal para espresso de cafetería.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/23-2.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Natural', 'Envío a todo México']
  },
  {
    id: 'robusta-500', slug: 'cafe-de-veracruz-robusta-500-g',
    name: 'Café de Veracruz Robusta', size: '500 g', origin: 'Veracruz · Córdoba', originTag: 'robusta',
    price: 315, priceOld: null, unit: '500 g', sku: 'cafe-1-kg-10', stock: 13,
    finca: 'Region Córdoba', altura: 'Baja a media altitud', variedad: 'Robusta', proceso: 'Natural',
    notas: ['cacao intenso', 'madera', 'tierra húmeda', 'chocolate oscuro'],
    perfil: 'Alto cuerpo · Baja acidez · Taza fuerte',
    desc: 'Intensidad y crema para espresso en casa.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/27.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Natural', 'Envío a todo México']
  },
  {
    id: 'robusta-250', slug: 'cafe-de-veracruz-robusta-250-g',
    name: 'Café de Veracruz Robusta', size: '250 g', origin: 'Veracruz · Córdoba', originTag: 'robusta',
    price: 200, priceOld: null, unit: '250 g', sku: 'cafe-1-kg-11', stock: 13,
    finca: 'Region Córdoba', altura: 'Baja a media altitud', variedad: 'Robusta', proceso: 'Natural',
    notas: ['cacao intenso', 'madera', 'chocolate oscuro'],
    perfil: 'Alto cuerpo · Baja acidez',
    desc: 'Cuerpo y crema — la dosis justa para probar el Robusta.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/29.png',
    badges: ['100% Veracruz', 'Tueste fresco', 'Proceso Natural', 'Envío a todo México']
  },
  {
    id: 'taza-clasica', slug: 'la-julia-clasica-12-oz',
    name: 'Taza La Julia Clásica', size: '12 oz', origin: 'Accesorio · Cerámica', originTag: 'accesorio',
    price: 110, priceOld: null, unit: '12 oz', sku: 'taza-12-oz', stock: 13,
    desc: 'Taza oficial de Café La Julia en cerámica de alta calidad. Capacidad de 12 oz (355 ml), ideal para americano, cappuccino o latte. Diseño ergonómico con el logotipo distintivo.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/33.png',
    badges: ['Cerámica premium', 'Apta microondas', 'Apta lavavajillas']
  },
  {
    id: 'taza-barista', slug: 'la-julia-clasica-12-oz-copia',
    name: 'Taza La Julia Barista', size: '16 oz', origin: 'Accesorio · Cerámica', originTag: 'accesorio',
    price: 140, priceOld: null, unit: '16 oz', sku: 'taza-12-oz-1', stock: 13,
    desc: 'Mayor capacidad (473 ml) para latte, cappuccino y amantes del café. Cerámica de alta calidad con el sello distintivo de La Julia.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/36.png',
    badges: ['Cerámica premium', 'Para latte & cappuccino', 'Apta lavavajillas']
  },
  {
    id: 'taza-intensa', slug: 'la-julia-intensa-26-oz',
    name: 'Taza La Julia Intensa', size: '26 oz', origin: 'Accesorio · Cerámica', originTag: 'accesorio',
    price: 250, priceOld: null, unit: '26 oz', sku: 'taza-12-oz-2', stock: 13,
    desc: 'Taza de gran capacidad (769 ml) para amantes del café sin límites. Ideal para oficina o jornadas largas. Cerámica de alta resistencia.',
    img: 'https://cafelajulia.com/wp-content/uploads/2026/03/35.png',
    badges: ['26 oz (769 ml)', 'Cerámica alta resistencia', 'Para oficina y jornadas largas']
  }
];

// 3 posts reales del export WP
const BLOG_POSTS = [
  {
    slug: 'como-elegir-cafe-en-grano-segun-metodo-preparacion',
    title: 'Cómo elegir café en grano según tu método de preparación',
    excerpt: 'Si estás buscando el café ideal para preparar en casa, la elección del grano correcto puede transformar completamente tu experiencia.',
    date: '21 Abr 2026', read: '8 min', tag: 'Guía de método',
    cover: 'https://cafelajulia.com/wp-content/uploads/2026/03/20-1.png',
    body: [
      { type: 'p', text: 'En México contamos con una riqueza cafetalera extraordinaria, y saber elegir café en grano según tu método de preparación es el primer paso para disfrutar una taza perfecta.' },
      { type: 'h2', text: '¿Por qué importa el método de preparación?' },
      { type: 'p', text: 'Cada método extrae el café de manera diferente: temperatura del agua, tiempo de contacto y presión determinan qué sabores se liberan del grano. Usar el café equivocado puede dar una taza amarga, aguada o sin carácter.' },
      { type: 'h2', text: 'Para Espresso' },
      { type: 'p', text: 'Elige café robusto y con cuerpo. Nuestro Robusta de Córdoba da crema densa y sabor intenso. Molienda fina, tueste medio-oscuro.' },
      { type: 'h2', text: 'Para V60, Chemex o Goteo' },
      { type: 'p', text: 'Opta por cafés con acidez brillante y notas complejas. El Chiapas de Concordia (Bourbon Rosado) destaca con sus notas cítricas y de panela. Molienda media.' },
      { type: 'h2', text: 'Para Prensa Francesa' },
      { type: 'p', text: 'Cuerpo redondo y dulzor. El Veracruz de Córdoba (Sarchimor) funciona excelente con sus notas de chocolate y nuez. Molienda gruesa.' }
    ]
  },
  {
    slug: 'diferencias-cafe-chiapas-veracruz-puebla',
    title: 'Diferencias entre café de Chiapas, Veracruz y Puebla',
    excerpt: 'México es uno de los países productores de café más importantes del mundo, y su diversidad geográfica se traduce en perfiles de sabor únicos.',
    date: '21 Abr 2026', read: '6 min', tag: 'Orígenes',
    cover: 'https://cafelajulia.com/wp-content/uploads/2026/03/31.png',
    body: [
      { type: 'p', text: 'Hoy te explicamos las diferencias entre los tres orígenes que trabajamos en Café La Julia: Chiapas, Veracruz y Puebla.' },
      { type: 'h2', text: 'Café de Chiapas: Complejidad y acidez brillante' },
      { type: 'p', text: 'Chiapas es la región cafetalera más grande de México, ubicada en las laderas de la Sierra Madre, entre 1,200 y 1,800 msnm. Nuestro lote de Concordia destaca por notas de chocolate, ralladura de naranja, panela y caramelo.' },
      { type: 'h2', text: 'Café de Veracruz: Equilibrio y cuerpo' },
      { type: 'p', text: 'Veracruz fue la primera región en cultivar café en México. Córdoba produce cafés balanceados con notas de chocolate, nuez y cacao — ideales para el día a día.' },
      { type: 'h2', text: 'Café de Puebla: Suavidad y dulzor' },
      { type: 'p', text: 'Tlacuilotepec, a 1,400 msnm, produce un café con notas florales de avellana, durazno y miel. Es el más suave y aromático de nuestra línea.' }
    ]
  },
  {
    slug: 'hot-sale-cafe-arabigo',
    title: 'El impacto del cambio climático en el precio del café',
    excerpt: 'Si eres amante del buen café, es importante conocer por qué ha subido de precio y cómo los factores ambientales están afectando su producción.',
    date: '15 May 2024', read: '7 min', tag: 'Mercado',
    cover: 'https://cafelajulia.com/wp-content/uploads/2026/03/23-2.png',
    body: [
      { type: 'p', text: 'El café es una de las bebidas más consumidas en el mundo, pero en los últimos meses, su precio ha alcanzado niveles históricos.' },
      { type: 'h2', text: '¿Por qué ha subido el precio del café?' },
      { type: 'p', text: 'Sequías en Brasil, heladas atípicas en países productores, logística internacional y especulación en los mercados de futuros han llevado al café arábiga a máximos no vistos en años.' },
      { type: 'h2', text: 'El impacto del cambio climático' },
      { type: 'p', text: 'Temperaturas más altas y lluvias irregulares afectan directamente la producción de café de especialidad. Los productores mexicanos enfrentan nuevos retos para mantener la calidad.' },
      { type: 'h2', text: '¿Qué hacemos en Café La Julia?' },
      { type: 'p', text: 'Trabajamos directamente con productores en Chiapas, Veracruz y Puebla para asegurar precio justo y consistencia, absorbiendo variaciones del mercado para ofrecerte café fresco al mejor precio.' }
    ]
  }
];

const CATEGORIES = [
  { id: 'todos',     label: 'Todos' },
  { id: 'chiapas',   label: 'Chiapas' },
  { id: 'veracruz',  label: 'Veracruz' },
  { id: 'puebla',    label: 'Puebla' },
  { id: 'robusta',   label: 'Robusta' },
  { id: 'accesorio', label: 'Tazas' }
];

const MOLIENDAS = [
  { id: 'grano',    label: 'Grano entero',       hint: 'Para moler en casa' },
  { id: 'espresso', label: 'Molido espresso',    hint: 'Fino · máquina o Moka' },
  { id: 'goteo',    label: 'Molido goteo / drip', hint: 'Medio · cafetera eléctrica' },
  { id: 'prensa',   label: 'Molido prensa francesa', hint: 'Grueso · inmersión' },
  { id: 'chemex',   label: 'Molido Chemex / V60', hint: 'Medio-grueso · filtro de papel' }
];

// Reseñas escritas de Google
const TESTIMONIOS = [
  { name: 'Samuel Kury', role: 'Google · 5★', text: 'Café La Julia es un verdadero tesoro para cualquier amante del café. Desde el momento en que entras, te envuelve un ambiente acogedor y tranquilo, con detalles que te hacen sentir en un rinconcito de Veracruz.', source: 'Google Reviews' },
  { name: 'David Nobigrot', role: 'Google · 5★', text: 'Café La Julia de Veracruz es delicioso, te lo mandan en una linda caja y el café huele hasta antes de abrirla. Su sabor es riquísimo y la atención espectacular.', source: 'Google Reviews' }
];

// Testimoniales en video — YouTube shorts/clips conocidos en redes
const VIDEO_TESTIMONIOS = [
  {
    name: 'Isaac Reyes',
    handle: '@isaacmkt',
    role: 'Especialista en marketing digital',
    quote: 'El mejor café de Las Choapas, sin duda. Tres orígenes en la mesa y cada uno con su carácter.',
    videoId: 'fr5g6KTS48g',
    thumb: 'https://i.ytimg.com/vi/fr5g6KTS48g/hqdefault.jpg',
    bg: '#c8a878'
  },
  {
    name: 'Paco "el de las empanadas"',
    handle: '@pacodelasempanadas',
    role: 'Referente de ventas en México',
    quote: 'Gracias amigo Francisco Ramírez por este café mexicano con nombre y apellido.',
    videoId: 'LxQFBEor4J8',
    thumb: 'https://i.ytimg.com/vi/LxQFBEor4J8/hqdefault.jpg',
    bg: '#6b4b3a'
  }
];

// Paquetes de suscripción — 389 / 689 / 889
const SUSCRIPCIONES = [
  {
    id: 'iniciacion',
    name: 'Iniciación',
    price: 389,
    qty: '500 g · mensual',
    desc: 'Entra al mundo del café de especialidad. Rotamos origen cada mes para que pruebes lo mejor de México.',
    perks: [
      '500 g de café de especialidad',
      'Origen rotativo (Chiapas, Veracruz, Puebla)',
      'Molienda a tu gusto',
      'Envío gratis a toda la república',
      '10% en tu primera compra de accesorios'
    ]
  },
  {
    id: 'estandar',
    name: 'Estándar',
    price: 689,
    qty: '1 kg · mensual',
    desc: 'El favorito. Café para toda la familia, todos los días, tostado hace menos de 7 días.',
    perks: [
      '1 kg del origen que elijas',
      'Cambia de perfil cuando quieras',
      'Acceso a microlotes exclusivos',
      'Envío gratis + empaque regalo',
      '15% en toda la tienda online',
      'Comunidad privada La Julia (Telegram)'
    ],
    featured: true
  },
  {
    id: 'premium',
    name: 'Premium',
    price: 889,
    qty: '1.5 kg · mensual',
    desc: 'Para exploradores. Dos perfiles distintos cada mes + beneficios de socio fundador.',
    perks: [
      '500 g tueste medio + 500 g oscuro + 500 g microlote del mes',
      'Acceso anticipado a nuevas cosechas',
      'Cata virtual mensual con el tostador',
      'Regalo sorpresa trimestral (taza, merch, libro)',
      '20% en toda la tienda + accesorios',
      'Envío exprés incluido',
      'Miembro fundador: atención directa por WhatsApp'
    ]
  }
];

// Beneficios de la comunidad (club / suscriptores)
const CLUB_BENEFICIOS = [
  { t: 'Descuentos de socio', d: 'Hasta 20% off en toda la tienda para suscriptores activos.' },
  { t: 'Comunidad privada', d: 'Canal de Telegram para catas, recetas y lanzamientos anticipados.' },
  { t: 'Microlotes exclusivos', d: 'Acceso antes que nadie a cosechas limitadas de nuestros productores.' },
  { t: 'Catas virtuales', d: 'Una vez al mes con el tostador, método y maridaje en vivo.' },
  { t: 'Envío gratis siempre', d: 'Sin mínimos ni letras chiquitas. A toda la república mexicana.' },
  { t: 'Regalos sorpresa', d: 'Taza, libro, merch — cada trimestre algo nuevo para los miembros.' }
];

const FAQS = [
  { q: '¿Cuánto tarda el envío?', a: 'Los pedidos se procesan en 1–2 días hábiles. Tiempos de entrega: CDMX y área metropolitana 2–3 días hábiles; ciudades principales (Guadalajara, Monterrey, Puebla) 3–5 días; resto del país 5–7 días. Recibirás un número de rastreo por correo cuando se despache tu pedido.' },
  { q: '¿Puedo elegir el grado de molido?', a: '¡Sí! Al agregar un café al carrito, puedes seleccionar: Grano entero, Molido para espresso (fino), Molido para goteo/drip (medio), Molido para prensa francesa (grueso) o Molido para Chemex/V60 (medio-grueso).' },
  { q: '¿Los granos vienen recién tostados?', a: 'Sí. Tostamos cada semana — nunca tenemos inventario viejo. Cuando recibes tu pedido, el café tiene como máximo 7–10 días desde la fecha de tueste. Cada bolsa incluye la fecha de tueste impresa. Recomendamos consumir dentro de las 3–4 semanas siguientes.' },
  { q: '¿Tienen programa de mayoreo para empresas?', a: 'Sí, contamos con un Programa B2B para cafeterías, restaurantes, hoteles y oficinas: precios especiales desde 5 kg/mes, muestra gratuita antes del primer pedido, facturación con RFC, crédito disponible, capacitación de barista en pedidos mayores, asesoría en selección de origen y molienda.' },
  { q: '¿Cómo funciona el Club Café La Julia?', a: 'Es nuestro programa de fidelidad gratuito. Acumulas 1 punto por cada $10 MXN de compra. 200 puntos = $50 MXN de descuento. En tu cumpleaños ganas el doble. Los miembros tienen acceso anticipado a nuevos orígenes y reciben 10% de descuento en la primera compra al registrarse.' },
  { q: '¿Puedo devolver o cambiar mi pedido?', a: 'Aceptamos devoluciones o cambios dentro de los 7 días naturales siguientes a la recepción, siempre que el producto esté en perfecto estado y sin abrir. Si el café llegó dañado o hay un error en tu pedido, lo resolvemos sin costo. Escríbenos a ventas@cafelajulia.com con tu número de pedido.' }
];

const CONTACT = {
  phone: '9231171040',
  phoneDisplay: '923-117-1040',
  whatsapp: '+52 923 117 1040',
  whatsappDigits: '529231171040',
  email: 'ventas@cafelajulia.com',
  address: 'Blvd. Antonio M. Quirazco 2146',
  city: 'Las Choapas, Veracruz 96980',
  appUrl: 'https://cafe-la-julia-fidelizacion.web.app'
};

// Lucide-style inline SVGs
const Icon = ({ name, size = 20, className = '', style = {} }) => {
  const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true, className, style };
  const paths = {
    home:   <><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9,22 9,12 15,12 15,22"/></>,
    clock:  <><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></>,
    check:  <><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22,4 12,14.01 9,11.01"/></>,
    truck:  <><rect x="1" y="3" width="15" height="13"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></>,
    bag:    <><path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 01-8 0"/></>,
    search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    user:   <><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></>,
    ig:     <><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/></>,
    fb:     <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>,
    yt:     <><path d="M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 0 0-1.95 1.96A29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58A2.78 2.78 0 0 0 3.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.95A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z"/><polygon points="9.75,15.02 15.5,12 9.75,8.98 9.75,15.02"/></>,
    tiktok: <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V9.17a8.19 8.19 0 0 0 4.79 1.53V7.26a4.85 4.85 0 0 1-1.03-.57z" fill="currentColor" stroke="none"/>,
    wa:     <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.966-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0 0 20.465 3.488" fill="currentColor" stroke="none"/>,
    arrow:  <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowl: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></>,
    close:  <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    plus:   <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    minus:  <line x1="5" y1="12" x2="19" y2="12"/>,
    play:   <polygon points="5 3 19 12 5 21 5 3" fill="currentColor" stroke="none"/>,
    coffee: <><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></>,
    chat:   <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
    sparkle:<><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    send:   <><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2" fill="currentColor" stroke="none" opacity=".15"/></>,
    card:   <><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></>,
    lock:   <><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></>,
    mapPin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
    phone:  <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>,
    mail:   <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    star:   <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" fill="currentColor" stroke="none"/>,
    gift:   <><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"/></>,
    leaf:   <><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.3c1 3.2.7 7.7-.3 10.5-1.4 3.9-5.9 7-7.9 7.2"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></>,
    flame:  <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>,
    scale:  <><rect x="3" y="8" width="18" height="13" rx="2"/><path d="M7 8V5a5 5 0 0 1 10 0v3"/></>,
    box:    <><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></>,
    heart:  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>,
    cup:    <><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/></>,
    menu:   <><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></>,
    shield: <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>,
    zap:    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" fill="currentColor" stroke="none"/>,
    chevron:<polyline points="6 9 12 15 18 9"/>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

Object.assign(window, { PRODUCTS, BLOG_POSTS, CATEGORIES, MOLIENDAS, TESTIMONIOS, VIDEO_TESTIMONIOS, SUSCRIPCIONES, CLUB_BENEFICIOS, FAQS, CONTACT, Icon });
// Café La Julia — Carrito, Checkout, Suscripción, Cafeterías, FAQ

// CARRITO ───────────────────────────────────────────────────────────────
const Carrito = ({ items, onNav, onQty, onAdd, products }) => {
  const subtotal = items.reduce((s,i)=>s+i.price*i.qty,0);
  const ship = subtotal >= 500 || subtotal === 0 ? 0 : 99;
  const total = subtotal + ship;
  const remaining = Math.max(0, 500 - subtotal);
  const recs = (products||[]).filter(p => !items.some(i=>i.id===p.id)).slice(0,3);

  if (items.length === 0) {
    return (
      <section className="section" style={{paddingTop:100}}>
        <div className="section-inner" style={{textAlign:'center',maxWidth:560}}>
          <Icon name="bag" size={56} style={{color:'var(--jy-mid)',margin:'0 auto 24px'}}/>
          <h1 style={{fontFamily:'var(--font-display)',fontSize:44,fontWeight:900,color:'var(--jy-black)',marginBottom:14}}>Tu carrito está <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>vacío</em></h1>
          <p style={{color:'var(--jy-mid)',fontSize:15.5,marginBottom:28,fontWeight:300}}>Descubre los cafés tostados esta semana y empieza tu ritual matutino.</p>
          <a className="btn btn-d" href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Explorar cafés</a>
        </div>
      </section>
    );
  }

  return (
    <section className="section" style={{paddingTop:100}}>
      <div className="section-inner">
        <nav className="crumbs"><a href="#" onClick={e=>{e.preventDefault();onNav('home')}}>Inicio</a> <span>·</span> <span className="crumbs-cur">Carrito</span></nav>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:900,marginBottom:10,color:'var(--jy-black)'}}>Tu <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>carrito</em></h1>
        <p style={{color:'var(--jy-mid)',marginBottom:36,fontWeight:300}}>{items.length} producto{items.length!==1?'s':''} · {items.reduce((s,i)=>s+i.qty,0)} unidad{items.reduce((s,i)=>s+i.qty,0)!==1?'es':''}</p>

        {remaining > 0 && (
          <div className="cart-ship-progress">
            <div className="cart-ship-text">
              <Icon name="truck" size={18}/>
              Agrega <strong>${remaining} MXN</strong> más para envío gratis
            </div>
            <div className="cart-ship-bar"><div style={{width:`${Math.min(100, subtotal/500*100)}%`}}/></div>
          </div>
        )}
        {remaining === 0 && (
          <div className="cart-ship-progress ok">
            <Icon name="check" size={18}/>
            <strong>Envío gratis</strong> desbloqueado
          </div>
        )}

        <div className="cart-layout">
          <div className="cart-items">
            <div className="cart-head-row">
              <span>Producto</span><span>Cantidad</span><span>Subtotal</span>
            </div>
            {items.map(i=>(
              <div className="cart-row" key={i.id}>
                <div className="cart-row-prod">
                  <div className="cart-row-img"><img src={i.img} alt={i.name} onError={e=>e.target.style.display='none'}/></div>
                  <div>
                    <div className="cart-row-name">{i.name}</div>
                    <div className="cart-row-meta">{i.origin} · {i.unit}</div>
                    <div className="cart-row-price">${i.price} MXN</div>
                    <button className="cart-row-remove" onClick={()=>onQty(i.id, 0)}>Eliminar</button>
                  </div>
                </div>
                <div className="cart-row-qty">
                  <div className="qty">
                    <button onClick={()=>onQty(i.id, i.qty-1)}><Icon name="minus" size={14}/></button>
                    <input value={i.qty} readOnly/>
                    <button onClick={()=>onQty(i.id, i.qty+1)}><Icon name="plus" size={14}/></button>
                  </div>
                </div>
                <div className="cart-row-total">${i.price*i.qty}</div>
              </div>
            ))}
          </div>

          <aside className="cart-summary">
            <h3>Resumen del pedido</h3>
            <div className="cart-sum-line"><span>Subtotal</span><span>${subtotal} MXN</span></div>
            <div className="cart-sum-line"><span>Envío</span><span>{ship===0?'Gratis':`$${ship} MXN`}</span></div>
            <div className="cart-sum-line total"><span>Total</span><span>${total} MXN</span></div>

            <div className="cart-coupon">
              <input placeholder="Código de cupón"/>
              <button className="btn btn-o" style={{fontSize:11}}>Aplicar</button>
            </div>

            <a href="#checkout" className="btn btn-d" style={{width:'100%',marginTop:16}} onClick={(e)=>{e.preventDefault();onNav('checkout')}}>
              Finalizar compra <Icon name="arrow" size={16} style={{marginLeft:6,verticalAlign:'-2px'}}/>
            </a>
            <a href="#" className="cart-continue" onClick={e=>{e.preventDefault();onNav('tienda')}}>← Seguir comprando</a>

            <div className="cart-trust">
              <div><Icon name="lock" size={14}/> Pago 100% seguro</div>
              <div><Icon name="shield" size={14}/> Garantía de frescura</div>
              <div><Icon name="truck" size={14}/> Envío a todo México</div>
            </div>
          </aside>
        </div>

        {recs.length > 0 && (
          <div style={{marginTop:80}}>
            <h2 className="section-title" style={{textAlign:'center',marginBottom:32}}>Completa tu <em>pedido</em></h2>
            <div className="grid-3">
              {recs.map(p=>(
                <article className="product-card" key={p.id} onClick={()=>onAdd(p)}>
                  <div className="product-img"><img src={p.img} alt={p.name} onError={e=>e.target.style.display='none'}/></div>
                  <div className="product-body">
                    <p className="product-origin">{p.origin}</p>
                    <h3 className="product-name">{p.name} — {p.size}</h3>
                    <div className="product-foot">
                      <div className="product-price">${p.price} <small>MXN</small></div>
                      <button className="btn btn-d btn-sm" onClick={e=>{e.stopPropagation();onAdd(p);}}>Añadir</button>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

// CHECKOUT ─────────────────────────────────────────────────────────────
const Checkout = ({ items, onNav, onComplete }) => {
  const [step, setStep] = React.useState(1);
  const [form, setForm] = React.useState({
    email:'', nombre:'', apellido:'', tel:'',
    calle:'', num:'', col:'', ciudad:'', estado:'', cp:'',
    envio:'estandar',
    pago:'tarjeta', card:'', exp:'', cvc:'', cardName:''
  });
  const f = (k,v) => setForm({...form,[k]:v});
  const subtotal = items.reduce((s,i)=>s+i.price*i.qty,0);
  const shipCost = form.envio==='express'?199:(subtotal>=500?0:99);
  const total = subtotal + shipCost;

  if (items.length === 0) {
    return (
      <section className="section" style={{paddingTop:100,textAlign:'center'}}>
        <div className="section-inner" style={{maxWidth:480}}>
          <h1 style={{fontFamily:'var(--font-display)',fontSize:36,fontWeight:900,marginBottom:14}}>No hay productos en tu carrito</h1>
          <a className="btn btn-d" href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Ir a la tienda</a>
        </div>
      </section>
    );
  }

  const next = () => setStep(Math.min(3, step+1));
  const prev = () => setStep(Math.max(1, step-1));

  return (
    <section className="section" style={{paddingTop:100,background:'var(--jy-cream)'}}>
      <div className="section-inner">
        <nav className="crumbs">
          <a href="#" onClick={e=>{e.preventDefault();onNav('carrito')}}>← Volver al carrito</a>
        </nav>
        <div style={{textAlign:'center',marginBottom:40}}>
          <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2rem,4vw,3rem)',fontWeight:900,color:'var(--jy-black)'}}>Finalizar <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>compra</em></h1>
        </div>

        <div className="checkout-steps">
          {['Envío','Pago','Confirmar'].map((s,i)=>(
            <div key={i} className={`checkout-step ${step===i+1?'active':''} ${step>i+1?'done':''}`}>
              <span className="checkout-step-num">{step>i+1?<Icon name="check" size={14}/>:(i+1)}</span>
              <span>{s}</span>
            </div>
          ))}
        </div>

        <div className="checkout-layout">
          <div className="checkout-main">
            {step===1 && (
              <div className="checkout-card">
                <h3>Información de contacto</h3>
                <div className="field-grid">
                  <div className="field field-light"><label className="field-label">Correo electrónico *</label><input className="field-input" type="email" value={form.email} onChange={e=>f('email',e.target.value)} placeholder="tu@correo.com"/></div>
                  <div className="field field-light"><label className="field-label">Teléfono *</label><input className="field-input" value={form.tel} onChange={e=>f('tel',e.target.value)} placeholder="55 1234 5678"/></div>
                </div>

                <h3 style={{marginTop:32}}>Dirección de envío</h3>
                <div className="field-grid">
                  <div className="field field-light"><label className="field-label">Nombre *</label><input className="field-input" value={form.nombre} onChange={e=>f('nombre',e.target.value)}/></div>
                  <div className="field field-light"><label className="field-label">Apellidos *</label><input className="field-input" value={form.apellido} onChange={e=>f('apellido',e.target.value)}/></div>
                </div>
                <div className="field-grid" style={{gridTemplateColumns:'2fr 1fr'}}>
                  <div className="field field-light"><label className="field-label">Calle *</label><input className="field-input" value={form.calle} onChange={e=>f('calle',e.target.value)}/></div>
                  <div className="field field-light"><label className="field-label">Número *</label><input className="field-input" value={form.num} onChange={e=>f('num',e.target.value)}/></div>
                </div>
                <div className="field-grid">
                  <div className="field field-light"><label className="field-label">Colonia *</label><input className="field-input" value={form.col} onChange={e=>f('col',e.target.value)}/></div>
                  <div className="field field-light"><label className="field-label">Ciudad *</label><input className="field-input" value={form.ciudad} onChange={e=>f('ciudad',e.target.value)}/></div>
                </div>
                <div className="field-grid">
                  <div className="field field-light"><label className="field-label">Estado *</label>
                    <select className="field-input" value={form.estado} onChange={e=>f('estado',e.target.value)}>
                      <option value="">Selecciona</option>
                      {['Aguascalientes','Baja California','CDMX','Chiapas','Chihuahua','Coahuila','Colima','Durango','Guanajuato','Jalisco','Estado de México','Nuevo León','Puebla','Querétaro','Quintana Roo','Veracruz','Yucatán'].map(s=><option key={s}>{s}</option>)}
                    </select>
                  </div>
                  <div className="field field-light"><label className="field-label">Código postal *</label><input className="field-input" value={form.cp} onChange={e=>f('cp',e.target.value)} maxLength="5"/></div>
                </div>

                <h3 style={{marginTop:32}}>Método de envío</h3>
                <div className="ship-options">
                  {[
                    { id:'estandar', n:'Estándar', d:'5–7 días hábiles', p: subtotal>=500?'Gratis':'$99' },
                    { id:'express',  n:'Express',  d:'2–3 días hábiles', p:'$199' }
                  ].map(o=>(
                    <label key={o.id} className={`ship-opt ${form.envio===o.id?'active':''}`}>
                      <input type="radio" name="envio" value={o.id} checked={form.envio===o.id} onChange={()=>f('envio',o.id)} style={{display:'none'}}/>
                      <div className="ship-opt-radio">{form.envio===o.id && <span/>}</div>
                      <div style={{flex:1}}>
                        <div className="ship-opt-name">{o.n}</div>
                        <div className="ship-opt-desc">{o.d}</div>
                      </div>
                      <div className="ship-opt-price">{o.p}</div>
                    </label>
                  ))}
                </div>
              </div>
            )}

            {step===2 && (
              <div className="checkout-card">
                <h3>Método de pago</h3>
                <div className="pay-options">
                  {[
                    { id:'tarjeta', n:'Tarjeta de crédito o débito', icon:'card' },
                    { id:'oxxo',    n:'Pago en OXXO',                icon:'box' },
                    { id:'transfer',n:'Transferencia SPEI',          icon:'check' }
                  ].map(o=>(
                    <label key={o.id} className={`pay-opt ${form.pago===o.id?'active':''}`}>
                      <input type="radio" name="pago" value={o.id} checked={form.pago===o.id} onChange={()=>f('pago',o.id)} style={{display:'none'}}/>
                      <div className="ship-opt-radio">{form.pago===o.id && <span/>}</div>
                      <Icon name={o.icon} size={22}/>
                      <span>{o.n}</span>
                    </label>
                  ))}
                </div>

                {form.pago==='tarjeta' && (
                  <div style={{marginTop:24}}>
                    <div className="field field-light"><label className="field-label">Número de tarjeta *</label><input className="field-input" value={form.card} onChange={e=>f('card',e.target.value)} placeholder="1234 5678 9012 3456"/></div>
                    <div className="field-grid">
                      <div className="field field-light"><label className="field-label">Vencimiento *</label><input className="field-input" value={form.exp} onChange={e=>f('exp',e.target.value)} placeholder="MM/AA"/></div>
                      <div className="field field-light"><label className="field-label">CVC *</label><input className="field-input" value={form.cvc} onChange={e=>f('cvc',e.target.value)} placeholder="123" maxLength="4"/></div>
                    </div>
                    <div className="field field-light"><label className="field-label">Nombre en la tarjeta *</label><input className="field-input" value={form.cardName} onChange={e=>f('cardName',e.target.value)}/></div>
                    <div className="pay-secure"><Icon name="lock" size={14}/> Pago seguro · SSL · PCI DSS</div>
                  </div>
                )}
                {form.pago==='oxxo' && (
                  <div className="pay-note"><Icon name="check" size={16}/> Al confirmar, recibirás una referencia para pagar en cualquier OXXO en las próximas 24 horas.</div>
                )}
                {form.pago==='transfer' && (
                  <div className="pay-note"><Icon name="check" size={16}/> Al confirmar, recibirás los datos bancarios para SPEI. Procesamos en cuanto confirmemos tu pago.</div>
                )}
              </div>
            )}

            {step===3 && (
              <div className="checkout-card">
                <h3>Revisar y confirmar</h3>
                <div className="review-block">
                  <div className="review-head">
                    <span>Envío a</span>
                    <a href="#" onClick={e=>{e.preventDefault();setStep(1)}}>Editar</a>
                  </div>
                  <p>{form.nombre} {form.apellido}<br/>{form.calle} {form.num}, {form.col}<br/>{form.ciudad}, {form.estado} {form.cp}<br/>{form.tel} · {form.email}</p>
                </div>
                <div className="review-block">
                  <div className="review-head">
                    <span>Método de pago</span>
                    <a href="#" onClick={e=>{e.preventDefault();setStep(2)}}>Editar</a>
                  </div>
                  <p>{form.pago==='tarjeta' && `Tarjeta terminada en ${form.card.slice(-4) || '····'}`}{form.pago==='oxxo' && 'Pago en OXXO'}{form.pago==='transfer' && 'Transferencia SPEI'}</p>
                </div>
                <label className="check-line"><input type="checkbox" defaultChecked/> Acepto los términos y condiciones y la política de privacidad.</label>
                <label className="check-line"><input type="checkbox" defaultChecked/> Quiero recibir promociones exclusivas por email.</label>
              </div>
            )}

            <div className="checkout-nav">
              {step>1 && <button className="btn" style={{background:'transparent',color:'var(--jy-black)',border:'1px solid var(--jy-border)'}} onClick={prev}>← Anterior</button>}
              {step<3 && <button className="btn btn-d" style={{marginLeft:'auto'}} onClick={next}>Continuar</button>}
              {step===3 && <button className="btn btn-d" style={{marginLeft:'auto'}} onClick={onComplete}>Realizar pedido · ${total} MXN</button>}
            </div>
          </div>

          <aside className="checkout-summary">
            <h3>Tu pedido</h3>
            <div className="checkout-items">
              {items.map(i=>(
                <div className="checkout-item" key={i.id}>
                  <div className="checkout-item-img">
                    <img src={i.img} alt="" onError={e=>e.target.style.display='none'}/>
                    <span className="checkout-item-qty">{i.qty}</span>
                  </div>
                  <div style={{flex:1}}>
                    <div className="checkout-item-name">{i.name}</div>
                    <div className="checkout-item-meta">{i.unit}</div>
                  </div>
                  <div className="checkout-item-price">${i.price*i.qty}</div>
                </div>
              ))}
            </div>
            <div className="cart-sum-line"><span>Subtotal</span><span>${subtotal} MXN</span></div>
            <div className="cart-sum-line"><span>Envío</span><span>{shipCost===0?'Gratis':`$${shipCost} MXN`}</span></div>
            <div className="cart-sum-line total"><span>Total</span><span>${total} MXN</span></div>
            <div className="checkout-secure">
              <Icon name="lock" size={14}/> Pago 100% seguro
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

// CONFIRMACIÓN ─────────────────────────────────────────────────────────
const OrderConfirm = ({ onNav }) => {
  const orderId = 'LJ-' + Math.floor(100000 + Math.random()*900000);
  return (
    <section className="section" style={{paddingTop:120,textAlign:'center'}}>
      <div className="section-inner" style={{maxWidth:600}}>
        <div style={{width:80,height:80,borderRadius:'50%',background:'var(--jy-yellow)',margin:'0 auto 24px',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--jy-black)'}}>
          <Icon name="check" size={42}/>
        </div>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:42,fontWeight:900,marginBottom:14}}>¡Pedido <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>confirmado!</em></h1>
        <p style={{color:'var(--jy-mid)',fontSize:15.5,marginBottom:8,fontWeight:300}}>Gracias por comprar en Café La Julia.</p>
        <p style={{fontSize:13,letterSpacing:2,textTransform:'uppercase',color:'var(--jy-black)',fontWeight:700,marginBottom:32}}>Número de pedido · {orderId}</p>
        <div style={{background:'var(--jy-cream)',border:'1px solid var(--jy-border)',borderRadius:8,padding:24,marginBottom:32,textAlign:'left'}}>
          <div style={{display:'flex',gap:14,marginBottom:14}}><Icon name="mail" size={20} style={{color:'var(--jy-yellow)'}}/><div><strong>Recibirás un correo</strong> con los detalles de tu pedido.</div></div>
          <div style={{display:'flex',gap:14,marginBottom:14}}><Icon name="flame" size={20} style={{color:'var(--jy-yellow)'}}/><div><strong>Tostamos fresco.</strong> Tu café se tuesta en los próximos 1–2 días hábiles.</div></div>
          <div style={{display:'flex',gap:14}}><Icon name="truck" size={20} style={{color:'var(--jy-yellow)'}}/><div><strong>Envío.</strong> Te enviaremos el número de rastreo cuando despachemos.</div></div>
        </div>
        <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
          <a className="btn btn-d" href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Seguir comprando</a>
          <a className="btn" style={{background:'transparent',color:'var(--jy-black)',border:'1px solid var(--jy-border)'}} href="#" onClick={e=>{e.preventDefault();onNav('home')}}>Volver al inicio</a>
        </div>
      </div>
    </section>
  );
};

// SUSCRIPCIÓN ─────────────────────────────────────────────────────────
const Suscripcion = ({ onNav }) => {
  const [plan, setPlan] = React.useState('estandar');
  const selected = SUSCRIPCIONES.find(s=>s.id===plan);
  const steps = [
    { n:1, t:'Elige tu plan',      d:'Tamaño y frecuencia' },
    { n:2, t:'Perfil de sabor',    d:'Claro, medio u oscuro' },
    { n:3, t:'Recibe en casa',     d:'Cada 30 días, envío gratis' },
    { n:4, t:'Pausa o cancela',    d:'Desde tu cuenta, sin preguntas' }
  ];

  return (
    <>
      <section className="hero" style={{minHeight:'60vh'}}>
        <video className="hero-video" src="https://cafelajulia.com/wp-content/uploads/2026/02/clip2.mp4" autoPlay muted loop playsInline onError={e=>e.target.style.display='none'}/>
        <p className="hero-eyebrow">Suscripción de café</p>
        <h1>Café fresco,<br /><em>cada mes.</em></h1>
        <p className="hero-sub">Nunca te quedes sin café. Elige tu origen favorito o déjanos sorprenderte.<br/>Ahorra hasta 15% · Envío siempre gratis.</p>
      </section>

      <section className="section">
        <div className="section-inner">
          <div className="section-head center">
            <span className="section-label">Planes</span>
            <h2 className="section-title">Elige el tuyo</h2>
          </div>
          <div className="sub-grid">
            {SUSCRIPCIONES.map(s=>(
              <div key={s.id} className={`sub-card ${s.featured?'featured':''} ${plan===s.id?'active':''}`} onClick={()=>setPlan(s.id)}>
                {s.featured && <div className="sub-ribbon">Más popular</div>}
                <div className="sub-card-head">
                  <h3>{s.name}</h3>
                  <div className="sub-qty">{s.qty} al mes</div>
                </div>
                <div className="sub-price">
                  <span className="sub-price-val">${s.price}</span>
                  <span className="sub-price-unit">MXN / mes</span>
                </div>
                <p className="sub-desc">{s.desc}</p>
                <ul className="sub-perks">
                  {s.perks.map((p,i)=>(<li key={i}><Icon name="check" size={14}/>{p}</li>))}
                </ul>
                <button className={`btn ${plan===s.id?'btn-d':'btn-o'}`} style={{width:'100%',marginTop:20}}>{plan===s.id?'Plan seleccionado':'Elegir plan'}</button>
              </div>
            ))}
          </div>

          <div className="sub-cta">
            <div>
              <span className="section-label">Tu elección</span>
              <h3 className="sub-cta-title">{selected.name} · ${selected.price} MXN/mes</h3>
              <p style={{color:'var(--jy-mid)',fontWeight:300,maxWidth:480}}>Puedes cambiar origen, tueste o frecuencia desde tu cuenta cuando quieras.</p>
            </div>
            <a href="#checkout" className="btn btn-d" onClick={(e)=>{e.preventDefault();onNav('checkout')}}>Suscribirme ahora →</a>
          </div>
        </div>
      </section>

      <section className="section soft">
        <div className="section-inner">
          <div className="section-head center">
            <span className="section-label">Cómo funciona</span>
            <h2 className="section-title">4 pasos, <em>café siempre fresco</em></h2>
          </div>
          <div className="grid-4">
            {steps.map(s=>(
              <div className="step-card" key={s.n}>
                <div className="step-num">{String(s.n).padStart(2,'0')}</div>
                <h4>{s.t}</h4>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="section-inner">
          <div className="section-head center">
            <span className="section-label">Preguntas frecuentes</span>
            <h2 className="section-title">Sobre la <em>suscripción</em></h2>
          </div>
          <div className="faq-list" style={{maxWidth:760,margin:'0 auto'}}>
            {[
              { q:'¿Puedo cambiar el café cada mes?', a:'Sí. Desde tu cuenta puedes elegir origen (Chiapas, Veracruz o Puebla) y tueste (medio o oscuro) cada mes, antes del día 25.' },
              { q:'¿Cuándo llega mi caja?', a:'Enviamos entre los días 1 y 3 de cada mes. Recibirás tu pedido entre 3 y 7 días hábiles después.' },
              { q:'¿Puedo pausar o cancelar?', a:'Sí, cuando quieras, sin costo ni preguntas. Pausa temporalmente o cancela desde tu cuenta.' },
              { q:'¿Qué descuento tengo vs. compra única?', a:'Los suscriptores pagan entre 10% y 15% menos que precio de tienda, y el envío siempre es gratis.' }
            ].map((it,i)=>(<FaqItem key={i} q={it.q} a={it.a}/>))}
          </div>
        </div>
      </section>
    </>
  );
};

// CAFETERÍAS (B2B) ─────────────────────────────────────────────────────
const Cafeterias = () => {
  const [form, setForm] = React.useState({ nombre:'', negocio:'', email:'', tel:'', ciudad:'', tipo:'', volumen:'', mensaje:'' });
  const [sent, setSent] = React.useState(false);
  const f = (k,v) => setForm({...form,[k]:v});
  const beneficios = [
    { icon:'scale', t:'Precios al mayoreo', d:'Hasta 30% menos que precio retail. Cotización personalizada según volumen.' },
    { icon:'gift',  t:'Muestra gratuita',    d:'Probamos contigo antes del primer pedido. Sin compromiso de compra.' },
    { icon:'card',  t:'Facturación y crédito', d:'Facturación con RFC. Crédito a 15 o 30 días para cuentas constantes.' },
    { icon:'cup',   t:'Capacitación barista', d:'Incluida en pedidos mayores. Técnica, extracción y presentación.' },
    { icon:'truck', t:'Logística constante', d:'Entregas programadas semanal o quincenal. Stock siempre disponible.' },
    { icon:'star',  t:'Asesoría de menú',    d:'Te ayudamos a elegir origen, molienda y perfil según tu concepto.' }
  ];
  return (
    <>
      <section className="hero" style={{minHeight:'60vh'}}>
        <video className="hero-video" src="https://cafelajulia.com/wp-content/uploads/2026/03/Diseno-sin-titulo-3.mp4" autoPlay muted loop playsInline onError={e=>e.target.style.display='none'}/>
        <p className="hero-eyebrow">Programa B2B</p>
        <h1>Café para tu<br /><em>cafetería.</em></h1>
        <p className="hero-sub">Café de especialidad mexicano, tostado fresco.<br/>Precios especiales, asesoría y logística constante.</p>
      </section>

      <section className="section">
        <div className="section-inner">
          <div className="section-head center">
            <span className="section-label">Beneficios</span>
            <h2 className="section-title">Todo lo que incluye</h2>
            <p className="section-sub">Trabajamos con +80 cafeterías, restaurantes y hoteles en México. Sin contratos exclusivos.</p>
          </div>
          <div className="b2b-benefits">
            {beneficios.map((b,i)=>(
              <div className="b2b-benefit" key={i}>
                <Icon name={b.icon} size={32} style={{color:'var(--jy-yellow)',marginBottom:14}}/>
                <h4>{b.t}</h4>
                <p>{b.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section soft">
        <div className="section-inner">
          <div className="b2b-volume">
            <div>
              <span className="section-label">Volumen mínimo</span>
              <h2 className="section-title">Desde <em>5 kg</em> al mes</h2>
              <p style={{color:'var(--jy-mid)',fontWeight:300,maxWidth:520,marginBottom:30,lineHeight:1.7}}>Nuestro programa B2B comienza con pedidos mensuales de 5 kg. A partir de ahí, los precios escalan por volumen.</p>
              <div className="b2b-tiers">
                <div><strong>5 – 15 kg</strong><span>15% descuento</span></div>
                <div><strong>15 – 40 kg</strong><span>22% descuento</span></div>
                <div><strong>+40 kg</strong><span>30% descuento</span></div>
              </div>
            </div>
            <div className="b2b-visual">
              <img src="https://cafelajulia.com/wp-content/uploads/2026/03/1-kg-chiap-1.png" alt="" onError={e=>e.target.style.display='none'}/>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark" id="b2b-form">
        <div className="section-inner">
          <div className="b2b-form-wrap">
            <div>
              <span className="section-label">Solicita tu muestra</span>
              <h2 className="section-title">Probemos juntos</h2>
              <p style={{color:'rgba(255,255,255,.6)',fontWeight:300,lineHeight:1.7,marginBottom:24}}>Cuéntanos de tu negocio y te enviamos una muestra gratuita de nuestros tres orígenes para que elijas el que mejor encaja con tu concepto.</p>
              <ul className="b2b-points">
                <li>Muestra de 250 g por origen (sin costo)</li>
                <li>Cotización personalizada en 24 hrs</li>
                <li>Llamada de asesoría con un tostador</li>
              </ul>
            </div>
            <form className="b2b-form" onSubmit={e=>{e.preventDefault();setSent(true);}}>
              {sent ? (
                <div style={{textAlign:'center',padding:'40px 20px'}}>
                  <Icon name="check" size={48} style={{color:'var(--jy-yellow)',marginBottom:16}}/>
                  <h3 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:900,color:'var(--jy-black)',marginBottom:8}}>Solicitud enviada</h3>
                  <p style={{color:'var(--jy-mid)',fontWeight:300}}>Te contactaremos en menos de 24 horas con tu cotización.</p>
                </div>
              ) : (
                <>
                  <h3 className="b2b-form-title">Solicitar muestra gratuita</h3>
                  <div className="field"><label className="field-label">Nombre *</label><input className="field-input" value={form.nombre} onChange={e=>f('nombre',e.target.value)} required/></div>
                  <div className="field"><label className="field-label">Nombre del negocio *</label><input className="field-input" value={form.negocio} onChange={e=>f('negocio',e.target.value)} required/></div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                    <div className="field"><label className="field-label">Correo *</label><input className="field-input" type="email" value={form.email} onChange={e=>f('email',e.target.value)} required/></div>
                    <div className="field"><label className="field-label">Teléfono *</label><input className="field-input" value={form.tel} onChange={e=>f('tel',e.target.value)} required/></div>
                  </div>
                  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
                    <div className="field"><label className="field-label">Ciudad *</label><input className="field-input" value={form.ciudad} onChange={e=>f('ciudad',e.target.value)} required/></div>
                    <div className="field"><label className="field-label">Tipo de negocio *</label>
                      <select className="field-input" value={form.tipo} onChange={e=>f('tipo',e.target.value)} required>
                        <option value="">Selecciona</option><option>Cafetería</option><option>Restaurante</option><option>Hotel</option><option>Oficina</option><option>Tienda / Mercado</option><option>Otro</option>
                      </select>
                    </div>
                  </div>
                  <div className="field"><label className="field-label">Volumen mensual estimado *</label>
                    <select className="field-input" value={form.volumen} onChange={e=>f('volumen',e.target.value)} required>
                      <option value="">Selecciona</option><option>5–15 kg</option><option>15–40 kg</option><option>+40 kg</option><option>Aún no lo sé</option>
                    </select>
                  </div>
                  <div className="field"><label className="field-label">Cuéntanos de tu negocio</label><textarea className="field-input" rows="3" value={form.mensaje} onChange={e=>f('mensaje',e.target.value)} style={{resize:'vertical',minHeight:80}}/></div>
                  <button type="submit" className="btn btn-y" style={{width:'100%',marginTop:6}}>Enviar solicitud</button>
                </>
              )}
            </form>
          </div>
        </div>
      </section>
    </>
  );
};

// FAQ ─────────────────────────────────────────────────────────────────
const FaqItem = ({ q, a }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`faq-item ${open?'open':''}`}>
      <button className="faq-q" onClick={()=>setOpen(!open)}>
        <span>{q}</span>
        <Icon name={open?'minus':'plus'} size={18}/>
      </button>
      {open && <div className="faq-a">{a}</div>}
    </div>
  );
};

const FAQ = ({ onNav }) => (
  <>
    <section className="section" style={{paddingTop:120}}>
      <div className="section-inner" style={{textAlign:'center',maxWidth:720}}>
        <span className="section-label">Centro de ayuda</span>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2.4rem,5vw,4rem)',fontWeight:900,color:'var(--jy-black)',lineHeight:1.05}}>Preguntas <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>frecuentes</em></h1>
        <p style={{color:'var(--jy-mid)',fontWeight:300,marginTop:16,fontSize:15.5}}>¿No encuentras respuesta? Escríbenos por WhatsApp {CONTACT.whatsapp} o a {CONTACT.email}.</p>
      </div>
    </section>
    <section className="section soft" style={{paddingTop:40}}>
      <div className="section-inner" style={{maxWidth:820}}>
        <div className="faq-list">
          {FAQS.map((f,i)=>(<FaqItem key={i} q={f.q} a={f.a}/>))}
        </div>
      </div>
    </section>
    <section className="section">
      <div className="section-inner" style={{textAlign:'center',maxWidth:540}}>
        <h2 className="section-title">¿Todavía con <em>dudas?</em></h2>
        <p style={{color:'var(--jy-mid)',fontWeight:300,marginBottom:24}}>Responde Julieta, nuestra asistente, o ven a verlos en la cafetería de Las Choapas.</p>
        <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
          <a className="btn btn-d" href={`https://wa.me/${CONTACT.whatsappDigits}`} target="_blank" rel="noopener"><Icon name="wa" size={16} style={{marginRight:6,verticalAlign:'-3px'}}/>WhatsApp</a>
          <a className="btn" href="#" onClick={e=>{e.preventDefault();onNav('contacto')}} style={{background:'transparent',color:'var(--jy-black)',border:'1px solid var(--jy-border)'}}>Formulario de contacto</a>
        </div>
      </div>
    </section>
  </>
);

Object.assign(window, { Carrito, Checkout, OrderConfirm, Suscripcion, Cafeterias, FAQ, FaqItem });
// Café La Julia v2 — Tienda, PDP, Carrito, Checkout, Blog, Quienes, Contacto, Suscripcion, FAQ, Cafeterias

// ───────────── TIENDA ─────────────
const Tienda2 = ({ onNav }) => {
  const [cat, setCat] = React.useState('todos');
  const [sort, setSort] = React.useState('destacados');
  const filtered = PRODUCTS.filter(p => cat==='todos' || p.originTag===cat);
  const sorted = [...filtered].sort((a,b)=>{
    if (sort==='precio-asc') return a.price-b.price;
    if (sort==='precio-desc') return b.price-a.price;
    if (sort==='destacados') return (b.featured?1:0)-(a.featured?1:0);
    return 0;
  });
  return (
    <div className="page">
      <Hero2
        kicker="Catálogo completo · 13 productos"
        title="Nuestra"
        titleEm="tienda."
        sub="Café en grano, molido bajo pedido, y tazas de cerámica. Todo nuestro catálogo tostado esta semana en Las Choapas."
        video="https://videos.pexels.com/video-files/4682448/4682448-hd_1920_1080_25fps.mp4"
        ctaPrimary={{ label:'Suscripción mensual', onClick:()=>onNav('suscripcion') }}
        ctaSecondary={{ label:'Mayoreo B2B', onClick:()=>onNav('cafeterias') }}
      />

      <section className="sec-tight" style={{paddingTop:60,paddingBottom:30}}>
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',flexWrap:'wrap',gap:24,paddingBottom:28,borderBottom:'1px solid var(--jy-line)'}}>
          <div style={{display:'flex',gap:4,flexWrap:'wrap'}}>
            {CATEGORIES.map(c=>(
              <button key={c.id} onClick={()=>setCat(c.id)}
                style={{padding:'10px 18px',borderRadius:999,fontSize:12.5,letterSpacing:'.08em',textTransform:'uppercase',fontWeight:600,
                        background:cat===c.id?'var(--jy-black)':'transparent',color:cat===c.id?'#fff':'var(--jy-black)',
                        border:cat===c.id?'1px solid var(--jy-black)':'1px solid var(--jy-line)',transition:'all .2s'}}>
                {c.label}
              </button>
            ))}
          </div>
          <div style={{display:'flex',alignItems:'center',gap:12}}>
            <span className="hair">Ordenar</span>
            <select value={sort} onChange={e=>setSort(e.target.value)}
              style={{padding:'10px 16px',border:'1px solid var(--jy-line)',borderRadius:999,fontSize:13,fontFamily:'inherit',background:'#fff',cursor:'pointer'}}>
              <option value="destacados">Destacados</option>
              <option value="precio-asc">Precio: menor</option>
              <option value="precio-desc">Precio: mayor</option>
            </select>
          </div>
        </div>
      </section>

      <section style={{padding:'30px 40px 140px',maxWidth:1600,margin:'0 auto'}}>
        <div className="prod-grid">
          {sorted.map(p=>(
            <ProdCard key={p.id} p={p} onClick={()=>onNav('producto', p)} />
          ))}
        </div>
      </section>
    </div>
  );
};

// ───────────── PDP ─────────────
const PDP2 = ({ product, onNav, onAdd }) => {
  const p = product || PRODUCTS[0];
  const [molienda, setMolienda] = React.useState('grano');
  const [qty, setQty] = React.useState(1);
  const isAcc = p.originTag === 'accesorio';
  const related = PRODUCTS.filter(x => x.id !== p.id && x.originTag === p.originTag).slice(0,3);

  return (
    <div className="page" style={{paddingTop:'var(--nav-h)',background:'var(--jy-cream)'}}>
      <div style={{padding:'40px 40px 20px',maxWidth:1600,margin:'0 auto'}}>
        <button onClick={()=>onNav('tienda')} style={{fontSize:12,letterSpacing:'.12em',textTransform:'uppercase',fontWeight:600,display:'inline-flex',alignItems:'center',gap:8}}>
          <Icon name="arrowl" size={14}/> Volver a la tienda
        </button>
      </div>
      <section style={{padding:'40px 40px 100px',maxWidth:1600,margin:'0 auto'}}>
        <div style={{display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:80,alignItems:'start'}} className="pdp-grid">
          <div style={{background:'#fff',aspectRatio:'1/1',display:'flex',alignItems:'center',justifyContent:'center',padding:60}}>
            <img src={p.img} alt={p.name} style={{maxHeight:'100%',objectFit:'contain'}} />
          </div>
          <div style={{position:'sticky',top:100}}>
            <div className="hair" style={{marginBottom:16}}>{p.origin}</div>
            <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(40px,6vw,72px)',lineHeight:.95,letterSpacing:'-.03em',marginBottom:16}}>
              {p.name}
            </h1>
            <div style={{display:'flex',alignItems:'baseline',gap:12,marginBottom:28}}>
              <span style={{fontFamily:'var(--font-display)',fontSize:36,fontWeight:500}}>${p.price}</span>
              <span style={{fontSize:13,color:'var(--jy-mid)'}}>MXN · {p.unit}</span>
              {p.priceOld && <span style={{fontSize:16,color:'var(--jy-soft)',textDecoration:'line-through'}}>${p.priceOld}</span>}
            </div>
            <p style={{fontSize:16,lineHeight:1.7,color:'var(--jy-ink)',fontWeight:300,marginBottom:32}}>{p.desc}</p>

            {!isAcc && (
              <div style={{marginBottom:28}}>
                <div className="hair" style={{marginBottom:14}}>Molienda</div>
                <div style={{display:'grid',gridTemplateColumns:'repeat(2,1fr)',gap:8}}>
                  {MOLIENDAS.map(m=>(
                    <button key={m.id} onClick={()=>setMolienda(m.id)}
                      style={{padding:'14px 16px',textAlign:'left',border:'1px solid '+(molienda===m.id?'var(--jy-black)':'var(--jy-line)'),
                              background:molienda===m.id?'var(--jy-black)':'#fff',color:molienda===m.id?'#fff':'var(--jy-black)',borderRadius:0,transition:'all .2s'}}>
                      <div style={{fontSize:13,fontWeight:600,marginBottom:2}}>{m.label}</div>
                      <div style={{fontSize:11,opacity:.7}}>{m.hint}</div>
                    </button>
                  ))}
                </div>
              </div>
            )}

            <div style={{display:'flex',gap:12,alignItems:'center',marginBottom:24}}>
              <div style={{display:'flex',alignItems:'center',border:'1px solid var(--jy-black)',borderRadius:999}}>
                <button onClick={()=>setQty(Math.max(1,qty-1))} style={{padding:'14px 16px'}}><Icon name="minus" size={14}/></button>
                <span style={{padding:'0 18px',fontWeight:600,minWidth:40,textAlign:'center'}}>{qty}</span>
                <button onClick={()=>setQty(qty+1)} style={{padding:'14px 16px'}}><Icon name="plus" size={14}/></button>
              </div>
              <button className="b2 b2-k" style={{flex:1,justifyContent:'center'}} onClick={()=>{onAdd(p, qty, molienda);onNav('carrito')}}>
                Agregar al carrito · ${p.price*qty}
              </button>
            </div>

            {!isAcc && (
              <div style={{marginTop:40,padding:'32px 0',borderTop:'1px solid var(--jy-line)',borderBottom:'1px solid var(--jy-line)'}}>
                <div className="hair" style={{marginBottom:20}}>Perfil de taza</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginBottom:20}}>
                  <div><div style={{fontSize:11,color:'var(--jy-mid)',textTransform:'uppercase',letterSpacing:'.1em',marginBottom:4}}>Finca</div><div style={{fontSize:14,fontWeight:500}}>{p.finca}</div></div>
                  <div><div style={{fontSize:11,color:'var(--jy-mid)',textTransform:'uppercase',letterSpacing:'.1em',marginBottom:4}}>Altura</div><div style={{fontSize:14,fontWeight:500}}>{p.altura}</div></div>
                  <div><div style={{fontSize:11,color:'var(--jy-mid)',textTransform:'uppercase',letterSpacing:'.1em',marginBottom:4}}>Variedad</div><div style={{fontSize:14,fontWeight:500}}>{p.variedad}</div></div>
                  <div><div style={{fontSize:11,color:'var(--jy-mid)',textTransform:'uppercase',letterSpacing:'.1em',marginBottom:4}}>Proceso</div><div style={{fontSize:14,fontWeight:500}}>{p.proceso}</div></div>
                </div>
                {p.notas && (
                  <>
                    <div style={{fontSize:11,color:'var(--jy-mid)',textTransform:'uppercase',letterSpacing:'.1em',marginBottom:10}}>Notas de cata</div>
                    <div style={{display:'flex',flexWrap:'wrap',gap:6}}>
                      {p.notas.map(n=>(<span key={n} style={{padding:'6px 14px',background:'var(--jy-paper)',borderRadius:999,fontSize:12.5,fontWeight:500}}>{n}</span>))}
                    </div>
                  </>
                )}
                {p.perfil && <p style={{marginTop:20,fontSize:14,color:'var(--jy-mid)',fontStyle:'italic'}}>{p.perfil}</p>}
              </div>
            )}
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section style={{padding:'60px 40px 140px',maxWidth:1600,margin:'0 auto',background:'#fff'}}>
          <div className="hair" style={{marginBottom:16}}>También te gustará</div>
          <h2 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(32px,4vw,56px)',letterSpacing:'-.02em',marginBottom:40}}>
            Más de <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>{p.origin?.split('·')[0]?.trim() || 'nuestro catálogo'}</em>
          </h2>
          <div className="prod-grid">
            {related.map(r=>(<ProdCard key={r.id} p={r} onClick={()=>{onNav('producto', r);window.scrollTo(0,0)}} />))}
          </div>
        </section>
      )}
    </div>
  );
};

// ───────────── CARRITO ─────────────
const Carrito2 = ({ cart, onNav, onRemove, onQty }) => {
  const subtotal = cart.reduce((s,i)=>s + i.price*i.qty, 0);
  const envio = subtotal >= 500 ? 0 : 120;
  const total = subtotal + envio;

  return (
    <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)',minHeight:'100vh'}}>
      <section style={{padding:'0 40px 100px',maxWidth:1200,margin:'0 auto'}}>
        <div className="hair" style={{marginBottom:16}}>Tu pedido</div>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(48px,8vw,96px)',lineHeight:.9,letterSpacing:'-.035em',marginBottom:60}}>
          Carrito. <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>{cart.length} {cart.length===1?'producto':'productos'}.</em>
        </h1>
        {cart.length === 0 ? (
          <div style={{padding:'80px 0',textAlign:'center',borderTop:'1px solid var(--jy-line)',borderBottom:'1px solid var(--jy-line)'}}>
            <p style={{fontSize:18,color:'var(--jy-mid)',marginBottom:24}}>Tu carrito está vacío.</p>
            <button className="b2 b2-k" onClick={()=>onNav('tienda')}>Ir a la tienda <Icon name="arrow" size={14}/></button>
          </div>
        ) : (
          <div style={{display:'grid',gridTemplateColumns:'1.6fr 1fr',gap:60}} className="story-grid">
            <div>
              {cart.map((it,i)=>(
                <div key={i} style={{display:'grid',gridTemplateColumns:'120px 1fr auto',gap:24,padding:'24px 0',borderBottom:'1px solid var(--jy-line)',alignItems:'center'}}>
                  <div style={{aspectRatio:'1/1',background:'var(--jy-cream)',display:'flex',alignItems:'center',justifyContent:'center',padding:10}}>
                    <img src={it.img} alt="" style={{maxHeight:'100%',objectFit:'contain'}}/>
                  </div>
                  <div>
                    <div style={{fontFamily:'var(--font-display)',fontSize:20,fontWeight:400,marginBottom:4}}>{it.name}</div>
                    <div style={{fontSize:13,color:'var(--jy-mid)',marginBottom:8}}>{it.unit} · {it.molienda || 'Sin molienda'}</div>
                    <div style={{display:'flex',alignItems:'center',gap:14}}>
                      <div style={{display:'flex',alignItems:'center',border:'1px solid var(--jy-line)',borderRadius:999}}>
                        <button onClick={()=>onQty(i, Math.max(1,it.qty-1))} style={{padding:'8px 12px'}}><Icon name="minus" size={12}/></button>
                        <span style={{padding:'0 12px',fontWeight:600,fontSize:13}}>{it.qty}</span>
                        <button onClick={()=>onQty(i, it.qty+1)} style={{padding:'8px 12px'}}><Icon name="plus" size={12}/></button>
                      </div>
                      <button onClick={()=>onRemove(i)} style={{fontSize:12,color:'var(--jy-mid)',textDecoration:'underline'}}>Quitar</button>
                    </div>
                  </div>
                  <div style={{fontFamily:'var(--font-display)',fontSize:22,fontWeight:500}}>${it.price*it.qty}</div>
                </div>
              ))}
            </div>
            <aside style={{background:'var(--jy-cream)',padding:'36px 32px',alignSelf:'start',position:'sticky',top:100}}>
              <h3 className="hair" style={{marginBottom:24}}>Resumen</h3>
              <div style={{display:'flex',justifyContent:'space-between',padding:'10px 0',fontSize:14}}>
                <span>Subtotal</span><span>${subtotal}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',padding:'10px 0',fontSize:14,borderBottom:'1px solid var(--jy-line)',marginBottom:14}}>
                <span>Envío {envio===0 && <em style={{color:'var(--jy-yellow-deep)',fontStyle:'normal',fontSize:11,marginLeft:6}}>GRATIS</em>}</span>
                <span>{envio===0?'—':`$${envio}`}</span>
              </div>
              <div style={{display:'flex',justifyContent:'space-between',padding:'10px 0',fontFamily:'var(--font-display)',fontSize:28,fontWeight:500}}>
                <span>Total</span><span>${total}</span>
              </div>
              <a href="#checkout" className="b2 b2-k" style={{width:'100%',justifyContent:'center',marginTop:20,display:'flex',alignItems:'center'}} onClick={(e)=>{e.preventDefault();onNav('checkout')}}>
                Pagar ahora <Icon name="arrow" size={14}/>
              </a>
              {subtotal < 500 && <p style={{fontSize:12,color:'var(--jy-mid)',textAlign:'center',marginTop:14}}>Suma ${500-subtotal} para envío gratis</p>}
            </aside>
          </div>
        )}
      </section>
    </div>
  );
};

// ───────────── CHECKOUT ─────────────
const Checkout2 = ({ cart, onNav }) => {
  const [step, setStep] = React.useState(1);
  const subtotal = cart.reduce((s,i)=>s + i.price*i.qty, 0);
  const envio = subtotal >= 500 ? 0 : 120;
  const total = subtotal + envio;
  return (
    <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)',minHeight:'100vh',background:'var(--jy-cream)'}}>
      <section style={{padding:'0 40px 120px',maxWidth:1200,margin:'0 auto'}}>
        <div className="hair" style={{marginBottom:16}}>Finalizar compra</div>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(44px,6vw,80px)',lineHeight:.9,letterSpacing:'-.035em',marginBottom:48}}>
          Pago <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>seguro.</em>
        </h1>
        <div style={{display:'grid',gridTemplateColumns:'1.4fr 1fr',gap:60}} className="story-grid">
          <div style={{background:'#fff',padding:40}}>
            {step===1 && (
              <>
                <div className="hair" style={{marginBottom:20}}>Paso 1 · Entrega</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:14}}>
                  <input placeholder="Nombre" style={ckIn}/><input placeholder="Apellido" style={ckIn}/>
                </div>
                <input placeholder="Correo" type="email" style={{...ckIn,marginBottom:14}}/>
                <input placeholder="Teléfono" style={{...ckIn,marginBottom:14}}/>
                <input placeholder="Dirección" style={{...ckIn,marginBottom:14}}/>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:14,marginBottom:20}}>
                  <input placeholder="Ciudad" style={ckIn}/><input placeholder="Estado" style={ckIn}/><input placeholder="C.P." style={ckIn}/>
                </div>
                <button className="b2 b2-k" onClick={()=>setStep(2)}>Continuar al pago <Icon name="arrow" size={14}/></button>
              </>
            )}
            {step===2 && (
              <>
                <div className="hair" style={{marginBottom:20}}>Paso 2 · Pago</div>
                <div style={{padding:'20px 24px',background:'var(--jy-cream)',borderRadius:8,marginBottom:20,display:'flex',alignItems:'center',gap:12,fontSize:13,color:'var(--jy-ink)'}}>
                  <Icon name="lock" size={16}/> Pago 100% seguro · Encriptación SSL
                </div>
                <input placeholder="Número de tarjeta" style={{...ckIn,marginBottom:14}}/>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14,marginBottom:14}}>
                  <input placeholder="MM/AA" style={ckIn}/><input placeholder="CVV" style={ckIn}/>
                </div>
                <input placeholder="Nombre en tarjeta" style={{...ckIn,marginBottom:24}}/>
                <div style={{display:'flex',gap:10}}>
                  <button className="b2 b2-ok" onClick={()=>setStep(1)}>Atrás</button>
                  <button className="b2 b2-k" style={{flex:1,justifyContent:'center'}} onClick={()=>setStep(3)}>Pagar ${total} MXN <Icon name="lock" size={14}/></button>
                </div>
              </>
            )}
            {step===3 && (
              <div style={{textAlign:'center',padding:'40px 0'}}>
                <div style={{width:72,height:72,borderRadius:'50%',background:'var(--jy-yellow)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 24px',color:'var(--jy-black)'}}>
                  <Icon name="check" size={36}/>
                </div>
                <h2 style={{fontFamily:'var(--font-display)',fontSize:40,fontWeight:400,marginBottom:16}}>¡Pedido confirmado!</h2>
                <p style={{color:'var(--jy-mid)',marginBottom:24}}>Te enviamos la confirmación a tu correo. Tu café estará en tu puerta en 3-5 días.</p>
                <button className="b2 b2-k" onClick={()=>onNav('home')}>Volver al inicio <Icon name="arrow" size={14}/></button>
              </div>
            )}
          </div>
          <aside style={{background:'#fff',padding:'36px 32px',alignSelf:'start',position:'sticky',top:100}}>
            <h3 className="hair" style={{marginBottom:20}}>Tu pedido</h3>
            {cart.map((it,i)=>(
              <div key={i} style={{display:'flex',gap:14,padding:'14px 0',borderBottom:'1px solid var(--jy-line)',fontSize:13}}>
                <div style={{width:50,height:50,background:'var(--jy-cream)',padding:6}}><img src={it.img} alt="" style={{maxHeight:'100%',objectFit:'contain'}}/></div>
                <div style={{flex:1}}><div style={{fontWeight:600}}>{it.name}</div><div style={{color:'var(--jy-mid)',fontSize:11}}>Qty: {it.qty}</div></div>
                <div style={{fontWeight:600}}>${it.price*it.qty}</div>
              </div>
            ))}
            <div style={{padding:'16px 0 0',fontSize:13,display:'flex',flexDirection:'column',gap:8}}>
              <div style={{display:'flex',justifyContent:'space-between'}}><span>Subtotal</span><span>${subtotal}</span></div>
              <div style={{display:'flex',justifyContent:'space-between'}}><span>Envío</span><span>{envio===0?'Gratis':`$${envio}`}</span></div>
              <div style={{display:'flex',justifyContent:'space-between',fontFamily:'var(--font-display)',fontSize:24,fontWeight:500,paddingTop:10,borderTop:'1px solid var(--jy-line)',marginTop:8}}><span>Total</span><span>${total}</span></div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
};
const ckIn = { width:'100%', padding:'16px 18px', border:'1px solid var(--jy-line)', borderRadius:0, fontSize:14, fontFamily:'inherit', outline:'none' };

Object.assign(window, { Tienda2, PDP2, Carrito2, Checkout2 });
// Café La Julia v2 — Quienes, Recompensas, Blog, Contacto, Suscripcion, FAQ, Cafeterias

// ───────────── QUIENES SOMOS ─────────────
const Quienes2 = ({ onNav }) => (
  <div className="page">
    <Hero2
      kicker="Nuestra historia"
      title="De la finca"
      titleEm="a tu taza."
      sub="Somos una tostadora familiar en Las Choapas, Veracruz. Trabajamos directo con productores mexicanos desde 2020 para llevarte un café honesto, trazable y con orgullo."
      video="../../assets/videos/hero-home2.mp4"
      ctaPrimary={{ label:'Comprar café', onClick:()=>onNav('tienda') }}
      ctaSecondary={{ label:'Contáctanos', onClick:()=>onNav('contacto') }}
    />

    <section className="sec">
      <div className="sec-head">
        <div className="sec-num">01/</div>
        <div>
          <div className="hair" style={{marginBottom:20}}>Nuestra misión</div>
          <h2 className="sec-title">Café mexicano con <em>nombre, finca y fecha.</em></h2>
        </div>
      </div>
      <div className="story-grid">
        <div className="story-img" style={{backgroundImage:'url(../../assets/origenes-barista.jpg)'}}/>
        <div className="story-body">
          <p>Empezamos con una obsesión: entender de dónde viene cada grano. Visitamos fincas en Chiapas, Veracruz y Puebla, probamos lotes, y nos enamoramos de la diversidad del café mexicano.</p>
          <div className="story-kicker">
            "Cada bolsa lleva la fecha de tueste. No vendemos café viejo, nunca."
          </div>
          <p>Hoy trabajamos con pequeños productores pagando precio justo, visitando cada cosecha, y tostando cada semana en nuestra planta de Las Choapas para que el café te llegue fresco.</p>
        </div>
      </div>
    </section>

    <Parallax
      bg="https://images.unsplash.com/photo-1611174797136-5e4e57dba0cc?w=2000"
      kicker="Valores"
      title="Trazabilidad"
      titleEm="radical."
      sub="Finca, altura, variedad, proceso y fecha de tueste — todo impreso en tu bolsa. Porque el café bueno no tiene nada que esconder."
    />

    <section className="sec sec-paper">
      <div className="sec-head">
        <div className="sec-num sec-num-dark">02/</div>
        <div>
          <div className="hair" style={{marginBottom:20}}>Cómo trabajamos</div>
          <h2 className="sec-title">Cuatro pasos, <em>cero atajos.</em></h2>
        </div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:2,background:'var(--jy-line)'}} className="origins-grid">
        {[
          { n:'01', t:'Selección', d:'Visitamos la finca, catamos el lote, aprobamos.' },
          { n:'02', t:'Tueste', d:'Cada semana, en perfiles específicos por varietal.' },
          { n:'03', t:'Empaque', d:'Bolsa con válvula, fecha impresa, 100% fresco.' },
          { n:'04', t:'Envío', d:'A tu puerta en 2-7 días, tostado hace días.' }
        ].map(s=>(
          <div key={s.n} style={{background:'var(--jy-paper)',padding:'48px 32px',minHeight:280}}>
            <div className="big-number" style={{fontSize:96,color:'var(--jy-yellow-deep)'}}>{s.n}</div>
            <h4 style={{fontFamily:'var(--font-display)',fontSize:26,fontWeight:400,marginTop:24,marginBottom:10}}>{s.t}</h4>
            <p style={{fontSize:14,color:'var(--jy-ink)',lineHeight:1.6,fontWeight:300}}>{s.d}</p>
          </div>
        ))}
      </div>
    </section>

    <section className="sec sec-dark" style={{textAlign:'center'}}>
      <h2 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(44px,8vw,120px)',lineHeight:.88,letterSpacing:'-.035em',marginBottom:32,maxWidth:'12ch',margin:'0 auto 32px'}}>
        Pruébalo. <em style={{color:'var(--jy-yellow)',fontStyle:'italic',fontWeight:400}}>Notarás la diferencia.</em>
      </h2>
      <button className="b2 b2-y" onClick={()=>onNav('tienda')}>Ir a la tienda <Icon name="arrow" size={14}/></button>
    </section>
  </div>
);

// ───────────── RECOMPENSAS (reuse old dark design) ─────────────
const Recompensas2 = ({ onNav }) => {
  const [pts, setPts] = React.useState(480);
  const tiers = [
    { n:'Bronce',  min:0,   color:'#a87638' },
    { n:'Plata',   min:300, color:'#b5b5b5' },
    { n:'Oro',     min:800, color:'#F5C200' },
    { n:'Embajador', min:2000, color:'#111' }
  ];
  const rewards = [
    { pts:200, t:'Envío gratis',              d:'En tu próximo pedido, sin mínimo.' },
    { pts:400, t:'Bolsa 250g cortesía',       d:'Clásica o de origen, tú eliges.' },
    { pts:600, t:'Taller de cata virtual',    d:'60 min con Isaac, nuestro tostador.' },
    { pts:1200, t:'Suscripción 3 meses',      d:'500g mensuales al origen del mes.' }
  ];
  const next = tiers.find(t=>t.min > pts) || tiers[tiers.length-1];
  const cur  = [...tiers].reverse().find(t=>t.min <= pts);
  const progress = next.min > cur.min ? Math.min(100, ((pts-cur.min)/(next.min-cur.min))*100) : 100;

  return (
    <div className="page" style={{background:'var(--jy-black)',minHeight:'100vh',color:'#fff',paddingTop:'var(--nav-h)',paddingBottom:80}}>
      <div style={{background:'rgba(255,255,255,.04)',borderBottom:'1px solid rgba(255,255,255,.08)',padding:'14px 24px',display:'flex',justifyContent:'center',alignItems:'center',gap:10,fontSize:11,letterSpacing:2.5,textTransform:'uppercase',color:'rgba(255,255,255,.4)',fontWeight:700}}>
        <Icon name="coffee" size={14} style={{color:'var(--jy-yellow)'}} />
        Club Café La Julia · Web App
      </div>
      <section style={{padding:'60px 24px 40px',maxWidth:900,margin:'0 auto',textAlign:'center'}}>
        <img src="../../assets/logo-la-julia-app.png" alt="" style={{width:80,height:80,filter:'invert(1)',margin:'0 auto 20px'}} />
        <p style={{fontSize:11,letterSpacing:4,textTransform:'uppercase',color:'var(--jy-yellow)',fontWeight:700,marginBottom:16}}>Hola, Paco</p>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2.4rem,5vw,3.8rem)',fontWeight:900,lineHeight:1.05,color:'#fff',marginBottom:14}}>Tus puntos de<br /><em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>Café La Julia</em></h1>
        <p style={{color:'rgba(255,255,255,.55)',fontWeight:300,fontSize:15.5,maxWidth:440,margin:'0 auto 40px',lineHeight:1.7}}>Acumula puntos con cada pedido y canjéalos por café, experiencias y premios exclusivos.</p>
      </section>
      <section style={{maxWidth:1000,margin:'0 auto',padding:'0 24px'}}>
        <div style={{background:'linear-gradient(135deg,#1e1e1e,#0a0a0a)',border:'1px solid rgba(255,255,255,.1)',borderRadius:12,padding:40,display:'grid',gridTemplateColumns:'1fr auto',gap:40,alignItems:'center',marginBottom:60,position:'relative',overflow:'hidden'}}>
          <div style={{position:'absolute',top:-60,right:-60,width:220,height:220,background:'radial-gradient(circle,rgba(245,194,0,.18),transparent 70%)'}} />
          <div style={{position:'relative',zIndex:1}}>
            <div style={{fontSize:11,letterSpacing:3,textTransform:'uppercase',color:'rgba(255,255,255,.4)',fontWeight:700,marginBottom:10}}>Balance actual</div>
            <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:82,lineHeight:1,color:'#fff',marginBottom:6}}>{pts}</div>
            <div style={{fontSize:13,color:'var(--jy-yellow)',letterSpacing:2,textTransform:'uppercase',fontWeight:700,marginBottom:20}}>puntos · nivel {cur.n}</div>
            <div style={{height:6,background:'rgba(255,255,255,.1)',borderRadius:3,maxWidth:360,overflow:'hidden'}}>
              <div style={{width:`${progress}%`,height:'100%',background:'var(--jy-yellow)',transition:'width .4s'}} />
            </div>
            <div style={{fontSize:12.5,color:'rgba(255,255,255,.5)',marginTop:10,fontWeight:300}}>
              {cur.n === next.n ? 'Nivel máximo alcanzado' : `Te faltan ${next.min-pts} puntos para ${next.n}`}
            </div>
          </div>
          <div style={{display:'flex',flexDirection:'column',gap:10}}>
            <button className="b2 b2-y" style={{whiteSpace:'nowrap'}}>Canjear puntos</button>
            <button className="b2 b2-o" style={{whiteSpace:'nowrap'}} onClick={()=>setPts(pts+50)}>+50 puntos (demo)</button>
          </div>
        </div>
        <div style={{marginBottom:60}}>
          <div style={{fontSize:11,letterSpacing:4,textTransform:'uppercase',color:'rgba(255,255,255,.35)',fontWeight:700,marginBottom:20}}>Niveles</div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:12}}>
            {tiers.map(t=>(
              <div key={t.n} style={{background:cur.n===t.n?'rgba(245,194,0,.1)':'rgba(255,255,255,.04)',border:`1px solid ${cur.n===t.n?'var(--jy-yellow)':'rgba(255,255,255,.08)'}`,borderRadius:8,padding:20}}>
                <div style={{width:28,height:28,borderRadius:'50%',background:t.color,marginBottom:14,border:t.n==='Embajador'?'1px solid rgba(255,255,255,.3)':'none'}} />
                <div style={{fontFamily:'var(--font-display)',fontWeight:700,fontSize:18,color:'#fff',marginBottom:4}}>{t.n}</div>
                <div style={{fontSize:11.5,color:'rgba(255,255,255,.4)',letterSpacing:1.2,textTransform:'uppercase',fontWeight:700}}>Desde {t.min} pts</div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div style={{fontSize:11,letterSpacing:4,textTransform:'uppercase',color:'rgba(255,255,255,.35)',fontWeight:700,marginBottom:20}}>Canjea tus puntos</div>
          <div style={{background:'#f7d116',borderRadius:14,padding:'48px 44px',display:'grid',gridTemplateColumns:'auto 1fr auto',gap:32,alignItems:'center',position:'relative',overflow:'hidden'}}>
            <div style={{width:88,height:88,borderRadius:'50%',background:'#fff',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0,boxShadow:'0 4px 14px rgba(0,0,0,.12)'}}>
              <img src="../../assets/logo-la-julia-app.png" alt="" style={{width:62,height:62,objectFit:'contain'}} />
            </div>
            <div>
              <div style={{fontSize:10.5,letterSpacing:3,textTransform:'uppercase',color:'rgba(0,0,0,.55)',fontWeight:800,marginBottom:8}}>Café La Julia · Rewards</div>
              <h3 style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:30,lineHeight:1.05,color:'#111',marginBottom:8,letterSpacing:'-.01em'}}>Canjea tus puntos en la app de fidelización</h3>
              <p style={{fontSize:13.5,color:'rgba(0,0,0,.7)',fontWeight:500,lineHeight:1.55,maxWidth:520}}>Muestra tu QR personal en el mostrador, suma puntos por cada consumo y canjéalos por café, postres y experiencias.</p>
            </div>
            <a href="https://cafe-la-julia-fidelizacion.web.app/" target="_blank" rel="noopener noreferrer" style={{background:'#111',color:'#f7d116',padding:'16px 26px',borderRadius:12,fontSize:13,fontWeight:800,letterSpacing:1.2,textTransform:'uppercase',textDecoration:'none',display:'inline-flex',alignItems:'center',gap:10,whiteSpace:'nowrap',transition:'transform .2s'}}
               onMouseEnter={e=>e.currentTarget.style.transform='translateY(-2px)'}
               onMouseLeave={e=>e.currentTarget.style.transform='none'}>
              Ir a la app <Icon name="arrow" size={14}/>
            </a>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14,marginTop:14}}>
            <div style={{background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',borderRadius:8,padding:'20px 22px'}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:32,color:'var(--jy-yellow)',fontStyle:'italic',lineHeight:1,marginBottom:6}}>5×</div>
              <div style={{fontSize:13,color:'#fff',fontWeight:600,marginBottom:2}}>Por consumo</div>
              <div style={{fontSize:11.5,color:'rgba(255,255,255,.45)',fontWeight:300}}>5 pts cada visita</div>
            </div>
            <div style={{background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',borderRadius:8,padding:'20px 22px'}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:32,color:'var(--jy-yellow)',fontStyle:'italic',lineHeight:1,marginBottom:6}}>15×</div>
              <div style={{fontSize:13,color:'#fff',fontWeight:600,marginBottom:2}}>Por combo</div>
              <div style={{fontSize:11.5,color:'rgba(255,255,255,.45)',fontWeight:300}}>Bebida + postre o snack</div>
            </div>
            <div style={{background:'rgba(255,255,255,.04)',border:'1px solid rgba(255,255,255,.08)',borderRadius:8,padding:'20px 22px'}}>
              <div style={{fontFamily:'var(--font-display)',fontWeight:900,fontSize:32,color:'var(--jy-yellow)',fontStyle:'italic',lineHeight:1,marginBottom:6}}>10×</div>
              <div style={{fontSize:13,color:'#fff',fontWeight:600,marginBottom:2}}>Café en grano</div>
              <div style={{fontSize:11.5,color:'rgba(255,255,255,.45)',fontWeight:300}}>Por bolsa adquirida</div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

// ───────────── BLOG ─────────────
const Blog2 = ({ onNav, onOpen }) => (
  <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)'}}>
    <section style={{padding:'0 40px 60px',maxWidth:1600,margin:'0 auto'}}>
      <div className="hair" style={{marginBottom:16}}>Blog · Guías y mercado</div>
      <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(56px,10vw,140px)',lineHeight:.88,letterSpacing:'-.035em',marginBottom:40,maxWidth:'14ch'}}>
        Historias <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>del café.</em>
      </h1>
    </section>
    <section style={{padding:'0 40px 120px',maxWidth:1600,margin:'0 auto'}}>
      {BLOG_POSTS.map((p,i)=>(
        <article key={p.slug} onClick={()=>onOpen(p)} style={{display:'grid',gridTemplateColumns:i===0?'1fr':'1fr 1.6fr',gap:40,padding:'40px 0',borderTop:'1px solid var(--jy-line)',cursor:'pointer',transition:'background .2s'}}
                 onMouseEnter={e=>e.currentTarget.style.background='var(--jy-cream)'}
                 onMouseLeave={e=>e.currentTarget.style.background='transparent'}>
          {i===0 ? (
            <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:60,alignItems:'center'}}>
              <div style={{aspectRatio:'4/3',background:'var(--jy-cream)',backgroundImage:`url(${p.cover})`,backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}}/>
              <div>
                <div className="hair" style={{marginBottom:16,color:'var(--jy-yellow-deep)'}}>{p.tag} · {p.date}</div>
                <h2 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(32px,4.5vw,64px)',lineHeight:.95,letterSpacing:'-.02em',marginBottom:20}}>{p.title}</h2>
                <p style={{fontSize:16,color:'var(--jy-mid)',lineHeight:1.65,marginBottom:24}}>{p.excerpt}</p>
                <span style={{fontSize:12,letterSpacing:'.16em',textTransform:'uppercase',fontWeight:600}}>Leer artículo <Icon name="arrow" size={12} style={{verticalAlign:'middle',marginLeft:4}}/></span>
              </div>
            </div>
          ) : (
            <>
              <div style={{aspectRatio:'4/3',background:'var(--jy-cream)',backgroundImage:`url(${p.cover})`,backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center'}}/>
              <div>
                <div className="hair" style={{marginBottom:14,color:'var(--jy-yellow-deep)'}}>{p.tag} · {p.date} · {p.read}</div>
                <h2 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(28px,3.5vw,44px)',lineHeight:1,letterSpacing:'-.02em',marginBottom:16}}>{p.title}</h2>
                <p style={{fontSize:15,color:'var(--jy-mid)',lineHeight:1.65}}>{p.excerpt}</p>
              </div>
            </>
          )}
        </article>
      ))}
    </section>
  </div>
);

const BlogPost2 = ({ post, onNav }) => (
  <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)'}}>
    <article style={{padding:'0 40px 120px',maxWidth:780,margin:'0 auto'}}>
      <button onClick={()=>onNav('blog')} style={{fontSize:12,letterSpacing:'.12em',textTransform:'uppercase',fontWeight:600,marginBottom:40,display:'inline-flex',alignItems:'center',gap:8}}>
        <Icon name="arrowl" size={14}/> Volver al blog
      </button>
      <div className="hair" style={{marginBottom:20,color:'var(--jy-yellow-deep)'}}>{post.tag} · {post.date} · {post.read}</div>
      <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(38px,5.5vw,72px)',lineHeight:.95,letterSpacing:'-.03em',marginBottom:40}}>{post.title}</h1>
      <div style={{aspectRatio:'16/10',background:'var(--jy-cream)',backgroundImage:`url(${post.cover})`,backgroundSize:'contain',backgroundRepeat:'no-repeat',backgroundPosition:'center',marginBottom:60}}/>
      <div style={{fontSize:17,lineHeight:1.8,color:'var(--jy-ink)',fontWeight:300}}>
        {post.body.map((b,i)=>{
          if (b.type==='h2') return <h2 key={i} style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:32,letterSpacing:'-.015em',marginTop:48,marginBottom:16}}>{b.text}</h2>;
          return <p key={i} style={{marginBottom:22}}>{b.text}</p>;
        })}
      </div>
    </article>
  </div>
);

// ───────────── CONTACTO ─────────────
const Contacto2 = ({ onNav }) => (
  <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)'}}>
    <section style={{padding:'0 40px 80px',maxWidth:1400,margin:'0 auto'}}>
      <div className="hair" style={{marginBottom:16}}>Contacto</div>
      <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(56px,10vw,140px)',lineHeight:.88,letterSpacing:'-.035em',marginBottom:40,maxWidth:'12ch'}}>
        Hablemos <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>de café.</em>
      </h1>
      <div style={{display:'grid',gridTemplateColumns:'1.2fr 1fr',gap:80,marginTop:60}} className="story-grid">
        <form onSubmit={e=>{e.preventDefault();alert('¡Mensaje enviado!')}} style={{display:'flex',flexDirection:'column',gap:14}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
            <input placeholder="Nombre" required style={ctIn}/>
            <input placeholder="Apellido" required style={ctIn}/>
          </div>
          <input type="email" placeholder="Correo" required style={ctIn}/>
          <input placeholder="Teléfono" style={ctIn}/>
          <select style={ctIn}><option>Asunto</option><option>Mayoreo B2B</option><option>Pregunta sobre producto</option><option>Suscripción</option><option>Otro</option></select>
          <textarea placeholder="Cuéntanos" rows={6} style={{...ctIn,resize:'vertical',minHeight:140}}/>
          <button type="submit" className="b2 b2-k" style={{alignSelf:'flex-start',marginTop:14}}>Enviar mensaje <Icon name="send" size={14}/></button>
        </form>
        <div>
          <div style={{padding:'32px',background:'var(--jy-black)',color:'#fff',marginBottom:16}}>
            <div className="hair-light" style={{marginBottom:12}}>Estudio & Tostaduría</div>
            <h3 style={{fontFamily:'var(--font-display)',fontSize:24,fontWeight:400,marginBottom:16}}>Las Choapas, Veracruz</h3>
            <p style={{color:'rgba(255,255,255,.7)',fontSize:14,lineHeight:1.6,marginBottom:20}}>{CONTACT.address}<br/>{CONTACT.city}</p>
            <a href={`tel:${CONTACT.phone}`} style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderTop:'1px solid rgba(255,255,255,.1)',fontSize:14}}><Icon name="phone" size={14}/> {CONTACT.phoneDisplay}</a>
            <a href={`mailto:${CONTACT.email}`} style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderTop:'1px solid rgba(255,255,255,.1)',fontSize:14}}><Icon name="mail" size={14}/> {CONTACT.email}</a>
            <a href={`https://wa.me/${CONTACT.whatsappDigits}`} target="_blank" style={{display:'flex',alignItems:'center',gap:10,padding:'10px 0',borderTop:'1px solid rgba(255,255,255,.1)',fontSize:14,color:'var(--jy-yellow)'}}><Icon name="wa" size={14}/> WhatsApp directo</a>
          </div>
          <div style={{padding:'28px 32px',background:'var(--jy-cream)'}}>
            <div className="hair" style={{marginBottom:10}}>Horario</div>
            <p style={{fontSize:14,lineHeight:1.7}}>Lun – Vie · 9:00 – 19:00<br/>Sábado · 10:00 – 15:00</p>
          </div>
        </div>
      </div>
    </section>
  </div>
);
const ctIn = { width:'100%', padding:'16px 18px', border:'1px solid var(--jy-line)', borderRadius:0, fontSize:14, fontFamily:'inherit', outline:'none', background:'#fff' };

// ───────────── SUSCRIPCIÓN ─────────────
const Suscripcion2 = ({ onNav, onAdd }) => (
  <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)'}}>
    <section style={{padding:'0 40px 80px',maxWidth:1400,margin:'0 auto',textAlign:'center'}}>
      <div className="hair" style={{marginBottom:16}}>Suscripción mensual</div>
      <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(48px,9vw,120px)',lineHeight:.88,letterSpacing:'-.035em',marginBottom:24,maxWidth:'14ch',margin:'0 auto'}}>
        Café fresco, <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>cada mes.</em>
      </h1>
      <p style={{fontSize:17,color:'var(--jy-mid)',maxWidth:560,margin:'30px auto 60px',lineHeight:1.65,fontWeight:300}}>
        Elige tu plan, tu origen, tu molienda. Lo recibes en casa el mismo día de cada mes. Cancela cuando quieras.
      </p>
    </section>
    <section style={{padding:'0 40px 120px',maxWidth:1400,margin:'0 auto'}}>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:14}} className="origins-grid">
        {SUSCRIPCIONES.map(s=>(
          <div key={s.id} style={{background:s.featured?'var(--jy-black)':'#fff',color:s.featured?'#fff':'var(--jy-black)',padding:'48px 36px',border:s.featured?'none':'1px solid var(--jy-line)',position:'relative'}}>
            {s.featured && <div style={{position:'absolute',top:20,right:20,background:'var(--jy-yellow)',color:'var(--jy-black)',padding:'6px 12px',fontSize:10,letterSpacing:'.18em',textTransform:'uppercase',fontWeight:700,borderRadius:999}}>Más popular</div>}
            <div style={{fontSize:11,letterSpacing:'.24em',textTransform:'uppercase',opacity:.6,fontWeight:600,marginBottom:16}}>{s.qty}</div>
            <h3 style={{fontFamily:'var(--font-display)',fontWeight:400,fontSize:32,letterSpacing:'-.02em',marginBottom:12}}>{s.name}</h3>
            <div style={{display:'flex',alignItems:'baseline',gap:8,marginBottom:24}}>
              <span style={{fontFamily:'var(--font-display)',fontWeight:500,fontSize:56}}>${s.price}</span>
              <span style={{fontSize:12,opacity:.6}}>MXN/mes</span>
            </div>
            <p style={{fontSize:14,opacity:.8,lineHeight:1.6,marginBottom:24}}>{s.desc}</p>
            <ul style={{listStyle:'none',padding:0,margin:'0 0 32px',display:'flex',flexDirection:'column',gap:10}}>
              {s.perks.map(p=>(<li key={p} style={{display:'flex',gap:10,fontSize:14}}><Icon name="check" size={16} style={{color:s.featured?'var(--jy-yellow)':'var(--jy-black)',flexShrink:0,marginTop:2}}/>{p}</li>))}
            </ul>
            <a href="#checkout" className={`b2 ${s.featured?'b2-y':'b2-k'}`} style={{width:'100%',justifyContent:'center',display:'flex',alignItems:'center'}} onClick={(e)=>{e.preventDefault();onAdd({id:'suscripcion-'+s.id,name:'Suscripción '+s.name,price:s.price,image:'',desc:s.qty,category:'Suscripción'},1,'Grano');onNav('checkout')}}>Suscribirme <Icon name="arrow" size={14}/></a>
          </div>
        ))}
      </div>
    </section>
  </div>
);

// ───────────── FAQ ─────────────
const FAQ2 = ({ onNav }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="page" style={{paddingTop:'calc(var(--nav-h) + 60px)'}}>
      <section style={{padding:'0 40px 120px',maxWidth:1000,margin:'0 auto'}}>
        <div className="hair" style={{marginBottom:16}}>Preguntas frecuentes</div>
        <h1 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(48px,8vw,110px)',lineHeight:.88,letterSpacing:'-.035em',marginBottom:60}}>
          Lo que más <em style={{color:'var(--jy-yellow-deep)',fontStyle:'italic',fontWeight:400}}>nos preguntan.</em>
        </h1>
        {FAQS.map((f,i)=>(
          <div key={i} style={{borderTop:'1px solid var(--jy-line)',borderBottom:i===FAQS.length-1?'1px solid var(--jy-line)':'none'}}>
            <button onClick={()=>setOpen(open===i?-1:i)} style={{width:'100%',padding:'32px 0',display:'flex',justifyContent:'space-between',alignItems:'center',textAlign:'left',gap:40}}>
              <span style={{fontFamily:'var(--font-display)',fontSize:'clamp(20px,2.5vw,28px)',fontWeight:400,letterSpacing:'-.01em'}}>{f.q}</span>
              <Icon name={open===i?'minus':'plus'} size={20} style={{flexShrink:0}}/>
            </button>
            {open===i && <div style={{paddingBottom:32,fontSize:16,color:'var(--jy-ink)',lineHeight:1.7,fontWeight:300,maxWidth:'70ch'}}>{f.a}</div>}
          </div>
        ))}
      </section>
    </div>
  );
};

// ───────────── CAFETERÍAS B2B ─────────────
const Cafeterias2 = ({ onNav }) => (
  <div className="page">
    <Hero2
      kicker="Programa mayoreo · B2B"
      title="Para tu"
      titleEm="cafetería."
      sub="Precios especiales desde 5 kg/mes, muestra gratis, facturación, crédito y capacitación de barista. Todo lo que necesitas para servir café mexicano de especialidad."
      video="https://videos.pexels.com/video-files/8112957/8112957-hd_1920_1080_25fps.mp4"
      ctaPrimary={{ label:'Solicitar muestra', onClick:()=>{ const f = document.getElementById('b2b-form'); if(f) f.scrollIntoView({behavior:'smooth'}) } }}
      ctaSecondary={{ label:'WhatsApp directo', onClick:()=>window.open(`https://wa.me/${CONTACT.whatsappDigits}`,'_blank') }}
    />
    <section className="sec">
      <div className="sec-head">
        <div className="sec-num">01/</div>
        <div>
          <div className="hair" style={{marginBottom:20}}>Beneficios</div>
          <h2 className="sec-title">Todo lo que necesita <em>tu negocio.</em></h2>
        </div>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:2,background:'var(--jy-line)'}} className="origins-grid">
        {[
          { t:'Precio mayoreo', d:'Desde 5 kg/mes, escalado por volumen.' },
          { t:'Muestra gratis', d:'Probamos contigo antes del primer pedido.' },
          { t:'Facturación', d:'Con RFC, crédito disponible.' },
          { t:'Capacitación', d:'Barista training en pedidos mayores.' },
          { t:'Asesoría', d:'Elegimos origen y molienda contigo.' },
          { t:'Logística', d:'Entregas programadas, stock asegurado.' }
        ].map(b=>(
          <div key={b.t} style={{background:'var(--jy-cream)',padding:'48px 32px'}}>
            <h4 style={{fontFamily:'var(--font-display)',fontSize:26,fontWeight:400,marginBottom:10}}>{b.t}</h4>
            <p style={{fontSize:14,color:'var(--jy-ink)',lineHeight:1.6,fontWeight:300}}>{b.d}</p>
          </div>
        ))}
      </div>
    </section>
    <section id="b2b-form" className="sec sec-paper">
      <div className="sec-head">
        <div className="sec-num sec-num-dark">02/</div>
        <div>
          <div className="hair" style={{marginBottom:20}}>Solicita tu muestra</div>
          <h2 className="sec-title">Empecemos a <em>trabajar juntos.</em></h2>
        </div>
      </div>
      <form onSubmit={e=>{e.preventDefault();alert('¡Gracias! Te contactaremos pronto.')}} style={{maxWidth:700,margin:'0 auto',display:'flex',flexDirection:'column',gap:14,background:'#fff',padding:48}}>
        <input placeholder="Nombre del negocio" required style={ctIn}/>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <input placeholder="Nombre del contacto" required style={ctIn}/>
          <input placeholder="Puesto" style={ctIn}/>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:14}}>
          <input type="email" placeholder="Correo" required style={ctIn}/>
          <input placeholder="Teléfono / WhatsApp" required style={ctIn}/>
        </div>
        <select required style={ctIn}>
          <option value="">Volumen estimado mensual</option>
          <option>5 - 10 kg</option><option>10 - 25 kg</option><option>25 - 50 kg</option><option>50+ kg</option>
        </select>
        <textarea placeholder="¿Qué orígenes te interesan? ¿Tienes preferencia de perfil?" rows={4} style={{...ctIn,resize:'vertical',minHeight:120}}/>
        <button type="submit" className="b2 b2-k" style={{alignSelf:'flex-start',marginTop:14}}>Solicitar muestra gratis <Icon name="send" size={14}/></button>
      </form>
    </section>
  </div>
);

Object.assign(window, { Quienes2, Recompensas2, Blog2, BlogPost2, Contacto2, Suscripcion2, FAQ2, Cafeterias2 });
// Café La Julia v2 — Nav + Footer + Julieta AI

const Nav2 = ({ page, onNav, cartCount = 0 }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // On light pages (not home/tienda/quienes), force light nav
  const lightPages = ['blog','faq','contacto','carrito','checkout','suscripcion','producto','recompensas'];
  const isLight = lightPages.includes(page);

  const cls = 'n2 ' + (isLight ? 'light' : (scrolled ? 'solid' : 'transparent'));

  const links = [
    { id:'home', label:'Inicio' },
    { id:'quienes', label:'Quiénes somos' },
    { id:'recompensas', label:'Recompensas' },
    { id:'tienda', label:'Tienda' },
    { id:'blog', label:'Blog' },
    { id:'contacto', label:'Contacto' }
  ];

  return (
    <>
      <nav className={cls}>
        <a className="n2-logo" href="#home" onClick={e=>{e.preventDefault();onNav('home')}}>
          <img src="../../assets/logo-pagina.png" alt="Café La Julia" />
        </a>
        <ul className="n2-links">
          {links.map(l=>(
            <li key={l.id}>
              <a href={`#${l.id}`} className={page===l.id?'active':''} onClick={e=>{e.preventDefault();onNav(l.id)}}>{l.label}</a>
            </li>
          ))}
        </ul>
        <div className="n2-right">
          <a href="#carrito" className="n2-cart" onClick={e=>{e.preventDefault();onNav('carrito')}}>
            <Icon name="bag" size={16} />
            <span>Carrito ({cartCount})</span>
          </a>
          <button className="n2-burger" onClick={()=>setMenuOpen(true)} aria-label="Abrir menú">
            <Icon name="menu" size={18} />
          </button>
        </div>
      </nav>

      {menuOpen && (
        <div style={{position:'fixed',inset:0,background:'var(--jy-black)',color:'#fff',zIndex:300,display:'flex',flexDirection:'column',animation:'pageIn .3s'}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'22px 20px',borderBottom:'1px solid rgba(255,255,255,.1)'}}>
            <span className="n2-logo-word">La Julia</span>
            <button onClick={()=>setMenuOpen(false)} style={{width:40,height:40,border:'1px solid rgba(255,255,255,.3)',borderRadius:'50%',display:'flex',alignItems:'center',justifyContent:'center',color:'#fff'}}>
              <Icon name="close" size={18} />
            </button>
          </div>
          <div style={{flex:1,padding:'40px 20px',display:'flex',flexDirection:'column',gap:4}}>
            {links.map(l=>(
              <a key={l.id} href={`#${l.id}`} onClick={e=>{e.preventDefault();onNav(l.id);setMenuOpen(false)}}
                 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:42,letterSpacing:'-.02em',padding:'14px 0',color:page===l.id?'var(--jy-yellow)':'#fff',borderBottom:'1px solid rgba(255,255,255,.08)'}}>
                {l.label}
              </a>
            ))}
          </div>
        </div>
      )}
    </>
  );
};

// ───────────── FOOTER ─────────────
const Footer2 = ({ onNav }) => (
  <footer className="foot">
    <div className="foot-top">
      <div className="foot-brand">
        <h3>Café de especialidad <em>mexicano</em>.</h3>
        <p>Tostamos en Las Choapas, Veracruz. Trabajamos directo con productores de Chiapas, Puebla y Veracruz para llevarte café fresco, trazable y con carácter.</p>
        <div className="foot-social">
          <a href="https://www.facebook.com/cafelajuliaoficial" target="_blank" rel="noopener" aria-label="Facebook"><Icon name="fb" size={16}/></a>
          <a href="https://www.instagram.com/cafelajuliaoficial" target="_blank" rel="noopener" aria-label="Instagram"><Icon name="ig" size={16}/></a>
          <a href={`https://wa.me/${CONTACT.whatsappDigits}`} target="_blank" rel="noopener" aria-label="WhatsApp"><Icon name="wa" size={16}/></a>
        </div>
      </div>
      <div className="foot-col">
        <h5>Comprar</h5>
        <ul>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Todo el café</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Tazas</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('suscripcion')}}>Suscripción</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('cafeterias')}}>Mayoreo B2B</a></li>
        </ul>
      </div>
      <div className="foot-col">
        <h5>Compañía</h5>
        <ul>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('quienes')}}>Quiénes somos</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('blog')}}>Blog</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('recompensas')}}>Club La Julia</a></li>
          <li><a href="#" onClick={e=>{e.preventDefault();onNav('faq')}}>Preguntas</a></li>
        </ul>
      </div>
      <div className="foot-col">
        <h5>Contacto</h5>
        <ul>
          <li>{CONTACT.address}</li>
          <li>{CONTACT.city}</li>
          <li><a href={`tel:${CONTACT.phone}`}>{CONTACT.phoneDisplay}</a></li>
          <li><a href={`mailto:${CONTACT.email}`}>{CONTACT.email}</a></li>
        </ul>
      </div>
    </div>
    <div className="foot-bot">
      <span>© 2026 Café La Julia. Tostado con cariño en Las Choapas, Ver.</span>
      <span style={{display:'flex',gap:20}}>
        <a href="#">Términos</a>
        <a href="#">Privacidad</a>
        <a href="#">Envíos</a>
      </span>
    </div>
  </footer>
);

// ───────────── JULIA AI ─────────────
const JL_INTRO = "¡Hola! Soy Julia, tu barista de cabecera en La Julia 🌿 ¿En qué te ayudo hoy? Puedo recomendarte café, explicarte métodos, o resolver dudas sobre envíos.";
const JL_QUICK = [
  "¿Cuál me recomiendas?",
  "Diferencia Chiapas vs Veracruz",
  "¿Cómo funciona la suscripción?",
  "¿Hacen envíos a CDMX?",
  "Mayoreo para cafetería"
];

const Julieta = () => {
  const [open, setOpen] = React.useState(false);
  const [msgs, setMsgs] = React.useState([{ role:'bot', text: JL_INTRO }]);
  const [input, setInput] = React.useState('');
  const [typing, setTyping] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs, typing]);

  const send = async (textOverride) => {
    const text = (textOverride ?? input).trim();
    if (!text || typing) return;
    setInput('');
    setMsgs(m => [...m, { role:'user', text }]);
    setTyping(true);
    try {
      const system = `Eres Julia, barista de Café La Julia — tostadora mexicana en Las Choapas, Veracruz. Habla cercana y cálida, como la barista del barrio. Usa tú, respuestas cortas (2-4 frases), 0-1 emoji natural. Conoces los cafés:
- Chiapas (Concordia, Finca Nuevo México, Bourbon Rosado, 1,300 msnm, semi-lavado): chocolate, naranja, panela, caramelo. Acidez brillante. Desde $205.
- Veracruz (Córdoba, Sarchimor, lavado, 1,200-1,400 msnm): chocolate, nuez, cacao. Balanceado, día a día. Desde $205.
- Puebla (Tlacuilotepec, Finca Ofelia, Catimor, 1,400 msnm, lavado): avellana, durazno, miel. Floral. Desde $360.
- Robusta Veracruz: intenso, cremoso, perfecto espresso. Desde $200.
- Tazas cerámica 12/16/26 oz, $110-$250.
Suscripción: Iniciación $299 (500g), Estándar $499 (1kg), Premium $699 (1kg medio+oscuro). Envío gratis en suscripción.
Envíos: CDMX 2-3 días, ciudades 3-5, resto 5-7. Recién tostado semanal.
B2B: desde 5kg/mes, precios especiales, muestra gratis. Escribir a ventas@cafelajulia.com.
Club La Julia: 1 pto por cada $10, 200 pts = $50 descuento.
No inventes datos. Si no sabes algo, manda a ventas@cafelajulia.com o WhatsApp ${CONTACT.whatsapp}.`;
      const reply = await window.claude.complete({
        messages: [
          { role:'user', content: system + '\n\nUsuario: ' + text }
        ]
      });
      setMsgs(m => [...m, { role:'bot', text: reply }]);
    } catch (e) {
      setMsgs(m => [...m, { role:'bot', text: 'Ay, se me cayó la conexión un segundín. ¿Me repites? O escríbenos por WhatsApp: ' + CONTACT.whatsapp }]);
    } finally {
      setTyping(false);
    }
  };

  if (!open) {
    return (
      <button className="jl-fab" onClick={()=>setOpen(true)}>
        <div className="jl-fab-avatar">J</div>
        <div className="jl-fab-text">
          <span className="jl-fab-name">Julia</span>
          <span className="jl-fab-status">Tu barista · En línea</span>
        </div>
      </button>
    );
  }

  return (
    <div className="jl-panel">
      <div className="jl-head">
        <div className="jl-head-avatar">J</div>
        <div className="jl-head-info">
          <div className="jl-head-name">Julia</div>
          <div className="jl-head-sub">Tu barista · Respondo al tiro</div>
        </div>
        <button className="jl-close" onClick={()=>setOpen(false)} aria-label="Cerrar">
          <Icon name="close" size={16} />
        </button>
      </div>

      <div className="jl-msgs" ref={scrollRef}>
        {msgs.map((m,i)=>(
          <div key={i} className={`jl-msg ${m.role}`}>{m.text}</div>
        ))}
        {typing && (
          <div className="jl-msg typing"><span></span><span></span><span></span></div>
        )}
      </div>

      {msgs.length <= 2 && !typing && (
        <div className="jl-quick">
          {JL_QUICK.map((q,i)=>(
            <button key={i} className="jl-quick-chip" onClick={()=>send(q)}>{q}</button>
          ))}
        </div>
      )}

      <form className="jl-form" onSubmit={e=>{e.preventDefault();send()}}>
        <input
          value={input}
          onChange={e=>setInput(e.target.value)}
          placeholder="Pregúntame lo que quieras…"
          disabled={typing}
        />
        <button type="submit" className="jl-send" disabled={!input.trim() || typing} aria-label="Enviar">
          <Icon name="send" size={16} />
        </button>
      </form>
    </div>
  );
};

const Julia = Julieta; // alias
Object.assign(window, { Nav2, Footer2, Julia, Julieta });
// Café La Julia v2 — Home

const VIDEO_HERO = '../../assets/videos/hero-home2.mp4';
const VIDEO_HERO_POSTER = 'https://images.pexels.com/videos/8981421/pexels-photo-8981421.jpeg';
const VIDEO_CLIP_1 = '../../assets/videos/clip1.mp4';
const VIDEO_CLIP_2 = '../../assets/videos/clip2.mp4';
const VIDEO_PAQUETES_BG = '../../assets/videos/paquetes-bg.mp4';
const FINCA_IMG = 'https://images.unsplash.com/photo-1611174797136-5e4e57dba0cc?w=2000&auto=format&fit=crop';

const Hero2 = ({ onNav, kicker, title, titleEm, sub, video = VIDEO_HERO, poster = VIDEO_HERO_POSTER, ctaPrimary, ctaSecondary }) => {
  const amberRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      const vh = window.innerHeight;
      const amberOp = Math.max(0, 1 - (y / (vh * 0.7)));
      if (amberRef.current) amberRef.current.style.opacity = amberOp;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section className="hero2">
      <video className="hero2-video" autoPlay muted loop playsInline poster={poster}>
        <source src={video} type="video/mp4" />
      </video>
      <div className="hero2-scrim" />
      <div className="hero2-amber" ref={amberRef} />
      <div className="hero2-grain" />
      <div className="hero2-inner">
        <div className="hero2-eyebrow">
          <span className="hair-light">{kicker}</span>
        </div>
        <h1 className="hero2-title">
          {title} <em>{titleEm}</em>
        </h1>
        <p className="hero2-sub">{sub}</p>
        <div className="hero2-ctas">
          {ctaPrimary && <button className="b2 b2-y" onClick={ctaPrimary.onClick}>{ctaPrimary.label} <Icon name="arrow" size={14}/></button>}
          {ctaSecondary && <button className="b2 b2-o" onClick={ctaSecondary.onClick}>{ctaSecondary.label}</button>}
        </div>
      </div>
      <div className="hero2-scroll">Scroll</div>
    </section>
  );
};

const Marquee = ({ phrases, yellow = false }) => (
  <div className={`marquee ${yellow ? 'marquee-yellow' : ''}`}>
    <div className="marquee-track">
      {[...phrases, ...phrases, ...phrases].map((p,i)=>(<span key={i}>{p}</span>))}
    </div>
  </div>
);

// ───── Clip strip — dos videos cortos a ancho completo, alternados con copy ─────
const ClipStrip = () => (
  <section className="clipstrip">
    <div className="clipstrip-row">
      <div className="clipstrip-video">
        <video autoPlay muted loop playsInline>
          <source src={VIDEO_CLIP_1} type="video/mp4" />
        </video>
      </div>
      <div className="clipstrip-copy">
        <div className="hair" style={{marginBottom:18}}>Del grano a la taza</div>
        <h3 className="clipstrip-h">Tostamos <em>cada semana</em>, no cada mes.</h3>
        <p className="clipstrip-p">Lotes pequeños, en nuestro tostador artesanal en Las Choapas. El café que tomas hoy salió del tueste hace menos de siete días. Eso se nota.</p>
      </div>
    </div>
    <div className="clipstrip-row reverse">
      <div className="clipstrip-video">
        <video autoPlay muted loop playsInline>
          <source src={VIDEO_CLIP_2} type="video/mp4" />
        </video>
      </div>
      <div className="clipstrip-copy">
        <div className="hair" style={{marginBottom:18}}>Origen trazable</div>
        <h3 className="clipstrip-h">Sabes <em>de dónde</em> viene cada bolsa.</h3>
        <p className="clipstrip-p">Finca, productor, variedad, altitud y proceso. Lo imprimimos en cada empaque para que conozcas a quien hizo posible tu taza.</p>
      </div>
    </div>
  </section>
);

// Horizontal scroll section — productos destacados (editorial pro)
const HScroll = ({ title, titleEm, products, onProductClick, onNav }) => {
  const trackRef = React.useRef(null);
  const scroll = (dir) => {
    if (trackRef.current) trackRef.current.scrollBy({ left: dir * 404, behavior: 'smooth' });
  };
  return (
    <section className="hscroll">
      <div className="hscroll-head">
        <div className="hscroll-num">02</div>
        <div>
          <div className="hair">Catálogo · Edición de temporada</div>
          <h2 className="sec-title" style={{margin:0}}>{title} <em>{titleEm}</em></h2>
        </div>
        <div className="hscroll-meta">
          <strong>{products.length} cafés</strong>
          Tres orígenes mexicanos.<br/>Tostado en pedidos pequeños cada semana.
        </div>
      </div>
      <div className="hscroll-track" ref={trackRef}>
        {products.map((p,i)=>(
          <article key={p.id} className="hscroll-card" onClick={()=>onProductClick(p)}>
            <div className="hscroll-card-tag">{String(i+1).padStart(2,'0')} · {p.origin?.split('·')[0]?.trim() || 'La Julia'}</div>
            {p.featured && <div className="prod-card-fav" style={{top:14,right:14}}>Destacado</div>}
            <div className="prod-card-img">
              <img src={p.img} alt={p.name} loading="lazy" />
            </div>
            <h3 className="prod-card-name" style={{fontSize:26,marginBottom:6}}>{p.name}</h3>
            <div className="prod-card-origin" style={{marginBottom:18}}>{p.variedad ? `${p.variedad} · ${p.proceso || ''}` : p.size}</div>
            {p.notas && <div style={{fontSize:12.5,color:'var(--jy-mid)',fontWeight:300,marginBottom:18,lineHeight:1.5,fontStyle:'italic'}}>Notas: {p.notas.slice(0,3).join(' · ')}</div>}
            <div className="prod-card-meta">
              <div className="prod-card-price">${p.price}<small>MXN · {p.unit}</small></div>
              <span className="prod-card-add">Ver detalle <Icon name="arrow" size={11} style={{marginLeft:4}}/></span>
            </div>
          </article>
        ))}
      </div>
      <div className="hscroll-foot">
        <a href="#" className="hscroll-cta" onClick={e=>{e.preventDefault();onNav('tienda')}}>
          Ver toda la tienda →
        </a>
        <div className="hscroll-ctrls">
          <button className="hscroll-btn" onClick={()=>scroll(-1)} aria-label="Anterior"><Icon name="arrowl" size={16}/></button>
          <button className="hscroll-btn" onClick={()=>scroll(1)} aria-label="Siguiente"><Icon name="arrow" size={16}/></button>
        </div>
      </div>
    </section>
  );
};

const ProdCard = ({ p, onClick, big = false }) => (
  <article className="prod-card" onClick={onClick} style={big ? {padding:'56px 36px 44px'} : null}>
    <div className="prod-card-tag">{p.origin?.split('·')[0]?.trim() || 'La Julia'}</div>
    {p.featured && <div className="prod-card-fav">Destacado</div>}
    <div className="prod-card-img" style={{aspectRatio: big ? '4/5' : '1/1'}}>
      <img src={p.img} alt={p.name} loading="lazy" />
    </div>
    <h3 className="prod-card-name">{p.name}</h3>
    <div className="prod-card-origin">{p.variedad ? `${p.variedad} · ${p.proceso || ''}` : p.size}</div>
    <div className="prod-card-meta">
      <div className="prod-card-price">${p.price}<small>MXN · {p.unit}</small></div>
      <span className="prod-card-add">Agregar <Icon name="arrow" size={11} style={{marginLeft:4}}/></span>
    </div>
  </article>
);

const Parallax = ({ bg, kicker, title, titleEm, sub, cta, onCta }) => {
  const bgRef = React.useRef(null);
  React.useEffect(() => {
    const onScroll = () => {
      if (!bgRef.current) return;
      const rect = bgRef.current.parentElement.getBoundingClientRect();
      const y = rect.top * -0.25;
      bgRef.current.style.transform = `translateY(${y}px)`;
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="parallax parallax-video-bg">
      <video className="parallax-bgvideo" autoPlay muted loop playsInline>
        <source src={VIDEO_PAQUETES_BG} type="video/mp4" />
      </video>
      <div className="parallax-vscrim" />
      <div className="parallax-inner">
        <div className="hair-light" style={{marginBottom:24,display:'inline-flex',alignItems:'center',gap:12,justifyContent:'center'}}>
          <span style={{width:32,height:1,background:'var(--jy-yellow)'}}></span>
          {kicker}
        </div>
        <h2 className="parallax-title">{title} <em>{titleEm}</em></h2>
        {sub && <p style={{fontSize:17,color:'rgba(255,255,255,.92)',fontWeight:300,maxWidth:640,margin:'0 auto 36px',lineHeight:1.65}}>{sub}</p>}
        {cta && <button className="b2 b2-y" onClick={onCta}>{cta} <Icon name="arrow" size={14}/></button>}
      </div>
    </section>
  );
};

// ───── YouTube testimonial card with lightbox ─────
const YTCard = ({ v, onPlay }) => (
  <article className="ytcard" onClick={()=>onPlay(v)} style={{background:v.bg}}>
    <div className="ytcard-thumb">
      <img src={v.thumb} alt={v.name} loading="lazy" />
      <div className="ytcard-play">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      </div>
    </div>
    <div className="ytcard-body">
      <div className="ytcard-handle">{v.handle}</div>
      <h4 className="ytcard-name">{v.name}</h4>
      {v.role && <div className="ytcard-role" style={{fontSize:11,letterSpacing:'.18em',textTransform:'uppercase',color:'rgba(255,255,255,.7)',fontWeight:700,marginTop:-4,marginBottom:10}}>{v.role}</div>}
      <p className="ytcard-quote">"{v.quote}"</p>
    </div>
  </article>
);

const YTLightbox = ({ video, onClose }) => {
  React.useEffect(()=>{
    if (!video) return;
    const k = (e)=>{ if(e.key==='Escape') onClose(); };
    window.addEventListener('keydown', k);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return ()=>{ window.removeEventListener('keydown', k); document.body.style.overflow=prev; };
  },[video, onClose]);
  if (!video) return null;
  return (
    <div className="yt-lb" onClick={onClose}>
      <button className="yt-lb-close" onClick={onClose}>×</button>
      <div className="yt-lb-frame" onClick={e=>e.stopPropagation()} style={{position:'relative'}}>
        <iframe
          src={`https://www.youtube-nocookie.com/embed/${video.videoId}?autoplay=1&rel=0&playsinline=1&modestbranding=1`}
          title={video.name}
          frameBorder="0"
          allow="autoplay; encrypted-media; picture-in-picture; web-share"
          allowFullScreen
        />
        <a href={`https://www.youtube.com/shorts/${video.videoId}`} target="_blank" rel="noopener noreferrer"
           style={{position:'absolute',bottom:14,left:'50%',transform:'translateX(-50%)',background:'var(--jy-yellow)',color:'var(--jy-black)',padding:'10px 20px',borderRadius:999,fontSize:12,fontWeight:700,letterSpacing:'.1em',textTransform:'uppercase',textDecoration:'none',display:'inline-flex',alignItems:'center',gap:8,boxShadow:'0 4px 16px rgba(0,0,0,.4)'}}>
          Abrir en YouTube ↗
        </a>
      </div>
    </div>
  );
};

// ───── B2B form ─────
const B2BForm = () => {
  const [sent, setSent] = React.useState(false);
  return (
    <section className="b2b">
      <div className="b2b-inner">
        <div className="b2b-left">
          <div className="hair-light" style={{marginBottom:20}}>Mayoreo · Cafeterías · Oficinas</div>
          <h2 className="b2b-h">Sirve La Julia en <em>tu negocio.</em></h2>
          <p className="b2b-p">Café de especialidad mexicano para cafeterías, restaurantes, hoteles y oficinas. Precios de mayoreo, soporte de barista, y entrega semanal directo del tostador.</p>
          <ul className="b2b-list">
            <li><span>·</span> Desde 5 kg semanales</li>
            <li><span>·</span> Capacitación gratuita para tu equipo</li>
            <li><span>·</span> Marca blanca disponible</li>
            <li><span>·</span> Cobertura nacional</li>
          </ul>
        </div>
        <div className="b2b-right">
          {sent ? (
            <div className="b2b-thanks">
              <div className="b2b-tick">✓</div>
              <h3>¡Gracias!</h3>
              <p>Te contactamos en menos de 24 horas hábiles.</p>
            </div>
          ) : (
            <form className="b2b-form" onSubmit={e=>{e.preventDefault();setSent(true);}}>
              <div className="b2b-row">
                <label>
                  <span>Nombre</span>
                  <input type="text" required placeholder="Tu nombre completo"/>
                </label>
                <label>
                  <span>Negocio</span>
                  <input type="text" required placeholder="Nombre del negocio"/>
                </label>
              </div>
              <div className="b2b-row">
                <label>
                  <span>Correo</span>
                  <input type="email" required placeholder="tu@negocio.mx"/>
                </label>
                <label>
                  <span>Teléfono</span>
                  <input type="tel" placeholder="55 1234 5678"/>
                </label>
              </div>
              <label>
                <span>Tipo de negocio</span>
                <select defaultValue="">
                  <option value="" disabled>Selecciona una opción</option>
                  <option>Cafetería</option>
                  <option>Restaurante</option>
                  <option>Hotel</option>
                  <option>Oficina</option>
                  <option>Marca blanca / Distribuidor</option>
                  <option>Otro</option>
                </select>
              </label>
              <label>
                <span>Cuéntanos más (opcional)</span>
                <textarea rows="3" placeholder="Volumen estimado, ubicación, dudas…"/>
              </label>
              <button type="submit" className="b2 b2-y" style={{justifyContent:'center'}}>
                Solicitar contacto <Icon name="arrow" size={14}/>
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

const Home2 = ({ onNav }) => {
  const allBeans = PRODUCTS.filter(p => p.originTag !== 'accesorio').slice(0, 8);
  const [ytOpen, setYtOpen] = React.useState(null);

  return (
    <div className="page">
      <Hero2
        kicker="Fincas 100% mexicanas · Tueste fresco semanal"
        title="El café que"
        titleEm="despierta a México."
        sub="Seleccionamos y tostamos café de especialidad de Chiapas, Veracruz y Puebla. Directo del productor a tu taza, con origen trazable y carácter único."
        ctaPrimary={{ label:'Comprar café', onClick:()=>onNav('tienda') }}
        ctaSecondary={{ label:'Nuestra historia', onClick:()=>onNav('quienes') }}
      />

      <Marquee phrases={[
        "Tostado cada semana",
        "Origen trazable",
        "Envío a todo México",
        "Productor directo",
        "Café de especialidad"
      ]} />

      {/* Section 01 — Orígenes */}
      <section className="sec">
        <div className="sec-head">
          <div className="sec-num">01/</div>
          <div>
            <div className="hair" style={{marginBottom:20}}>Nuestros orígenes</div>
            <h2 className="sec-title">Tres regiones, <em>un mismo cariño</em> por el café.</h2>
          </div>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:2,background:'var(--jy-line)'}} className="origins-grid">
          {[
            { tag:'Chiapas', loc:'Concordia · 1,300 msnm', desc:'Bourbon Rosado, acidez brillante, notas de naranja y panela.', img:'https://cafelajulia.com/wp-content/uploads/2026/03/20-1.png', slug:'chiapas-500' },
            { tag:'Veracruz', loc:'Córdoba · 1,200-1,400 msnm', desc:'Sarchimor, balanceado, chocolate y nuez — favorito diario.', img:'https://cafelajulia.com/wp-content/uploads/2023/09/11-3.png', slug:'veracruz-1kg' },
            { tag:'Puebla', loc:'Tlacuilotepec · 1,400 msnm', desc:'Catimor, floral y suave, avellana y miel.', img:'https://cafelajulia.com/wp-content/uploads/2026/03/31.png', slug:'puebla-500' }
          ].map(o => {
            const p = PRODUCTS.find(x=>x.id===o.slug);
            return (
              <div key={o.tag} style={{background:'var(--jy-cream)',padding:'60px 40px',display:'flex',flexDirection:'column',cursor:'pointer',transition:'background .3s'}}
                   onMouseEnter={e=>e.currentTarget.style.background='var(--jy-paper)'}
                   onMouseLeave={e=>e.currentTarget.style.background='var(--jy-cream)'}
                   onClick={()=>{ if(p) onNav('producto', p) }}>
                <div style={{aspectRatio:'1/1',display:'flex',alignItems:'center',justifyContent:'center',marginBottom:28}}>
                  <img src={o.img} alt={o.tag} style={{maxHeight:'100%',objectFit:'contain',transition:'transform .5s'}} />
                </div>
                <div className="hair" style={{color:'var(--jy-yellow-deep)',marginBottom:12}}>{o.loc}</div>
                <h3 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(38px,5vw,60px)',letterSpacing:'-.025em',lineHeight:.95,marginBottom:16}}>{o.tag}</h3>
                <p style={{fontSize:15,color:'var(--jy-mid)',lineHeight:1.6,fontWeight:300,marginBottom:24}}>{o.desc}</p>
                <div style={{marginTop:'auto',fontSize:11,letterSpacing:'.18em',textTransform:'uppercase',fontWeight:600}}>Conocer origen <Icon name="arrow" size={12} style={{marginLeft:4,verticalAlign:'middle'}}/></div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Section 02 — Horizontal scroll productos */}
      <HScroll
        title="Recién"
        titleEm="tostado."
        products={allBeans}
        onProductClick={(p)=>onNav('producto', p)}
        onNav={onNav}
      />

      {/* Parallax finca */}
      <Parallax
        bg={FINCA_IMG}
        kicker="Del productor a tu taza"
        title="Relación"
        titleEm="directa."
        sub="Trabajamos mano a mano con fincas familiares en Chiapas, Veracruz y Puebla. Pagamos precio justo, visitamos cada cosecha, y compartimos el orgullo de un café mexicano que compite con los mejores del mundo."
        cta="Conoce nuestra historia"
        onCta={()=>onNav('quienes')}
      />

      {/* Section 03 — Suscripción · editorial spread */}
      <section className="sec-suscripcion">
        <div className="susc-grid">
          <aside className="susc-aside">
            <div className="susc-aside-media">
              <video autoPlay muted loop playsInline>
                <source src={VIDEO_CLIP_2} type="video/mp4" />
              </video>
            </div>
            <div className="susc-aside-meta">
              <div className="susc-aside-num">03</div>
              <div className="hair">Suscripción · Café fresco</div>
            </div>
          </aside>
          <div className="susc-main">
            <h2 className="susc-h">
              Tu café favorito, <em>sin pensarlo.</em>
            </h2>
            <p className="susc-lead">
              Recibe café tostado hace menos de 7 días, en la frecuencia que tú elijas. Cambia, pausa o cancela cuando quieras — sin trámites.
            </p>
            <ul className="susc-points">
              <li><span className="susc-dot"></span><strong>Tostado fresco</strong>·máximo 7 días desde el tueste</li>
              <li><span className="susc-dot"></span><strong>Envío gratis</strong>·a toda la república</li>
              <li><span className="susc-dot"></span><strong>Flexible</strong>·pausa, modifica o cancela en un clic</li>
              <li><span className="susc-dot"></span><strong>Acumula puntos</strong>·doble en cada envío del Club</li>
            </ul>
            <div className="susc-plans">
              {SUSCRIPCIONES.map((s,i)=>(
                <article key={s.id} className={`susc-plan ${s.featured?'is-feat':''}`} onClick={()=>onNav('suscripcion')}>
                  <div className="susc-plan-row">
                    <div className="susc-plan-name">
                      <span className="susc-plan-i">0{i+1}</span>
                      <div>
                        <div className="susc-plan-title">{s.name}{s.featured && <span className="susc-plan-tag">Recomendado</span>}</div>
                        <div className="susc-plan-qty">{s.qty}</div>
                      </div>
                    </div>
                    <div className="susc-plan-price">
                      <span className="susc-plan-num">${s.price}</span>
                      <span className="susc-plan-cur">MXN/mes</span>
                    </div>
                    <button className="susc-plan-arrow" aria-label={`Ver ${s.name}`}>
                      <Icon name="arrow" size={16}/>
                    </button>
                  </div>
                  <div className="susc-plan-perks">
                    {s.perks.slice(0,3).map((p,i)=>(<span key={i}>{p}</span>))}
                  </div>
                </article>
              ))}
            </div>
            <div className="susc-cta-row">
              <a href="#suscripcion" className="b2 b2-d" onClick={(e)=>{e.preventDefault();onNav('suscripcion')}}>Comparar planes <Icon name="arrow" size={14}/></a>
              <span className="susc-fine">Cancela cuando quieras · Envío gratis</span>
            </div>
          </div>
        </div>
      </section>

      {/* Section 04 — Testimonios YouTube + Google */}
      <section className="sec">
        <div className="sec-head">
          <div className="sec-num">04/</div>
          <div>
            <div className="hair" style={{marginBottom:20}}>Lo que dicen</div>
            <h2 className="sec-title">Recomendado por <em>quien sabe</em> de café.</h2>
          </div>
        </div>
        <div className="testi-mix">
          {VIDEO_TESTIMONIOS.map(v=>(
            <YTCard key={v.name} v={v} onPlay={setYtOpen} />
          ))}
          {TESTIMONIOS.map(t=>(
            <article key={t.name} className="testi-card testi-card-google">
              <div className="testi-source">
                <Icon name="star" size={13}/><Icon name="star" size={13}/><Icon name="star" size={13}/><Icon name="star" size={13}/><Icon name="star" size={13}/>
                <span>Google Reviews</span>
              </div>
              <p className="testi-text">"{t.text}"</p>
              <div className="testi-name">{t.name}</div>
            </article>
          ))}
        </div>
      </section>

      <YTLightbox video={ytOpen} onClose={()=>setYtOpen(null)} />

      <Marquee yellow phrases={[
        "Unidos por el café",
        "Hecho en Veracruz",
        "Del grano a la taza",
        "Tostado con cariño"
      ]} />

      {/* B2B — para negocios */}
      <B2BForm />

      {/* Newsletter / CTA final */}
      <section className="sec sec-dark" style={{textAlign:'center',paddingTop:120,paddingBottom:120}}>
        <div className="hair-light" style={{marginBottom:24}}>Newsletter · Lanzamientos y guías</div>
        <h2 style={{fontFamily:'var(--font-display)',fontWeight:300,fontSize:'clamp(44px,7vw,100px)',lineHeight:.9,letterSpacing:'-.035em',marginBottom:32,maxWidth:'14ch',margin:'0 auto 32px'}}>
          Suscríbete. <em style={{color:'var(--jy-yellow)',fontStyle:'italic',fontWeight:400}}>Tu café semanal.</em>
        </h2>
        <p style={{color:'rgba(255,255,255,.65)',maxWidth:520,margin:'0 auto 40px',fontSize:16,fontWeight:300,lineHeight:1.6}}>
          Lotes limitados, guías de método, y 10% off en tu primera compra.
        </p>
        <form onSubmit={e=>{e.preventDefault();alert('¡Gracias! Te escribiremos pronto.')}}
              style={{display:'flex',gap:10,maxWidth:480,margin:'0 auto',flexWrap:'wrap',justifyContent:'center'}}>
          <input type="email" required placeholder="tu@correo.com"
                 style={{flex:1,minWidth:240,padding:'18px 22px',borderRadius:999,border:'1px solid rgba(255,255,255,.2)',background:'transparent',color:'#fff',fontSize:14,fontFamily:'inherit',outline:'none'}}/>
          <button type="submit" className="b2 b2-y">Suscribirme <Icon name="arrow" size={14}/></button>
        </form>
      </section>
    </div>
  );
};

Object.assign(window, { Home2, Hero2, Marquee, HScroll, Parallax, ProdCard, ClipStrip, B2BForm, YTCard, YTLightbox });
// Café La Julia — Product detail + Blog

const PDP = ({ product, onBack, onAdd, onNav, products }) => {
  const p = product;
  const [molienda, setMolienda] = React.useState('grano');
  const [qty, setQty] = React.useState(1);
  const isCoffee = p.originTag !== 'accesorio';
  const related = (products || []).filter(x => x.id !== p.id && x.originTag === p.originTag).slice(0,3);

  return (
    <>
      <section className="section" style={{paddingTop:80}}>
        <div className="section-inner">
          <nav className="crumbs">
            <a href="#" onClick={e=>{e.preventDefault();onNav ? onNav('home') : onBack();}}>Inicio</a>
            <span>·</span>
            <a href="#" onClick={e=>{e.preventDefault();onBack();}}>Tienda</a>
            <span>·</span>
            <span className="crumbs-cur">{p.name}</span>
          </nav>
          <div className="pdp-grid">
            <div className="pdp-gallery">
              <div className="pdp-gallery-main">
                <img src={p.img} alt={p.name} onError={e=>e.target.style.display='none'} />
                {p.sale && <div className="product-sale" style={{top:20,left:20}}>Oferta</div>}
              </div>
              <div className="pdp-thumbs">
                {[0,1,2].map(i=>(
                  <div className="pdp-thumb" key={i}>
                    <img src={p.img} alt="" onError={e=>e.target.style.display='none'} style={{opacity:.6}} />
                  </div>
                ))}
              </div>
            </div>
            <div className="pdp-info">
              <div className="pdp-origin">{p.origin}</div>
              <h1 className="pdp-title">{p.name} <span className="pdp-size">— {p.size}</span></h1>
              {isCoffee && (
                <div className="pdp-rating">
                  {[1,2,3,4,5].map(i=>(<Icon key={i} name="star" size={14} />))}
                  <span>5.0 · 27 reseñas verificadas</span>
                </div>
              )}
              <p className="pdp-desc">{p.desc}</p>

              {isCoffee && p.variedad && (
                <div className="pdp-spec-grid">
                  <div className="pdp-spec"><span className="pdp-spec-lbl">Variedad</span><span className="pdp-spec-val">{p.variedad}</span></div>
                  <div className="pdp-spec"><span className="pdp-spec-lbl">Altura</span><span className="pdp-spec-val">{p.altura}</span></div>
                  <div className="pdp-spec"><span className="pdp-spec-lbl">Proceso</span><span className="pdp-spec-val">{p.proceso}</span></div>
                  <div className="pdp-spec"><span className="pdp-spec-lbl">Finca</span><span className="pdp-spec-val">{p.finca}</span></div>
                </div>
              )}

              {p.notas && (
                <div className="pdp-notes-block">
                  <span className="pdp-notes-lbl">Notas de cata</span>
                  <div className="pdp-notes-chips">
                    {p.notas.map((n,i)=>(<span key={i} className="pdp-note-chip">{n}</span>))}
                  </div>
                  {p.perfil && <p className="pdp-perfil">{p.perfil}</p>}
                </div>
              )}

              <div className="pdp-price-row">
                {p.priceOld && <span className="pdp-price-old">${p.priceOld}</span>}
                <span className="pdp-price">${p.price}</span>
                <span className="pdp-price-unit">MXN · {p.unit}</span>
              </div>

              {isCoffee && (
                <div className="pdp-options">
                  <div>
                    <label className="opt-label">Grado de molido</label>
                    <div className="opt-col">
                      {MOLIENDAS.map(m => (
                        <button key={m.id} className={`opt-row-chip ${molienda===m.id?'active':''}`} onClick={()=>setMolienda(m.id)}>
                          <div>
                            <div className="opt-row-chip-name">{m.label}</div>
                            <div className="opt-row-chip-hint">{m.hint}</div>
                          </div>
                          {molienda===m.id && <Icon name="check" size={18}/>}
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              )}

              <div className="pdp-actions">
                <div className="qty">
                  <button onClick={()=>setQty(Math.max(1,qty-1))} aria-label="Disminuir"><Icon name="minus" size={14}/></button>
                  <input value={qty} readOnly aria-label="Cantidad" />
                  <button onClick={()=>setQty(qty+1)} aria-label="Aumentar"><Icon name="plus" size={14}/></button>
                </div>
                <button className="btn btn-d" style={{flex:1}} onClick={()=>onAdd(p, qty)}>Añadir al carrito · ${p.price * qty}</button>
              </div>

              <div className="pdp-badges">
                {(p.badges || []).map((b,i)=>(
                  <div className="pdp-badge" key={i}>
                    <Icon name={i===0?'leaf':i===1?'flame':i===2?'shield':'truck'} size={16} />
                    <span>{b}</span>
                  </div>
                ))}
              </div>

              <p className="pdp-freshness">
                <Icon name="clock" size={14} style={{verticalAlign:'-2px',marginRight:6,color:'var(--jy-yellow)'}} />
                Tostado esta semana · Procesamos tu pedido en 1–2 días hábiles
              </p>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section soft">
          <div className="section-inner">
            <h2 className="section-title" style={{textAlign:'center',marginBottom:40}}>También te puede <em>gustar</em></h2>
            <div className="grid-3">
              {related.map(r => <ProductCard key={r.id} p={r} onOpen={(px)=>{onBack();setTimeout(()=>window.__openProduct && window.__openProduct(px),50);}} onAdd={onAdd} />)}
            </div>
          </div>
        </section>
      )}
    </>
  );
};

// BLOG INDEX ─────────────────────────────────────────────────────────────
const Blog = ({ onNav, onOpenPost }) => {
  const feat = BLOG_POSTS[0], rest = BLOG_POSTS.slice(1);
  return (
    <>
      <div className="blog-head">
        <span className="section-label" style={{display:'block',marginBottom:8}}>Guía + orígenes</span>
        <h1 style={{fontFamily:'var(--font-display)',fontSize:'clamp(2.2rem,4.5vw,3.4rem)',fontWeight:900}}>Diario de <em style={{fontStyle:'italic',color:'var(--jy-yellow)'}}>La Julia</em></h1>
        <p style={{color:'var(--jy-mid)',maxWidth:560,margin:'16px auto 0',fontWeight:300,lineHeight:1.7}}>Cómo elegir grano, diferencias entre orígenes, métodos de preparación y notas de cata. Lectura lenta, para tomar con el café.</p>
      </div>
      <section className="section" style={{paddingTop:40}}>
        <div className="section-inner">
          <article className="blog-feature" onClick={()=>onOpenPost(feat)} style={{cursor:'pointer'}}>
            <div className="blog-feature-media">
              <img src={feat.cover} alt="" onError={e=>{e.target.style.display='none';e.target.parentElement.classList.add('no-img');}} />
            </div>
            <div>
              <div className="blog-meta">{feat.tag} · {feat.date} · {feat.read}</div>
              <h2>{feat.title}</h2>
              <p>{feat.excerpt}</p>
              <a href="#" className="products-link" onClick={e=>{e.preventDefault();onOpenPost(feat)}}>Leer artículo →</a>
            </div>
          </article>
          <div className="blog-grid">
            {rest.map((b) => (
              <article className="blog-card" key={b.slug} onClick={()=>onOpenPost(b)} style={{cursor:'pointer'}}>
                <div className="blog-card-media">
                  <img src={b.cover} alt="" onError={e=>{e.target.style.display='none';e.target.parentElement.classList.add('no-img');e.target.parentElement.textContent=b.title.split(' ').slice(0,2).join(' ');}} />
                </div>
                <div className="blog-meta">{b.tag} · {b.date} · {b.read}</div>
                <h3>{b.title}</h3>
                <p>{b.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

// BLOG POST ─────────────────────────────────────────────────────────────
const BlogPost = ({ post, onBack, onOpenPost }) => {
  const others = BLOG_POSTS.filter(p => p.slug !== post.slug);
  return (
    <>
      <section className="section" style={{paddingTop:100}}>
        <div className="section-inner" style={{maxWidth:760}}>
          <a href="#" className="products-link" onClick={e=>{e.preventDefault();onBack();}} style={{display:'inline-block',marginBottom:20}}>← Volver al blog</a>
          <div className="blog-meta" style={{marginBottom:16}}>{post.tag} · {post.date} · {post.read}</div>
          <h1 className="post-title">{post.title}</h1>
          <p className="post-lede">{post.excerpt}</p>
          <div className="post-cover">
            <img src={post.cover} alt="" onError={e=>e.target.style.display='none'}/>
          </div>
          <div className="post-body">
            {post.body.map((b,i)=>(
              b.type==='h2' ? <h2 key={i}>{b.text}</h2> :
              <p key={i}>{b.text}</p>
            ))}
          </div>
        </div>
      </section>
      <section className="section soft">
        <div className="section-inner">
          <h3 style={{fontFamily:'var(--font-display)',fontSize:28,fontWeight:800,marginBottom:32}}>Seguir leyendo</h3>
          <div className="blog-grid">
            {others.map((b) => (
              <article className="blog-card" key={b.slug} onClick={()=>onOpenPost(b)} style={{cursor:'pointer'}}>
                <div className="blog-card-media">
                  <img src={b.cover} alt="" onError={e=>{e.target.style.display='none'}} />
                </div>
                <div className="blog-meta">{b.tag} · {b.date}</div>
                <h3>{b.title}</h3>
                <p>{b.excerpt}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { PDP, Blog, BlogPost });
// Café La Julia — Tienda (shop) page

const Tienda = ({ products, onNav, onOpen, onAdd }) => {
  const [cat, setCat] = React.useState('todos');
  const [sort, setSort] = React.useState('relevance');
  let list = cat === 'todos' ? products : products.filter(p => p.originTag === cat);
  if (sort === 'price-asc') list = [...list].sort((a,b)=>a.price-b.price);
  if (sort === 'price-desc') list = [...list].sort((a,b)=>b.price-a.price);
  return (
    <>
      <div className="shop-hero">
        <video className="hero-video" src="https://cafelajulia.com/wp-content/uploads/2026/03/Diseno-sin-titulo-3.mp4" autoPlay muted loop playsInline onError={e=>{e.target.style.display='none'}} />
        <div className="shop-hero-eyebrow">Cafés de Especialidad Mexicano</div>
        <h1>Encuentra tu<br /><em>café perfecto</em></h1>
        <p>Orígenes de Chiapas, Veracruz y Puebla. Elige en grano o molido según tu método de preparación.</p>
        <span className="fresh-badge">Tostado esta semana — siempre fresco</span>
      </div>
      <section className="section" style={{paddingTop:30}}>
        <div className="section-inner">
          <div className="shop-toolbar">
            <div className="shop-filters">
              {CATEGORIES.map(c => (
                <button key={c.id} className={`chip ${cat===c.id?'active':''}`} onClick={()=>setCat(c.id)}>{c.label}</button>
              ))}
            </div>
            <div style={{display:'flex',gap:14,alignItems:'center',flexWrap:'wrap'}}>
              <span className="shop-count">{list.length} productos</span>
              <div className="shop-sort">
                <select value={sort} onChange={e=>setSort(e.target.value)}>
                  <option value="relevance">Ordenar por relevancia</option>
                  <option value="price-asc">Precio: menor a mayor</option>
                  <option value="price-desc">Precio: mayor a menor</option>
                </select>
              </div>
            </div>
          </div>
          <div className="grid-3">
            {list.map(p => <ProductCard key={p.id} p={p} onOpen={onOpen} onAdd={onAdd} />)}
          </div>
          {list.length === 0 && <p style={{textAlign:'center',padding:60,color:'var(--jy-mid)'}}>No hay cafés en esta categoría.</p>}
        </div>
      </section>
    </>
  );
};

Object.assign(window, { Tienda });
// Café La Julia — shared chrome: Nav, ShippingBar, Footer, Drawer

const { useState, useEffect } = React;

const ShippingBar = () => (
  <div className="ship-bar">
    <Icon name="truck" size={16} />
    <span><strong>Envío gratis</strong> en pedidos mayores a $500 MXN — Tostado esta semana</span>
  </div>
);

const Nav = ({ active, onNav, cartCount, onCart, transparent = false }) => {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  const link = (id, label) => (
    <li><a className={`nav-link ${active === id ? 'active' : ''}`} href="#" onClick={e => { e.preventDefault(); onNav(id); }}>{label}</a></li>
  );
  return (
    <nav className={`nav ${scrolled || !transparent ? 'scrolled' : ''}`}>
      <div className="nav-inner">
        <a className="nav-logo" href="#" onClick={e => { e.preventDefault(); onNav('home'); }}>
          <img className="mark" src="../../assets/logo-la-julia-app.png" alt="La Julia" />
        </a>
        <ul className="nav-links">
          {link('home','Inicio')}
          {link('tienda','Tienda')}
          {link('suscripcion','Suscripción')}
          {link('cafeterias','Cafeterías')}
          {link('recompensas','Club')}
          {link('quienes','Nosotros')}
          {link('blog','Blog')}
          <li>
            <button className="nav-cart" onClick={onCart} aria-label="Ir al carrito" title="Ir al carrito">
              <Icon name="bag" size={20} />
              {cartCount > 0 && <span className="count">{cartCount}</span>}
            </button>
          </li>
        </ul>
      </div>
    </nav>
  );
};

const Footer = ({ onNav }) => (
  <footer className="footer">
    <div className="footer-inner">
      <div className="footer-grid">
        <div>
          <img src="../../assets/logo-la-julia-app.png" alt="Café La Julia" style={{width:80,height:80,filter:'invert(1)',marginBottom:14}} />
          <p className="footer-tag">Café de especialidad mexicano, tostado fresco y enviado a todo el país. Casa tostadora · Las Choapas, Ver.</p>
        </div>
        <div>
          <p className="footer-col-title">Tienda</p>
          <ul className="footer-links">
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Todos los cafés</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Chiapas</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Veracruz</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('tienda')}}>Puebla</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('suscripcion')}}>Suscripción</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('cafeterias')}}>Para cafeterías</a></li>
          </ul>
        </div>
        <div>
          <p className="footer-col-title">La marca</p>
          <ul className="footer-links">
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('quienes')}}>Quiénes somos</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('blog')}}>Blog</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('recompensas')}}>Club · Recompensas</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('faq')}}>Preguntas frecuentes</a></li>
            <li><a href="#" onClick={e=>{e.preventDefault();onNav('contacto')}}>Contacto</a></li>
          </ul>
        </div>
        <div>
          <p className="footer-col-title">Contacto</p>
          <ul className="footer-links">
            <li><a href="mailto:ventas@cafelajulia.com">ventas@cafelajulia.com</a></li>
            <li><a href={`https://wa.me/${CONTACT.whatsappDigits}`} target="_blank" rel="noopener">WhatsApp {CONTACT.whatsapp}</a></li>
            <li><a href={`tel:${CONTACT.phone}`}>{CONTACT.phoneDisplay}</a></li>
            <li><a href="https://maps.google.com/?q=Blvd.+Antonio+M.+Quirazco+2146+Las+Choapas" target="_blank" rel="noopener">{CONTACT.address}<br />{CONTACT.city}</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <p className="footer-copy">© 2026 Café La Julia. Todos los derechos reservados.</p>
        <div className="footer-social">
          <a href="https://instagram.com/cafelajulia" target="_blank" rel="noopener" aria-label="Instagram"><Icon name="ig" size={20} /></a>
          <a href="https://facebook.com/cafelajulia" target="_blank" rel="noopener" aria-label="Facebook"><Icon name="fb" size={20} /></a>
          <a href="https://tiktok.com/@cafelajulia" target="_blank" rel="noopener" aria-label="TikTok"><Icon name="tiktok" size={20} /></a>
        </div>
      </div>
    </div>
  </footer>
);

const CartDrawer = ({ open, items, onClose, onNav, onQty }) => {
  const subtotal = items.reduce((s,i)=>s+i.price*i.qty,0);
  const shipFree = subtotal >= 500;
  return (
    <>
      <div className={`drawer-mask ${open ? 'open' : ''}`} onClick={onClose} />
      <aside className={`drawer ${open ? 'open' : ''}`} aria-label="Carrito">
        <div className="drawer-head">
          <div className="drawer-title">Tu carrito {items.length > 0 && <span style={{color:'var(--jy-mid)',fontWeight:300}}>({items.length})</span>}</div>
          <button className="drawer-close" onClick={onClose}><Icon name="close" size={20} /></button>
        </div>
        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="drawer-empty">
              <h4>Tu carrito está vacío</h4>
              <p style={{fontSize:13,fontWeight:300,marginBottom:24}}>Descubre nuestros cafés tostados esta semana.</p>
              <button className="btn btn-d" onClick={()=>{onClose();onNav('tienda');}}>Explorar cafés</button>
            </div>
          ) : items.map(i => (
            <div className="drawer-item" key={i.id}>
              <div className="drawer-item-img"><img src={i.img} alt={i.name} onError={e=>{e.target.style.display='none';e.target.parentElement.textContent='J';}} /></div>
              <div className="drawer-item-body">
                <div className="drawer-item-name">{i.name}</div>
                <div className="drawer-item-meta">{i.origin} · {i.unit}</div>
                <div className="drawer-item-foot">
                  <div className="qty" style={{height:32,borderWidth:1}}>
                    <button onClick={()=>onQty(i.id, i.qty-1)} style={{width:30,fontSize:14}}><Icon name="minus" size={12}/></button>
                    <input value={i.qty} readOnly style={{width:34,fontSize:13}} />
                    <button onClick={()=>onQty(i.id, i.qty+1)} style={{width:30,fontSize:14}}><Icon name="plus" size={12}/></button>
                  </div>
                  <div className="drawer-item-price">${i.price*i.qty}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="drawer-total">
              <span className="drawer-total-lbl">Subtotal</span>
              <span className="drawer-total-val">${subtotal} MXN</span>
            </div>
            <a className="btn btn-d" style={{width:'100%'}} href="#" onClick={e=>{e.preventDefault();onClose();onNav('checkout');}}>Finalizar compra</a>
            <a className="btn" style={{width:'100%',marginTop:8,background:'transparent',color:'var(--jy-ink)',border:'1px solid rgba(0,0,0,.2)'}} href="#" onClick={e=>{e.preventDefault();onClose();onNav('carrito');}}>Ver carrito completo</a>
            <p className="drawer-note">{shipFree ? '✓ Envío gratis incluido' : `Agrega $${500-subtotal} para envío gratis`}</p>
          </div>
        )}
      </aside>
    </>
  );
};

const AIAgent = ({ onNav }) => {
  const [open, setOpen] = useState(false);
  const [msgs, setMsgs] = useState([
    { role: 'bot', text: '¡Hola! Soy Julieta, tu asistente de Café La Julia. Puedo ayudarte a elegir un café, explicarte los orígenes, o guiarte con tu pedido. ¿Qué te interesa?' }
  ]);
  const [draft, setDraft] = useState('');
  const [thinking, setThinking] = useState(false);
  const bodyRef = React.useRef(null);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [msgs, thinking]);

  const quick = [
    { label: '¿Cuál café me recomiendas?', prompt: '¿Cuál café me recomiendas para empezar?' },
    { label: 'Métodos de preparación',      prompt: '¿Qué café va mejor con prensa francesa o V60?' },
    { label: 'Envíos y tiempos',             prompt: '¿Cuánto tarda el envío y cuánto cuesta?' },
    { label: 'Ventas a negocios',            prompt: 'Tengo una cafetería, ¿cómo compro al mayoreo?' }
  ];

  const send = async (text) => {
    const t = (text ?? draft).trim();
    if (!t) return;
    setMsgs(m => [...m, { role: 'user', text: t }]);
    setDraft('');
    setThinking(true);
    try {
      const reply = await window.claude.complete({
        messages: [{
          role: 'user',
          content: `Eres Julieta, la asistente de Café La Julia — casa tostadora mexicana de café de especialidad ubicada en Las Choapas, Veracruz. Responde en español de forma breve, cálida y útil (máx 3 oraciones). Si aplica, sugiere una página al final: Tienda, Suscripción, Cafeterías (B2B), Club, Blog, FAQ, Contacto. Catálogo: Chiapas/Concordia (Bourbon Rosado, chocolate/naranja/panela, 1300msnm), Veracruz/Córdoba (Sarchimor, chocolate/nuez, 1200-1400msnm), Puebla/Tlacuilotepec (Catimor, avellana/durazno/miel, 1400msnm), Robusta (cacao/madera, espresso). Tamaños 250g/500g/1kg. Tazas 12oz/16oz/26oz. Envío gratis >$500 MXN, 2-7 días. WhatsApp: +52 923 117 1040. Pregunta: "${t}"`
        }]
      });
      setMsgs(m => [...m, { role: 'bot', text: reply }]);
    } catch (e) {
      setMsgs(m => [...m, { role: 'bot', text: 'Perdón, tuve un problema. Escríbenos por WhatsApp +52 923 121 6260 y te atendemos al momento.' }]);
    } finally {
      setThinking(false);
    }
  };

  return (
    <>
      <button
        className={`ai-fab ${open ? 'open' : ''}`}
        onClick={() => setOpen(o => !o)}
        aria-label={open ? 'Cerrar chat' : 'Abrir chat'}
      >
        {open ? <Icon name="close" size={22} /> : <>
          <span className="ai-fab-avatar"><Icon name="sparkle" size={18} /></span>
          <span className="ai-fab-label">Pregúntale a Julieta</span>
          <span className="ai-fab-dot" aria-hidden />
        </>}
      </button>
      {open && (
        <div className="ai-panel" role="dialog" aria-label="Asistente Julieta">
          <div className="ai-head">
            <div className="ai-head-ava"><Icon name="sparkle" size={18} /></div>
            <div className="ai-head-txt">
              <div className="ai-head-name">Julieta</div>
              <div className="ai-head-status"><span className="ai-dot" /> En línea · responde en segundos</div>
            </div>
            <button className="ai-head-close" onClick={() => setOpen(false)} aria-label="Cerrar"><Icon name="close" size={18} /></button>
          </div>
          <div className="ai-body" ref={bodyRef}>
            {msgs.map((m, i) => (
              <div key={i} className={`ai-msg ai-msg-${m.role}`}>
                {m.role === 'bot' && <div className="ai-msg-ava"><Icon name="sparkle" size={12}/></div>}
                <div className="ai-msg-bub">{m.text}</div>
              </div>
            ))}
            {thinking && (
              <div className="ai-msg ai-msg-bot">
                <div className="ai-msg-ava"><Icon name="sparkle" size={12}/></div>
                <div className="ai-msg-bub ai-typing"><span/><span/><span/></div>
              </div>
            )}
            {msgs.length <= 1 && !thinking && (
              <div className="ai-quick">
                {quick.map((q, i) => (
                  <button key={i} className="ai-quick-btn" onClick={() => send(q.prompt)}>{q.label}</button>
                ))}
              </div>
            )}
          </div>
          <form className="ai-foot" onSubmit={e => { e.preventDefault(); send(); }}>
            <input
              className="ai-input"
              placeholder="Escribe tu pregunta…"
              value={draft}
              onChange={e => setDraft(e.target.value)}
            />
            <button className="ai-send" type="submit" aria-label="Enviar"><Icon name="send" size={18} /></button>
          </form>
          <div className="ai-foot-note">También por WhatsApp · {CONTACT.whatsapp}</div>
        </div>
      )}
    </>
  );
};

Object.assign(window, { Nav, ShippingBar, Footer, CartDrawer, AIAgent });
// Café La Julia v2 — App shell

const App2 = () => {
  // Leer URL inicial para routing
  const getInitialPage = () => {
    const path = window.location.pathname.replace(/^\/|\/$/g, ''); // Remove leading/trailing slashes
    const validPages = ['home','tienda','quienes','recompensas','blog','contacto','suscripcion','faq','cafeterias','carrito','checkout'];
    return validPages.includes(path) ? path : 'home';
  };
  
  const [page, setPage] = React.useState(getInitialPage());
  const [product, setProduct] = React.useState(null);
  const [post, setPost] = React.useState(null);
  const [cart, setCart] = React.useState([]);

  const nav = (p, data) => {
    if (p === 'producto') setProduct(data);
    if (p === 'post') setPost(data);
    setPage(p);
    
    // Actualizar URL sin recargar la página
    const newUrl = p === 'home' ? '/' : `/${p}`;
    window.history.pushState({}, '', newUrl);
    
    window.scrollTo({ top:0, behavior:'smooth' });
  };

  const addToCart = (p, qty, molienda) => {
    setCart(c => {
      const existing = c.findIndex(x => x.id === p.id && x.molienda === molienda);
      if (existing >= 0) {
        const next = [...c];
        next[existing] = { ...next[existing], qty: next[existing].qty + qty };
        return next;
      }
      return [...c, { ...p, qty, molienda }];
    });
  };
  const removeFromCart = (i) => setCart(c => c.filter((_,idx)=>idx!==i));
  const setQty = (i, q) => setCart(c => c.map((it,idx)=>idx===i?{...it,qty:q}:it));

  let view = null;
  if (page === 'home') view = <Home2 onNav={nav} />;
  else if (page === 'tienda') view = <Tienda2 onNav={nav} />;
  else if (page === 'producto') view = <PDP2 product={product} onNav={nav} onAdd={addToCart} />;
  else if (page === 'carrito') view = <Carrito2 cart={cart} onNav={nav} onRemove={removeFromCart} onQty={setQty} />;
  else if (page === 'checkout') view = <Checkout2 cart={cart} onNav={nav} />;
  else if (page === 'quienes') view = <Quienes2 onNav={nav} />;
  else if (page === 'recompensas') view = <Recompensas2 onNav={nav} />;
  else if (page === 'blog') view = <Blog2 onNav={nav} onOpen={(p)=>nav('post',p)} />;
  else if (page === 'post') view = <BlogPost2 post={post} onNav={nav} />;
  else if (page === 'contacto') view = <Contacto2 onNav={nav} />;
  else if (page === 'suscripcion') view = <Suscripcion2 onNav={nav} onAdd={addToCart} />;
  else if (page === 'faq') view = <FAQ2 onNav={nav} />;
  else if (page === 'cafeterias') view = <Cafeterias2 onNav={nav} />;
  else view = <Home2 onNav={nav} />;

  const cartCount = cart.reduce((s,i)=>s+i.qty, 0);

  return (
    <>
      <Nav2 page={page} onNav={nav} cartCount={cartCount} />
      <main key={page}>{view}</main>
      {page !== 'recompensas' && <Footer2 onNav={nav} />}
      <Julieta />
      <a className="logo-badge" href="#" onClick={e=>{e.preventDefault();nav('home')}} aria-label="Café La Julia">
        <img src="../../assets/logo-head.png" alt="" />
      </a>
    </>
  );
};

// ═══════════════════════════════════════════════════════════════════════════
// Manejo de navegación del navegador (botón atrás/adelante)
// ═══════════════════════════════════════════════════════════════════════════
window.addEventListener('popstate', function() {
  // Cuando el usuario usa botón atrás/adelante, recargar para que React lea la nueva URL
  window.location.reload();
});

// ═══════════════════════════════════════════════════════════════════════════
ReactDOM.createRoot(document.getElementById('root')).render(<App2 />);