const { Button, Card, Icon, Input, Badge } = window.MiradorDesignSystem_4bae5c;

function Tarjeta({ a }) {
  return (
    <a className="cm-n-card" href={artUrl(a.slug)}>
      <div className="cm-n-img"><img src={portadaArt(a) || placeholderPost(a)} alt={a.titulo} loading="lazy" onError={(e) => { e.target.src = placeholderPost(a); }} /></div>
      <span className="cm-n-meta">{a.categoria} · {fechaLarga(a.fecha)}</span>
      <span className="cm-n-title">{a.titulo}</span>
      {a.resumen ? <span className="cm-n-sub">{a.resumen}</span> : null}
      <span className="cm-n-more">Leer<Icon name="arrow-right" size={14} /></span>
    </a>
  );
}

function App() {
  const [arts] = useNovedades();
  const [join, setJoin] = React.useState(false);
  const [q, setQ] = React.useState('');
  const [cat, setCat] = React.useState('Todas');
  const [tope, setTope] = React.useState(9);
  const cats = React.useMemo(() => ['Todas', ...Array.from(new Set(arts.map(a => a.categoria).filter(Boolean)))], [arts]);
  const filtrados = React.useMemo(() => {
    const t = q.trim().toLowerCase();
    return arts.filter(a =>
      (cat === 'Todas' || a.categoria === cat) &&
      (!t || (a.titulo + ' ' + (a.resumen || '')).toLowerCase().includes(t)));
  }, [arts, q, cat]);
  const destacado = filtrados[0];
  const resto = filtrados.slice(1, 1 + tope);

  React.useEffect(() => {
    setSeo({
      title: 'Novedades inmobiliarias en Quito — casamia.ec',
      description: 'Historias de familias, créditos hipotecarios, lanzamientos de proyectos y guías para comprar tu casa en Quito y los valles.',
      canonical: '/novedades', image: arts[0] ? portadaArt(arts[0]) : undefined, imageAlt: arts[0]?.titulo,
      keywords: 'novedades inmobiliarias quito, mercado inmobiliario ecuador, biess 2026, proyectos nuevos quito'
    });
    jsonLd('organizacion', orgLd());
    jsonLd('ruta', breadcrumbLd([['Inicio', '/'], ['Novedades', '/novedades']]));
    jsonLd('blog', {
      '@context': 'https://schema.org', '@type': 'Blog', '@id': SEO.site + '/novedades#blog',
      name: 'Novedades casamia.ec', url: SEO.site + '/novedades', inLanguage: 'es-EC',
      publisher: { '@id': SEO.site + '/#organizacion' },
      blogPost: arts.slice(0, 20).map(a => ({
        '@type': 'BlogPosting', headline: a.titulo, url: SEO.site + '/novedades/' + a.slug,
        datePublished: a.fecha, image: portadaArt(a), articleSection: a.categoria,
        author: { '@type': 'Organization', name: a.autor || 'casamia.ec' }
      }))
    });
  }, [arts.length]);

  return (
    <div>
      <Header onJoin={() => setJoin(true)} />
      <main>
        <div className="cm-n-head">
          <Badge tone="wash" icon="newspaper">Novedades</Badge>
          <h1>Lo último del mercado inmobiliario en Quito</h1>
          <p>Historias de familias, créditos, lanzamientos y todo lo que necesitas saber para comprar tu casa.</p>
        </div>

        <div className="cm-n-tools">
          <div className="cm-n-search">
            <Input placeholder="Buscar en novedades" value={q} onChange={(e) => { setQ(e.target.value); setTope(9); }} />
          </div>
          <div className="cm-chips">
            {cats.map(c => (
              <button key={c} type="button" className={'cm-chip' + (cat === c ? ' is-on' : '')} onClick={() => { setCat(c); setTope(9); }}>{c}</button>
            ))}
          </div>
        </div>

        {destacado ? (
          <a className="cm-n-hero" href={artUrl(destacado.slug)}>
            <div className="cm-n-hero-img"><img src={portadaArt(destacado) || placeholderPost(destacado)} alt={destacado.titulo} onError={(e) => { e.target.src = placeholderPost(destacado); }} /></div>
            <div className="cm-n-hero-copy">
              <span className="cm-n-meta">{destacado.categoria} · {fechaLarga(destacado.fecha)}{destacado.lectura ? ' · ' + destacado.lectura : ''}</span>
              <h2>{destacado.titulo}</h2>
              {destacado.resumen ? <p>{destacado.resumen}</p> : null}
              <span className="cm-n-more">Leer la historia completa<Icon name="arrow-right" size={15} /></span>
            </div>
          </a>) : null}

        {resto.length ? (
          <section className="cm-n-band">
            <h2 className="cm-n-h2">Más novedades</h2>
            <div className="cm-n-grid">{resto.map(a => <Tarjeta key={a.id || a.slug} a={a} />)}</div>
            {filtrados.length > 1 + tope ? (
              <div className="cm-n-mas"><Button variant="outline" onClick={() => setTope(t => t + 9)}>Ver más novedades</Button></div>
            ) : null}
          </section>) : null}

        {!filtrados.length ? (
          <div className="cm-n-vacio">
            <Icon name="search" size={22} />
            <strong>Sin resultados para «{q}»</strong>
            <p>Prueba con otra palabra o mira todas las categorías.</p>
            <Button variant="outline" onClick={() => { setQ(''); setCat('Todas'); }}>Ver todas</Button>
          </div>) : null}

        <section className="cm-n-cta">
          <div>
            <h2>¿Buscas casa ahora?</h2>
            <p>Mira las propiedades verificadas en Quito y los valles, o escríbenos y te ayudamos a filtrar según tu crédito.</p>
          </div>
          <div className="cm-n-cta-btns">
            <Button icon="house" onClick={() => { location.href = BACKEND.links.compra; }}>Ver propiedades</Button>
            <Button variant="outline" icon="message-circle" onClick={() => go(WA('Hola, vi las novedades en casamia.ec y quisiera asesoría'))}>Escribir por WhatsApp</Button>
          </div>
        </section>
      </main>
      <Footer onJoin={() => setJoin(true)} />
      <JoinDialog open={join} onClose={() => setJoin(false)} />
      <MobileBar />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);