(function(){
// desktop-app.jsx — AM Tulum Desktop v2
// Paleta black/cream/gold. Layout 1440px wide.
// Mismo data + tokens que el mobile v2.

const { useState, useEffect, useRef } = React;

// ─── Section wrapper for scroll anchoring ─────────
function Section({ id, children, dark = false, padded = true, style = {} }) {
  return (
    <section id={id} style={{
      background: dark ? AM.ink : AM.cream,
      color: dark ? AM.cream : AM.ink,
      padding: padded ? '88px 0' : 0,
      position: 'relative',
      ...style
    }}>
      {children}
    </section>);

}

function Container({ children, style = {}, refProp }) {
  return (
    <div ref={refProp} style={{
      maxWidth: 1280, margin: '0 auto', padding: '0 64px', ...style
    }}>{children}</div>);

}

function SectionLabel({ num, total, children, color }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', gap: 12,
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 11, letterSpacing: 2.5, textTransform: 'uppercase',
      color: color || AM.gold, fontWeight: 500
    }}>
      <span style={{ fontSize: 13 }}>{num}</span>
      <span style={{
        width: 32, height: 1, background: 'currentColor', opacity: 0.4
      }} />
      <span>{children}</span>
      {total && <span style={{ opacity: 0.5, marginLeft: 4 }}>/ {total}</span>}
    </div>);

}

// ─── Top Nav ───────────────────────────────────────
function Nav({ lang, setLang, ui }) {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  { id: 'servicios', label: ui.nav.servicios },
  { id: 'beneficios', label: ui.nav.beneficios },
  { id: 'proceso', label: ui.nav.proceso },
  { id: 'portafolio', label: ui.nav.portafolio },
  { id: 'contacto', label: ui.nav.contacto }];


  const linkColor = scrolled ? AM.ink : 'rgba(255,255,255,0.85)';
  const dimColor = scrolled ? 'rgba(10,10,10,0.4)' : 'rgba(255,255,255,0.5)';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      padding: scrolled ? '14px 0' : '24px 0',
      background: scrolled ? 'rgba(245,241,232,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'none',
      borderBottom: scrolled ? '0.5px solid rgba(10,10,10,0.08)' : '0.5px solid transparent',
      transition: 'all 0.3s'
    }}>
      <Container style={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center',
        gap: 32,
        padding: '0 48px'
      }}>
        {/* Left: Logo */}
        <Logo size={32} color={scrolled ? AM.ink : '#fff'} compact={false} shadow={!scrolled} />

        {/* Center: Links */}
        <div style={{
          display: 'flex', gap: 28, alignItems: 'center', justifyContent: 'center'
        }}>
          {links.map((l) =>
          <a key={l.id} href={`#${l.id}`} style={{
            fontSize: 12.5, fontWeight: 400, letterSpacing: 0.3,
            color: linkColor,
            transition: 'color 0.2s',
            whiteSpace: 'nowrap'
          }}>{l.label}</a>
          )}
        </div>

        {/* Right: lang + CTAs */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          {/* ES / EN toggle */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 4,
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 10.5, letterSpacing: 1,
            marginRight: 4
          }}>
            <button onClick={() => setLang('es')} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '2px 4px',
              color: lang === 'es' ? AM.gold : dimColor,
              fontWeight: lang === 'es' ? 600 : 400,
              borderBottom: lang === 'es' ? `1px solid ${AM.gold}` : '1px solid transparent',
              fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit'
            }}>ES</button>
            <span style={{ color: dimColor, opacity: 0.6 }}>·</span>
            <button onClick={() => setLang('en')} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '2px 4px',
              color: lang === 'en' ? AM.gold : dimColor,
              fontWeight: lang === 'en' ? 600 : 400,
              borderBottom: lang === 'en' ? `1px solid ${AM.gold}` : '1px solid transparent',
              fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit'
            }}>EN</button>
          </div>

          <a href="https://www.airbnb.mx/p/amtulumproperties" target="_blank" rel="noopener noreferrer" style={{
            padding: '9px 14px', borderRadius: 999,
            background: 'transparent',
            border: scrolled ? '0.5px solid rgba(10,10,10,0.25)' : '0.5px solid rgba(255,255,255,0.4)',
            color: linkColor,
            fontFamily: 'Inter, sans-serif',
            fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
            textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', gap: 6,
            whiteSpace: 'nowrap'
          }}>
            <svg width="11" height="11" 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>
            {lang === 'en' ? 'Book' : 'Reservar'}
          </a>
          <a href="#contacto" style={{
            padding: '9px 16px', borderRadius: 999,
            background: AM.gold, color: AM.ink,
            fontFamily: 'Inter, sans-serif',
            fontSize: 11, fontWeight: 600, letterSpacing: 0.8,
            textTransform: 'uppercase',
            boxShadow: '0 8px 24px rgba(201,169,97,0.35)',
            whiteSpace: 'nowrap'
          }}>{ui.nav.cta} →</a>
        </div>
      </Container>
    </nav>);

}

