// Reviews, stats, news, FAQ, footer
const D4 = window.CLIPS_DATA;

const Reviews = () => {
  const [tab, setTab] = useState(0);
  return (
    <section className="wrap reviews">
      <div className="section-head" style={{padding: '60px 0 0'}}>
        <div>
          <span className="eyebrow">/ 10 — Customer Reviews</span>
          <h2 className="display">Read what customers<br/>actually say.</h2>
        </div>
        <p>Real experiences across every category — searchable, filterable, and verified at submission.</p>
      </div>
      <div className="review-tabs">
        {D4.REVIEWS_TABS.map((t, i) => (
          <button key={t.name} className={tab === i ? 'active' : ''} onClick={() => setTab(i)}>
            {t.name}<span className="ct">{t.count.toLocaleString()}</span>
          </button>
        ))}
      </div>
      <div className="review-grid">
        {D4.REVIEWS.map(r => {
          const initials = r.name.split(' ').map(n => n[0]).slice(0, 2).join('');
          return (
            <div key={r.name} className="review-card">
              <div className="top">
                <div className="av" style={{background: `linear-gradient(135deg, ${r.color}, ${r.color}cc)`}}>{initials}</div>
                <div>
                  <div className="name">{r.name}</div>
                  <div className="biz">{r.biz}</div>
                </div>
              </div>
              <div className="stars">{'★'.repeat(r.stars)}<span style={{color: 'var(--line-2)'}}>{'★'.repeat(5 - r.stars)}</span></div>
              <blockquote>"{r.text}"</blockquote>
              <div className="when"><span>{r.when}</span><Icon name="verified" size={11}/></div>
            </div>
          );
        })}
      </div>
    </section>
  );
};

