const { useState, useEffect, useRef } = React;

const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentMode": "magenta",
  "headlineVariant": "vender",
  "heroImage": "interior",
  "whatsappNumber": "+54 9 11 6621 0997",
  "showStats": true
} /*EDITMODE-END*/;

// ---- Brand tokens ----
const BRAND = {
  magenta: '#E5147D',
  magentaDark: '#B30F62',
  graphite: '#2E2E2E',
  graphiteSoft: '#4A4A4A',
  ink: '#1A1A1A',
  bone: '#FAF8F6',
  paper: '#FFFFFF',
  line: 'rgba(46,46,46,0.10)'
};

const ACCENTS = {
  magenta: { primary: '#E5147D', dark: '#B30F62', tint: 'rgba(229,20,125,0.08)' },
  graphite: { primary: '#2E2E2E', dark: '#000000', tint: 'rgba(46,46,46,0.06)' },
  burgundy: { primary: '#8E1F4D', dark: '#5C1233', tint: 'rgba(142,31,77,0.08)' }
};

const HEADLINES = {
  vender: {
    eyebrow: 'Venta de propiedades',
    h1: <>Vendé tu casa, asesorado<br />por <em>profesionales de verdad.</em></>,
    sub: 'Loana Del Vecchio, tu martillera inmobiliaria de confianza. CABA y GBA.',
    cta: 'Agendá tu visita sin costo'
  },
  tasacion: {
    eyebrow: 'Tasación de inmuebles',
    h1: <>¿Cuánto vale<br />realmente <em>tu propiedad?</em></>,
    sub: 'Tasación profesional sin cargo, basada en datos de mercado y experiencia real en CABA y GBA.',
    cta: 'Tasar mi propiedad'
  },
  acompañamiento: {
    eyebrow: 'Estrategia inmobiliaria',
    h1: <>Tu propiedad merece<br /><em>una estrategia seria.</em></>,
    sub: 'No publicamos avisos: diseñamos una operación. Marketing profesional, cartera activa y martillera matriculada al frente.',
    cta: 'Hablemos por WhatsApp'
  }
};

const HERO_IMAGES = {
  interior: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=80',
  building: 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1600&q=80',
  recoleta: 'https://images.unsplash.com/photo-1567496898669-ee935f5f647a?w=1600&q=80'
};

// ---- Helpers ----
function buildWaLink(number, message) {
  const clean = (number || '').replace(/\D/g, '');
  const text = encodeURIComponent(message || 'Hola Loana, me interesa tasar mi propiedad.');
  return `https://wa.me/${clean}?text=${text}`;
}

function useReveal() {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.unobserve(el); } });
    }, { threshold: 0.10 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, shown];
}

function Reveal({ children, delay = 0, as: Tag = 'div', style, className }) {
  const [ref, shown] = useReveal();
  return (
    <Tag
      ref={ref}
      className={className}
      style={{
        opacity: shown ? 1 : 0,
        transform: shown ? 'translateY(0)' : 'translateY(24px)',
        transition: `opacity 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms, transform 900ms cubic-bezier(.2,.7,.2,1) ${delay}ms`,
        ...style
      }}>
      {children}
    </Tag>
  );
}

// ---- useMobile hook ----
function useMobile(bp = 768) {
  const [mobile, setMobile] = useState(window.innerWidth <= bp);
  useEffect(() => {
    const fn = () => setMobile(window.innerWidth <= bp);
    window.addEventListener('resize', fn);
    return () => window.removeEventListener('resize', fn);
  }, [bp]);
  return mobile;
}