// ─── Hero ──────────────────────────────────────────
function Hero({ copy, ui }) {
  // Split title on the italic phrase so we can color it.
  const titleEs = ui === UI.es;
  return (
    <section style={{
      position: 'relative', height: '100vh', minHeight: 720,
      backgroundImage: `linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.4) 30%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.92) 100%), ${bgUrl('redesign/img/hero.jpg')}`,
      backgroundSize: 'cover', backgroundPosition: 'center',
      color: '#fff', overflow: 'hidden'
    }}>
      <Container style={{
        position: 'relative', height: '100%',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'center', alignItems: 'center',
        textAlign: 'center'
      }}>
        <h1 style={{
          fontFamily: 'Cormorant Garamond, serif',
          fontSize: 'clamp(72px, 9vw, 132px)', lineHeight: 0.95, fontWeight: 400,
          letterSpacing: -2,
          maxWidth: 980,
          textShadow: '0 2px 16px rgba(0,0,0,0.7), 0 6px 48px rgba(0,0,0,0.5)'
        }}>
          {titleEs ?
          <>Tu propiedad en Tulum,<br />cuidada <span style={{ fontStyle: 'italic', color: AM.gold }}>como nuestra</span>.</> :

          <>Your Tulum home,<br />cared for <span style={{ fontStyle: 'italic', color: AM.gold }}>like our own</span>.</>
          }
        </h1>

        <p style={{
          marginTop: 32, fontSize: 18, lineHeight: 1.55,
          color: 'rgba(255,255,255,0.92)', maxWidth: 560, fontWeight: 300,
          textShadow: '0 1px 10px rgba(0,0,0,0.6)'
        }}>
          {(copy.hero.sub || '').split('.')[0]}.
        </p>

        {/* Credenciales: Superhost destacado + métricas inline */}
        <style>{`
          @keyframes amHeroChipIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
          }
          .am-hero-chip { opacity: 0; animation: amHeroChipIn 0.6s ease-out forwards; }
        `}</style>

        {/* Chip Superhost */}
        <div className="am-hero-chip" style={{
          marginTop: 28, display: 'inline-flex', alignItems: 'center', gap: 10,
          padding: '11px 18px 11px 14px', borderRadius: 999,
          background: 'rgba(201,169,97,0.22)',
          backdropFilter: 'blur(16px)',
          WebkitBackdropFilter: 'blur(16px)',
          border: '0.5px solid rgba(201,169,97,0.55)',
          animationDelay: '0.15s'
        }}>
          <svg width="18" height="18" 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: 13, color: '#fff', fontWeight: 500, letterSpacing: 0.4
          }}>
            Superhost
            <span style={{ opacity: 0.6, fontWeight: 400, marginLeft: 6 }}>
              · {titleEs ? 'desde 2019' : 'since 2019'}
            </span>
          </span>
        </div>

        {/* Scroll indicator */}
        <div style={{
          position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: 1.5, color: 'rgba(255,255,255,0.5)',
          textTransform: 'uppercase',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8
        }}>
          {ui.hero.scroll}
          <div style={{
            width: 1, height: 40, background: 'rgba(255,255,255,0.4)'
          }} />
        </div>
      </Container>

      {/* Stats card — anchored at hero bottom */}
      <Container style={{
        position: 'absolute', bottom: 32, left: 0, right: 0,
        zIndex: 20
      }}>
        <div style={{
          background: 'rgba(255,255,255,0.97)',
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          borderRadius: 20,
          padding: '32px 32px',
          boxShadow: '0 30px 80px rgba(0,0,0,0.35), 0 4px 16px rgba(0,0,0,0.15)',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 0
        }}>
          {[
          ...copy.stats,
          { v: '87', l: ui.misc.propertiesInOp }].
          map((s, i, arr) =>
          <div key={i} style={{
            padding: '0 24px',
            borderRight: i < arr.length - 1 ? '0.5px solid rgba(10,10,10,0.1)' : 'none'
          }}>
              <div style={{
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 52, color: AM.ink, lineHeight: 1, fontWeight: 500,
              letterSpacing: -1
            }}>{s.v}</div>
              <div style={{
              marginTop: 12, fontSize: 11, color: 'rgba(10,10,10,0.55)',
              letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 500,
              lineHeight: 1.3
            }}>{s.l}</div>
            </div>
          )}
        </div>
      </Container>
    </section>);

}

