// Stats.jsx + Contact.jsx + Footer.jsx — closing rhythm

const STATS_DATA = [
  { target: 90,  suffix: '%', label: 'клієнтів починають працювати на постійній основі' },
  { target: 5,   suffix: '×', label: 'дешевше за класичну продакшн-зйомку' },
  { target: 500, suffix: '+', label: 'коротких відео створено з допомогою AI' },
];

const Stats = () => {
  const sectionRef = React.useRef(null);
  const [counts, setCounts] = React.useState(STATS_DATA.map(() => 0));
  const animatedRef = React.useRef(false);

  React.useEffect(() => {
    const section = sectionRef.current;
    if (!section) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !animatedRef.current) {
        animatedRef.current = true;
        const duration = 1500;
        const start = performance.now();
        const easeOut = t => 1 - Math.pow(1 - t, 3);
        const tick = (now) => {
          const progress = Math.min((now - start) / duration, 1);
          setCounts(STATS_DATA.map(s => Math.round(s.target * easeOut(progress))));
          if (progress < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
      }
    }, { threshold: 0.3 });
    observer.observe(section);
    return () => observer.disconnect();
  }, []);

  return (
    <section className="dd-section" ref={sectionRef}>
      <div className="container-x dd-stats">
        {STATS_DATA.map((stat, i) => (
          <div className="dd-stats__cell" key={i}>
            <div className="dd-stats__v">{counts[i]}{stat.suffix}</div>
            <p className="p-sm">{stat.label}</p>
          </div>
        ))}
      </div>
    </section>
  );
};
window.Stats = Stats;

const Contact = () => (
  <section className="dd-section dd-section--contact" id="contact">
    <div className="container-x dd-contact">
      <span className="eyebrow">ПОЧНЕМО</span>
      <h2 className="dd-contact__title">
        <span className="h-display">Готові почати?</span>
      </h2>
      <p className="dd-contact__sub dd-contact__sub--prominent">Проведемо безкоштовну консультацію, де визначимо, де краще застосовувати AI для вашого бренду.</p>
      <div className="dd-contact__cta">
        <a href="https://calendly.com/dmytroaicreator/30min" target="_blank" rel="noopener" className="btn btn-primary btn--full">Записатися на дзвінок</a>
        <div className="dd-contact__cta-row">
          <a href="https://t.me/dmytro_inst" target="_blank" rel="noopener" className="btn btn-ghost">Telegram</a>
          <a href="https://www.instagram.com/demchdimaaa/" target="_blank" rel="noopener" className="btn btn-ghost">Instagram Direct</a>
        </div>
      </div>
    </div>
  </section>
);
window.Contact = Contact;

const Footer = () => (
  <footer className="dd-footer">
    <div className="container-x dd-footer__inner">
      <div className="dd-footer__brand">
        <span className="dd-nav__mark">dd</span>
        <span className="dd-nav__word">STUDIO</span>
      </div>
      <div className="dd-footer__meta">
        © 2026 dd studio · AI-контент для food-брендів · Київ
      </div>
    </div>
  </footer>
);
window.Footer = Footer;