import React from "react";
import type { AboutData } from "../types";

interface AboutSectionProps {
  data: AboutData;
}

export function AboutSection({ data }: AboutSectionProps) {

  return (
    <section id="about" className="py-10 md:py-14 border-t border-[rgba(255,255,255,0.02)]">
      <div className="max-w-[1200px] mx-auto px-4 md:px-6">
        <h2 className="text-lg md:text-xl mb-4 md:mb-[18px] text-white">{data.title}</h2>
        <div className="flex flex-col lg:flex-row gap-6 items-start">
          <div className="flex-1">
            <p className="text-huilong-muted leading-relaxed">{data.content}</p>
          </div>
          <div className="grid grid-cols-1 gap-3 ml-auto max-w-[420px] w-full lg:w-auto">
            {data.cards.map((card, idx) => (
              <div
                key={idx}
                className="bg-huilong-card p-4 rounded-lg border border-[rgba(255,255,255,0.03)]"
              >
                <h3 className="text-white mb-2 font-semibold">{card.title}</h3>
                <p className="text-huilong-muted text-sm">{card.content}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}