// ---- Icons ----
const Icon = {
  WhatsApp: ({ size = 22, color = '#fff' }) =>
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <path d="M16 3C8.82 3 3 8.82 3 16c0 2.3.6 4.55 1.74 6.53L3 29l6.66-1.74A12.94 12.94 0 0 0 16 29c7.18 0 13-5.82 13-13S23.18 3 16 3Zm0 23.6c-1.95 0-3.85-.52-5.5-1.5l-.4-.23-3.95 1.04 1.05-3.85-.26-.4A10.6 10.6 0 1 1 16 26.6Zm6.1-7.95c-.33-.17-1.97-.97-2.27-1.08-.3-.11-.52-.17-.74.17-.22.33-.85 1.08-1.05 1.3-.19.22-.39.25-.72.08-.33-.17-1.4-.52-2.66-1.65-.98-.87-1.65-1.95-1.84-2.28-.19-.33-.02-.5.14-.67.15-.15.33-.39.5-.58.16-.19.22-.33.33-.55.11-.22.06-.41-.03-.58-.08-.17-.74-1.78-1.01-2.44-.27-.65-.55-.56-.75-.57-.19-.01-.41-.01-.63-.01-.22 0-.58.08-.88.41-.3.33-1.16 1.13-1.16 2.76 0 1.62 1.19 3.19 1.36 3.41.17.22 2.34 3.58 5.68 5.02.79.34 1.41.55 1.9.7.8.25 1.52.22 2.1.13.64-.1 1.97-.81 2.25-1.59.28-.78.28-1.45.19-1.59-.08-.14-.3-.22-.63-.39Z" fill={color} />
    </svg>,

  Arrow: ({ size = 18, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>,

  Check: ({ size = 18, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>,

  Mail: ({ size = 18, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="1.5" /><path d="m3 7 9 6 9-6" /></svg>,

  Instagram: ({ size = 18, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} 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=".8" fill={color} /></svg>,

  Menu: ({ size = 24, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="18" x2="21" y2="18" /></svg>,

  Close: ({ size = 24, color = 'currentColor' }) =>
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round"><line x1="4" y1="4" x2="20" y2="20" /><line x1="20" y1="4" x2="4" y2="20" /></svg>
};

// ---- Nav ----
function Nav({ accent, onWa }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const mobile = useMobile(768);

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

  // close menu on scroll
  useEffect(() => {
    if (!menuOpen) return;
    const fn = () => setMenuOpen(false);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, [menuOpen]);

  const navLinks = [
    { l: 'Venta', h: 'servicios' },
    { l: 'Tasaciones', h: 'tasaciones' },
    { l: 'Compra', h: 'compra' },
    { l: 'Zonas', h: 'zonas' },
    { l: 'Loana', h: 'loana' }
  ];

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        padding: mobile ? '0 16px' : (scrolled ? '14px 48px' : '18px 48px'),
        height: mobile ? 64 : undefined,
        background: '#ffffff',
        backdropFilter: 'blur(14px)',
        borderBottom: scrolled ? `1px solid ${BRAND.line}` : '1px solid transparent',
        transition: 'all 400ms cubic-bezier(.2,.7,.2,1)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between'
      }}>
        <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/logo.png" alt="LDV" style={{ height: mobile ? 52 : 80, width: 'auto', maxWidth: mobile ? 180 : 240, objectFit: 'contain' }} />
        </a>

        {mobile ? (
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <button onClick={onWa} style={{
              background: '#25D366', color: 'white', border: 'none',
              padding: '9px 16px', borderRadius: 999, fontSize: 13, fontWeight: 600,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6
            }}>
              <Icon.WhatsApp size={14} /> WhatsApp
            </button>
            <button onClick={() => setMenuOpen(!menuOpen)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: 6, color: BRAND.ink, display: 'flex', alignItems: 'center'
            }} aria-label="Menú">
              {menuOpen ? <Icon.Close size={22} /> : <Icon.Menu size={22} />}
            </button>
          </div>
        ) : (
          <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
            {navLinks.map(({ l, h }) => (
              <a key={l} href={`#${h}`} style={{
                color: BRAND.graphite, textDecoration: 'none', fontSize: 15,
                fontWeight: 500, letterSpacing: '0.02em', transition: 'color 200ms ease'
              }} className="nav-link">{l}</a>
            ))}
            <button onClick={onWa} style={{
              background: '#25D366', color: 'white', border: 'none',
              padding: '11px 22px', borderRadius: 999, fontSize: 15, fontWeight: 600,
              cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 8,
              letterSpacing: '0.02em', transition: 'all 200ms ease',
              boxShadow: '0 4px 14px rgba(37,211,102,0.35)'
            }} className="cta-btn">
              <Icon.WhatsApp size={16} /> WhatsApp
            </button>
          </div>
        )}
      </nav>

      {/* Mobile drawer */}
      {mobile && (
        <div style={{
          position: 'fixed', top: 64, left: 0, right: 0, zIndex: 49,
          background: 'white', borderBottom: `1px solid ${BRAND.line}`,
          boxShadow: '0 12px 40px rgba(0,0,0,0.10)',
          transform: menuOpen ? 'translateY(0)' : 'translateY(-110%)',
          transition: 'transform 350ms cubic-bezier(.2,.7,.2,1)',
          padding: '16px 0 24px'
        }}>
          {navLinks.map(({ l, h }) => (
            <a key={l} href={`#${h}`} onClick={() => setMenuOpen(false)} style={{
              display: 'block', padding: '16px 24px',
              color: BRAND.ink, textDecoration: 'none',
              fontSize: 18, fontWeight: 500,
              borderBottom: `1px solid ${BRAND.line}`
            }}>{l}</a>
          ))}
          <div style={{ padding: '20px 24px 0' }}>
            <button onClick={() => { setMenuOpen(false); onWa(); }} style={{
              width: '100%', background: accent.primary, color: 'white',
              border: 'none', padding: '16px', borderRadius: 999,
              fontSize: 16, fontWeight: 600, cursor: 'pointer',
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10
            }}>
              <Icon.WhatsApp size={18} /> Escribir por WhatsApp
            </button>
          </div>
        </div>
      )}

      <style>{`
        .nav-link { position: relative; }
        .nav-link::after {
          content: ''; position: absolute; bottom: -4px; left: 0; right: 0;
          height: 1px; background: ${accent.primary}; transform: scaleX(0);
          transform-origin: left; transition: transform 300ms ease;
        }
        .nav-link:hover::after { transform: scaleX(1); }
        .cta-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
        @keyframes pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(1.4); }
        }
      `}</style>
    </>
  );
}

// ---- Hero ----
function Hero({ accent, headline, heroImg, onWa, showStats }) {
  const [scrollY, setScrollY] = useState(0);
  const mobile = useMobile(768);

  useEffect(() => {
    const onS = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  if (mobile) {
    return (
      <section id="top" style={{
        position: 'relative', background: BRAND.paper,
        paddingTop: 64, overflow: 'hidden'
      }}>
        {/* Image top on mobile */}
        <div style={{ position: 'relative', height: 260, overflow: 'hidden' }}>
          <video
            src="assets/loana-hero.mp4"
            autoPlay muted loop playsInline
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center' }} />
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(to bottom, transparent 40%, white 100%)'
          }} />
        </div>

        {/* Copy */}
        <div style={{ padding: '8px 24px 48px' }}>
          <div style={{
            display: 'inline-flex', gap: 8, alignItems: 'center',
            padding: '6px 12px', borderRadius: 999,
            border: `1px solid ${BRAND.line}`, background: BRAND.bone,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            color: BRAND.graphiteSoft, marginBottom: 20, fontSize: 11
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent.primary, animation: 'pulse 2s infinite', flexShrink: 0 }}></span>
            {headline.eyebrow} · CABA + GBA
          </div>

          <h1 style={{
            fontFamily: '"Playfair Display", serif',
            fontSize: 'clamp(32px, 8vw, 48px)',
            lineHeight: 1.1, letterSpacing: '-0.02em',
            color: BRAND.ink, margin: '0 0 16px', fontWeight: 500
          }}>{headline.h1}</h1>

          <p style={{
            fontSize: 16, lineHeight: 1.6,
            color: BRAND.graphiteSoft, fontWeight: 400, margin: '0 0 28px'
          }}>{headline.sub}</p>

          <button onClick={onWa} style={{
            width: '100%', background: accent.primary, color: 'white', border: 'none',
            padding: '16px 24px', borderRadius: 999, fontSize: 16, fontWeight: 600,
            cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
            boxShadow: `0 10px 30px ${accent.primary}40`, marginBottom: 12
          }}>
            <Icon.WhatsApp size={20} /> {headline.cta}
          </button>

          <a href="#servicios" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            color: BRAND.graphite, fontSize: 14, fontWeight: 500, textDecoration: 'none',
            padding: '12px 0', borderBottom: `1px solid ${BRAND.line}`
          }}>
            Ver cómo trabajamos <Icon.Arrow size={14} />
          </a>

          {showStats && (
            <div style={{
              marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 16, paddingTop: 24, borderTop: `1px solid ${BRAND.line}`
            }}>
              {[
                { n: '15+', l: 'Años de experiencia' },
                { n: '100%', l: 'Tasaciones sin cargo' },
                { n: 'CABA', l: '+ Gran Buenos Aires' }
              ].map((s, i) => (
                <div key={i} style={{ textAlign: 'center' }}>
                  <div style={{
                    fontFamily: '"Playfair Display", serif',
                    fontSize: 24, color: accent.primary, lineHeight: 1, fontWeight: 500
                  }}>{s.n}</div>
                  <div style={{ marginTop: 4, fontSize: 11, color: BRAND.graphiteSoft, letterSpacing: '0.02em', lineHeight: 1.3 }}>{s.l}</div>
                </div>
              ))}
            </div>
          )}

          {/* Credential badge */}
          <div style={{
            marginTop: 24, background: BRAND.bone, border: `1px solid ${BRAND.line}`,
            borderRadius: 4, padding: '14px 16px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center'
          }}>
            <div>
              <div style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>Loana Del Vecchio</div>
              <div style={{ marginTop: 4, fontSize: 13, color: BRAND.graphite }}>Martillera y Corredora Pública mat.</div>
            </div>
            <div style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600, textAlign: 'right' }}>
              CUCICBA<br />Nº 6376
            </div>
          </div>
        </div>
      </section>
    );
  }

  // Desktop hero
  return (
    <section id="top" style={{
      position: 'relative', minHeight: '100vh', overflow: 'hidden',
      background: BRAND.paper,
      display: 'grid', gridTemplateColumns: '1.1fr 1fr'
    }}>
      <div style={{
        padding: '120px 64px 48px 80px',
        display: 'flex', flexDirection: 'column', justifyContent: 'center',
        position: 'relative', zIndex: 2
      }}>
        <Reveal delay={100}>
          <div style={{
            display: 'inline-flex', gap: 10, alignItems: 'center',
            padding: '8px 14px', borderRadius: 999,
            border: `1px solid ${BRAND.line}`, background: BRAND.bone,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            color: BRAND.graphiteSoft, marginBottom: 28, width: 'fit-content', fontSize: 13
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: accent.primary, animation: 'pulse 2s infinite', flexShrink: 0 }}></span>
            {headline.eyebrow} · CABA + GBA
          </div>
        </Reveal>

        <Reveal delay={200} as="h1" style={{
          fontFamily: '"Playfair Display", serif',
          fontSize: 'clamp(36px, 3.8vw, 60px)',
          lineHeight: 1.05, letterSpacing: '-0.02em',
          color: BRAND.ink, margin: 0, fontWeight: 500
        }}>
          {headline.h1}
        </Reveal>

        <Reveal delay={350} as="p" style={{
          marginTop: 24, maxWidth: 520, fontSize: 20, lineHeight: 1.6,
          color: BRAND.graphiteSoft, fontWeight: 400
        }}>{headline.sub}</Reveal>

        <Reveal delay={500} style={{ marginTop: 28, display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
          <button onClick={onWa} style={{
            background: accent.primary, color: 'white', border: 'none',
            padding: '16px 28px', borderRadius: 999, fontSize: 16, fontWeight: 600,
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12,
            letterSpacing: '0.01em', boxShadow: `0 10px 30px ${accent.primary}40`,
            transition: 'all 250ms ease'
          }} className="cta-btn-lg">
            <Icon.WhatsApp size={20} /> {headline.cta}
          </button>
          <a href="#servicios" style={{
            color: BRAND.graphite, fontSize: 16, fontWeight: 500,
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '16px 8px', borderBottom: `1px solid ${BRAND.line}`
          }} className="link-arrow">
            Ver cómo trabajamos <Icon.Arrow size={16} />
          </a>
        </Reveal>

        {showStats && (
          <Reveal delay={700} style={{
            marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 28, paddingTop: 24, borderTop: `1px solid ${BRAND.line}`,
            maxWidth: 520
          }}>
            {[
              { n: '15+', l: 'Años de experiencia' },
              { n: '100%', l: 'Tasaciones sin cargo' },
              { n: 'CABA', l: '+ Gran Buenos Aires' }
            ].map((s, i) => (
              <div key={i}>
                <div style={{
                  fontFamily: '"Playfair Display", serif',
                  fontSize: 28, color: accent.primary, lineHeight: 1, fontWeight: 500
                }}>{s.n}</div>
                <div style={{ marginTop: 6, fontSize: 12, color: BRAND.graphiteSoft, letterSpacing: '0.02em' }}>{s.l}</div>
              </div>
            ))}
          </Reveal>
        )}
      </div>

      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <video
          src="assets/loana-hero.mp4"
          autoPlay muted loop playsInline
          style={{
            position: 'absolute', inset: '-5% 0',
            width: '100%', height: '110%',
            objectFit: 'cover', objectPosition: 'center',
            transform: `translateY(${scrollY * 0.12}px) scale(1.03)`,
            transition: 'transform 100ms linear'
          }} />
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(90deg, ${BRAND.paper} 0%, transparent 18%, transparent 100%)`
        }} />
        <div style={{
          position: 'absolute', bottom: 48, right: 48,
          background: 'rgba(255,255,255,0.94)', backdropFilter: 'blur(12px)',
          padding: '20px 24px', borderRadius: 4,
          border: `1px solid ${BRAND.line}`, maxWidth: 280
        }}>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>Loana Del Vecchio</div>
          <div style={{ marginTop: 8, fontSize: 14, color: BRAND.graphite, lineHeight: 1.5 }}>Martillera y Corredora Pública matriculada</div>
          <div style={{ marginTop: 6, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>CUCICBA · Matrícula Nº 6376</div>
        </div>
      </div>

      <style>{`
        .cta-btn-lg:hover { transform: translateY(-2px); box-shadow: 0 14px 40px ${accent.primary}55 !important; }
        .link-arrow { transition: gap 200ms ease, color 200ms ease; }
        .link-arrow:hover { color: ${accent.primary} !important; gap: 14px !important; }
      `}</style>
    </section>
  );
}

// ---- Services ----
function Services({ accent }) {
  const mobile = useMobile(768);
  const items = [
    { t: 'Tasación profesional sin cargo', d: 'Análisis comparativo de mercado, estado del inmueble y proyección. Recibís un informe claro, no un número al aire.' },
    { t: 'Venta de propiedades', d: 'Estrategia comercial integral: posicionamiento de precio, plan de salida al mercado y gestión completa hasta la escritura.' },
    { t: 'Asesoramiento legal', d: 'Acompañamiento en boleto, documentación, situación dominial y todos los pasos hasta la firma.' },
    { t: 'Cartera activa de clientes', d: 'Más allá de los portales: una base propia de compradores calificados que muchas veces resuelven la operación antes de publicar.' }
  ];

  return (
    <section id="servicios" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.paper, position: 'relative'
    }}>
      <Reveal>
        <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>
          01 – Servicios
        </div>
      </Reveal>
      <Reveal delay={100} as="h2" style={{
        fontFamily: '"Playfair Display", serif',
        fontSize: mobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(36px, 4vw, 56px)',
        lineHeight: 1.08, letterSpacing: '-0.02em',
        color: BRAND.ink, margin: '16px 0 0', fontWeight: 500, maxWidth: 800
      }}>
        Los servicios que ofrecemos <em>son los mejores</em> del mercado inmobiliario.
      </Reveal>

      <div style={{
        marginTop: mobile ? 40 : 64,
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
        gap: 0,
        borderTop: `1px solid ${BRAND.line}`
      }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 80} style={{
            padding: mobile ? '32px 0' : '40px 36px 40px 0',
            borderBottom: `1px solid ${BRAND.line}`,
            borderRight: !mobile && i % 2 === 0 ? `1px solid ${BRAND.line}` : 'none',
            paddingLeft: !mobile && i % 2 === 1 ? 36 : 0
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 12 }}>
              <span style={{ fontFamily: '"Playfair Display", serif', fontSize: 13, color: accent.primary, fontWeight: 500 }}>0{i + 1}</span>
              <h3 style={{
                fontFamily: '"Playfair Display", serif',
                fontSize: mobile ? 20 : 24, lineHeight: 1.2, color: BRAND.ink, margin: 0, fontWeight: 500
              }}>{it.t}</h3>
            </div>
            <p style={{
              margin: 0, fontSize: mobile ? 15 : 16, lineHeight: 1.65, color: BRAND.graphiteSoft,
              paddingLeft: mobile ? 0 : 28
            }}>{it.d}</p>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---- Marketing ----
function Marketing({ accent }) {
  const mobile = useMobile(768);
  const tools = [
    'Fotografía profesional con estabilizadores',
    'Tomas aéreas con drones',
    'Video tour cinematográfico',
    'Campañas en Meta Ads (Instagram + Facebook)',
    'Campañas en Google Ads',
    'Publicación en los principales portales del país',
    'Distribución en cartera privada de clientes',
    'Pauta segmentada por zona y perfil'
  ];

  return (
    <section id="marketing" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.ink, color: 'white',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1.3fr',
        gap: mobile ? 40 : 80, alignItems: 'start'
      }}>
        <div>
          <Reveal>
            <div style={{ letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600, fontSize: 13 }}>
              02 – Marketing
            </div>
          </Reveal>
          <Reveal delay={100} as="h2" style={{
            fontFamily: '"Playfair Display", serif',
            fontSize: mobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(36px, 4vw, 52px)',
            lineHeight: 1.08, letterSpacing: '-0.02em',
            margin: '16px 0 20px', fontWeight: 500
          }}>
            Tu propiedad merece <em style={{ color: accent.primary }}>ser trabajada con profesionalismo.</em>
          </Reveal>
          <Reveal delay={200} as="p" style={{
            fontSize: mobile ? 15 : 17, lineHeight: 1.6, color: 'rgba(255,255,255,0.78)', margin: 0
          }}>
            Una venta no se logra publicando un aviso. Se logra con una operación de marketing seria, que pone tu propiedad frente a quien la puede comprar.
          </Reveal>
        </div>

        <Reveal delay={250}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
            gap: mobile ? 0 : '16px 28px'
          }}>
            {tools.map((t, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'flex-start',
                padding: '16px 0',
                borderTop: '1px solid rgba(255,255,255,0.1)', gap: 12
              }}>
                <span style={{
                  fontSize: 11, color: accent.primary, fontWeight: 600,
                  letterSpacing: '0.1em', minWidth: 22, paddingTop: 3, flexShrink: 0
                }}>0{i + 1}</span>
                <span style={{ lineHeight: 1.5, color: 'white', fontSize: mobile ? 14 : 15 }}>{t}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Process ----
function Process({ accent, onWa }) {
  const mobile = useMobile(768);
  const steps = [
    { n: '01', t: 'Hablamos por WhatsApp', d: 'Nos contás de la propiedad. Sin formularios eternos, sin call centers.' },
    { n: '02', t: 'Visitamos y tasamos', d: 'Vamos en persona, recorremos el inmueble y armamos la tasación con criterio profesional.' },
    { n: '03', t: 'Diseñamos la estrategia', d: 'Precio, fotografía, video, pauta, portales y nuestra cartera. Una salida al mercado pensada.' },
    { n: '04', t: 'Vendemos y firmamos', d: 'Filtramos consultas, coordinamos visitas, negociamos y te acompañamos hasta la escritura.' }
  ];

  return (
    <section id="proceso" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.bone
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 2fr',
        gap: mobile ? 40 : 80, alignItems: 'start'
      }}>
        <div style={{ position: mobile ? 'static' : 'sticky', top: 120 }}>
          <Reveal>
            <div style={{ letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600, fontSize: 13 }}>
              03 – Cómo trabajamos
            </div>
          </Reveal>
          <Reveal delay={100} as="h2" style={{
            fontFamily: '"Playfair Display", serif',
            fontSize: mobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(32px, 3.6vw, 48px)',
            lineHeight: 1.1, letterSpacing: '-0.02em',
            color: BRAND.ink, margin: '16px 0 24px', fontWeight: 500
          }}>
            Cuatro pasos. <em>Cero vueltas.</em>
          </Reveal>
          <Reveal delay={200}>
            <button onClick={onWa} style={{
              background: 'transparent', color: BRAND.ink, border: `1px solid ${BRAND.ink}`,
              padding: '13px 22px', borderRadius: 999, fontSize: 14, fontWeight: 500,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
              letterSpacing: '0.02em', transition: 'all 200ms ease'
            }} className="ghost-btn">
              Empezar ahora <Icon.Arrow size={14} />
            </button>
          </Reveal>
        </div>

        <div>
          {steps.map((s, i) => (
            <Reveal key={i} delay={i * 80} style={{
              padding: mobile ? '28px 0' : '32px 0',
              borderBottom: i < steps.length - 1 ? `1px solid ${BRAND.line}` : 'none',
              display: 'grid',
              gridTemplateColumns: mobile ? '56px 1fr' : '72px 1fr',
              gap: 16, alignItems: 'baseline'
            }}>
              <span style={{
                fontFamily: '"Playfair Display", serif',
                fontSize: mobile ? 26 : 30, color: accent.primary, fontWeight: 500
              }}>{s.n}</span>
              <div>
                <h3 style={{
                  fontFamily: '"Playfair Display", serif',
                  fontSize: mobile ? 20 : 28, lineHeight: 1.2, color: BRAND.ink, margin: '0 0 8px', fontWeight: 500
                }}>{s.t}</h3>
                <p style={{ margin: 0, fontSize: mobile ? 14 : 16, lineHeight: 1.65, color: BRAND.graphiteSoft }}>
                  {s.d}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        .ghost-btn:hover { background: ${BRAND.ink}; color: white; }
      `}</style>
    </section>
  );
}

// ---- About ----
function About({ accent }) {
  const mobile = useMobile(768);
  const values = [
    { t: 'Atención profesional de verdad', d: 'No te atiende un asistente. Te atiendo yo, en cada paso.' },
    { t: 'Martillera matriculada', d: 'Operación con respaldo legal y registro profesional.' },
    { t: 'Compromiso real', d: 'Si tomamos tu propiedad, le dedicamos foco. No somos un volumen más.' },
    { t: 'Experiencia comprobable', d: 'Años recorriendo CABA y GBA, conociendo barrios, valores y tiempos reales.' }
  ];

  return (
    <section id="loana" style={{
      padding: mobile ? '64px 24px' : '140px 80px',
      background: BRAND.paper, position: 'relative', overflow: 'hidden'
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: 80, right: -60,
        fontFamily: '"Playfair Display", serif',
        fontSize: 'clamp(120px, 18vw, 280px)', lineHeight: 0.85,
        color: accent.primary, opacity: 0.05, fontStyle: 'italic',
        pointerEvents: 'none', userSelect: 'none', fontWeight: 500
      }}>Loana</div>

      <div style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: accent.primary, fontWeight: 700, marginBottom: 16 }}>
            04 – Quién está detrás
          </div>
        </Reveal>
        <Reveal delay={100} as="h2" style={{
          fontFamily: '"Playfair Display", serif',
          fontSize: mobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(36px, 4vw, 56px)',
          lineHeight: 1.05, letterSpacing: '-0.02em',
          color: BRAND.ink, margin: '0 0 40px', fontWeight: 500, maxWidth: 800
        }}>
          Una sola persona <em style={{ color: accent.primary }}>responsable</em>{mobile ? ' ' : <br />}
          de tu operación.
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: mobile ? '1fr' : '0.85fr 1fr',
          gap: mobile ? 40 : 80, alignItems: 'flex-start'
        }}>
          {/* Photo */}
          <Reveal>
            <div style={{ position: 'relative', paddingBottom: mobile ? 0 : 48, maxWidth: mobile ? 340 : 'none', margin: mobile ? '0 auto' : 0 }}>
              {!mobile && (
                <div aria-hidden style={{
                  position: 'absolute', top: 24, left: -16, bottom: 32, right: 40,
                  background: accent.primary, borderRadius: 4,
                  transform: 'rotate(-2deg)', opacity: 0.95
                }} />
              )}
              <div style={{
                position: 'relative', aspectRatio: '4/5', overflow: 'hidden',
                borderRadius: 4, boxShadow: '0 20px 60px -10px rgba(0,0,0,0.2)',
                transform: mobile ? 'none' : 'rotate(-1deg)'
              }}>
                <div style={{
                  position: 'absolute', inset: 0,
                  backgroundImage: 'url(assets/loana-portrait.jpg)',
                  backgroundSize: 'cover', backgroundPosition: 'center 38%'
                }} />
                <div style={{
                  position: 'absolute', bottom: 16, left: 16, right: 16,
                  padding: '14px 16px', background: 'rgba(255,255,255,0.96)',
                  backdropFilter: 'blur(12px)', borderRadius: 4,
                  display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 12
                }}>
                  <div>
                    <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 18, color: BRAND.ink, lineHeight: 1.1 }}>Loana Del Vecchio</div>
                    <div style={{ marginTop: 4, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>Martillera matriculada</div>
                  </div>
                  <div style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: BRAND.graphiteSoft, textAlign: 'right', lineHeight: 1.3, borderLeft: `1px solid ${BRAND.line}`, paddingLeft: 10 }}>
                    CUCICBA<br />Nº 6376
                  </div>
                </div>
              </div>
              {!mobile && (
                <Reveal delay={400}>
                  <div style={{
                    position: 'absolute', bottom: 0, right: -10,
                    padding: '18px 22px', background: BRAND.ink, color: 'white',
                    borderRadius: 4, transform: 'rotate(2deg)',
                    boxShadow: '0 20px 50px -10px rgba(0,0,0,0.4)'
                  }}>
                    <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 32, lineHeight: 1, color: accent.primary, fontWeight: 500 }}>15+</div>
                    <div style={{ marginTop: 4, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.7)' }}>Años en el rubro</div>
                  </div>
                </Reveal>
              )}
            </div>
          </Reveal>

          {/* Values */}
          <div>
            <Reveal delay={150}>
              <p style={{
                fontFamily: '"Playfair Display", serif', fontStyle: 'italic',
                fontSize: mobile ? 17 : 22, lineHeight: 1.5,
                color: BRAND.ink, margin: '0 0 32px',
                borderLeft: `3px solid ${accent.primary}`, paddingLeft: 20
              }}>
                Vender una propiedad es una de las decisiones financieras más importantes de tu vida. Merece a alguien que se haga cargo de verdad, con nombre, apellido y matrícula.
              </p>
            </Reveal>

            <div>
              {values.map((v, i) => (
                <Reveal key={i} delay={250 + i * 80}>
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: mobile ? '48px 1fr' : '56px 1fr',
                    gap: 16, padding: '20px 0',
                    borderTop: i === 0 ? `1px solid ${BRAND.line}` : 'none',
                    borderBottom: `1px solid ${BRAND.line}`
                  }}>
                    <div style={{
                      fontFamily: '"Playfair Display", serif',
                      fontSize: mobile ? 24 : 28, color: accent.primary, fontWeight: 500,
                      lineHeight: 1, fontStyle: 'italic'
                    }}>0{i + 1}</div>
                    <div>
                      <h4 style={{ margin: '4px 0 6px', fontWeight: 600, color: BRAND.ink, fontSize: mobile ? 16 : 18 }}>{v.t}</h4>
                      <p style={{ margin: 0, lineHeight: 1.6, color: BRAND.graphiteSoft, fontSize: mobile ? 14 : 15 }}>{v.d}</p>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Testimonials ----
const TESTIMONIALS = [
  { barrio: 'Villa Urquiza', tipo: '3 ambientes con balcón', nombre: 'Marta R.', cita: 'Tenía el departamento publicado hace ocho meses con otra inmobiliaria y nada. Loana vino, lo vio, me dijo el precio real y me explicó por qué. En menos de dos meses lo vendimos. Honesta y derecha, así tendrían que ser todos.' },
  { barrio: 'Versailles', tipo: 'PH con patio', nombre: 'Jorge y Silvia', cita: 'Nosotros estábamos asustados de vender, es la casa donde criamos a los chicos. Loana se tomó el tiempo de entendernos, nos acompañó en cada paso, hasta el día de la escritura. Un trato humano que no se ve más.' },
  { barrio: 'Recoleta', tipo: 'Semipiso 4 ambientes', nombre: 'Eduardo M.', cita: 'Buscaba alguien que entendiera la zona y los valores reales, no que me tirara un número para captar. Loana hizo la tasación con criterio, me mostró comparables y armó una estrategia de venta seria. Profesional de punta a punta.' },
  { barrio: 'Palermo', tipo: 'Monoambiente a estrenar', nombre: 'Camila L.', cita: 'Era mi primera venta y estaba perdida con todo el tema papeles. Me explicó cada cosa con paciencia, me filtró las consultas raras y solo me hizo coordinar visitas con gente seria. La recomiendo cerrado.' },
  { barrio: 'Saavedra', tipo: 'Casa de 4 ambientes', nombre: 'Familia Pérez', cita: 'Probamos vender por nuestra cuenta seis meses. Pasaba gente que no era ni compradora. Llamamos a Loana, hizo fotos, video con drone, pauta, todo. En tres meses cerramos con un precio mejor del que esperábamos.' }
];

function Testimonials({ accent }) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);
  const mobile = useMobile(768);
  const total = TESTIMONIALS.length;

  useEffect(() => {
    if (paused) return;
    const id = setInterval(() => setIndex((i) => (i + 1) % total), 6500);
    return () => clearInterval(id);
  }, [paused, total]);

  const go = (n) => setIndex((n + total) % total);

  return (
    <section id="testimonios" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.bone, position: 'relative', overflow: 'hidden'
    }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
      onTouchStart={() => setPaused(true)}
      onTouchEnd={() => setPaused(false)}
    >
      {!mobile && (
        <div style={{
          position: 'absolute', top: 60, right: 80,
          fontFamily: '"Playfair Display", serif', fontSize: 280, lineHeight: 0.8,
          color: accent.primary, opacity: 0.07, fontStyle: 'italic',
          userSelect: 'none', pointerEvents: 'none'
        }}>"</div>
      )}

      <div style={{ position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>
            05 – Lo que dicen
          </div>
        </Reveal>
        <Reveal delay={100} as="h2" style={{
          fontFamily: '"Playfair Display", serif',
          fontSize: mobile ? 'clamp(26px, 7vw, 36px)' : 'clamp(36px, 4vw, 52px)',
          lineHeight: 1.08, letterSpacing: '-0.02em',
          color: BRAND.ink, margin: '16px 0 40px', fontWeight: 500, maxWidth: 700
        }}>
          Vendedores reales, <em>operaciones reales.</em>
        </Reveal>

        <div style={{ minHeight: mobile ? 'auto' : 320, position: 'relative', display: 'grid', gridTemplateColumns: '1fr', alignItems: 'center' }}>
          {TESTIMONIALS.map((item, i) => (
            <div key={i} style={{
              gridColumn: 1, gridRow: 1,
              opacity: i === index ? 1 : 0,
              transform: i === index ? 'translateY(0)' : 'translateY(16px)',
              transition: 'opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1)',
              pointerEvents: i === index ? 'auto' : 'none'
            }}>
              <blockquote style={{
                margin: 0,
                fontFamily: '"Playfair Display", serif',
                fontSize: mobile ? 'clamp(17px, 4.5vw, 22px)' : 'clamp(20px, 2.3vw, 28px)',
                lineHeight: 1.5, color: BRAND.ink, fontStyle: 'italic', fontWeight: 400,
                maxWidth: 900, letterSpacing: '-0.005em'
              }}>
                "{item.cita}"
              </blockquote>
              <div style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%', flexShrink: 0,
                  background: `linear-gradient(135deg, ${accent.primary}, ${accent.dark})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'white', fontFamily: '"Playfair Display", serif', fontSize: 18, fontWeight: 500
                }}>
                  {item.nombre.split(' ').map((s) => s[0]).join('').slice(0, 2)}
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: BRAND.ink }}>{item.nombre}</div>
                  <div style={{ fontSize: 13, color: BRAND.graphiteSoft, marginTop: 2 }}>
                    {item.tipo} · <span style={{ color: accent.primary, fontWeight: 600 }}>{item.barrio}</span>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: mobile ? 40 : 48, display: 'flex', alignItems: 'center',
          justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
          paddingTop: 24, borderTop: `1px solid ${BRAND.line}`
        }}>
          <div style={{ display: 'flex', gap: 8 }}>
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => go(i)} aria-label={`Testimonio ${i + 1}`} style={{
                width: i === index ? 28 : 8, height: 8, borderRadius: 4,
                background: i === index ? accent.primary : 'rgba(46,46,46,0.2)',
                border: 'none', cursor: 'pointer', padding: 0,
                transition: 'all 400ms cubic-bezier(.2,.7,.2,1)'
              }} />
            ))}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ fontFamily: '"Playfair Display", serif', fontSize: 16, color: BRAND.graphiteSoft }}>
              <span style={{ color: BRAND.ink, fontWeight: 500 }}>{String(index + 1).padStart(2, '0')}</span>
              <span style={{ margin: '0 6px', opacity: 0.4 }}>/</span>
              {String(total).padStart(2, '0')}
            </span>
            <div style={{ display: 'flex', gap: 8 }}>
              <button onClick={() => go(index - 1)} aria-label="Anterior" style={{
                width: 40, height: 40, borderRadius: '50%',
                background: 'transparent', border: `1px solid ${BRAND.line}`,
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: BRAND.ink, transition: 'all 200ms ease'
              }} className="arrow-btn">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="19" y1="12" x2="5" y2="12" /><polyline points="11 18 5 12 11 6" /></svg>
              </button>
              <button onClick={() => go(index + 1)} aria-label="Siguiente" style={{
                width: 40, height: 40, borderRadius: '50%',
                background: BRAND.ink, border: `1px solid ${BRAND.ink}`,
                cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', transition: 'all 200ms ease'
              }} className="arrow-btn-dark">
                <Icon.Arrow size={14} color="white" />
              </button>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .arrow-btn:hover { background: ${BRAND.ink}; color: white; border-color: ${BRAND.ink}; }
        .arrow-btn-dark:hover { background: ${accent.primary}; border-color: ${accent.primary}; }
      `}</style>
    </section>
  );
}

// ---- Tasaciones ----
function Tasaciones({ accent, onWa }) {
  const mobile = useMobile(768);
  const items = [
    'Análisis comparativo de mercado (ACM) actualizado',
    'Visita en persona al inmueble',
    'Informe escrito con valor de venta sugerido',
    'Asesoramiento sobre estrategia de precio',
    'Sin cargo, sin compromiso'
  ];

  return (
    <section id="tasaciones" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.paper, borderTop: `1px solid ${BRAND.line}`
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
        gap: mobile ? 40 : 80, alignItems: 'center'
      }}>
        <div>
          <Reveal>
            <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>
              Tasaciones
            </div>
          </Reveal>
          <Reveal delay={100} as="h2" style={{
            fontFamily: '"Playfair Display", serif',
            fontSize: mobile ? 'clamp(28px, 7vw, 40px)' : 'clamp(34px, 4vw, 50px)',
            lineHeight: 1.08, letterSpacing: '-0.02em',
            color: BRAND.ink, margin: '16px 0 20px', fontWeight: 500
          }}>
            Tasación profesional <em>sin cargo.</em>
          </Reveal>
          <Reveal delay={200} as="p" style={{
            fontSize: mobile ? 15 : 17, lineHeight: 1.65, color: BRAND.graphiteSoft, margin: '0 0 28px', maxWidth: 480
          }}>
            Saber cuánto vale tu propiedad es el primer paso para venderla bien. Te entregamos una tasación con criterio profesional, no un número al aire para captar.
          </Reveal>
          <Reveal delay={300}>
            <button onClick={onWa} style={{
              background: accent.primary, color: 'white', border: 'none',
              padding: mobile ? '14px 24px' : '16px 28px',
              width: mobile ? '100%' : 'auto',
              borderRadius: 999, fontSize: mobile ? 15 : 15, fontWeight: 600,
              cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
              justifyContent: mobile ? 'center' : 'flex-start', gap: 12,
              boxShadow: `0 10px 30px ${accent.primary}40`, transition: 'all 250ms ease'
            }} className="cta-btn-lg">
              <Icon.WhatsApp size={18} /> Pedí tu tasación
            </button>
          </Reveal>
        </div>
        <Reveal delay={150}>
          <div style={{
            background: BRAND.bone, padding: mobile ? '28px 20px' : '40px 36px',
            borderRadius: 4, border: `1px solid ${BRAND.line}`
          }}>
            <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600, marginBottom: 20 }}>
              Qué incluye
            </div>
            {items.map((it, i) => (
              <div key={i} style={{
                display: 'flex', gap: 14, alignItems: 'flex-start',
                padding: '14px 0', borderBottom: i < items.length - 1 ? `1px solid ${BRAND.line}` : 'none'
              }}>
                <Icon.Check size={16} color={accent.primary} />
                <span style={{ fontSize: mobile ? 14 : 16, color: BRAND.ink, lineHeight: 1.4 }}>{it}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---- Compra ----
function Compra({ accent, onWa }) {
  const mobile = useMobile(768);
  const items = [
    { t: 'Búsqueda personalizada', d: 'Te buscamos lo que necesitás según tus prioridades reales: ubicación, presupuesto, ambientes, estado.' },
    { t: 'Acceso a cartera privada', d: 'Propiedades fuera de portales, exclusivas, antes de que salgan al mercado abierto.' },
    { t: 'Asesoramiento legal', d: 'Verificación dominial, situación del inmueble, boleto y escritura. Comprás sin sustos.' },
    { t: 'Negociación a tu favor', d: 'Conocemos los valores reales de cada barrio. No pagás de más.' }
  ];

  return (
    <section id="compra" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.bone
    }}>
      <Reveal>
        <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>
          Compra
        </div>
      </Reveal>
      <Reveal delay={100} as="h2" style={{
        fontFamily: '"Playfair Display", serif',
        fontSize: mobile ? 'clamp(26px, 7vw, 38px)' : 'clamp(34px, 4vw, 50px)',
        lineHeight: 1.08, letterSpacing: '-0.02em',
        color: BRAND.ink, margin: '16px 0 0', fontWeight: 500, maxWidth: 800
      }}>
        ¿Buscás casa o departamento? <em>Te acompañamos.</em>
      </Reveal>
      <Reveal delay={200} as="p" style={{
        fontSize: mobile ? 15 : 17, lineHeight: 1.65, color: BRAND.graphiteSoft, margin: '16px 0 40px', maxWidth: 580
      }}>
        No solo vendemos. Si estás buscando comprar en CABA o GBA, te ayudamos a encontrar la propiedad correcta y a cerrar la operación con respaldo profesional.
      </Reveal>

      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : 'repeat(2, 1fr)',
        gap: 0, borderTop: `1px solid ${BRAND.line}`, marginBottom: 40
      }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 80} style={{
            padding: mobile ? '28px 0' : '36px 36px 36px 0',
            borderBottom: `1px solid ${BRAND.line}`,
            borderRight: !mobile && i % 2 === 0 ? `1px solid ${BRAND.line}` : 'none',
            paddingLeft: !mobile && i % 2 === 1 ? 36 : 0
          }}>
            <h3 style={{
              fontFamily: '"Playfair Display", serif',
              fontSize: mobile ? 18 : 22, lineHeight: 1.2, color: BRAND.ink, margin: '0 0 8px', fontWeight: 500
            }}>{it.t}</h3>
            <p style={{ margin: 0, fontSize: mobile ? 14 : 15, lineHeight: 1.6, color: BRAND.graphiteSoft }}>{it.d}</p>
          </Reveal>
        ))}
      </div>

      <Reveal style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <a href="Compra.html" style={{
          background: BRAND.ink, color: 'white', border: 'none',
          padding: '14px 24px', borderRadius: 999, fontSize: 14, fontWeight: 600,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
          transition: 'all 250ms ease', textDecoration: 'none'
        }}>
          Conocer más sobre compra <Icon.Arrow size={14} color="white" />
        </a>
        <button onClick={onWa} style={{
          background: 'transparent', color: BRAND.ink, border: `1px solid ${BRAND.line}`,
          padding: '14px 24px', borderRadius: 999, fontSize: 14, fontWeight: 600,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10,
          transition: 'all 250ms ease'
        }}>
          <Icon.WhatsApp size={16} /> Hablar por WhatsApp
        </button>
      </Reveal>
    </section>
  );
}

