// News / Matchmaking section — horizontal scrolling cards

function NewsSection({ t }) {
  const items = t('news.items') || [];
  const trackRef = React.useRef(null);

  const scrollBy = (dir) => {
    if (!trackRef.current) return;
    trackRef.current.scrollBy({ left: dir * 520, behavior: 'smooth' });
  };

  return (
    <section id="matchmaking" className="section news-section" style={{ background: 'var(--bg-2)', paddingBottom: 'calc(180px * var(--density))', overflow: 'visible', position: 'relative' }}>
      {/* Concentric rings that bleed from news into about section below */}
      <svg data-parallax="0.3" style={{
        position: 'absolute', right: '-260px', bottom: '-480px', width: '1000px', height: '1000px',
        opacity: 0.32, pointerEvents: 'none', zIndex: 0,
      }} viewBox="0 0 1000 1000">
        <circle cx="620" cy="500" r="300" fill="none" stroke="var(--sand)" strokeWidth="1"/>
        <circle cx="620" cy="500" r="440" fill="none" stroke="var(--sand)" strokeWidth="1"/>
      </svg>

      <div className="container reveal">
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 56 }}>
          <span className="nav-logo" style={{ width: 36, height: 36 }} />
          <h2 style={{ margin: 0, fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em' }}>
            <span style={{ color: 'var(--sand)' }}>sendar</span>
            <span style={{ color: 'var(--text)', opacity: 0.7 }}> matchmaking</span>
          </h2>
        </div>
        <div className="kicker" style={{ color: 'var(--sand)', marginBottom: 28 }}>{t('news.kicker')}</div>
      </div>

      <div className="news-track-wrap reveal reveal-delay-1">
        <div className="news-track" ref={trackRef}>
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
          {items.map((item, i) => (
            <NewsCard key={i} item={item} t={t} i={i} />
          ))}
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
        </div>
        <div className="news-controls">
          <button onClick={() => scrollBy(-1)} aria-label="prev">←</button>
          <button onClick={() => scrollBy(1)} aria-label="next">→</button>
        </div>
      </div>

      <div className="container" style={{ marginTop: 120 }}>
        <div className="founded-mark">
          <span className="line" />
          <span className="mono">{t('news.foundedIn')}</span>
        </div>
      </div>

      <style>{`
        .news-track-wrap { position: relative; }
        .news-track {
          display: flex; gap: 28px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding: 10px 0 24px;
          scrollbar-width: none;
        }
        .news-track::-webkit-scrollbar { display: none; }
        .news-controls {
          display: flex; gap: 8px;
          position: absolute;
          right: calc(48px * var(--density));
          top: -64px;
        }
        .news-controls button {
          width: 44px; height: 44px;
          border-radius: 50%;
          background: transparent;
          border: 1px solid var(--hairline);
          color: var(--sand);
          font-size: 16px;
          transition: all 0.2s;
        }
        .news-controls button:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }
        .founded-mark { display: flex; align-items: center; gap: 14px; color: var(--text-dim); }
        .founded-mark .line { display: inline-block; width: 56px; height: 1px; background: var(--sand); opacity: 0.6; }
      `}</style>
    </section>
  );
}

function NewsCard({ item, t, i = 0 }) {
  const toneClass = ({
    photo:    'ph-photo-1',
    photo2:   'ph-photo-2',
    photo3:   'ph-photo-3',
    photo4:   'ph-photo-4',
    gradient: 'ph-gradient',
  })[item.tone] || 'ph-photo-1';

  return (
    <article className={`news-card reveal-card stagger-${Math.min(i, 4)} ${item.sponsored ? 'sponsored' : ''}`}>
      <div className={`news-card-media ph ${toneClass}`}>
        <span className="ph-label" style={{ position: 'absolute', top: 14, right: 14, left: 'auto', margin: 0 }}>PHOTO</span>
      </div>
      <div className="news-card-body">
        {item.sponsored && <span className="sponsored-tag">{t('news.sponsored')}</span>}
        <div className="news-card-type mono">{item.type}</div>
        <h3 className="news-card-title display">{item.title}</h3>
        <div className="news-card-meta">
          {item.meta.map((m, i) => <div key={i}>{m}</div>)}
        </div>
        <a href="/matchmaking" className="news-card-cta" style={{ textDecoration: 'none' }}>{t('news.cta')}</a>
      </div>

      <style>{`
        .news-card {
          position: relative;
          flex-shrink: 0;
          width: 480px;
          height: 320px;
          border-radius: var(--radius-card);
          overflow: hidden;
          scroll-snap-align: start;
          background: var(--card);
          border: 1px solid var(--card-border);
          transition: transform 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s;
        }
        .news-card:hover { transform: translateY(-4px); }
        .news-card.sponsored { border-color: var(--sponsored-border); }
        .news-card-media { position: absolute; inset: 0; }
        .news-card-media::after {
          content: '';
          position: absolute; inset: 0;
          background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85) 100%);
        }
        .news-card-body {
          position: absolute;
          left: 24px; right: 24px; bottom: 20px;
          color: var(--text);
          z-index: 2;
        }
        .sponsored-tag {
          position: absolute;
          top: -290px; left: 0;
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--sponsored-tag);
          font-weight: 600;
          background: rgba(0,0,0,0.5);
          padding: 4px 10px;
          border-radius: 4px;
          backdrop-filter: blur(4px);
        }
        .news-card-type { color: var(--text); opacity: 0.75; margin-bottom: 6px; font-size: 11px; }
        .news-card-title {
          font-size: 22px; font-weight: 800;
          margin: 0 0 10px; color: #fff;
          line-height: 1.05;
          letter-spacing: -0.01em;
        }
        .news-card-meta {
          font-size: 13px;
          color: var(--text-dim);
          line-height: 1.4;
          margin-bottom: 14px;
        }
        .news-card-cta {
          display: inline-block;
          padding: 7px 16px;
          border-radius: var(--radius-pill);
          border: 1px solid rgba(255,255,255,0.35);
          background: rgba(0,0,0,0.35);
          color: #fff;
          font-size: 12px;
          font-weight: 500;
          backdrop-filter: blur(6px);
          transition: all 0.2s;
        }
        .news-card-cta:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); }
      `}</style>
    </article>
  );
}

Object.assign(window, { NewsSection, NewsCard });