// Mil Delicias · Web v2 — tokens, datos reales y componentes compartidos (tema oscuro/dorado)
const V2 = {
  bg: '#120c09', bg2: '#1a110c', bg3: '#23170f', ink: '#f3e9d8', muted: '#b9a68d', dim: '#7d6c58',
  gold: '#d1a86d', goldDeep: '#a98449', line: 'rgba(209,168,109,0.22)', lineSoft: 'rgba(243,233,216,0.08)',
  display: '"Playfair Display", "Times New Roman", serif', serif: '"Cormorant Garamond", Georgia, serif',
  script: '"Allura", cursive', sans: '"Inter", -apple-system, sans-serif',
  wa: 'https://wa.me/51942464777', phone: '+51 942 464 777', ig: '@mildeliciasmq', fb: 'facebook.com/mildeliciasmq',
  pedidoMessage: 'Hola Mil Delicias, quiero hacer un pedido.',
  addr: 'Calle Moquegua 320 · Moquegua, Perú', hours: 'Lun – Sáb · 9:00 am – 8:00 pm',
};
const P2 = window.MD.PHOTOS;

const HERO_SLIDES = [P2.boda, P2.cumple50, P2.safariTeo, P2.bautizo, P2.oceano];

const DIFERENCIALES = [
  ['01', 'Diseño personalizado', 'Cada torta nace de tu idea. No trabajamos con catálogo cerrado: dibujamos, modelamos y decoramos según lo que imaginas.'],
  ['02', 'El color exacto', 'Si pides un tono, llegamos a ese tono. Los colores de la fiesta y los de la torta coinciden.'],
  ['03', 'Queque fresco, sin empalagar', 'Horneamos para tu fecha. Sabor equilibrado que se disfruta hasta el último bocado.'],
  ['04', 'Puntualidad y profesionalismo', 'Tu torta llega el día y la hora acordados, lista para la mesa.'],
];

const SABORES = {
  clasicos: { titulo: 'Clásicos', queques: ['Chocolate', 'Vainilla'], rellenos: ['Manjar'] },
  especiales: {
    titulo: 'Especiales',
    queques: ['Carrot cake', 'Red velvet', 'Naranja', 'Vainilla chips', 'Doble chocolate', 'Marmoleado'],
    rellenos: ['Fudge de chocolate', 'Frosting de queso crema', 'Chantilly con galleta', 'Relleno de frutas'],
    notas: { 'Doble chocolate': 'con chispas de chocolate en el queque', 'Frosting de queso crema': 'queso crema y chantilly' },
  },
};

const CATS = ['Todo', 'Bodas', 'Bautizo & Baby', 'Infantil', 'Adultos', 'Bocaditos'];
const GALERIA = [
  { src: P2.boda, label: 'Boda · dorado y blanco', cat: 'Bodas' },
  { src: P2.safariTeo, label: 'Safari · Teo', cat: 'Infantil' },
  { src: P2.bautizo, label: 'Bautizo · Adalía', cat: 'Bautizo & Baby' },
  { src: P2.cumple50, label: 'Cumpleaños 50', cat: 'Adultos' },
  { src: P2.oceano, label: 'Primer añito · Noah', cat: 'Infantil' },
  { src: P2.pulpo, label: 'Baby shower · Oh Baby', cat: 'Bautizo & Baby' },
  { src: P2.safariBauti, label: 'Safari · Bauti', cat: 'Infantil' },
  { src: P2.cupcakeRose, label: 'Cupcake personalizado', cat: 'Bocaditos' },
  { src: P2.cakepopsRose, label: 'Cake pops · Rose', cat: 'Bocaditos' },
  { src: P2.cakepopsNumbers, label: 'Cake pops · Numberblocks', cat: 'Bocaditos' },
];

const TIPOS = ['Torta de cumpleaños', 'Torta temática infantil', 'Torta de boda', 'Torta de bautizo', 'Cupcakes', 'Cake pops', 'Galletas decoradas', 'Mesa de dulces'];
const TODOS_SABORES = [...SABORES.clasicos.queques, ...SABORES.especiales.queques];
const RESERVADAS = ['2026-09-19', '2026-09-26', '2026-10-03', '2026-10-10', '2026-10-17', '2026-10-31'];
const HOY = new Date();
HOY.setHours(0, 0, 0, 0);