// ---- Zonas ----
function Zonas({ accent, onWa }) {
  const mobile = useMobile(768);
  const caba = ['Belgrano', 'Caballito', 'Palermo', 'Recoleta', 'Villa Urquiza', 'Villa Devoto', 'Saavedra', 'Flores', 'Floresta', 'Versailles', 'Boedo', 'Liniers', 'Monte Castro', 'Parque Chas', 'Villa del Parque', 'Paternal', 'Puerto Madero', 'Villa Real', 'Villa Santa Rita', 'Agronomía'];
  const gba = ['Vicente López', 'San Isidro', 'Munro', 'Nordelta', 'Pilar', 'Ramos Mejía', 'Morón', 'Castelar', 'Ituzaingó', 'Haedo', 'Caseros', 'Ciudadela', 'San Martín', 'Parque Leloir'];

  return (
    <section id="zonas" style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.paper, borderTop: `1px solid ${BRAND.line}`
    }}>
      <Reveal>
        <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>Zonas que cubrimos</div>
      </Reveal>
      <Reveal delay={100} as="h2" style={{
        fontFamily: '"Playfair Display", serif',
        fontSize: mobile ? 'clamp(26px, 7vw, 38px)' : 'clamp(34px, 4vw, 50px)',
        lineHeight: 1.08, letterSpacing: '-0.02em',
        color: BRAND.ink, margin: '16px 0 12px', fontWeight: 500, maxWidth: 800
      }}>
        Inmobiliaria con presencia en <em>toda Capital y Gran Buenos Aires.</em>
      </Reveal>
      <Reveal delay={200} as="p" style={{
        fontSize: mobile ? 15 : 17, lineHeight: 1.65, color: BRAND.graphiteSoft, margin: '0 0 40px', maxWidth: 580
      }}>
        Conocemos los valores reales de cada barrio. Operamos con tasaciones, ventas y compras en CABA y GBA.
      </Reveal>

      <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr' : '1fr 1fr', gap: mobile ? 40 : 56 }}>
        {[{ label: 'Capital Federal', items: caba }, { label: 'Gran Buenos Aires', items: gba }].map(({ label, items }) => (
          <Reveal key={label} delay={150}>
            <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: BRAND.graphiteSoft, fontWeight: 600, marginBottom: 16 }}>{label}</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {items.map((b) => (
                <span key={b} style={{
                  padding: '8px 14px', borderRadius: 999,
                  border: `1px solid ${BRAND.line}`, background: BRAND.bone,
                  fontSize: mobile ? 13 : 14, color: BRAND.ink, fontWeight: 500,
                  transition: 'all 200ms ease', cursor: 'default'
                }} className="zona-chip">{b}</span>
              ))}
            </div>
          </Reveal>
        ))}
      </div>
      <style>{`
        .zona-chip:hover { background: ${accent.primary}; color: white !important; border-color: ${accent.primary}; }
      `}</style>
    </section>
  );
}

