/* eslint-disable react/prop-types */
/**
 * App · Ficha individual de distrito.
 * Carga el catálogo en window.DISTRITOS_DATA y busca por ?slug=...
 *
 * Si el slug no existe (o no se pasó), muestra una página 404 amigable
 * con link de regreso al listado.
 */

const { useState: uS_App, useEffect: uE_App } = React;

function FichaApp() {
  const [d, setD] = uS_App(null);
  const [notFound, setNotFound] = uS_App(false);

  uE_App(() => {
    const params = new URLSearchParams(window.location.search);
    const slug = params.get('slug') || window.location.hash.replace('#', '');
    const all = window.DISTRITOS_DATA || [];
    const match = all.find(x => x.slug === slug);
    if (match) {
      setD(match);
      document.title = `${match.name} · Distritos · Prosperia`;
    } else {
      setNotFound(true);
      document.title = 'Distrito no encontrado · Prosperia';
    }
  }, []);

  if (notFound) {
    return (
      <React.Fragment>
        <window.CobreDefs />
        <window.Header />
        <main>
          <section style={notFoundStyles.section}>
            <div className="container" style={notFoundStyles.inner}>
              <span className="eyebrow">DISTRITO NO ENCONTRADO</span>
              <h1 style={notFoundStyles.title}>
                404 ·<br/>
                <span style={notFoundStyles.titleSoft}>Ese distrito no está en el catálogo.</span>
              </h1>
              <p style={notFoundStyles.lead}>
                Es posible que el link esté roto o que el distrito todavía no esté publicado. Te llevamos de vuelta al listado completo.
              </p>
              <div style={notFoundStyles.cta}>
                <a href="/distritos/Distritos.html" className="btn btn-copper" data-cursor="link">
                  Ver todos los distritos
                  <window.Icon name="arrow-right" size={16} stroke={1.8} />
                </a>
                <a href="/home/Home.html" style={notFoundStyles.back} data-cursor="link">Ir al inicio</a>
              </div>
            </div>
          </section>
        </main>
        <window.Footer />
      <window.WhatsAppFab />
      </React.Fragment>
    );
  }

  if (!d) {
    return (
      <React.Fragment>
        <window.CobreDefs />
        <window.Header />
        <main style={{ minHeight: '60vh' }} />
        <window.Footer />
      <window.WhatsAppFab />
      </React.Fragment>
    );
  }

  return (
    <React.Fragment>
      <window.CobreDefs />
      <window.Cursor />
      <window.SectionTransitions />
      <window.Header />
      <main>
        <window.FichaHero d={d} />
        <window.FichaBody d={d} />
        <window.ContactSection />
      </main>
      <window.Footer />
      <window.WhatsAppFab />
    </React.Fragment>
  );
}

const notFoundStyles = {
  section: {
    background: 'var(--color-cream)',
    minHeight: '85vh',
    paddingTop: 200,
    paddingBottom: 120,
    display: 'flex',
    alignItems: 'center',
  },
  inner: { maxWidth: 720 },
  title: {
    margin: '20px 0 0',
    fontWeight: 800,
    fontSize: 'clamp(28px, 6vw, 80px)',
    lineHeight: 1.05,
    color: 'var(--color-navy-deep)',
    letterSpacing: '-0.01em',
  },
  titleSoft: { color: 'var(--color-navy-medium)', fontWeight: 500 },
  lead: {
    margin: '24px 0 0',
    fontSize: 17, lineHeight: 1.7,
    color: 'var(--color-navy-medium)',
    maxWidth: 560,
  },
  cta: {
    marginTop: 40,
    display: 'flex', alignItems: 'center', gap: 24, flexWrap: 'wrap',
  },
  back: {
    fontSize: 13, fontWeight: 700,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    color: 'var(--color-navy-medium)',
    borderBottom: '1px solid rgba(33,52,64,0.3)',
    paddingBottom: 3,
  },
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FichaApp />);