import React from 'react'

const AIInsights = ({ insights }) => {
  if (!insights || insights.length === 0) return null

  return (
    <div style={{
      marginTop: "50px",
      marginBottom: "50px",
      padding: "40px",
      background: "rgba(30, 41, 59, 0.4)",
      border: "1px solid rgba(255,255,255,0.05)",
      borderRadius: "32px",
      backdropFilter: "blur(20px)"
    }}>
      <h3 style={{
        fontSize: "24px",
        fontWeight: "800",
        marginBottom: "35px",
        background: "linear-gradient(to right, #f8fafc, #64748b)",
        WebkitBackgroundClip: "text",
        WebkitTextFillColor: "transparent"
      }}>
        Executive AI Insights
      </h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: "25px" }}>
        {insights.map((ins, i) => (
          <div key={i} style={{
            padding: "32px",
            background: "rgba(255,255,255,0.02)",
            borderRadius: "24px",
            border: "1px solid rgba(255,255,255,0.03)",
            transition: "all 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
            cursor: "default"
          }}>
            <div style={{
              width: "40px",
              height: "40px",
              background: "rgba(59, 130, 246, 0.1)",
              borderRadius: "12px",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              color: "#3b82f6",
              fontSize: "20px",
              marginBottom: "20px",
              border: "1px solid rgba(59, 130, 246, 0.2)"
            }}>
              ◈
            </div>
            <div style={{
              fontSize: "16px",
              lineHeight: "1.7",
              color: "#cbd5e1",
              fontWeight: "500"
            }}>
              {ins}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default AIInsights