// ============================
// LELUSA — Public Pages
// public-pages.jsx
// ============================

// ─── Constants ──────────────────────────────────────────────
const BRAND_LOGO_WHITE_SRC = '/uploads/brand/lelusa-logo-horizontal-white.png';
const BRAND_LOGO_VERTICAL_SRC = '/uploads/brand/lelusa-logo-vertical-color.png';
const BRAND_EMBLEM_SRC = '/uploads/brand/lelusa-emblem-floral.png';
const BRAND_MONOGRAM_SRC = '/uploads/brand/lelusa-monogram-ld.png';
const HERO_BG_SRC = '/uploads/hero-bg-2.png';
const COLLECTION_BG_SRC = '/uploads/hero-bg.png';
const ABOUT_BG_SRC = '/uploads/hero-bg-3.png';
const CTA_BG_SRC = '/uploads/hero-bg-4.png';

const DECO_SCENES = [
  { name: 'Baby Shower Boho',     tag: 'Baby Shower',  c1: '#D4A8B8', c2: '#A8BAB8', c3: '#C8A87A', bg: '#FDF4F7' },
  { name: 'Boda Romántica',       tag: 'Bodas',        c1: '#C8A87A', c2: '#A8BAB8', c3: '#9B7A61', bg: '#FDF9F3' },
  { name: 'Cumpleaños Princesa',  tag: 'Cumpleaños',   c1: '#C4A8D4', c2: '#D4A8C0', c3: '#D4B880', bg: '#F8F4FE' },
  { name: 'Quinceañera Elegance', tag: 'Quinceañera',  c1: '#D4B880', c2: '#C4899A', c3: '#C0A8D4', bg: '#FEF8F2' },
];

// ─── Reveal: fade-in + slide-up por scroll, parallax opcional ────
function usePrefersReducedMotion() {
  const [reduced, setReduced] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    const update = () => setReduced(mq.matches);
    update();
    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', update) : mq.removeListener(update); };
  }, []);
  return reduced;
}

function Reveal({ children, delay = 0, parallax = 0, as = 'div', style = {}, className = '' }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  const [offset, setOffset] = React.useState(0);
  const reduced = usePrefersReducedMotion();

  // Reveal on intersection
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return undefined;
    if (reduced) { setVisible(true); return undefined; }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setVisible(true); obs.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [reduced]);

  // Subtle parallax (disabled <900px and under reduced-motion)
  React.useEffect(() => {
    if (!parallax || reduced) return undefined;
    if (window.innerWidth < 900) return undefined;
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = window.requestAnimationFrame(() => {
        raf = 0;
        const el = ref.current;
        if (!el) return;
        const rect = el.getBoundingClientRect();
        const center = rect.top + rect.height / 2 - window.innerHeight / 2;
        setOffset(-(center * parallax));
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) window.cancelAnimationFrame(raf); };
  }, [parallax, reduced]);

  const Tag = as;
  const transitionDelay = visible && delay ? `${delay}ms` : '0ms';
  return (
    <Tag
      ref={ref}
      className={`reveal-init ${visible ? 'is-visible' : ''} ${className}`}
      style={{ ...style, transitionDelay, ...(parallax && !reduced ? { transition: 'none' } : {}), ...(offset ? { transform: `translateY(${offset}px)` } : {}) }}
    >
      {children}
    </Tag>
  );
}

// ─── Home Page ──────────────────────────────────────────────────
function HomePage() {
  const { pageData } = React.useContext(window.AppContext);
  React.useEffect(() => {
    if (!pageData?.section) return;
    const id = pageData.section;
    const t = window.setTimeout(() => {
      document.querySelector(`[data-section="${id}"]`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }, 80);
    return () => window.clearTimeout(t);
  }, [pageData?.section]);
  return (
    <div className="lel-has-bottomnav">
      <HeroSection />
      <CategoriesSection />
      <MarbleBand />
      <FeaturedSection />
      <DessertsShowcaseSection />
      <AboutSection />
      <HowItWorksSection />
      <MarbleBand />
      <TestimonialsSection />
      <BookingSection />
      <MarbleBand />
      <CTASection />
    </div>
  );
}

function SectionDivider({ bg = 'var(--bg)' }) {
  return (
    <div style={{ background: bg, padding: '6px 24px' }}>
      <div style={{ maxWidth: '1120px', margin: '0 auto', position: 'relative', height: '1px', background: 'linear-gradient(to right, transparent, var(--border), transparent)' }}>
        <span style={{ position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%,-50%)', background: bg, padding: '0 14px', color: 'var(--babyblue)', fontSize: '12px' }}>✦</span>
      </div>
    </div>
  );
}

// Full-contrast marble strip used as a separator between sections, so the marble
// texture (veins + gold flecks) reads clearly instead of being washed out behind
// the cream section backgrounds.
function MarbleBand() {
  return (
    <div role="presentation" aria-hidden="true" style={{
      height: 'clamp(70px, 12vw, 120px)',
      backgroundImage: "url('/uploads/marble-bg.png')",
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      borderTop: '1px solid rgba(58,42,32,0.10)',
      borderBottom: '1px solid rgba(58,42,32,0.10)',
      position: 'relative',
    }}>
      {/* soft vignette so the band blends into the cream sections above/below */}
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
        background: 'linear-gradient(180deg, rgba(250,240,232,0.45) 0%, rgba(250,240,232,0) 22%, rgba(250,240,232,0) 78%, rgba(250,240,232,0.45) 100%)' }} />
    </div>
  );
}

// Decide si el hero usa video (desktop + sin reduced-motion) o imagen
function useHeroVideo() {
  const reduced = usePrefersReducedMotion();
  const [wide, setWide] = React.useState(typeof window !== 'undefined' ? window.innerWidth >= 769 : true);
  React.useEffect(() => {
    const mq = window.matchMedia('(min-width: 769px)');
    const update = () => setWide(mq.matches);
    update();
    mq.addEventListener ? mq.addEventListener('change', update) : mq.addListener(update);
    return () => { mq.removeEventListener ? mq.removeEventListener('change', update) : mq.removeListener(update); };
  }, []);
  return wide && !reduced;
}

function HeroSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const systemSettings = window.LelusaStore?.useSystemSettings?.() || {};
  const brand = systemSettings.brand || {};
  const landing = systemSettings.landing || {};
  const useVideo = useHeroVideo();
  const heroImage = landing.heroImage || HERO_BG_SRC;
  const heroMobileImage = landing.heroMobileImage || heroImage;
  const heroVideo = landing.heroVideo || '/uploads/hero-video.mp4';

  return (
    <section style={{ position: 'relative', overflow: 'hidden', minHeight: 'min(88vh, 760px)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'radial-gradient(760px 520px at 50% 22%, var(--primary-light), transparent 64%), linear-gradient(165deg, #F6E4EC 0%, var(--bg) 52%, var(--bg-soft) 100%)' }}>

      {/* Fondo: video en desktop (sin reduced-motion), imagen en móvil / fallback */}
      {useVideo ? (
        <video
          autoPlay muted loop playsInline
          poster={heroImage}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', zIndex: 0 }}
        >
          <source src={heroVideo} type="video/mp4" />
        </video>
      ) : (
        <picture>
          <source media="(max-width: 768px)" srcSet={heroMobileImage} />
          <img
            src={heroImage}
            alt="Decoración de evento Lelusa"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center', zIndex: 0, animation: 'slowZoom 18s ease-out both' }}
          />
        </picture>
      )}

      {/* Overlay cinematografico oscuro para legibilidad */}
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: [
          'radial-gradient(58% 44% at 50% 48%, rgba(250,240,232,0.18) 0%, rgba(92,50,42,0.20) 42%, rgba(13,10,9,0.50) 100%)',
          'linear-gradient(180deg, rgba(12,8,7,0.58) 0%, rgba(32,18,16,0.26) 42%, rgba(10,7,6,0.72) 100%)',
          'linear-gradient(90deg, rgba(8,6,5,0.58) 0%, rgba(8,6,5,0.12) 35%, rgba(8,6,5,0.12) 65%, rgba(8,6,5,0.58) 100%)',
        ].join(', ') }} />

      {/* Marco fino decorativo */}
      <div style={{ position: 'absolute', inset: '20px', border: '1px solid rgba(250,240,232,0.26)', borderRadius: '24px', pointerEvents: 'none', zIndex: 2, animation: 'hairlineIn 1.2s ease 0.2s both' }} />
      <img src={BRAND_EMBLEM_SRC} alt="" aria-hidden="true" style={{ position: 'absolute', left: '50%', top: '42%', width: '260px', height: 'auto', transform: 'translate(-50%, -50%)', opacity: 0.10, pointerEvents: 'none', zIndex: 2, filter: 'drop-shadow(0 18px 36px rgba(0,0,0,0.20))' }} />

      {/* Contenido centrado */}
      <div style={{ position: 'relative', zIndex: 3, maxWidth: '760px', margin: '0 auto', padding: '72px 24px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <img
          className="lel-hero-logo"
          src={BRAND_LOGO_WHITE_SRC}
          alt="Lelusa Delights & Decor logo"
          style={{ width: '142px', height: 'auto', maxHeight: '84px', objectFit: 'contain', display: 'block', marginBottom: '12px',
            animation: 'logoFloat 6s ease-in-out infinite', filter: 'drop-shadow(0 18px 34px rgba(0,0,0,0.42)) drop-shadow(0 0 22px rgba(250,240,232,0.18))' }}
        />
        <div style={{ fontSize: '11px', letterSpacing: '0.26em', textTransform: 'uppercase', color: '#FCE9EF', fontWeight: 600, marginBottom: '18px', display: 'inline-flex', alignItems: 'center', gap: '12px', textShadow: '0 2px 14px rgba(0,0,0,0.65)' }}>
          <span style={{ width: '34px', height: '1px', background: 'rgba(252,233,239,0.78)' }} />
          {brand.businessName || 'Lelusa'} {brand.tagline || 'Delights & Decor'}
          <span style={{ width: '34px', height: '1px', background: 'rgba(252,233,239,0.78)' }} />
        </div>
        <h1 style={{ margin: '0 0 18px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(36px, 6vw, 60px)', fontWeight: 600, color: '#FFF8F4', lineHeight: 1.07, letterSpacing: '-0.01em', textShadow: '0 4px 24px rgba(0,0,0,0.62)' }}>
          {landing.heroTitlePrefix || t('hero_title_1')}{' '}
          <em style={{ color: '#FFD7E3', fontStyle: 'italic' }}>{landing.heroTitleAccent || t('hero_title_2')}</em>
        </h1>
        <p style={{ margin: '0 0 28px', fontSize: '16px', color: 'rgba(255,248,244,0.92)', lineHeight: 1.75, maxWidth: '460px', textShadow: '0 2px 16px rgba(0,0,0,0.62)' }}>
          {landing.heroDescription || t('hero_desc')}
        </p>
        <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center', marginBottom: '36px' }}>
          <Btn size="lg" onClick={() => navigate('catalog')}>
            {t('hero_btn_catalog')} <Icon name="arrowRight" size={16} color="#fff" />
          </Btn>
          <Btn size="lg" variant="ghost" onClick={() => navigate('catalog')} style={{ background: 'rgba(255,248,244,0.12)', color: '#FFF8F4', borderColor: 'rgba(255,248,244,0.42)', backdropFilter: 'blur(8px)' }}>
            {t('hero_btn_quote')}
          </Btn>
        </div>
        <div style={{ display: 'flex', gap: '36px', flexWrap: 'wrap', justifyContent: 'center' }}>
          {[
            { value: '+200', label: t('stat_events')    },
            { value: '5.0',  label: t('stat_rating') },
            { value: '100%', label: t('stat_happy')  },
          ].map(({ value, label }, i) => (
            <div key={label} style={{ textAlign: 'center' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '30px', fontWeight: 700, color: ['#FFD7E3', window.LelusaAccent.ACCENTS[0].light, window.LelusaAccent.ACCENTS[3].light][i % 3], lineHeight: 1, textShadow: '0 3px 16px rgba(0,0,0,0.58)' }}>{value}</div>
              <div style={{ fontSize: '12px', color: 'rgba(255,248,244,0.88)', marginTop: '5px', letterSpacing: '0.02em', textShadow: '0 2px 12px rgba(0,0,0,0.58)' }}>{label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CategoriesSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { designs, catalogCategories } = window.LelusaStore.usePublicBusinessData();
  const designCategories = window.LelusaStore.getCatalogCategories(catalogCategories, 'design');
  const landing = (window.LelusaStore?.useSystemSettings?.() || {}).landing || {};
  const collectionImage = landing.collectionImage || COLLECTION_BG_SRC;
  const publishedDesigns = (designs || []).filter(d => (d.status || 'published') === 'published');
  const categoryDetails = {
    'baby-shower':  { accent: '#F2C7D5', deep: '#7E4B5C', wash: 'rgba(242,199,213,0.16)', craft: 'flores nube', mood: 'suave y editorial', imagePos: '18% 44%' },
    'boda':         { accent: '#D9BD82', deep: '#7A5D34', wash: 'rgba(217,189,130,0.17)', craft: 'mesas imperiales', mood: 'romántico atemporal', imagePos: '52% 50%' },
    'cumpleanos':   { accent: '#D2B0E2', deep: '#72507F', wash: 'rgba(210,176,226,0.15)', craft: 'globos couture', mood: 'festivo elevado', imagePos: '70% 54%' },
    'gender-reveal':{ accent: '#C6D9D6', deep: '#51726E', wash: 'rgba(198,217,214,0.16)', craft: 'reveal styling', mood: 'delicado sorpresa', imagePos: '38% 36%' },
    'bautizo':      { accent: '#F1DDE5', deep: '#855A67', wash: 'rgba(241,221,229,0.18)', craft: 'lino y luz', mood: 'puro y sereno', imagePos: '24% 58%' },
    'quinceañera':  { accent: '#CFB36E', deep: '#795E2A', wash: 'rgba(207,179,110,0.17)', craft: 'backdrops joya', mood: 'glamour sobrio', imagePos: '62% 44%' },
    'pedida':       { accent: '#E0A6A6', deep: '#805050', wash: 'rgba(224,166,166,0.15)', craft: 'rincones íntimos', mood: 'romance privado', imagePos: '47% 62%' },
    'corporativo':  { accent: '#A8BAB8', deep: '#4D6866', wash: 'rgba(168,186,184,0.15)', craft: 'brand styling', mood: 'pulido y memorable', imagePos: '76% 48%' },
  };
  const categories = designCategories.map(cat => ({
    id: cat.slug,
    name: cat.name || t(`cat_${cat.slug.replace(/-/g, '_')}`),
    description: cat.description || t(`cat_${cat.slug.replace(/-/g, '_')}_desc`),
    count: publishedDesigns.filter(design => design.category === cat.slug).length,
    detail: categoryDetails[cat.slug] || categoryDetails.boda,
  }));
  const collectionDesigns = [...publishedDesigns]
    .sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0))
    .slice(0, 8);
  const hasPublishedDesigns = collectionDesigns.length > 0;
  const heroDesign = collectionDesigns[0];
  const featuredCategory = heroDesign
    ? categories.find(cat => cat.id === heroDesign.category) || categories[0]
    : categories[1] || categories[0];
  const totalDesigns = publishedDesigns.length;
  const totalCategories = categories.filter(cat => cat.count > 0).length;
  const designCountLabel = totalDesigns === 1 ? t('count_designs_one', { count: totalDesigns }) : t('count_designs_other', { count: totalDesigns });
  const categoryCountLabel = totalCategories === 1 ? t('count_cats_one', { count: totalCategories }) : t('count_cats_other', { count: totalCategories });
  return (
    <section data-section="decoraciones" style={{ background: 'linear-gradient(180deg, var(--bg-soft) 0%, #FFF8F4 52%, var(--bg) 100%)', padding: '92px 24px', position: 'relative', overflow: 'hidden', color: 'var(--text)' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.78,
        background: [
          'radial-gradient(620px 360px at 12% 12%, rgba(196,137,154,0.15), transparent 62%)',
          'radial-gradient(520px 320px at 94% 8%, rgba(217,189,130,0.18), transparent 64%)',
          'repeating-linear-gradient(90deg, rgba(58,42,32,0.045) 0 1px, transparent 1px 120px)',
        ].join(', ') }} />
      <div style={{ position: 'relative', maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(260px, 0.78fr) minmax(0, 1.22fr)', gap: '28px', alignItems: 'stretch' }} className="categories-luxury-layout">
          <Reveal as="div" style={{ position: 'relative', minHeight: '520px', border: '1px solid rgba(58,42,32,0.12)', borderRadius: '8px', padding: '34px', overflow: 'hidden',
            background: 'linear-gradient(160deg, rgba(255,255,255,0.82), rgba(250,240,232,0.72))', boxShadow: '0 18px 55px rgba(58,42,32,0.08)' }}>
            <div style={{ position: 'absolute', left: '22px', right: '22px', bottom: '22px', height: '190px', borderRadius: '8px', overflow: 'hidden', pointerEvents: 'none' }}>
              {heroDesign?.image || heroDesign?.canvasPreview ? (
                <img src={heroDesign.canvasPreview || heroDesign.image} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '52% 52%', display: 'block', filter: 'saturate(0.94) contrast(1.04)' }} />
              ) : (
                <img src={collectionImage} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '52% 52%', display: 'block', filter: 'saturate(0.94) contrast(1.04)' }} />
              )}
              <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(65% 55% at 50% 45%, rgba(250,240,232,0.18) 0%, rgba(70,38,32,0.20) 48%, rgba(10,7,6,0.70) 100%), linear-gradient(180deg, rgba(12,8,7,0.14), rgba(12,8,7,0.66))' }} />
            </div>
            <div style={{ position: 'absolute', top: '64px', left: '52px', right: '22px', bottom: '22px', border: '1px solid rgba(196,137,154,0.18)', borderRadius: '999px 999px 8px 8px', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', right: '-30px', bottom: '-24px', fontFamily: "'Cormorant Garamond', serif", fontSize: '190px', lineHeight: 0.8, color: 'rgba(58,42,32,0.06)', fontWeight: 600 }}>08</div>
            <div style={{ position: 'relative', zIndex: 1, height: '100%', display: 'flex', flexDirection: 'column' }}>
              <span style={{ width: 'max-content', maxWidth: '100%', alignSelf: 'flex-start', display: 'inline-flex', alignItems: 'center', borderRadius: '999px', padding: '5px 13px', background: 'rgba(196,137,154,0.10)', color: 'var(--primary-dark)', border: '1px solid rgba(196,137,154,0.22)', fontSize: '10px', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 800 }}>
                {t('col_tag')}
              </span>
              <h2 style={{ margin: '18px 0 16px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(34px, 4vw, 54px)', fontWeight: 600, color: 'var(--text)', lineHeight: 1.02 }}>
                {hasPublishedDesigns ? t('col_title_has') : t('col_title_no')}
              </h2>
              <p style={{ margin: 0, fontSize: '15px', lineHeight: 1.75, color: 'var(--muted)', maxWidth: '360px' }}>
                {hasPublishedDesigns ? t('col_desc_has') : t('col_desc_no')}
              </p>
              <div style={{ marginTop: 'auto', paddingTop: '34px' }}>
                <div style={{ display: 'flex', gap: '10px', marginBottom: '18px' }}>
                  {['#FFF8F4', featuredCategory.detail.accent, featuredCategory.detail.deep].map(color => (
                    <span key={color} style={{ width: '38px', height: '38px', borderRadius: '50%', background: color, border: '1px solid rgba(58,42,32,0.12)', boxShadow: '0 10px 24px rgba(58,42,32,0.12)' }} />
                  ))}
                </div>
                <button onClick={() => navigate('catalog')} style={{ width: '100%', minHeight: '48px', border: '1px solid rgba(58,42,32,0.16)', borderRadius: '999px', background: 'rgba(255,248,244,0.82)', color: 'var(--text)', cursor: 'pointer', fontFamily: "'DM Sans', sans-serif", fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '9px', backdropFilter: 'blur(8px)' }}>
                  {t('col_btn')} <Icon name="arrowRight" size={16} color="var(--primary)" />
                </button>
              </div>
            </div>
          </Reveal>

          <div>
            <Reveal as="div" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '18px', marginBottom: '22px', flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--primary-dark)', fontWeight: 700, marginBottom: '10px' }}>{t('col_subtitle')}</div>
                <h3 style={{ margin: 0, fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 600, color: 'var(--text)' }}>
                  {hasPublishedDesigns ? t('col_published_title') : t('col_empty_title')}
                </h3>
              </div>
              <p style={{ margin: 0, maxWidth: '300px', fontSize: '13px', lineHeight: 1.6, color: 'var(--muted)' }}>
                {hasPublishedDesigns
                  ? `${designCountLabel}${totalCategories ? ` ${t('count_in')} ${categoryCountLabel}` : ''}. ${t('col_count_note')}`
                  : t('col_empty_note')}
              </p>
            </Reveal>
            <Reveal as="div" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', gap: '12px' }} className="categories-luxury-grid">
              {hasPublishedDesigns ? (
                collectionDesigns.map((design, i) => (
                  <DesignCollectionCard key={design.id} design={design} onNavigate={navigate} index={i} detail={categoryDetails[design.category] || categoryDetails.boda} />
                ))
              ) : (
                <div style={{ gridColumn: '1 / -1', minHeight: '278px', border: '1px dashed rgba(58,42,32,0.18)', borderRadius: '8px', background: 'rgba(255,255,255,0.58)', padding: '32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                  <div style={{ fontSize: '11px', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--primary-dark)', fontWeight: 800, marginBottom: '12px' }}>{t('col_empty_tag')}</div>
                  <h4 style={{ margin: '0 0 10px', fontFamily: "'Cormorant Garamond', serif", fontSize: '30px', fontWeight: 600, color: 'var(--text)' }}>{t('col_empty_h')}</h4>
                  <p style={{ margin: '0 0 22px', maxWidth: '520px', color: 'var(--muted)', fontSize: '14px', lineHeight: 1.7 }}>
                    {t('col_empty_p')}
                  </p>
                  <Btn variant="ghost" onClick={() => navigate('quote-form', {})} style={{ alignSelf: 'flex-start' }}>
                    {t('col_empty_btn')}
                  </Btn>
                </div>
              )}
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function DesignCollectionCard({ design, onNavigate, index = 0, detail = {} }) {
  const { t } = window.ReactI18next.useTranslation();
  const { assets } = window.LelusaStore.usePublicBusinessData();
  const landing = (window.LelusaStore?.useSystemSettings?.() || {}).landing || {};
  const collectionImage = landing.collectionImage || COLLECTION_BG_SRC;
  const [hovered, setHovered] = React.useState(false);
  const accent = detail.accent || '#D9BD82';
  const deep = detail.deep || '#7A5D34';
  const hasScene = design.scene_assets && design.scene_assets.length > 0;
  const preview = design.canvasPreview || design.image || '';
  return (
    <button
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onClick={() => onNavigate('deco-detail', { decoId: design.id })}
      style={{
        position: 'relative', minHeight: '278px', borderRadius: '8px', overflow: 'hidden', cursor: 'pointer',
        padding: 0, color: 'var(--text)', border: `1px solid ${hovered ? accent : 'rgba(58,42,32,0.12)'}`,
        background: '#FFFDFC', textAlign: 'left', fontFamily: "'DM Sans', sans-serif",
        transition: 'transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease',
        transform: hovered ? 'translateY(-3px)' : 'none',
        boxShadow: hovered ? '0 18px 44px rgba(58,42,32,0.16)' : '0 6px 22px rgba(58,42,32,0.08)',
      }}>
      <div style={{ position: 'relative', height: '118px', overflow: 'hidden', background: deep }}>
        <div style={{ position: 'absolute', inset: 0, transform: hovered ? 'scale(1.06)' : 'scale(1)', transition: 'transform 0.7s ease' }}>
          {hasScene && window.SceneCanvas
            ? React.createElement(window.SceneCanvas, {
                sceneAssets: design.scene_assets,
                assets,
                finalImage: preview || null,
                autoPlay: true,
              })
            : preview
              ? <img src={preview} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: detail.imagePos || '50% 50%', display: 'block', filter: 'saturate(0.95) contrast(1.05)' }} />
              : <img src={collectionImage} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: detail.imagePos || '50% 50%', display: 'block', filter: 'saturate(0.95) contrast(1.05)' }} />}
        </div>
        <div style={{ position: 'absolute', inset: 0, background: [
          'radial-gradient(62% 64% at 50% 48%, rgba(250,240,232,0.12) 0%, rgba(40,22,18,0.26) 46%, rgba(9,6,5,0.68) 100%)',
          `linear-gradient(135deg, ${accent}22, rgba(0,0,0,0.24) 42%, rgba(0,0,0,0.62))`,
        ].join(', ') }} />
        <div style={{ position: 'absolute', left: '16px', bottom: '14px', display: 'flex', gap: '7px', alignItems: 'center' }}>
          {[accent, '#FFF8F4', deep].map(color => (
            <span key={color} style={{ width: '18px', height: '18px', borderRadius: '50%', background: color, border: '1px solid rgba(255,248,244,0.38)' }} />
          ))}
        </div>
        {design.featured && (
          <span style={{ position: 'absolute', right: '14px', top: '12px', borderRadius: '999px', padding: '5px 10px', background: 'rgba(255,248,244,0.16)', color: '#FFF8F4', border: '1px solid rgba(255,248,244,0.22)', backdropFilter: 'blur(8px)', fontSize: '10px', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 800 }}>
            {t('badge_featured')}
          </span>
        )}
      </div>
      <div style={{ position: 'absolute', right: '-12px', top: '96px', fontFamily: "'Cormorant Garamond', serif", fontSize: '96px', color: 'rgba(58,42,32,0.055)', lineHeight: 1, pointerEvents: 'none' }}>
        {String(index + 1).padStart(2, '0')}
      </div>
      <div style={{ position: 'absolute', inset: '12px', border: `1px solid ${hovered ? 'rgba(58,42,32,0.12)' : 'rgba(58,42,32,0.06)'}`, borderRadius: '6px', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', zIndex: 1, display: 'flex', flexDirection: 'column', minHeight: '160px', padding: '18px 20px 20px' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', marginBottom: '18px' }}>
          <span style={{ fontSize: '10px', letterSpacing: '0.16em', textTransform: 'uppercase', color: deep, fontWeight: 800 }}>
            {design.category || t('card_fallback_category')}
          </span>
          <Icon name="arrowRight" size={16} color={deep} />
        </div>
        <div style={{ marginTop: 'auto' }}>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '25px', fontWeight: 600, marginBottom: '7px', color: 'var(--text)', lineHeight: 1.05 }}>{design.name}</div>
          <div style={{ fontSize: '12px', color: 'var(--muted)', lineHeight: 1.55, marginBottom: '13px' }}>
            {design.description || t('card_fallback_desc')}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '10px' }}>
            <span style={{ fontSize: '11px', color: 'var(--muted)' }}>
              {(design.tags || []).slice(0, 2).join(' · ') || t('card_fallback_tag')}
            </span>
            <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '20px', fontWeight: 700, color: deep }}>
              ${Number(design.price || 0).toLocaleString()}
            </span>
          </div>
        </div>
      </div>
    </button>
  );
}

