const features = [
  {
    icon: "fa-solid fa-chart-line",
    title: "Continuous Evaluation",
    description: "Annual reviews of all academic programs by independent academic boards.",
  },
  {
    icon: "fa-solid fa-users",
    title: "Peer Review Integration",
    description: "Regular assessments conducted by visiting professors from partner institutions.",
  },
  {
    icon: "fa-solid fa-shield",
    title: "Ethical Compliance",
    description: "Strict adherence to international research ethics and data protection standards.",
  },
];

export default function QualityStandards() {
  return (
    <section id="quality-standards" className="py-20 bg-white border-t border-ui-border">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-8">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">

          {/* Left: Text content */}
          <div className="space-y-8">
            <div className="inline-flex items-center gap-2">
              <span className="w-8 h-[2px] bg-brand-accent"></span>
              <span className="text-sm font-semibold text-ui-muted uppercase tracking-wider">Quality Assurance</span>
            </div>
            <div className="acc-section-title font-bold text-ui-text">Our Framework for Excellence</div>
            <p className="text-lg text-ui-muted leading-relaxed">
              Our internal quality assurance mechanisms are designed to continuously evaluate and improve our academic offerings, research outputs, and student services.
            </p>

            <div className="space-y-6 mt-8">
              {features.map((f) => (
                <div key={f.title} className="flex gap-4">
                  <div className="w-12 h-12 rounded-xl bg-brand-light flex items-center justify-center text-brand-blue shrink-0">
                    <i className={`${f.icon} text-xl`}></i>
                  </div>
                  <div>
                    <div className="acc-card-title font-bold text-ui-text mb-1">{f.title}</div>
                    <p className="text-ui-muted text-sm">{f.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Right: Images */}
          <div className="relative">
            <div className="grid grid-cols-2 gap-4">
              <img
                className="w-full h-64 object-cover rounded-[24px] shadow-soft"
                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/a45c3de13a-8173142c33595269388d.png"
                alt="Students studying in library"
              />
              <img
                className="w-full h-64 object-cover rounded-[24px] shadow-soft mt-8"
                src="https://storage.googleapis.com/uxpilot-auth.appspot.com/cb66207ea0-16795a67db08ef0e6f8c.png"
                alt="Research facility"
              />
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}