// ─── Social Icon Helper ───────────────────────────────────────────────────────
const SocialIcon = ({ name, size = 22, color = '#0b3f6e' }) => {
  if (name === 'Facebook') return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
    </svg>);

  if (name === 'Instagram') return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
    </svg>);

  if (name === 'TikTok') return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.28 0 .54.04.79.1V9.01a6.33 6.33 0 0 0-.79-.05 6.34 6.34 0 0 0-6.34 6.34 6.34 6.34 0 0 0 6.34 6.34 6.34 6.34 0 0 0 6.33-6.34V8.69a8.19 8.19 0 0 0 4.79 1.53V6.78a4.85 4.85 0 0 1-1.02-.09z" />
    </svg>);

  if (name === 'WhatsApp') return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
      <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>);

  return null;
};

/* Verticale Website UI Kit — shared component exports */
/* Load after React + Babel via <script type="text/babel" src="..."> */

// ─── Header ───────────────────────────────────────────────────────────────────
const Header = ({ activePage, onNavigate }) => {
  const pages = ['Inicio', 'Nosotros', 'Propiedades', 'Contactanos'];
  return (
    <header style={{
      background: '#F4F2ED', borderBottom: '1px solid #e5e3de',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 48px', position: 'sticky', top: 0, zIndex: 100, height: "70px"
    }}>
      <img src="assets/logo-icon.png" alt="Verticale" style={{ cursor: 'pointer', width: "60px", height: "60px" }} onClick={() => onNavigate('Inicio')} />
      <nav style={{ display: 'flex', gap: 36 }}>
        {pages.map((p) =>
        <a key={p} href="#" onClick={(e) => {e.preventDefault();onNavigate(p);}}
        style={{
          fontSize: 14, fontWeight: activePage === p ? 700 : 500,
          color: '#0b3f6e', textDecoration: 'none', letterSpacing: '0.01em',
          borderBottom: activePage === p ? '2px solid #0b3f6e' : '2px solid transparent',
          paddingBottom: 2, transition: 'color 200ms'
        }}>
            {p}
          </a>
        )}
      </nav>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        {[
        { title: 'Facebook', url: 'https://www.facebook.com/VerticaleInmobiliaria' },
        { title: 'Instagram', url: 'https://www.instagram.com/verticale_inmobiliaria/' },
        { title: 'TikTok', url: 'https://www.tiktok.com/@verticale_inmobiliaria' },
        { title: 'WhatsApp', url: 'https://wa.me/50242155119' }].
        map(({ title, url }) =>
        <a key={title} href={url} target="_blank" rel="noopener noreferrer" title={title} style={{ display: 'flex', alignItems: 'center', transition: 'opacity 150ms', color: '#0b3f6e' }}
        onMouseEnter={(e) => e.currentTarget.style.opacity = '0.75'}
        onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}>
            <SocialIcon name={title} size={22} color="#0b3f6e" />
          </a>
        )}
      </div>
    </header>);

};

// ─── Button ───────────────────────────────────────────────────────────────────
const Btn = ({ children, variant = 'primary', size = 'md', onClick, style = {} }) => {
  const variants = {
    primary: { background: '#0b3f6e', color: '#fff', border: '2px solid #0b3f6e' },
    secondary: { background: 'transparent', color: '#0b3f6e', border: '2px solid #0b3f6e' },
    accent: { background: '#cc7842', color: '#fff', border: '2px solid #cc7842' },
    green: { background: '#528714', color: '#fff', border: '2px solid #528714' },
    ghost: { background: 'transparent', color: '#6b7280', border: '2px solid #e5e3de' }
  };
  const sizes = {
    sm: { fontSize: 12, padding: '8px 16px' },
    md: { fontSize: 14, padding: '12px 24px' },
    lg: { fontSize: 16, padding: '16px 32px' }
  };
  const [hovered, setHovered] = React.useState(false);
  return (
    <button onClick={onClick}
    onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
    style={{
      fontFamily: "'Manrope', sans-serif", fontWeight: 600, borderRadius: 8,
      cursor: 'pointer', letterSpacing: '0.04em', transition: 'all 200ms ease',
      display: 'inline-flex', alignItems: 'center', gap: 8,
      opacity: hovered ? 0.88 : 1,
      ...variants[variant], ...sizes[size], ...style
    }}>
      {children}
    </button>);

};

// ─── Badge ────────────────────────────────────────────────────────────────────
const Badge = ({ children, color = 'navy' }) => {
  const colors = {
    navy: { background: '#0b3f6e', color: '#fff' },
    green: { background: '#528714', color: '#fff' },
    terracotta: { background: '#cc7842', color: '#fff' },
    outline: { background: 'transparent', border: '1.5px solid #0b3f6e', color: '#0b3f6e' }
  };
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', padding: '4px 10px',
      borderRadius: 4, fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
      textTransform: 'uppercase', ...colors[color]
    }}>
      {children}
    </span>);

};

