// landing.jsx
// Main composition of the Vig-ia Empresarial landing page.
// One component that re-flows for `variant: 'desktop' | 'mobile'`
// and is driven by Tweaks (passed via props from app.jsx).

function Landing({ variant, tweaks }) {
  const {
    headline,             // index into HEADLINES
    heroLayout,           // 'mockup' | 'centered' | 'stats'
    ctaColor,             // 'cyan' | 'blue' | 'navy'
    density,              // 'compact' | 'regular' | 'aireada'
    sectionOrder,         // 'explain-first' | 'pain-first'
    dosStyle,             // 'light' | 'dark'
  } = tweaks;

  const [teaserOpen, setTeaserOpen] = React.useState(false);
  const openTeaser = () => setTeaserOpen(true);
  const closeTeaser = () => setTeaserOpen(false);

  // Map CTA color to button modifier class
  const ctaClass =
    ctaColor === "blue" ? "vig-btn--blue" :
    ctaColor === "navy" ? "vig-btn--navy" :
    "vig-btn--primary"; // cyan default

  // Sections that participate in reordering after the hero
  const orderedSections = sectionOrder === "pain-first"
    ? [<PainSection key="pain" variant={variant} ctaClass={ctaClass} onOpenTeaser={openTeaser} />,
       <WhatWeDoSection key="what" variant={variant} />]
    : [<WhatWeDoSection key="what" variant={variant} />,
       <PainSection key="pain" variant={variant} ctaClass={ctaClass} onOpenTeaser={openTeaser} />];

  return (
    <div className="vig-landing" data-variant={variant} data-density={density}>
      <Header variant={variant} />

      <Hero
        variant={variant}
        layout={heroLayout}
        headlineIdx={headline}
        ctaClass={ctaClass}
        onOpenTeaser={openTeaser}
      />

      <LogosRow variant={variant} />

      {orderedSections}

      <DosFormasSection variant={variant} ctaClass={ctaClass} dark={dosStyle === "dark"} onOpenTeaser={openTeaser} />

      <HowItWorksSection variant={variant} ctaClass={ctaClass} onOpenTeaser={openTeaser} />

      <StatsSection variant={variant} />

      <TestimonialsSection variant={variant} />

      <FinalCTA variant={variant} ctaClass={ctaClass} onOpenTeaser={openTeaser} />

      <Footer variant={variant} />

      {teaserOpen && (
        <DiagnosticoTeaser variant={variant} accentClass={ctaClass} onClose={closeTeaser} />
      )}
    </div>
  );
}

// ── Hero ─────────────────────────────────────────────────────────
const HEADLINES = [
  { lead: "De pequeña a empresa", accent: "sólida." },
  { lead: "Ordena tu negocio.", accent: "Crece sin miedo." },
  { lead: "Tu empresa, lista para", accent: "crecer en serio." },
  { lead: "Profesionaliza sin", accent: "perder tu esencia." },
];

function Hero({ variant, layout, headlineIdx, ctaClass, onOpenTeaser }) {
  const h = HEADLINES[headlineIdx] || HEADLINES[0];
  const isCentered = layout === "centered";
  const isStats = layout === "stats";

  return (
    <section className={"vig-hero" + (isCentered ? " vig-hero--centered" : "")}>
      <div className="vig-hero__inner">
        <div>
          <HeroPill light>Para empresas mexicanas con ambición</HeroPill>
          <h1 className="vig-hero__title">
            {h.lead} <em>{h.accent}</em>
          </h1>
          <p className="vig-hero__lead">
            Vig-ia es tu socio para ordenar tu negocio, crecer sin tropezarte y competir de tú a tú con los grandes. Empieza con un diagnóstico de 5 minutos, sin enredos.
          </p>
          <div className="vig-hero__cta">
            <button className={"vig-btn vig-btn--lg " + ctaClass} onClick={onOpenTeaser}>
              Haz tu diagnóstico gratis <Icons.arrowRight />
            </button>
            <button className="vig-btn vig-btn--lg vig-btn--ghost-light">
              Conoce nuestra consultoría
            </button>
          </div>
          <div className="vig-hero__trust-wrap">
            <TrustLine />
          </div>
          {isStats && (
            <div className="vig-hero__stats">
              <div className="vig-hero__stat">
                <div className="num">25+</div>
                <div className="lbl">años combinados</div>
              </div>
              <div className="vig-hero__stat">
                <div className="num">150+</div>
                <div className="lbl">PyMEs acompañadas</div>
              </div>
              <div className="vig-hero__stat">
                <div className="num">40+</div>
                <div className="lbl">certificaciones</div>
              </div>
            </div>
          )}
        </div>

        {/* Right column: mockup cards (only on default layout) */}
        {layout === "mockup" && (
          <div className="vig-hero__mock">
            {variant === "mobile" ? <HeroMockCardsMobile /> : <HeroMockCards />}
          </div>
        )}
      </div>
    </section>
  );
}

