/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Avatar, Tag, Stars, EXPERTS, expertById */
const { useState: useMentState } = React;

function MentHero({ onBook }) {
  return (
    <section style={{ position: "relative", background: "var(--mp-ink)", color: "var(--mp-paper)", overflow: "hidden", padding: "150px 28px 96px" }}>
      <div style={{ position: "absolute", top: "-10%", right: "0%", width: 560, height: 560, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.34), transparent 62%)", filter: "blur(30px)" }} />
      <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative", display: "grid", gridTemplateColumns: "1.15fr 0.85fr", gap: 56, alignItems: "center" }} className="mp-2col">
        <div>
          <Reveal>
            <Eyebrow onDark style={{ marginBottom: 24 }}>Mentoría 1:1</Eyebrow>
            <h1 style={{ fontSize: "clamp(40px, 5.4vw, 80px)", fontWeight: 800, lineHeight: 1.0, letterSpacing: "-0.035em", margin: "0 0 22px", textWrap: "balance" }}>
              Tu problema tiene un experto.<br /><span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>Encuéntralo aquí.</span>
            </h1>
            <p style={{ fontSize: "clamp(17px, 1.5vw, 21px)", lineHeight: 1.55, color: "rgba(255,255,255,0.76)", maxWidth: 520, margin: "0 0 36px", textWrap: "pretty" }}>
              Sesiones personalizadas de 60 minutos. Sin relleno, con resultados. Afteroffice, desde donde estés.
            </p>
            <Button variant="mint" size="lg" icon="arrowRight" onClick={onBook}>Reserva tu sesión ahora</Button>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <div style={{ background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--mp-radius-xl)", padding: 30, backdropFilter: "blur(18px) saturate(140%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.1)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 20 }}>
              <div style={{ display: "flex" }}>
                {EXPERTS.slice(0, 4).map((e, i) => (
                  <div key={e.id} style={{ marginLeft: i ? -12 : 0, zIndex: 4 - i }}><Avatar initials={e.initials} hue={e.hue} size={40} ring fontScale={0.38} /></div>
                ))}
              </div>
              <div>
                <div style={{ display: "flex", alignItems: "center", gap: 7, fontWeight: 700 }}><Stars value={5} size={14} /> 4.9</div>
                <div style={{ fontSize: 12.5, color: "rgba(255,255,255,0.6)", marginTop: 2 }}>+800 sesiones realizadas</div>
              </div>
            </div>
            {[["clock", "60 minutos por sesión"], ["video", "100% online, grabación incluida"], ["calendar", "Lun–Jue · 18:00–21:00h"], ["shield", "Cancelación gratuita hasta 24h antes"]].map(([ic, tx]) => (
              <div key={tx} style={{ display: "flex", alignItems: "center", gap: 12, padding: "11px 0", borderTop: "1px solid rgba(255,255,255,0.08)", fontSize: 14.5, color: "rgba(255,255,255,0.85)" }}>
                <span style={{ color: "var(--mp-mint)" }}><Icon name={ic} size={18} /></span> {tx}
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", icon: "users", t: "Elige tu experto", d: "Cinco especialistas, cada uno con un campo de batalla distinto." },
    { n: "02", icon: "calendar", t: "Selecciona fecha y horario", d: "Reserva el espacio que mejor encaje con tu agenda." },
    { n: "03", icon: "trendingUp", t: "Transforma tu negocio", d: "Una hora enfocada. Un plan que aplicas desde mañana." },
  ];
  return (
    <Section bg="cloud" pad="88px 28px">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {steps.map((s, i) => (
          <Reveal key={s.n} delay={i * 90}>
            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: "var(--mp-ink)", color: "var(--mp-mint)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={s.icon} size={26} /></div>
                <span style={{ fontSize: 38, fontWeight: 800, color: "var(--mp-mist)", letterSpacing: "-0.03em" }}>{s.n}</span>
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: "-0.02em", margin: "6px 0 0" }}>{s.t}</h3>
              <p style={{ fontSize: 15, color: "var(--mp-fg-muted)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{s.d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function ExpertBookCard({ e, onBook }) {
  const [hover, setHover] = useMentState(false);
  return (
    <article onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.11)", borderRadius: "var(--mp-radius-lg)",
        padding: 26, backdropFilter: "blur(18px) saturate(140%)", display: "flex", flexDirection: "column", gap: 16,
        boxShadow: hover ? "0 18px 44px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1)" : "inset 0 1px 0 rgba(255,255,255,0.08)",
        transform: hover ? "translateY(-4px)" : "none", transition: "transform 240ms var(--mp-ease), box-shadow 240ms var(--mp-ease)",
      }}>
      <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
        <Avatar initials={e.initials} hue={e.hue} size={60} ring />
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 700, fontSize: 18, letterSpacing: "-0.01em" }}>{e.name}</div>
          <div style={{ fontSize: 13.5, color: "var(--mp-mint)", fontWeight: 600, marginTop: 2 }}>{e.role}</div>
        </div>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 5, fontSize: 13, fontWeight: 700, color: "rgba(255,255,255,0.9)" }}>
          <Icon name="star" size={14} style={{ color: "var(--mp-mint)", fill: "var(--mp-mint)" }} /> {e.rating}
        </div>
      </div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 7 }}>
        {e.tags.map((t) => <Tag key={t} dark>{t}</Tag>)}
      </div>
      <p style={{ fontSize: 14, color: "rgba(255,255,255,0.72)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{e.bio}</p>
      <div style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 12.5, color: "var(--mp-mint)", fontWeight: 600 }}>
        <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--mp-mint)", boxShadow: "0 0 0 4px rgba(129,241,200,0.2)" }} /> {e.avail}
      </div>
      <Button variant="mint" full icon="arrowRight" onClick={() => onBook(e.id)} style={{ marginTop: 4 }}>Agendar con {e.name.split(" ")[0]}</Button>
    </article>
  );
}

