/* ===== Kuntur home — bottom sections ===== */

function Expertise() {
  const D = window.KUNTUR;
  const [active, setActive] = useState(0);
  return (
    <section className="expertise section wrap" id="services">
      <Reveal className="sec-head" sel=".line-mask">
        <RevealText as="h2" className="sec-title">Nuestra Experiencia</RevealText>
        <span className="eyebrow">SERVICIOS</span>
      </Reveal>
      <hr className="divider" data-reveal />

      <Reveal className="exp__row" stagger={0.07}>
        {D.services.map((s, i) =>
        <div
          key={s.n}
          data-reveal
          className={"exp-panel " + (active === i ? "is-active" : "")}
          onMouseEnter={() => setActive(i)}
          onClick={() => setActive(i)}>
          
            <div className="exp-panel__media"><img src={s.img} alt={s.title} /></div>
            <div className="exp-panel__collapsed">
              <span className="exp-panel__n">({s.n})</span>
              <span className="exp-panel__vtitle">{s.title}</span>
            </div>
            <div className="exp-panel__body">
              <div className="exp-panel__top">
                <span className="exp-panel__n">({s.n})</span>
                <h3>{s.title}</h3>
              </div>
              <p>{s.desc}</p>
              <div className="exp-panel__tags">{s.tags.map((t, k) => <span key={k}>{t}</span>)}</div>
              <a className="exp-panel__link" href={s.href}>Ver servicio <Icon name="arrowUR" /></a>
            </div>
          </div>
        )}
      </Reveal>
    </section>);

}

function Testimonials() {
  const D = window.KUNTUR;
  const row1 = D.testimonials.slice(0, 3);
  const row2 = D.testimonials.slice(3, 6);
  const Card = (t, i) =>
  <figure className="tcard" key={i}>
      <div className="tcard__img"><img src={t.img} alt={t.name} /></div>
      <blockquote>"{t.q}"</blockquote>
      <figcaption><strong>{t.name}</strong><span>{t.role}</span></figcaption>
    </figure>;

  return (
    <section className="testimonials section" id="testimonials">
      <div className="wrap sec-head" data-reveal>
        <h2 className="sec-title">Historias de Clientes</h2>
        <span className="eyebrow">Testimonios</span>
      </div>
      <hr className="divider wrap" data-reveal style={{ marginBottom: 56 }} />
      <div className="tmarquee">
        <Marquee speed={70} gap={26} dir={1} pauseHover>{[...row1, ...row1].map(Card)}</Marquee>
        <Marquee speed={70} gap={26} dir={-1} pauseHover>{[...row2, ...row2].map(Card)}</Marquee>
      </div>
    </section>);

}

function Awards() {
  const D = window.KUNTUR;
  return (
    <section className="awards section wrap" id="awards">
      <Reveal className="sec-head" sel=".line-mask">
        <RevealText as="h2" className="sec-title">Logros y Premios</RevealText>
        <span className="eyebrow">Premios</span>
      </Reveal>
      <hr className="divider" data-reveal />
      <div className="awards__list">
        {D.awards.map((a, i) =>
        <div className="award" data-reveal key={i}>
            <span className="award__idx">{String(i + 1).padStart(2, "0")}</span>
            <div className="award__main">
              <h3>{a.title}</h3>
              <span className="award__sub">{a.sub}</span>
            </div>
            <div className="award__media"><img src={a.img} alt="" /></div>
            <span className="award__n">{a.n}</span>
          </div>
        )}
      </div>
    </section>);

}

function Process() {
  const D = window.KUNTUR;
  const ref = useRef(null);
  useGsapReady(() => {
    const section = ref.current;
    const mm = gsap.matchMedia();
    // Desktop: pinned (CSS sticky) + scroll-scrubbed. Columns 2/3/4 start below the
    // clip and rise into place sequentially as the section absorbs scroll.
    mm.add("(min-width: 1001px)", () => {
      gsap.set(".proc-col-2", { yPercent: 115 });
      gsap.set(".proc-col-3", { yPercent: 135 });
      gsap.set(".proc-col-4", { yPercent: 155 });
      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: () => "+=" + window.innerHeight * 2.4,
          scrub: 1.4,
          invalidateOnRefresh: true
        }
      });
      tl.to(".proc-col-2", { yPercent: 0, duration: 1, ease: "power2.out" }, 0).
      to(".proc-col-3", { yPercent: 0, duration: 1, ease: "power2.out" }, 0.28).
      to(".proc-col-4", { yPercent: 0, duration: 1, ease: "power2.out" }, 0.56);
      return () => gsap.set(".proc-col-2, .proc-col-3, .proc-col-4", { clearProps: "transform" });
    });
  }, []);

  const Col = (idx, els) =>
  <div className={"proc-col proc-col-" + (idx + 1)} key={idx}>{els}</div>;

  const cardOf = (s) =>
  <div className="cell proc-card" key="c">
      <span className="proc-card__n">(PASO - {s.n})</span>
      <div className="proc-card__txt"><h3>{s.title}</h3><p>{s.desc}</p></div>
    </div>;

  const imgOf = (s) =>
  <div className="cell proc-img" key="i"><img src={s.img} alt={s.title} /></div>;


  return (
    <section className="process" id="process" ref={ref}>
      <div className="process__sticky">
        <div className="process__header">
          <RevealText as="h2" className="sec-title">Cómo Trabajamos</RevealText>
          <span className="process__rule"></span>
          <span className="eyebrow">Proceso de Trabajo</span>
        </div>
        <div className="process__clip">
          <div className="process__grid">
            {D.steps.map((s, i) => {
              const textTop = i % 2 === 0;
              return Col(i, textTop ? [cardOf(s), imgOf(s)] : [imgOf(s), cardOf(s)]);
            })}
          </div>
        </div>
      </div>
    </section>);

}

