// Ogarom — portal inmobiliario incluido en CloserBroker.
// Lives between "Resultados reales" (testimonials) and "Plan Pionero" (pionero).

const OgaromSection = () => {
  const ctx = (typeof useCountry === 'function') ? useCountry() : null;
  const isCo = !ctx || ctx.country === 'co';
  const cityPrim = (ctx && ctx.primaryCity) || (isCo ? 'Medellín' : 'CDMX');
  const neighborhood = (ctx && ctx.prestigeNeighborhood) || (isCo ? 'El Poblado' : 'Polanco');
  const apartmentCap = (ctx && ctx.vocab && ctx.vocab.apartmentCap) || (isCo ? 'Apartamento' : 'Departamento');
  const bedroomShort = (ctx && ctx.vocab && ctx.vocab.bedroomShort) || (isCo ? 'hab' : 'rec');
  const currencySymbol = isCo ? 'COP' : 'MXN';
  const benefits = [
    {
      i: 'target',
      title: 'Audiencia que sí busca',
      desc: 'Compradores activos, no curiosos. Tráfico calificado generado por inversión publicitaria masiva.',
    },
    {
      i: 'sparkle',
      title: 'Búsqueda inteligente con IA',
      desc: 'Los compradores encuentran propiedades que coinciden exactamente con lo que buscan, no resultados genéricos.',
    },
    {
      i: 'link',
      title: 'Leads directos a tu CRM',
      desc: 'Cada interés que recibes en Ogarom llega automáticamente a tu pipeline en CloserBroker. Sin pegar datos a mano.',
    },
    {
      i: 'home',
      title: 'Incluido en tu plan',
      desc: '10 propiedades activas en Ogarom incluidas en CloserBroker. Más para los pioneros.',
    },
  ];

  // Inline gradient underline
  const Underline = ({ children }) => (
    <span style={{
      backgroundImage: 'linear-gradient(90deg, #54B5E3, #C69CFF)',
      backgroundRepeat: 'no-repeat',
      backgroundSize: '100% 1.5px',
      backgroundPosition: '0 100%',
      paddingBottom: 3,
      whiteSpace: 'nowrap',
    }}>{children}</span>
  );

  // Mock properties for the placeholder mockup (adaptés selon le pays)
  const properties = isCo
    ? [
        { title: `${apartmentCap} en ${neighborhood}`, price: '$1.250M COP', meta: `3 ${bedroomShort} · 180m²` },
        { title: 'Casa en Laureles',                   price: '$820M COP',   meta: `4 ${bedroomShort} · 250m²` },
        { title: 'Penthouse en Envigado',              price: '$2.400M COP', meta: `2 ${bedroomShort} · 95m²` },
      ]
    : [
        { title: `${apartmentCap} en ${neighborhood}`, price: '$12.5M MXN',  meta: `3 ${bedroomShort} · 180m²` },
        { title: 'Casa en Roma Norte',                 price: '$8.2M MXN',   meta: `4 ${bedroomShort} · 250m²` },
        { title: 'Penthouse en Condesa',               price: '$24M MXN',    meta: `2 ${bedroomShort} · 95m²` },
      ];

  const filterTags = ['Casa', apartmentCap, cityPrim, neighborhood];

  return (
    <section style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        {/* Header */}
        <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 48px' }} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            <span className="eyebrow-dot" />Portal inmobiliario incluido
          </div>
          <h2 style={{
            fontSize: 'clamp(28px, 3.4vw, 40px)',
            fontWeight: 600,
            letterSpacing: '-0.02em',
            lineHeight: 1.12,
            marginBottom: 16,
            textWrap: 'balance',
          }}>
            <span className="grad-text" style={{ fontWeight: 700, letterSpacing: '-0.025em' }}>Ogarom</span>
            <span style={{ color: 'var(--fg)' }}>: tu nuevo canal de </span>
            <Underline>captación</Underline>
            <span style={{ color: 'var(--fg)' }}>.</span>
          </h2>
          <p style={{
            fontSize: 16,
            color: 'var(--fg-soft)',
            lineHeight: 1.6,
            textWrap: 'pretty',
            maxWidth: 720,
            margin: '0 auto',
          }}>
            Publica tus propiedades en el portal inmobiliario más moderno de LATAM.{' '}
            <span style={{ color: 'var(--fg)', fontWeight: 500 }}>Compradores activos</span>,{' '}
            <span style={{ color: 'var(--fg)', fontWeight: 500 }}>búsqueda con IA</span>,{' '}
            <span style={{ color: 'var(--fg)', fontWeight: 500 }}>leads directos a tu CRM</span>.
          </p>
        </div>

        {/* Mockup placeholder */}
        <div className="reveal ogarom-mockup" style={{
          maxWidth: 1040,
          margin: '0 auto 72px',
          background: '#fff',
          borderRadius: 20,
          border: '1px solid var(--border)',
          boxShadow: '0 1px 2px rgba(15, 23, 42, 0.04), 0 24px 60px -28px rgba(84, 181, 227, 0.18)',
          padding: 28,
          position: 'relative',
        }}>
          {/* Browser-like top bar (subtle) */}
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: 6,
            paddingBottom: 18,
            borderBottom: '1px solid var(--border-soft)',
            marginBottom: 22,
          }}>
            <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#fef2f2', border: '1px solid #fecaca' }} />
            <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#fefce8', border: '1px solid #fde68a' }} />
            <div style={{ width: 9, height: 9, borderRadius: '50%', background: '#f0fdf4', border: '1px solid #bbf7d0' }} />
            <div className="mono" style={{
              marginLeft: 16,
              fontSize: 11,
              color: 'var(--fg-faint)',
              letterSpacing: '0.02em',
            }}>
              ogarom.com
            </div>
          </div>

          {/* Search bar */}
          <div style={{ marginBottom: 18 }}>
            <div className="ogarom-search" style={{
              display: 'flex',
              alignItems: 'center',
              gap: 12,
              padding: '14px 16px',
              borderRadius: 12,
              border: '1px solid var(--border)',
              background: '#fff',
              boxShadow: '0 1px 2px rgba(15, 23, 42, 0.03)',
            }}>
              <Icon name="search" size={18} color="#9ca3af" />
              <div style={{
                flex: 1,
                fontSize: 14.5,
                color: 'var(--fg-muted)',
              }}>
                ¿Qué tipo de propiedad buscas?
              </div>
              <div style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 5,
                padding: '4px 10px',
                borderRadius: 999,
                fontSize: 11.5,
                fontWeight: 600,
                fontFamily: 'Geist Mono, monospace',
                color: '#fff',
                background: 'linear-gradient(90deg, #54B5E3, #C69CFF)',
                whiteSpace: 'nowrap',
              }}>
                <span style={{ display: 'inline-flex', alignItems: 'center' }}>
                  <Icon name="sparkle" size={11} color="#fff" />
                </span>
                IA
              </div>
            </div>
            {/* Filter tags */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
              {filterTags.map((tag, i) => (
                <span key={i} style={{
                  padding: '5px 11px',
                  borderRadius: 999,
                  fontSize: 12,
                  color: 'var(--fg-soft)',
                  background: '#fff',
                  border: '1px solid var(--border)',
                  fontWeight: 500,
                }}>
                  {tag}
                </span>
              ))}
            </div>
          </div>

          {/* Property cards grid */}
          <div className="ogarom-props-grid" style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 16,
          }}>
            {properties.map((p, i) => (
              <div key={i} style={{
                borderRadius: 12,
                border: '1px solid var(--border-soft)',
                background: '#fff',
                overflow: 'hidden',
                display: 'flex',
                flexDirection: 'column',
              }}>
                {/* Image placeholder */}
                <div style={{
                  aspectRatio: '4 / 3',
                  background: 'linear-gradient(135deg, rgba(84, 181, 227, 0.08), rgba(198, 156, 255, 0.08))',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
                  borderBottom: '1px solid var(--border-soft)',
                }}>
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#c4cad3" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="18" height="18" rx="2" />
                    <circle cx="9" cy="9" r="2" />
                    <path d="M21 15l-5-5L5 21" />
                  </svg>
                </div>
                {/* Body */}
                <div style={{ padding: '14px 14px 16px' }}>
                  <div style={{
                    fontSize: 13.5,
                    fontWeight: 600,
                    color: 'var(--fg)',
                    letterSpacing: '-0.005em',
                    marginBottom: 6,
                    textWrap: 'balance',
                  }}>
                    {p.title}
                  </div>
                  <div className="grad-text" style={{
                    fontSize: 15,
                    fontWeight: 700,
                    letterSpacing: '-0.01em',
                    marginBottom: 6,
                    fontVariantNumeric: 'tabular-nums',
                  }}>
                    {p.price}
                  </div>
                  <div className="mono" style={{
                    fontSize: 11,
                    color: 'var(--fg-muted)',
                    letterSpacing: '0.02em',
                  }}>
                    {p.meta}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 4 benefits — 4 columns on desktop, 2×2 on tablet, 1 col on mobile */}
        <div className="ogarom-benefits-grid reveal" style={{
          maxWidth: 1040,
          margin: '0 auto',
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 24,
        }}>
          {benefits.map((b, idx) => (
            <div key={idx} style={{
              padding: '4px 0',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 10,
                background: 'var(--grad-soft)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 14,
              }}>
                <Icon name={b.i} size={18} color="#54B5E3" />
              </div>
              <div style={{
                fontSize: 15,
                fontWeight: 600,
                color: 'var(--fg)',
                letterSpacing: '-0.005em',
                marginBottom: 6,
                textWrap: 'balance',
              }}>
                {b.title}
              </div>
              <div style={{
                fontSize: 13.5,
                color: 'var(--fg-soft)',
                lineHeight: 1.55,
                textWrap: 'pretty',
              }}>
                {b.desc}
              </div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .ogarom-benefits-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
        }
        @media (max-width: 720px) {
          .ogarom-mockup { padding: 18px !important; border-radius: 16px !important; }
          .ogarom-props-grid { grid-template-columns: 1fr !important; }
          .ogarom-benefits-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
};

window.OgaromSection = OgaromSection;