function ExpertGrid({ onBook }) {
  return (
    <Section bg="ink" pad="96px 28px" id="expertos">
      <Reveal style={{ marginBottom: 48, maxWidth: 680 }}>
        <Eyebrow onDark style={{ marginBottom: 18 }}>Los especialistas</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Elige a quien ya [resolvió] tu problema." onDark />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }} className="mp-3grid">
        {EXPERTS.map((e, i) => (
          <Reveal key={e.id} delay={i * 70}><ExpertBookCard e={e} onBook={onBook} /></Reveal>
        ))}
      </div>
    </Section>
  );
}

/* ---------- Booking flow (lightly clickable mockup) ---------- */
const TOPICS = ["Marketing digital", "IA en mi empresa", "Proceso de ventas", "Marca personal", "ESG y certificaciones", "Automatización", "Otro"];
const SLOTS = [
  { t: "18:00", taken: false }, { t: "18:30", taken: true }, { t: "19:00", taken: false },
  { t: "19:30", taken: false }, { t: "20:00", taken: true }, { t: "20:30", taken: false },
];

const MONTHS_LONG = ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"];
const MONTHS_SHORT = ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"];

const startOfToday = () => { const d = new Date(); d.setHours(0, 0, 0, 0); return d; };
const monToIdx = (jsDay) => (jsDay + 6) % 7; // JS 0=Sun → 0=Mon
// First bookable day (Lun–Jue, not in the past) of a given month; null if none.
function firstBookableDay(monthDate, today) {
  const y = monthDate.getFullYear(), m = monthDate.getMonth();
  const last = new Date(y, m + 1, 0).getDate();
  for (let d = 1; d <= last; d++) {
    const cd = new Date(y, m, d);
    if (monToIdx(cd.getDay()) <= 3 && cd >= today) return d;
  }
  return null;
}

