// Header + Hero
const { useState, useEffect, useRef } = React;
const D = window.CLIPS_DATA;

const Header = () => (
  <header className="header">
    <div className="wrap header-inner">
      <a href="#" className="logo">
        <span className="logo-mark"><span>CT</span></span>
        ClipsTrust
      </a>
      <nav className="nav">
        {D.NAV.map(n => <a key={n.label} href={n.href} className={n.caret ? 'has-caret' : ''}>{n.label}</a>)}
      </nav>
      <div className="header-actions">
        <span className="country"><span className="flag"></span> IN — India <Icon name="chevron" size={12}/></span>
        <a href="#" className="btn btn-ghost" style={{padding: '9px 16px'}}>
          <Icon name="phone" size={14}/> Sign in
        </a>
        <a href="#categories" className="btn btn-primary">List Your Business <Icon name="arrow" size={14}/></a>
      </div>
    </div>
  </header>
);

const Hero = () => (
  <section className="hero">
    <div className="wrap hero-grid">
      <div className="hero-head">
        <span className="chip chip-live"><span className="dot"></span> 50,000+ active monthly users</span>
        <h1 className="display">
          The world's largest<br/>
          <span className="accent">video-first</span> listing engine.
        </h1>
        <p>List your business. Grow your audience. Generate qualified leads — verified by real customers, on video.</p>

        <div className="search">
          <div className="search-fields">
            <div className="search-field">
              <Icon name="search" size={18}/>
              <div className="col">
                <span className="label">What</span>
                <input placeholder="Business, brand or product"/>
              </div>
            </div>
            <div className="search-field">
              <Icon name="pin" size={18}/>
              <div className="col">
                <span className="label">Where</span>
                <input placeholder="City, state or country" defaultValue="Delhi, India"/>
              </div>
            </div>
          </div>
          <button className="search-go">Search <Icon name="arrow" size={14}/></button>
        </div>

        <div className="hero-tags">
          <span style={{fontSize: 12, color: 'var(--ink-3)', marginRight: 4, alignSelf: 'center'}}>Popular:</span>
          {['Cryptocurrency', 'Digital Marketing', 'Health Care', 'Real Estate', 'Hotels'].map(t =>
            <a key={t} className="tag">{t}</a>
          )}
        </div>

        <div className="hero-stats">
          <div className="stat"><div className="n">3K+</div><div className="l">Listed businesses</div></div>
          <div className="stat"><div className="n">20K+</div><div className="l">Verified reviews</div></div>
          <div className="stat"><div className="n">20+</div><div className="l">Countries</div></div>
          <div className="stat"><div className="n">4.8</div><div className="l">Average rating</div></div>
        </div>
      </div>

      <div className="hero-visual">
        <div className="hv-card hv-video">
          <div className="thumb">
            <span className="live-badge"><span className="dot"></span> Verified</span>
            <div className="play"><Icon name="play" size={20} stroke={0}/></div>
            <div className="meta">
              <div className="name">Jitendar Singh</div>
              <div className="biz">Stellar Data Recovery</div>
            </div>
          </div>
        </div>

        <div className="hv-card hv-rating">
          <div className="stars">★★★★★</div>
          <div className="score">4.8/5</div>
          <div className="label">From 20,767 reviews</div>
          <div className="bars">
            {[5,4,3,2,1].map((s,i) => (
              <div key={s} className="bar">
                <span>{s}★</span>
                <div className="track"><div className="fill" style={{width: [76, 18, 4, 1, 1][i] + '%'}}></div></div>
                <span>{[76,18,4,1,1][i]}%</span>
              </div>
            ))}
          </div>
        </div>

        <div className="hv-card hv-listing">
          <div className="row">
            <div className="av">SP</div>
            <div>
              <div className="name">SunPro Group</div>
              <div className="cat">Industrial Material</div>
            </div>
          </div>
          <div className="verified-mini" style={{display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, color: 'var(--green)', marginTop: 10, padding: '3px 8px', background: '#e8f5ee', borderRadius: 999}}>
            <Icon name="verified" size={11}/> Verified business
          </div>
          <div className="stats">
            <div className="s"><b>4.0</b>Rating</div>
            <div className="s"><b>128</b>Reviews</div>
            <div className="s"><b>2.4k</b>Leads</div>
          </div>
        </div>

        <div className="hv-card hv-ticker">
          <div className="ico"><Icon name="bolt" size={16}/></div>
          <div className="txt">
            <b>+12 leads today</b>
            <span>via your listing</span>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const TrustBar = () => {
  const items = ['IndiaMART', 'Stellar Data', 'PulsePromote', 'HBF Direct', 'Vana Crypto', 'SunPro Group', 'Kashi Digital', 'Arredo Furniture', 'Celer Bridge', 'BrokerSaathi'];
  const doubled = [...items, ...items];
  return (
    <div className="trustbar">
      <div className="wrap" style={{display: 'flex', alignItems: 'center', overflow: 'hidden'}}>
        <span className="label">Trusted by 3,000+ brands</span>
        <div className="row">
          {doubled.map((x, i) => <span key={i} className="item">{x}</span>)}
        </div>
      </div>
    </div>
  );
};

window.Header = Header;
window.Hero = Hero;
window.TrustBar = TrustBar;