/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Avatar, Pill, expertById, CAT_COLORS */
const { useState: useBitesState } = React;

const BITE_CATS = ["Todos", "IA", "Marketing", "Ventas", "Marca", "ESG", "Productividad"];

const BITES = [
  { cat: "IA", title: "3 prompts de IA que uso cada semana", expert: "jorge", dur: "0:45", views: "12.4K" },
  { cat: "Ventas", title: "Por qué el 80% de las ventas muere en el follow-up", expert: "antonio", dur: "0:52", views: "9.1K" },
  { cat: "Marca", title: "Tu marca personal empieza con una sola frase", expert: "ana", dur: "0:38", views: "15.2K" },
  { cat: "ESG", title: "ESG no es un gasto, es una inversión", expert: "valeria", dur: "0:48", views: "6.7K" },
  { cat: "Ventas", title: "Cómo calificar un lead en 2 minutos", expert: "antonio", dur: "0:41", views: "11.8K" },
  { cat: "Marketing", title: "El error #1 en analítica de marketing", expert: "sebastian", dur: "0:55", views: "8.3K" },
  { cat: "Productividad", title: "Automatiza tu reporte semanal en 5 pasos", expert: "jorge", dur: "0:50", views: "7.5K" },
  { cat: "Marca", title: "Deja de copiar a tu competencia. Haz esto", expert: "ana", dur: "0:44", views: "10.6K" },
  { cat: "Marketing", title: "La métrica que sí predice tus ventas", expert: "sebastian", dur: "0:47", views: "13.1K" },
];

function BiteThumb({ bite, ratio = "9 / 16" }) {
  const hue = CAT_COLORS[bite.cat] ?? 200;
  return (
    <div style={{ position: "relative", aspectRatio: ratio, borderRadius: 16, overflow: "hidden", background: `linear-gradient(165deg, hsl(${hue} 36% 24%), var(--mp-ink) 82%)` }}>
      <div style={{ position: "absolute", width: 220, height: 220, borderRadius: 999, top: "-15%", left: "-20%", background: `radial-gradient(circle, hsl(${hue} 70% 55% / 0.4), transparent 62%)`, filter: "blur(6px)" }} />
      <image-slot id={"bite-" + bite.expert + "-" + bite.dur.replace(":", "")} fit="cover" placeholder="Vertical 9:16"
        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.1) 30%, rgba(15,32,44,0.78) 100%)", pointerEvents: "none" }} />
      <span style={{ position: "absolute", top: 12, left: 12, fontSize: 10.5, fontWeight: 700, letterSpacing: "0.04em", color: "var(--mp-ink)", background: "var(--mp-mint)", padding: "4px 10px", borderRadius: 999, pointerEvents: "none" }}>{bite.cat}</span>
      <span style={{ position: "absolute", top: 12, right: 12, fontSize: 11, fontWeight: 700, color: "var(--mp-paper)", background: "rgba(15,32,44,0.6)", backdropFilter: "blur(6px)", padding: "4px 9px", borderRadius: 999, pointerEvents: "none" }}>{bite.dur}</span>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", pointerEvents: "none" }}>
        <span style={{ width: 52, height: 52, borderRadius: 999, background: "rgba(255,255,255,0.16)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,0.4)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--mp-paper)" }}>
          <Icon name="play" size={20} style={{ marginLeft: 3, fill: "var(--mp-paper)" }} />
        </span>
      </div>
    </div>
  );
}