function MiniCalendar({ monthDate, today, selected, onSelect, onPrev, onNext, canPrev }) {
  const y = monthDate.getFullYear(), m = monthDate.getMonth();
  const daysInMonth = new Date(y, m + 1, 0).getDate();
  const lead = monToIdx(new Date(y, m, 1).getDay());
  const dow = ["L", "M", "M", "J", "V", "S", "D"];
  const nav = { width: 30, height: 30, borderRadius: 9, border: "1px solid var(--mp-border)", background: "var(--mp-paper)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "var(--mp-ink)", fontFamily: "var(--mp-font-sans)" };
  const cells = [];
  for (let i = 0; i < lead; i++) cells.push(null);
  for (let d = 1; d <= daysInMonth; d++) cells.push(d);
  return (
    <div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <span style={{ fontWeight: 700, fontSize: 15, textTransform: "capitalize" }}>{MONTHS_LONG[m]} {y}</span>
        <div style={{ display: "flex", gap: 6 }}>
          <button type="button" aria-label="Mes anterior" onClick={onPrev} disabled={!canPrev}
            style={{ ...nav, color: canPrev ? "var(--mp-ink)" : "var(--mp-mist)", cursor: canPrev ? "pointer" : "default" }}>
            <Icon name="chevronRight" size={16} style={{ transform: "rotate(180deg)" }} />
          </button>
          <button type="button" aria-label="Mes siguiente" onClick={onNext} style={{ ...nav, cursor: "pointer" }}>
            <Icon name="chevronRight" size={16} />
          </button>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 5 }}>
        {dow.map((d, i) => <div key={i} style={{ textAlign: "center", fontSize: 11, fontWeight: 700, color: "var(--mp-fg-subtle)", padding: "4px 0" }}>{d}</div>)}
        {cells.map((d, i) => {
          if (d === null) return <div key={"pad" + i} />;
          const cd = new Date(y, m, d);
          const isSelectable = monToIdx(cd.getDay()) <= 3 && cd >= today; // Lun–Jue, no pasado
          const isSel = selected === d;
          return (
            <button type="button" key={d} disabled={!isSelectable} onClick={() => onSelect(d)}
              style={{
                aspectRatio: "1", borderRadius: 10, border: isSel ? "0" : "1px solid var(--mp-border)",
                background: isSel ? "var(--mp-ink)" : isSelectable ? "var(--mp-paper)" : "transparent",
                color: isSel ? "var(--mp-paper)" : isSelectable ? "var(--mp-ink)" : "var(--mp-mist)",
                fontFamily: "var(--mp-font-sans)", fontWeight: isSel ? 700 : 500, fontSize: 13.5,
                cursor: isSelectable ? "pointer" : "default", transition: "all 160ms var(--mp-ease)",
              }}>{d}</button>
          );
        })}
      </div>
    </div>
  );
}