// ─── Intro / Value Props — Antes/Después interactivo ──
function Intro({ ui }) {
  const [mode, setMode] = React.useState('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 titleEs = (ui.intro.eyebrow || '').includes('PROPIETARIOS');
  const items = titleEs ? [
  { 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' }] :
  [
  { 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: 'Static pricing · lost season', after: 'Daily dynamic pricing' }];


  return (
    <Section padded={false} style={{
      paddingTop: 220, paddingBottom: 120, background: AM.cream
    }}>
      <Container refProp={ref} style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
        alignItems: 'start'
      }}>
        <div>
          <SectionLabel>{ui.intro.eyebrow}</SectionLabel>
          <h2 style={{
            marginTop: 24,
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 'clamp(48px, 5vw, 76px)', lineHeight: 1.02, fontWeight: 400,
            color: AM.ink, letterSpacing: -1.5
          }}>
            {ui.intro.title[0]}
            <br />{ui.intro.title[1]}
            <br /><span style={{ fontStyle: 'italic', color: AM.goldSoft }}>{ui.intro.title[2]}</span>.
          </h2>
          <p style={{
            marginTop: 28, fontSize: 17, lineHeight: 1.6,
            color: 'rgba(10,10,10,0.65)', fontWeight: 300, maxWidth: 440
          }}>
            {titleEs ? 'Esto es lo que cambia con AM Tulum.' : 'This is what changes with AM Tulum.'}
          </p>
        </div>

        <div style={{ paddingTop: 40 }}>
          {/* Toggle */}
          <div style={{
            display: 'inline-flex', borderRadius: 999,
            background: 'rgba(10,10,10,0.06)', padding: 5,
            border: '0.5px solid rgba(10,10,10,0.08)'
          }}>
            {[
            { id: 'before', l: titleEs ? 'Sin AM' : 'Without AM' },
            { id: 'after', l: titleEs ? 'Con AM Tulum' : 'With AM Tulum' }].
            map((t) =>
            <button key={t.id} onClick={() => setMode(t.id)} style={{
              padding: '11px 22px', 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: 12.5, fontWeight: 600, letterSpacing: 0.6,
              cursor: 'pointer', transition: 'all 0.25s'
            }}>{t.l}</button>
            )}
          </div>

          {/* Lista */}
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {items.map((it, i) => {
              const isAfter = mode === 'after';
              return (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 14,
                  padding: '18px 22px', borderRadius: 16,
                  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 6px 20px rgba(10,10,10,0.06)' : 'none',
                  opacity: visible ? 1 : 0,
                  transform: visible ? 'translateY(0)' : 'translateY(14px)',
                  transition: `opacity 0.55s ease ${i * 70}ms, transform 0.55s ease ${i * 70}ms, background 0.3s, border 0.3s, box-shadow 0.3s`
                }}>
                  <div style={{
                    width: 26, height: 26, 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="13" height="13" 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="11" height="11" 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: 15.5, lineHeight: 1.5,
                    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>
      </Container>
    </Section>);

}

// ─── Services ─────────────────────────────────────
// Service icons (minimal line, 1px stroke) — index aligned with copy.services
const SVC_ICONS = [
// 01 Marketing — megaphone / signal
(c) =>
<svg width="42" height="42" 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>,

// 02 Dynamic pricing — line chart with arrow up
(c) =>
<svg width="42" height="42" 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>,

// 03 24/7 hospitality — clock with concierge bell
(c) =>
<svg width="42" height="42" 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>,

// 04 Cleaning & upkeep — broom / sparkle
(c) =>
<svg width="42" height="42" 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>,

// 05 Accounting — ledger / receipt
(c) =>
<svg width="42" height="42" 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>,

// 06 Monthly reports — document with chart
(c) =>
<svg width="42" height="42" 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({ copy, ui }) {
  const [hover, setHover] = useState(-1);
  return (
    <Section id="servicios" dark={true} padded={false} style={{ paddingTop: 120, paddingBottom: 120 }}>
      <Container>
        <div style={{ marginBottom: 72 }}>
          <SectionLabel color={AM.gold}>{ui.services.eyebrow}</SectionLabel>
          <h2 style={{
            marginTop: 20,
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 'clamp(40px, 4vw, 60px)', lineHeight: 1.02, fontWeight: 400,
            color: AM.cream, letterSpacing: -1.5
          }}>
            {ui.services.title} <span style={{ fontStyle: 'italic', color: AM.gold }}>{ui.services.titleItalic}</span>.
          </h2>
        </div>

        {/* 6 servicios en una sola fila — icono minimal + label */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
          borderTop: '0.5px solid rgba(245,241,232,0.14)',
          borderBottom: '0.5px solid rgba(245,241,232,0.14)'
        }}>
          {copy.services.map((s, i) => {
            const Icon = SVC_ICONS[i];
            const active = hover === i;
            return (
              <div key={i}
              onMouseEnter={() => setHover(i)}
              onMouseLeave={() => setHover(-1)}
              style={{
                padding: '56px 20px 44px',
                borderRight: i < 5 ? '0.5px solid rgba(245,241,232,0.14)' : 'none',
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                textAlign: 'center', gap: 24,
                transition: 'background 0.4s',
                background: active ? 'rgba(199,162,93,0.04)' : 'transparent',
                cursor: 'default'
              }}>
                
                {/* number badge */}
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace',
                  fontSize: 10, letterSpacing: 1.8,
                  color: active ? AM.gold : 'rgba(199,162,93,0.55)',
                  transition: 'color 0.3s'
                }}>0{i + 1}</div>

                {/* icon */}
                <div style={{
                  transform: active ? 'translateY(-2px)' : 'translateY(0)',
                  transition: 'transform 0.4s ease'
                }}>
                  {Icon(active ? AM.gold : 'rgba(245,241,232,0.85)')}
                </div>

                {/* label */}
                <div style={{
                  fontFamily: 'Cormorant Garamond, serif',
                  fontSize: 19, lineHeight: 1.15, fontWeight: 400,
                  color: AM.cream, letterSpacing: -0.2,
                  minHeight: 44
                }}>{s.t}</div>
              </div>);

          })}
        </div>

        {/* footnote */}
        <div style={{
          marginTop: 28, textAlign: 'center',
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10.5, letterSpacing: 2, textTransform: 'uppercase',
          color: 'rgba(245,241,232,0.4)'
        }}>
          · {ui.services.body || 'Todo bajo un solo equipo'} ·
        </div>
      </Container>
    </Section>);

}

// ─── Benefits ─────────────────────────────────────
function Benefits({ copy, ui }) {
  return (
    <Section id="beneficios" padded={true}>
      <Container>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 100
        }}>
          <div style={{ position: 'sticky', top: 120, alignSelf: 'start' }}>
            <SectionLabel color={AM.goldSoft}>{ui.benefits.eyebrow}</SectionLabel>
            <h2 style={{
              marginTop: 24,
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 'clamp(44px, 4.5vw, 68px)', lineHeight: 1.08, fontWeight: 400,
              color: AM.ink, letterSpacing: -1.5
            }}>
              {ui.benefits.title[0]}
              <br />{ui.benefits.title[1]} <span style={{ fontStyle: 'italic', color: AM.goldSoft }}>{ui.benefits.titleItalic}</span>.
            </h2>
            {ui.benefits.body ?
            <p style={{
              marginTop: 40, fontSize: 15, lineHeight: 1.6,
              color: 'rgba(10,10,10,0.6)', fontWeight: 300, maxWidth: 380
            }}>
                {ui.benefits.body}
              </p> :
            null}
          </div>

          <div>
            {copy.benefits.map((it, i) =>
            <div key={i} style={{
              padding: '40px 0',
              borderTop: '0.5px solid rgba(10,10,10,0.15)',
              borderBottom: i === copy.benefits.length - 1 ? '0.5px solid rgba(10,10,10,0.15)' : 'none',
              display: 'grid', gridTemplateColumns: '60px 1fr', gap: 32,
              alignItems: 'start'
            }}>
                <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 13, color: AM.goldSoft, letterSpacing: 1, paddingTop: 8
              }}>{it.n}</div>
                <div>
                  <h3 style={{
                  fontFamily: 'Cormorant Garamond, serif',
                  fontSize: 38, color: AM.ink, lineHeight: 1.05, fontWeight: 400
                }}>{it.t}</h3>
                  <p style={{
                  marginTop: 16, fontSize: 16, lineHeight: 1.6,
                  color: 'rgba(10,10,10,0.65)', fontWeight: 300,
                  maxWidth: 540
                }}>{it.d}</p>
                </div>
              </div>
            )}
          </div>
        </div>
      </Container>
    </Section>);

}

