/* sections1.jsx — Header, Hero, Story (Nuestra historia), WhatIs */

function Header() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const f = () => setScrolled(window.scrollY > 12);
    f(); window.addEventListener('scroll', f, { passive: true });
    return () => window.removeEventListener('scroll', f);
  }, []);
  const links = [
    ['Ecosistema', 'que-es'], ['Historia', 'historia'],
    ['Unidades', 'unidades'], ['Filosofía', 'filosofia'],
  ];
  return (
    <header className={"header" + (scrolled ? " scrolled" : "")}>
      <div className="wrap header__inner">
        <a className="brand" href="#top">
          <img src="assets/logo-mark.png" alt="ClicNegocio" />
          <span className="brand__name">Clic<b>Negocio</b></span>
        </a>
        <nav className="nav">
          {links.map(([label, id]) => <a key={id} href={"#" + id}>{label}</a>)}
          <a href="perspectivas.html">Blog</a>
          <a href="#contacto">Contacto</a>
        </nav>
        <div className="header__cta">
          <a className="btn btn--primary btn--sm" href="#contacto">
            Hablar con nosotros <Ic.arrow s={15} />
          </a>
          <button className="menu-btn" aria-label="Menú"><Ic.menu /></button>
        </div>
      </div>
    </header>
  );
}

const ORBIT_NODES = [
  { label: 'ClicPyme',      a: 270 },
  { label: 'ClicInmuebles', a: 342 },
  { label: 'ClicData',      a:  54 },
  { label: 'IA Studio',     a: 126 },
  { label: 'ClicEmpleos',   a: 198 },
];

function OrbitAtom() {
  // Dos elipses exactamente como el logo-átomo de ClicNegocio:
  // Elipse 1 (principal, más gruesa): inclinada ~-42° (arriba-izquierda → abajo-derecha)
  // Elipse 2 (secundaria, más fina): inclinada ~+38° (arriba-derecha → abajo-izquierda)
  return (
    <svg className="orbit__atom" viewBox="0 0 100 100" fill="none" aria-hidden="true">
      <ellipse cx="50" cy="50" rx="48" ry="14.5"
        stroke="var(--navy)" strokeWidth="1.4" strokeOpacity="0.18"
        transform="rotate(-42 50 50)" />
      <ellipse cx="50" cy="50" rx="48" ry="14.5"
        stroke="var(--navy)" strokeWidth="0.75" strokeOpacity="0.12"
        transform="rotate(38 50 50)" />
    </svg>
  );
}