// ── Logos row ────────────────────────────────────────────────────
function LogosRow({ variant }) {
  return (
    <section className="vig-logos">
      <p className="vig-logos__caption">Empresas mexicanas que ya están un paso adelante</p>
      <div className="vig-logos__row">
        <span className="vig-logos__item"><span className="vig-logos__shape vig-logos__shape--diamond" />Marca uno</span>
        <span className="vig-logos__item"><span className="vig-logos__shape" />Empresa Dos</span>
        <span className="vig-logos__item"><span className="vig-logos__shape vig-logos__shape--circle" />Logo Tres</span>
        <span className="vig-logos__item"><span className="vig-logos__shape vig-logos__shape--diamond" />Compañía 4</span>
        {variant !== "mobile" && (
          <span className="vig-logos__item"><span className="vig-logos__shape" />Brand Cinco</span>
        )}
      </div>
    </section>
  );
}

// ── ¿Qué hacemos? — 3 columns ────────────────────────────────────
function WhatWeDoSection({ variant }) {
  return (
    <section className="vig-section vig-section--cream" id="que-hacemos">
      <div className="vig-section__head">
        <p className="vig-section__eyebrow">Qué hacemos</p>
        <h2 className="vig-section__title">Acompañamos a empresas mexicanas en su siguiente nivel.</h2>
        <p className="vig-section__lead">
          Cada empresa está en un punto distinto. Algunas necesitan ordenarse, otras certificarse, otras escalar. Te ayudamos a identificar dónde estás y qué necesitas para crecer.
        </p>
      </div>

      <div className="vig-feat-row">
        <FeatureCard
          icon={<Icons.compass />}
          title="Diagnóstico claro"
          body="Te ayudamos a ver con claridad dónde está parado tu negocio y qué te está deteniendo. Honesto, accionable, en 5 minutos."
        />
        <FeatureCard
          icon={<Icons.users />}
          title="Consultoría a tu lado"
          body="Caminamos contigo. Un equipo que ya estuvo donde estás y sabe qué funciona en empresas como la tuya."
        />
        <FeatureCard
          icon={<Icons.zap />}
          title="Apps prácticas"
          body="Herramientas simples para que dejes de pelear con hojas de cálculo y dediques tu día a lo que sí importa: crecer."
        />
      </div>
    </section>
  );
}

function FeatureCard({ icon, title, body }) {
  return (
    <article className="vig-feat-card">
      <span className="vig-feat-icon">{icon}</span>
      <h3 className="vig-feat-card__title">{title}</h3>
      <p className="vig-feat-card__body">{body}</p>
    </article>
  );
}

// ── Preguntas que te quitan el sueño ─────────────────────────────
function PainSection({ variant, ctaClass, onOpenTeaser }) {
  const questions = [
    "¿Cómo profesionalizo mi empresa sin perder lo que la hace única?",
    "¿Qué necesito para que las grandes empresas me consideren proveedor?",
    "¿Por dónde empiezo si quiero certificarme?",
    "¿Cómo dejo de operar día a día y empiezo a dirigir?",
  ];

  return (
    <section className="vig-section" id="preguntas">
      <div className="vig-section__head">
        <p className="vig-section__eyebrow">Por qué existe Vig-ia</p>
        <h2 className="vig-section__title">Las preguntas que te quitan el sueño.</h2>
        <p className="vig-section__lead">
          Si te has hecho alguna de estas preguntas, no estás solo. La mayoría de los dueños de PyME en México las viven a diario. Sin recetas genéricas: respuestas pensadas para tu caso.
        </p>
      </div>

      <div className="vig-pain-grid">
        {questions.map((q) => (
          <div key={q} className="vig-pain-card">
            <span className="vig-pain-card__q">?</span>
            <span>{q}</span>
          </div>
        ))}
      </div>

      <div className="vig-pain-closer">
        <strong>Vig-ia Empresarial existe para responder estas preguntas</strong>, con un equipo de consultores que ya las han contestado para empresas como la tuya.
        <small>Sin promesas vacías. Sin recetas genéricas.</small>
      </div>
    </section>
  );
}