// ─── Process ──────────────────────────────────────
function Process({ copy, ui }) {
  return (
    <Section id="proceso" padded={true} style={{ background: AM.creamSoft }}>
      <Container>
        <div style={{ marginBottom: 72 }}>
          <SectionLabel color={AM.goldSoft}>{ui.process.eyebrow}</SectionLabel>
          <h2 style={{
            marginTop: 24,
            fontFamily: 'Cormorant Garamond, serif',
            fontSize: 'clamp(48px, 5vw, 76px)', lineHeight: 1.02, fontWeight: 400,
            color: AM.ink, letterSpacing: -1.5
          }}>
            {ui.process.title} <span style={{ fontStyle: 'italic', color: AM.goldSoft }}>{ui.process.titleItalic}</span>.
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32,
          position: 'relative'
        }}>
          {/* Connecting line */}
          <div style={{
            position: 'absolute', top: 28, left: '12%', right: '12%', height: 1,
            background: 'rgba(168,136,74,0.3)', zIndex: 0
          }} />
          {copy.steps.map((s, i) =>
          <div key={i} style={{ position: 'relative', zIndex: 1 }}>
              <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: AM.cream,
              border: `1px solid ${AM.goldSoft}`,
              color: AM.goldSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Cormorant Garamond, serif', fontSize: 20,
              fontWeight: 500
            }}>{s.n}</div>
              <h3 style={{
              marginTop: 22,
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 26, color: AM.ink, lineHeight: 1.1, fontWeight: 400
            }}>{s.t}</h3>
              <p style={{
              marginTop: 12, fontSize: 14, lineHeight: 1.6,
              color: 'rgba(10,10,10,0.6)', fontWeight: 300
            }}>{s.d}</p>
            </div>
          )}
        </div>
      </Container>
    </Section>);

}

