// Products — grid of Cygnus-owned SaaS products (Kompara, Talent, Preventa, Tickets)

function Products({ lang }) {
  const L = LANG_COPY[lang];
  const [active, setActive] = React.useState(0);
  const P = L.products;

  return (
    <section id="products" className="section" style={{ background: 'var(--bg-alt)', position: 'relative', overflow: 'hidden' }}>
      {/* subtle constellation bg */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, opacity: 0.5, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(circle at 15% 25%, rgba(58,165,194,0.08) 0, transparent 40%), radial-gradient(circle at 85% 75%, rgba(58,165,194,0.06) 0, transparent 45%)',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="reveal" style={{ maxWidth: 880 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted)' }}>
            <span style={{ width: 24, height: 1, background: 'var(--accent)' }} />
            <span>{P.eyebrow}</span>
          </div>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 80px)', lineHeight: 0.95, letterSpacing: -0.03, fontWeight: 600, margin: 0 }}>
            {P.title}
          </h2>
          <p style={{ fontSize: 18, color: 'var(--muted)', marginTop: 28, lineHeight: 1.6, maxWidth: 620, textWrap: 'pretty' }}>{P.sub}</p>
        </div>

        {/* Interactive switcher: tabs on left, detail on right */}
        <div className="products-layout" style={{ marginTop: 72, display: 'grid', gridTemplateColumns: '340px 1fr', gap: 0, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(0,0,0,0.15)' }}>
          {/* Tab rail */}
          <div style={{ borderRight: '1px solid rgba(255,255,255,0.08)' }}>
            {P.items.map((p, i) => {
              const isActive = active === i;
              return (
                <button key={i} onClick={() => setActive(i)}
                  style={{
                    width: '100%', textAlign: 'left', cursor: 'pointer',
                    padding: '24px 28px', background: isActive ? 'rgba(58,165,194,0.08)' : 'transparent',
                    border: 'none', borderBottom: '1px solid rgba(255,255,255,0.06)',
                    color: 'inherit', fontFamily: 'inherit', display: 'block',
                    transition: 'background 0.25s',
                    position: 'relative',
                  }}>
                  {isActive && <span style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 2, background: 'var(--accent)' }} />}
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: 1.2, textTransform: 'uppercase', color: isActive ? 'var(--accent)' : 'var(--muted)', marginBottom: 8 }}>
                    0{i + 1} · {p.tag}
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, letterSpacing: -0.3, color: isActive ? 'var(--fg)' : 'rgba(237,242,219,0.75)' }}>
                    {p.name}
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4, fontStyle: 'italic', fontFamily: 'var(--font-serif)' }}>
                    {p.short}
                  </div>
                </button>
              );
            })}
          </div>

          {/* Detail panel */}
          <ProductDetail product={P.items[active]} key={active} />
        </div>
      </div>
    </section>
  );
}

function ProductDetail({ product }) {
  return (
    <div style={{ padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', minHeight: 460, animation: 'productFadeIn 0.4s cubic-bezier(.2,.7,.3,1)' }}>
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginBottom: 20 }}>
          <span className="chip" style={{ borderColor: 'var(--accent)', color: 'var(--accent)' }}>{product.tag}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', letterSpacing: 0.5 }}>
            {product.audience}
          </span>
        </div>

        <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(36px, 4vw, 52px)', fontWeight: 600, letterSpacing: -0.8, margin: 0, lineHeight: 1 }}>
          {product.name}
        </h3>
        <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, color: 'var(--accent)', margin: '12px 0 24px', fontWeight: 400 }}>
          {product.short}
        </p>
        <p style={{ fontSize: 16, color: 'var(--muted)', lineHeight: 1.6, maxWidth: 560, textWrap: 'pretty', margin: 0 }}>
          {product.desc}
        </p>

        <ul style={{ listStyle: 'none', padding: 0, margin: '32px 0 0', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0, maxWidth: 560, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
          {product.features.map((f, i) => (
            <li key={i} style={{
              padding: '12px 0 12px 20px',
              borderBottom: '1px solid rgba(255,255,255,0.08)',
              fontSize: 13, color: 'var(--fg)', fontFamily: 'var(--font-mono)',
              position: 'relative',
            }}>
              <span style={{ position: 'absolute', left: 0, top: 14, width: 10, height: 1, background: 'var(--accent)' }} />
              {f}
            </li>
          ))}
        </ul>
      </div>

      <div style={{ marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        {product.url ? (
          <a href={product.url} target="_blank" rel="noopener" className="btn-primary">
            {product.cta}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M3 11L11 3M11 3H5M11 3V9" />
            </svg>
          </a>
        ) : (
          <button onClick={() => {
            const el = document.getElementById('contact');
            if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }
          }} className="btn-primary">
            {product.cta}
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
              <path d="M3 11L11 3M11 3H5M11 3V9" />
            </svg>
          </button>
        )}
      </div>
    </div>
  );
}

// Product fade-in keyframes
(function injectProductStyles() {
  if (document.getElementById('product-styles')) return;
  const s = document.createElement('style');
  s.id = 'product-styles';
  s.textContent = `
    @keyframes productFadeIn {
      0% { opacity: 0; transform: translateX(8px); }
      100% { opacity: 1; transform: none; }
    }
    @media (max-width: 900px) {
      .products-layout { grid-template-columns: 1fr !important; }
      .products-layout > div:first-child { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; overflow-x: auto; }
      .products-layout > div:first-child > button { min-width: 240px; border-bottom: none !important; border-right: 1px solid rgba(255,255,255,0.06); }
    }
  `;
  document.head.appendChild(s);
})();

Object.assign(window, { Products, ProductDetail });