/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Avatar, Stars, Tag, EXPERTS, COURSES, CourseCard, ExpertTeaserCard, courseById */
const { useState: useHomeState } = React;

function HomeHero({ go, onCta }) {
  return (
    <section style={{
      position: "relative", background: "var(--mp-ink)", color: "var(--mp-paper)",
      minHeight: "100vh", display: "flex", flexDirection: "column", overflow: "hidden",
    }}>
      {/* image slot + overlays */}
      <image-slot id="home-hero-bg" fit="cover"
        placeholder="Arrastra una foto de un profesional en su espacio de trabajo"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 0 }}></image-slot>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,32,44,0.86) 0%, rgba(15,32,44,0.74) 42%, rgba(15,32,44,0.92) 100%)" }} />
      <div style={{ position: "absolute", top: "-12%", right: "8%", width: 620, height: 620, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.40), transparent 62%)", filter: "blur(30px)" }} />
      <div style={{ position: "absolute", bottom: "-18%", left: "-6%", width: 520, height: 520, borderRadius: 999, background: "radial-gradient(circle, rgba(70,87,101,0.55), transparent 62%)", filter: "blur(28px)" }} />

      <div style={{ position: "relative", zIndex: 2, flex: 1, display: "flex", alignItems: "center", padding: "120px 28px 90px" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", width: "100%" }}>
          <Reveal>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: 10, padding: "8px 16px 8px 12px",
              borderRadius: 999, background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.14)",
              backdropFilter: "blur(18px) saturate(140%)", fontSize: 12.5, fontWeight: 600, color: "rgba(255,255,255,0.9)", marginBottom: 30,
            }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--mp-mint)" }} />
              De experto a experto. Sin rodeos.
            </div>
          </Reveal>
          <Reveal delay={80}>
            <h1 style={{ fontSize: "clamp(44px, 6.4vw, 96px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.038em", margin: "0 0 26px", maxWidth: 1050, textWrap: "balance" }}>
              Tu negocio merece consejo de expertos,<br />
              <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>no de manuales.</span>
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ fontSize: "clamp(18px, 1.5vw, 22px)", lineHeight: 1.5, color: "rgba(255,255,255,0.78)", maxWidth: 600, margin: "0 0 38px", textWrap: "pretty" }}>
              Consultoría 1:1, cursos on demand y formación corporativa. De quien ya lo vivió.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 16, alignItems: "center" }}>
              <Button variant="mint" size="lg" icon="arrowRight" onClick={() => go("cursos")}>Explorar cursos</Button>
              <Button variant="outlineWhite" size="lg" onClick={onCta}>Agendar sesión gratis</Button>
            </div>
          </Reveal>
        </div>
      </div>

      {/* scroll cue */}
      <div style={{ position: "relative", zIndex: 2, display: "flex", justifyContent: "center", paddingBottom: 30 }}>
        <div className="mp-scrollcue" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, color: "rgba(255,255,255,0.6)" }}>
          <span style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600 }}>Descubre más</span>
          <Icon name="chevronDown" size={22} />
        </div>
      </div>
    </section>
  );
}

