// Stats + Contact/Footer — flipped HLS video, GSAP marquee, email CTA, socials.
const { useRef: useRefSC, useEffect: useEffectSC, useState: useStateSC } = React;

const STATS = [
{ value: "8+", label: "Years Experience" },
{ value: "95+", label: "Projects Done" },
{ value: "200%", label: "Satisfied Clients" }];


function Stats() {
  const ref = useRefSC(null);
  useEffectSC(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll(".reveal-up");
    const anims = [];
    els.forEach((el, i) => {
      anims.push(
        window.gsap.to(el, {
          opacity: 1, y: 0, duration: 0.9, ease: "power2.out", delay: i * 0.1,
          scrollTrigger: { trigger: ref.current, start: "top 80%", once: true }
        })
      );
    });
    return () => anims.forEach((a) => a.scrollTrigger && a.scrollTrigger.kill());
  }, []);

  return (
    <section ref={ref} className="bg-bg py-16 md:py-24 border-t border-stroke">
      <div className="max-w-content mx-auto px-6 md:px-10 lg:px-16">
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-10 sm:gap-6">
          {STATS.map((s) =>
          <div key={s.label} className="reveal-up flex flex-col items-center sm:items-start">
              <span className="text-6xl md:text-7xl lg:text-8xl font-display italic text-text-primary leading-none tabular-nums">
                {s.value}
              </span>
              <span className="mt-3 text-sm text-muted uppercase tracking-[0.2em] whitespace-nowrap">{s.label}</span>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// Footer shares the hero's indigo-aurora cosmos (mirrored), so the page opens
// and closes on the same living light.
function Contact({ email, name, socials, available }) {
  const [resumeHover, setResumeHover] = useStateSC(false);

  // Pages live at different folder depths (root vs about/ vs work/), so resolve
  // the resume path relative to the current page.
  const inSubfolder = /\/(about|work)\//.test(window.location.pathname);
  const resumeUrl = (inSubfolder ? "../" : "") + "Devarsh-Patel-Resume.pdf";

  return (
    <footer
      id="Contact"
      className="relative min-h-screen flex flex-col overflow-hidden text-white">
      
      {/* Living indigo-aurora background (shared with the hero) */}
      <AuroraBackground variant="footer" />

      {/* Main: big headline + CTA pills, vertically centered */}
      <div className="relative z-10 flex-1 flex items-center">
        <div className="max-w-content mx-auto w-full px-6 md:px-10 lg:px-16 py-16">
          <h2 className="leading-[1.08] tracking-tight text-white max-w-4xl text-balance" style={{ letterSpacing: "-1px", fontSize: "clamp(26px, 6.5vw, 36px)", lineHeight: "1.8" }}>
            Wish your vision meets impact soon?<br />
            Let's bring it on sooner&nbsp;:)
          </h2>

          <a
            href={resumeUrl}
            download
            onMouseEnter={() => setResumeHover(true)}
            onMouseLeave={() => setResumeHover(false)}
            className="relative inline-flex mt-9 rounded-full text-base transition-transform duration-200 hover:scale-105"
            style={{ fontFamily: "Poppins" }}>
            <span
              className="absolute rounded-full accent-gradient-anim transition-opacity duration-300"
              style={{ inset: "-2px", opacity: resumeHover ? 1 : 0 }}>
            </span>
            <span
              className={
                "relative flex items-center gap-2.5 rounded-full bg-bg px-8 py-4 text-text-primary border-2 transition-colors duration-300 " + (
                resumeHover ? "border-transparent" : "border-stroke")
              }>
              Download Resume
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                <path d="M12 4v12"></path>
                <path d="m6 11 6 6 6-6"></path>
                <path d="M5 20h14"></path>
              </svg>
            </span>
          </a>
        </div>
      </div>

      {/* Bottom bar: availability · socials · copyright */}
      <div className="relative z-10 max-w-content mx-auto w-full px-6 md:px-10 lg:px-16 pb-8 md:pb-10">
        <div className="flex flex-col md:flex-row items-center justify-between gap-5 pt-7 border-t border-white/15">
          <div className="flex items-center gap-2.5 text-sm text-white/75">
            {available &&
            <span className="relative flex w-2.5 h-2.5">
                <span className="absolute inline-flex w-full h-full rounded-full bg-green-400 opacity-75 animate-ping"></span>
                <span className="relative inline-flex w-2.5 h-2.5 rounded-full bg-green-400"></span>
              </span>
            }
            <span>Available for work</span>
          </div>

          <div className="flex items-center gap-1">
            {socials.map((s) => {
              const isMail = s.url.startsWith("mailto:");
              return (
                <a
                  key={s.label}
                  href={s.url}
                  target={isMail ? undefined : "_blank"}
                  rel={isMail ? undefined : "noopener noreferrer"}
                  className="text-sm text-white/70 hover:text-white rounded-full px-3 py-2 hover:bg-white/10 transition-colors duration-200">

                  {s.label}
                </a>
              );
            })}
          </div>

          <p className="text-xs text-white/55">© {new Date().getFullYear()} {name}</p>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Stats, Contact });