// ─── Properties ───────────────────────────────────
function Properties({ copy, ui }) {
  return (
    <Section id="portafolio" padded={true}>
      <Container>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
          marginBottom: 56
        }}>
          <div>
            <SectionLabel color={AM.goldSoft}>{ui.portfolio.eyebrow}</SectionLabel>
            <h2 style={{
              marginTop: 24,
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 'clamp(48px, 5vw, 76px)', lineHeight: 1.02, fontWeight: 400,
              color: AM.ink, letterSpacing: -1.5
            }}>
              {ui.portfolio.title} <span style={{ fontStyle: 'italic', color: AM.goldSoft }}>{ui.portfolio.titleItalic}</span>.
            </h2>
          </div>
          <p style={{
            fontSize: 15, color: 'rgba(10,10,10,0.6)',
            maxWidth: 320, lineHeight: 1.6, paddingBottom: 16
          }}>
            {ui.portfolio.body}
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16
        }}>
          {copy.properties.map((p, i) =>
          <a key={p.id} href={p.url} target="_blank" rel="noopener noreferrer"
          style={{
            borderRadius: 18, overflow: 'hidden',
            background: '#fff',
            boxShadow: '0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05)',
            cursor: 'pointer',
            transition: 'transform 0.3s, box-shadow 0.3s',
            textDecoration: 'none', color: 'inherit', display: 'block'
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-4px)';
            e.currentTarget.style.boxShadow = '0 1px 2px rgba(0,0,0,0.04), 0 16px 40px rgba(0,0,0,0.08)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.boxShadow = '0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05)';
          }}>
            
              <div style={{
              height: 360,
              backgroundImage: `url("${assetUrl(p.img)}")`,
              backgroundSize: 'cover', backgroundPosition: 'center'
            }}></div>
              <div style={{ padding: '20px 22px 22px' }}>
                <h3 style={{
                fontFamily: 'Cormorant Garamond, serif',
                fontSize: 26, color: AM.ink, lineHeight: 1, fontWeight: 500,
                margin: 0
              }}>{p.name}</h3>
              </div>
            </a>
          )}
        </div>
      </Container>
    </Section>);

}