const Stats = () => {
  const [vals, setVals] = useState([0,0,0,0]);
  const targets = [3247, 2891, 20767, 4.8];
  const ref = useRef();
  useEffect(() => {
    const obs = new IntersectionObserver(es => {
      if (es[0].isIntersecting) {
        let p = 0;
        const id = setInterval(() => {
          p += 1/40;
          if (p >= 1) { p = 1; clearInterval(id); }
          const e = 1 - Math.pow(1 - p, 3);
          setVals(targets.map(t => t < 10 ? +(t * e).toFixed(1) : Math.round(t * e)));
        }, 25);
      }
    });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <section className="stats-section" ref={ref}>
      <div className="wrap">
        <div className="title-row">
          <div>
            <span className="eyebrow" style={{color: 'var(--brand)'}}>/ 11 — By the numbers</span>
            <h2 className="display">A platform built<br/>on real activity.</h2>
          </div>
          <p>Listings, reviews and ratings — actual platform data, not vanity. Updated daily.</p>
        </div>
        <div className="stats-grid">
          {[
            { n: vals[0].toLocaleString() + '+', l: 'Listed Businesses' },
            { n: vals[1].toLocaleString() + '+', l: 'Verified Listings' },
            { n: vals[2].toLocaleString() + '+', l: 'Total Reviews' },
            { n: vals[3].toFixed(1), l: 'Average Rating' },
          ].map((s, i) => (
            <div key={i} className="stat-cell">
              <span className="ix">/ 0{i+1}</span>
              <div className="n">{s.n}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const News = () => (
  <section className="wrap" style={{paddingTop: 80, paddingBottom: 80}}>
    <div className="section-head" style={{padding: '0 0 40px'}}>
      <div>
        <span className="eyebrow">/ 12 — Latest News</span>
        <h2 className="display">What's happening, today.</h2>
      </div>
      <p>Concerts, diplomacy, events, breaking — curated from across the platform's news desk.</p>
    </div>
    <div className="editorial-grid">
      {D4.NEWS.map(n => (
        <a key={n.title} className="blog-card">
          <div className="img" style={{backgroundImage: `url(${n.img})`}}></div>
          <div className="body">
            <span className="tag">{n.tag}</span>
            <h4>{n.title}</h4>
            <span className="when">{n.when}</span>
          </div>
        </a>
      ))}
    </div>
  </section>
);

const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="wrap faq">
      <div className="faq-grid">
        <div className="faq-side">
          <span className="eyebrow">/ 13 — FAQ</span>
          <h3>Common questions about ClipsTrust.</h3>
          <p>Answers to what most prospects ask before listing.</p>
          <div className="support-card">
            <div className="row">
              <div className="av" style={{background: 'linear-gradient(135deg, #e8542b, #c0411e)'}}></div>
              <div>
                <div className="name">Need to ask something else?</div>
                <div className="role">Live chat, 9am–9pm IST</div>
              </div>
            </div>
            <a className="btn btn-primary"><Icon name="chat" size={14}/> Contact support</a>
          </div>
        </div>
        <div className="faq-list">
          {D4.FAQS.map((f, i) => (
            <div key={i} className={'faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {f.q}
                <span className="ico"><Icon name="plus" size={12}/></span>
              </button>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="footer" id="contact">
    <div className="wrap">
      <div className="foot-cta">
        <h2>Ready to list your business <i>and start earning leads</i>?</h2>
        <div className="actions">
          <a className="btn btn-brand" style={{padding: '16px 26px'}}>Start free listing <Icon name="arrow" size={14}/></a>
          <a className="btn btn-ghost" style={{borderColor: 'rgba(255,255,255,.2)', color: '#fff'}}>Talk to sales</a>
        </div>
      </div>

      <div className="foot-cols">
        <div className="brand-block">
          <a className="logo" style={{color: '#fff'}}>
            <span className="logo-mark"><span>CT</span></span>
            ClipsTrust
          </a>
          <p style={{fontSize: 14, lineHeight: 1.6, margin: 0, color: 'rgba(255,255,255,.6)'}}>The world's largest video-first listing engine — connecting buyers and businesses through verified reviews.</p>
          <address>
            <b>Head Office</b><br/>1730, 101 Nai Basti Naya Bazar,<br/>Chandni Chowk, North Delhi — 110006<br/><br/>
            <b>Corporate</b><br/>C-21, Fifth Floor, Sector-2,<br/>Noida — 201301
          </address>
        </div>
        <div>
          <h5>Resource</h5>
          <ul>
            <li><a>List Your Business</a></li><li><a>Sign Up</a></li><li><a>Sign In</a></li>
            <li><a>Affiliate</a></li><li><a>Advertise</a></li><li><a>Video</a></li>
          </ul>
        </div>
        <div>
          <h5>Post Review</h5>
          <ul>
            <li><a>Video Review</a></li><li><a>Product Review</a></li><li><a>Location Review</a></li>
            <li><a>Business Review</a></li><li><a>Blog</a></li><li><a>News</a></li>
          </ul>
        </div>
        <div>
          <h5>Company</h5>
          <ul>
            <li><a>About</a></li><li><a>Contact</a></li><li><a>Press</a></li>
            <li><a>Pricing</a></li><li><a>Careers</a></li><li><a>Partners</a></li>
          </ul>
        </div>
        <div>
          <h5>Legal</h5>
          <ul>
            <li><a>Privacy Policy</a></li><li><a>Terms of Service</a></li>
            <li><a>Cookie Policy</a></li><li><a>SSL Secured</a></li><li><a>Refund Policy</a></li>
          </ul>
        </div>
      </div>

      <div className="foot-stats">
        <div className="s"><div className="n">50K+</div><div className="l">Engaged Monthly Users</div></div>
        <div className="s"><div className="n">10K+</div><div className="l">Active Reviewers</div></div>
        <div className="s"><div className="n">3K+</div><div className="l">Listed Businesses</div></div>
        <div className="s"><div className="n">20+</div><div className="l">Countries</div></div>
      </div>

      <div className="foot-bottom">
        <div>© 2026 ClipsTrust. All rights reserved.</div>
        <div className="links">
          <a>Privacy</a><a>Terms</a><a>Cookies</a>
          <span className="ssl"><Icon name="verified" size={12}/> SSL Secured</span>
        </div>
      </div>
    </div>
  </footer>
);

const ChatFab = () => (
  <a className="chat-fab">
    <span className="av"><Icon name="chat" size={14}/></span>
    <span className="txt">
      <b>Chat with Expert</b>
      <span>Powered by Pulse Promote</span>
    </span>
  </a>
);

window.Reviews = Reviews;
window.Stats = Stats;
window.News = News;
window.FAQ = FAQ;
window.Footer = Footer;
window.ChatFab = ChatFab;