// ---- CTA ----
function CTA({ accent, onWa }) {
  const mobile = useMobile(768);
  return (
    <section style={{
      padding: mobile ? '64px 24px' : '120px 80px',
      background: BRAND.paper, textAlign: 'center',
      borderTop: `1px solid ${BRAND.line}`
    }}>
      <Reveal>
        <div style={{ fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: accent.primary, fontWeight: 600 }}>¿Listo?</div>
      </Reveal>
      <Reveal delay={100} as="h2" style={{
        fontFamily: '"Playfair Display", serif',
        fontSize: mobile ? 'clamp(30px, 8vw, 44px)' : 'clamp(42px, 5.6vw, 72px)',
        lineHeight: 1.05, letterSpacing: '-0.02em',
        color: BRAND.ink, margin: '20px auto 24px', fontWeight: 500, maxWidth: 900
      }}>
        Hablemos de tu propiedad.<br />
        <em style={{ color: accent.primary }}>Sin compromiso, sin vueltas.</em>
      </Reveal>
      <Reveal delay={200} as="p" style={{
        fontSize: mobile ? 15 : 18, lineHeight: 1.6, color: BRAND.graphiteSoft, margin: '0 auto 36px', maxWidth: 560
      }}>
        Escribinos por WhatsApp y te respondemos hoy. Tasación profesional sin cargo en CABA y GBA.
      </Reveal>
      <Reveal delay={300}>
        <button onClick={onWa} style={{
          background: accent.primary, color: 'white', border: 'none',
          padding: mobile ? '16px 28px' : '20px 36px',
          width: mobile ? '100%' : 'auto',
          maxWidth: mobile ? 340 : 'none',
          borderRadius: 999, fontSize: mobile ? 16 : 18, fontWeight: 600,
          cursor: 'pointer', display: 'inline-flex', alignItems: 'center',
          justifyContent: 'center', gap: 12,
          letterSpacing: '0.01em', boxShadow: `0 14px 40px ${accent.primary}50`,
          transition: 'all 250ms ease'
        }} className="cta-btn-lg">
          <Icon.WhatsApp size={20} /> Escribir por WhatsApp
        </button>
      </Reveal>
    </section>
  );
}

