// Anticipation — horizontal tabs (6 features), active panel = grid 2 col
// (left: copy + bullets + CTA; right: feature mockup).

function Anticipation() {
  const features = window.BG_DATA.FEATURES;
  const [active, setActive] = React.useState(features[0].id);
  const current = features.find(f => f.id === active) || features[0];

  return (
    <section id="anticipation" style={{
      padding: 'clamp(80px, 10vw, 130px) 0',
      background: 'var(--paper-2)',
      borderTop: '1px solid var(--ink-line-soft)',
    }}>
      <div className="container">
        {/* Section header */}
        <div style={{
          maxWidth: 760,
          marginBottom: 'clamp(40px, 5vw, 64px)',
        }}>
          <div className="reveal">
            <span className="eyebrow">
              <span className="dot" />
              Anticipation intelligente
            </span>
          </div>
          <h2 className="h-section reveal delay-1" style={{
            margin: '20px 0 16px',
          }}>
            Voir venir,<br />
            <em>avant que ça arrive.</em>
          </h2>
          <p className="body-lead reveal delay-2" style={{ margin: 0, maxWidth: 60 + 'ch' }}>
            Six fonctions cousues main pour transformer un historique de comptes
            en levier de décision. Aucune n'envoie quoi que ce soit dehors.
          </p>
        </div>

        {/* Tab bar */}
        <div className="reveal anticipation-tabs" style={{
          borderBottom: '1px solid var(--ink-line)',
          marginBottom: 40,
          overflowX: 'auto',
          WebkitOverflowScrolling: 'touch',
          msOverflowStyle: 'none',
          scrollbarWidth: 'none',
        }}>
          <div style={{
            display: 'flex',
            gap: 28,
            minWidth: 'max-content',
            paddingBottom: 0,
          }}>
            {features.map(f => {
              const isActive = f.id === active;
              return (
                <button
                  key={f.id}
                  onClick={() => setActive(f.id)}
                  style={{
                    background: 'transparent',
                    border: 'none',
                    padding: '14px 0 16px',
                    fontSize: 14.5,
                    fontWeight: 500,
                    fontFamily: 'var(--sans)',
                    color: isActive ? 'var(--ink)' : 'var(--ink-3)',
                    cursor: 'pointer',
                    position: 'relative',
                    letterSpacing: '-0.005em',
                    whiteSpace: 'nowrap',
                    transition: 'color .2s ease',
                  }}
                  onMouseEnter={(e) => { if (!isActive) e.currentTarget.style.color = 'var(--ink-2)'; }}
                  onMouseLeave={(e) => { if (!isActive) e.currentTarget.style.color = 'var(--ink-3)'; }}
                >
                  {f.label}
                  <span style={{
                    position: 'absolute',
                    left: 0, right: 0, bottom: -1,
                    height: 2,
                    background: isActive ? 'var(--navy)' : 'transparent',
                    transition: 'background .2s ease',
                  }} />
                </button>
              );
            })}
          </div>
        </div>

        {/* Active panel */}
        <div key={active} className="anticipation-panel" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 0.95fr) minmax(0, 1.1fr)',
          gap: 'clamp(28px, 5vw, 64px)',
          alignItems: 'center',
          animation: 'fadeUp .5s cubic-bezier(.2,.7,.2,1)',
        }}>
          <div>
            <h3 className="h-display" style={{
              fontFamily: 'var(--serif)',
              fontSize: 'clamp(28px, 3.6vw, 42px)',
              fontWeight: 400,
              lineHeight: 1.08,
              letterSpacing: '-0.022em',
              margin: '0 0 18px',
              color: 'var(--ink)',
            }}>
              {current.title}
            </h3>
            <p className="body-lead" style={{ marginBottom: 22 }}>
              {current.copy}
            </p>
            <ul style={{
              listStyle: 'none',
              padding: 0,
              margin: '0 0 28px',
              display: 'flex',
              flexDirection: 'column',
              gap: 12,
            }}>
              {current.bullets.map((b, i) => (
                <li key={i} style={{
                  display: 'flex',
                  gap: 12,
                  alignItems: 'flex-start',
                  fontSize: 14.5,
                  color: 'var(--ink-2)',
                  lineHeight: 1.55,
                }}>
                  <span style={{
                    width: 16, flexShrink: 0,
                    color: 'var(--navy)',
                    fontFamily: 'var(--serif)',
                    fontWeight: 500,
                    fontSize: 16,
                    lineHeight: '22px',
                  }}>·</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
            <a href="#anticipation" className="btn btn-link" style={{
              padding: 0,
              color: 'var(--navy)',
              fontWeight: 500,
              fontSize: 14,
            }}>
              {current.cta}
            </a>
          </div>

          <div style={{
            filter: 'drop-shadow(0 30px 50px rgba(20,30,60,0.18))',
          }}>
            <FeatureMockup id={current.id} />
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeUp {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: none; }
        }
        .anticipation-tabs::-webkit-scrollbar { display: none; }
        @media (max-width: 900px) {
          .anticipation-panel { grid-template-columns: 1fr !important; }
          .anticipation-panel > div:last-child { order: -1; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Anticipation });