const NS2 = window.PiercePropiedadesDesignSystem_2c873c;
const { Button, TextInput, TextArea, Select, FormMessage, Eyebrow, PhotoFrame, TeamCard, Icon, ListingCard } = NS2;

function _r(id,url){return(window.__resources||{})[id]||url;}

const PHOTOS_F01 = [
  'assets/fichas/f01p00.jpg',
  'assets/fichas/f01p01.jpg',
  'assets/fichas/f01p02.jpg',
  'assets/fichas/f01p03.jpg',
  'assets/fichas/f01p04.jpg',
  'assets/fichas/f01p05.jpg',
  'assets/fichas/f01p06.jpg',
  'assets/fichas/f01p07.jpg',
  'assets/fichas/f01p08.jpg',
  'assets/fichas/f01p09.jpg',
  'assets/fichas/f01p10.jpg',
  'assets/fichas/f01p11.jpg',
  'assets/fichas/f01p12.jpg',
  'assets/fichas/f01p13.jpg',
  'assets/fichas/f01p14.jpg',
  'assets/fichas/f01p15.jpg',
  'assets/fichas/f01p16.jpg',
  'assets/fichas/f01p17.jpg',
  'assets/fichas/f01p18.jpg',
  'assets/fichas/f01p19.jpg',
  'assets/fichas/f01p20.jpg',
  'assets/fichas/f01p21.jpg',
  'assets/fichas/f01p22.jpg',
  'assets/fichas/f01p23.jpg',
  'assets/fichas/f01p24.jpg',
  'assets/fichas/f01p25.jpg',
  'assets/fichas/f01p26.jpg',
  'assets/fichas/f01p27.jpg',
];
const PHOTOS_F02 = [
  'assets/fichas/f02p00.jpg',
  'assets/fichas/f02p01.jpg',
  'assets/fichas/f02p02.jpg',
  'assets/fichas/f02p03.jpg',
  'assets/fichas/f02p04.jpg',
];
const PHOTOS_F03 = [
  'assets/fichas/f03p00.jpg',
  'assets/fichas/f03p01.jpg',
  'assets/fichas/f03p02.jpg',
  'assets/fichas/f03p03.jpg',
  'assets/fichas/f03p04.jpg',
];
const PHOTOS_F04 = [
  'assets/fichas/f04p00.jpg',
  'assets/fichas/f04p01.jpg',
  'assets/fichas/f04p02.jpg',
  'assets/fichas/f04p03.jpg',
  'assets/fichas/f04p04.jpg',
];
const PHOTOS_F05 = [
  'assets/fichas/f05p00.jpg',
  'assets/fichas/f05p01.jpg',
  'assets/fichas/f05p02.jpg',
  'assets/fichas/f05p03.jpg',
  'assets/fichas/f05p04.jpg',
];
const PHOTOS_F06 = [
  'assets/fichas/f06p00.jpg',
  'assets/fichas/f06p01.jpg',
  'assets/fichas/f06p02.jpg',
  'assets/fichas/f06p03.jpg',
  'assets/fichas/f06p04.jpg',
];

