// About + Categories sections

function AboutSection({ t }) {
  return (
    <section id="about" className="section about-section" style={{ paddingTop: 'calc(40px * var(--density))', overflow: 'visible', position: 'relative' }}>

      <div className="container">
        <div className="kicker reveal" style={{ color: 'var(--sand)', marginBottom: 36 }}>{t('about.kicker')}</div>
        <h2 className="display reveal-headline reveal-lines" style={{
          fontSize: 'clamp(48px, 6.8vw, 104px)',
          color: 'var(--sand)',
          margin: 0,
          maxWidth: '1000px',
          overflow: 'hidden',
        }}>
          <span>{t('about.title1')}</span>
          <span>{t('about.title2')}</span>
          <span>{t('about.title3')}</span>
          <span>{t('about.title4')}</span>
        </h2>
        <p className="reveal reveal-delay-1" style={{
          maxWidth: 560, marginTop: 48,
          fontSize: 17, lineHeight: 1.55, color: 'var(--text)', opacity: 0.88,
          whiteSpace: 'pre-line',
        }}>
          {t('about.body')}
        </p>
        <div className="reveal reveal-delay-2" style={{ marginTop: 36 }}>
          <AppStoreButton label={t('about.appStore')} />
        </div>
      </div>
    </section>
  );
}

function AppStoreButton({ label }) {
  return (
    <a href="https://x-concapps.com" target="_blank" rel="noopener noreferrer" className="app-store-btn" aria-label={label}>
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.6 12.7c0-2.6 2.1-3.8 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.2.9 1.2 1.9 2.6 3.2 2.5 1.3 0 1.8-.8 3.3-.8 1.5 0 2 .8 3.3.8 1.4 0 2.3-1.2 3.1-2.5.6-.9 1.1-1.9 1.5-3-.1 0-2.9-1.1-2.9-4.3zM14.9 4.4c.7-.9 1.2-2.1 1-3.4-1.1 0-2.4.7-3.1 1.6-.7.8-1.3 2-1.1 3.2 1.2 0 2.5-.6 3.2-1.4z"/>
      </svg>
      <span>
        <span className="tiny">Download on the</span>
        <span className="big">App Store</span>
      </span>
      <style>{`
        .app-store-btn {
          display: inline-flex; align-items: center; gap: 10px;
          background: #000;
          color: #fff;
          padding: 10px 18px;
          border-radius: 10px;
          border: 1px solid rgba(255,255,255,0.1);
          transition: transform 0.2s;
        }
        .app-store-btn:hover { transform: translateY(-1px); }
        .app-store-btn .tiny { display: block; font-size: 10px; letter-spacing: 0.05em; opacity: 0.85; line-height: 1.1; }
        .app-store-btn .big  { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
      `}</style>
    </a>
  );
}

function CategoriesSection({ t }) {
  const items = t('categories.items') || [];
  return (
    <section className="section categories-section" style={{ paddingTop: 0, paddingBottom: 'calc(120px * var(--density))' }}>
      <div className="container">
        <div className="kicker reveal" style={{ color: 'var(--sand)', marginBottom: 32 }}>{t('categories.kicker')}</div>
      </div>
      <div className="cats-track-wrap reveal reveal-delay-1">
        <div className="cats-track">
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
          {items.map((c, i) => (
            <CategoryCard key={i} item={c} cta={t('categories.cta')} i={i} />
          ))}
          <div style={{ flexShrink: 0, width: 'calc(48px * var(--density))' }} />
        </div>
      </div>

      <style>{`
        .cats-track-wrap { position: relative; }
        .cats-track {
          display: flex; gap: 20px;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          padding: 10px 0 24px;
          scrollbar-width: none;
        }
        .cats-track::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
}

function CategoryCard({ item, cta, i = 0 }) {
  const toneClass = `cat-${item.tone}`;
  // Education opens its own page; all other categories land on matchmaking.
  const href = item.tone === 'education' ? '/education' : '/matchmaking';
  return (
    <article className={`cat-card reveal-card stagger-${Math.min(i, 4)}`}>
      <div className={`cat-art ${toneClass}`} />
      <div className="cat-overlay" />
      <div className="cat-body">
        <h3 className="display">{item.label}</h3>
        <a href={href} className="news-card-cta" style={{ marginTop: 12, textDecoration: 'none' }}>{cta}</a>
      </div>
      <style>{`
        .cat-card {
          position: relative;
          flex-shrink: 0;
          width: 260px;
          height: 360px;
          border-radius: var(--radius-card);
          overflow: hidden;
          background: var(--card);
          scroll-snap-align: start;
          transition: transform 0.4s cubic-bezier(.2,.8,.2,1);
        }
        .cat-card:hover { transform: translateY(-4px); }
        .cat-overlay {
          position: absolute; inset: 0;
          background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.85) 100%);
        }
        .cat-body {
          position: absolute; bottom: 22px; left: 22px; right: 22px; color: #fff; z-index: 2;
        }
        .cat-body h3 {
          font-size: 19px; font-weight: 800;
          margin: 0;
          letter-spacing: -0.01em;
          line-height: 1.05;
          text-wrap: balance;
        }
      `}</style>
    </article>
  );
}

Object.assign(window, { AboutSection, CategoriesSection, AppStoreButton });