function EmptyDataNotice({ title, text, actionLabel, onAction }) {
  const { t } = window.ReactI18next.useTranslation();
  const landing = (window.LelusaStore?.useSystemSettings?.() || {}).landing || {};
  const collectionImage = landing.collectionImage || COLLECTION_BG_SRC;
  return (
    <div style={{ position: 'relative', overflow: 'hidden', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: '0', background: '#FFFDFC', borderRadius: '8px', border: '1px solid rgba(58,42,32,0.12)', boxShadow: '0 18px 55px rgba(58,42,32,0.08)' }} className="booking-grid">
      <div style={{ position: 'relative', minHeight: '280px', overflow: 'hidden' }}>
        <img src={collectionImage} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '48% 50%', display: 'block' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(64% 58% at 50% 42%, rgba(250,240,232,0.12), rgba(51,27,22,0.32) 48%, rgba(10,7,6,0.72) 100%), linear-gradient(180deg, rgba(10,7,6,0.10), rgba(10,7,6,0.62))' }} />
      </div>
      <div style={{ padding: '46px 38px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        <div style={{ fontSize: '11px', letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--primary-dark)', fontWeight: 800, marginBottom: '14px' }}>{t('notice_coming_soon')}</div>
        <h3 style={{ margin: '0 0 10px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(28px, 4vw, 38px)', color: 'var(--text)', lineHeight: 1.08 }}>{title}</h3>
        <p style={{ margin: '0 0 24px', maxWidth: '460px', fontSize: '14px', color: 'var(--muted)', lineHeight: 1.75 }}>{text}</p>
        {actionLabel && onAction && <Btn variant="ghost" onClick={onAction} style={{ alignSelf: 'flex-start' }}>{actionLabel}</Btn>}
      </div>
    </div>
  );
}