// ---- Footer ----
function Footer({ accent }) {
  const mobile = useMobile(768);
  return (
    <footer style={{
      padding: mobile ? '40px 24px 32px' : '60px 80px 40px',
      background: BRAND.ink, color: 'rgba(255,255,255,0.7)'
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: mobile ? '1fr' : '1.4fr 1fr 1fr',
        gap: mobile ? 32 : 60,
        paddingBottom: 32, borderBottom: '1px solid rgba(255,255,255,0.1)'
      }}>
        <div>
          <div style={{ fontFamily: '"Playfair Display", serif', fontSize: 20, color: 'white', marginBottom: 6 }}>Loana Del Vecchio</div>
          <div style={{ fontSize: 12, letterSpacing: '0.06em', color: accent.primary, textTransform: 'uppercase' }}>Tasaciones y Propiedades</div>
          <p style={{ marginTop: 16, fontSize: 14, lineHeight: 1.6, maxWidth: 340, color: 'rgba(255,255,255,0.6)' }}>
            Martillera y Corredora Pública matriculada · CUCICBA · Matrícula Nº 6376. CABA y Gran Buenos Aires.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 14 }}>Contacto</div>
          <a href="mailto:loana.propiedades@gmail.com" style={{ color: 'white', textDecoration: 'none', fontSize: 14, display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
            <Icon.Mail size={15} /> loana.propiedades@gmail.com
          </a>
          <a href="https://instagram.com/loanadelvecchio.propiedades" target="_blank" style={{ color: 'white', textDecoration: 'none', fontSize: 14, display: 'flex', gap: 10, alignItems: 'center' }}>
            <Icon.Instagram size={15} /> @loanadelvecchio.propiedades
          </a>
        </div>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 14 }}>Zona</div>
          <div style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)' }}>
            Ciudad Autónoma de Buenos Aires<br />Gran Buenos Aires
          </div>
        </div>
      </div>
      <div style={{
        paddingTop: 20, fontSize: 12, color: 'rgba(255,255,255,0.35)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8
      }}>
        <span>© 2025 Loana Del Vecchio · Todos los derechos reservados</span>
        <span>Diseñado con propósito.</span>
      </div>
    </footer>
  );
}

