// Mid-page sections: Categories, Why, Features, Spotlight
const D2 = window.CLIPS_DATA;

const Categories = () => {
  const [tab, setTab] = useState('Business');
  return (
    <section id="categories" className="wrap" style={{paddingBottom: 24}}>
      <div className="section-head">
        <div>
          <span className="eyebrow">/ 01 — Categories</span>
          <h2 className="display">Choose a category.<br/>Get found by buyers.</h2>
        </div>
        <div>
          <p>Pick the category that fits your business, skills or product. Listings are organised, ranked and surfaced to buyers actively searching in your niche.</p>
          <div className="cat-tabs" style={{marginTop: 18}}>
            {['Business', 'Individual', 'Manufacturer'].map(t =>
              <button key={t} className={tab === t ? 'active' : ''} onClick={() => setTab(t)}>{t}</button>
            )}
          </div>
        </div>
      </div>

      <div className="cat-grid">
        {D2.CATEGORIES.map(c => (
          <a key={c.name} className={'cat-card' + (c.featured ? ' featured' : '')}>
            <div className="ico"><Icon name={c.icon} size={20}/></div>
            <div className="name">{c.name}</div>
            <div className="count">
              <span>{c.count.toLocaleString()} listings</span>
              <Icon name="arrow" size={12} className="arrow"/>
            </div>
          </a>
        ))}
      </div>

      <div className="cat-footer">
        <div className="lhs"><b>Start listing,</b> start earning free leads</div>
        <a className="btn btn-ghost">View all 80+ categories <Icon name="arrow" size={14}/></a>
      </div>
    </section>
  );
};

const WhyPillar = () => (
  <section className="wrap pillar">
    <div>
      <span className="eyebrow">/ 02 — Why ClipsTrust</span>
      <h2 className="display">Create trends. Connect. Engage customers personally.</h2>
      <p>Set your business apart and attract a wider audience. Showcase what's unique. Build credibility through real video testimonials. Personalise every interaction.</p>
      <ul>
        <li><span className="check"><Icon name="check" size={11}/></span>Business listing perks for sales and revenue</li>
        <li><span className="check"><Icon name="check" size={11}/></span>Genuine reviews authenticated through video</li>
        <li><span className="check"><Icon name="check" size={11}/></span>Online reputation management built in</li>
        <li><span className="check"><Icon name="check" size={11}/></span>Use the platform as your business website</li>
        <li><span className="check"><Icon name="check" size={11}/></span>Premium pages get higher reach and ROI</li>
      </ul>
      <a className="btn btn-brand">Generate free leads <Icon name="arrow" size={14}/></a>
    </div>

    <div className="feature-grid">
      {D2.FEATURES.map((f, i) => {
        const cls = i === 2 ? ' brand' : i === 5 ? ' dark' : '';
        const icoMap = ['feat-video', 'feat-library', 'feat-lead', 'feat-listing', 'feat-rapid', 'feat-promo', 'feat-secure', 'feat-rank'];
        return (
          <div key={f.t} className={'feature-tile' + cls}>
            <span className="num">/ 0{i+1}</span>
            <div className="ico"><Icon name={icoMap[i]} size={20}/></div>
            <h4>{f.t}</h4>
            <p>{f.p}</p>
          </div>
        );
      })}
    </div>
  </section>
);

const Spotlight = () => (
  <section className="wrap spotlight">
    <div className="section-head">
      <div>
        <span className="eyebrow">/ 03 — Spotlight Businesses</span>
        <h2 className="display">Top-rated. Recommended<br/>by the community.</h2>
      </div>
      <p>Featured listings curated by reviewer engagement, lead activity and verification status — refreshed weekly.</p>
    </div>

    <div className="spot-grid">
      {D2.SPOTLIGHT.map(b => (
        <a key={b.name} className="biz-card">
          <div className="img" style={{background: `linear-gradient(135deg, ${b.color}, ${b.color}cc)`}}>
            <span className="cat-badge">{b.cat}</span>
            <span className="save"><Icon name="bookmark" size={14}/></span>
            <div style={{position: 'absolute', bottom: 14, left: 14, color: '#fff', fontFamily: 'Bricolage Grotesque', fontSize: 32, fontWeight: 600, opacity: 0.9, letterSpacing: '-0.02em', zIndex: 1}}>
              {b.name.split(' ').map(w => w[0]).slice(0, 2).join('')}
            </div>
          </div>
          <div className="body">
            <h4>{b.name}</h4>
            <p>{b.desc}</p>
            <div className="meta">
              <span className="rating"><span className="stars">★★★★</span> <b style={{fontWeight: 600}}>{b.rating.toFixed(1)}</b></span>
              <span className="verified-mini"><Icon name="verified" size={11}/> Verified</span>
            </div>
          </div>
        </a>
      ))}
    </div>
  </section>
);

window.Categories = Categories;
window.WhyPillar = WhyPillar;
window.Spotlight = Spotlight;