// ── estilos globales ──
const V2_CSS = `
html{scroll-behavior:smooth}
body{margin:0;background:${V2.bg};color:${V2.ink};-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:${V2.gold};text-decoration:none}a:hover{color:${V2.ink}}
::selection{background:${V2.gold};color:${V2.bg}}
.v2-card{position:relative;overflow:hidden;background:${V2.bg2}}
.v2-card img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .6s}
.v2-card:hover img{transform:scale(1.045)}
.v2-card .cap{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(180deg,rgba(18,12,9,0) 0%,rgba(18,12,9,.85) 100%);font-family:${V2.serif};font-size:18px;font-style:italic;color:${V2.ink};opacity:0;transform:translateY(8px);transition:all .5s}
.v2-card:hover .cap{opacity:1;transform:none}
.v2-chip{background:none;border:1px solid ${V2.line};color:${V2.muted};font-family:${V2.sans};font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:10px 18px;border-radius:999px;cursor:pointer;transition:all .3s}
.v2-chip:hover{color:${V2.ink};border-color:${V2.gold}}
.v2-chip.on{background:${V2.gold};border-color:${V2.gold};color:${V2.bg};font-weight:600}
.v2-field{width:100%;background:transparent;border:0;border-bottom:1px solid ${V2.line};color:${V2.ink};font-family:${V2.display};font-size:20px;padding:12px 0;outline:none;border-radius:0;appearance:none;-webkit-appearance:none}
.v2-field:focus{border-bottom-color:${V2.gold}}
select.v2-field option{background:${V2.bg2};color:${V2.ink}}
input[type=range].v2-range{width:100%;accent-color:${V2.gold};margin:18px 0 6px}
input[type=date].v2-field::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.6)}
.v2-btn{display:inline-flex;align-items:center;gap:12px;padding:20px 34px;border-radius:999px;background:${V2.gold};color:${V2.bg};font-family:${V2.sans};font-size:13px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;border:0;cursor:pointer;box-shadow:0 14px 40px rgba(209,168,109,.28);transition:transform .25s,box-shadow .25s,background .25s}
.v2-btn:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(209,168,109,.4);color:${V2.bg};background:#e0b97c}
.v2-btn.ghost{background:transparent;color:${V2.ink};border:1px solid ${V2.line};box-shadow:none}
.v2-btn.ghost:hover{border-color:${V2.gold};color:${V2.gold};box-shadow:none}
.v2-btn.big{padding:24px 44px;font-size:14px}
details.v2-faq{border-bottom:1px solid ${V2.lineSoft};padding:26px 0}
details.v2-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:${V2.display};font-size:clamp(18px,1.6vw,23px);color:${V2.ink}}
details.v2-faq summary::-webkit-details-marker{display:none}
details.v2-faq summary .pl{font-family:${V2.script};font-size:34px;color:${V2.gold};line-height:1;transition:transform .4s}
details.v2-faq[open] summary .pl{transform:rotate(45deg)}
details.v2-faq p{font-family:${V2.serif};font-size:19px;font-style:italic;color:${V2.muted};line-height:1.65;margin:14px 0 0;max-width:720px}
.v2-strip{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;scrollbar-width:none}
.v2-strip::-webkit-scrollbar{display:none}
.v2-strip>*{scroll-snap-align:start;flex:0 0 clamp(240px,32vw,400px)}
.v2-nav a{color:${V2.muted};font-family:${V2.sans};font-size:11px;letter-spacing:.22em;text-transform:uppercase;padding:8px 10px;transition:color .3s}
.v2-nav a:hover{color:${V2.gold}}
@keyframes v2marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
`;

// ── componentes ──
function Reveal({ children, delay = 0, style = {}, y = 26 }) {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); io.disconnect(); } }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
    io.observe(el); return () => io.disconnect();
  }, []);
  return <div ref={ref} style={{ opacity: on ? 1 : 0, transform: on ? 'none' : `translateY(${y}px)`, transition: `opacity 1s ease ${delay}ms, transform 1s cubic-bezier(.2,.7,.2,1) ${delay}ms`, ...style }}>{children}</div>;
}