// ─── Tile del mosaico de destacados (image-first) ────────────────
function FeaturedMosaicTile({ deco, big = false }) {
  const { navigate } = React.useContext(window.AppContext);
  const { assets } = window.LelusaStore.usePublicBusinessData();
  const [hovered, setHovered] = React.useState(false);
  const hasScene = deco.scene_assets && deco.scene_assets.length > 0;
  return (
    <div
      onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
      onClick={() => navigate('deco-detail', { decoId: deco.id })}
      style={{
        position: 'relative', borderRadius: '20px', overflow: 'hidden', cursor: 'pointer',
        gridRow: big ? 'span 2' : 'auto', minHeight: big ? '0' : '180px',
        border: '1px solid var(--border)', background: 'var(--card)',
        boxShadow: hovered ? '0 22px 50px rgba(58,42,32,0.16)' : '0 4px 22px rgba(58,42,32,0.07)',
        transition: 'box-shadow 0.3s ease',
      }}>
      <div style={{ position: 'absolute', inset: 0, transition: 'transform 1.2s cubic-bezier(0.22,0.61,0.36,1)', transform: hovered ? 'scale(1.06)' : 'scale(1)' }}>
        {hasScene
          ? React.createElement(window.SceneCanvas, { sceneAssets: deco.scene_assets, assets, finalImage: deco.image || null, autoPlay: true })
          : deco.image
            ? <img src={deco.image} alt={deco.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            : <DecoPlaceholder category={deco.category} />}
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(58,42,32,0.55), transparent 50%)', zIndex: 1, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: '12px', left: '12px', zIndex: 2 }}>
        <Badge accent={window.LelusaAccent.accentForCategory(deco.category)}>{deco.category}</Badge>
      </div>
      <div style={{ position: 'absolute', bottom: '14px', left: '16px', right: '16px', zIndex: 2, color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: '10px' }}>
        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: big ? '24px' : '17px', fontWeight: 600, lineHeight: 1.2 }}>{deco.name}</div>
        <div style={{ flexShrink: 0, fontFamily: "'Cormorant Garamond', serif", fontSize: big ? '22px' : '17px', fontWeight: 700 }}>${deco.price.toLocaleString()}</div>
      </div>
    </div>
  );
}

function FeaturedSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { designs } = window.LelusaStore.usePublicBusinessData();
  const publishedDesigns = (designs || []).filter(d => (d.status || 'published') === 'published');
  const featured = publishedDesigns.filter(d => d.featured).slice(0, 4);
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--bg) 0%, #FFFDFC 100%)', padding: '92px 24px' }}>
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: '48px', flexWrap: 'wrap', gap: '16px' }}>
          <div>
            <Badge>{t('feat_badge')}</Badge>
            <h2 style={{ margin: '14px 0 10px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 600, color: 'var(--text)' }}>
              {t('feat_title')}
            </h2>
            <p style={{ margin: 0, fontSize: '15px', color: 'var(--muted)' }}>{t('feat_subtitle')}</p>
          </div>
          <Btn variant="ghost" onClick={() => navigate('catalog')}>
            {t('feat_view_all')} <Icon name="arrowRight" size={15} color="var(--primary)" />
          </Btn>
        </div>
        {featured.length >= 3 ? (
          <Reveal as="div" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoRows: '180px', gap: '16px' }} className="mosaic-grid">
            {featured.map((d, i) => (
              <FeaturedMosaicTile key={d.id} deco={d} big={i === 0} />
            ))}
          </Reveal>
        ) : featured.length > 0 ? (
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '24px' }}>
            {featured.map(d => <DecoCard key={d.id} deco={d} />)}
          </div>
        ) : (
          <EmptyDataNotice title={t('feat_empty_title')} text={t('feat_empty_text')} actionLabel={t('feat_empty_action')} onAction={() => document.querySelector('[data-booking-section]')?.scrollIntoView({ behavior: 'smooth', block: 'start' })} />
        )}
      </div>
    </section>
  );
}

