// components/portfolio/PortfolioExecutiveSummary.tsx
import { motion } from "framer-motion";

interface PortfolioExecutiveSummaryProps {
  title?: string;
  content: string;
  backgroundColor?: string;
}

export const PortfolioExecutiveSummary = ({
  title = "Executive Summary",
  content,
  backgroundColor = "bg-card/30"
}: PortfolioExecutiveSummaryProps) => {
  return (
    <section className={`py-24 ${backgroundColor}`}>
      <div className="container mx-auto px-4 lg:px-6">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="max-w-4xl mx-auto text-center"
        >
          <h2 className="text-3xl lg:text-5xl font-semibold text-foreground mb-8">
            {title}
          </h2>
          <p className="text-xl text-muted-foreground leading-relaxed">
            {content}
          </p>
        </motion.div>
      </div>
    </section>
  );
};