/* sections2.jsx — VisionMission, Units, Philosophy, FinalCTA, Footer */

function VisionMission() {
  return (
    <section className="section dark" id="vision">
      <div className="dark__glow"></div>
      <img className="brand-watermark brand-watermark--left" src="assets/brand-atom-white.png" alt="" aria-hidden="true" />
      <div className="wrap vm-grid">
        <div className="vm-cell reveal">
          <p className="eyebrow eyebrow--on-dark">Nuestra visión</p>
          <h3 className="vm-title">Crecer mediante la colaboración y la especialización.</h3>
          <div className="prose">
            <p>
              Construir un ecosistema empresarial donde las organizaciones puedan crecer
              mediante la colaboración, la especialización y el acceso a capacidades que
              individualmente serían difíciles de desarrollar.
            </p>
            <p style={{ marginTop: '16px' }}>
              Aspiramos a crear una red de empresas, profesionales y organizaciones que generen
              <b> prosperidad compartida</b> mediante la suma de fortalezas, el intercambio de
              conocimiento y el uso inteligente de tecnología.
            </p>
          </div>
        </div>
        <div className="vm-divider" aria-hidden="true"></div>
        <div className="vm-cell reveal" style={{ transitionDelay: '140ms' }}>
          <p className="eyebrow eyebrow--on-dark">Nuestra misión</p>
          <h3 className="vm-title">Conectar a cada negocio con lo que necesita para avanzar.</h3>
          <div className="prose">
            <p>
              Impulsar el crecimiento de negocios y organizaciones conectándolos con las
              capacidades, herramientas, aliados y oportunidades que necesitan para superar sus
              desafíos y alcanzar sus objetivos.
            </p>
            <p style={{ marginTop: '16px' }}>
              Lo hacemos mediante un ecosistema que facilita la colaboración, la adopción
              tecnológica, el acceso a información estratégica y el desarrollo de nuevas
              oportunidades de negocio.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

const UNITS = [
  { id: 'pyme', icon: 'pyme', name: 'ClicPyme', href: 'landings/clicpyme/index.html',
    desc: 'Tecnología y herramientas para fortalecer la operación, comunicación y crecimiento de pequeñas y medianas empresas.' },
  { id: 'inmuebles', icon: 'inmuebles', name: 'ClicInmuebles', href: 'landings/clicinmuebles/index.html',
    desc: 'Soluciones orientadas al desarrollo, comercialización y aprovechamiento de activos inmobiliarios.' },
  { id: 'data', icon: 'data', name: 'ClicData', href: 'landings/clicdata/index.html',
    desc: 'Información estratégica y análisis para comprender mejor mercados, territorios y oportunidades.' },
  { id: 'studio', icon: 'studio', name: 'IA Studio', href: 'landings/ia-studio/index.html',
    desc: 'Diseño e implementación de inteligencia artificial aplicada a necesidades empresariales reales.' },
  { id: 'empleos', icon: 'empleos', name: 'ClicEmpleos', href: 'landings/clicempleos/index.html',
    desc: 'Unidad especializada en el mercado laboral. Cierra la brecha de talento conectando a las personas con las capacidades que el mercado actual exige —no solo las que el sistema enseña— y a las organizaciones con el talento que necesitan.' },
];

function Units() {
  return (
    <section className="section" id="unidades">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: '760px', marginBottom: '44px' }}>
          <p className="eyebrow">Nuestras unidades</p>
          <h2 className="section-title">Unidades especializadas, una misma misión.</h2>
          <p className="lead" style={{ marginTop: '20px' }}>
            Cada unidad atiende una dimensión del crecimiento. Ninguna actúa sola: juntas
            forman el ecosistema que acompaña a tu organización.
          </p>
        </div>

        <div className="unit-grid">
          {UNITS.map((u, i) => {
            const Icon = Ic[u.icon];
            return (
              <a key={u.id} className="unit-card reveal" href={u.href}
                 id={u.id === 'pyme' ? 'clicpyme' : undefined}
                 style={{ transitionDelay: `${i * 80}ms` }}>
                <span className="eco-icon"><Icon s={24} /></span>
                <h3>{u.name}</h3>
                <p>{u.desc}</p>
                <span className="unit-card__more">Ver unidad <Ic.arrow s={15} /></span>
              </a>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Philosophy() {
  return (
    <section className="section philosophy" id="filosofia" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: '720px', marginBottom: '40px' }}>
          <p className="eyebrow">Nuestra filosofía</p>
          <h2 className="section-title">Ninguna organización posee todas las respuestas.</h2>
        </div>
        <div className="philosophy__grid">
          <div className="philosophy__statements reveal">
            <p>
              El crecimiento sostenible ocurre cuando las personas y las empresas
              <b> colaboran, comparten capacidades y construyen relaciones que generan valor mutuo.</b>
            </p>
            <p>
              Por eso trabajamos para crear un entorno donde las fortalezas individuales se
              conviertan en <b>prosperidad colectiva.</b>
            </p>
          </div>
          <blockquote className="philosophy__quote reveal">
            <p>Los desafíos empresariales son demasiado grandes para enfrentarlos solos.</p>
            <p className="philosophy__quote-strong">Y las oportunidades son mucho más grandes cuando avanzamos juntos.</p>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

// Asociados del ecosistema. Cuando llegue el logo real de cada uno, basta con
// rellenar `logo` (ruta a la imagen). Mientras tanto se muestra un placeholder
// tipográfico elegante con el nombre.
const PARTNERS = [
  { name: 'Cejarte', logo: null },
  { name: 'MyShopOnlines', logo: null },
  { name: 'Mia Connecting Service', logo: null },
  { name: 'CIME Veracruz', logo: null },
];

function PartnerMark({ p }) {
  if (p.logo) {
    return <img className="partner__logo" src={p.logo} alt={p.name} />;
  }
  return (
    <span className="partner__placeholder" title={p.name}>
      <span className="partner__glyph" aria-hidden="true">{p.name.slice(0, 1)}</span>
      <span className="partner__name">{p.name}</span>
    </span>
  );
}

function Partners() {
  // Duplicamos la lista para un bucle continuo sin saltos.
  const loop = [...PARTNERS, ...PARTNERS];
  return (
    <section className="partners" id="asociados">
      <div className="wrap partners__head reveal">
        <p className="eyebrow">Asociados del ecosistema</p>
        <h2 className="section-title">No avanzamos solos. Ellos avanzan con nosotros.</h2>
        <p className="lead" style={{ marginTop: '18px', maxWidth: '60ch' }}>
          Organizaciones aliadas que suman capacidades complementarias y comparten la convicción
          de que las empresas crecen mejor cuando crecen acompañadas.
        </p>
      </div>
      <div className="partners__marquee reveal" aria-label="Asociados">
        <div className="partners__track">
          {loop.map((p, i) => (
            <div className="partner" key={p.name + i} aria-hidden={i >= PARTNERS.length}>
              <PartnerMark p={p} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section final-cta" id="contacto">
      <div className="wrap">
        <div className="final-cta__card reveal">
          <div className="dark__glow"></div>
          <img className="brand-watermark brand-watermark--cta" src="assets/brand-atom-white.png" alt="" aria-hidden="true" />
          <p className="eyebrow eyebrow--on-dark" style={{ justifyContent: 'center', display: 'flex' }}>Avancemos juntos</p>
          <h2>Las oportunidades son más grandes cuando avanzamos juntos.</h2>
          <p>
            Si tu organización busca desarrollar nuevas capacidades, conectar con aliados o
            acceder a herramientas, tecnología y oportunidades, empieza por la unidad adecuada
            del ecosistema.
          </p>
          <div className="final-cta__ctas">
            <a className="btn btn--primary" href="#contacto">Hablar con ClicNegocio <Ic.arrow /></a>
            <a className="btn btn--ghost-dark" href="#unidades">Ver las unidades</a>
          </div>
          <p className="final-cta__micro">No estás solo. Empieza por la unidad adecuada del ecosistema.</p>
        </div>
      </div>
    </section>
  );
}

const ARTICLES = [
  { cat: 'ClicEmpleos', title: 'El talento que tu negocio necesita.',
    dek: 'Contratar por capacidades —y no por títulos— cuando el mercado avanza más rápido que las aulas.',
    href: 'articulos/talento-que-tu-negocio-necesita.html' },
  { cat: 'ClicData', title: 'Operar a ciegas: el costo de decidir sin datos.',
    dek: 'Cómo empezar a leer las señales de tu propia operación sin volverte una corporación.',
    href: 'articulos/operar-a-ciegas-decidir-sin-datos.html' },
  { cat: 'IA Studio', title: 'IA en tu negocio, sin perder tu voz.',
    dek: 'Adoptar la IA con criterio, gobernada por la identidad y los límites de tu negocio.',
    href: 'articulos/ia-en-tu-negocio-sin-perder-tu-voz.html' },
  { cat: 'ClicPyme', title: 'Cuando todo depende de una sola cabeza.',
    dek: 'Dar continuidad a la operación antes de que la dependencia de una persona duela.',
    href: 'articulos/cuando-todo-depende-de-una-sola-cabeza.html' },
];

function Insights() {
  return (
    <section className="section" id="blog" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div className="insights__head reveal">
          <div>
            <p className="eyebrow">Perspectivas · Blog</p>
            <h2 className="section-title">Ideas para operar mejor, sin ruido.</h2>
          </div>
          <a className="tlink" href="perspectivas.html">Ver todo el blog <Ic.arrow s={15} /></a>
        </div>
        <div className="related-grid">
          {ARTICLES.slice(0, 3).map((a) => (
            <a key={a.href} className="post-card reveal" href={a.href}>
              <p className="post-card__cat">{a.cat}</p>
              <h2>{a.title}</h2>
              <p>{a.dek}</p>
              <div className="post-card__meta">
                <span>Leer artículo</span>
                <span className="tlink" style={{ marginLeft: 'auto' }}>Leer <Ic.arrow s={15} /></span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    ['Ecosistema', [['ClicPyme', '#unidades'], ['ClicInmuebles', '#unidades'], ['ClicData', '#unidades'], ['IA Studio', '#unidades'], ['ClicEmpleos', '#unidades']]],
    ['Organización', [['Nuestra historia', '#historia'], ['Qué es', '#que-es'], ['Visión y misión', '#vision'], ['Filosofía', '#filosofia'], ['Perspectivas', 'perspectivas.html']]],
    ['Contacto', [['Hablar con nosotros', '#contacto'], ['Ver las unidades', '#unidades']]],
  ];
  return (
    <footer className="footer" id="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div className="footer__brand">
            <a className="brand" href="#top">
              <img src="assets/logo-mark.png" alt="ClicNegocio" style={{ height: '34px' }} />
              <span className="brand__name">Clic<b>Negocio</b></span>
            </a>
            <p className="footer__tagline">
              Un ecosistema empresarial que conecta personas, organizaciones, tecnología y
              oportunidades para desarrollar capacidades y crecer juntos.
            </p>
          </div>
          {cols.map(([title, links]) => (
            <div key={title} className="footer__col">
              <h5>{title}</h5>
              {links.map(([label, href]) => <a key={label} href={href}>{label}</a>)}
            </div>
          ))}
        </div>
        <div className="footer__bottom">
          <span>© 2026 ClicNegocio · Ecosistema empresarial</span>
          <span>Las fortalezas individuales se convierten en prosperidad colectiva.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { VisionMission, Units, Philosophy, Partners, Insights, FinalCTA, Footer });