// ── Dos formas de crecer (Consultoría + Apps) ────────────────────
function DosFormasSection({ variant, ctaClass, dark, onOpenTeaser }) {
  return (
    <section className={"vig-section" + (dark ? " vig-section--cream" : "")} id="dos-formas">
      <div className="vig-section__head">
        <p className="vig-section__eyebrow">Cómo te acompañamos</p>
        <h2 className="vig-section__title">Dos formas de crecer con Vig-ia.</h2>
        <p className="vig-section__lead">
          Empezamos por el assessment. A partir de ahí, te acompañamos con consultoría experta o con herramientas prácticas. O las dos. Lo que tu empresa necesite.
        </p>
      </div>

      <div className={"vig-dos" + (dark ? " vig-dos--dark" : "")}>
        <article className="vig-dos-card" id="consultoria">
          <span className="vig-dos-card__tag">Disponible ahora</span>
          <h3 className="vig-dos-card__title">Consultoría Vig-ia</h3>
          <p className="vig-dos-card__body">
            Un equipo senior con experiencia real en PyMEs mexicanas, contigo para diseñar e implementar el plan de crecimiento. Desde profesionalización de procesos hasta certificaciones ISO.
          </p>
          <ul className="vig-dos-card__list">
            <li>Diagnóstico profundo y plan a la medida</li>
            <li>Implementación acompañada, no solo recomendaciones</li>
            <li>Apoyo en certificaciones y auditorías</li>
            <li>Sesiones quincenales con consultor asignado</li>
          </ul>
          <button className={"vig-btn " + (dark ? "vig-btn--primary" : ctaClass)}>
            Conoce nuestra consultoría <Icons.arrowRight />
          </button>
        </article>

        <article className="vig-dos-card" id="apps">
          <span className="vig-dos-card__tag vig-dos-card__tag--soon">Próximamente</span>
          <h3 className="vig-dos-card__title">Apps Vig-ia</h3>
          <p className="vig-dos-card__body">
            Herramientas accesibles y fáciles de usar para administrar tu negocio sin esfuerzo. Diseñadas con técnicas de UX moderna y, donde tiene sentido, con IA que hace el trabajo pesado por ti.
          </p>
          <ul className="vig-dos-card__list">
            <li>Suscripciones al alcance de cualquier PyME</li>
            <li>Listas para usar, sin equipo de TI</li>
            <li>Cubren las áreas clave de la administración</li>
            <li>Por dueños de PyME, para dueños de PyME</li>
          </ul>
          <button className="vig-btn vig-btn--ghost">
            Únete a la lista de espera <Icons.arrowRight />
          </button>
        </article>
      </div>
    </section>
  );
}

