/* global React */
const { useEffect, useRef, useState: useCountState } = React;

const FOOTPRINT = [
  { num: "100+",  label: "Campaigns run",      note: "Since inception"       },
  { num: "6",    label: "States covered",      note: "Maharashtra focus"     },
  { num: "7+",   label: "Years experience",    note: "Election cycles"       },
  { num: "175K+", label: "Voters reached",      note: "Per major campaign"    },
];

const Footprint = () => {
  const ref = useRef(null);
  const [visible, setVisible] = useCountState(false);

  useEffect(() => {
    const obs = new IntersectionObserver(
      ([entry]) => { if (entry.isIntersecting) setVisible(true); },
      { threshold: 0.2 }
    );
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section ref={ref} className="section-pad" style={{
      background: "var(--peacock-deep)",
      color: "var(--parchment)",
      padding: "clamp(80px, 10vw, 120px) 32px",
      position: "relative", overflow: "hidden"
    }}>
      {/* Subtle grid lines */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none", opacity: 0.06,
        backgroundImage: "linear-gradient(var(--peacock-bright) 1px, transparent 1px), linear-gradient(90deg, var(--peacock-bright) 1px, transparent 1px)",
        backgroundSize: "80px 80px"
      }}/>

      {/* Gold accent bar at top */}
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 3, background: "var(--gold)" }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative", zIndex: 1 }}>

        {/* Header */}
        <div style={{
          display: "flex", justifyContent: "space-between",
          alignItems: "flex-end", marginBottom: 56,
          paddingBottom: 24,
          borderBottom: "1px solid rgba(168,212,208,0.2)"
        }}>
          <div>
            <div style={{
              fontFamily: "var(--font-condensed)", fontSize: 11, fontWeight: 700,
              letterSpacing: "0.2em", textTransform: "uppercase",
              color: "var(--gold)", marginBottom: 12
            }}>Pravah Solution · Footprint</div>
            <h2 className="footprint-title" style={{
              fontFamily: "var(--font-condensed)", fontWeight: 800,
              fontSize: "clamp(48px, 7vw, 88px)", lineHeight: 0.9,
              letterSpacing: "-0.01em", textTransform: "uppercase",
              color: "var(--parchment)", margin: 0
            }}>By the Numbers.</h2>
          </div>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 11,
            color: "rgba(240,233,216,0.4)", letterSpacing: "0.14em", textAlign: "right"
          }}>AS OF<br/>Q1 · 2026</div>
        </div>

        {/* Stats grid — numbers animate in on scroll */}
        <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)" }}>
          {FOOTPRINT.map((s, i) => (
            <div key={i} style={{
              padding: "0 clamp(20px, 3vw, 44px)",
              borderLeft: i === 0
                ? "3px solid var(--gold)"
                : "1px solid rgba(168,212,208,0.18)"
            }}>
              <div style={{
                fontFamily: "var(--font-condensed)",
                fontWeight: 800,
                fontSize: "clamp(72px, 10vw, 120px)",
                lineHeight: 0.88,
                letterSpacing: "-0.02em",
                color: i === 0 ? "var(--gold)" : "var(--parchment)",
                fontFeatureSettings: '"tnum"',
                opacity: visible ? 1 : 0,
                transform: visible ? "translateY(0)" : "translateY(16px)",
                transition: `opacity 600ms ${i * 120}ms var(--ease-out), transform 600ms ${i * 120}ms var(--ease-out)`
              }}>
                {s.num}
              </div>
              <div style={{
                marginTop: 16, fontSize: 12, fontWeight: 700,
                letterSpacing: "0.12em", textTransform: "uppercase",
                color: i === 0 ? "var(--gold-pale)" : "var(--parchment)", opacity: 0.85,
                transition: `opacity 500ms ${i * 120 + 200}ms`,
                ...(visible ? {} : { opacity: 0 })
              }}>
                {s.label}
              </div>
              <div style={{
                marginTop: 4, fontSize: 13,
                color: "rgba(240,233,216,0.45)"
              }}>
                {s.note}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Footprint = Footprint;