export function About() {
  return (
    <section id="ueber-bjoern" className="bg-[#111] flex flex-col lg:flex-row items-stretch w-full">

      {/* Left: text content */}
      <div className="flex-[1_0_0] flex flex-col gap-4 justify-center px-4 md:px-8 lg:px-[5rem] py-10 lg:py-8 min-w-0">

        {/* Large serif statement */}
        <p
          className="font-semibold text-white leading-normal"
          style={{ fontFamily: "var(--font-lora)", fontSize: "clamp(1.375rem, 2.5vw, 1.75rem)", maxWidth: "17.625rem" }}
        >
          Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
        </p>

        {/* Quote row: script quote + golden divider + author bio */}
        <div className="flex items-start justify-between w-full gap-4">

          {/* Caveat script text with signature */}
          <div className="relative flex-1" style={{ minHeight: "8rem" }}>
            <div
              className="font-normal text-[#f6a701]"
              style={{ fontFamily: "var(--font-caveat)", fontSize: "clamp(1.75rem, 3vw, 2.25rem)", lineHeight: "2rem" }}
            >
              <p>Ich glaube,</p>
              <p>sie brauchen&nbsp;</p>
              <p>weniger Reibung.</p>
            </div>
            <div
              className="absolute overflow-hidden pointer-events-none"
              style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
            >
              <img
                alt=""
                src="/about-signature.png"
                className="absolute max-w-none"
                style={{ width: "101.25%", height: "118.18%", left: "-0.62%", top: "-17.72%" }}
              />
            </div>
          </div>

          {/* Golden divider + author */}
          <div className="flex gap-4 lg:gap-6 items-start shrink-0">
            <div className="bg-[#f6a701] w-[2px] h-24 shrink-0" />
            <div
              className="text-white font-normal whitespace-nowrap"
              style={{ fontSize: "clamp(0.875rem, 1.5vw, 1rem)", lineHeight: "1.5rem" }}
            >
              <p>Björn.</p>
              <p>Führungskraft.</p>
              <p>Familienmensch.</p>
              <p>Gründer von einfach-produktiv.</p>
            </div>
          </div>

        </div>
      </div>

      {/* Right: author photo */}
      <div className="flex-[1_0_0] relative overflow-hidden" style={{ minHeight: "18rem" }}>
        <img
          alt="Björn"
          src="/about-author.jpg"
          className="absolute inset-0 w-full h-full object-cover object-center pointer-events-none"
        />
      </div>

    </section>
  );
}