function BookingFlow({ initialExpert }) {
  const today = startOfToday();
  const [expert, setExpert] = useMentState(initialExpert || "antonio");
  const [topic, setTopic] = useMentState("");
  const [month, setMonth] = useMentState(() => new Date(today.getFullYear(), today.getMonth(), 1));
  const [date, setDate] = useMentState(() => firstBookableDay(new Date(today.getFullYear(), today.getMonth(), 1), today));
  const [slot, setSlot] = useMentState("19:00");
  const [form, setForm] = useMentState({ name: "", email: "", company: "" });
  const [confirmed, setConfirmed] = useMentState(false);
  const e = expertById(expert);

  const changeMonth = (delta) => {
    const nm = new Date(month.getFullYear(), month.getMonth() + delta, 1);
    setMonth(nm);
    setDate(firstBookableDay(nm, today));
  };
  const canPrev = month.getFullYear() > today.getFullYear() ||
    (month.getFullYear() === today.getFullYear() && month.getMonth() > today.getMonth());
  const dateLabel = date ? `${date} ${MONTHS_SHORT[month.getMonth()]} · ${slot}h` : "Por definir";
  const emailOk = /^\S+@\S+\.\S+$/.test(form.email.trim());
  const canConfirm = form.name.trim() && emailOk && topic && date && !SLOTS.find((s) => s.t === slot)?.taken;
  const upd = (k) => (ev) => setForm((f) => ({ ...f, [k]: ev.target.value }));

  if (confirmed) {
    return (
      <Section bg="cloud" pad="96px 28px" id="booking">
        <Reveal style={{ maxWidth: 620, margin: "0 auto" }}>
          <div style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "48px 40px", boxShadow: "var(--mp-shadow-md)", border: "1px solid var(--mp-border)", textAlign: "center" }}>
            <div style={{ width: 64, height: 64, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 24 }}>
              <Icon name="check" size={30} stroke={2.6} />
            </div>
            <h2 style={{ fontSize: "clamp(26px, 3vw, 38px)", fontWeight: 800, letterSpacing: "-0.02em", margin: "0 0 14px" }}>
              ¡Gracias, {form.name.trim().split(" ")[0]}!
            </h2>
            <p style={{ fontSize: 16.5, lineHeight: 1.6, color: "var(--mp-fg-muted)", margin: "0 0 8px", textWrap: "pretty" }}>
              Recibimos tu solicitud de sesión con <strong style={{ color: "var(--mp-ink)" }}>{e.name}</strong> para el <strong style={{ color: "var(--mp-ink)" }}>{dateLabel}</strong>.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--mp-fg-muted)", margin: "0 0 28px", textWrap: "pretty" }}>
              Te enviamos un correo a <strong style={{ color: "var(--mp-ink)" }}>{form.email.trim()}</strong> con los detalles y el enlace de pago. Revisa tu bandeja en los próximos minutos.
            </p>
            <Button variant="ink" icon="arrowRight" onClick={() => { setConfirmed(false); setForm({ name: "", email: "", company: "" }); setTopic(""); }}>
              Agendar otra sesión
            </Button>
          </div>
        </Reveal>
      </Section>
    );
  }

  const stepLabel = (n, t) => (
    <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
      <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--mp-mint)", color: "var(--mp-ink)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 13, flex: "0 0 auto" }}>{n}</span>
      <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.015em", margin: 0 }}>{t}</h3>
    </div>
  );
  const inp = { width: "100%", padding: "13px 15px", fontSize: 14.5, border: "1.5px solid var(--mp-border-strong)", borderRadius: "var(--mp-radius-md)", fontFamily: "var(--mp-font-sans)", background: "var(--mp-paper)", outline: "none", color: "var(--mp-ink)" };

  return (
    <Section bg="cloud" pad="96px 28px" id="booking">
      <Reveal style={{ marginBottom: 44, maxWidth: 640 }}>
        <Eyebrow style={{ marginBottom: 18 }}>Reserva en 5 pasos</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 50px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          <Flourish text="Tu sesión, a un par de [clics.]" />
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 0.9fr", gap: 24, alignItems: "start" }} className="mp-booking-grid">
        <div style={{ background: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: "36px 34px", boxShadow: "var(--mp-shadow-sm)", border: "1px solid var(--mp-border)", display: "flex", flexDirection: "column", gap: 36 }}>
          {/* Step 1 */}
          <div>
            {stepLabel(1, "Elige tu experto")}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 10 }}>
              {EXPERTS.map((ex) => {
                const on = expert === ex.id;
                return (
                  <button key={ex.id} onClick={() => setExpert(ex.id)} style={{
                    display: "flex", alignItems: "center", gap: 11, padding: "12px 13px", cursor: "pointer", textAlign: "left",
                    border: on ? "2px solid var(--mp-mint-deep)" : "1.5px solid var(--mp-border)", borderRadius: "var(--mp-radius-md)",
                    background: on ? "var(--mp-mint-soft)" : "var(--mp-paper)", transition: "all 160ms var(--mp-ease)", fontFamily: "var(--mp-font-sans)",
                  }}>
                    <Avatar initials={ex.initials} hue={ex.hue} size={36} fontScale={0.38} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontWeight: 700, fontSize: 13.5, color: "var(--mp-ink)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ex.name.split(" ")[0]}</div>
                      <div style={{ fontSize: 11, color: "var(--mp-fg-subtle)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ex.tags[0]}</div>
                    </div>
                  </button>
                );
              })}
            </div>
          </div>
          {/* Step 2 */}
          <div>
            {stepLabel(2, "¿Sobre qué quieres hablar?")}
            <div style={{ display: "flex", flexWrap: "wrap", gap: 9 }}>
              {TOPICS.map((t) => {
                const on = topic === t;
                return (
                  <button key={t} onClick={() => setTopic(t)} style={{
                    border: on ? "0" : "1.5px solid var(--mp-border)", background: on ? "var(--mp-ink)" : "var(--mp-paper)",
                    color: on ? "var(--mp-paper)" : "var(--mp-ink)", borderRadius: 999, padding: "9px 16px",
                    fontFamily: "var(--mp-font-sans)", fontWeight: 600, fontSize: 13, cursor: "pointer", transition: "all 160ms var(--mp-ease)",
                  }}>{t}</button>
                );
              })}
            </div>
          </div>
          {/* Step 3 + 4 */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 28 }} className="mp-2col">
            <div>
              {stepLabel(3, "Elige la fecha")}
              <MiniCalendar monthDate={month} today={today} selected={date} onSelect={setDate}
                onPrev={() => changeMonth(-1)} onNext={() => changeMonth(1)} canPrev={canPrev} />
              <div style={{ fontSize: 11.5, color: "var(--mp-fg-subtle)", marginTop: 10 }}>Sesiones disponibles de lunes a jueves.</div>
            </div>
            <div>
              {stepLabel(4, "Elige el horario")}
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 9 }}>
                {SLOTS.map((s) => {
                  const on = slot === s.t && !s.taken;
                  return (
                    <button key={s.t} disabled={s.taken} onClick={() => setSlot(s.t)} style={{
                      padding: "13px 10px", borderRadius: "var(--mp-radius-md)", cursor: s.taken ? "default" : "pointer",
                      border: on ? "0" : "1.5px solid var(--mp-border)", fontFamily: "var(--mp-font-sans)", fontWeight: 700, fontSize: 14,
                      background: on ? "var(--mp-ink)" : s.taken ? "var(--mp-cloud)" : "var(--mp-paper)",
                      color: on ? "var(--mp-paper)" : s.taken ? "var(--mp-fg-subtle)" : "var(--mp-ink)",
                      textDecoration: s.taken ? "line-through" : "none", transition: "all 160ms var(--mp-ease)",
                    }}>{s.t}{s.taken && <span style={{ display: "block", fontSize: 9.5, fontWeight: 600, textDecoration: "none" }}>Ocupado</span>}</button>
                  );
                })}
              </div>
            </div>
          </div>
          {/* Step 5 */}
          <div>
            {stepLabel(5, "Tus datos")}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }} className="mp-2col">
              <input placeholder="Nombre completo" style={inp} value={form.name} onChange={upd("name")} autoComplete="name" />
              <input type="email" placeholder="Email" style={inp} value={form.email} onChange={upd("email")} autoComplete="email" />
              <input placeholder="Empresa (opcional)" style={{ ...inp, gridColumn: "1 / -1" }} value={form.company} onChange={upd("company")} autoComplete="organization" />
            </div>
          </div>
        </div>

        {/* Summary */}
        <aside style={{ position: "sticky", top: 112, background: "var(--mp-ink)", color: "var(--mp-paper)", borderRadius: "var(--mp-radius-xl)", padding: 30, boxShadow: "var(--mp-shadow-lg)" }}>
          <div style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 700, color: "var(--mp-mint)", marginBottom: 18 }}>Resumen</div>
          <div style={{ display: "flex", alignItems: "center", gap: 12, paddingBottom: 18, borderBottom: "1px solid rgba(255,255,255,0.1)", marginBottom: 18 }}>
            <Avatar initials={e.initials} hue={e.hue} size={46} ring />
            <div><div style={{ fontWeight: 700, fontSize: 15 }}>{e.name}</div><div style={{ fontSize: 12.5, color: "var(--mp-mint)" }}>{e.role}</div></div>
          </div>
          {[["Tema", topic || "Por definir"], ["Fecha", dateLabel], ["Duración", "60 minutos · online"]].map(([k, v]) => (
            <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 12, fontSize: 13.5, padding: "7px 0" }}>
              <span style={{ color: "rgba(255,255,255,0.6)" }}>{k}</span><span style={{ fontWeight: 600, textAlign: "right" }}>{v}</span>
            </div>
          ))}
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", margin: "18px 0", paddingTop: 18, borderTop: "1px solid rgba(255,255,255,0.1)" }}>
            <div><div style={{ fontSize: 13, color: "rgba(255,255,255,0.7)" }}>Sesión individual</div><div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.45)" }}>60 min · grabación + recursos</div></div>
            <div style={{ fontSize: 32, fontWeight: 800, color: "var(--mp-mint)", letterSpacing: "-0.02em" }}>$75</div>
          </div>
          <Button variant="mint" full size="lg" icon="arrowRight" disabled={!canConfirm} onClick={() => setConfirmed(true)}>Confirmar y pagar</Button>
          {!canConfirm && (
            <div style={{ marginTop: 10, fontSize: 11.5, color: "rgba(255,255,255,0.55)", textAlign: "center" }}>
              Completa tema, fecha y tus datos para continuar.
            </div>
          )}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 8, marginTop: 16, fontSize: 11.5, color: "rgba(255,255,255,0.55)", textAlign: "center" }}>
            <Icon name="lock" size={14} /> Pago seguro · Cancelación gratuita hasta 24h antes
          </div>
        </aside>
      </div>
    </Section>
  );
}

