/* global React, Icon, Eyebrow, Flourish, Button, Section, Reveal, Avatar, Tag, EXPERTS */
function NosHero() {
  return (
    <section style={{ background: "var(--mp-ink)", color: "var(--mp-paper)", padding: "150px 28px 90px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "-12%", right: "10%", width: 540, height: 540, borderRadius: 999, background: "radial-gradient(circle, rgba(129,241,200,0.28), transparent 62%)", filter: "blur(30px)" }} />
      <div style={{ maxWidth: 900, margin: "0 auto", position: "relative" }}>
        <Reveal>
          <Eyebrow onDark style={{ marginBottom: 24 }}>Quiénes somos</Eyebrow>
          <h1 style={{ fontSize: "clamp(40px, 5.6vw, 86px)", fontWeight: 800, lineHeight: 0.98, letterSpacing: "-0.038em", margin: "0 0 24px", textWrap: "balance" }}>
            No hablamos de experiencia.<br /><span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>La vivimos.</span>
          </h1>
          <p style={{ fontSize: "clamp(17px, 1.6vw, 23px)", lineHeight: 1.55, color: "rgba(255,255,255,0.78)", maxWidth: 720, margin: 0, textWrap: "pretty" }}>
            Somos cinco especialistas con trayectorias reales, casos de éxito reales y la disposición de compartir lo que sabemos de manera directa, práctica y sin filtros.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <Section bg="cloud" pad="100px 28px">
      <Reveal style={{ maxWidth: 1000, margin: "0 auto", textAlign: "center" }}>
        <Icon name="award" size={40} style={{ color: "var(--mp-mint-deep)", margin: "0 auto 28px" }} />
        <blockquote style={{ margin: 0, fontSize: "clamp(26px, 3.6vw, 50px)", fontWeight: 500, fontStyle: "italic", lineHeight: 1.2, letterSpacing: "-0.02em", color: "var(--mp-ink)", textWrap: "balance" }}>
          "El conocimiento más valioso no está en un libro. Está en alguien que ya lo vivió, lo probó y sabe por qué falló la primera vez. <span style={{ fontStyle: "normal", fontWeight: 700, color: "var(--mp-mint-deep)" }}>MarketProof es ese alguien.</span>"
        </blockquote>
      </Reveal>
    </Section>
  );
}

function Values() {
  const vals = [
    { icon: "zap", t: "Conocimiento sin rodeos", d: "Vamos directo a lo que funciona. Sin paja, sin relleno." },
    { icon: "target", t: "Expertos, no teóricos", d: "Enseñamos lo que seguimos ejerciendo cada día." },
    { icon: "handshake", t: "Relación, no transacción", d: "Nos importa que apliques y crezcas, no solo que compres." },
    { icon: "globe", t: "Hecho para Latinoamérica", d: "Contexto, ejemplos y realidad de nuestra región." },
  ];
  return (
    <Section bg="ink" pad="96px 28px">
      <Reveal style={{ marginBottom: 48, maxWidth: 640 }}>
        <Eyebrow onDark style={{ marginBottom: 18 }}>Lo que nos mueve</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          Cuatro principios. <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>Cero excepciones.</span>
        </h2>
      </Reveal>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }} className="mp-2col">
        {vals.map((v, i) => (
          <Reveal key={v.t} delay={(i % 2) * 80}>
            <div style={{ height: "100%", background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.11)", borderRadius: "var(--mp-radius-lg)", padding: 32, backdropFilter: "blur(18px) saturate(140%)", boxShadow: "inset 0 1px 0 rgba(255,255,255,0.08)", display: "flex", gap: 20, alignItems: "flex-start" }}>
              <div style={{ width: 56, height: 56, borderRadius: 16, background: "rgba(129,241,200,0.14)", color: "var(--mp-mint)", display: "flex", alignItems: "center", justifyContent: "center", flex: "0 0 auto" }}><Icon name={v.icon} size={28} /></div>
              <div>
                <h3 style={{ fontSize: 21, fontWeight: 700, letterSpacing: "-0.015em", margin: "0 0 8px" }}>{v.t}</h3>
                <p style={{ fontSize: 15, color: "rgba(255,255,255,0.68)", lineHeight: 1.55, margin: 0, textWrap: "pretty" }}>{v.d}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function ExpertProfile({ e, index, onBook }) {
  const flip = index % 2 === 1;
  return (
    <Reveal>
      <div style={{ display: "grid", gridTemplateColumns: flip ? "1fr 0.85fr" : "0.85fr 1fr", gap: 48, alignItems: "center" }} className="mp-2col">
        <div style={{ order: flip ? 2 : 1, position: "relative" }}>
          <div style={{ position: "relative", borderRadius: "var(--mp-radius-2xl)", overflow: "hidden", aspectRatio: "4 / 3", background: `linear-gradient(150deg, hsl(${e.hue} 40% 86%), hsl(${e.hue} 34% 72%))` }}>
            <image-slot id={"nos-" + e.id} fit="cover" placeholder={"Foto de " + e.name.split(" ")[0]}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", borderRadius: 0 }}></image-slot>
            <div style={{ position: "absolute", bottom: 18, left: 18, width: 64, height: 64, borderRadius: 999, background: "var(--mp-paper)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 22, color: "var(--mp-ink)", boxShadow: "var(--mp-shadow-md)", pointerEvents: "none" }}>{e.initials}</div>
          </div>
        </div>
        <div style={{ order: flip ? 1 : 2 }}>
          <h3 style={{ fontSize: "clamp(28px, 3.2vw, 42px)", fontWeight: 700, letterSpacing: "-0.025em", margin: "0 0 4px", lineHeight: 1.05 }}>{e.name}</h3>
          <div style={{ fontSize: 15, color: "var(--mp-mint-deep)", fontWeight: 700, marginBottom: 18 }}>{e.role}</div>
          <p style={{ fontSize: 18, fontStyle: "italic", color: "var(--mp-ink)", fontWeight: 500, lineHeight: 1.4, margin: "0 0 18px", textWrap: "balance" }}>"{e.quote}"</p>
          <p style={{ fontSize: 16, color: "var(--mp-fg-muted)", lineHeight: 1.6, margin: "0 0 22px", maxWidth: 520, textWrap: "pretty" }}>{e.bio}</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 26 }}>
            {e.tags.map((t) => <Tag key={t} hue={e.hue}>{t}</Tag>)}
          </div>
          <Button variant="ink" icon="arrowRight" onClick={() => onBook(e.id)}>Agendar sesión</Button>
        </div>
      </div>
    </Reveal>
  );
}

function ExpertProfiles({ onBook }) {
  return (
    <Section bg="paper" pad="100px 28px">
      <Reveal style={{ marginBottom: 64, maxWidth: 640 }}>
        <Eyebrow style={{ marginBottom: 18 }}>El equipo</Eyebrow>
        <h2 style={{ fontSize: "clamp(30px, 3.8vw, 52px)", fontWeight: 700, lineHeight: 1.06, letterSpacing: "-0.03em", margin: 0, textWrap: "balance" }}>
          Cinco nombres. Cinco <span style={{ fontStyle: "italic", color: "var(--mp-mint-deep)" }}>trayectorias.</span>
        </h2>
      </Reveal>
      <div style={{ display: "flex", flexDirection: "column", gap: 80 }}>
        {EXPERTS.map((e, i) => <ExpertProfile key={e.id} e={e} index={i} onBook={onBook} />)}
      </div>
    </Section>
  );
}

function JoinTeam({ go }) {
  return (
    <Section bg="ink" pad="96px 28px">
      <Reveal style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
        <Eyebrow onDark style={{ marginBottom: 20, justifyContent: "center" }}>Únete</Eyebrow>
        <h2 style={{ fontSize: "clamp(28px, 3.8vw, 50px)", fontWeight: 700, lineHeight: 1.08, letterSpacing: "-0.03em", margin: "0 0 28px", textWrap: "balance" }}>
          ¿Eres experto en tu área y quieres <span style={{ fontStyle: "italic", color: "var(--mp-mint)" }}>compartir lo que sabes?</span>
        </h2>
        <Button variant="mint" size="lg" icon="arrowRight" onClick={() => go("talleres")}>Contáctanos</Button>
      </Reveal>
    </Section>
  );
}

function Nosotros({ go }) {
  return (
    <main>
      <NosHero />
      <Manifesto />
      <Values />
      <ExpertProfiles onBook={() => go("mentoria")} />
      <JoinTeam go={go} />
    </main>
  );
}

window.Nosotros = Nosotros;