// ─── KPIs ─────────────────────────────────────────
function KPIs({ copy, ui }) {
  return (
    <Section dark={true} padded={true}>
      <Container>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 100,
          alignItems: 'center', marginBottom: 72
        }}>
          <div>
            <SectionLabel color={AM.gold}>{ui.kpis.eyebrow}</SectionLabel>
            <h2 style={{
              marginTop: 24,
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 'clamp(48px, 5vw, 76px)', lineHeight: 1.02, fontWeight: 400,
              color: AM.cream, letterSpacing: -1.5
            }}>
              {ui.kpis.title}
              <br /><span style={{ fontStyle: 'italic', color: AM.gold }}>{ui.kpis.titleItalic}</span>.
            </h2>
          </div>
          <div style={{
            padding: '32px 36px', borderRadius: 16,
            background: 'rgba(201,169,97,0.08)',
            border: '0.5px solid rgba(201,169,97,0.25)'
          }}>
            <div style={{
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 60, color: AM.gold, lineHeight: 1, fontWeight: 500
            }}>93%</div>
            <p style={{
              marginTop: 14, fontSize: 15, color: AM.cream, lineHeight: 1.55,
              fontWeight: 300
            }}>
              {ui.kpis.highlightPre} <span style={{ color: AM.gold, fontWeight: 500 }}>{ui.kpis.highlightStrong}</span> {ui.kpis.highlightPost}
            </p>
            <div style={{
              marginTop: 14, fontSize: 9.5, color: 'rgba(245,241,232,0.45)',
              fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.6
            }}>{ui.kpis.source}</div>
          </div>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
          borderTop: '0.5px solid rgba(245,241,232,0.15)',
          borderBottom: '0.5px solid rgba(245,241,232,0.15)'
        }}>
          {copy.kpis.map((k, i, arr) =>
          <div key={i} style={{
            padding: '36px 28px',
            borderRight: i < arr.length - 1 ? '0.5px solid rgba(245,241,232,0.15)' : 'none'
          }}>
              <div style={{
              fontFamily: 'Cormorant Garamond, serif',
              fontSize: 64, color: AM.gold, lineHeight: 1, fontWeight: 500,
              letterSpacing: -1
            }}>{k.v}</div>
              <div style={{
              marginTop: 16, fontSize: 14, color: AM.cream, fontWeight: 500,
              lineHeight: 1.4
            }}>{k.l}</div>
              <div style={{
              marginTop: 8, fontSize: 11,
              color: 'rgba(245,241,232,0.45)',
              fontFamily: 'JetBrains Mono, monospace', letterSpacing: 0.4
            }}>{k.b}</div>
            </div>
          )}
        </div>

        {/* Decade strip removed — stats card in hero already covers headline numbers. */}
      </Container>
    </Section>);

}