// ── Cómo funciona — 3 steps ──────────────────────────────────────
function HowItWorksSection({ variant, ctaClass, onOpenTeaser }) {
  const steps = [
    {
      n: "01",
      title: "Haz el assessment",
      body: "5 minutos. Sin registro. 25 preguntas honestas sobre tu negocio y el momento en el que estás.",
    },
    {
      n: "02",
      title: "Recibe tu ruta",
      body: "Te entregamos las prioridades concretas y, si aplica, te conectamos con el consultor adecuado para tu caso.",
    },
    {
      n: "03",
      title: "Crece con apoyo",
      body: "Trabajamos contigo. Cuando lancemos las Apps Vig-ia, las sumamos a tu plan sin costo extra durante el beta.",
    },
  ];

  return (
    <section className="vig-section vig-section--cream" id="como-funciona">
      <div className="vig-section__head">
        <p className="vig-section__eyebrow">Cómo funciona</p>
        <h2 className="vig-section__title">Empieza con un diagnóstico, sigue con un plan.</h2>
        <p className="vig-section__lead">
          El camino para profesionalizar tu PyME es más corto de lo que crees. Solo necesita un primer paso honesto.
        </p>
      </div>

      <div className="vig-steps">
        {steps.map((s) => (
          <div className="vig-step" key={s.n}>
            <span className="vig-step-num">{s.n}</span>
            <div>
              <h3 className="vig-step__title">{s.title}</h3>
              <p className="vig-step__body">{s.body}</p>
            </div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 40, display: "flex", justifyContent: "center" }}>
        <button className={"vig-btn vig-btn--lg " + ctaClass} onClick={onOpenTeaser}>
          Iniciar assessment ahora <Icons.arrowRight />
        </button>
      </div>
    </section>
  );
}

// ── Stats (only numbers, no faces) ───────────────────────────────
function StatsSection({ variant }) {
  return (
    <section className="vig-section" id="equipo" style={{ paddingTop: 72, paddingBottom: 72 }}>
      <div className="vig-section__head" style={{ textAlign: "center", marginBottom: 32 }}>
        <p className="vig-section__eyebrow" style={{ display: 'block', textAlign: 'center' }}>El equipo</p>
        <h2 className="vig-section__title" style={{ marginInline: 'auto', textAlign: 'center' }}>Consultores que ya estuvieron en tu lugar.</h2>
        <p className="vig-section__lead" style={{ marginInline: 'auto', textAlign: 'center' }}>
          Nuestro equipo combina liderazgo, UX, desarrollo, recursos humanos y crecimiento de negocio. Experiencia real, resultados reales.
        </p>
      </div>

      <div className="vig-stats">
        <div>
          <div className="vig-stat__num">25+</div>
          <div className="vig-stat__lbl">años de experiencia combinada</div>
        </div>
        <div>
          <div className="vig-stat__num">40+</div>
          <div className="vig-stat__lbl">certificaciones implementadas</div>
        </div>
        <div>
          <div className="vig-stat__num">150+</div>
          <div className="vig-stat__lbl">PyMEs acompañadas</div>
        </div>
      </div>
    </section>
  );
}

// ── Testimonials (placeholders) ──────────────────────────────────
function TestimonialsSection({ variant }) {
  const items = [
    {
      quote: "El assessment de Vig-ia nos abrió los ojos. Sabíamos que algo no funcionaba, pero no dónde. Hoy ya tenemos plan y equipo trabajando.",
      name: "Roberto Martínez",
      role: "Director, Manufactura Precisión",
      initials: "RM",
    },
    {
      quote: "Pasamos de operar a dirigir. Mi equipo ahora ejecuta sin que yo tenga que estar en cada decisión.",
      name: "Laura Pérez",
      role: "CEO, Distribuidora Nacional",
      initials: "LP",
    },
    {
      quote: "Logramos nuestra primera certificación en 8 meses. Hoy somos proveedores de dos empresas grandes.",
      name: "Carlos Gutiérrez",
      role: "Fundador, Servicios Industriales",
      initials: "CG",
    },
  ];
  return (
    <section className="vig-section vig-section--cream" id="testimonios">
      <div className="vig-section__head">
        <p className="vig-section__eyebrow">PyMEs que ya empezaron</p>
        <h2 className="vig-section__title">Empresas mexicanas que están un paso adelante.</h2>
      </div>
      <div className="vig-testi-grid">
        {items.map((t) => (
          <article key={t.name} className="vig-testi" data-placeholder="true">
            <p className="vig-testi__quote">{t.quote}</p>
            <div className="vig-testi__person">
              <span className="vig-testi__avatar">{t.initials}</span>
              <div>
                <div className="vig-testi__name">{t.name}</div>
                <div className="vig-testi__role">{t.role}</div>
              </div>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ── Final CTA panel ──────────────────────────────────────────────
function FinalCTA({ variant, ctaClass, onOpenTeaser }) {
  return (
    <section className="vig-final-cta" id="empezar">
      <h2 className="vig-final-cta__title">Empieza por entender dónde estás parado.</h2>
      <p className="vig-final-cta__lead">
        5 minutos. Sin registro. Diagnóstico inmediato y siguientes pasos claros. Tomamos la decisión difícil por ti: empezar.
      </p>
      <div className="vig-final-cta__buttons">
        <button className={"vig-btn vig-btn--lg " + ctaClass} onClick={onOpenTeaser}>
          Hacer el assessment ahora <Icons.arrowRight />
        </button>
        <button className="vig-btn vig-btn--lg vig-btn--ghost-light">
          Hablar con un consultor
        </button>
      </div>
    </section>
  );
}

Object.assign(window, { Landing });