// 22K hi-fi — Sections 03–06: O que fazemos, Prêmios, Canais, Depoimentos.

// Vertical side-tag (rotated -90°) — matches the wireframe v0.3 affordance
function SideTag({ label, dark = false }) {
  return (
    <span
      className="mono r-hide-sm"
      style={{
        position: "absolute",
        top: "50%", left: 18,
        transform: "translateY(-50%) rotate(-90deg)",
        transformOrigin: "50% 50%",
        fontSize: 10, letterSpacing: "0.22em",
        color: dark ? "var(--text-mute)" : "#6f6a5d",
        whiteSpace: "nowrap"
      }}>
      
      {label}
    </span>);

}
window.SideTag = SideTag;

// Manifesto with a scroll-linked "fill" reveal: each word starts light and
// turns ink (#0A0A0A) word-by-word as the section scrolls into view.
const MANIFESTO_TEXT =
  "SOMOS UMA PRODUTORA DE CINEMA ARQUITETÔNICO. TRABALHAMOS PARA MARCAS QUE QUEREM DIZER ALGO — E AJUDAMOS A DIZER MELHOR, COM FILME, RITMO E DIREÇÃO.";

function RevealManifesto({ text = MANIFESTO_TEXT }) {
  const ref = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      const el = ref.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight || document.documentElement.clientHeight;
      // start filling when the text top is ~88% down the viewport,
      // finish when it has risen to ~38%.
      const start = vh * 0.88, end = vh * 0.38;
      const p = (start - r.top) / (start - end);
      setProgress(Math.max(0, Math.min(1, p)));
    };
    const onScroll = () => { if (!raf) raf = window.requestAnimationFrame(compute); };
    compute();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      if (raf) window.cancelAnimationFrame(raf);
    };
  }, []);

  const words = text.split(" ");
  const lit = progress * (words.length + 2); // small lead so the last words finish

  return (
    <p
      ref={ref}
      style={{
        margin: 0,
        fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
        lineHeight: 1.45,
        letterSpacing: "-0.015em",
        textWrap: "pretty",
        textTransform: "uppercase",
        fontSize: "clamp(22px, 5.5vw, 36px)",
        fontWeight: 500
      }}>
      {words.map((w, i) =>
        <span
          key={i}
          style={{
            color: i < lit ? "#0A0A0A" : "#cdc6b6",
            transition: "color .5s cubic-bezier(.2,.7,.2,1)"
          }}>
          {w}{i < words.length - 1 ? " " : ""}
        </span>
      )}
    </p>);

}
window.RevealManifesto = RevealManifesto;