function CarouselListingCard({ images = [], title, address, neighbourhood = 'Recoleta', price, priceLabel, currency = 'US$', operation = 'Venta', status, rooms, area, href, onClick }) {
  const { Tag } = NS2;
  const [idx, setIdx] = React.useState(0);
  const [hover, setHover] = React.useState(false);
  const meta = [rooms ? rooms + ' amb.' : null, area ? area + ' m²' : null].filter(Boolean).join(' · ');
  const prev = (e) => { e.preventDefault(); e.stopPropagation(); setIdx(i => (i - 1 + images.length) % images.length); };
  const next = (e) => { e.preventDefault(); e.stopPropagation(); setIdx(i => (i + 1) % images.length); };
  const Wrap = href ? 'a' : 'div';
  const btnStyle = { position: 'absolute', top: '50%', transform: 'translateY(-50%)', background: 'rgba(255,255,255,0.88)', border: 'none', borderRadius: '50%', width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', zIndex: 2, boxShadow: '0 1px 4px rgba(0,0,0,0.18)' };
  return (
    <Wrap href={href} onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', textDecoration: 'none', color: 'var(--text-body)', background: 'var(--surface-card)', border: '1px solid var(--border-hair)', borderRadius: 'var(--r-2)', padding: 'var(--s-3)', boxSizing: 'border-box', height: '100%', boxShadow: hover ? 'var(--shadow-2)' : 'var(--shadow-0)', transition: 'box-shadow var(--dur-2) var(--ease)' }}>
      <div style={{ position: 'relative', width: '100%', aspectRatio: '3/2', borderRadius: 'var(--r-2)', overflow: 'hidden', background: 'var(--surface-sunken)' }}>
        <img src={images[idx]} alt={title} referrerPolicy="no-referrer" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'opacity 0.2s' }} />
        {images.length > 1 && <>
          <button onClick={prev} style={{ ...btnStyle, left: 8 }}><Icon name="chevron-left" size={16} /></button>
          <button onClick={next} style={{ ...btnStyle, right: 8 }}><Icon name="chevron-right" size={16} /></button>
          <span style={{ position: 'absolute', bottom: 10, right: 10, background: 'rgba(0,0,0,0.45)', color: '#fff', fontSize: 11, fontWeight: 500, borderRadius: 99, padding: '2px 8px', letterSpacing: '0.04em' }}>{idx + 1} / {images.length}</span>
        </>}
        <span style={{ position: 'absolute', top: 'var(--s-3)', left: 'var(--s-3)', display: 'flex', gap: 6, pointerEvents: 'none' }}>
          <Tag tone="dark">{operation}</Tag>
          {status ? <Tag tone="accent">{status}</Tag> : null}
        </span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-1)', padding: '0 var(--s-2) var(--s-2)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 'var(--t-micro)', fontWeight: 'var(--w-medium)', letterSpacing: 'var(--tr-label)', textTransform: 'uppercase', color: 'var(--text-cold)' }}><Icon name="map-pin" size={13} />{neighbourhood}</span>
        <h3 style={{ fontSize: 'var(--t-h4)', fontWeight: 'var(--w-medium)', margin: '2px 0 0', lineHeight: 'var(--lh-snug)' }}>{title}</h3>
        {address ? <span style={{ fontSize: 'var(--t-small)', color: 'var(--text-muted)' }}>{address}</span> : null}
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--s-3)', marginTop: 'var(--s-3)', paddingTop: 'var(--s-3)', borderTop: '1px solid var(--border-hair)' }}>
          <span style={{ fontSize: 19, fontWeight: 'var(--w-medium)', color: 'var(--green-800)', letterSpacing: 'var(--tr-none)' }}>{priceLabel || (price ? currency + ' ' + price : 'Consultar')}</span>
          {meta ? <span style={{ fontSize: 'var(--t-small)', color: 'var(--text-muted)' }}>{meta}</span> : null}
        </div>
      </div>
    </Wrap>
  );
}