function StatsBar() {
  const stats = [
    { k: "5", v: "Expertos certificados" },
    { k: "12+", v: "Cursos disponibles" },
    { k: "6", v: "Especialidades" },
    { k: "100%", v: "Conocimiento aplicado" },
  ];
  return (
    <section style={{ background: "var(--mp-mint)", color: "var(--mp-ink)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "32px 28px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }} className="mp-stats-grid">
        {stats.map((s, i) => (
          <Reveal key={s.v} delay={i * 70} style={{ display: "flex", alignItems: "center", gap: 16, justifyContent: "center", borderRight: i < 3 ? "1px solid rgba(15,32,44,0.16)" : "none" }}>
            <div style={{ fontSize: "clamp(34px, 3.4vw, 48px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1 }}>{s.k}</div>
            <div style={{ fontSize: 13.5, fontWeight: 600, lineHeight: 1.25, maxWidth: 120 }}>{s.v}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function ProblemSolution() {
  const cards = [
    { problem: "Cursos que nadie termina", solution: "Formación que se aplica", icon: "graduation" },
    { problem: "Teoría sin contexto", solution: "Expertos que lo vivieron", icon: "lightbulb" },
    { problem: "Sin acompañamiento", solution: "Mentoría real, 1:1", icon: "handshake" },
  ];
  return (
    <Section bg="ink" pad="100px 28px">
      <Reveal style={{ maxWidth: 760, marginBottom: 56 }}>
        <Eyebrow onDark style={{ marginBottom: 20 }}>Por qué MarketProof</Eyebrow>
        <h2 style={{ fontSize: "clamp(34px, 4.2vw, 60px)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="El conocimiento más valioso no está en un [libro.]" onDark />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {cards.map((c, i) => (
          <Reveal key={c.solution} delay={i * 90}>
            <div style={{
              height: "100%", padding: "32px 28px", borderRadius: "var(--mp-radius-lg)",
              background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.10)",
              backdropFilter: "blur(18px) saturate(140%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.10)",
              display: "flex", flexDirection: "column", gap: 22,
            }}>
              <div style={{ width: 52, height: 52, borderRadius: 16, background: "rgba(129,241,200,0.14)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--mp-mint)" }}>
                <Icon name={c.icon} size={26} />
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, color: "rgba(255,255,255,0.5)", fontSize: 16, fontWeight: 500 }}>
                <Icon name="x" size={17} style={{ color: "rgba(255,255,255,0.4)" }} />
                <span style={{ textDecoration: "line-through", textDecorationColor: "rgba(255,255,255,0.3)" }}>{c.problem}</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 21, fontWeight: 700, letterSpacing: "-0.01em" }}>
                <span style={{ width: 26, height: 26, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}>
                  <Icon name="check" size={16} stroke={2.4} />
                </span>
                {c.solution}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Services({ go, onCta }) {
  const svc = [
    { icon: "user", title: "Mentoría 1:1", desc: "Sesiones personalizadas con el experto que tu reto necesita.", go: "mentoria" },
    { icon: "graduation", title: "Cursos On Demand", desc: "Formación aplicable, a tu ritmo, con certificado incluido.", go: "cursos" },
    { icon: "briefcase", title: "Talleres Corporativos", desc: "Programas a medida para llevar el conocimiento a tu equipo.", go: "talleres" },
  ];
  const [hover, setHover] = useHomeState(-1);
  return (
    <Section bg="cloud" pad="100px 28px">
      <Reveal style={{ marginBottom: 52 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Lo que hacemos</Eyebrow>
        <h2 style={{ fontSize: "clamp(32px, 4vw, 56px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, maxWidth: 720, textWrap: "balance" }}>
          <Flourish text="Tres caminos. Un mismo [propósito:] que apliques." />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {svc.map((s, i) => (
          <Reveal key={s.title} delay={i * 90}>
            <article
              onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(-1)}
              onClick={() => go(s.go)}
              style={{
                cursor: "pointer", height: "100%", background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)",
                padding: "38px 32px", border: "1px solid var(--mp-border)",
                boxShadow: hover === i ? "var(--mp-shadow-lg)" : "var(--mp-shadow-sm)",
                transform: hover === i ? "translateY(-6px)" : "none",
                transition: "transform 260ms var(--mp-ease), box-shadow 260ms var(--mp-ease)",
                display: "flex", flexDirection: "column", gap: 18,
              }}>
              <div style={{
                width: 62, height: 62, borderRadius: 20,
                background: hover === i ? "var(--mp-mint)" : "var(--mp-ink)",
                color: hover === i ? "var(--mp-ink)" : "var(--mp-mint)",
                display: "flex", alignItems: "center", justifyContent: "center", transition: "all 260ms var(--mp-ease)",
              }}>
                <Icon name={s.icon} size={30} />
              </div>
              <h3 style={{ fontSize: 25, fontWeight: 700, letterSpacing: "-0.02em", margin: 0 }}>{s.title}</h3>
              <p style={{ fontSize: 15.5, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, flex: 1, textWrap: "pretty" }}>{s.desc}</p>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--mp-ink)", fontWeight: 700, fontSize: 14.5, marginTop: 4 }}>
                Conocer más <Icon name="arrowRight" size={17} style={{ transform: hover === i ? "translateX(4px)" : "none", transition: "transform 240ms var(--mp-ease)" }} />
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function FeaturedCourses({ go }) {
  const list = ["ia-negocio", "data-marketing", "ventas-sin-presion", "marca-referente"].map(courseById);
  return (
    <Section bg="ink" pad="100px 0">
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 28px", display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, marginBottom: 44, flexWrap: "wrap" }}>
        <Reveal>
          <Eyebrow onDark style={{ marginBottom: 18 }}>Cursos destacados</Eyebrow>
          <h2 style={{ fontSize: "clamp(30px, 3.6vw, 50px)", fontWeight: 700, lineHeight: 1.08, letterSpacing: "-0.03em", margin: 0, maxWidth: 640, textWrap: "balance" }}>
            Lo que más están aprendiendo los <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>MarketProoferos.</span>
          </h2>
        </Reveal>
        <Button variant="ghostWhite" icon="arrowRight" onClick={() => go("cursos")}>Ver todos</Button>
      </div>
      <div className="mp-hscroll" style={{ display: "flex", gap: 20, overflowX: "auto", padding: "8px 28px 24px", scrollSnapType: "x mandatory" }}>
        {list.map((c) => (
          <div key={c.id} style={{ scrollSnapAlign: "start" }}>
            <CourseCard course={c} width={320} onOpen={() => go("course")} />
          </div>
        ))}
      </div>
    </Section>
  );
}

function ExpertsTeaser({ go }) {
  return (
    <Section bg="cloud" pad="100px 28px">
      <Reveal style={{ textAlign: "center", marginBottom: 52, maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
        <Eyebrow style={{ marginBottom: 18 }}>Los especialistas</Eyebrow>
        <h2 style={{ fontSize: "clamp(32px, 4vw, 56px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Cinco carreras. Un solo [propósito.]" />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16 }} className="mp-experts-grid">
        {EXPERTS.map((e, i) => (
          <Reveal key={e.id} delay={i * 70}>
            <ExpertTeaserCard expert={e} onBook={() => go("mentoria")} />
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function HomeTestimonials() {
  const items = [
    { q: "Sebastián me ayudó a entender mis métricas de una manera que ningún curso online jamás logró. Aplicable desde el día siguiente.", name: "Carlos M.", role: "Gerente de Marketing", hue: 162 },
    { q: "La sesión con Antonio transformó mi proceso de ventas completamente. Resultados visibles en 3 semanas.", name: "Andrea L.", role: "Directora Comercial", hue: 28 },
    { q: "Valeria nos guió para obtener nuestra primera certificación ambiental. Claridad absoluta en cada paso.", name: "Roberto P.", role: "CEO", hue: 130 },
  ];
  return (
    <Section bg="ink" pad="100px 28px">
      <Reveal style={{ marginBottom: 52 }}>
        <Eyebrow onDark style={{ marginBottom: 18 }}>Comunidad</Eyebrow>
        <h2 style={{ fontSize: "clamp(32px, 4vw, 58px)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          Lo que dicen los <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>MarketProoferos.</span>
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {items.map((it, i) => (
          <Reveal key={it.name} delay={i * 90}>
            <article style={{
              height: "100%", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.10)",
              borderRadius: "var(--mp-radius-lg)", padding: 30, backdropFilter: "blur(18px) saturate(140%)",
              display: "flex", flexDirection: "column", gap: 22, boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)",
            }}>
              <Stars value={5} size={16} />
              <p style={{ fontSize: 17, lineHeight: 1.5, margin: 0, color: "rgba(255,255,255,0.92)", textWrap: "pretty", flex: 1 }}>"{it.q}"</p>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Avatar initials={it.name.split(" ").map((w) => w[0]).join("").slice(0, 2)} hue={it.hue} size={42} fontScale={0.36} />
                <div>
                  <div style={{ fontWeight: 700, fontSize: 14.5 }}>{it.name}</div>
                  <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.6)", marginTop: 2 }}>{it.role}</div>
                </div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function ClientLogos() {
  const logos = [
    { name: "NORTHA", w: 128 }, { name: "Vértice", w: 116 }, { name: "QUANTUM", w: 150 },
    { name: "Lumen", w: 104 }, { name: "ROBLE&CO", w: 142 }, { name: "Aurora", w: 120 },
  ];
  return (
    <Section bg="paper" pad="76px 28px">
      <Reveal style={{ textAlign: "center", marginBottom: 40 }}>
        <div style={{ fontSize: 12.5, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "var(--mp-fg-subtle)" }}>
          Empresas que confían en MarketProof
        </div>
      </Reveal>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 20, justifyContent: "center", alignItems: "center" }}>
        {logos.map((l, i) => (
          <Reveal key={l.name} delay={i * 50}>
            <div className="mp-logo-box" style={{
              width: l.w, height: 64, borderRadius: 14, border: "1px solid var(--mp-border)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "var(--mp-slate)", fontWeight: 800, fontSize: 17, letterSpacing: "0.02em",
              opacity: 0.45, filter: "grayscale(1)", transition: "opacity 240ms var(--mp-ease), filter 240ms var(--mp-ease)",
            }}>{l.name}</div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function CTABand({ go }) {
  return (
    <section style={{ background: "var(--mp-mint)", color: "var(--mp-ink)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "-40%", right: "-5%", width: 480, height: 480, borderRadius: 999, background: "radial-gradient(circle, rgba(255,255,255,0.5), transparent 64%)" }} />
      <div style={{ maxWidth: 1000, margin: "0 auto", padding: "96px 28px", textAlign: "center", position: "relative" }}>
        <Reveal>
          <h2 style={{ fontSize: "clamp(34px, 4.6vw, 64px)", fontWeight: 800, lineHeight: 1.04, letterSpacing: "-0.035em", margin: "0 0 20px", textWrap: "balance" }}>
            ¿Listo para aprender de quien ya lo vivió?
          </h2>
          <p style={{ fontSize: "clamp(17px, 1.5vw, 21px)", lineHeight: 1.5, margin: "0 auto 38px", maxWidth: 620, color: "rgba(15,32,44,0.72)", fontWeight: 500, textWrap: "pretty" }}>
            Únete a los MarketProoferos que ya están transformando sus carreras y negocios.
          </p>
          <Button variant="ink" size="lg" icon="arrowRight" onClick={() => go("cursos")}>Empieza hoy</Button>
        </Reveal>
      </div>
    </section>
  );
}

function Home({ go, onCta }) {
  return (
    <main>
      <HomeHero go={go} onCta={onCta} />
      <StatsBar />
      <ProblemSolution />
      <Services go={go} onCta={onCta} />
      <FeaturedCourses go={go} />
      <ExpertsTeaser go={go} />
      <HomeTestimonials />
      <ClientLogos />
      <CTABand go={go} />
    </main>
  );
}

window.Home = Home;
window.ClientLogos = ClientLogos;