// ─── PropertyCard ─────────────────────────────────────────────────────────────
const PropertyCard = ({ price, period, title, description, beds, baths, area, badge, badgeColor, onClick }) => {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div onClick={onClick}
    onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}
    style={{
      background: '#F4F2ED', borderRadius: 16, overflow: 'hidden',
      boxShadow: hovered ? '0 8px 32px rgba(0,0,0,0.14)' : '0 4px 20px rgba(0,0,0,0.08)',
      transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
      transition: 'all 200ms ease', cursor: 'pointer', width: '100%'
    }}>
      {/* Image placeholder */}
      <div style={{
        width: '100%', aspectRatio: '1/1',
        background: 'linear-gradient(135deg, #c8c5bc 0%, #a8a49c 100%)',
        position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center'
      }}>
        {badge &&
        <div style={{ position: 'absolute', top: 12, left: 12 }}>
            <Badge color={badgeColor || 'navy'}>{badge}</Badge>
          </div>
        }

      </div>
      {/* Body */}
      <div style={{ padding: 24, display: 'flex', flexDirection: 'column', minHeight: 200 }}>
        <div style={{ flex: 1 }}>
        <div style={{ fontSize: 32, fontWeight: 800, color: '#0b3f6e', letterSpacing: '-0.02em' }}>
          {price}<span style={{ fontSize: 18, fontWeight: 500, color: '#6b7280' }}>{period}</span>
        </div>
        <div style={{ fontSize: 17, fontWeight: 700, color: '#0b3f6e', margin: '8px 0 10px', lineHeight: 1.3 }}>{title}</div>
        <div style={{ fontSize: 15, color: '#6b7280', lineHeight: 1.6 }}>{description}</div>
        </div>
        <div style={{ marginTop: 'auto' }}>
          <hr style={{ border: 'none', borderTop: '1px solid #e5e3de', margin: '16px 0' }} />
          <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
            {[
            { icon: 'assets/icons/bed.svg', value: beds, alt: 'Hab' },
            { icon: 'assets/icons/bath.svg', value: baths, alt: 'Baños' },
            { icon: 'assets/icons/area.svg', value: area, alt: 'Área' }].
            map(({ icon, value, alt }) =>
            <div key={alt} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 14, fontWeight: 600, color: '#0b3f6e' }}>
                <img src={icon} alt={alt} style={{ width: 45, height: 45 }} />
                {value}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>);

};

// ─── Footer ───────────────────────────────────────────────────────────────────
const Footer = ({ onNavigate }) =>
<footer style={{ background: '#0b3f6e', color: '#fff', padding: '48px', marginTop: 'auto' }}>
    <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 40 }}>
      <div>
        <img src="assets/logo-stacked.png" alt="Verticale" style={{ height: 80, marginBottom: 16, filter: 'brightness(0) invert(1)' }} />
        <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, marginTop: 12 }}>
          Acompañamiento integral en la compra y venta de propiedades residenciales en Ciudad de Guatemala.
        </p>
      </div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>Navegación</div>
        {['Inicio', 'Nosotros', 'Propiedades', 'Contactanos'].map((p) =>
      <div key={p} style={{ marginBottom: 10 }}>
            <a href="#" onClick={(e) => {e.preventDefault();onNavigate(p);}}
        style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', textDecoration: 'none', fontWeight: 500 }}>{p}</a>
          </div>
      )}
      </div>
      <div>
        <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', marginBottom: 16 }}>Contacto</div>
        <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.8)', lineHeight: 1.8 }}>
          <div>Ciudad de Guatemala</div>
          <div>Zonas 1, 2, 4, 5, 7, 11</div>
          <div style={{ marginTop: 16, display: 'flex', gap: 10 }}>
            {[
          { title: 'Facebook', url: 'https://www.facebook.com/VerticaleInmobiliaria' },
          { title: 'Instagram', url: 'https://www.instagram.com/verticale_inmobiliaria/' },
          { title: 'TikTok', url: 'https://www.tiktok.com/@verticale_inmobiliaria' },
          { title: 'WhatsApp', url: 'https://wa.me/50242155119' }].
          map(({ title, url }) =>
          <a key={title} href={url} target="_blank" rel="noopener noreferrer" title={title}
          style={{ display: 'flex', alignItems: 'center', transition: 'opacity 150ms', opacity: 0.8 }}
          onMouseEnter={(e) => e.currentTarget.style.opacity = '1'}
          onMouseLeave={(e) => e.currentTarget.style.opacity = '0.8'}>
                <SocialIcon name={title} size={24} color="rgba(255,255,255,0.85)" />
              </a>
          )}
          </div>
        </div>
      </div>
    </div>
    <div style={{ maxWidth: 1200, margin: '32px auto 0', paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.15)', fontSize: 13, color: 'rgba(255,255,255,0.4)', display: 'flex', justifyContent: 'space-between' }}>
      <span>© 2024 Verticale Inmobiliaria. Todos los derechos reservados.</span>
      <span>Confianza · Profesionalismo · Acompañamiento</span>
    </div>
  </footer>;


// ─── SectionTitle ─────────────────────────────────────────────────────────────
const SectionTitle = ({ label, title, subtitle }) =>
<div style={{ textAlign: 'center', marginBottom: 48 }}>
    {label && <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#528714', marginBottom: 10 }}>{label}</div>}
    <h2 style={{ fontSize: 36, fontWeight: 700, color: '#0b3f6e', letterSpacing: '-0.02em', margin: 0 }}>{title}</h2>
    {subtitle && <p style={{ fontSize: 17, color: '#6b7280', marginTop: 12, maxWidth: 520, margin: '12px auto 0', lineHeight: 1.6 }}>{subtitle}</p>}
  </div>;


Object.assign(window, { Header, Btn, Badge, PropertyCard, Footer, SectionTitle, SocialIcon });