function Slideshow({ images = HERO_SLIDES, interval = 4800, style = {}, children, dim = 0.45, pos = 'center' }) {
  const [i, setI] = React.useState(0);
  React.useEffect(() => { const t = setInterval(() => setI(v => (v + 1) % images.length), interval); return () => clearInterval(t); }, [images.length, interval]);
  return (
    <div style={{ position: 'relative', overflow: 'hidden', background: V2.bg2, ...style }}>
      {images.map((src, k) => (
        <img key={src} src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: pos, opacity: k === i ? 1 : 0, transform: k === i ? 'scale(1.07)' : 'scale(1)', transition: 'opacity 1.8s ease, transform 7s ease-out' }} />
      ))}
      {dim > 0 && <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(180deg, rgba(18,12,9,${dim}) 0%, rgba(18,12,9,${dim}) 55%, rgba(18,12,9,${Math.min(1, dim + 0.4)}) 100%)` }} />}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 22, zIndex: 2, display: 'flex', justifyContent: 'center', gap: 8 }}>
        {images.map((_, k) => <button key={k} onClick={() => setI(k)} aria-label={`Foto ${k + 1}`} style={{ width: k === i ? 28 : 8, height: 3, border: 0, borderRadius: 2, background: k === i ? V2.gold : 'rgba(243,233,216,.35)', cursor: 'pointer', padding: 0, transition: 'all .5s' }} />)}
      </div>
      {children}
    </div>
  );
}

function StarMark({ size = 22, color = V2.gold }) {
  return <svg width={size} height={size} viewBox="0 0 24 24" fill={color}><polygon points="12 1.5 14.9 8.6 22.5 9.2 16.7 14.2 18.5 21.7 12 17.7 5.5 21.7 7.3 14.2 1.5 9.2 9.1 8.6" /></svg>;
}

function Eyebrow({ children, style = {}, color = V2.gold }) {
  return <div style={{ fontFamily: V2.sans, fontSize: 11, letterSpacing: '.32em', textTransform: 'uppercase', color, display: 'flex', alignItems: 'center', gap: 14, ...style }}><span style={{ width: 28, height: 1, background: color, display: 'inline-block' }} />{children}</div>;
}

function WaButton({ children = 'Hacer pedido por WhatsApp', big = false, ghost = false, href = V2.wa, style = {} }) {
  const { WhatsIcon } = window.MD;
  const target = href === V2.wa ? `${V2.wa}?text=${encodeURIComponent(V2.pedidoMessage)}` : href;
  return <a className={`v2-btn${big ? ' big' : ''}${ghost ? ' ghost' : ''}`} href={target} target="_blank" rel="noopener" style={style}><WhatsIcon size={big ? 20 : 17} />{children}</a>;
}

function GalleryFilter({ layout = 'grid', ratio = '4 / 5' }) {
  const [cat, setCat] = React.useState('Todo');
  const items = GALERIA.filter(g => cat === 'Todo' || g.cat === cat);
  return (
    <div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 36 }}>
        {CATS.map(c => <button key={c} className={`v2-chip${cat === c ? ' on' : ''}`} onClick={() => setCat(c)}>{c}</button>)}
      </div>
      {layout === 'grid' ? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, 260px), 1fr))', gap: 18 }}>
          {items.map((g, i) => <Reveal key={g.src} delay={(i % 4) * 90}><div className="v2-card" style={{ aspectRatio: ratio }}><img src={g.src} alt={g.label} /><div className="cap">{g.label}</div></div></Reveal>)}
        </div>
      ) : (
        <div className="v2-strip">
          {items.map((g, i) => <div key={g.src} className="v2-card" style={{ aspectRatio: '3 / 4' }}><img src={g.src} alt={g.label} /><div className="cap">{g.label}</div><div style={{ position: 'absolute', top: 16, left: 18, fontFamily: V2.sans, fontSize: 10, letterSpacing: '.25em', color: V2.ink, opacity: .8 }}>{String(i + 1).padStart(2, '0')}</div></div>)}
        </div>
      )}
    </div>
  );
}

function SaboresList({ compact = false }) {
  const Col = ({ s }) => (
    <div style={{ padding: compact ? '28px 0' : '40px 36px', borderTop: `1px solid ${V2.line}` }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', flexWrap: 'wrap', gap: '4px 16px', marginBottom: 24 }}>
        <h3 style={{ fontFamily: V2.script, fontSize: clampPx(40, 4, 56), color: V2.gold, margin: 0, fontWeight: 400 }}>{s.titulo}</h3>
        <span style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: V2.dim, whiteSpace: 'nowrap' }}>{s.queques.length} queques · {s.rellenos.length} {s.rellenos.length > 1 ? 'rellenos' : 'relleno'}</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28 }}>
        <div>
          <div style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: V2.muted, marginBottom: 14 }}>Queque</div>
          {s.queques.map(q => <div key={q} style={{ fontFamily: V2.display, fontSize: 20, color: V2.ink, padding: '9px 0', borderBottom: `1px solid ${V2.lineSoft}` }}>{q}{s.notas && s.notas[q] && <span style={{ fontFamily: V2.serif, fontStyle: 'italic', fontSize: 16, color: V2.muted }}> · {s.notas[q]}</span>}</div>)}
        </div>
        <div>
          <div style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: V2.muted, marginBottom: 14 }}>Relleno</div>
          {s.rellenos.map(r => <div key={r} style={{ fontFamily: V2.display, fontSize: 20, color: V2.ink, padding: '9px 0', borderBottom: `1px solid ${V2.lineSoft}` }}>{r}{s.notas && s.notas[r] && <span style={{ fontFamily: V2.serif, fontStyle: 'italic', fontSize: 16, color: V2.muted }}> · {s.notas[r]}</span>}</div>)}
        </div>
      </div>
    </div>
  );
  return <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : 'repeat(auto-fit, minmax(min(100%, 380px), 1fr))', gap: compact ? 0 : 24 }}><Col s={SABORES.clasicos} /><Col s={SABORES.especiales} /></div>;
}

function clampPx(min, vw, max) { return `clamp(${min}px, ${vw}vw, ${max}px)`; }

function Cotizador() {
  const [f, setF] = React.useState({ tipo: TIPOS[0], porciones: 20, fecha: '', sabor: TODOS_SABORES[0], detalle: '' });
  const set = k => e => setF({ ...f, [k]: e.target.value });
  const msg = `Hola Mil Delicias, quiero cotizar: ${f.tipo} para ${f.porciones} porciones${f.fecha ? `, fecha ${f.fecha}` : ''}. Sabor: ${f.sabor}.${f.detalle ? ` Idea: ${f.detalle}` : ''}`;
  const href = `${V2.wa}?text=${encodeURIComponent(msg)}`;
  const L = ({ children }) => <label style={{ display: 'block', fontFamily: V2.sans, fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: V2.muted, marginTop: 26 }}>{children}</label>;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 320px), 1fr))', gap: 48, alignItems: 'start' }}>
      <div>
        <L>Tipo de pedido</L>
        <select className="v2-field" value={f.tipo} onChange={set('tipo')}>{TIPOS.map(t => <option key={t}>{t}</option>)}</select>
        <L>Porciones · <span style={{ color: V2.gold, letterSpacing: 0, fontFamily: V2.display, fontSize: 18, textTransform: 'none' }}>{f.porciones}</span></L>
        <input className="v2-range" type="range" min="6" max="200" step="2" value={f.porciones} onChange={set('porciones')} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: V2.sans, fontSize: 10, color: V2.dim, letterSpacing: '.1em' }}><span>6</span><span>200</span></div>
        <L>Sabor del queque</L>
        <select className="v2-field" value={f.sabor} onChange={set('sabor')}>{TODOS_SABORES.map(t => <option key={t}>{t}</option>)}</select>
        <L>Fecha del evento</L>
        <input className="v2-field" type="date" value={f.fecha} onChange={set('fecha')} />
        <L>Tu idea (colores, personaje, estilo)</L>
        <input className="v2-field" type="text" placeholder="Ej. safari en tonos tierra, nombre Teo, 3 pisos" value={f.detalle} onChange={set('detalle')} />
      </div>
      <div style={{ background: V2.bg3, padding: 'clamp(28px, 3vw, 44px)', border: `1px solid ${V2.line}`, position: 'sticky', top: 100 }}>
        <Eyebrow>Tu mensaje</Eyebrow>
        <p style={{ fontFamily: V2.serif, fontSize: 22, fontStyle: 'italic', lineHeight: 1.55, color: V2.ink, margin: '22px 0 28px', textWrap: 'pretty' }}>“{msg}”</p>
        <WaButton href={href} big>Enviar y cotizar</WaButton>
        <p style={{ fontFamily: V2.sans, fontSize: 12, color: V2.muted, lineHeight: 1.7, marginTop: 22 }}>Se abre WhatsApp con este texto listo. Respondemos con propuesta y precio en menos de 24 horas. Reserva con 50% de adelanto.</p>
      </div>
    </div>
  );
}

function Calendario({ months = [[2026, 8], [2026, 9]] }) {
  const DN = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
  const MN = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
  const Month = ({ y, m }) => {
    const first = new Date(y, m, 1); const lead = (first.getDay() + 6) % 7; const days = new Date(y, m + 1, 0).getDate();
    const cells = [...Array(lead).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)];
    return (
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
          <h3 style={{ fontFamily: V2.display, fontSize: 26, fontWeight: 400, margin: 0, color: V2.ink }}>{MN[m]} <span style={{ color: V2.dim, fontStyle: 'italic' }}>{y}</span></h3>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6 }}>
          {DN.map((d, i) => <div key={i} style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.2em', color: V2.dim, textAlign: 'center', paddingBottom: 8 }}>{d}</div>)}
          {cells.map((d, i) => {
            if (!d) return <div key={i} />;
            const date = new Date(y, m, d); const key = `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
            const past = date < HOY; const res = RESERVADAS.includes(key); const today = date.getTime() === HOY.getTime();
            return (
              <div key={i} title={past ? 'Fecha pasada' : res ? 'Reservada' : 'Disponible'} style={{ aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: V2.display, fontSize: 15, borderRadius: 999, color: past ? V2.dim : res ? V2.dim : V2.ink, textDecoration: res ? 'line-through' : 'none', border: today ? `1px solid ${V2.gold}` : `1px solid ${past || res ? 'transparent' : V2.lineSoft}`, background: !past && !res ? 'rgba(209,168,109,.06)' : 'transparent', opacity: past ? .4 : 1 }}>{d}</div>
            );
          })}
        </div>
      </div>
    );
  };
  return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 300px), 1fr))', gap: 48 }}>{months.map(([y, m]) => <Month key={m} y={y} m={m} />)}</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 28, marginTop: 32, fontFamily: V2.sans, fontSize: 11, letterSpacing: '.18em', textTransform: 'uppercase', color: V2.muted }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}><i style={{ width: 12, height: 12, borderRadius: 999, background: 'rgba(209,168,109,.25)', border: `1px solid ${V2.gold}` }} />Disponible</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}><i style={{ width: 12, height: 12, borderRadius: 999, border: `1px solid ${V2.dim}` }} />Reservada</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}><i style={{ width: 12, height: 12, borderRadius: 999, border: `1px solid ${V2.gold}` }} />Hoy</span>
      </div>
      <p style={{ fontFamily: V2.serif, fontSize: 17, fontStyle: 'italic', color: V2.dim, marginTop: 18 }}>Agenda referencial. Tortas personalizadas con mínimo 5 días de anticipación; bodas y eventos grandes, 3 semanas. Confirma tu fecha por WhatsApp.</p>
    </div>
  );
}