function MentTestimonials() {
  const items = [
    { q: "Llegué con un equipo de ventas desmotivado y salí con un plan claro de 30 días. Antonio entendió mi negocio en minutos.", name: "Daniel R.", role: "Fundador · agencia inmobiliaria", hue: 28 },
    { q: "Una hora con Jorge Luis me ahorró semanas de prueba y error automatizando mi operación. Brutalmente práctico.", name: "Lucía F.", role: "Gerente de Operaciones", hue: 205 },
  ];
  return (
    <Section bg="paper" pad="96px 28px">
      <Reveal style={{ marginBottom: 44 }}>
        <Eyebrow style={{ marginBottom: 16 }}>Historias de mentoría</Eyebrow>
        <h2 style={{ fontSize: "clamp(28px, 3.4vw, 46px)", fontWeight: 700, letterSpacing: "-0.03em", margin: 0, maxWidth: 640, lineHeight: 1.08, textWrap: "balance" }}>
          Una hora bien usada <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>cambia el rumbo.</span>
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="mp-2col">
        {items.map((it) => (
          <Reveal key={it.name}>
            <article style={{ background: "var(--mp-cloud)", borderRadius: "var(--mp-radius-lg)", padding: 32, display: "flex", flexDirection: "column", gap: 20, height: "100%" }}>
              <Stars value={5} size={16} />
              <p style={{ fontSize: 19, lineHeight: 1.5, margin: 0, color: "var(--mp-ink)", fontWeight: 500, 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={44} fontScale={0.36} />
                <div><div style={{ fontWeight: 700, fontSize: 14.5 }}>{it.name}</div><div style={{ fontSize: 12.5, color: "var(--mp-fg-muted)" }}>{it.role}</div></div>
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function Mentoria({ go, onCta }) {
  const scrollToBooking = () => {
    const el = document.getElementById("booking");
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 112, behavior: "smooth" });
  };
  const [pick, setPick] = useMentState(null);
  const onBook = (id) => { setPick(id); scrollToBooking(); };
  return (
    <main>
      <MentHero onBook={scrollToBooking} />
      <HowItWorks />
      <ExpertGrid onBook={onBook} />
      <BookingFlow key={pick || "default"} initialExpert={pick} />
      <MentTestimonials />
    </main>
  );
}

window.Mentoria = Mentoria;