import Image from "next/image";

export function About() {
  return (
    <section className="bg-white px-4 md:px-8 py-20">
      <div className="flex flex-col md:flex-row items-start justify-between gap-12">
        {/* Left: section label */}
        <span className="font-mono text-sm text-[#1f1f1f] uppercase leading-[1.1] shrink-0">
          [ About ]
        </span>

        {/* Right: text + portrait */}
        <div className="flex flex-col md:flex-row items-end gap-8 flex-1">
          {/* Text block with corner brackets */}
          <div className="flex-1 flex items-stretch gap-3">
            {/* Left brackets */}
            <div className="flex flex-col justify-between shrink-0 w-4">
              <img src="/bracket-tl.svg" alt="" className="w-4 h-4" />
              <img src="/bracket-bl.svg" alt="" className="w-4 h-4 -rotate-90" />
            </div>

            {/* Text */}
            <p className="flex-1 text-[#1f1f1f] text-sm tracking-[-0.04em] leading-[1.3] py-3">
              Placeholder paragraph one. This is where you introduce yourself
              — your background, your passion for your craft, and what drives
              you creatively. Two to three sentences work best here.{" "}
              Placeholder paragraph two. Here you can describe your technical
              approach, how you collaborate with clients, or what sets your
              work apart from others in your field.
            </p>

            {/* Right brackets */}
            <div className="flex flex-col justify-between shrink-0 w-4">
              <img src="/bracket-tr.svg" alt="" className="w-4 h-4 rotate-90" />
              <img src="/bracket-br.svg" alt="" className="w-4 h-4 rotate-180" />
            </div>
          </div>

          {/* Portrait */}
          <div className="flex flex-col items-start gap-6 shrink-0">
            <span className="font-mono text-sm text-[#1f1f1f]">002</span>
            <div className="relative w-full md:w-[436px] h-[400px] md:h-[614px] overflow-hidden">
              <Image
                src="/about-portrait.jpg"
                alt="Portrait"
                fill
                className="object-cover object-center"
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}