function FaqList() {
  return <div>{window.MD.FAQS.map((f, i) => <details key={i} className="v2-faq" open={i === 0}><summary>{f.q}<span className="pl">+</span></summary><p>{f.a}</p></details>)}</div>;
}

function Contacto({ align = 'left' }) {
  const rows = [['WhatsApp', V2.phone, V2.wa], ['Instagram', V2.ig, 'https://instagram.com/mildeliciasmq'], ['Facebook', V2.fb, 'https://facebook.com/mildeliciasmq'], ['Dirección', V2.addr + ' · Atención solo por pedido', null], ['Horario', V2.hours, null]];
  return (
    <div style={{ display: 'grid', gap: 0, textAlign: align }}>
      {rows.map(([l, v, h]) => (
        <div key={l} style={{ padding: '18px 0', borderBottom: `1px solid ${V2.lineSoft}`, display: 'grid', gridTemplateColumns: align === 'center' ? '1fr' : 'minmax(90px, 140px) 1fr', gap: 8 }}>
          <span style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.28em', textTransform: 'uppercase', color: V2.gold, paddingTop: 6 }}>{l}</span>
          {h ? <a href={h} target="_blank" rel="noopener" style={{ fontFamily: V2.display, fontSize: 21, color: V2.ink, overflowWrap: 'anywhere' }}>{v}</a> : <span style={{ fontFamily: V2.display, fontSize: 21, color: V2.ink, textWrap: 'pretty' }}>{v}</span>}
        </div>
      ))}
    </div>
  );
}

function FooterV2({ center = false }) {
  return (
    <footer style={{ padding: '48px clamp(20px, 5vw, 72px)', borderTop: `1px solid ${V2.line}`, display: 'flex', flexWrap: 'wrap', gap: 16, justifyContent: center ? 'center' : 'space-between', alignItems: 'center', textAlign: center ? 'center' : 'left' }}>
      <div style={{ fontFamily: V2.script, fontSize: 34, color: V2.gold }}>Mil Delicias</div>
      <div style={{ fontFamily: V2.sans, fontSize: 10, letterSpacing: '.25em', textTransform: 'uppercase', color: V2.dim }}>© 2026 · Repostería boutique · Moquegua, Perú · Desde 2022</div>
    </footer>
  );
}

Object.assign(window, { V2, V2_CSS, HERO_SLIDES, DIFERENCIALES, SABORES, GALERIA, CATS, Reveal, Slideshow, StarMark, Eyebrow, WaButton, GalleryFilter, SaboresList, Cotizador, Calendario, FaqList, Contacto, FooterV2, clampPx });