// About Jaime + social proof + big number callout

function SocialProofBig() {
  return (
    <section style={{ padding: "100px 0", background: "var(--cream-2)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <Reveal stagger>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
              gap: 56,
              alignItems: "center",
            }}
            className="proof-grid"
          >
            <div>
              <Mono>Por qué confiar en el método</Mono>
              <div
                className="display"
                style={{
                  fontSize: "clamp(80px, 14vw, 200px)",
                  lineHeight: 0.85,
                  marginTop: 24,
                  letterSpacing: "-0.04em",
                }}
              >
                <span style={{ color: "var(--accent)" }}>+10K</span>
              </div>
              <p style={{ fontSize: 17, color: "var(--ink-soft)", maxWidth: 360, marginTop: 16 }}>
                profesionales han descargado el Media Planning Canvas y aprendido
                a planificar marketing con este método.
              </p>
            </div>

            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 0,
                borderTop: "1px solid var(--line)",
                borderLeft: "1px solid var(--line)",
              }}
            >
              {[
                { n: "+3K", l: "personas a diario", s: "usan la plataforma a diario" },
                { n: "+30", l: "vídeo píldoras", s: "formación en cada paso" },
                { n: "+100", l: "canales recomendados", s: "Notoriedad, Interacción, Lead, Fidelización" },
                { n: "IA", l: "en cada paso", s: "agentes que te ayudan" },
              ].map((s, i) => (
                <div
                  key={i}
                  style={{
                    padding: "32px 28px",
                    borderRight: "1px solid var(--line)",
                    borderBottom: "1px solid var(--line)",
                  }}
                >
                  <div className="display" style={{ fontSize: 56, lineHeight: 1, marginBottom: 10 }}>
                    {s.n}
                  </div>
                  <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4 }}>{s.l}</div>
                  <div style={{ fontSize: 13, color: "var(--ink-muted)" }}>{s.s}</div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .proof-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}