function Cierre({ formMotivo, setFormMotivo }) {
  const { Section, SectionHead, Pendiente, Reveal, PHONE, WA, ASSETS } = window;
  const [form, setForm] = React.useState({ nombre: '', contacto: '', msg: '' });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  function submit(e) {
    e.preventDefault();
    const err = {};
    if (!form.nombre.trim()) err.nombre = 'Necesitamos tu nombre para saber cómo llamarte.';
    if (!formMotivo) err.motivo = 'Elegí una opción así te contesta la persona que corresponde.';
    setErrors(err);
    if (!Object.keys(err).length) {
      const lines = [
        'Hola, los contacto desde la web.',
        '',
        '*Nombre:* ' + form.nombre.trim(),
        formMotivo ? '*Consulta:* ' + formMotivo : null,
        form.contacto.trim() ? '*Mail:* ' + form.contacto.trim() : null,
        form.msg.trim() ? '*Mensaje:* ' + form.msg.trim() : null,
      ].filter(l => l !== null).join('\n');
      window.open('https://wa.me/5491122455640?text=' + encodeURIComponent(lines), '_blank');
    }
  }

  return (
    <>
      <Section tone="sunken">
        <SectionHead eyebrow="Oportunidades" title="Propiedades Destacadas" />
        <div style={{ display: 'grid', gap: 'var(--grid-gap)', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', alignItems: 'stretch' }}>
          <Reveal><CarouselListingCard images={PHOTOS_F01} title="3 amb. reciclado. Piso alto. Balcón." address="Rodríguez Peña, entre Quintana y Av. Alvear" neighbourhood="Recoleta" priceLabel="USD 350.000" rooms={3} area={90} operation="Venta" status="Apto crédito" href="https://www.zonaprop.com.ar/propiedades/clasificado/veclapin-venta-recoleta-3-amb-reciclado.-piso-alto.-balcon.-59291168.html" /></Reveal>
          <Reveal delay={60}><CarouselListingCard images={PHOTOS_F02} title="Depto 2 Amb + Balcón Terraza a Estrenar" address="Machaín 3553" neighbourhood="Saavedra" priceLabel="USD 175.000" rooms={2} area={62} operation="Venta" status="A estrenar" href="https://www.zonaprop.com.ar/propiedades/clasificado/veclapin-venta-departamento-2-amb-balcon-terraza-a-estrenar-59004601.html" /></Reveal>
          <Reveal delay={120}><CarouselListingCard images={PHOTOS_F03} title="3 Ambientes Piso Muy Alto. Vista Panorámica." address="Blanco Encalada 2387 (esq. Av. Cabildo)" neighbourhood="Belgrano" priceLabel="USD 169.000" rooms={3} area={69} operation="Venta" status="Piso 18" href="https://www.zonaprop.com.ar/propiedades/clasificado/veclapin-venta-belgrano-3-ambientes-piso-muy-alto.-vista-59760202.html" /></Reveal>
          <Reveal delay={180}><CarouselListingCard images={PHOTOS_F04} title="Palermo Chico – Piso 25 – 3 Dorm – Cochera" address="Av. del Libertador 2254 (esq. Av. Coronel Díaz)" neighbourhood="Palermo Chico" priceLabel="USD 3.300/mes" rooms={4} area={148} operation="Alquiler" status="Piso 25" href="https://www.zonaprop.com.ar/propiedades/clasificado/alclapin-alquiler-palermo-chico-piso-25-3-dorm-cochera-60057601.html" /></Reveal>
          <Reveal delay={240}><CarouselListingCard images={PHOTOS_F05} title="Lotes en Barrio Privado La Paloma" address="Ruta Provincial 11, Chapadmalal" neighbourhood="Chapadmalal" priceLabel="USD 72.000" operation="Venta" status="Financiación" href="https://www.zonaprop.com.ar/propiedades/clasificado/vecltrin-venta-lotes-en-barrio-privado-de-chapadmalal-la-58642042.html" /></Reveal>
          <Reveal delay={300}><CarouselListingCard images={PHOTOS_F06} title="Puerto Madero – Monoambiente Amoblado y Equipado" address="Juana Manso 152" neighbourhood="Puerto Madero" priceLabel="USD 1.200/mes" rooms={1} area={85} operation="Alquiler" status="Amoblado" href="https://www.zonaprop.com.ar/propiedades/clasificado/alclapin-alquiler-puerto-madero-amoblado-y-equipado-59701199.html" /></Reveal>
        </div>
      </Section>

      <section id="propiedades" style={{ position: 'relative', minHeight: 440, display: 'flex', alignItems: 'center', backgroundImage: 'url(' + ((window.__resources||{})['photo-principal'] || ASSETS + '/photos/principal.jpg') + ')', backgroundSize: 'cover', backgroundPosition: 'center', color: 'var(--paper)', overflow: 'hidden', scrollMarginTop: 78 }}>
        <span aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(18,28,35,0.88) 0%, rgba(18,28,35,0.5) 45%, rgba(18,28,35,0.05) 100%)' }}></span>
        <div className="container" style={{ position: 'relative', paddingBlock: 'var(--s-8)' }}>
          <Reveal><div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)', maxWidth: 520 }}>
            <Eyebrow mark tone="onDark">Propiedades</Eyebrow>
            <h2 style={{ fontSize: 'var(--t-h2)', fontWeight: 'var(--w-light)', letterSpacing: 'var(--tr-tight)', lineHeight: 'var(--lh-snug)', margin: 0, color: 'var(--paper)' }}>Ver todo en Zonaprop</h2>
            <p style={{ margin: 0, lineHeight: 'var(--lh-base)', color: 'rgba(255,255,255,0.88)' }}>Nuestras propiedades en venta y en alquiler están al día en Zonaprop, con fotos, precios y fichas completas.</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--s-3)' }}>
              <Button variant="onPhotoFill" href="https://www.zonaprop.com.ar/inmobiliarias/pierce-propiedades_30027777-inmuebles-venta.html" target="_blank" rel="noopener" iconRight="arrow-up-right">Ver en venta</Button>
              <Button variant="onPhoto" href="https://www.zonaprop.com.ar/inmobiliarias/pierce-propiedades_30027777-inmuebles-alquiler.html" target="_blank" rel="noopener" iconRight="arrow-up-right">Ver en alquiler</Button>
            </div>
            <p style={{ margin: 0, fontSize: 'var(--t-small)', color: 'rgba(255,255,255,0.72)', lineHeight: 'var(--lh-base)' }}>Si buscás algo que no está en la lista, escribinos igual. Buena parte de lo que cerramos arranca por una propiedad que todavía no publicamos.</p>
          </div></Reveal>
        </div>
      </section>

      <Section id="contacto" tone="sunken">
        <SectionHead eyebrow="Contacto" title="Escribinos" lead="Lo más rápido es WhatsApp. Del otro lado estamos nosotros." />
        <div style={{ display: 'grid', gap: 'var(--block-y)', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', alignItems: 'start' }}>
          <Reveal><form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
            <p style={{ margin: 0, fontSize: 'var(--t-small)', color: 'var(--text-muted)' }}>Escribinos por el WhatsApp fijo, o dejanos tus datos y te llamamos.</p>
            {sent ? <FormMessage tone="success" title="Listo, nos llegó.">Te escribimos dentro del día. Si es urgente, mandanos un WhatsApp.</FormMessage> : null}
            <TextInput label="Nombre y apellido" value={form.nombre} onChange={set('nombre')} error={errors.nombre} />
            <TextInput label="Mail (opcional)" value={form.contacto} onChange={set('contacto')} error={errors.contacto} />
            <Select label="¿En qué te podemos ayudar?" value={formMotivo} onChange={(e) => setFormMotivo(e.target.value)} error={errors.motivo}
              options={['Quiero vender', 'Quiero tasar mi propiedad', 'Quiero comprar', 'Quiero dar en alquiler', 'Alquiler temporario', 'Otra consulta']} />
            <TextArea label="Contanos un poco más (opcional)" rows={4} value={form.msg} onChange={set('msg')} hint="Si es por una propiedad puntual, pasanos el link o la dirección." />
            <div><Button type="submit" variant="primary" size="lg">Enviar</Button></div>
          </form></Reveal>
          <Reveal delay={100}><div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-4)' }}>
            <PhotoFrame ratio="wide" treatment="soft" src={(window.__resources||{})['photo-barrio'] || ASSETS + '/photos/barrio-vereda.jpg'} placeholder="La cuadra de la oficina" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--s-3)', padding: 'var(--s-5)', background: 'var(--surface-card)', border: '1px solid var(--border-hair)', borderRadius: 'var(--r-2)' }}>
              <div style={{ display: 'flex', gap: 'var(--s-3)', alignItems: 'flex-start', fontSize: 'var(--t-small)', color: 'var(--ink-700)' }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}><Icon name="map-pin" size={17} /></span>
                <span><strong style={{ fontWeight: 'var(--w-medium)' }}>Oficina:</strong> Marcelo T. de Alvear 1619, CABA</span>
              </div>
              <div style={{ display: 'flex', gap: 'var(--s-3)', alignItems: 'flex-start', fontSize: 'var(--t-small)', color: 'var(--ink-700)' }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}><Icon name="clock" size={17} /></span>
                <span><strong style={{ fontWeight: 'var(--w-medium)' }}>Horario:</strong> Lunes a viernes, 9 a 18 hs.</span>
              </div>
            </div>
          </div></Reveal>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { Cierre });