const NS = window.PiercePropiedadesDesignSystem_2c873c;
const { Hero, StepList, MediaText, Button, Eyebrow } = NS;
const A = 'assets';
const PHONE = '5491122455640';
const WA = {
  general: 'Hola Pierce, entré por la web y quería hacerles una consulta.',
  vender: 'Hola Pierce, entré por la web. Estoy pensando en vender mi propiedad.',
  buscar: 'Hola Pierce, entré por la web. Quiero comprar y me interesa que me ayuden con la búsqueda.',
};

/** Marca un dato que todavía no tenemos. No se rellena: se muestra. */
function Pendiente({ children }) {
  return (
    <span style={{ display: 'inline-flex', gap: 6, alignItems: 'baseline', padding: '3px 8px', border: '1px dashed var(--warning)', borderRadius: 'var(--r-2)', background: 'var(--warning-bg)', color: 'var(--warning)', fontSize: 'var(--t-small)', lineHeight: 1.45 }}>
      <strong style={{ fontSize: 'var(--t-legal)', letterSpacing: 'var(--tr-label)', textTransform: 'uppercase', fontWeight: 'var(--w-medium)', flex: '0 0 auto' }}>Pendiente</strong>
      <span>{children}</span>
    </span>
  );
}

function Section({ id, children, tone = 'paper', style = {} }) {
  const bg = tone === 'sunken' ? 'var(--surface-sunken)' : tone === 'tint' ? 'var(--green-50)' : 'var(--surface-page)';
  return (
    <section id={id} style={{ background: bg, paddingBlock: 'var(--section-y)', scrollMarginTop: 78, ...style }}>
      <div className="container">{children}</div>
    </section>
  );
}

function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const show = () => setVisible(true);
    if (typeof IntersectionObserver === 'undefined') { show(); return; }
    let observerFired = false;
    const obs = new IntersectionObserver((entries) => {
      observerFired = true;
      entries.forEach((e) => { if (e.isIntersecting) { show(); obs.unobserve(el); } });
    }, { threshold: 0.1, rootMargin: '0px 0px -5% 0px' });
    obs.observe(el);
    // Red de seguridad: si el observer nunca llega a disparar en este
    // entorno (nunca, ni una vez), el contenido no debe quedar invisible.
    const fallback = setTimeout(() => { if (!observerFired) show(); }, 1000);
    return () => { clearTimeout(fallback); obs.disconnect(); };
  }, []);
  return <div ref={ref} className={'reveal' + (visible ? ' is-visible' : '')} style={{ transitionDelay: delay + 'ms', display: 'flex', flexDirection: 'column', height: '100%' }}>{children}</div>;
}

function SectionHead({ eyebrow, title, lead, aside, narrowTitle }) {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--s-5)', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 'var(--block-y)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' }}>
        {eyebrow ? <Eyebrow mark>{eyebrow}</Eyebrow> : null}
        <h2 style={{ fontSize: 'var(--t-h2)', fontWeight: 'var(--w-light)', letterSpacing: 'var(--tr-tight)', lineHeight: 'var(--lh-snug)', margin: 0, maxWidth: narrowTitle || '24ch' }}>{title}</h2>
        {lead ? <p className="lead" style={{ margin: 0 }}>{lead}</p> : null}
      </div>
      {aside}
    </div>
  );
}

function ServiceBlock({ index, title, children, action, onAction, note }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', paddingTop: 'var(--s-4)', borderTop: '2px solid var(--ink-900)' }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--t-h2)', fontWeight: 'var(--w-light)', color: 'var(--accent)', lineHeight: 1 }}>{index}</span>
      <h3 style={{ fontSize: 'var(--t-h3)', fontWeight: 'var(--w-medium)', margin: 0 }}>{title}</h3>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', fontSize: 'var(--t-small)', color: 'var(--text-muted)', lineHeight: 'var(--lh-base)' }}>{children}</div>
      {note ? <div style={{ marginTop: 'var(--s-1)' }}>{note}</div> : null}
      {action ? <div style={{ marginTop: 'auto', paddingTop: 'var(--s-4)' }}><Button variant="tertiary" iconRight="arrow-right" onClick={onAction}>{action}</Button></div> : null}
    </div>
  );
}