function BiteCard({ bite }) {
  const [hover, setHover] = useBitesState(false);
  const [liked, setLiked] = useBitesState(false);
  const [saved, setSaved] = useBitesState(false);
  const [playing, setPlaying] = useBitesState(false);
  const e = expertById(bite.expert);
  return (
    <article onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onClick={() => setPlaying(true)}
      style={{ display: "flex", flexDirection: "column", gap: 12, cursor: "pointer", transform: hover ? "translateY(-4px)" : "none", transition: "transform 240ms var(--mp-ease)" }}>
      <div style={{ boxShadow: hover ? "var(--mp-shadow-lg)" : "var(--mp-shadow-sm)", borderRadius: 16, transition: "box-shadow 240ms var(--mp-ease)" }}><BiteThumb bite={bite} /></div>
      <h3 style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.28, letterSpacing: "-0.01em", margin: 0, color: "var(--mp-ink)", textWrap: "pretty" }}>{bite.title}</h3>
      {playing && (
        <div style={{ display: "inline-flex", alignItems: "center", gap: 7, fontSize: 12.5, fontWeight: 600, color: "var(--mp-mint-deep)" }}>
          <Icon name="play" size={13} style={{ fill: "var(--mp-mint-deep)" }} /> Reproducción disponible muy pronto
        </div>
      )}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 9, minWidth: 0 }}>
          <Avatar initials={e.initials} hue={e.hue} size={28} fontScale={0.4} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--mp-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{e.name.split(" ")[0]} {e.name.split(" ")[1]?.[0]}.</div>
            <div style={{ fontSize: 11.5, color: "var(--mp-fg-subtle)" }}>{bite.views} vistas</div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6, flex: "0 0 auto" }}>
          <button onClick={(ev) => { ev.stopPropagation(); setLiked((v) => !v); }} style={{ width: 34, height: 34, borderRadius: 999, border: "1px solid var(--mp-border)", background: "var(--mp-paper)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: liked ? "var(--mp-mint-deep)" : "var(--mp-fg-subtle)" }}>
            <Icon name="heart" size={16} style={{ fill: liked ? "var(--mp-mint-deep)" : "transparent" }} />
          </button>
          <button onClick={(ev) => { ev.stopPropagation(); setSaved((v) => !v); }} style={{ width: 34, height: 34, borderRadius: 999, border: "1px solid var(--mp-border)", background: "var(--mp-paper)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: saved ? "var(--mp-ink)" : "var(--mp-fg-subtle)" }}>
            <Icon name="bookmark" size={16} style={{ fill: saved ? "var(--mp-ink)" : "transparent" }} />
          </button>
        </div>
      </div>
    </article>
  );
}

function FeaturedBite() {
  const bite = BITES[2];
  const e = expertById(bite.expert);
  const [playing, setPlaying] = useBitesState(false);
  return (
    <Section bg="cloud" pad="20px 28px 96px">
      <Reveal>
        <div style={{ background: "var(--mp-ink)", borderRadius: "var(--mp-radius-2xl)", padding: 32, display: "grid", gridTemplateColumns: "300px 1fr", gap: 40, alignItems: "center", color: "var(--mp-paper)", overflow: "hidden", position: "relative" }} className="mp-2col">
          <div style={{ width: 300, maxWidth: "100%" }}><BiteThumb bite={bite} /></div>
          <div>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 11.5, fontWeight: 700, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--mp-mint)", marginBottom: 18 }}>
              <Icon name="zap" size={15} /> Bite destacado
            </div>
            <h3 style={{ fontSize: "clamp(26px, 3.2vw, 42px)", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em", margin: "0 0 16px", textWrap: "balance" }}>{bite.title}</h3>
            <p style={{ fontSize: 16.5, lineHeight: 1.55, color: "rgba(255,255,255,0.72)", margin: "0 0 26px", maxWidth: 520, textWrap: "pretty" }}>
              Tu posicionamiento no nace de un logo ni de un color. Nace de una idea que puedas decir en una frase. Ana te muestra cómo encontrar la tuya.
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
                <Avatar initials={e.initials} hue={e.hue} size={42} ring />
                <div><div style={{ fontWeight: 700, fontSize: 14.5 }}>{e.name}</div><div style={{ fontSize: 12.5, color: "var(--mp-mint)" }}>{e.role}</div></div>
              </div>
              <Button variant="mint" icon={playing ? "check" : "play"} onClick={() => setPlaying(true)}>
                {playing ? "Disponible muy pronto" : "Reproducir bite"}
              </Button>
            </div>
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Bites({ go }) {
  const [cat, setCat] = useBitesState("Todos");
  const list = cat === "Todos" ? BITES : BITES.filter((b) => b.cat === cat);
  return (
    <main>
      <section style={{ background: "var(--mp-ink)", color: "var(--mp-paper)", padding: "150px 28px 70px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: "-15%", left: "30%", width: 520, height: 520, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.26), transparent 64%)", filter: "blur(28px)" }} />
        <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative" }}>
          <Reveal style={{ maxWidth: 760 }}>
            <Eyebrow onDark style={{ marginBottom: 22 }}>MarketProof Bites</Eyebrow>
            <h1 style={{ fontSize: "clamp(40px, 5.2vw, 78px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.035em", margin: "0 0 20px", textWrap: "balance" }}>
              Conocimiento en menos de <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>60 segundos.</span>
            </h1>
            <p style={{ fontSize: "clamp(17px, 1.5vw, 22px)", lineHeight: 1.5, color: "rgba(255,255,255,0.76)", maxWidth: 620, margin: 0, textWrap: "pretty" }}>
              Piezas de contenido concreto, aplicable y sin relleno. Porque tu tiempo vale.
            </p>
          </Reveal>
          <Reveal delay={120} style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 38 }}>
            {BITE_CATS.map((c) => <Pill key={c} active={cat === c} onClick={() => setCat(c)} onDark>{c}</Pill>)}
          </Reveal>
        </div>
      </section>

      <Section bg="cloud" pad="56px 28px 40px">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }} className="mp-bites-grid">
          {list.map((b, i) => (
            <Reveal key={b.title} delay={(i % 3) * 70}><BiteCard bite={b} /></Reveal>
          ))}
        </div>
      </Section>

      <FeaturedBite />

      <section style={{ background: "var(--mp-mint)", color: "var(--mp-ink)", position: "relative", overflow: "hidden" }}>
        <div style={{ maxWidth: 1000, margin: "0 auto", padding: "80px 28px", textAlign: "center" }}>
          <Reveal>
            <h2 style={{ fontSize: "clamp(28px, 3.6vw, 46px)", fontWeight: 800, letterSpacing: "-0.03em", margin: "0 0 24px", lineHeight: 1.08, textWrap: "balance" }}>
              ¿Quieres profundizar en algún tema?
            </h2>
            <Button variant="ink" size="lg" icon="arrowRight" onClick={() => go("mentoria")}>Agenda una sesión 1:1 con el experto</Button>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

window.Bites = Bites;