(function(){
// v2-app.jsx — Mobile v2: Bottom Sheet + Bottom Nav + Sticky CTA
// Hero cinematográfico con sheet parcialmente abierto al cargar.
// Bottom nav ancla a secciones (Inicio · Servicios · Propiedades · Contacto).
// Sticky CTA flotante de WhatsApp arriba de la nav.

// i18n helper — pick ES/EN based on global window.__amLang.
const T = (es, en) => typeof window !== 'undefined' && window.__amLang === 'en' ? en : es;

const { useState, useRef, useEffect } = React;

// ─── Phone wrapper centered on a moody page background ───────
function PhoneStage({ children }) {
  // In production (window.__AM_RESPONSIVE__), render full-viewport without phone frame.
  if (typeof window !== 'undefined' && (window.__AM_RESPONSIVE__ || window.__AM_MOBILE_PROD__)) {
    return (
      <div style={{
        width: '100vw', height: '100vh', position: 'relative',
        background: AM.cream, overflow: 'hidden'
      }}>
        {children}
      </div>);

  }
  return (
    <div style={{
      width: '100vw', height: '100vh',
      background: `radial-gradient(circle at 30% 20%, #2a2520 0%, #1a1816 50%, #0a0908 100%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      overflow: 'hidden'
    }}>
      {/* Side label */}
      <div style={{
        position: 'absolute', top: 24, left: 24,
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: 'rgba(245,241,232,0.4)',
        letterSpacing: 1.5
      }}>
        AM TULUM · MOBILE v2 · D+A HÍBRIDO
      </div>
      <div style={{
        position: 'absolute', top: 24, right: 24,
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: 'rgba(245,241,232,0.4)',
        letterSpacing: 1.5
      }}>
        390 × 844 · iPhone
      </div>

      {/* iPhone bezel */}
      <div style={{
        width: PHONE_W + 16, height: PHONE_H + 16,
        background: '#0a0a0a',
        borderRadius: 56,
        padding: 8,
        boxShadow: `
          0 80px 120px rgba(0,0,0,0.6),
          0 30px 60px rgba(0,0,0,0.4),
          inset 0 0 0 1px rgba(255,255,255,0.05)
        `
      }}>
        <div style={{
          width: PHONE_W, height: PHONE_H,
          borderRadius: 48,
          overflow: 'hidden',
          position: 'relative',
          background: AM.cream
        }}>
          {children}
        </div>
      </div>
    </div>);

}

// ─── App ────────────────────────────────────────────────
function V2App() {
  const [lang, setLang] = typeof useLang === 'function' ? useLang() : React.useState('es');
  // Swap global COPY based on lang so sub-components reading COPY.* pick up the change.
  if (typeof window !== 'undefined') {
    window.__amLang = lang;
    window.COPY = lang === 'en' ? window.COPY_EN || window.COPY_ES || window.COPY : window.COPY_ES || window.COPY;
  }
  const scrollRef = useRef(null);
  const [activeTab, setActiveTab] = useState('home');
  const [scrollY, setScrollY] = useState(0);
  const [menuOpen, setMenuOpen] = useState(false);

  // Sections refs for scroll-anchor
  const sectionRefs = {
    home: useRef(null),
    services: useRef(null),
    properties: useRef(null),
    contact: useRef(null)
  };

  const scrollTo = (id) => {
    const el = sectionRefs[id]?.current;
    const cont = scrollRef.current;
    if (!el || !cont) return;
    // Compensate for floating TopChrome height (~64px) so the section title isn't clipped.
    const offset = id === 'home' ? 0 : 72;
    cont.scrollTo({ top: el.offsetTop - offset, behavior: 'smooth' });
    setActiveTab(id);
  };

  // Scroll listener — for hero parallax + active tab tracking
  useEffect(() => {
    const cont = scrollRef.current;
    if (!cont) return;
    const onScroll = () => {
      setScrollY(cont.scrollTop);
      // Active tab detection
      const scrollPos = cont.scrollTop + 100;
      let current = 'home';
      for (const [id, ref] of Object.entries(sectionRefs)) {
        if (ref.current && ref.current.offsetTop <= scrollPos) {
          current = id;
        }
      }
      setActiveTab(current);
    };
    cont.addEventListener('scroll', onScroll);
    return () => cont.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <PhoneStage>
      {!(typeof window !== 'undefined' && (window.__AM_RESPONSIVE__ || window.__AM_MOBILE_PROD__)) && <IOSStatusBar dark={scrollY < 100} />}

      {/* Top floating chrome — appears over hero, transitions on scroll */}
      <TopChrome scrollY={scrollY} onMenuClick={() => setMenuOpen(true)} onLogoClick={() => scrollTo('home')} lang={lang} setLang={setLang} />

      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} onNav={(id) => {setMenuOpen(false);scrollTo(id);}} />

      {/* Scrollable content */}
      <div
        ref={scrollRef}
        className="phone-scroll"
        style={{
          position: 'absolute', inset: 0,
          overflowY: 'auto', overflowX: 'hidden',
          background: AM.cream
        }}>
        
        <section ref={sectionRefs.home}>
          <Hero scrollY={scrollY} />
          <ValueProps />
        </section>

        <section ref={sectionRefs.services}>
          <Services />
          <Benefits />
          <Process />
        </section>

        <section ref={sectionRefs.properties}>
          <Properties />
          <KPIs />
          <DecadeStrip />
        </section>

        <section ref={sectionRefs.contact}>
          <Contact />
          <Footer />
          {/* Dark spacer behind the translucent bottom nav — keeps it visually attached to the footer */}
          <div style={{ height: 100, background: '#0a0a0a' }} />
        </section>
      </div>

      {/* Bottom nav */}
      <BottomNav active={activeTab} onChange={scrollTo} />
    </PhoneStage>);

}

// ─── Top chrome (logo + menu, glass on hero, solid after) ─────
function TopChrome({ scrollY, onMenuClick, onLogoClick, lang, setLang }) {
  const onHero = scrollY < 200;
  const t = Math.min(1, Math.max(0, (scrollY - 100) / 100));
  const inProd = typeof window !== 'undefined' && (window.__AM_RESPONSIVE__ || window.__AM_MOBILE_PROD__);
  const topPad = inProd ? 'max(env(safe-area-inset-top, 0px), 12px)' : 54;
  const langBtnColor = onHero ? 'rgba(255,255,255,0.85)' : 'rgba(10,10,10,0.55)';
  const langBtnActive = onHero ? '#fff' : AM.ink;
  return (
    <div style={{
      position: inProd ? 'fixed' : 'absolute', top: 0, left: 0, right: 0,
      padding: `calc(${typeof topPad === 'number' ? topPad + 'px' : topPad} + ${inProd ? '24px' : '0px'}) 16px 14px`,
      background: `rgba(245,241,232,${t * 0.95})`,
      backdropFilter: t > 0.3 ? 'blur(20px) saturate(180%)' : 'none',
      WebkitBackdropFilter: t > 0.3 ? 'blur(20px) saturate(180%)' : 'none',
      borderBottom: t > 0.5 ? '0.5px solid rgba(10,10,10,0.06)' : 'none',
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      zIndex: 50,
      transition: 'background 0.2s, border-color 0.2s'
    }}>
      <button
        type="button"
        onClick={onLogoClick}
        aria-label={T('Ir al inicio', 'Go to home')}
        style={{
          background: 'none', border: 'none', padding: 0, margin: 0,
          cursor: 'pointer', display: 'flex', alignItems: 'center'
        }}>
        <Logo size={32} color={onHero ? AM.cream : AM.ink} compact={false} shadow={onHero} />
      </button>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        {/* ES / EN toggle */}
        {setLang &&
        <div style={{
          display: 'flex', alignItems: 'center', gap: 4,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 11, letterSpacing: 1
        }}>
            <button onClick={() => setLang('es')} aria-label="Español" style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '4px 6px',
            color: lang === 'es' ? AM.gold : langBtnColor,
            fontWeight: lang === 'es' ? 600 : 400,
            fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
            textShadow: onHero ? '0 1px 4px rgba(0,0,0,0.4)' : 'none'
          }}>ES</button>
            <span style={{ color: langBtnColor, opacity: 0.5 }}>·</span>
            <button onClick={() => setLang('en')} aria-label="English" style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '4px 6px',
            color: lang === 'en' ? AM.gold : langBtnColor,
            fontWeight: lang === 'en' ? 600 : 400,
            fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit',
            textShadow: onHero ? '0 1px 4px rgba(0,0,0,0.4)' : 'none'
          }}>EN</button>
          </div>
        }
        <button onClick={onMenuClick} aria-label={T('Abrir menú', 'Open menu')} style={{
          width: 38, height: 38, borderRadius: 999, padding: 0,
          background: onHero ? 'rgba(245,241,232,0.18)' : 'rgba(10,10,10,0.06)',
          backdropFilter: onHero ? 'blur(20px)' : 'none',
          WebkitBackdropFilter: onHero ? 'blur(20px)' : 'none',
          border: onHero ? '0.5px solid rgba(255,255,255,0.2)' : '0.5px solid rgba(10,10,10,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'pointer'
        }}>
          {Ico.menu(onHero ? '#fff' : AM.ink, 18)}
        </button>
      </div>
    </div>);

}

// ─── Hero — full-bleed photo with sheet partially open ────
function Hero({ scrollY }) {
  return (
    <div style={{
      position: 'relative', height: 680,
      backgroundColor: AM.ink,
      backgroundImage: `linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 25%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.92) 100%), ${bgUrl('redesign/img/hero.jpg')}`,
      backgroundSize: 'cover',
      backgroundPosition: `center ${50 + scrollY * 0.05}%`
    }}>
      {/* Hero copy — eyebrow arriba, título central grande, credenciales abajo */}
      <div style={{
        position: 'absolute', inset: 0,
        padding: '110px 24px 40px',
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 22,
        textAlign: 'center',
        color: '#fff'
      }}>
        {/* Eyebrow — arriba */}
        <div style={{
          padding: '6px 12px', borderRadius: 999,
          background: 'rgba(255,255,255,0.12)',
          backdropFilter: 'blur(10px)',
          WebkitBackdropFilter: 'blur(10px)',
          border: '0.5px solid rgba(255,255,255,0.2)',
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9.5, color: 'rgba(255,255,255,0.85)',
          letterSpacing: 1.5
        }}>
          <span style={{
            width: 5, height: 5, borderRadius: 999, background: AM.gold
          }} />
          {T('PROPERTY MANAGEMENT · DESDE 2015', 'PROPERTY MANAGEMENT · SINCE 2015')}
        </div>

        {/* Bloque central — título + subtítulo (protagonista) */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 56, lineHeight: 0.98, fontWeight: 400,
            letterSpacing: -1,
            textShadow: '0 2px 12px rgba(0,0,0,0.7), 0 4px 32px rgba(0,0,0,0.5)'
          }}>
            {T(<>Tu propiedad<br />en Tulum,<br />cuidada<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>como nuestra</span>.</>, <>Your Tulum<br />home, cared<br />for <span style={{ fontStyle: 'italic', color: AM.gold }}>like our own</span>.</>)}
          </div>

          <div style={{
            marginTop: 14, fontSize: 13.5, lineHeight: 1.5,
            color: 'rgba(255,255,255,0.92)', maxWidth: 300,
            textShadow: '0 1px 8px rgba(0,0,0,0.6)'
          }}>
            {T('Operación integral con estándares Superhost.', 'End-to-end operation, Superhost standard.')}
          </div>
        </div>

        {/* Credenciales — abajo */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
          <style>{`
            @keyframes amHeroChipIn {
              from { opacity: 0; transform: translateY(8px); }
              to { opacity: 1; transform: translateY(0); }
            }
            .am-hero-chip { opacity: 0; animation: amHeroChipIn 0.5s ease-out forwards; }
          `}</style>

          {/* Chip Superhost — certificación */}
          <div className="am-hero-chip" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px 8px 11px', borderRadius: 999,
            background: 'rgba(201,169,97,0.22)',
            backdropFilter: 'blur(14px)',
            WebkitBackdropFilter: 'blur(14px)',
            border: '0.5px solid rgba(201,169,97,0.55)',
            animationDelay: '0.1s'
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
              <path d="M7 4c-1 4 0 7 5 9M17 4c1 4 0 7-5 9M12 13v6M9 19h6" stroke={AM.gold} strokeWidth="1.5" strokeLinecap="round" />
              <circle cx="12" cy="9" r="3" stroke={AM.gold} strokeWidth="1.5" />
            </svg>
            <span style={{
              fontSize: 11.5, color: '#fff', fontWeight: 500, letterSpacing: 0.4
            }}>Superhost <span style={{ opacity: 0.6, fontWeight: 400 }}>{T('· desde 2019', '· since 2019')}</span></span>
          </div>
        </div>
      </div>

      {/* Stats card — partially over hero */}
      <div style={{
        position: 'absolute', bottom: -50, left: 16, right: 16,
        background: '#fff',
        borderRadius: 20, padding: '20px 18px',
        boxShadow: '0 24px 48px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08)',
        display: 'flex', justifyContent: 'space-between',
        zIndex: 5
      }}>
        {COPY.stats.map((s, i) =>
        <div key={i} style={{
          flex: 1, textAlign: 'center',
          borderRight: i < COPY.stats.length - 1 ? '0.5px solid rgba(10,10,10,0.1)' : 'none',
          padding: '0 8px'
        }}>
            <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 30, color: AM.ink, lineHeight: 1, fontWeight: 500
          }}>{s.v}</div>
            <div style={{
            marginTop: 6, fontSize: 9, color: 'rgba(10,10,10,0.5)',
            letterSpacing: 0.8, textTransform: 'uppercase',
            lineHeight: 1.3
          }}>{s.l}</div>
          </div>
        )}
      </div>
    </div>);

}

// ─── Value props — Antes/Después interactivo ─────────
function ValueProps() {
  const [mode, setMode] = React.useState('after'); // 'before' | 'after'
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      ([e]) => e.isIntersecting && setVisible(true),
      { threshold: 0.2 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const items = window.__amLang === 'en' ? [
  { before: 'Guests waking you at 3am', after: '24/7 attention · without interrupting you' },
  { before: 'Inconsistent cleaning', after: 'In-house staff · Superhost standard' },
  { before: '30-45% occupancy', after: '70-85% average occupancy' },
  { before: 'Reviews 4.3★', after: 'Reviews 4.9★ · Highly Satisfied' },
  { before: 'Fixed pricing · lose peak', after: 'Daily dynamic pricing' }] :
  [
  { before: 'Te despierta el huésped a las 3am', after: 'Atención 24/7 sin interrumpirte' },
  { before: 'Limpiezas inconsistentes', after: 'Staff propio · estándar Superhost' },
  { before: 'Ocupación 30-45%', after: 'Ocupación 70-85% promedio' },
  { before: 'Reviews 4.3★', after: 'Reviews 4.9★ · Highly Satisfied' },
  { before: 'Pricing fijo · pierdes temporada', after: 'Pricing dinámico diario' }];


  return (
    <div ref={ref} style={{ padding: '78px 24px 56px', background: AM.cream }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: AM.goldSoft, letterSpacing: 2,
        textTransform: 'uppercase'
      }}>
        {T('▲ Para propietarios', '▲ For owners')}
      </div>
      <div style={{
        marginTop: 14,
        fontFamily: 'Cormorant Garamond, serif',
        fontSize: 32, color: AM.ink, lineHeight: 1.05, fontWeight: 400
      }}>
        {T(<>Tu segunda casa<br />no debe ser<br /><span style={{ fontStyle: 'italic', color: AM.goldSoft }}>carga de trabajo</span>.</>, <>Your second home<br />shouldn't be<br /><span style={{ fontStyle: 'italic', color: AM.goldSoft }}>a job</span>.</>)}
      </div>
      <div style={{
        marginTop: 18, fontSize: 14, color: 'rgba(10,10,10,0.65)',
        lineHeight: 1.55
      }}>
        {T('Esto cambia con AM Tulum:', 'This is what changes with AM Tulum:')}
      </div>

      {/* Toggle Antes / Después */}
      <div style={{
        marginTop: 22, display: 'inline-flex', borderRadius: 999,
        background: 'rgba(10,10,10,0.06)', padding: 4,
        border: '0.5px solid rgba(10,10,10,0.08)'
      }}>
        {[
        { id: 'before', l: T('Sin AM', 'Without AM') },
        { id: 'after', l: T('Con AM Tulum', 'With AM Tulum') }].
        map((t) =>
        <button key={t.id} onClick={() => setMode(t.id)} style={{
          padding: '8px 16px', borderRadius: 999, border: 0,
          background: mode === t.id ? AM.ink : 'transparent',
          color: mode === t.id ? AM.cream : 'rgba(10,10,10,0.55)',
          fontFamily: 'Inter, sans-serif',
          fontSize: 11.5, fontWeight: 600, letterSpacing: 0.5,
          cursor: 'pointer', transition: 'all 0.25s'
        }}>{t.l}</button>
        )}
      </div>

      {/* Lista */}
      <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map((it, i) => {
          const isAfter = mode === 'after';
          return (
            <div key={i} style={{
              display: 'flex', alignItems: 'flex-start', gap: 12,
              padding: '14px 16px', borderRadius: 14,
              background: isAfter ? '#fff' : 'rgba(10,10,10,0.04)',
              border: isAfter ? `0.5px solid ${AM.line}` : '0.5px solid rgba(10,10,10,0.08)',
              boxShadow: isAfter ? '0 4px 14px rgba(10,10,10,0.05)' : 'none',
              opacity: visible ? 1 : 0,
              transform: visible ? 'translateY(0)' : 'translateY(12px)',
              transition: `opacity 0.5s ease ${i * 60}ms, transform 0.5s ease ${i * 60}ms, background 0.3s, border 0.3s, box-shadow 0.3s`
            }}>
              {/* Icon */}
              <div style={{
                width: 22, height: 22, borderRadius: 999, flexShrink: 0,
                marginTop: 1,
                background: isAfter ? 'rgba(201,169,97,0.15)' : 'rgba(10,10,10,0.06)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: isAfter ? AM.goldSoft : 'rgba(10,10,10,0.4)'
              }}>
                {isAfter ?
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                    <path d="M5 12l5 5L20 7" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg> :

                <svg width="9" height="9" viewBox="0 0 24 24" fill="none">
                    <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
                  </svg>
                }
              </div>
              <div style={{
                fontSize: 13.5, lineHeight: 1.45,
                color: isAfter ? AM.ink : 'rgba(10,10,10,0.55)',
                textDecoration: isAfter ? 'none' : 'line-through',
                textDecorationColor: 'rgba(10,10,10,0.3)',
                fontWeight: isAfter ? 500 : 400
              }}>
                {isAfter ? it.after : it.before}
              </div>
            </div>);

        })}
      </div>
    </div>);

}

// ─── Services ────────────────────────────────────────────
// 6 iconos minimal (1px stroke), index alineado con COPY.services
const SVC_ICONS_M = [
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M6 17v8l20 8V9z" /><path d="M26 14c3 1.5 3 11.5 0 14" /><path d="M10 25v6h4l2-4" /></svg>,
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M6 32V8" /><path d="M6 32h28" /><path d="M10 26l6-6 5 4 8-12" /><path d="M24 12h5v5" /></svg>,
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><circle cx="21" cy="21" r="14" /><path d="M21 12v9l6 4" /></svg>,
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M28 6L18 16" /><path d="M14 20l8 8" /><path d="M10 24l-4 10 10-4z" /><path d="M30 14l4-4M34 20h4M28 28l4 4" opacity="0.6" /></svg>,
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M10 6h22v30l-4-3-4 3-3-3-4 3-3-3-4 3z" /><path d="M16 14h12M16 20h12M16 26h8" /></svg>,
(c) => <svg width="34" height="34" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M10 6h16l8 8v22H10z" /><path d="M26 6v8h8" /><path d="M15 30v-6M20 30v-10M25 30v-4M30 30v-8" /></svg>];


function Services() {
  const [openIdx, setOpenIdx] = React.useState(null);
  const isEs = (window.__amLang || 'es') !== 'en';
  // Read services from the active language bag (falls back to ES const).
  const svcList = (isEs ? window.COPY_ES || window.COPY : window.COPY_EN || window.COPY).services || COPY.services;
  // Mini-stats por servicio
  const SVC_STAT = !isEs ? [
  '+30% bookings vs listing alone',
  '+20% RevPAR vs fixed pricing',
  '< 5 min response time',
  '100% auditable checklist',
  'Full monthly traceability',
  'PDF report every 30 days'] :
  [
  '+30% reservas vs listing solo',
  '+20% RevPAR vs precio fijo',
  '< 5 min tiempo de respuesta',
  '100% checklist auditable',
  'Trazabilidad mensual completa',
  'Reporte PDF cada 30 días'];


  return (
    <div style={{
      padding: '40px 0 32px', background: AM.ink, color: AM.cream
    }}>
      <div style={{ padding: '0 24px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, color: AM.gold, letterSpacing: 2,
          textTransform: 'uppercase'
        }}>
          {T('Operación integral', 'Integrated operation')}
        </div>
        <div style={{
          marginTop: 12,
          fontFamily: 'Cormorant Garamond, serif',
          fontSize: 30, color: AM.cream, lineHeight: 1.05, fontWeight: 400
        }}>
          {isEs ?
          <>Lo que hacemos por ti,<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>mientras tú no estás</span>.</> :

          <>What we do for you,<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>while you're away</span>.</>
          }
        </div>
        <div style={{
          marginTop: 12, fontSize: 12.5,
          color: 'rgba(245,241,232,0.55)', lineHeight: 1.5
        }}>
          {T('Seis áreas que cubrimos, sin que tú toques un teléfono. Toca cualquiera para ver el detalle.', 'Six areas we cover — without you touching a phone. Tap any to see the detail.')}
        </div>
      </div>

      {/* Lista vertical de 6 áreas — full-width rows */}
      <div style={{
        marginTop: 24,
        borderTop: '0.5px solid rgba(245,241,232,0.14)'
      }}>
        {svcList.slice(0, 6).map((s, i) => {
          const Icon = SVC_ICONS_M[i];
          const isOpen = openIdx === i;
          return (
            <div key={i} style={{
              borderBottom: '0.5px solid rgba(245,241,232,0.14)',
              background: isOpen ? 'rgba(201,169,97,0.05)' : 'transparent',
              transition: 'background 280ms ease'
            }}>
              {/* Row clickable */}
              <button
                onClick={() => setOpenIdx(isOpen ? null : i)}
                style={{
                  all: 'unset', cursor: 'pointer',
                  width: '100%', boxSizing: 'border-box',
                  padding: '20px 24px',
                  display: 'flex', alignItems: 'center', gap: 18,
                  position: 'relative'
                }}>
                {/* Icon */}
                <div style={{
                  flexShrink: 0,
                  transform: isOpen ? 'scale(1.05)' : 'scale(1)',
                  transition: 'transform 320ms cubic-bezier(.2,.7,.2,1)'
                }}>
                  <div style={{ transform: 'scale(0.85)', transformOrigin: 'left center' }}>
                    {Icon(isOpen ? AM.gold : 'rgba(245,241,232,0.85)')}
                  </div>
                </div>

                {/* Title + 1-line teaser */}
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: 'Cormorant Garamond, serif',
                    fontSize: 20, lineHeight: 1.1, fontWeight: 400,
                    color: isOpen ? AM.gold : AM.cream,
                    transition: 'color 280ms ease',
                    letterSpacing: -0.2
                  }}>{s.t}</div>
                  <div style={{
                    marginTop: 4, fontSize: 11.5,
                    color: 'rgba(245,241,232,0.5)',
                    lineHeight: 1.35,
                    overflow: 'hidden', textOverflow: 'ellipsis',
                    whiteSpace: 'nowrap'
                  }}>{s.d}</div>
                </div>

                {/* Chevron */}
                <div style={{
                  flexShrink: 0, width: 22, height: 22,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)',
                  transition: 'transform 320ms cubic-bezier(.2,.7,.2,1)',
                  color: isOpen ? AM.gold : 'rgba(245,241,232,0.4)'
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M5 3 L9 7 L5 11" stroke="currentColor" strokeWidth="1.2"
                    strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
              </button>

              {/* Expanded panel */}
              <div style={{
                maxHeight: isOpen ? 320 : 0,
                overflow: 'hidden',
                transition: 'max-height 380ms cubic-bezier(.2,.7,.2,1)'
              }}>
                {isOpen &&
                <ServiceDetailRow item={s} stat={SVC_STAT[i]} />
                }
              </div>
            </div>);

        })}
      </div>

      <div style={{
        marginTop: 22, padding: '0 24px', textAlign: 'center',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9.5, letterSpacing: 1.8, textTransform: 'uppercase',
        color: 'rgba(245,241,232,0.4)'
      }}>
        {T('· Todo bajo un solo equipo ·', '· All under one team ·')}
      </div>
    </div>);

}

// Panel expandido para Layout B — bullets + mini-stat dorado
function ServiceDetailRow({ item, stat }) {
  return (
    <div style={{
      padding: '4px 24px 24px 76px',
      animation: 'svcRowFadeIn 320ms cubic-bezier(.2,.7,.2,1)'
    }}>
      <style>{`
        @keyframes svcRowFadeIn {
          from { opacity: 0; transform: translateY(-4px); }
          to { opacity: 1; transform: translateY(0); }
        }
      `}</style>

      {/* Bullets */}
      <div style={{ marginTop: 4 }}>
        {item.bullets && item.bullets.map((b, i) =>
        <div key={i} style={{
          display: 'flex', gap: 10, alignItems: 'flex-start',
          padding: '5px 0',
          animation: `svcRowFadeIn 360ms ${80 + i * 70}ms cubic-bezier(.2,.7,.2,1) both`
        }}>
            <div style={{
            width: 4, height: 4, borderRadius: 999,
            background: AM.gold, marginTop: 7, flexShrink: 0
          }} />
            <div style={{
            fontSize: 12.5, color: 'rgba(245,241,232,0.85)',
            lineHeight: 1.5, flex: 1
          }}>{b}</div>
          </div>
        )}
      </div>

      {/* Mini-stat dorado destacado */}
      <div style={{
        marginTop: 14, padding: '10px 14px',
        borderRadius: 10,
        background: 'rgba(201,169,97,0.1)',
        border: '0.5px solid rgba(201,169,97,0.3)',
        display: 'flex', alignItems: 'center', gap: 10,
        animation: 'svcRowFadeIn 400ms 280ms cubic-bezier(.2,.7,.2,1) both'
      }}>
        <div style={{
          width: 6, height: 6, borderRadius: 999,
          background: AM.gold,
          boxShadow: '0 0 8px rgba(201,169,97,0.6)'
        }} />
        <div style={{
          fontSize: 12, color: AM.gold,
          fontFamily: 'JetBrains Mono, monospace',
          letterSpacing: 0.5, fontWeight: 500
        }}>{stat}</div>
      </div>

      {/* Proof line */}
      {item.proof ?
      <div style={{
        marginTop: 12,
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9.5, letterSpacing: 1.2, textTransform: 'uppercase',
        color: 'rgba(245,241,232,0.4)',
        animation: 'svcRowFadeIn 400ms 340ms cubic-bezier(.2,.7,.2,1) both'
      }}>
        · {item.proof} ·
      </div> :
      null}
    </div>);

}

// ─── Benefits ────────────────────────────────────────────
// 3 iconos minimal para benefits
const BNF_ICONS_M = [
// 01 Asset value — diamante / casa con escudo
(c) => <svg width="32" height="32" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M21 6l14 7v10c0 8-6 13-14 15-8-2-14-7-14-15V13z" /><path d="M14 21l5 5 9-10" /></svg>,
// 02 Income — gráfica ascendente con línea base
(c) => <svg width="32" height="32" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><path d="M6 32V8M6 32h28" /><path d="M11 26l5-4 5 2 8-10" /><path d="M24 14h5v5" /></svg>,
// 03 Free time — reloj con sol/hojas
(c) => <svg width="32" height="32" viewBox="0 0 42 42" fill="none" stroke={c} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"><circle cx="21" cy="21" r="11" /><path d="M21 14v7l4 3" /><path d="M21 5v3M21 34v3M5 21h3M34 21h3" opacity="0.6" /></svg>];


function Benefits() {
  return (
    <div style={{
      padding: '40px 0 36px', background: AM.ink, color: AM.cream,
      borderTop: '0.5px solid rgba(245,241,232,0.08)'
    }}>
      <div style={{ padding: '0 24px' }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, color: AM.gold, letterSpacing: 2,
          textTransform: 'uppercase'
        }}>
          {T('Por qué AM Tulum', 'Why AM Tulum')}
        </div>
        <div style={{
          marginTop: 12,
          fontFamily: 'Cormorant Garamond, serif',
          fontSize: 30, color: AM.cream, lineHeight: 1.05, fontWeight: 400
        }}>
          {T(<>Un modelo que <span style={{ fontStyle: 'italic', color: AM.gold }}>trabaja para ti</span>.</>, <>A model that <span style={{ fontStyle: 'italic', color: AM.gold }}>works for you</span>.</>)}
        </div>
      </div>

      {/* Grid 3 — icono + título corto */}
      <div style={{
        marginTop: 26,
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        borderTop: '0.5px solid rgba(245,241,232,0.14)',
        borderBottom: '0.5px solid rgba(245,241,232,0.14)'
      }}>
        {(window.__amLang === 'en' ? [
        { n: '01', t: 'Asset value' },
        { n: '02', t: 'Income' },
        { n: '03', t: 'Free time' }] :
        [
        { n: '01', t: 'Plusvalía' },
        { n: '02', t: 'Ingresos' },
        { n: '03', t: 'Tiempo libre' }]).
        map((b, i) => {
          const Icon = BNF_ICONS_M[i];
          return (
            <div key={i} style={{
              padding: '26px 6px 24px',
              borderRight: i < 2 ? '0.5px solid rgba(245,241,232,0.14)' : 'none',
              display: 'flex', flexDirection: 'column', alignItems: 'center',
              textAlign: 'center', gap: 14, minHeight: 130
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 9, letterSpacing: 1.5,
                color: 'rgba(199,162,93,0.65)'
              }}>{b.n}</div>
              {Icon('rgba(245,241,232,0.9)')}
              <div style={{
                fontFamily: 'Cormorant Garamond, serif',
                fontSize: 16, lineHeight: 1.15, fontWeight: 400,
                color: AM.cream, letterSpacing: -0.2
              }}>{b.t}</div>
            </div>);

        })}
      </div>

      <div style={{
        marginTop: 18, padding: '0 24px', textAlign: 'center',
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9.5, letterSpacing: 1.8, textTransform: 'uppercase',
        color: 'rgba(245,241,232,0.4)'
      }}>
        {T('· Tú disfrutas. Nosotros operamos. ·', '· You enjoy. We operate. ·')}
      </div>
    </div>);

}

// ─── Process — timeline animada con scroll progressive reveal ────
function Process() {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  // Etiquetas de tiempo para dar sentido de progresión
  const timeline = window.__amLang === 'en' ? ['Day 1', 'Week 1', 'Week 2', 'Month 1+'] : ['Día 1', 'Semana 1', 'Semana 2', 'Mes 1+'];
  const timelineLabels = timeline;

  React.useEffect(() => {
    if (!ref.current) return;
    const onScroll = () => {
      const rect = ref.current.getBoundingClientRect();
      const vh = window.innerHeight || 800;
      // Progress: 0 cuando la sección entra desde abajo, 1 cuando termina de cruzar
      const start = vh * 0.85;
      const end = vh * 0.2;
      const total = rect.height + (start - end);
      const passed = start - rect.top;
      const p = Math.max(0, Math.min(1, passed / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const N = COPY.steps.length;
  // Línea avanza ligeramente antes que los dots para sentir flow
  const lineProgress = Math.min(1, progress * 1.05);

  return (
    <div ref={ref} style={{
      padding: '40px 24px', background: AM.ink, color: AM.cream,
      borderTop: '0.5px solid rgba(245,241,232,0.08)'
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: AM.gold, letterSpacing: 2,
        textTransform: 'uppercase'
      }}>
        {T('El proceso', 'The process')}
      </div>
      <div style={{
        marginTop: 14,
        fontFamily: 'Cormorant Garamond, serif',
        fontSize: 30, color: AM.cream, lineHeight: 1.05, fontWeight: 400
      }}>
        {T(<>4 pasos hasta tu<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>primera reserva</span>.</>, <>4 steps to your<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>first booking</span>.</>)}
      </div>

      <div style={{ marginTop: 24, position: 'relative' }}>
        {/* Track de fondo (apagado) */}
        <div style={{
          position: 'absolute', left: 19, top: 16, bottom: 16,
          width: 1, background: 'rgba(201,169,97,0.18)'
        }} />
        {/* Track activo (dorado, crece con scroll) */}
        <div style={{
          position: 'absolute', left: 19, top: 16,
          width: 1, height: `calc((100% - 32px) * ${lineProgress})`,
          background: `linear-gradient(180deg, ${AM.gold} 0%, ${AM.gold} 80%, rgba(201,169,97,0.6) 100%)`,
          boxShadow: `0 0 8px rgba(201,169,97,0.5)`,
          transition: 'height 80ms linear'
        }} />

        {COPY.steps.map((s, i) => {
          // Cada step se "enciende" (fill dorado) cuando progress pasa su threshold.
          // Pero el contenido siempre está visible y leíble.
          const stepThreshold = (i + 0.5) / N;
          const fullyActive = progress >= stepThreshold;
          return (
            <div key={i} style={{
              display: 'flex', gap: 18, padding: '12px 0 22px',
              position: 'relative'
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: 999,
                background: fullyActive ? AM.gold : AM.ink,
                border: `1px solid ${AM.gold}`,
                color: fullyActive ? AM.ink : AM.gold,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Cormorant Garamond, serif', fontSize: 14,
                flexShrink: 0, fontWeight: 500,
                position: 'relative', zIndex: 2,
                transition: 'background 400ms ease, color 400ms ease, box-shadow 400ms ease',
                boxShadow: fullyActive ? `0 0 0 4px rgba(201,169,97,0.15), 0 0 20px rgba(201,169,97,0.35)` : 'none'
              }}>{s.n}</div>
              <div style={{ flex: 1, paddingTop: 4 }}>
                <div style={{
                  display: 'flex', alignItems: 'baseline', gap: 10,
                  flexWrap: 'wrap'
                }}>
                  <div style={{
                    fontFamily: 'Cormorant Garamond, serif',
                    fontSize: 19, color: AM.cream, lineHeight: 1
                  }}>{s.t}</div>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 9, letterSpacing: 1.4,
                    color: fullyActive ? AM.gold : 'rgba(245,241,232,0.35)',
                    textTransform: 'uppercase',
                    transition: 'color 400ms ease'
                  }}>
                    {timeline[i]}
                  </div>
                </div>
                <div style={{
                  marginTop: 6, fontSize: 12.5,
                  color: 'rgba(245,241,232,0.6)', lineHeight: 1.5
                }}>{s.d}</div>
              </div>
            </div>);

        })}
      </div>
    </div>);

}

// ─── Properties — carrusel horizontal con snap ──────────
function Properties() {
  const scrollRef = React.useRef(null);
  const [activeIdx, setActiveIdx] = React.useState(0);
  const total = COPY.properties.length;

  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => {
      const cardWidth = el.offsetWidth * 0.82 + 12; // ancho card + gap
      const idx = Math.round(el.scrollLeft / cardWidth);
      setActiveIdx(Math.max(0, Math.min(total - 1, idx)));
    };
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, [total]);

  const scrollToIdx = (i) => {
    const el = scrollRef.current;
    if (!el) return;
    const cardWidth = el.offsetWidth * 0.82 + 12;
    el.scrollTo({ left: i * cardWidth, behavior: 'smooth' });
  };

  return (
    <div style={{ padding: '40px 0 32px', background: AM.cream }}>
      <div style={{ padding: '0 24px' }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end'
        }}>
          <div style={{ flex: 1 }}>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 10, color: AM.goldSoft, letterSpacing: 2,
              textTransform: 'uppercase'
            }}>
              {T('Portafolio', 'Portfolio')}
            </div>
            <div style={{
              marginTop: 14,
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 30, color: AM.ink, lineHeight: 1.05, fontWeight: 400
            }}>
              {T(<>Hogares que <span style={{ fontStyle: 'italic', color: AM.goldSoft }}>cuidamos</span>.</>, <>Homes we <span style={{ fontStyle: 'italic', color: AM.goldSoft }}>care for</span>.</>)}
            </div>
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 11, color: 'rgba(10,10,10,0.55)',
            letterSpacing: 0.6, fontVariantNumeric: 'tabular-nums'
          }}>
            <span style={{ color: AM.ink, fontWeight: 500 }}>{String(activeIdx + 1).padStart(2, '0')}</span>
            <span style={{ opacity: 0.4 }}> / {String(total).padStart(2, '0')}</span>
          </div>
        </div>
        <div style={{
          marginTop: 14, fontSize: 13, color: 'rgba(10,10,10,0.6)',
          lineHeight: 1.5
        }}>
          {T('Desliza para explorar las propiedades activas.', 'Swipe to explore active properties.')}
        </div>
      </div>

      {/* Carrusel horizontal con snap */}
      <div
        ref={scrollRef}
        style={{
          marginTop: 22,
          display: 'flex', gap: 12,
          overflowX: 'auto', overflowY: 'hidden',
          scrollSnapType: 'x mandatory',
          scrollPaddingLeft: 20,
          padding: '0 20px 4px',
          WebkitOverflowScrolling: 'touch',
          scrollbarWidth: 'none'
        }}>
        <style>{`
          .am-props-scroll::-webkit-scrollbar { display: none; }
        `}</style>
        {COPY.properties.map((p, i) =>
        <a key={p.id} href={p.url} target="_blank" rel="noopener noreferrer" style={{
          flexShrink: 0, width: '82%',
          scrollSnapAlign: 'start',
          borderRadius: 20, overflow: 'hidden',
          background: '#fff',
          boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06)',
          transition: 'transform 320ms ease, box-shadow 320ms ease',
          transform: i === activeIdx ? 'scale(1)' : 'scale(0.97)',
          textDecoration: 'none', color: 'inherit', display: 'block'
        }}>
            <div style={{
            height: 320,
            backgroundImage: `url("${assetUrl(p.img)}")`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            position: 'relative'
          }}></div>
            <div style={{ padding: '16px 18px 18px' }}>
              <div style={{
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 24, color: AM.ink, lineHeight: 1, fontWeight: 500
            }}>{p.name}</div>
            </div>
          </a>
        )}
        {/* spacer para que la última card pueda alinear al inicio */}
        <div style={{ flexShrink: 0, width: 1 }} />
      </div>

      {/* Indicador de páginas (dots) */}
      <div style={{
        marginTop: 18, padding: '0 24px',
        display: 'flex', gap: 6, justifyContent: 'center'
      }}>
        {COPY.properties.map((_, i) =>
        <button
          key={i}
          onClick={() => scrollToIdx(i)}
          aria-label={T(`Ir a propiedad ${i + 1}`, `Go to property ${i + 1}`)}
          style={{
            all: 'unset', cursor: 'pointer',
            width: i === activeIdx ? 22 : 6, height: 6,
            borderRadius: 999,
            background: i === activeIdx ? AM.ink : 'rgba(10,10,10,0.2)',
            transition: 'width 320ms cubic-bezier(.2,.7,.2,1), background 220ms ease'
          }} />

        )}
      </div>
    </div>);

}

// ─── KPIs — count-up + barras comparativas ───────────────
// Datos numéricos: am = nuestro valor, bm = benchmark industria, max = escala
const KPI_DATA = [
{ am: 4.8, bm: 4.5, max: 5.0, fmt: (v) => v.toFixed(1), suffix: '', dir: 'higher' },
{ am: 100, bm: 90, max: 100, fmt: (v) => Math.round(v).toString(), suffix: '%', dir: 'higher' },
{ am: 0, bm: 1, max: 5, fmt: (v) => Math.round(v).toString(), suffix: '%', dir: 'lower' },
{ am: 27.7, bm: 0, max: 30, fmt: (v) => v.toFixed(1), suffix: '%', dir: 'higher', prefix: '+' }];


function CountUp({ to, fmt, suffix = '', prefix = '', active, duration = 1200 }) {
  const [v, setV] = React.useState(0);
  const startedRef = React.useRef(false);
  React.useEffect(() => {
    if (!active || startedRef.current) return;
    startedRef.current = true;
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const t = Math.min(1, (now - start) / duration);
      // easeOutCubic
      const eased = 1 - Math.pow(1 - t, 3);
      setV(to * eased);
      if (t < 1) raf = requestAnimationFrame(tick);else
      setV(to);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active, to, duration]);
  return <span>{prefix}{fmt(v)}{suffix}</span>;
}

function KPIs() {
  const ref = React.useRef(null);
  const [active, setActive] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setActive(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.25 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  return (
    <div ref={ref} style={{
      padding: '40px 24px 32px', background: AM.creamSoft
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: AM.goldSoft, letterSpacing: 2,
        textTransform: 'uppercase'
      }}>
        {T('Resultados vs Industria', 'Results vs Industry')}
      </div>
      <div style={{
        marginTop: 14,
        fontFamily: 'Cormorant Garamond, serif',
        fontSize: 30, color: AM.ink, lineHeight: 1.05, fontWeight: 400
      }}>
        {T(<>Datos verificables.<br /><span style={{ fontStyle: 'italic', color: AM.goldSoft }}>No promesas</span>.</>, <>Verifiable data.<br /><span style={{ fontStyle: 'italic', color: AM.goldSoft }}>No promises</span>.</>)}
      </div>

      {/* Leyenda */}
      <div style={{
        marginTop: 18, display: 'flex', gap: 16,
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9, letterSpacing: 0.8, textTransform: 'uppercase'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 2, background: AM.ink }} />
          <span style={{ color: 'rgba(10,10,10,0.7)' }}>AM Tulum</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <div style={{ width: 10, height: 10, borderRadius: 2, background: 'rgba(10,10,10,0.18)' }} />
          <span style={{ color: 'rgba(10,10,10,0.5)' }}>{T('Industria', 'Industry')}</span>
        </div>
      </div>

      <div style={{ marginTop: 16 }}>
        {COPY.kpis.map((k, i) => {
          const d = KPI_DATA[i];
          const amPct = d.am / d.max * 100;
          const bmPct = d.bm / d.max * 100;
          // Para "lower is better" (cancelaciones), AM se ve verde aún siendo barra corta
          return (
            <div key={i} style={{
              padding: '20px 0',
              borderTop: '0.5px solid rgba(10,10,10,0.1)',
              borderBottom: i === COPY.kpis.length - 1 ? '0.5px solid rgba(10,10,10,0.1)' : 'none'
            }}>
              {/* Label + valor grande */}
              <div style={{
                display: 'flex', justifyContent: 'space-between',
                alignItems: 'baseline', gap: 12
              }}>
                <div style={{
                  flex: 1, color: AM.ink, fontSize: 13, fontWeight: 500,
                  lineHeight: 1.3
                }}>{k.l}</div>
                <div style={{
                  fontFamily: 'Cormorant Garamond, serif',
                  fontSize: 30, color: AM.ink, lineHeight: 1,
                  fontWeight: 500, fontVariantNumeric: 'tabular-nums'
                }}>
                  <CountUp
                    to={d.am}
                    fmt={d.fmt}
                    suffix={d.suffix}
                    prefix={d.prefix || ''}
                    active={active}
                    duration={1100 + i * 150} />
                  
                </div>
              </div>

              {/* Barras comparativas */}
              <div style={{ marginTop: 12 }}>
                {/* AM bar */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8,
                  marginBottom: 6
                }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 8.5, letterSpacing: 0.6,
                    color: AM.ink, width: 30, textAlign: 'right',
                    textTransform: 'uppercase'
                  }}>AM</div>
                  <div style={{
                    flex: 1, height: 6, background: 'rgba(10,10,10,0.06)',
                    borderRadius: 999, overflow: 'hidden', position: 'relative'
                  }}>
                    <div style={{
                      width: active ? `${amPct}%` : '0%',
                      height: '100%',
                      background: d.dir === 'lower' && d.am < d.bm ?
                      'linear-gradient(90deg, #2d5a3a 0%, #4a7c5a 100%)' :
                      `linear-gradient(90deg, ${AM.ink} 0%, ${AM.gold} 100%)`,
                      borderRadius: 999,
                      transition: `width 1100ms ${i * 150 + 200}ms cubic-bezier(.2,.7,.2,1)`
                    }} />
                  </div>
                </div>
                {/* Benchmark bar */}
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 8
                }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace',
                    fontSize: 8.5, letterSpacing: 0.6,
                    color: 'rgba(10,10,10,0.45)', width: 30, textAlign: 'right',
                    textTransform: 'uppercase'
                  }}>IND</div>
                  <div style={{
                    flex: 1, height: 6, background: 'rgba(10,10,10,0.06)',
                    borderRadius: 999, overflow: 'hidden'
                  }}>
                    <div style={{
                      width: active ? `${bmPct}%` : '0%',
                      height: '100%',
                      background: 'rgba(10,10,10,0.22)',
                      borderRadius: 999,
                      transition: `width 1100ms ${i * 150 + 350}ms cubic-bezier(.2,.7,.2,1)`
                    }} />
                  </div>
                </div>
              </div>

              <div style={{
                marginTop: 8, fontSize: 10,
                color: 'rgba(10,10,10,0.45)',
                fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.4
              }}>{k.b}</div>
            </div>);

        })}
      </div>

      <div style={{
        marginTop: 22, padding: '16px 18px', borderRadius: 14,
        background: 'rgba(201,169,97,0.12)',
        border: '0.5px solid rgba(201,169,97,0.3)',
        fontSize: 12.5, color: AM.ink, lineHeight: 1.55
      }}>
        {T(<><span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 16, fontStyle: 'italic' }}>93%</span> de huéspedes nos califican <span style={{ color: AM.goldSoft, fontWeight: 500 }}>«Altamente Satisfechos»</span>.</>, <><span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 16, fontStyle: 'italic' }}>93%</span> of guests rate us <span style={{ color: AM.goldSoft, fontWeight: 500 }}>«Highly Satisfied»</span>.</>)}
        <div style={{
          marginTop: 8, fontSize: 9.5, color: 'rgba(10,10,10,0.45)',
          fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.5
        }}>{T('FUENTE: AIRBNB · JUL 2025', 'SOURCE: AIRBNB · JUL 2025')}</div>
      </div>
    </div>);

}

// ─── Decade strip ───────────────────────────────────────
function DecadeStrip() {
  return (
    <div style={{
      padding: '32px 24px 40px', background: AM.cream
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: AM.goldSoft, letterSpacing: 2,
        textTransform: 'uppercase'
      }}>
        {T('Una década en números', 'A decade in numbers')}
      </div>

      <div style={{
        marginTop: 18,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1,
        background: 'rgba(10,10,10,0.1)',
        border: '0.5px solid rgba(10,10,10,0.1)',
        borderRadius: 14, overflow: 'hidden'
      }}>
        {COPY.decade.map((s, i) =>
        <div key={i} style={{
          padding: '24px 16px', textAlign: 'center',
          background: AM.cream
        }}>
            <div style={{
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 36, color: AM.ink, lineHeight: 1, fontWeight: 500
          }}>{s.v}</div>
            <div style={{
            marginTop: 8, fontSize: 10, color: 'rgba(10,10,10,0.5)',
            letterSpacing: 1, textTransform: 'uppercase'
          }}>{s.l}</div>
          </div>
        )}
      </div>
    </div>);

}

// ─── Contact ─────────────────────────────────────────────
function Contact() {
  return (
    <div style={{
      padding: '40px 24px 24px', background: AM.ink, color: AM.cream
    }}>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 10, color: AM.gold, letterSpacing: 2,
        textTransform: 'uppercase'
      }}>
        {T('Habla con un asesor', 'Talk to an advisor')}
      </div>
      <div style={{
        marginTop: 14,
        fontFamily: 'Cormorant Garamond, serif',
        fontSize: 32, color: AM.cream, lineHeight: 1.05, fontWeight: 400
      }}>
        {T(<>Cuéntanos de<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>tu propiedad</span>.</>, <>Tell us about<br /><span style={{ fontStyle: 'italic', color: AM.gold }}>your property</span>.</>)}
      </div>
      <div style={{
        marginTop: 14, fontSize: 13.5, color: 'rgba(245,241,232,0.65)',
        lineHeight: 1.5
      }}>
        {T(<>Respuesta en menos de 30 minutos.<br />Sin compromiso, auditoría gratuita.</>, <>Response in under 30 minutes.<br />No commitment, free audit.</>)}
      </div>

      {/* Audit checklist */}
      <div style={{
        marginTop: 24, padding: 20, borderRadius: 16,
        background: 'rgba(245,241,232,0.04)',
        border: '0.5px solid rgba(245,241,232,0.08)'
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 9.5, color: AM.gold, letterSpacing: 1.5,
          textTransform: 'uppercase'
        }}>
          {T('Qué incluye la auditoría', "What's included in the audit")}
        </div>
        <div style={{ marginTop: 12 }}>
          {(window.__amLang === 'en' ? [
          'Visit and improvement proposal',
          'Inventory and furnishing',
          'Professional photography',
          '30-day launch plan'] :
          [
          'Visita y propuesta de mejoras',
          'Inventario y equipamiento',
          'Fotografías profesionales',
          'Plan de lanzamiento en 30 días']).
          map((it, i) =>
          <div key={i} style={{
            padding: '8px 0', display: 'flex', gap: 10, alignItems: 'flex-start',
            fontSize: 12.5, color: 'rgba(245,241,232,0.78)'
          }}>
              <span style={{ color: AM.gold, marginTop: 2, flexShrink: 0 }}>·</span>
              {it}
            </div>
          )}
        </div>
      </div>

    </div>);

}

// ─── Footer ──────────────────────────────────────────────
function Footer() {
  return (
    <div style={{
      padding: '28px 24px 110px', background: AM.ink, color: AM.cream,
      borderTop: '0.5px solid rgba(245,241,232,0.08)'
    }}>
      {/* Airbnb CTA — botón largo cream arriba de los íconos sociales */}
      <a href="https://www.airbnb.mx/p/amtulumproperties" target="_blank" rel="noopener noreferrer" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
        padding: '14px 16px', borderRadius: 12, marginBottom: 22,
        background: AM.cream, color: AM.ink, textDecoration: 'none',
        fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 600,
        letterSpacing: 1, textTransform: 'uppercase'
      }}>
        <svg width="14" height="14" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
          <path d="M16 1c-3.5 0-6.5 2.7-7 6.2-.1.6-.1 1.7 0 2.4.3 1.7 1.4 4 3 6.6 1.2 1.9 2.9 4.2 3.4 4.7l.2.2.2-.2c.5-.5 2.2-2.8 3.4-4.7 1.6-2.6 2.7-4.9 3-6.6.1-.7.1-1.8 0-2.4C22.5 3.7 19.5 1 16 1zm0 10.4c-1.7 0-3.1-1.4-3.1-3.1S14.3 5.2 16 5.2s3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
        </svg>
        {T('Reservar en Airbnb', 'Book on Airbnb')}
      </a>

      {/* Social icons — Opción C: cream sutil + WA verde destacado */}
      <div style={{
        display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8
      }}>
        {[
          {
            href: COPY.contact.instagramHref, label: 'Instagram', external: true,
            icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="3" width="18" height="18" rx="5" />
              <circle cx="12" cy="12" r="4" />
              <circle cx="17.5" cy="6.5" r="0.9" fill="currentColor" stroke="none" />
            </svg>,
            highlight: false
          },
          {
            href: COPY.contact.facebookHref, label: 'Facebook', external: true,
            icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M13.5 22v-8h2.7l.4-3.2h-3.1V8.7c0-.9.3-1.6 1.6-1.6h1.7V4.2c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.5-4 4.1v2.6H7.7V14h2.7v8h3.1z" />
            </svg>,
            highlight: false
          },
          {
            href: `mailto:${COPY.contact.email}`, label: 'Email', external: false,
            icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
              <rect x="3" y="5" width="18" height="14" rx="2" />
              <path d="M3 7l9 6 9-6" />
            </svg>,
            highlight: false
          },
          {
            href: COPY.contact.waHref, label: 'WhatsApp', external: true,
            icon: <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.611-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12.04 21.785h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.889-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.886 9.884" />
            </svg>,
            highlight: true
          }
        ].map(b =>
          <a key={b.label}
            href={b.href}
            {...(b.external ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
            aria-label={b.label}
            style={{
              flex: 1,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
              textDecoration: 'none'
            }}>
            <div style={{
              width: 64, height: 64, borderRadius: 999,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              background: b.highlight ? '#25d366' : 'rgba(245,241,232,0.06)',
              border: b.highlight ? 'none' : '0.5px solid rgba(201,169,97,0.28)',
              color: b.highlight ? '#fff' : AM.cream,
              boxShadow: b.highlight ? '0 8px 24px rgba(37,211,102,0.3)' : 'none',
              transition: 'all 0.3s ease'
            }}>
              {b.icon}
            </div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 9, letterSpacing: 1.2, textTransform: 'uppercase',
              color: b.highlight ? AM.gold : 'rgba(245,241,232,0.45)'
            }}>
              {b.label}
            </div>
          </a>
        )}
      </div>
    </div>);

}

// ─── Nav Drawer (hamburger menu) ────────────────────────
function NavDrawer({ open, onClose, onNav }) {
  const items = [
  { id: 'home', label: T('Inicio', 'Home') },
  { id: 'services', label: T('Servicios', 'Services') },
  { id: 'properties', label: T('Propiedades', 'Properties') },
  { id: 'contact', label: T('Contacto', 'Contact') }];

  return (
    <>
      <div onClick={onClose} style={{
        position: 'absolute', inset: 0,
        background: open ? 'rgba(10,10,10,0.55)' : 'transparent',
        backdropFilter: open ? 'blur(4px)' : 'none',
        WebkitBackdropFilter: open ? 'blur(4px)' : 'none',
        opacity: open ? 1 : 0,
        pointerEvents: open ? 'auto' : 'none',
        transition: 'opacity 0.3s ease',
        zIndex: 90
      }} />
      <div style={{
        pointerEvents: open ? 'auto' : 'none',
        visibility: open ? 'visible' : 'hidden',
        position: 'absolute', top: 0, right: 0,
        width: 280, maxWidth: '85%',
        background: AM.ink, color: AM.cream,
        transform: open ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 0.35s cubic-bezier(.4,0,.2,1)',
        zIndex: 91,
        padding: 'calc(env(safe-area-inset-top, 24px) + 24px) 22px 24px',
        display: 'flex', flexDirection: 'column',
        borderBottomLeftRadius: 24,
        boxShadow: '-20px 20px 60px rgba(0,0,0,0.5)'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <Logo size={32} color={AM.cream} />
          <button onClick={onClose} aria-label={T('Cerrar', 'Close')} style={{
            width: 36, height: 36, borderRadius: 999, padding: 0,
            background: 'rgba(245,241,232,0.08)', border: '0.5px solid rgba(245,241,232,0.15)',
            color: AM.cream, cursor: 'pointer',
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
              <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
            </svg>
          </button>
        </div>
        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 2 }}>
          {items.map((it, i) =>
          <button key={it.id} onClick={() => onNav(it.id)} style={{
            textAlign: 'left', padding: '14px 0',
            background: 'none', border: 'none',
            borderBottom: i === items.length - 1 ? 'none' : '0.5px solid rgba(245,241,232,0.1)',
            color: AM.cream, cursor: 'pointer',
            fontFamily: 'Inter, sans-serif',
            fontSize: 11.5, fontWeight: 600,
            letterSpacing: 1, textTransform: 'uppercase'
          }}>
              {it.label}
            </button>
          )}
        </div>
        <div style={{ height: 18 }} />
        <a href="https://www.airbnb.mx/p/amtulumproperties" target="_blank" rel="noopener noreferrer" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '12px 16px', borderRadius: 12, marginBottom: 8,
          background: AM.cream, color: AM.ink, textDecoration: 'none',
          fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 600,
          letterSpacing: 1, textTransform: 'uppercase'
        }}>
          <svg width="14" height="14" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
            <path d="M16 1c-3.5 0-6.5 2.7-7 6.2-.1.6-.1 1.7 0 2.4.3 1.7 1.4 4 3 6.6 1.2 1.9 2.9 4.2 3.4 4.7l.2.2.2-.2c.5-.5 2.2-2.8 3.4-4.7 1.6-2.6 2.7-4.9 3-6.6.1-.7.1-1.8 0-2.4C22.5 3.7 19.5 1 16 1zm0 10.4c-1.7 0-3.1-1.4-3.1-3.1S14.3 5.2 16 5.2s3.1 1.4 3.1 3.1-1.4 3.1-3.1 3.1z" />
          </svg>
          {T('Reservar en Airbnb', 'Book on Airbnb')}
        </a>
        <a href={COPY.contact.waHref} target="_blank" rel="noopener noreferrer" style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '12px 16px', borderRadius: 12,
          background: '#25d366', color: '#fff', textDecoration: 'none',
          fontFamily: 'Inter, sans-serif', fontSize: 11.5, fontWeight: 600,
          letterSpacing: 1, textTransform: 'uppercase'
        }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413Z" />
          </svg>
          {T('Hablar por WhatsApp', 'Chat on WhatsApp')}
        </a>
      </div>
    </>);

}

// ─── Sticky WhatsApp CTA — floats above bottom nav ────────
function StickyCTA() {
  return (
    <div style={{
      position: 'absolute', bottom: 96, left: 16, right: 16,
      display: 'flex', justifyContent: 'center', zIndex: 40,
      pointerEvents: 'none'
    }}>
      <a href={COPY.contact.waHref} target="_blank" rel="noopener noreferrer" style={{
        pointerEvents: 'auto',
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '13px 22px 13px 26px',
        background: AM.gold,
        border: 'none', borderRadius: 999,
        fontFamily: 'Inter, sans-serif', textDecoration: 'none',
        fontSize: 12.5, fontWeight: 600, letterSpacing: 1,
        textTransform: 'uppercase', color: AM.ink, cursor: 'pointer',
        boxShadow: '0 16px 40px rgba(201,169,97,0.45), 0 4px 12px rgba(0,0,0,0.2)'
      }}>
        <span style={{
          width: 18, height: 18, borderRadius: 999,
          background: '#25d366',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
            <path d="M3.5 20.5l1.4-4.5A8.5 8.5 0 1 1 8 19.6l-4.5.9z" stroke="#fff" strokeWidth="2" strokeLinejoin="round" />
          </svg>
        </span>
        {T('Gestionar mi propiedad', 'Manage my property')}
      </a>
    </div>);

}

// ─── Bottom Nav ──────────────────────────────────────────
function BottomNav({ active, onChange }) {
  const items = [
  { id: 'home', icon: Ico.home, label: T('Inicio', 'Home') },
  { id: 'services', icon: Ico.compass, label: T('Servicios', 'Services') },
  { id: 'properties', icon: Ico.star, label: T('Propiedades', 'Properties') },
  { id: 'contact', icon: Ico.user, label: T('Contacto', 'Contact') }];


  return (
    <div style={{
      position: 'absolute', bottom: 0, left: 0, right: 0,
      height: 84, padding: '8px 4px 28px',
      background: 'rgba(10,10,10,0.85)',
      backdropFilter: 'blur(30px) saturate(180%)',
      WebkitBackdropFilter: 'blur(30px) saturate(180%)',
      borderTop: '0.5px solid rgba(255,255,255,0.08)',
      display: 'flex', justifyContent: 'space-around', alignItems: 'center',
      zIndex: 35
    }}>
      {items.map((it) => {
        const isActive = active === it.id;
        const c = isActive ? AM.gold : 'rgba(245,241,232,0.5)';
        return (
          <button key={it.id} onClick={() => onChange(it.id)}
          style={{
            background: 'none', border: 'none',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            cursor: 'pointer', padding: '6px 8px',
            flex: 1
          }}>
            {it.icon(c, 21)}
            <span style={{
              fontSize: 9.5, color: c, fontWeight: 500, letterSpacing: 0.3
            }}>{it.label}</span>
          </button>);

      })}
    </div>);

}

// ─── Component (mounted by responsive-app or by Mobile v2.html standalone) ────
window.MobileApp = V2App;
window.V2App = V2App;

if (!window.__AM_RESPONSIVE__) {
  ReactDOM.createRoot(document.getElementById('root')).render(<V2App />);
}
})();
