// About — headline + testimonial / pain-points + animated stats

const PAIN_POINTS = [
  { muted: "Forget about",  bold: "unreliable freelancers who ghost you"        },
  { muted: "No more",       bold: "agencies with bloated timelines"             },
  { muted: "Stop",          bold: "juggling briefs across scattered tools"       },
  { muted: "Say bye to",    bold: "slow, expensive in-house design costs"        },
  { muted: "Skip",          bold: "the month-long agency onboarding"             },
  { muted: "Done with",     bold: "waiting weeks for a single deliverable"       },
];

const ABOUT_STATS = [
  { target: 70, suffix: "%", label: "lower cost vs agencies and in-house teams"   },
  { target: 40, suffix: "%", label: "faster turnaround on every request"          },
  { target: 60, suffix: "%", label: "fewer revisions — powered by senior designers" },
];

const ArrowIcon = () => (
  <svg viewBox="0 0 24 24" width="14" height="14" fill="none"
    stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
    <line x1="5" y1="12" x2="19" y2="12"/>
    <polyline points="12,5 19,12 12,19"/>
  </svg>
);

const About = ({ data, lang }) => {
  const hasSection = data !== null && data !== undefined;
  const painPoints = hasSection
    ? (Array.isArray(data.painPoints) ? data.painPoints.map(p => ({ muted: i18(p.muted, lang) || '', bold: i18(p.bold, lang) || '' })) : [])
    : PAIN_POINTS;

  const stats = hasSection
    ? (Array.isArray(data.stats) ? data.stats.map(s => ({ target: Number(s.target) || 0, suffix: s.suffix || '%', label: i18(s.label, lang) || '' })) : [])
    : ABOUT_STATS;

  const statsRef = React.useRef(stats);
  statsRef.current = stats;

  const sectionRef = React.useRef(null);
  const [revealed, setRevealed]   = React.useState(false);
  const [counts,   setCounts]     = React.useState([0, 0, 0]);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;

    const observer = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      observer.disconnect();
      setRevealed(true);

      // Count all stats in one rAF loop with a slight start delay
      const targets = statsRef.current.map((s) => s.target);
      const DURATION = 1800;
      const ease = (t) => 1 - Math.pow(1 - t, 3);
      let start = null;
      const tick = (ts) => {
        if (!start) start = ts;
        const p = Math.min((ts - start) / DURATION, 1);
        const e = ease(p);
        setCounts(targets.map((t) => Math.round(t * e)));
        if (p < 1) requestAnimationFrame(tick);
      };
      setTimeout(() => requestAnimationFrame(tick), 350);
    }, { threshold: 0.2 });

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <section
      className={"ag-about" + (revealed ? " is-revealed" : "")}
      id="ag-section-about"
      ref={sectionRef}
    >
      {/* ── Top grid ── */}
      <div className="ag-about__grid">

        {/* Left: headline + testimonial card */}
        <div className="ag-about__left">
          <h2 className="ag-about__headline">
            We Remove the Friction<br/>
            that slow your brand down.
          </h2>

          <div className="ag-about__panel">
            <div className="ag-about__quoter">
              <span
                className="ag-avatar"
                role="img"
                aria-label="Elena Russo"
                style={{ backgroundImage: "url('assets/reviews/testimonials-1.jpg')" }}
              />
              <div>
                <div className="ag-about__quoter-name">Elena Russo</div>
                <div className="ag-about__quoter-role">CEO, Meridian AI</div>
              </div>
            </div>
            <p className="ag-about__quote">
              "Blan turned a chaotic backlog into a shipped product in six weeks.
              Best design decision we've made — and we didn't have to hire anyone."
            </p>
          </div>
        </div>

        {/* Right: dark pain-points card */}
        <div className="ag-about__pain">
          {painPoints.map((p, i) => (
            <div
              key={p.bold}
              className="ag-about__pain-item"
              style={{ transitionDelay: revealed ? `${i * 80}ms` : "0ms" }}
            >
              <span className="ag-about__pain-icon" aria-hidden="true">
                <ArrowIcon />
              </span>
              <p className="ag-about__pain-text">
                <span className="ag-about__pain-muted">{p.muted} </span>
                <span className="ag-about__pain-bold">{p.bold}</span>
              </p>
            </div>
          ))}
        </div>

      </div>

      {/* ── Stats row ── */}
      <div className="ag-about__stats-row">
        {stats.map((s, i) => (
          <div
            key={s.label}
            className="ag-about__stat-block"
            style={{ transitionDelay: revealed ? `${350 + i * 100}ms` : "0ms" }}
          >
            <span className="ag-about__stat-big">{counts[i]}{s.suffix}</span>
            <p className="ag-about__stat-desc">{s.label}</p>
          </div>
        ))}
      </div>

    </section>
  );
};

window.About = About;