import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { about } from "@/lib/data";

export function AboutDoctor() {
  return (
    <section id="about" className="pt-10">
      <Container>
        <div className="grid items-center gap-8 overflow-hidden rounded-2xl bg-white p-5 sm:p-8 lg:grid-cols-[0.9fr_1.1fr]">
          <div className="overflow-hidden rounded-2xl bg-sky">
            <Placeholder src="/placeholders/doctor.svg" className="aspect-[4/5] w-full object-cover lg:aspect-[4/4.4]" />
          </div>
          <div>
            <p className="text-[13px] font-medium text-primary">{about.subtitle}</p>
            <h2 className="mt-2 text-[22px] font-bold text-navy">{about.title}</h2>
            {about.body.map((paragraph) => (
              <p key={paragraph} className="mt-4 text-[14px] leading-8 text-muted">
                {paragraph}
              </p>
            ))}
            <div className="mt-7 grid grid-cols-3 gap-3">
              {about.stats.map((stat) => (
                <div key={stat.label} className="rounded-xl bg-sky px-3 py-4 text-center">
                  <p className="font-latin text-[18px] font-bold text-navy">{stat.value}</p>
                  <p className="mt-1 text-[12px] text-muted">{stat.label}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}