// Differentiators + App Tour carousel

function ManifestoStrip() {
  return (
    <section style={{ padding: "60px 0", background: "var(--ink)", color: "var(--cream)", position: "relative", overflow: "hidden" }}>
      <div className="container">
        <Reveal>
          <div style={{ textAlign: "center", maxWidth: 800, margin: "0 auto" }}>
            <h2
              className="display"
              style={{
                fontSize: "clamp(36px, 5vw, 72px)",
                color: "var(--cream)",
                letterSpacing: "-0.02em",
              }}
            >
              "No es un chatbot.<br />
              Es <em style={{ color: "var(--accent-soft)" }}>metodología.</em>"
            </h2>
          </div>
        </Reveal>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .manifesto-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
        }
      `}</style>
    </section>
  );
}

function Differentiators() {
  return (
    <section id="diferenciadores" style={{ padding: "140px 0 60px" }}>
      <div className="container">
        <Reveal stagger>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 22 }}>
            <Mono>Por qué es diferente</Mono>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
          </div>
          <h2
            className="display"
            style={{
              fontSize: "clamp(40px, 5.6vw, 76px)",
              maxWidth: 1000,
              marginBottom: 64,
            }}
          >
            Cuatro razones por las que <em>esto no es</em><br />
            otra herramienta de IA más.
          </h2>
        </Reveal>

        <Reveal stagger>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
              gap: 0,
              borderTop: "1px solid var(--line)",
              borderLeft: "1px solid var(--line)",
            }}
          >
            {DIFFERENTIATORS.map((d, i) => (
              <div
                key={i}
                style={{
                  padding: "40px 32px 44px",
                  borderRight: "1px solid var(--line)",
                  borderBottom: "1px solid var(--line)",
                  display: "flex",
                  flexDirection: "column",
                  gap: 16,
                  minHeight: 320,
                  background: i % 2 === 0 ? "rgba(255,255,255,0.25)" : "transparent",
                }}
              >
                <span
                  style={{
                    fontSize: 11,
                    fontFamily: "var(--font-mono)",
                    letterSpacing: "0.16em",
                    textTransform: "uppercase",
                    color: "var(--accent)",
                    fontWeight: 500,
                  }}
                >
                  {String(i + 1).padStart(2, "0")} · {d.eyebrow}
                </span>
                <h3 className="display" style={{ fontSize: 30, marginTop: 8, lineHeight: 1.1 }}>
                  {d.title}
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink-soft)", marginTop: "auto" }}>
                  {d.body}
                </p>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// App tour — horizontal carousel
function AppTour() {
  const trackRef = useRef(null);
  const [idx, setIdx] = useState(0);
  const shots = METHOD_STEPS;

  const scrollTo = (i) => {
    const t = trackRef.current;
    if (!t) return;
    const child = t.children[i];
    if (child) {
      t.scrollTo({ left: child.offsetLeft - 24, behavior: "smooth" });
    }
  };

  useEffect(() => {
    const t = trackRef.current;
    if (!t) return;
    const onScroll = () => {
      const center = t.scrollLeft + t.clientWidth / 2;
      let nearest = 0;
      let dist = Infinity;
      Array.from(t.children).forEach((c, i) => {
        const cc = c.offsetLeft + c.clientWidth / 2;
        const d = Math.abs(cc - center);
        if (d < dist) {
          dist = d;
          nearest = i;
        }
      });
      setIdx(nearest);
    };
    t.addEventListener("scroll", onScroll, { passive: true });
    return () => t.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section id="tour" style={{ padding: "100px 0 140px", position: "relative" }}>
      <div className="container">
        <Reveal stagger>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, marginBottom: 22 }}>
            <Mono>Tour por la app</Mono>
            <span style={{ flex: 1, height: 1, background: "var(--line)" }} />
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "space-between",
              gap: 32,
              marginBottom: 56,
              flexWrap: "wrap",
            }}
          >
            <h2 className="display" style={{ fontSize: "clamp(36px, 5vw, 64px)", maxWidth: 720 }}>
              Así de bonita y sencilla<br />
              es <em>la plataforma</em> por dentro.
            </h2>
            <div style={{ display: "flex", gap: 10 }}>
              <button
                onClick={() => scrollTo(Math.max(0, idx - 1))}
                style={arrowBtn}
                aria-label="Anterior"
              >
                ←
              </button>
              <button
                onClick={() => scrollTo(Math.min(shots.length - 1, idx + 1))}
                style={arrowBtn}
                aria-label="Siguiente"
              >
                →
              </button>
            </div>
          </div>
        </Reveal>
      </div>

      <div
        ref={trackRef}
        className="nobar"
        style={{
          display: "flex",
          gap: 28,
          overflowX: "auto",
          scrollSnapType: "x mandatory",
          padding: "20px var(--gutter) 40px",
          scrollPadding: "var(--gutter)",
        }}
      >
        {shots.map((s, i) => (
          <div
            key={s.n}
            style={{
              flex: "0 0 78%",
              maxWidth: 1040,
              scrollSnapAlign: "center",
              transition: "transform 0.5s ease, opacity 0.5s ease",
              transform: idx === i ? "scale(1)" : "scale(0.97)",
              opacity: idx === i ? 1 : 0.6,
            }}
          >
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 14,
                marginBottom: 14,
              }}
            >
              <span
                style={{
                  width: 34,
                  height: 34,
                  borderRadius: 8,
                  background: s.accent,
                  color: "white",
                  display: "grid",
                  placeItems: "center",
                  fontFamily: "var(--font-mono)",
                  fontSize: 12,
                  fontWeight: 500,
                }}
              >
                {s.n}
              </span>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <span style={{ fontSize: 11, fontFamily: "var(--font-mono)", letterSpacing: "0.14em", color: "var(--ink-muted)" }}>
                  {s.name.toUpperCase()}
                </span>
                <span style={{ fontSize: 17, fontWeight: 500 }}>{s.title}</span>
              </div>
            </div>
            <div
              style={{
                background: "white",
                borderRadius: 14,
                overflow: "hidden",
                border: "1px solid var(--line)",
                boxShadow: "0 30px 60px -25px rgba(14,34,54,0.32)",
              }}
            >
              <img
                src={s.img}
                alt={s.name}
                style={{ width: "100%", height: 520, objectFit: "cover", objectPosition: "top", display: "block" }}
              />
            </div>
          </div>
        ))}
      </div>

      <div className="container">
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 12 }}>
          {shots.map((_, i) => (
            <button
              key={i}
              onClick={() => scrollTo(i)}
              aria-label={`Ir a paso ${i + 1}`}
              style={{
                width: idx === i ? 28 : 8,
                height: 8,
                borderRadius: 999,
                background: idx === i ? "var(--ink)" : "var(--line-strong)",
                border: "none",
                padding: 0,
                transition: "all 0.3s ease",
              }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

const arrowBtn = {
  width: 48,
  height: 48,
  borderRadius: 999,
  border: "1px solid var(--line-strong)",
  background: "transparent",
  color: "var(--ink)",
  fontSize: 18,
  display: "grid",
  placeItems: "center",
  transition: "all 0.2s ease",
};

Object.assign(window, { ManifestoStrip, Differentiators, AppTour });