// Sections part 2: Pricing tiers, Niches grid (replacing creators), Brands marquee

function Pricing() {
  const [active, setActive] = React.useState('scale');
  return (
    <section className="pricing" id="pricing">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24, color: 'rgba(244,239,230,0.7)' }}>
              <span className="dot"></span>Pricing
            </div>
            <h2 className="section-title">Pick a tier.<br/>We <em>scale</em> with you.</h2>
          </div>
          <p className="section-desc">
            Every tier is fixed-price, full-service, and outcome-tracked. No retainers, no surprise fees. Click a tier to see what's inside.
          </p>
        </div>

        <div className="tier-grid">
          {TIERS.map((t) => (
            <div
              key={t.id}
              className={`tier ${active === t.id ? 'active' : ''}`}
              onClick={() => setActive(t.id)}
            >
              <div className="tier-tag">{t.tag}</div>
              <div className="tier-name">{t.name}</div>
              <div className="tier-tagline">{t.tagline}</div>
              <div className="tier-price"><span className="small">$</span>{t.price}</div>
              <div className="tier-divider"></div>
              <ul className="tier-features">
                <li className="tier-feature"><span className="tier-feature-label">Talent</span>{t.creators}</li>
                <li className="tier-feature"><span className="tier-feature-label">Reach</span>{t.reach}</li>
                <li className="tier-feature"><span className="tier-feature-label">Output</span>{t.deliverables}</li>
                <li className="tier-feature"><span className="tier-feature-label">Length</span>{t.duration}</li>
                <li className="tier-feature"><span className="tier-feature-label">Extras</span>{t.extras}</li>
              </ul>
              <a href="#contact" className="tier-cta" onClick={(e) => e.stopPropagation()}>
                Start at ${t.price} <ArrowIcon />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Niches() {
  return (
    <section className="creators" id="niches">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>
              <span className="dot"></span>The niches
            </div>
            <h2 className="section-title">Every hobby.<br/><em>Every</em> pastime.</h2>
          </div>
          <p className="section-desc">
            From archery to yoga, we've built a creator database deep enough to staff a campaign in any niche. Generic platforms can't find a kiteboarder or a bow hunter. Ours can.
          </p>
        </div>

        <div className="creator-grid">
          {PRIMARY_NICHES.map((n, i) => (
            <NicheCard key={n.id} niche={n} index={i} />
          ))}
        </div>

        <div className="all-cats">
          <div className="all-cats-head">
            <div className="mono" style={{ color: 'var(--muted)' }}>+ 44 categories total</div>
            <div className="all-cats-rule"></div>
          </div>
          <div className="all-cats-list">
            {ALL_CATEGORIES.map(c => (
              <span className="cat-chip" key={c}>{c}</span>
            ))}
            <span className="cat-chip cat-chip-more">And more →</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function NicheCard({ niche, index }) {
  const photos = usePexels(niche.query, 4);
  const photo = photos && photos.length ? photos[index % photos.length] : null;
  return (
    <div className="creator-card">
      {photo ? <img src={photo.src} alt={niche.label} loading="lazy" /> : <div className="img-tile skeleton" style={{position:'absolute',inset:0}}></div>}
      <div className="creator-card-overlay">
        <div className="creator-handle">{niche.label}</div>
      </div>
    </div>
  );
}

function BrandsMarquee() {
  // Two duplicate rows for a seamless infinite scroll
  const all = [...BRANDS, ...BRANDS];
  return (
    <section className="brands-section">
      <div className="wrap">
        <div className="eyebrow" style={{ marginBottom: 24 }}>
          <span className="dot"></span>Brands we work with
        </div>
      </div>
      <div className="brands-marquee">
        <div className="brands-track">
          {all.map((b, i) => (
            <div className="brand-cell" key={i}>{b}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Pricing = Pricing;
window.Niches = Niches;
window.NicheCard = NicheCard;
window.BrandsMarquee = BrandsMarquee;