function Orbit() {
  return (
    <div className="orbit">
      <OrbitAtom />
      <div className="orbit__ring orbit__ring--outer" style={{ inset: '4%' }}></div>
      <div className="orbit__ring orbit__ring--inner" style={{ inset: '22%' }}></div>
      <div className="orbit__core">
        <div className="k">Clic<b>Negocio</b><small>Ecosistema</small></div>
      </div>
      <div className="orbit__arms">
        {ORBIT_NODES.map((n) => (
          <div key={n.label} className="orbit__arm" style={{ '--a': n.a + 'deg', '--an': (-n.a) + 'deg' }}>
            <div className="orbit__node">
              <span className="dot"></span>{n.label}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Hero() {
  return (
    <section className="hero section--tight" id="top">
      <div className="wrap hero__grid">
        <div className="hero__copy">
          <p className="eyebrow reveal">Ecosistema empresarial</p>
          <h1 className="reveal hero__headline">No estás <em>solo</em>.</h1>
          <p className="hero__sub reveal">
            Los negocios rara vez fracasan por falta de esfuerzo. Enfrentan desafíos que
            requieren capacidades que aún no poseen —comunicación, tecnología, datos,
            operación, talento, oportunidades— y la mayoría intenta resolverlos sola.
          </p>
          <div className="hero__support reveal">
            ClicNegocio es el ecosistema que conecta personas, organizaciones, tecnología y
            oportunidades para desarrollar capacidades y crecer. <b>Juntos.</b>
          </div>
          <div className="hero__ctas reveal">
            <a className="btn btn--primary" href="#que-es">Conocer el ecosistema <Ic.arrow /></a>
            <a className="btn btn--ghost" href="#unidades">Ver las unidades</a>
          </div>
          <div className="hero__pills reveal">
            <span>Personas</span><span>Organizaciones</span><span>Tecnología</span><span>Oportunidades</span>
          </div>
        </div>
        <div className="hero__visual reveal"><Orbit /></div>
      </div>
    </section>
  );
}

function Context() {
  return (
    <section className="section context" id="contexto" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: '840px', marginBottom: '48px' }}>
          <p className="eyebrow">Por qué importa</p>
          <h2 className="section-title" style={{ maxWidth: '22ch' }}>
            Las PyMEs mueven el mundo. No deberían moverlo solas.
          </h2>
          <p className="lead" style={{ marginTop: '22px' }}>
            Las pequeñas y medianas empresas son el motor de la economía: generan la mayoría
            de los empleos y sostienen a las comunidades donde operan. Sin embargo, cargan con
            dos brechas que no crearon.
          </p>
        </div>

        <div className="gap-grid">
          <div className="gap-card reveal">
            <span className="gap-card__n">01</span>
            <h3>La brecha de herramientas</h3>
            <p>
              La tecnología, la operación y los datos que dan ventaja a las grandes
              corporaciones rara vez llegan, a su escala y a su alcance, al negocio pequeño.
            </p>
          </div>
          <div className="gap-card reveal" style={{ transitionDelay: '120ms' }}>
            <span className="gap-card__n">02</span>
            <h3>La brecha de talento</h3>
            <p>
              El sistema educativo forma para un mercado que ya cambió. Las capacidades que un
              negocio necesita hoy no siempre coinciden con las que el sistema enseña.
            </p>
          </div>
        </div>

        <div className="premise reveal">
          <div className="premise__glow" aria-hidden="true"></div>
          <p className="premise__mark">Nuestra premisa</p>
          <p className="premise__line">Pensar <em>global</em>, actuar <em>local</em>.</p>
          <p className="premise__sub">
            Ponemos capacidades de estándar global al servicio de la realidad local de cada
            empresa. Lo que antes solo alcanzaban las grandes corporaciones, hoy puede operar
            en el negocio de la esquina.
          </p>
        </div>
      </div>
    </section>
  );
}

const STORY_NEEDS = [
  ['dot', 'Necesitan herramientas.'],
  ['dot', 'Necesitan conocimiento.'],
  ['dot', 'Necesitan aliados.'],
  ['dot', 'Necesitan oportunidades.'],
  ['check', 'Y, sobre todo, necesitan desarrollar capacidades.'],
];

function Story() {
  return (
    <section className="section story" id="historia" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap story__grid">
        <div className="story__intro reveal">
          <p className="eyebrow">Nuestra historia</p>
          <h2 className="section-title">ClicNegocio nació desde la experiencia de emprender.</h2>
          <p className="lead" style={{ marginTop: '22px' }}>
            No surgió en una oficina corporativa ni como un proyecto académico. Surgió
            enfrentando los mismos desafíos que viven miles de emprendedores y pequeños
            empresarios todos los días.
          </p>
        </div>

        <div className="story__body">
          <p className="prose reveal">
            Todo comenzó con una necesidad sencilla: <b>comunicar una propuesta al mercado.</b>
          </p>
          <p className="prose reveal">
            Lo que parecía un problema de diseño terminó revelando una realidad más profunda.
            Los negocios necesitan mucho más que publicidad para crecer.
          </p>

          <ul className="story__needs">
            {STORY_NEEDS.map(([ic, txt], i) => (
              <li key={i} className={"reveal" + (i === 4 ? " story__needs-strong" : "")}
                  style={{ transitionDelay: `${i * 80}ms` }}>
                <span className="ic">{ic === 'check' ? <Ic.check s={16} /> : <Ic.dot s={15} />}</span>{txt}
              </li>
            ))}
          </ul>

          <p className="prose reveal">
            Con el tiempo entendimos que muchos empresarios enfrentan problemas similares:
            intentan resolver solos retos que requieren distintas especialidades.
          </p>

          <p className="story__born reveal">Así nació ClicNegocio.</p>

          <div className="story__not">
            <span className="story__not-line reveal" style={{ transitionDelay: '0ms' }}>No como una agencia.</span>
            <span className="story__not-line reveal" style={{ transitionDelay: '90ms' }}>No como una consultora.</span>
            <span className="story__not-line reveal" style={{ transitionDelay: '180ms' }}>No como una empresa de software.</span>
            <p className="story__not-yes reveal" style={{ transitionDelay: '300ms' }}>
              Sino como un <b>ecosistema empresarial</b> diseñado para conectar personas,
              organizaciones, tecnología y oportunidades.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Refrain() {
  return (
    <section className="refrain" id="refrain">
      <div className="wrap">
        <p className="refrain__eyebrow reveal">Lo que de verdad importa</p>
        <p className="refrain__line reveal">No estás <em>solo</em>.</p>
        <p className="refrain__sub reveal">
          Antes que la tecnología, el software o los datos, ese es el punto de partida de todo
          lo que construimos. Emprender no tiene por qué ser en soledad.
        </p>
      </div>
    </section>
  );
}

function WhatIs() {
  return (
    <section className="section" id="que-es">
      <div className="wrap split">
        <div className="reveal">
          <p className="eyebrow">Qué es ClicNegocio</p>
          <h2 className="section-title">Un ecosistema que ayuda a las organizaciones a crecer.</h2>
        </div>
        <div className="prose reveal">
          <p>
            ClicNegocio es un ecosistema que ayuda a empresas y organizaciones a
            <b> desarrollar las capacidades que necesitan para crecer.</b>
          </p>
          <p>
            A través de nuestras diferentes unidades especializadas facilitamos el acceso a
            herramientas, conocimiento, tecnología, datos, aliados estratégicos y nuevas
            oportunidades de desarrollo.
          </p>
          <div className="whatis__claim">
            <p>Nuestro objetivo no es <span className="strike">sustituir</span> a las empresas.</p>
            <p className="whatis__claim-strong">Nuestro objetivo es <b>fortalecerlas.</b></p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, Context, Story, Refrain, WhatIs });