function Home({ goForm, logoOpacity = 0.18 }) {
  return (
    <>
      <div style={{ position: 'relative' }}>
        <Hero
          title="Acá empieza tu nueva vida. Estamos cerca. Vendemos juntos."
          subtitle="Acompañamos tu decisión y te asesoramos con claridad. Entendiendo tu necesidad y trabajando juntos. Como si tu propiedad fuese nuestra. Somos Pierce, somos confianza."
          src={(window.__resources||{})['photo-hero'] || A + '/photos/plaza-recoleta.jpg'}
          placeholder="Plaza de Recoleta"
          actions={<Button variant="onPhoto" size="lg" href="https://www.zonaprop.com.ar/inmobiliarias/pierce-propiedades_30027777-inmuebles-venta.html" target="_blank" rel="noopener">Ver propiedades</Button>}
        />
        <img
          src={(window.__resources||{})['logo-full-white'] || A + '/logo-pierce-white.png'}
          alt=""
          aria-hidden="true"
          style={{ position: 'absolute', right: '8%', top: '50%', transform: 'translateY(-50%)', height: 'clamp(120px, 22vw, 260px)', width: 'auto', opacity: logoOpacity, pointerEvents: 'none', userSelect: 'none' }}
        />
      </div>

      <Section id="quienes-somos">
        <Reveal>
        <MediaText eyebrow="Quiénes somos" title="Una inmobiliaria de familia." side="right" ratio="portrait" treatment="soft"
          src={(window.__resources||{})['photo-quienes'] || A + '/photos/calle-alvear.jpg'} placeholder="Calle de Recoleta" objectPosition="right center"
          actions={<Button variant="tertiary" iconRight="arrow-right" href="#contacto">Contactanos</Button>}>
          <p style={{ margin: '0 0 var(--s-4)' }}>Pierce nace en 2017 fundada por Alicia Pierce y su hijo Patricio Mc Loughlin. Creamos una forma de trabajo enfocada en la relación humana, tanto para conformar nuestro equipo como para tratar a nuestros clientes. Nuestros amigos son clientes. Nuestros clientes son amigos. Vendemos propiedades, construimos relaciones, unimos personas con hogares.</p>
          <p style={{ margin: '0 0 var(--s-4)' }}>Somos una inmobiliaria boutique integrada por un equipo cuya riqueza operativa está en el encuentro de la experiencia y la juventud, en donde la fusión de trayectorias aseguran cada decisión.</p>
          <p style={{ margin: 0 }}>Enfocados en el corredor norte de la ciudad, tenemos oficinas en Recoleta y Palermo.</p>
        </MediaText>
        </Reveal>
      </Section>

      <Section tone="sunken">
        <Reveal>
        <MediaText eyebrow="Cómo trabajamos" title="Cómo trabajamos" side="left" ratio="wide" treatment="soft"
          src={(window.__resources||{})['photo-como'] || A + '/photos/interior-libros.jpg'} placeholder="Interior de un departamento">
          <p style={{ margin: 0 }}>El primer paso y fundamental es entender la motivación de nuestro cliente. Conversar y analizar la situación y expectativas de forma honesta y directa. Definimos juntos una estrategia. Trabajamos con dedicación y comunicación continua con el cliente.</p>
        </MediaText>
        </Reveal>
      </Section>

      <Section id="servicios">
        <SectionHead eyebrow="Servicios" title="Qué hacemos" />
        <div style={{ display: 'grid', gap: 'var(--grid-gap)', gridTemplateColumns: 'repeat(2, 1fr)' }}>
          <Reveal><ServiceBlock index="01" title="Venta" action="Quiero vender" onAction={() => goForm('Quiero vender')}>
            <p style={{ margin: 0 }}>Presentamos un plan para que tu objetivo se concrete y te lleve al próximo paso.</p>
          </ServiceBlock></Reveal>
          <Reveal delay={80}><ServiceBlock index="02" title="Compra" action="Cómo funciona" onAction={() => { const el = document.getElementById('busqueda'); if (el) window.scrollTo({ top: el.offsetTop - 78, behavior: 'smooth' }); }}>
            <p style={{ margin: 0 }}>Asesoramiento personalizado y constante para que encuentres tu departamento ideal en el mejor valor y disfrutando el proceso.</p>
          </ServiceBlock></Reveal>
          <Reveal delay={160}><ServiceBlock index="03" title="Alquileres" action="Quiero alquilar" onAction={() => goForm('Quiero dar en alquiler')}>
            <p style={{ margin: 0 }}>Encontrar el inquilino ideal en un tiempo razonable es nuestra virtud.</p>
          </ServiceBlock></Reveal>
          <Reveal delay={240}><ServiceBlock index="04" title="Tasaciones" action="Pedir una tasación" onAction={() => goForm('Quiero tasar mi propiedad')}>
            <p style={{ margin: 0 }}>Te damos el precio real de tu departamento y te explicamos por qué.</p>
            <p style={{ margin: 0 }}>También hacemos tasaciones judiciales para sucesiones, divorcios y otros.</p>
          </ServiceBlock></Reveal>
        </div>
      </Section>

      <Section id="busqueda" tone="tint">
        <SectionHead eyebrow="Servicio de búsqueda y compra" title="No busques solo. Hacelo con expertos." narrowTitle="28ch"
          lead="Encontrar el departamento ideal no es fácil. Y menos si estás solo. Pierce ofrece un servicio exclusivo de asesoramiento personalizado y constante para compradores." />
        <Reveal><p style={{ margin: '0 0 var(--block-y)', lineHeight: 'var(--lh-base)', fontSize: 'var(--t-lead)', maxWidth: '52ch' }}>Y lo que pocos saben: este servicio no tiene costo para vos.</p></Reveal>
        <Reveal delay={80}>
          <div style={{ display: 'grid', gap: 'var(--grid-gap)', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))' }}>
            {[
              { title: 'Brief a medida', body: 'Diseñamos juntos los criterios exactos de tu búsqueda para no perder tiempo.' },
              { title: 'Selección y filtro', body: 'Mapeamos todo el mercado y seleccionamos solo las mejores oportunidades.' },
              { title: 'Agenda y visitas', body: 'Coordinamos y agendamos recorridos eficientes para ver propiedades.' },
              { title: 'Negociación experta', body: 'Negociamos con colegas las mejores condiciones y el precio de cierre.' },
              { title: 'Chequeo documental', body: 'Auditamos toda la documentación legal de la propiedad antes de la reserva.' },
              { title: 'Acompañamiento 360°', body: 'Te asesoramos desde el día uno hasta la firma de la escritura. Todo empieza con un café y termina con un abrazo, con tus nuevas llaves en mano.' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 'var(--s-4)', alignItems: 'flex-start' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'var(--t-h3)', fontWeight: 'var(--w-light)', color: 'var(--accent)', lineHeight: 1, flexShrink: 0 }}>{'0' + (i + 1)}</span>
                <div>
                  <h4 style={{ margin: '0 0 var(--s-1)', fontSize: 'var(--t-base)', fontWeight: 'var(--w-medium)' }}>{s.title}</h4>
                  <p style={{ margin: 0, fontSize: 'var(--t-small)', color: 'var(--text-muted)', lineHeight: 'var(--lh-base)' }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        </Reveal>
      </Section>
    </>
  );
}

Object.assign(window, { Section, SectionHead, Pendiente, Reveal, Home, PHONE, WA, ASSETS: A });
