/* Home + Shop + Product detail + About/Contact pages */

function ProductCard({ p, onOpen, onAdd }) {
  return (
    <div className="product" style={{ '--ar': p.aspect }}>
      <div className="media" style={{ '--ar': p.aspect }} onClick={() => onOpen(p)}>
        <div className="ph-candle" data-tone={p.tone}>
          <CandleSilhouette kind={kindFor(p)}/>
        </div>
        {p.badge && <span className="badge-tag" data-kind={p.badge}>{p.badge === 'new' ? 'Nuevo' : p.badge === 'sale' ? 'Oferta' : p.badge}</span>}
        <button className="add-float" onClick={(e) => { e.stopPropagation(); onAdd(p); }} aria-label="agregar"><Ic name="plus" size={18}/></button>
      </div>
      <div className="info">
        <div>
          <div className="name">{p.name}</div>
          <div className="cat">{CATEGORIES.find(c => c.id === p.cat)?.label}</div>
        </div>
        <div className="right">
          <div className="price">{formatCLP(p.price)}</div>
        </div>
      </div>
    </div>
  );
}

function HomePage({ onNav, onAddToCart, onOpenProduct }) {
  const featured = PRODUCTS.slice(0, 8);
  const occasions = CATEGORIES.slice(0, 8);
  return (
    <div className="page">
      {/* HERO */}
      <div className="hero fade-up">
        <div className="hero-media">
          <div className="ph-candle" data-tone="rose" style={{ width: '100%', height: '100%' }}>
            <CandleSilhouette kind="bouquet" opacity={0.4}/>
          </div>
        </div>
        <div className="hero-content fade-up">
          <div className="tag">Colección primavera · 2026</div>
          <h1>Velas que<br/><span className="serif-i" style={{color:'#FBEEF1'}}>cuentan historias.</span></h1>
          <p className="lead">Cada vela se moldea, perfuma y envuelve a mano en mi taller de Santiago. Encuentra la pieza perfecta para tu próxima celebración.</p>
          <div className="ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onNav('shop')}>Ver catálogo <Ic name="arrow-r" size={16}/></button>
            <button className="btn btn-outline btn-lg" onClick={() => onNav('process')} style={{borderColor:'#fff',color:'#fff'}}><Ic name="play" size={14}/> Ver el proceso</button>
          </div>
        </div>
      </div>

      {/* OCASIONES */}
      <div className="section-head">
        <div className="title">
          <span className="eyebrow">Compra por ocasión</span>
          <h2 style={{marginTop:8}}>¿Qué estás celebrando?</h2>
        </div>
        <button className="btn btn-ghost hide-mobile" onClick={() => onNav('shop')}>Ver todas <Ic name="arrow-r" size={14}/></button>
      </div>
      <div className="occasions">
        {occasions.map((o, i) => {
          const tones = ['rose','cream','blue','gold','rose','cream','red','lavender'];
          return (
            <div key={o.id} className="occasion fade-up" style={{animationDelay: `${i*0.04}s`}}
                 onClick={() => onNav('shop', { cat: o.id })}>
              <div className="circle">
                <div className="ph-candle" data-tone={tones[i]} style={{width:'100%', height:'100%'}}>
                  <CandleSilhouette kind={['bear','heart','box','bouquet','sphere','rose','heart','pillar'][i]} opacity={0.5}/>
                </div>
              </div>
              <span className="lab">{o.label}</span>
            </div>
          );
        })}
      </div>

      <div className="ornament"><Ic name="sparkle" size={14}/></div>

      {/* DESTACADOS */}
      <div className="section-head">
        <div className="title">
          <span className="eyebrow">Lo más pedido</span>
          <h2 style={{marginTop:8}}>Piezas de esta semana</h2>
        </div>
        <button className="btn btn-ghost hide-mobile" onClick={() => onNav('shop')}>Ver todas <Ic name="arrow-r" size={14}/></button>
      </div>
      <div className="masonry">
        {featured.map(p => (
          <ProductCard key={p.id} p={p} onOpen={onOpenProduct} onAdd={onAddToCart}/>
        ))}
      </div>

      {/* FEATURED BANNER */}
      <div className="featured-banner">
        <div className="fb-text">
          <span className="eyebrow">El taller</span>
          <h2>Hecho a mano,<br/><span className="serif-i" style={{color:'var(--rose-deep)'}}>con calma.</span></h2>
          <p style={{color:'var(--ink-soft)', fontSize: 15, maxWidth: 420}}>
            Desde derretir la cera hasta envolver el último lazo: mira el proceso completo en Instagram.
          </p>
          <div style={{display:'flex', gap:10, marginTop:8}}>
            <a className="btn btn-gold" href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer">
              <Ic name="ig" size={14}/> @aurora.velas.cl
            </a>
            <button className="btn btn-outline" onClick={() => onNav('process')}>Ver proceso</button>
          </div>
        </div>
        <div className="fb-media">
          <div className="ph-candle" data-tone="gold" style={{ width: '100%', height: '100%' }}>
            <CandleSilhouette kind="bouquet" opacity={0.4}/>
            <div style={{position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center'}}>
              <button className="icon-btn" style={{width:68, height:68, background:'rgba(255,255,255,0.92)', boxShadow:'var(--shadow-lg)'}} aria-label="play">
                <Ic name="play" size={28} color="#D48AA0"/>
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* PROCESO */}
      <div className="section-head"><div className="title">
        <span className="eyebrow">— el proceso</span>
        <h2 style={{marginTop:8}}>De la cera al empaque</h2>
      </div></div>
      <div className="process">
        {[
          ['01','Derretir','Cera de soya en baño maría, temperatura controlada.'],
          ['02','Perfumar','Esencias premium añadidas en el punto exacto.'],
          ['03','Teñir','Color natural a mano, en pequeños lotes.'],
          ['04','Moldear','Vertido en moldes y mechas posicionadas.'],
          ['05','Envolver','Tarjetas escritas a mano, cintas anudadas.'],
          ['06','Entregar','Empaque cuidado · despacho o retiro.'],
        ].map(([n, name, d]) => (
          <div key={n} className="process-step">
            <span className="n">{n}</span>
            <span className="name">{name}</span>
            <span className="desc">{d}</span>
          </div>
        ))}
      </div>

      {/* IG STRIP */}
      <div className="section-head"><div className="title">
        <span className="eyebrow"><Ic name="ig" size={12}/> @aurora.velas.cl</span>
        <h2 style={{marginTop:8}}>Desde el Instagram</h2>
      </div></div>
      <div className="ig-strip">
        {['rose','cream','gold','lavender','rose','blue'].map((t, i) => (
          <a key={i} className="ig" href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer">
            <div className="ph-candle" data-tone={t} style={{width:'100%', height:'100%'}}>
              <CandleSilhouette kind={['bouquet','heart','rose','sphere','bear','box'][i]} opacity={0.5}/>
            </div>
          </a>
        ))}
      </div>
    </div>
  );
}

function ShopPage({ route, onNav, onOpenProduct, onAddToCart, query }) {
  const [sortBy, setSortBy] = React.useState('popular');
  const [priceMax, setPriceMax] = React.useState(50000);
  const activeCat = route.cat;

  let list = PRODUCTS.filter(p => {
    if (activeCat && p.cat !== activeCat) return false;
    if (p.price > priceMax) return false;
    if (query && !p.name.toLowerCase().includes(query.toLowerCase())) return false;
    return true;
  });
  if (sortBy === 'price-asc') list.sort((a,b) => a.price - b.price);
  if (sortBy === 'price-desc') list.sort((a,b) => b.price - a.price);
  if (sortBy === 'new') list.sort((a,b) => (b.badge==='new'?1:0) - (a.badge==='new'?1:0));

  return (
    <div className="page">
      <div style={{marginBottom:24}} className="fade-up">
        <span className="eyebrow">Catálogo</span>
        <h1 style={{margin:'8px 0'}}>{activeCat ? CATEGORIES.find(c=>c.id===activeCat)?.label : 'Todas las piezas'}</h1>
        <p style={{color:'var(--ink-soft)'}}>{list.length} piezas · hechas a mano · empacadas con cariño.</p>
      </div>

      {/* Category chips */}
      <div style={{display:'flex', gap:8, overflowX:'auto', paddingBottom:8, marginBottom:20}}>
        <span className={`chip ${!activeCat?'active':''}`} onClick={() => onNav('shop')}>Todo</span>
        {CATEGORIES.map(c => (
          <span key={c.id} className={`chip ${activeCat===c.id?'active':''}`} onClick={() => onNav('shop', {cat: c.id})}>
            {c.emoji} {c.label}
          </span>
        ))}
      </div>

      {/* Sort + filters bar */}
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', gap:16, flexWrap:'wrap', marginBottom:20, paddingBottom:16, borderBottom:'1px solid var(--line)'}}>
        <div style={{display:'flex', gap:20, alignItems:'center', flexWrap:'wrap'}}>
          <label style={{display:'flex', alignItems:'center', gap:10, fontSize:13, color:'var(--ink-soft)'}}>
            <span>Hasta</span>
            <input type="range" min="3000" max="50000" step="1000" value={priceMax} onChange={e => setPriceMax(+e.target.value)} style={{accentColor:'#D48AA0'}}/>
            <strong style={{color:'var(--ink)', fontFamily:'Playfair Display', fontSize:15}}>{formatCLP(priceMax)}</strong>
          </label>
        </div>
        <div style={{display:'flex', gap:8, alignItems:'center'}}>
          <span style={{fontSize:13, color:'var(--ink-soft)'}}>Ordenar</span>
          <select value={sortBy} onChange={e => setSortBy(e.target.value)}
                  style={{padding:'6px 10px', borderRadius:8, border:'1px solid var(--line)', background:'var(--paper-soft)', fontFamily:'inherit', fontSize:13}}>
            <option value="popular">Más populares</option>
            <option value="new">Más nuevos</option>
            <option value="price-asc">Precio: menor a mayor</option>
            <option value="price-desc">Precio: mayor a menor</option>
          </select>
        </div>
      </div>

      <div className="masonry">
        {list.map((p, i) => (
          <div key={p.id} className="fade-up" style={{animationDelay: `${Math.min(i*0.03,0.3)}s`}}>
            <ProductCard p={p} onOpen={onOpenProduct} onAdd={onAddToCart}/>
          </div>
        ))}
      </div>

      {list.length === 0 && (
        <div style={{textAlign:'center', padding:'60px 20px', color:'var(--ink-soft)'}}>
          <Ic name="search" size={36} color="var(--ink-faint)"/>
          <p style={{marginTop:16}}>No encontramos piezas con esos filtros.</p>
          <button className="btn btn-outline" onClick={() => { onNav('shop'); setPriceMax(50000); }} style={{marginTop:10}}>Limpiar filtros</button>
        </div>
      )}
    </div>
  );
}

function ProductDetail({ productId, onNav, onAddToCart }) {
  const p = PRODUCTS.find(x => x.id === productId);
  const [aroma, setAroma] = React.useState(p?.aromas?.[0]);
  const [color, setColor] = React.useState('rose');
  const [qty, setQty] = React.useState(p?.cat === 'bautizo' || p?.cat === 'baby' ? 20 : 1);
  const [mensaje, setMensaje] = React.useState('');
  const [thumb, setThumb] = React.useState(0);

  if (!p) return <div className="page"><p>Producto no encontrado.</p></div>;

  const needsMin = p.cat === 'bautizo' || p.cat === 'baby';

  return (
    <div className="page">
      <button className="btn btn-ghost" onClick={() => onNav('shop')} style={{marginBottom:16, padding:'6px 10px'}}>
        <Ic name="arrow-l" size={14}/> volver al catálogo
      </button>

      <div className="pdp">
        <div className="pdp-gallery fade-up">
          <div className="pdp-hero">
            <div className="ph-candle" data-tone={p.tone} style={{width:'100%', height:'100%'}}>
              <CandleSilhouette kind={kindFor(p)} opacity={0.55}/>
            </div>
          </div>
          <div className="pdp-thumbs">
            {[p.tone, 'cream', 'gold', 'lavender'].map((t, i) => (
              <div key={i} className={`pdp-thumb ${thumb===i?'active':''}`} onClick={() => setThumb(i)}>
                <div className="ph-candle" data-tone={t} style={{width:'100%', height:'100%'}}>
                  <CandleSilhouette kind={kindFor(p)} opacity={0.5}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="pdp-info fade-up">
          <div className="cat">{CATEGORIES.find(c=>c.id===p.cat)?.label}</div>
          <h1>{p.name}</h1>
          <div style={{display:'flex', gap:6, alignItems:'center'}}>
            {[1,2,3,4,5].map(i => <Ic key={i} name="star" size={16} color="#B89968"/>)}
            <span style={{fontSize:13, color:'var(--ink-soft)', marginLeft:6}}>(12 reseñas)</span>
          </div>
          <div className="pdp-price">{formatCLP(p.price)} <span style={{fontSize:13, color:'var(--ink-faint)'}}>{needsMin?'c/u':''}</span></div>
          <p className="desc">{p.desc}</p>

          {p.aromas && (
            <div className="opt-group">
              <div className="opt-lab">Aroma</div>
              <div className="opt-row">
                {p.aromas.map(a => (
                  <span key={a} className={`opt ${aroma===a?'active':''}`} onClick={() => setAroma(a)}>{a}</span>
                ))}
              </div>
            </div>
          )}

          <div className="opt-group">
            <div className="opt-lab">Color del lazo</div>
            <div className="opt-row" style={{alignItems:'center'}}>
              {[
                ['rose','#E8B4C0'], ['blue','#C8DFEA'], ['gold','#E4D4B5'], ['white','#FFFFFF'], ['red','#E89A9A']
              ].map(([c, bg]) => (
                <button key={c} className={`swatch ${color===c?'active':''}`}
                        style={{background: bg, border: c==='white' ? '1px solid var(--line)' : '2px solid var(--paper-soft)'}}
                        onClick={() => setColor(c)}/>
              ))}
            </div>
          </div>

          <div className="opt-group">
            <div className="opt-lab">Mensaje en la tarjeta <span style={{color:'var(--ink-faint)', textTransform:'none', letterSpacing:0}}>(opcional)</span></div>
            <div className="form-group" style={{margin:0}}>
              <input value={mensaje} onChange={e => setMensaje(e.target.value)}
                     placeholder='"Bienvenida al mundo, Amelia"' maxLength={80}/>
            </div>
          </div>

          <div className="opt-group">
            <div className="opt-lab">Cantidad {needsMin && <span style={{color:'var(--rose-deep)', textTransform:'none', letterSpacing:0}}>· mínimo 20 para souvenirs</span>}</div>
            <div className="qty">
              <button onClick={() => setQty(Math.max(needsMin?20:1, qty - 1))}>−</button>
              <span className="val">{qty}</span>
              <button onClick={() => setQty(qty + 1)}>+</button>
            </div>
          </div>

          <div className="pdp-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onAddToCart(p, { aroma, color, mensaje, qty })}>
              <Ic name="plus" size={14}/> Agregar a la reserva · {formatCLP(p.price * qty)}
            </button>
            <button className="icon-btn" style={{border:'1px solid var(--line)'}} aria-label="favorito"><Ic name="heart"/></button>
          </div>

          <div className="pdp-meta">
            <div>
              <div className="m-ic"><Ic name="calendar" color="var(--gold-deep)"/></div>
              <div className="m-title">Preparación</div>
              <div className="m-sub">3 – 7 días</div>
            </div>
            <div>
              <div className="m-ic"><Ic name="truck" color="var(--gold-deep)"/></div>
              <div className="m-title">Despacho</div>
              <div className="m-sub">RM y regiones</div>
            </div>
            <div>
              <div className="m-ic"><Ic name="flame" color="var(--gold-deep)"/></div>
              <div className="m-title">Duración</div>
              <div className="m-sub">{p.burn}</div>
            </div>
          </div>
        </div>
      </div>

      {/* Related */}
      <div className="section-head"><div className="title">
        <span className="eyebrow">También te podría gustar</span>
        <h2 style={{marginTop:8}}>Otras piezas</h2>
      </div></div>
      <div className="masonry">
        {PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0,4).map(rp => (
          <ProductCard key={rp.id} p={rp} onOpen={(pp) => { onNav('product', {id: pp.id}); window.scrollTo(0,0); }} onAdd={onAddToCart}/>
        ))}
      </div>
    </div>
  );
}

function AboutPage({ onNav }) {
  return (
    <div className="page">
      <div className="about-hero fade-up">
        <div className="txt">
          <span className="eyebrow">Sobre Aurora</span>
          <h1>Un pequeño taller<br/><span className="serif-i" style={{color:'var(--rose-deep)'}}>con alma grande.</span></h1>
          <p>Aurora nació en el living de mi casa, en Santiago, moldeando velas para un baby shower de una amiga. Hoy sigue siendo pequeño y hecho a mano — y esa es justamente la idea.</p>
          <p>Cada pedido se prepara con tiempo, con cera de soya natural, esencias premium y empaques pensados pieza por pieza. Porque una vela no es solo un objeto: es el aroma que va a quedar en la memoria de quien la reciba.</p>
          <div style={{display:'flex', gap:10, marginTop:20}}>
            <button className="btn btn-primary" onClick={() => onNav('shop')}>Ver catálogo</button>
            <a className="btn btn-outline" href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer"><Ic name="ig" size={14}/> Seguir en IG</a>
          </div>
        </div>
        <div className="media">
          <div className="ph-candle" data-tone="rose" style={{width:'100%', height:'100%'}}>
            <CandleSilhouette kind="rose" opacity={0.5}/>
          </div>
        </div>
      </div>

      <div className="ornament"><Ic name="sparkle" size={14}/></div>

      <div className="values">
        <div className="value">
          <Ic name="flame" size={28} color="var(--rose-deep)"/>
          <h3 style={{marginTop:10}}>Cera de soya</h3>
          <p>100% natural, biodegradable y sin parafina. Quema limpia y más lento.</p>
        </div>
        <div className="value">
          <Ic name="heart" size={28} color="var(--rose-deep)"/>
          <h3 style={{marginTop:10}}>Hecho a mano</h3>
          <p>Cada pieza se moldea, perfuma y envuelve una por una, en pequeños lotes.</p>
        </div>
        <div className="value">
          <Ic name="sparkle" size={28} color="var(--rose-deep)"/>
          <h3 style={{marginTop:10}}>Personalizado</h3>
          <p>Elige aroma, color de lazo y mensaje. Nos adaptamos a tu celebración.</p>
        </div>
      </div>

      <div style={{textAlign:'center', padding:'40px 20px', background:'var(--cream)', borderRadius:'var(--radius-xl)', margin:'20px 0'}}>
        <span className="eyebrow">Testimonios</span>
        <h2 style={{margin:'12px 0 20px'}}>Lo que dicen</h2>
        <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(260px, 1fr))', gap:24, maxWidth:1100, margin:'0 auto'}}>
          {[
            ['Camila R.', 'Los souvenirs para mi baby shower quedaron preciosos. Mis amigas no dejaban de fotografiarlos.'],
            ['María José', 'Aurora preparó la caja de revelación para mi hermana y fue lo más lindo del día. Atención impecable.'],
            ['Francisca', 'Encargué un centro de mesa para mi matrimonio. Llegó perfecto y con un aroma sutil y elegante.'],
          ].map(([n, q]) => (
            <div key={n} style={{padding:'20px', textAlign:'left'}}>
              <div style={{display:'flex', gap:3, marginBottom:10}}>{[1,2,3,4,5].map(i => <Ic key={i} name="star" size={14} color="#B89968"/>)}</div>
              <p style={{fontFamily:'Playfair Display', fontStyle:'italic', fontSize:15, color:'var(--ink)', lineHeight:1.5}}>"{q}"</p>
              <p style={{marginTop:12, fontSize:13, color:'var(--ink-soft)', fontWeight:600}}>— {n}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ContactPage() {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    ['¿Con cuánto tiempo de anticipación hay que pedir?', 'Los pedidos se preparan con 3 a 7 días de anticipación, dependiendo de la cantidad. Para eventos grandes (más de 30 piezas) idealmente 2 semanas.'],
    ['¿Hacen despachos a regiones?', 'Sí, despachamos a todo Chile vía Starken y Chilexpress. En Santiago puedes retirar en el taller o coordinamos despacho programado.'],
    ['¿Cómo funciona el pago?', 'Reservas tu pedido en el sitio sin pago inmediato. Confirmamos por WhatsApp y eliges: transferencia, Mercado Pago o Flow. El pago final se hace al retirar o antes del despacho.'],
    ['¿Puedo personalizar aroma, color y mensaje?', '¡Claro! En cada producto puedes elegir aroma, color de lazo y dejar un mensaje para la tarjeta escrita a mano.'],
    ['¿Tienen pedido mínimo?', 'Para velas individuales no hay mínimo. Para souvenirs de baby shower o bautizo el mínimo son 20 unidades.'],
    ['¿Las velas son seguras?', 'Sí. Usamos cera de soya natural, mechas de algodón y esencias aptas para velas. Siempre recomendamos no dejarlas sin supervisión.'],
  ];

  return (
    <div className="page">
      <div style={{textAlign:'center', padding:'20px 0 40px'}}>
        <span className="eyebrow">Escríbenos</span>
        <h1 style={{margin:'8px 0'}}>¿Tienes una ocasión<br/><span className="serif-i" style={{color:'var(--rose-deep)'}}>en mente?</span></h1>
        <p style={{color:'var(--ink-soft)', fontSize:15, maxWidth:520, margin:'16px auto 0'}}>
          Te respondo por WhatsApp o email en menos de 24h (generalmente antes).
        </p>
      </div>

      <div className="contact-wrap">
        <div>
          <h3 style={{marginBottom:20}}>Contacto directo</h3>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            <a href="#" className="delivery-opt" style={{textDecoration:'none'}}>
              <div className="radio" style={{background:'var(--rose-deep)', borderColor:'var(--rose-deep)'}}><Ic name="wa" size={12} color="#fff"/></div>
              <div style={{flex:1}}>
                <div className="d-title">WhatsApp</div>
                <div className="d-sub">+56 9 XXXX XXXX · la forma más rápida</div>
              </div>
              <Ic name="arrow-r" size={18} color="var(--ink-faint)"/>
            </a>
            <a href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer" className="delivery-opt" style={{textDecoration:'none'}}>
              <div className="radio" style={{background:'var(--gold-deep)', borderColor:'var(--gold-deep)'}}><Ic name="ig" size={12} color="#fff"/></div>
              <div style={{flex:1}}>
                <div className="d-title">Instagram</div>
                <div className="d-sub">@aurora.velas.cl · ve el día a día del taller</div>
              </div>
              <Ic name="arrow-r" size={18} color="var(--ink-faint)"/>
            </a>
            <a href="mailto:hola@auroravelas.cl" className="delivery-opt" style={{textDecoration:'none'}}>
              <div className="radio" style={{background:'var(--ink)', borderColor:'var(--ink)'}}><Ic name="mail" size={12} color="#fff"/></div>
              <div style={{flex:1}}>
                <div className="d-title">Email</div>
                <div className="d-sub">hola@auroravelas.cl</div>
              </div>
              <Ic name="arrow-r" size={18} color="var(--ink-faint)"/>
            </a>
          </div>

          <h3 style={{marginTop:32, marginBottom:14}}>¿Algo personalizado?</h3>
          <div className="form-group"><label>Tu nombre</label><input type="text" placeholder="Camila"/></div>
          <div className="form-group"><label>WhatsApp</label><input type="tel" placeholder="+56 9 ..."/></div>
          <div className="form-group"><label>Cuéntanos</label><textarea rows={4} placeholder="Ocasión, cantidad aproximada, fecha…"/></div>
          <button className="btn btn-primary">Enviar mensaje</button>
        </div>

        <div>
          <h3 style={{marginBottom:16}}>Preguntas frecuentes</h3>
          <div>
            {faqs.map(([q,a], i) => (
              <div key={i} className={`faq-item ${open===i?'open':''}`} onClick={() => setOpen(open===i?-1:i)}>
                <div className="q"><span>{q}</span><span className="ic"><Ic name="plus" size={16}/></span></div>
                <div className="a">{a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

function ProcessPage({ onNav }) {
  return (
    <div className="page">
      <div style={{textAlign:'center', padding:'20px 0 40px'}}>
        <span className="eyebrow">El proceso</span>
        <h1 style={{margin:'8px 0'}}>De la cera<br/><span className="serif-i" style={{color:'var(--rose-deep)'}}>a tu celebración.</span></h1>
        <p style={{color:'var(--ink-soft)', maxWidth:560, margin:'16px auto'}}>
          Cada vela pasa por seis pasos, todos hechos a mano, en el taller. Te dejo algunos reels del paso a paso.
        </p>
      </div>

      <div className="ig-strip" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
        {[
          ['01 Derretir', 'gold'], ['02 Perfumar', 'rose'], ['03 Teñir', 'lavender'],
          ['04 Moldear', 'cream'], ['05 Envolver', 'rose'], ['06 Entregar', 'gold'],
        ].map(([label, tone], i) => (
          <div key={label} style={{position:'relative', aspectRatio:'0.9', borderRadius:'var(--radius-lg)', overflow:'hidden', cursor:'pointer'}}>
            <div className="ph-candle" data-tone={tone} style={{width:'100%', height:'100%'}}>
              <CandleSilhouette kind={['sphere','pillar','rose','bouquet','box','heart'][i]} opacity={0.45}/>
            </div>
            <div style={{position:'absolute', inset:0, display:'flex', alignItems:'flex-end', padding:20, background:'linear-gradient(to top, rgba(0,0,0,0.5), transparent 60%)'}}>
              <div>
                <div style={{color:'#fff', fontFamily:'Playfair Display', fontSize:20}}>{label}</div>
                <div style={{color:'rgba(255,255,255,0.8)', fontSize:11, marginTop:4, display:'flex', alignItems:'center', gap:4}}><Ic name="play" size={10}/> 0:45</div>
              </div>
            </div>
          </div>
        ))}
      </div>

      <div style={{textAlign:'center', marginTop:40}}>
        <a className="btn btn-gold btn-lg" href="https://www.instagram.com/aurora.velas.cl/" target="_blank" rel="noopener noreferrer">
          <Ic name="ig" size={16}/> Ver más en Instagram
        </a>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductDetail, AboutPage, ContactPage, ProcessPage, ProductCard });