function OQueFazemos() {
  return (
    <section
      id="sobre"
      className="r-sec"
      style={{
        background: "var(--paper)",
        color: "var(--ink)",
        padding: "200px 36px",
        position: "relative"
      }}>
      
      <SideTag label="O que fazemos" />
      <div style={{ maxWidth: 1280, margin: "0 auto", fontFamily: "\"Helvetica Neue\"", fontWeight: "400" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: "1px solid rgba(0,0,0,.14)",
          marginBottom: 96
        }}>
          <span className="mono" style={{ color: "#6f6a5d", fontSize: 11 }}>[ Sobre ]</span>
          <span className="mono" style={{ color: "#6f6a5d", fontSize: 11 }}>(02)</span>
        </div>
        <div style={{ maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
          <RevealManifesto />
        </div>
        <div style={{ marginTop: 72, display: "flex", justifyContent: "center" }}>
          <a
            href="#contato"
            style={{
              display: "inline-flex", alignItems: "center", gap: 12,
              padding: "16px 36px",
              background: "var(--ink)", color: "#fff",
              fontWeight: 700, fontSize: 13, letterSpacing: "0.1em",
              textTransform: "uppercase",
              transition: "all .25s"
            }}
            onMouseEnter={(e) => {e.currentTarget.style.background = "var(--accent)";e.currentTarget.style.color = "#000";}}
            onMouseLeave={(e) => {e.currentTarget.style.background = "var(--ink)";e.currentTarget.style.color = "#fff";}}>
            Agende agora
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none">
              <path d="M9 1l4 4-4 4M0 5h13" stroke="currentColor" strokeWidth="1.4" />
            </svg>
          </a>
        </div>
      </div>
    </section>);

}

function PremiosCanais() {
  // 04 · Credenciais = client logo wall (Figma 7:126)
  const logos = [1, 2, 3, 4, 5].map((n) => `assets/Credenciais/${n}.jpg`);
  return (
    <section className="r-sec" style={{ background: "var(--ink)", padding: "180px 36px", position: "relative" }}>
      <SideTag label="Em boa companhia" dark />
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: "1px solid var(--line-strong)",
          marginBottom: 96
        }}>
          <span className="mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>[ Em boa companhia ]</span>
          <span className="mono" style={{ color: "var(--text-mute)", fontSize: 11 }}>(04)</span>
        </div>
        {/* Client logo wall */}
        <div className="r-grid-logos" style={{
          display: "grid", gridTemplateColumns: "repeat(5, 1fr)",
          gap: "clamp(12px, 2vw, 28px)", alignItems: "center", justifyItems: "center",
          paddingTop: 24
        }}>
          {logos.map((src, i) =>
          <img
            key={i}
            src={src}
            alt=""
            loading="lazy"
            style={{
              height: "clamp(96px, 10vw, 150px)", width: "auto",
              objectFit: "contain",
              opacity: 0.85, transition: "opacity .3s"
            }}
            onMouseEnter={(e) => { e.currentTarget.style.opacity = "1"; }}
            onMouseLeave={(e) => { e.currentTarget.style.opacity = "0.85"; }} />
          )}
        </div>
      </div>
    </section>);

}

function Depoimentos() {
  // Shows 2 at a time, rotating through the whole bank every 10s.
  const all = TESTIMONIALS;
  const [start, setStart] = React.useState(0);
  const [fade, setFade] = React.useState(true);

  React.useEffect(() => {
    if (all.length <= 2) return;
    const id = setInterval(() => {
      setFade(false);
      setTimeout(() => {
        setStart((s) => (s + 2) % all.length);
        setFade(true);
      }, 500);
    }, 10000);
    return () => clearInterval(id);
  }, [all.length]);

  const items = all.length <= 2
    ? all
    : [all[start % all.length], all[(start + 1) % all.length]];
  const bg = "var(--paper)"; // light paper
  const muteOnBg = "#6f6a5d";
  const ruleOnBg = "rgba(0,0,0,.14)";
  return (
    <section className="r-sec" style={{ background: bg, padding: "180px 36px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "baseline",
          paddingBottom: 28,
          borderBottom: `1px solid ${ruleOnBg}`,
          marginBottom: 96
        }}>
          <span className="mono" style={{ color: muteOnBg, fontSize: 11 }}>[ Depoimentos ]</span>
          <span className="mono" style={{ color: muteOnBg, fontSize: 11 }}>(06)</span>
        </div>
        <div className="r-grid" style={{
          display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "clamp(48px, 6vw, 96px)",
          opacity: fade ? 1 : 0, transition: "opacity .5s ease"
        }}>
          {items.map((t, i) =>
          <figure
            key={i}
            style={{
              margin: 0,
              position: "relative",
              display: "flex", flexDirection: "column", gap: 24
            }}>
            
              <span
              style={{
                fontFamily: "Georgia, serif",
                fontSize: 56, color: muteOnBg, lineHeight: 0.6,
                marginBottom: -8
              }}>
              ”</span>
              <blockquote style={{
              margin: 0,
              fontFamily: "'Helvetica Neue', Helvetica, sans-serif",
              fontWeight: 400, fontSize: 18, lineHeight: 1.5,
              color: "var(--ink)", letterSpacing: "-0.01em",
              textWrap: "pretty"
            }}>{t.quote}</blockquote>
              <figcaption style={{ marginTop: "auto", paddingTop: 24, display: "flex", flexDirection: "column", gap: 4 }}>
                <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)" }}>{t.name}</span>
                <span className="mono" style={{ color: muteOnBg, fontSize: 10 }}>{t.role}</span>
              </figcaption>
            </figure>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { OQueFazemos, PremiosCanais, Depoimentos });