function DessertCard({ dessert, onQuote }) {
  const { t } = window.ReactI18next.useTranslation();
  return (
    <article style={{ minWidth: 'min(300px, 82vw)', maxWidth: 320, background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', boxShadow: '0 14px 34px rgba(58,42,32,0.10)' }}>
      <div style={{ aspectRatio: '4/3', background: 'linear-gradient(135deg, #F8DDE6, #FFF8F4)', overflow: 'hidden', position: 'relative' }}>
        {dessert.image ? (
          <img src={dessert.image} alt={dessert.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        ) : (
          <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', color: 'var(--primary)', fontFamily: "'Cormorant Garamond', serif", fontSize: 42 }}>Lelusa</div>
        )}
        <div style={{ position: 'absolute', left: 12, top: 12, borderRadius: 999, padding: '5px 10px', background: 'rgba(255,248,244,0.86)', border: '1px solid rgba(58,42,32,0.10)', color: 'var(--primary-dark)', fontSize: 10, fontWeight: 900, letterSpacing: '0.12em', textTransform: 'uppercase' }}>
          {dessert.category || t('desserts_landing_badge')}
        </div>
      </div>
      <div style={{ padding: 18 }}>
        <h3 style={{ margin: '0 0 7px', fontFamily: "'Cormorant Garamond', serif", fontSize: 25, color: 'var(--text)', lineHeight: 1.08 }}>{dessert.name}</h3>
        <p style={{ margin: '0 0 14px', color: 'var(--muted)', fontSize: 13, lineHeight: 1.6, minHeight: 42 }}>{dessert.description || t('desserts_landing_card_desc')}</p>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12 }}>
          <span style={{ color: 'var(--primary-dark)', fontWeight: 900, fontSize: 14 }}>${Number(dessert.pricePerDozen || 0).toLocaleString()} / {t('quote_desserts_dozen_short')}</span>
          <button onClick={onQuote} style={{ border: '1px solid var(--border)', borderRadius: 999, background: 'var(--accent-light)', color: 'var(--primary)', padding: '8px 12px', cursor: 'pointer', fontSize: 12, fontWeight: 900 }}>
            {t('desserts_landing_quote_short')}
          </button>
        </div>
      </div>
    </article>
  );
}

function DessertsShowcaseSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { desserts } = window.LelusaStore.usePublicBusinessData();
  const activeDesserts = (desserts || []).filter(item => item.status !== 'paused').slice(0, 10);
  const quoteDessertsOnly = () => navigate('quote-form', { dessertsOnly: 'true', wantsDesserts: 'true' });
  const quoteCombo = () => navigate('quote-form', { wantsDesserts: 'true' });

  if (!activeDesserts.length) return null;

  return (
    <section data-section="postres" style={{ background: 'linear-gradient(180deg, #FFFDFC 0%, var(--bg-soft) 100%)', padding: '88px 24px', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal as="div" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 18, flexWrap: 'wrap', marginBottom: 28 }}>
          <div style={{ maxWidth: 640 }}>
            <Badge>{t('desserts_landing_badge')}</Badge>
            <h2 style={{ margin: '14px 0 10px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(32px, 5vw, 50px)', color: 'var(--text)', fontWeight: 600, lineHeight: 1.05 }}>
              {t('desserts_landing_title')}
            </h2>
            <p style={{ margin: 0, color: 'var(--muted)', fontSize: 15, lineHeight: 1.75 }}>
              {t('desserts_landing_desc')}
            </p>
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <Btn onClick={quoteDessertsOnly}>{t('desserts_landing_quote_only')}</Btn>
            <Btn variant="ghost" onClick={quoteCombo}>{t('desserts_landing_quote_combo')}</Btn>
          </div>
        </Reveal>

        <Reveal as="div" style={{ display: 'flex', gap: 16, overflowX: 'auto', padding: '4px 4px 18px', scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch' }}>
          {activeDesserts.map(dessert => (
            <div key={dessert.id} style={{ scrollSnapAlign: 'start' }}>
              <DessertCard dessert={dessert} onQuote={quoteDessertsOnly} />
            </div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

// ─── Sobre Lelusa (bloque editorial imagen + texto) ──────────────
function AboutSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const landing = (window.LelusaStore?.useSystemSettings?.() || {}).landing || {};
  const aboutImage = landing.aboutImage || ABOUT_BG_SRC;
  const aboutTitle = landing.aboutTitle || `${t('about_title_1')} ${t('about_title_2')}`;
  const aboutTitleParts = aboutTitle.split(',');
  return (
    <section data-section="nosotras" style={{ background: 'linear-gradient(180deg, #FFFDFC 0%, var(--bg-soft) 100%)', padding: '92px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'repeating-linear-gradient(90deg, rgba(58,42,32,0.035) 0 1px, transparent 1px 120px)' }} />
      <div style={{ maxWidth: '1120px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px', alignItems: 'center' }} className="booking-grid">
        <Reveal as="div" style={{ position: 'relative', minHeight: '430px', borderRadius: '8px', overflow: 'hidden', border: '1px solid rgba(58,42,32,0.12)', boxShadow: '0 22px 60px rgba(58,42,32,0.12)' }}>
          <img src={aboutImage} alt={t('about_img_alt')} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '35% 50%', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(62% 54% at 45% 42%, rgba(250,240,232,0.08) 0%, rgba(58,42,32,0.22) 48%, rgba(11,8,7,0.68) 100%), linear-gradient(180deg, rgba(10,7,6,0.08), rgba(10,7,6,0.62))' }} />
          <div style={{ position: 'absolute', inset: '18px', border: '1px solid rgba(255,248,244,0.28)', borderRadius: '6px', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', left: '28px', right: '28px', bottom: '28px', color: '#FFF8F4' }}>
            <div style={{ fontSize: '11px', letterSpacing: '0.22em', textTransform: 'uppercase', fontWeight: 800, color: '#FFD7E3', marginBottom: '10px' }}>{t('about_atelier')}</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '32px', lineHeight: 1.05, fontWeight: 600 }}>{t('about_atelier_caption')}</div>
          </div>
        </Reveal>
        <Reveal>
          <img src={BRAND_LOGO_VERTICAL_SRC} alt="Lelusa Delights & Decor logo" loading="lazy" style={{ width: '96px', height: 'auto', maxHeight: '92px', objectFit: 'contain', display: 'block', margin: '0 0 14px -6px', opacity: 0.92 }} />
          <div style={{ fontSize: '11px', letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--primary-dark)', fontWeight: 700, marginBottom: '14px', display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
            <span style={{ width: '30px', height: '1px', background: 'var(--primary)' }} /> {t('about_tag')}
          </div>
          <h2 style={{ margin: '0 0 16px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(32px, 4vw, 46px)', fontWeight: 600, color: 'var(--text)', lineHeight: 1.08 }}>
            {aboutTitleParts[0]}{aboutTitleParts.length > 1 ? ',' : ''} <em style={{ fontStyle: 'italic', color: 'var(--primary)' }}>{aboutTitleParts.slice(1).join(',').trim() || t('about_title_2')}</em>
          </h2>
          <p style={{ margin: '0 0 26px', fontSize: '15px', color: 'var(--muted)', lineHeight: 1.85, maxWidth: '470px' }}>
            {landing.aboutDescription || t('about_desc')}
          </p>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '10px', marginBottom: '28px' }}>
            {[
              ['01', t('about_item_1')],
              ['02', t('about_item_2')],
              ['03', t('about_item_3')],
            ].map(([num, label]) => (
              <div key={num} style={{ border: '1px solid rgba(58,42,32,0.10)', borderRadius: '8px', padding: '14px 12px', background: 'rgba(255,255,255,0.52)' }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", color: 'var(--primary)', fontSize: '22px', fontWeight: 700, lineHeight: 1 }}>{num}</div>
                <div style={{ marginTop: '6px', fontSize: '11px', color: 'var(--muted)', lineHeight: 1.35 }}>{label}</div>
              </div>
            ))}
          </div>
          <Btn variant="ghost" onClick={() => navigate('catalog')}>
            {t('about_btn')} <Icon name="arrowRight" size={15} color="var(--primary)" />
          </Btn>
        </Reveal>
      </div>
    </section>
  );
}

function HowItWorksSection() {
  const { t } = window.ReactI18next.useTranslation();
  const STEPS = [
    { num: '01', title: t('how_step1_title'), desc: t('how_step1_desc') },
    { num: '02', title: t('how_step2_title'), desc: t('how_step2_desc') },
    { num: '03', title: t('how_step3_title'), desc: t('how_step3_desc') },
    { num: '04', title: t('how_step4_title'), desc: t('how_step4_desc') },
  ];
  return (
    <section style={{ background: '#FFFDFC', padding: '92px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'radial-gradient(520px 280px at 8% 0%, rgba(196,137,154,0.12), transparent 64%), radial-gradient(520px 280px at 92% 12%, rgba(217,189,130,0.14), transparent 66%)' }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: '20px', marginBottom: '42px', flexWrap: 'wrap' }}>
          <div>
            <Badge color="primary">{t('how_tag')}</Badge>
            <h2 style={{ margin: '14px 0 0', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(32px, 4vw, 46px)', fontWeight: 600, color: 'var(--text)', lineHeight: 1.08 }}>
              {t('how_title')}
            </h2>
          </div>
          <p style={{ margin: 0, maxWidth: '360px', fontSize: '14px', color: 'var(--muted)', lineHeight: 1.7 }}>
            {t('how_desc')}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(230px, 1fr))', gap: '14px' }}>
          {STEPS.map((step, i) => (
            <Reveal key={step.num} delay={i * 90} style={{ position: 'relative' }}>
              <div style={{ background: 'linear-gradient(180deg, #FFFFFF, rgba(250,240,232,0.50))', border: '1px solid rgba(58,42,32,0.10)', borderRadius: '8px', padding: '26px 22px', minHeight: '210px', boxShadow: '0 12px 36px rgba(58,42,32,0.07)', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', right: '-8px', top: '-22px', fontFamily: "'Cormorant Garamond', serif", fontSize: '96px', color: 'rgba(196,137,154,0.09)', lineHeight: 1 }}>{step.num}</div>
                <div style={{ position: 'relative', zIndex: 1 }}>
                  <div style={{ width: '42px', height: '42px', borderRadius: '50%', background: window.LelusaAccent.ACCENTS[i % 4].light, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '24px', border: `1px solid ${window.LelusaAccent.ACCENTS[i % 4].base}` }}>
                    <Icon name={i === 0 ? 'grid' : i === 1 ? 'edit' : i === 2 ? 'fileText' : 'calendar'} size={19} color={window.LelusaAccent.ACCENTS[i % 4].dark} />
                  </div>
                  <h3 style={{ margin: '0 0 10px', fontSize: '22px', fontWeight: 600, color: 'var(--text)', fontFamily: "'Cormorant Garamond', serif" }}>{step.title}</h3>
                  <p style={{ margin: 0, fontSize: '13px', color: 'var(--muted)', lineHeight: 1.75 }}>{step.desc}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const { t } = window.ReactI18next.useTranslation();
  const TESTIMONIALS = [
    { initials: 'MA', name: 'Mariana Arriaga', event: t('test1_event'), date: t('test1_date'), text: t('test1_text') },
    { initials: 'RP', name: 'Ricardo Peralta', event: t('test2_event'), date: t('test2_date'), text: t('test2_text') },
    { initials: 'LC', name: 'Lucía Castillo', event: t('test3_event'), date: t('test3_date'), text: t('test3_text') },
  ];
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--bg-soft) 0%, #FFFDFC 100%)', padding: '92px 24px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', background: 'repeating-linear-gradient(90deg, rgba(58,42,32,0.035) 0 1px, transparent 1px 120px)' }} />
      <img src={BRAND_MONOGRAM_SRC} alt="" aria-hidden="true" loading="lazy" style={{ position: 'absolute', right: 'max(24px, calc((100vw - 1200px) / 2))', top: '54px', width: '150px', height: 'auto', opacity: 0.075, pointerEvents: 'none' }} />
      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '20px', marginBottom: '42px', flexWrap: 'wrap', position: 'relative', zIndex: 1 }}>
          <div>
            <Badge color="warm">{t('test_tag')}</Badge>
            <h2 style={{ margin: '14px 0 0', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(32px, 4vw, 46px)', fontWeight: 600, color: 'var(--text)', lineHeight: 1.08 }}>
              {t('test_title')}
            </h2>
          </div>
          <p style={{ margin: 0, maxWidth: '330px', fontSize: '14px', color: 'var(--muted)', lineHeight: 1.7 }}>
            {t('test_desc')}
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '14px', position: 'relative', zIndex: 1 }}>
          {TESTIMONIALS.map((item, i) => (
            <Reveal key={item.name} delay={i * 90} style={{ background: '#FFFDFC', border: '1px solid rgba(58,42,32,0.10)', borderRadius: '8px', padding: '30px 28px', boxShadow: '0 12px 36px rgba(58,42,32,0.07)', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', right: '18px', top: '10px', fontFamily: "'Cormorant Garamond', serif", fontSize: '86px', color: 'rgba(196,137,154,0.08)', lineHeight: 1 }}>&ldquo;</div>
              <div style={{ display: 'flex', gap: '4px', marginBottom: '14px' }}>
                {Array(5).fill(0).map((_, k) => (
                  <Icon key={k} name="star" size={14} color="#C8A87A" style={{ fill: '#C8A87A' }} />
                ))}
              </div>
              <p style={{ margin: '0 0 24px', fontSize: '14px', color: 'var(--muted)', lineHeight: 1.8, fontStyle: 'italic', position: 'relative', zIndex: 1 }}>{item.text}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div style={{ width: '42px', height: '42px', borderRadius: '50%', background: 'linear-gradient(135deg, var(--accent-light), #FFF8F4)', border: '1px solid rgba(196,137,154,0.18)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Cormorant Garamond', serif", fontSize: '16px', fontWeight: 700, color: 'var(--primary)', flexShrink: 0 }}>
                  {item.initials}
                </div>
                <div>
                  <div style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text)' }}>{item.name}</div>
                  <div style={{ fontSize: '12px', color: 'var(--muted)' }}>{item.event} · {item.date}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BookingSection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const landing = (window.LelusaStore?.useSystemSettings?.() || {}).landing || {};
  const aboutImage = landing.aboutImage || ABOUT_BG_SRC;
  return (
    <section data-section="eventos" data-booking-section style={{ background: '#FFFDFC', padding: '92px 24px' }}>
      <div style={{ maxWidth: '1120px', margin: '0 auto', border: '1px solid rgba(58,42,32,0.12)', borderRadius: '8px', overflow: 'hidden', display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', boxShadow: '0 18px 55px rgba(58,42,32,0.08)' }} className="booking-grid">
        <Reveal as="div" style={{ padding: '48px', background: 'linear-gradient(160deg, #FFFFFF, rgba(250,240,232,0.66))' }}>
          <Badge>{t('book_tag')}</Badge>
          <h2 style={{ margin: '14px 0 14px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(32px, 4vw, 46px)', fontWeight: 600, color: 'var(--text)', lineHeight: 1.08 }}>
            {landing.bookingTitle || t('book_title')}
          </h2>
          <p style={{ margin: '0 0 32px', fontSize: '15px', color: 'var(--muted)', lineHeight: 1.8, maxWidth: '520px' }}>
            {landing.bookingDescription || t('book_desc')}
          </p>
          <div style={{ display: 'flex', gap: '12px', flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={() => navigate('catalog')}>
              {t('book_btn_catalog')}
              <Icon name="arrowRight" size={16} color="#fff" />
            </Btn>
            <Btn size="lg" variant="ghost" onClick={() => navigate('quote-form', {})}>
              {t('book_btn_custom')}
            </Btn>
          </div>
        </Reveal>
        <Reveal as="div" delay={120} style={{ position: 'relative', minHeight: '390px', overflow: 'hidden' }}>
          <img src={aboutImage} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '58% 50%', display: 'block' }} />
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(62% 54% at 50% 44%, rgba(250,240,232,0.12), rgba(58,42,32,0.28) 46%, rgba(10,7,6,0.76) 100%), linear-gradient(180deg, rgba(10,7,6,0.14), rgba(10,7,6,0.70))' }} />
          <div style={{ position: 'absolute', inset: '18px', border: '1px solid rgba(255,248,244,0.26)', borderRadius: '6px', pointerEvents: 'none' }} />
          <div style={{ position: 'absolute', left: '28px', right: '28px', bottom: '28px', display: 'grid', gap: '12px' }}>
            {[
              { id: 'grid', icon: 'grid', title: t('book_step1') },
              { id: 'edit', icon: 'edit', title: t('book_step2') },
              { id: 'check', icon: 'check', title: t('book_step3') },
            ].map(({ id, icon, title }) => (
              <div key={id} style={{ display: 'flex', gap: '12px', alignItems: 'center', padding: '11px 12px', borderRadius: '999px', background: 'rgba(255,248,244,0.13)', border: '1px solid rgba(255,248,244,0.18)', backdropFilter: 'blur(8px)', color: '#FFF8F4' }}>
                <Icon name={icon} size={17} color="#FFD7E3" />
                <div style={{ fontSize: '13px', fontWeight: 700 }}>{title}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function CTASection() {
  const { navigate } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const systemSettings = window.LelusaStore?.useSystemSettings?.() || {};
  const brand = systemSettings.brand || {};
  const landing = systemSettings.landing || {};
  const phoneHref = brand.phoneHref || 'tel:+525512345678';
  const ctaImage = landing.ctaImage || CTA_BG_SRC;
  return (
    <section style={{ background: 'var(--text)', minHeight: '520px', padding: '92px 24px', textAlign: 'center', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <img src={ctaImage} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 50%', display: 'block' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(58% 52% at 50% 44%, rgba(250,240,232,0.10), rgba(42,22,18,0.35) 46%, rgba(8,6,5,0.78) 100%), linear-gradient(180deg, rgba(8,6,5,0.52), rgba(8,6,5,0.76))' }} />
      <div style={{ position: 'absolute', inset: '24px', border: '1px solid rgba(255,248,244,0.24)', borderRadius: '8px', pointerEvents: 'none' }} />
      <Reveal as="div" style={{ position: 'relative', zIndex: 1, maxWidth: '650px', margin: '0 auto' }}>
        <img src={BRAND_LOGO_WHITE_SRC} alt="Lelusa Delights & Decor logo" loading="lazy" style={{ width: '130px', height: 'auto', maxHeight: '76px', objectFit: 'contain', display: 'block', margin: '0 auto 14px', opacity: 0.96, filter: 'drop-shadow(0 12px 28px rgba(0,0,0,0.32))' }} />
        <h2 style={{ margin: '0 0 16px', fontFamily: "'Cormorant Garamond', serif", fontSize: 'clamp(30px, 5vw, 48px)', fontWeight: 600, color: 'var(--bg)', lineHeight: 1.2 }}>
          {landing.ctaTitle || t('cta_title')}
        </h2>
        <p style={{ margin: '0 auto 36px', fontSize: '16px', color: 'rgba(250,240,232,0.78)', lineHeight: 1.75, maxWidth: '520px' }}>
          {landing.ctaDescription || t('cta_desc')}
        </p>
        <div style={{ display: 'flex', gap: '12px', justifyContent: 'center', flexWrap: 'wrap' }}>
          <Btn size="lg" onClick={() => navigate('catalog')}>
            {t('hero_btn_catalog')}
            <Icon name="arrowRight" size={16} color="#fff" />
          </Btn>
          <Btn size="lg" variant="ghost" style={{ borderColor: 'rgba(250,240,232,0.3)', color: 'var(--bg)' }} onClick={() => { window.location.href = phoneHref; }}>
            <Icon name="phone" size={16} color="var(--bg)" />
            {t('cta_btn_call')}
          </Btn>
        </div>
      </Reveal>
    </section>
  );
}

// ─── Catalog Page ────────────────────────────────────────────────
function CatalogPage() {
  const { navigate, pageData } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { designs, loading, catalogCategories } = window.LelusaStore.usePublicBusinessData();
  const designCategories = window.LelusaStore.getCatalogCategories(catalogCategories, 'design');
  const [activeCategory, setActiveCategory] = React.useState(pageData.category || 'all');
  const [priceRange, setPriceRange] = React.useState([0, 1500]);
  const [searchQuery, setSearchQuery] = React.useState('');
  const [sortBy, setSortBy] = React.useState('featured');
  const [filtersOpen, setFiltersOpen] = React.useState(false);

  const publishedDesigns = React.useMemo(() => {
    return (designs || []).filter(d => (d.status || 'published') === 'published');
  }, [designs]);

  const filtered = React.useMemo(() => {
    let list = publishedDesigns;
    if (activeCategory !== 'all') list = list.filter(d => d.category === activeCategory);
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      list = list.filter(d => d.name.toLowerCase().includes(q) || d.description.toLowerCase().includes(q) || (d.tags || []).some(t => t.includes(q)));
    }
    list = list.filter(d => d.price >= priceRange[0] && d.price <= priceRange[1]);
    if (sortBy === 'price-asc') list = [...list].sort((a, b) => a.price - b.price);
    else if (sortBy === 'price-desc') list = [...list].sort((a, b) => b.price - a.price);
    else if (sortBy === 'rating') list = [...list].sort((a, b) => b.rating - a.rating);
    else list = [...list].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));
    return list;
  }, [activeCategory, priceRange, publishedDesigns, searchQuery, sortBy]);

  const categoryCounts = React.useMemo(() => {
    return designCategories.map(cat => ({
      id: cat.slug,
      name: cat.name,
      count: publishedDesigns.filter(design => design.category === cat.slug).length,
    }));
  }, [designCategories, publishedDesigns]);

  const { useSwipe, useIsMobile } = window.LelusaGestures;
  const isMobileCat = useIsMobile();
  const catOrder = React.useMemo(() => ['all', ...designCategories.map(c => c.slug)], [designCategories]);
  const swipeRef = useSwipe({
    enabled: isMobileCat,
    onSwipeLeft: () => {
      const i = catOrder.indexOf(activeCategory);
      setActiveCategory(catOrder[Math.min(catOrder.length - 1, i + 1)]);
    },
    onSwipeRight: () => {
      const i = catOrder.indexOf(activeCategory);
      setActiveCategory(catOrder[Math.max(0, i - 1)]);
    },
  });

  const sidebar = (
    <div style={{ width: '240px', flexShrink: 0 }} className="catalog-sidebar">
      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '20px', padding: '24px', marginBottom: '16px' }}>
        <h3 style={{ margin: '0 0 16px', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)', fontFamily: "'DM Sans', sans-serif" }}>{t('cat_filter_category')}</h3>
        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
          {[{ id: 'all', name: t('catalog_all'), count: publishedDesigns.length }, ...categoryCounts].map(cat => (
            <button key={cat.id} onClick={() => setActiveCategory(cat.id)}
              style={{
                background: activeCategory === cat.id ? 'var(--accent-light)' : 'transparent',
                border: 'none', borderRadius: '10px', padding: '9px 12px', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                color: activeCategory === cat.id ? 'var(--primary)' : 'var(--muted)',
                fontFamily: "'DM Sans', sans-serif", fontSize: '13.5px', fontWeight: activeCategory === cat.id ? 600 : 400,
                transition: 'all 0.15s', textAlign: 'left',
              }}>
              {cat.id === 'all' ? cat.name : (cat.name || CATEGORY_LABELS[cat.id] || cat.id)}
              <span style={{ fontSize: '11px', background: activeCategory === cat.id ? 'var(--primary)' : 'var(--bg-soft)', color: activeCategory === cat.id ? '#fff' : 'var(--muted)', borderRadius: '999px', padding: '1px 8px', fontWeight: 600 }}>{cat.count}</span>
            </button>
          ))}
        </div>
      </div>
      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '20px', padding: '24px' }}>
        <h3 style={{ margin: '0 0 16px', fontSize: '13px', letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--muted)', fontFamily: "'DM Sans', sans-serif" }}>{t('cat_filter_maxprice')}</h3>
        <input type="range" min="0" max="1500" step="50" value={priceRange[1]}
          onChange={e => setPriceRange([0, +e.target.value])}
          style={{ width: '100%', accentColor: 'var(--primary)', marginBottom: '8px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '12px', color: 'var(--muted)' }}>
          <span>$0</span><span style={{ fontWeight: 600, color: 'var(--primary)' }}>{t('cat_filter_upto')} ${priceRange[1].toLocaleString()}</span>
        </div>
      </div>
    </div>
  );

  return (
    <div className="lel-has-bottomnav" style={{ minHeight: '100vh', background: 'var(--bg)' }}>
      <NavBar />
      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '40px 24px 80px' }}>
        {/* Header */}
        <div style={{ marginBottom: '36px' }}>
          <button onClick={() => navigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '6px', color: 'var(--muted)', fontSize: '13px', fontFamily: "'DM Sans', sans-serif", marginBottom: '16px', padding: 0 }}>
            <Icon name="arrowLeft" size={14} color="var(--muted)" /> {t('nav_home')}
          </button>
          <h1 style={{ margin: '0 0 6px', fontFamily: "'Cormorant Garamond', serif", fontSize: '36px', fontWeight: 600, color: 'var(--text)' }}>{t('catalog_title')}</h1>
          <p style={{ margin: 0, color: 'var(--muted)', fontSize: '15px' }}>{t('catalog_subtitle')}</p>
        </div>
        {/* Search + sort bar */}
        <div style={{ display: 'flex', gap: '12px', marginBottom: '28px', flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: '220px', position: 'relative' }}>
            <Icon name="search" size={16} color="var(--muted)" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
            <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder={t('cat_search_ph')}
              style={{ width: '100%', padding: '12px 14px 12px 40px', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '12px', fontFamily: "'DM Sans', sans-serif", fontSize: '14px', color: 'var(--text)', outline: 'none', boxSizing: 'border-box' }} />
          </div>
          <select value={sortBy} onChange={e => setSortBy(e.target.value)}
            style={{ padding: '12px 16px', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '12px', fontFamily: "'DM Sans', sans-serif", fontSize: '14px', color: 'var(--text)', cursor: 'pointer', outline: 'none' }}>
            <option value="featured">{t('cat_sort_featured')}</option>
            <option value="price-asc">{t('cat_sort_price_asc')}</option>
            <option value="price-desc">{t('cat_sort_price_desc')}</option>
            <option value="rating">{t('cat_sort_rating')}</option>
          </select>
        </div>

        <div style={{ display: 'flex', gap: '28px' }}>
          {!isMobileCat && sidebar}
          <div style={{ flex: 1 }}>
            {loading ? (
              <div style={{ padding: '80px 0', textAlign: 'center' }}>{t('cat_loading')}</div>
            ) : filtered.length > 0 ? (
              <div ref={swipeRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
                {filtered.map(deco => <DecoCard key={deco.id} deco={deco} />)}
              </div>
            ) : (
              <div style={{ padding: '80px 0', textAlign: 'center', border: '1px dashed var(--border)', borderRadius: '16px' }}>
                <div style={{ fontSize: '18px', color: 'var(--muted)', marginBottom: '12px' }}>{t('cat_no_results')}</div>
                <Btn variant="ghost" onClick={() => { setActiveCategory('all'); setSearchQuery(''); setPriceRange([0, 1500]); }}>{t('cat_view_all')}</Btn>
              </div>
            )}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}

// ─── Decoration Detail Page ──────────────────────────────────────
function DecoDetailPage() {
  const { navigate, pageData } = React.useContext(window.AppContext);
  const { t } = window.ReactI18next.useTranslation();
  const { designs, assets, loading, catalogCategories } = window.LelusaStore.usePublicBusinessData();
  const categoryLabelBySlug = Object.fromEntries(window.LelusaStore.getCatalogCategories(catalogCategories, 'design').map(item => [item.slug, item.name]));
  const isMobile = window.LelusaGestures.useIsMobile();
  const publishedDesigns = (designs || []).filter(d => (d.status || 'published') === 'published');
  const deco = publishedDesigns.find(d => String(d.id) === String(pageData.decoId)) || publishedDesigns[0];
  const galleryImages = React.useMemo(() => Array.from(new Set([deco?.image, ...(deco?.images || [])].filter(Boolean))), [deco?.id, deco?.image, deco?.images]);
  const [selectedImage, setSelectedImage] = React.useState('');

  React.useEffect(() => {
    setSelectedImage(galleryImages[0] || '');
  }, [deco?.id, galleryImages[0]]);

  if (loading) {
    return (
      <div className="lel-has-bottomnav" style={{ minHeight: '100vh', background: 'var(--bg)' }}>
        <NavBar />
        <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '40px 24px 80px' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px' }} className="detail-grid">
            <div style={{ height: 360, borderRadius: 28, background: 'var(--bg-soft)' }} />
            <div>
              <div style={{ height: 28, width: "60%", marginBottom: '16px', background: 'var(--bg-soft)' }} />
              <div style={{ height: 16, width: "90%", marginBottom: '10px', background: 'var(--bg-soft)' }} />
              <div style={{ height: 16, width: "80%", marginBottom: '10px', background: 'var(--bg-soft)' }} />
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (!deco) {
    return (
      <div className="lel-has-bottomnav" style={{ minHeight: '100vh', background: 'var(--bg)' }}>
        <NavBar />
        <div style={{ maxWidth: '720px', margin: '0 auto', padding: '80px 24px' }}>
          <EmptyDataNotice title={t('detail_unavailable_title')} text={t('detail_unavailable_text')} actionLabel={t('detail_back_catalog')} onAction={() => navigate('catalog')} />
        </div>
        <Footer />
      </div>
    );
  }

  const related = publishedDesigns.filter(d => d.category === deco.category && String(d.id) !== String(deco.id)).slice(0, 3);
  const activeImage = selectedImage || galleryImages[0] || deco.image || '';

  return (
    <div className="lel-has-bottomnav" style={{ minHeight: '100vh', background: 'var(--bg)' }}>
      <NavBar />
      <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '40px 24px 80px' }}>
        {/* Breadcrumb */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '32px', fontSize: '13px', color: 'var(--muted)' }}>
          <button onClick={() => navigate('home')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontFamily: "'DM Sans', sans-serif", fontSize: '13px', padding: 0 }}>{t('nav_home')}</button>
          <Icon name="chevRight" size={13} color="var(--muted)" />
          <button onClick={() => navigate('catalog')} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted)', fontFamily: "'DM Sans', sans-serif", fontSize: '13px', padding: 0 }}>{t('nav_catalog')}</button>
          <Icon name="chevRight" size={13} color="var(--muted)" />
          <span style={{ color: 'var(--text)', fontWeight: 500 }}>{deco.name}</span>
        </div>
        {/* Main grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '48px', alignItems: 'flex-start', marginBottom: '60px' }} className="detail-grid">
          {/* Left: image */}
          <div>
          <div style={{ borderRadius: '28px', overflow: 'hidden', border: '1px solid var(--border)', aspectRatio: '4/3', background: 'var(--card)' }}>
            {(deco.scene_assets && deco.scene_assets.length > 0) ? (
              React.createElement(window.SceneCanvas, {
                sceneAssets: deco.scene_assets,
                assets,
                finalImage: activeImage || null,
                autoPlay: true,
              })
            ) : activeImage ? (
              <img src={activeImage} alt={deco.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            ) : (
              <DecoPlaceholder category={deco.category} />
            )}
          </div>
          {galleryImages.length > 1 && (
            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${Math.min(galleryImages.length, 5)}, minmax(0, 1fr))`, gap: 10, marginTop: 12 }}>
              {galleryImages.slice(0, 5).map((image, index) => (
                <button key={`${image}-${index}`} type="button" onClick={() => setSelectedImage(image)}
                  style={{ aspectRatio: '1', border: `2px solid ${image === activeImage ? 'var(--primary)' : 'var(--border)'}`, borderRadius: 12, overflow: 'hidden', padding: 0, background: 'var(--card)', cursor: 'pointer' }}>
                  <img src={image} alt={`${deco.name} ${index + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                </button>
              ))}
            </div>
          )}
          </div>
          {/* Right: info */}
          <div>
            <div style={{ display: 'flex', gap: '8px', marginBottom: '16px', flexWrap: 'wrap' }}>
              <Badge accent={window.LelusaAccent.accentForCategory(deco.category)}>{categoryLabelBySlug[deco.category] || CATEGORY_LABELS[deco.category] || deco.category}</Badge>
              {deco.featured && <Badge color="warm">{t('badge_featured')}</Badge>}
            </div>
            <h1 style={{ margin: '0 0 10px', fontFamily: "'Cormorant Garamond', serif", fontSize: '36px', fontWeight: 600, color: 'var(--text)', lineHeight: 1.2 }}>{deco.name}</h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
              <div style={{ display: 'flex', gap: '2px' }}>
                {Array(5).fill(0).map((_, i) => (
                  <Icon key={i} name="star" size={15} color="#C8A87A" style={{ fill: '#C8A87A' }} />
                ))}
              </div>
              <span style={{ fontSize: '14px', color: 'var(--muted)', fontWeight: 500 }}>{deco.rating} · {deco.reviews} {t('detail_reviews')}</span>
            </div>
            <p style={{ margin: '0 0 24px', fontSize: '15px', color: 'var(--muted)', lineHeight: 1.75 }}>{deco.description}</p>
            {/* Price */}
            <div style={{ background: window.LelusaAccent.accentForCategory(deco.category).light, borderRadius: '16px', padding: '18px 22px', marginBottom: '24px' }}>
              <div style={{ fontSize: '13px', color: 'var(--muted)', marginBottom: '4px' }}>{t('detail_price_from')}</div>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: '42px', fontWeight: 700, color: window.LelusaAccent.accentForCategory(deco.category).dark, lineHeight: 1 }}>${deco.price.toLocaleString()}</div>
              <div style={{ fontSize: '12px', color: 'var(--muted)', marginTop: '6px' }}>{t('detail_price_note')}</div>
            </div>
            {/* Action */}
            <Btn size="lg" full onClick={() => navigate('customizer', { decoId: deco.id })}>
              {t('detail_quote_btn')} <Icon name="arrowRight" size={16} color="#fff" />
            </Btn>
          </div>
        </div>

        {/* Related */}
        {related.length > 0 && (
          <div>
            <h2 style={{ margin: '0 0 28px', fontFamily: "'Cormorant Garamond', serif", fontSize: '28px', fontWeight: 600, color: 'var(--text)' }}>{t('detail_related')}</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: '20px' }}>
              {related.map(d => <DecoCard key={d.id} deco={d} />)}
            </div>
          </div>
        )}
      </div>
      <Footer />
    </div>
  );
}

// ─── Export ──────────────────────────────────────────────────────
Object.assign(window, { HomePage, CatalogPage, DecoDetailPage });