function Properties(){
  const stripRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  const props = [
    { id: '001', title: 'Palácio da Lapa', sub: 'Lisboa · Lapa', status: 'À venda',
      beds: 6, baths: 5, m2: 640, price: '6.450.000', ph: 'Residência histórica' },
    { id: '002', title: 'Casa do Guincho', sub: 'Cascais · Guincho', status: 'Reservado',
      beds: 5, baths: 4, m2: 420, price: '4.200.000', ph: 'Moradia oceânica' },
    { id: '003', title: 'Penthouse Amoreiras', sub: 'Lisboa · Amoreiras', status: 'À venda',
      beds: 4, baths: 3, m2: 280, price: '3.100.000', ph: 'Skyline de Lisboa' },
    { id: '004', title: 'Quinta de Sintra', sub: 'Sintra · Seteais', status: 'À venda',
      beds: 8, baths: 7, m2: 1100, price: '12.000.000', ph: 'Quinta histórica' },
    { id: '005', title: 'Duplex do Chiado', sub: 'Lisboa · Chiado', status: 'Vendido',
      beds: 3, baths: 2, m2: 220, price: '2.450.000', ph: 'Duplex pombalino' },
    { id: '006', title: 'Villa Estoril', sub: 'Estoril · Monte Estoril', status: 'À venda',
      beds: 5, baths: 5, m2: 510, price: '5.800.000', ph: 'Vila com jardim' }
  ];

  React.useEffect(() => {
    const el = stripRef.current;
    if(!el) return;
    const update = () => {
      const max = el.scrollWidth - el.clientWidth;
      setProgress(max > 0 ? el.scrollLeft / max : 0);
    };
    el.addEventListener('scroll', update, {passive:true});
    update();

    // drag-to-scroll
    let down = false, startX = 0, startL = 0;
    const onDown = (e) => { down = true; startX = e.pageX; startL = el.scrollLeft; el.classList.add('dragging'); };
    const onMove = (e) => { if(!down) return; e.preventDefault(); el.scrollLeft = startL - (e.pageX - startX); };
    const onUp = () => { down = false; el.classList.remove('dragging'); };
    el.addEventListener('mousedown', onDown);
    window.addEventListener('mousemove', onMove);
    window.addEventListener('mouseup', onUp);
    return () => {
      el.removeEventListener('scroll', update);
      el.removeEventListener('mousedown', onDown);
      window.removeEventListener('mousemove', onMove);
      window.removeEventListener('mouseup', onUp);
    };
  }, []);

  const scroll = (dir) => {
    const el = stripRef.current;
    if(!el) return;
    el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: 'smooth' });
  };

  const active = Math.round(progress * (props.length-1)) + 1;

  return (
    <section className="properties" id="propriedades" data-screen-label="03 Portfolio">
      <div className="props-head">
        <span className="eyebrow reveal" data-i18n="props.eyebrow">{window.t('props.eyebrow')}</span>
        <h2 className="reveal" data-i18n-html="props.title" dangerouslySetInnerHTML={{__html: window.t('props.title')}} />
        <div className="props-nav">
          <button onClick={()=>scroll(-1)} data-cursor="prev" aria-label="prev">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M15 6l-6 6 6 6"/></svg>
          </button>
          <button onClick={()=>scroll(1)} data-cursor="next" aria-label="next">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1"><path d="M9 6l6 6-6 6"/></svg>
          </button>
        </div>
      </div>

      <div className="props-strip" ref={stripRef}>
        {props.map((p, i) => (
          <article className="prop" key={p.id} data-cursor="view">
            <div className="prop-frame">
              <span className="num">/{p.id}</span>
              <span className={'status ' + (p.status.toLowerCase().includes('vend') || p.status.toLowerCase().includes('sold') ? 'sold' : '')}>{p.status}</span>
              <div className="ph">
                <div className="ph-inner">
                  <span className="big">{p.ph}</span>
                  <span>Placeholder · imagem a inserir</span>
                </div>
              </div>
              <div className="glare"/>
            </div>
            <div className="prop-body">
              <div className="prop-sub">{p.sub}</div>
              <div className="prop-title">{p.title}</div>
              <div className="prop-specs">
                <span><strong>{p.beds}</strong>quartos</span>
                <span><strong>{p.baths}</strong>wc</span>
                <span><strong>{p.m2}</strong>m²</span>
              </div>
              <div className="prop-price"><span className="cur">€</span>{p.price}</div>
            </div>
          </article>
        ))}
      </div>

      <div className="props-progress">
        <span>{String(active).padStart(2,'0')} / {String(props.length).padStart(2,'0')}</span>
        <div className="progress-track"><div className="progress-bar" style={{width: (20 + progress*80) + '%'}}/></div>
        <span>Arraste →</span>
      </div>
    </section>
  );
}
window.Properties = Properties;