// Lower sections: Videos, Searched, Partners, Blogs, Movies, Destinations
const D3 = window.CLIPS_DATA;

const VideoReviews = () => {
  const tracks = [...D3.VIDEO_REVIEWS, ...D3.VIDEO_REVIEWS];
  return (
    <section className="video-section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow" style={{color: 'var(--brand)'}}>/ 04 — Video Reviews</span>
            <h2 className="display" style={{color: '#fff'}}>Where trust meets business.</h2>
          </div>
          <p style={{color: 'rgba(255,255,255,.6)'}}>Watch real customers share their experiences with businesses, experts and products — every clip verified before it goes live.</p>
        </div>
      </div>

      <div className="video-row">
        <div className="video-track">
          {tracks.map((v, i) => (
            <a key={i} className="video-card" style={{backgroundImage: `url(https://img.youtube.com/vi/${v.id}/hqdefault.jpg)`}}>
              <span className="duration" style={{position: 'absolute', top: 12, right: 12, padding: '3px 8px', background: 'rgba(0,0,0,.7)', backdropFilter: 'blur(4px)', borderRadius: 4, fontSize: 11, fontFamily: 'JetBrains Mono, monospace', color: '#fff', zIndex: 2}}>{v.dur}</span>
              <div className="play"><Icon name="play" size={18}/></div>
              <div className="vmeta">
                <div className="name">{v.name}</div>
                <div className="biz">{v.biz}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      <div className="wrap">
        <div className="partner-cta">
          <a className="btn btn-brand">Submit a video review <Icon name="arrow" size={14}/></a>
          <a className="btn btn-ghost">Become a partner</a>
        </div>
      </div>
    </section>
  );
};

const Searched = () => {
  const items = D3.SEARCHED;
  return (
    <section className="wrap searched">
      <div className="section-head">
        <div>
          <span className="eyebrow">/ 05 — Most Searched</span>
          <h2 className="display">Categories close to you,<br/>trending right now.</h2>
        </div>
        <p>Stay current with the verticals customers are actively browsing — refreshed in real time.</p>
      </div>

      <div className="searched-grid">
        <a className="searched-card lead" style={{backgroundImage: `url(${items[0].img})`}}>
          <span className="pill">{items[0].count}</span>
          <span className="arrow"><Icon name="arrowUp" size={16}/></span>
          <div className="body">
            <div className="ix">/ 01 — Featured</div>
            <h3>{items[0].name}</h3>
          </div>
        </a>
        {items.slice(1).map((s, i) => (
          <a key={s.name} className="searched-card" style={{backgroundImage: `url(${s.img})`}}>
            <span className="pill">{s.count}</span>
            <span className="arrow"><Icon name="arrowUp" size={16}/></span>
            <div className="body">
              <div className="ix">/ 0{i + 2}</div>
              <h3>{s.name}</h3>
            </div>
          </a>
        ))}
      </div>
    </section>
  );
};

const Partners = () => (
  <section className="wrap" style={{paddingBottom: 80}}>
    <div className="section-head">
      <div>
        <span className="eyebrow">/ 06 — Premier Partners</span>
        <h2 className="display">Brands that build with us.</h2>
      </div>
      <p>Strategic collaborators powering our growth, marketing and corporate ecosystem.</p>
    </div>

    <div className="partners-grid">
      {D3.PARTNERS.map(p => (
        <div key={p.name} className="partner-card">
          <div className="pmark" style={{background: `linear-gradient(135deg, ${p.color}, ${p.color}dd)`}}>{p.tag}</div>
          <span className="role">{p.role}</span>
          <h4>{p.name}</h4>
          <p>{p.name === 'PulsePromote' ? 'Full-stack digital marketing — SEO, performance ads, and brand campaigns.' : p.name === 'CMD Business Club' ? 'Premier corporate networking circle for India\'s most ambitious founders.' : 'Curated growth community for early-stage founders shipping in India.'}</p>
          <div className="more"><span>Learn more</span><Icon name="arrow" size={14}/></div>
        </div>
      ))}
    </div>
  </section>
);

const Blogs = () => (
  <section className="wrap" style={{paddingBottom: 80}}>
    <div className="section-head">
      <div>
        <span className="eyebrow">/ 07 — Latest Blog</span>
        <h2 className="display">Field notes from the listing economy.</h2>
      </div>
      <p>Long-form pieces on trading, business growth, and the evolving rules of being found online.</p>
    </div>
    <div className="editorial-grid">
      {D3.BLOGS.map(b => (
        <a key={b.title} className="blog-card">
          <div className="img" style={{backgroundImage: `url(${b.img})`}}></div>
          <div className="body">
            <span className="tag">{b.tag}</span>
            <h4>{b.title}</h4>
            <span className="when">{b.when}</span>
          </div>
        </a>
      ))}
    </div>
  </section>
);

const Movies = () => (
  <section className="wrap" style={{paddingBottom: 80}}>
    <div className="section-head">
      <div>
        <span className="eyebrow">/ 08 — Trending Movies</span>
        <h2 className="display">Rated and reviewed by viewers.</h2>
      </div>
      <p>Cinema and OTT releases scored by the ClipsTrust community — formats, languages, and ratings at a glance.</p>
    </div>
    <div className="movie-grid">
      {D3.MOVIES.map((m, i) => (
        <a key={m.title} className="movie-card">
          <div className="poster" style={{background: `linear-gradient(135deg, hsl(${i*60}, 50%, 30%), hsl(${i*60+30}, 60%, 20%))`}}>
            <span className="rating"><Icon name="star" size={11}/> {m.score}</span>
            <span className="lang">{m.lang}</span>
            <div style={{position: 'absolute', bottom: 38, left: 14, right: 14, color: '#fff', fontFamily: 'Bricolage Grotesque', fontSize: 18, fontWeight: 600, lineHeight: 1.1, zIndex: 1, letterSpacing: '-0.01em'}}>{m.title}</div>
          </div>
          <div className="info">
            <h5>{m.title}</h5>
            <span className="fmt">{m.fmt}</span>
          </div>
        </a>
      ))}
    </div>
  </section>
);

const Destinations = () => (
  <section className="wrap" style={{paddingBottom: 80}}>
    <div className="section-head">
      <div>
        <span className="eyebrow">/ 09 — Destinations</span>
        <h2 className="display">Top-rated places,<br/>loved by travellers.</h2>
      </div>
      <p>Reviewed by visitors, ranked by experience — discover the most-booked locations across India.</p>
    </div>
    <div className="dest-grid">
      {D3.DESTINATIONS.map(d => (
        <a key={d.name} className={'dest-card' + (d.tall ? ' tall' : '')} style={{backgroundImage: `url(${d.img})`}}>
          <div className="body">
            <h4>{d.name}</h4>
            <p>{d.desc}</p>
          </div>
        </a>
      ))}
    </div>
  </section>
);

window.VideoReviews = VideoReviews;
window.Searched = Searched;
window.Partners = Partners;
window.Blogs = Blogs;
window.Movies = Movies;
window.Destinations = Destinations;