// ---- Floating WA ----
function FloatingWA({ accent, onWa }) {
  const [visible, setVisible] = useState(false);
  const mobile = useMobile(768);
  useEffect(() => {
    const onS = () => setVisible(window.scrollY > 400);
    window.addEventListener('scroll', onS);
    return () => window.removeEventListener('scroll', onS);
  }, []);
  return (
    <button onClick={onWa} aria-label="WhatsApp" style={{
      position: 'fixed', bottom: mobile ? 20 : 28, right: mobile ? 20 : 28, zIndex: 40,
      width: mobile ? 52 : 60, height: mobile ? 52 : 60, borderRadius: '50%',
      background: '#25D366', border: 'none', cursor: 'pointer',
      boxShadow: '0 10px 30px rgba(37,211,102,0.4)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      transform: visible ? 'translateY(0) scale(1)' : 'translateY(80px) scale(0.5)',
      opacity: visible ? 1 : 0,
      transition: 'all 400ms cubic-bezier(.2,.7,.2,1)'
    }}>
      <Icon.WhatsApp size={mobile ? 24 : 28} />
    </button>
  );
}

// ---- App ----
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAKS_DEFAULTS);
  const accent = ACCENTS[tweaks.accentMode] || ACCENTS.magenta;
  const headline = HEADLINES[tweaks.headlineVariant] || HEADLINES.vender;
  const heroImg = HERO_IMAGES[tweaks.heroImage] || HERO_IMAGES.interior;

  const onWa = () => {
    const url = buildWaLink(tweaks.whatsappNumber, 'Hola Loana, me interesa tasar mi propiedad.');
    window.open(url, '_blank');
  };

  return (
    <div style={{ background: BRAND.paper, color: BRAND.ink, minHeight: '100vh', overflowX: 'hidden' }}>
      <Nav accent={accent} onWa={onWa} />
      <Hero accent={accent} headline={headline} heroImg={heroImg} onWa={onWa} showStats={tweaks.showStats} />
      <Services accent={accent} />
      <Tasaciones accent={accent} onWa={onWa} />
      <Marketing accent={accent} />
      <Process accent={accent} onWa={onWa} />
      <About accent={accent} />
      <Zonas accent={accent} onWa={onWa} />
      <Testimonials accent={accent} />
      <CTA accent={accent} onWa={onWa} />
      <Footer accent={accent} />
      <FloatingWA accent={accent} onWa={onWa} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Color de acento">
          <TweakRadio
            value={tweaks.accentMode}
            onChange={(v) => setTweak('accentMode', v)}
            options={[
              { value: 'magenta', label: 'Magenta logo' },
              { value: 'burgundy', label: 'Bordó' },
              { value: 'graphite', label: 'Grafito' }
            ]} />
        </TweakSection>
        <TweakSection title="Titular del hero">
          <TweakRadio
            value={tweaks.headlineVariant}
            onChange={(v) => setTweak('headlineVariant', v)}
            options={[
              { value: 'vender', label: 'Vender' },
              { value: 'tasacion', label: 'Tasación' },
              { value: 'acompañamiento', label: 'Estrategia' }
            ]} />
        </TweakSection>
        <TweakSection title="Imagen del hero">
          <TweakRadio
            value={tweaks.heroImage}
            onChange={(v) => setTweak('heroImage', v)}
            options={[
              { value: 'interior', label: 'Interior' },
              { value: 'building', label: 'Edificio' },
              { value: 'recoleta', label: 'Clásico' }
            ]} />
        </TweakSection>
        <TweakSection title="WhatsApp">
          <TweakText
            value={tweaks.whatsappNumber}
            onChange={(v) => setTweak('whatsappNumber', v)}
            placeholder="+54 9 11 ..." />
        </TweakSection>
        <TweakSection title="Mostrar estadísticas">
          <TweakToggle value={tweaks.showStats} onChange={(v) => setTweak('showStats', v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