function Cases() {
  const D = window.KUNTUR;
  const wrapRef = useRef(null);
  useGsapReady(() => {
    const cards = gsap.utils.toArray(".cscard-wrap", wrapRef.current);
    cards.forEach((wrap, i) => {
      if (i === cards.length - 1) return;
      const card = wrap.querySelector(".cscard");
      // dim + shrink the pinned card only as the NEXT card slides up to cover it
      gsap.fromTo(card,
      { scale: 1, filter: "brightness(1)" },
      {
        scale: 0.95, filter: "brightness(0.7)", transformOrigin: "center top", ease: "none",
        scrollTrigger: {
          trigger: cards[i + 1],
          start: "top 80%",
          end: "top " + (94 + i * 26 + "px"),
          scrub: true
        }
      }
      );
    });
  }, []);
  return (
    <section className="cases section wrap" id="cases">
      <Reveal className="sec-head" sel=".line-mask">
        <RevealText as="h2" className="sec-title">Casos de Estudio</RevealText>
        <span className="eyebrow">Rendimiento</span>
      </Reveal>
      <hr className="divider" data-reveal />
      <div className="cases__stack" ref={wrapRef}>
        {D.cases.map((c, i) =>
        <div className="cscard-wrap" key={c.n} style={{ "--i": i }}>
            <a className="cscard" href={c.href}>
              <div className="cscard__media"><img src={c.img} alt={c.title} /></div>
              <div className="cscard__content">
                <div className="cscard__top">
                  <div className="cscard__brand"><img src={c.brandLogo} alt="" /><span>{c.brand}</span></div>
                  <div className="cscard__case">CASO ({c.n})</div>
                </div>
                <hr className="cscard__divider" />
                <div className="cscard__cols">
                  <div className="cscard__l">
                    <h3>{c.title}</h3>
                    <p className="cscard__metric">{c.metric}</p>
                    <span className="cscard__more">Saber Más</span>
                  </div>
                  <div className="cscard__r">
                    <p className="cscard__desc">{c.desc}</p>
                    <div className="cscard__author">
                      <img src={c.authorImg} alt={c.name} />
                      <div><strong>{c.name}</strong><span>{c.role}</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
          </div>
        )}
      </div>
    </section>);

}

function Faq() {
  const D = window.KUNTUR;
  const [open, setOpen] = useState(0);
  return (
    <section className="faq section wrap" id="faq">
      <div className="sec-head" data-reveal>
        <h2 className="sec-title">Preguntas Frecuentes</h2>
        <span className="eyebrow">FAQ</span>
      </div>
      <hr className="divider" data-reveal />
      <div className="faq__grid">
        <div className="faq__list">
          {D.faqs.map((f, i) =>
          <div className={"qa " + (open === i ? "is-open" : "")} data-reveal key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="qa__q">
                <span className="qa__n">Q-{String(i + 1).padStart(2, "0")}</span>
                <span className="qa__txt">{f.q}</span>
                <span className="qa__ic"><i></i><i></i></span>
              </div>
              <div className="qa__a"><p>{f.a}</p></div>
            </div>
          )}
        </div>
        <div className="faq__aside" data-reveal>
          <div className="faq__img"><img src={D.faqImage} alt="" /></div>
        </div>
      </div>
    </section>);

}

function Blog() {
  const D = window.KUNTUR;
  return (
    <section className="blog section wrap" id="blog">
      <Reveal className="sec-head" sel=".line-mask">
        <RevealText as="h2" className="sec-title">Último Artículo</RevealText>
        <span className="eyebrow">Blog</span>
      </Reveal>
      <hr className="divider" data-reveal />
      <Reveal className="blog__grid" stagger={0.1}>
        {D.blog.map((b, i) =>
        <a className={"post " + (i === 0 ? "post--lead" : "")} data-reveal key={i} href={b.href}>
            <div className="post__media"><img src={RA(b.img) || (i === 0 ? D.faqImage : D.work[i].img)} alt="" /></div>
            <div className="post__body">
              <span className="post__cat"><i></i>{b.cat}</span>
              <h3>{b.title}</h3>
              <div className="post__meta">{b.date} · {b.read}</div>
            </div>
          </a>
        )}
      </Reveal>
    </section>);

}

Object.assign(window, { Expertise, Testimonials, Process, Cases, Faq, Blog });