// ─── Contact CTA ──────────────────────────────────
function Contact({ copy, ui }) {
  return (
    <Section id="contacto" padded={true}>
      <Container>
        <div style={{
          padding: '80px 64px', borderRadius: 24,
          background: AM.ink, color: AM.cream,
          position: 'relative', overflow: 'hidden',
          backgroundImage: `linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.8) 100%), ${bgUrl('redesign/img/hero.jpg')}`,
          backgroundSize: 'cover', backgroundPosition: 'center'
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80,
            alignItems: 'center'
          }}>
            <div>
              <SectionLabel color={AM.gold}>{ui.contact.eyebrow}</SectionLabel>
              <h2 style={{
                marginTop: 24,
                fontFamily: 'Cormorant Garamond, serif',
                fontSize: 'clamp(48px, 5vw, 80px)', lineHeight: 1.02, fontWeight: 400,
                color: AM.cream, letterSpacing: -1.5
              }}>
                {ui.contact.title}
                <br /><span style={{ fontStyle: 'italic', color: AM.gold }}>{ui.contact.titleItalic}</span>.
              </h2>
              <p style={{
                marginTop: 24, fontSize: 17, lineHeight: 1.6,
                color: 'rgba(245,241,232,0.7)', fontWeight: 300, maxWidth: 480
              }}>
                {ui.contact.body}
              </p>

              <div style={{ marginTop: 40, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href={copy.contact.waHref} target="_blank" rel="noopener" style={{
                  padding: '17px 28px', borderRadius: 999,
                  background: '#25d366', color: '#fff',
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 12.5, fontWeight: 600, letterSpacing: 1.2,
                  textTransform: 'uppercase',
                  display: 'inline-flex', alignItems: 'center', gap: 12,
                  boxShadow: '0 12px 32px rgba(37,211,102,0.4)',
                  textDecoration: 'none'
                }}>
                  <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>
                  {ui.contact.wa}
                  <span>→</span>
                </a>
                <a href={copy.contact.emailHref} style={{
                  padding: '17px 28px', borderRadius: 999,
                  background: 'transparent',
                  border: '0.5px solid rgba(245,241,232,0.35)',
                  color: AM.cream,
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 12.5, fontWeight: 500, letterSpacing: 1.2,
                  textTransform: 'uppercase',
                  textDecoration: 'none'
                }}>
                  {ui.contact.email}
                </a>
              </div>

              <div style={{
                marginTop: 32, fontFamily: 'JetBrains Mono, monospace',
                fontSize: 11, color: 'rgba(245,241,232,0.5)', letterSpacing: 0.6
              }}>
                {"\n"}
              </div>
            </div>

            <div style={{
              padding: 32, borderRadius: 16,
              background: 'rgba(245,241,232,0.04)',
              border: '0.5px solid rgba(245,241,232,0.1)',
              backdropFilter: 'blur(10px)'
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace',
                fontSize: 10.5, color: AM.gold, letterSpacing: 1.8,
                textTransform: 'uppercase'
              }}>
                {ui.contact.auditTitle}
              </div>
              <div style={{ marginTop: 24 }}>
                {ui.contact.audit.map((it, i, arr) =>
                <div key={i} style={{
                  padding: '16px 0',
                  borderBottom: i < arr.length - 1 ? '0.5px solid rgba(245,241,232,0.1)' : 'none',
                  display: 'flex', gap: 14, alignItems: 'flex-start'
                }}>
                    <div style={{
                    width: 22, height: 22, borderRadius: 999,
                    border: `1px solid ${AM.gold}`,
                    color: AM.gold,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10
                  }}>
                      {String(i + 1).padStart(2, '0')}
                    </div>
                    <div style={{
                    fontSize: 14, color: 'rgba(245,241,232,0.85)',
                    lineHeight: 1.5
                  }}>{it}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      </Container>
    </Section>);

}

// ─── Footer ───────────────────────────────────────
function Footer({ copy, ui }) {
  // Each entry: { text, href? } so we can render clickable links.
  const contactCol = {
    t: ui.footer.cols[2].t,
    l: [
    { text: copy.contact.wa, href: copy.contact.waHref },
    { text: copy.contact.email, href: copy.contact.emailHref },
    { text: ui.footer.loc }]

  };
  const navMap = {
    'Servicios': '#servicios', 'Comercialización': '#servicios', 'Hospitalidad': '#servicios', 'Limpieza': '#servicios', 'Mantenimiento': '#servicios',
    'Marketing': '#servicios', 'Hospitality': '#servicios', 'Cleaning': '#servicios', 'Maintenance': '#servicios',
    'Sobre nosotros': '#beneficios', 'About us': '#beneficios',
    'Portafolio': '#portafolio', 'Portfolio': '#portafolio',
    'Resultados': '#kpis', 'Results': '#kpis',
    'Proceso': '#proceso', 'Process': '#proceso'
  };
  const cols = [
  { t: ui.footer.cols[0].t, l: ui.footer.cols[0].l.map((x) => ({ text: x, href: navMap[x] || '#servicios' })) },
  { t: ui.footer.cols[1].t, l: ui.footer.cols[1].l.map((x) => ({ text: x, href: navMap[x] || '#contacto' })) },
  contactCol];

  return (
    <footer style={{
      padding: '64px 0 40px', background: AM.ink, color: AM.cream,
      borderTop: '0.5px solid rgba(245,241,232,0.08)'
    }}>
      <Container>
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 64,
          paddingBottom: 48,
          borderBottom: '0.5px solid rgba(245,241,232,0.1)'
        }}>
          <div>
            <div style={{ opacity: 0.55 }}>
              <Logo size={62} color={AM.cream} />
            </div>
            <p style={{
              marginTop: 20, fontSize: 13, color: 'rgba(245,241,232,0.55)',
              lineHeight: 1.6, fontWeight: 300, maxWidth: 320
            }}>
              {ui.footer.tagline}
            </p>
          </div>
          {cols.map((col, i) =>
          <div key={i}>
              <div style={{
              fontFamily: 'JetBrains Mono, monospace',
              fontSize: 10, color: AM.gold, letterSpacing: 1.5,
              textTransform: 'uppercase'
            }}>{col.t}</div>
              <div style={{ marginTop: 18 }}>
                {col.l.map((it, j) =>
              it.href ?
              <a
                key={j}
                href={it.href}
                target={it.href.startsWith('http') ? '_blank' : undefined}
                rel={it.href.startsWith('http') ? 'noopener' : undefined}
                style={{
                  display: 'block', padding: '6px 0', fontSize: 13.5,
                  color: 'rgba(245,241,232,0.7)', fontWeight: 300,
                  textDecoration: 'none', transition: 'color 0.2s'
                }}
                onMouseEnter={(e) => e.currentTarget.style.color = AM.gold}
                onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(245,241,232,0.7)'}>
                {it.text}</a> :

              <div key={j} style={{
                padding: '6px 0', fontSize: 13.5,
                color: 'rgba(245,241,232,0.7)', fontWeight: 300
              }}>{it.text}</div>

              )}
              </div>
              {/* Social icons under Contact column */}
              {i === 2 &&
              <div style={{ display: 'flex', gap: 10, marginTop: 20 }}>
                {[
                  {
                    href: COPY.contact.instagramHref, label: 'Instagram',
                    icon: (
                      <svg width="16" height="16" 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>
                    )
                  },
                  {
                    href: COPY.contact.facebookHref, label: 'Facebook',
                    icon: (
                      <svg width="16" height="16" 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>
                    )
                  }
                ].map(s =>
                  <a key={s.label} href={s.href} target="_blank" rel="noopener noreferrer"
                    aria-label={s.label}
                    style={{
                      width: 36, height: 36, borderRadius: 999,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      background: 'rgba(245,241,232,0.05)',
                      border: '0.5px solid rgba(201,169,97,0.25)',
                      color: 'rgba(245,241,232,0.7)', textDecoration: 'none',
                      transition: 'all 0.25s ease'
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.background = AM.gold;
                      e.currentTarget.style.color = AM.ink;
                      e.currentTarget.style.borderColor = AM.gold;
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.background = 'rgba(245,241,232,0.05)';
                      e.currentTarget.style.color = 'rgba(245,241,232,0.7)';
                      e.currentTarget.style.borderColor = 'rgba(201,169,97,0.25)';
                    }}>
                    {s.icon}
                  </a>
                )}
              </div>
              }
            </div>
          )}
        </div>

        <div style={{
          paddingTop: 32, display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', gap: 24
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace',
            fontSize: 10.5, color: 'rgba(245,241,232,0.4)', letterSpacing: 0.6
          }}>
            {ui.footer.rights}
          </div>

        </div>
      </Container>
    </footer>);

}

// ─── Sticky WhatsApp + Social ──────────────────────
function StickyWA() {
  return (
    <a href={COPY.contact.waHref} target="_blank" rel="noopener" style={{
      position: 'fixed', bottom: 32, right: 32, zIndex: 60,
      width: 60, height: 60, borderRadius: 999,
      background: '#25d366',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxShadow: '0 16px 40px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.2)',
      transition: 'transform 0.2s'
    }}
    onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
    onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}>
      <svg width="28" height="28" 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="1.8" strokeLinejoin="round" />
      </svg>
    </a>);

}

// ─── Component (mounted by responsive-app or by Desktop v2.html mount call) ────
function DesktopApp() {
  const [lang, setLang] = useLang();
  const { copy, ui } = getContent(lang);
  return (
    <>
      <Nav lang={lang} setLang={setLang} ui={ui} />
      <Hero copy={copy} ui={ui} />
      <Services copy={copy} ui={ui} />
      <Benefits copy={copy} ui={ui} />
      <Process copy={copy} ui={ui} />
      <Properties copy={copy} ui={ui} />
      <KPIs copy={copy} ui={ui} />
      <Contact copy={copy} ui={ui} />
      <Footer copy={copy} ui={ui} />
      <StickyWA />
    </>);

}
window.DesktopApp = DesktopApp;

// Auto-mount only if standalone (Desktop v2.html). When responsive-app is loaded after,
// it will call createRoot(...) on the same #root and replace this.
if (!window.__AM_RESPONSIVE__) {
  ReactDOM.createRoot(document.getElementById('root')).render(<DesktopApp />);
}
})();