export const TOOLTIP = {
  contentStyle: { background: '#0e1626', border: '1px solid rgba(0,212,255,0.25)', borderRadius: 8 },
  labelStyle: { color: '#8ba3bc' }
};

export const CHART_GRID = { stroke: 'rgba(255,255,255,0.06)' };

export function UseCaseHero({ title, badge, subtitle, valueProps, sources }) {
  return (
    <div className="hero-block glass">
      <div className="hero-top">
        <div>
          {badge && <span className="hero-badge">{badge}</span>}
          <h1 className="page-title" style={{ marginBottom: '0.35rem' }}>{title}</h1>
          <p className="page-sub" style={{ marginBottom: 0 }}>{subtitle}</p>
        </div>
        {sources && (
          <div className="source-tags">
            {sources.map(s => <span key={s} className="source-tag">{s}</span>)}
          </div>
        )}
      </div>
      {valueProps?.length > 0 && (
        <div className="value-props">
          {valueProps.map(v => (
            <div key={v.title} className="value-prop">
              <div className="vp-icon">{v.icon}</div>
              <div>
                <div className="vp-title">{v.title}</div>
                <div className="vp-desc">{v.desc}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export function InsightStrip({ items }) {
  if (!items?.length) return null;
  return (
    <div className="insight-strip">
      {items.map((item, i) => (
        <div key={i} className={`insight-item insight-${item.type || 'info'}`}>
          <span className="insight-label">{item.label}</span>
          <span className="insight-text">{item.text}</span>
        </div>
      ))}
    </div>
  );
}

export function ChartGrid({ children, cols = 2 }) {
  return <div className={`chart-grid cols-${cols}`}>{children}</div>;
}

export function ChartCard({ title, subtitle, children, tall }) {
  return (
    <div className={`glass chart-wrap ${tall ? 'chart-tall' : ''}`}>
      <div className="chart-title">{title}</div>
      {subtitle && <div className="chart-subtitle">{subtitle}</div>}
      {children}
    </div>
  );
}