function ClientLogos() {
 const companies = [
    "EY", "KPMG", "IE Business School", "Coca Cola", "Leroy Merlin",
    "P&G", "Omnicom Media", "Havas Media", "SACYR", "Nestlé",
    "Merck", "Mastercard", "Google", "SAGE", "Oracle",
    "Uber", "Netflix", "Más Orange", "BT", "Samsung",
    "IKEA", "Deloitte", "BMW", "Repsol", "Telefónica",
  ];


  return (
    <section style={{ padding: "64px 0", background: "var(--cream-2)", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <Reveal>
          <p
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              letterSpacing: "0.16em",
              textTransform: "uppercase",
              color: "var(--ink-muted)",
              textAlign: "center",
              marginBottom: 32,
            }}
          >
            PROFESIONALES QUE HAN APRENDIDO CON EL MÉTODO
          </p>
        </Reveal>
        <div
          className="marquee"
          style={{ overflow: "hidden" }}
        >
          <div className="marquee-track">
            {[...companies, ...companies].map((name, i) => (
              <span
                key={i}
                style={{
                  fontSize: 15,
                  fontWeight: 600,
                  color: "var(--ink-2)",
                  opacity: 0.6,
                  whiteSpace: "nowrap",
                  letterSpacing: "-0.01em",
                  fontFamily: "var(--font-body)",
                }}
              >
                {name}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutJaime() {
  return (
    <section
      id="jaime"
      style={{
        padding: "140px 0 120px",
        background: "var(--ink)",
        color: "var(--cream)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div className="container">
        <Reveal stagger>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 22 }}>
            <span
              style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                letterSpacing: "0.16em",
                textTransform: "uppercase",
                color: "var(--accent-soft)",
              }}
            >
              El creador del método
            </span>
            <span style={{ flex: 1, height: 1, background: "rgba(239,232,218,0.18)" }} />
          </div>
        </Reveal>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)",
            gap: 80,
            alignItems: "start",
          }}
          className="jaime-grid"
        >
          {/* Left: photo + caption */}
          <Reveal>
            <div
              style={{
                position: "relative",
                borderRadius: 12,
                overflow: "hidden",
                aspectRatio: "4 / 3",
                background: "var(--ink-2)",
              }}
            >
              <img
                src="assets/jaime-stage.jpg"
                alt="Jaime Fernández de la Puente Campano"
                style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}
              />
              <div
                style={{
                  position: "absolute",
                  left: 16,
                  bottom: 16,
                  padding: "8px 12px",
                  background: "rgba(14,34,54,0.7)",
                  backdropFilter: "blur(8px)",
                  borderRadius: 6,
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.14em",
                  textTransform: "uppercase",
                  color: "var(--cream)",
                }}
              >
                Ponente · Consultor · Emprendedor · Autor
              </div>
            </div>

            <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 8 }}>
              {[
                { label: "Instagram", url: "https://www.instagram.com/peoplexbrand/" },
                { label: "TikTok", url: "https://www.tiktok.com/@peoplexbrand" },
                { label: "Wikipedia", url: "https://es.wikipedia.org/wiki/Jaime_Fernandez_de_la_Puente-Campano" },
                { label: "Web personal", url: "https://www.jaimefernandez.com" },
              ].map((t, i) => (
                <a
                  key={i}
                  href={t.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  style={{
                    padding: "6px 12px",
                    borderRadius: 999,
                    border: "1px solid rgba(239,232,218,0.22)",
                    fontSize: 12,
                    fontFamily: "var(--font-mono)",
                    letterSpacing: "0.08em",
                    color: "var(--cream)",
                    opacity: 0.85,
                    textDecoration: "none",
                  }}
                >
                  {t.label}
                </a>
              ))}
            </div>
          </Reveal>

          {/* Right: text + creds */}
          <Reveal stagger>
            <h2
              className="display"
              style={{
                fontSize: "clamp(40px, 5.4vw, 72px)",
                color: "var(--cream)",
                marginBottom: 28,
              }}
            >
              Jaime Fernández<br />
              de la Puente Campano.<br />
              <em style={{ color: "var(--accent-soft)" }}>Creador del método.</em>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "rgba(239,232,218,0.78)", marginBottom: 20 }}>
              Fundador del ecosistema <strong style={{ color: "var(--cream)" }}>PeopleXBrand</strong>,
              que ayuda a profesionales y empresas a desarrollar su marketing personal.
              Creador del método Media Planning Canvas, usado por miles de profesionales y
              estudiantes de marketing en España.
            </p>

          </Reveal>
        </div>
      </div>

      <style>{`
        @media (max-width: 960px) {
          .jaime-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
        }
        @media (max-width: 520px) {
          .creds-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

// Pull quote between sections
function PullQuote() {
  return (
    <section style={{ padding: "140px 0", position: "relative" }}>
      <div className="container">
        <Reveal>
          <figure style={{ margin: 0, maxWidth: 980 }}>
            <blockquote
              className="display"
              style={{
                fontSize: "clamp(34px, 4.4vw, 60px)",
                margin: 0,
                lineHeight: 1.1,
                letterSpacing: "-0.02em",
              }}
            >
              <span style={{ color: "var(--accent)" }}>"</span>
              No queremos solo que hagas planes de marketing.
              Queremos que <em>seas un experto</em> para que no te engañen
              y lleves tu negocio a otro nivel.
              <span style={{ color: "var(--accent)" }}>"</span>
            </blockquote>
            <figcaption style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 14 }}>
              <span style={{ width: 40, height: 1, background: "var(--ink)" }} />
              <span style={{ fontSize: 14, fontWeight: 500 }}>Jaime Fdez. de la Puente</span>
              <span style={{ fontSize: 13, color: "var(--ink-muted)" }}>
                · creador del método
              </span>
            </figcaption>
          </figure>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { SocialProofBig, ClientLogos, AboutJaime, PullQuote });