/* ============================================================
   VANTIK — Páginas: Inicio, Servicios, Soluciones
   ============================================================ */

/* =================== INICIO =================== */
function PageHome() {
  return (
    <main>
      {/* HERO */}
      <section className="v-hero">
        <div className="v-hero__media"><Img imgKey="heroHome" /></div>
        <div className="v-wrap v-hero__inner">
          <div className="v-hero__panel">
            <Kicker>{HERO.kicker}</Kicker>
            <h1 className="v-hero__title">{HERO.titleLines[0]}<br />{HERO.titleLines[1]}</h1>
            <p className="v-hero__text">{HERO.text}</p>
            <Btn href="#/servicios" variant="solid">{HERO.cta}</Btn>
          </div>
        </div>
      </section>

      {/* TARJETAS PRINCIPALES */}
      <section className="v-section">
        <div className="v-wrap">
          <div className="v-grid v-grid--4">
            {HOME_CARDS.map((c) => <ServiceCard key={c.title} {...c} />)}
          </div>
        </div>
      </section>

      {/* PROYECTOS DESTACADOS */}
      <section className="v-section v-section--alt">
        <div className="v-wrap">
          <SectionHead title={HOME_PROJECTS_HEAD.title} subtitle={HOME_PROJECTS_HEAD.subtitle} />
          <div className="v-grid v-grid--4">
            {HOME_PROJECTS.map((p) => (
              <PhotoCard key={p.title} img={p.img} title={p.title} text={p.text} cta="VER PROYECTO" />
            ))}
          </div>
        </div>
      </section>

      {/* BANDA DE CONCEPTOS */}
      <ConceptBand items={CONCEPTS} variant="light" />
    </main>
  );
}

/* =================== SERVICIOS =================== */
function PageServicios() {
  return (
    <main>
      <PageHeader title={SERVICIOS_HEAD.title} subtitle={SERVICIOS_HEAD.subtitle} />
      <section className="v-section">
        <div className="v-wrap">
          <div className="v-grid v-grid--4">
            {SERVICES.map((s) => <ServiceCard key={s.title} {...s} />)}
          </div>
        </div>
      </section>
      <ConceptBand title={WHY_TITLE} items={WHY} />
    </main>
  );
}

/* =================== SOLUCIONES =================== */
function PageSoluciones() {
  return (
    <main>
      <PageHeader title={SOLUCIONES_HEAD.title} subtitle={SOLUCIONES_HEAD.subtitle} />
      <section className="v-section">
        <div className="v-wrap">
          <div className="v-grid v-grid--4">
            {SOLUTIONS.map((s) => (
              <PhotoCard key={s.title} img={s.img} title={s.title} text={s.text} cta="VER MÁS" />
            ))}
          </div>
        </div>
      </section>
      <ConceptBand title={CAPABILITIES_TITLE} items={CAPABILITIES} />
    </main>
  );
}

/* ---------- Encabezado interior reutilizable ---------- */
function PageHeader({ title, subtitle }) {
  return (
    <section className="v-pagehead">
      <div className="v-wrap">
        <h1 className="v-pagehead__title">{title}</h1>
        {subtitle && <p className="v-pagehead__sub">{subtitle}</p>}
      </div>
    </section>
  );
}

Object.assign(window, { PageHome, PageServicios, PageSoluciones, PageHeader });