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

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

        {/* Large serif statement — width-constrained as per design */}
        <p
          className="font-semibold text-white text-[1.75rem] leading-normal w-[17.625rem]"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          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">

          {/* Caveat script text with signature positioned below */}
          <div className="relative flex-1" style={{ minHeight: "8rem" }}>
            <div
              className="font-normal text-[#f6a701] text-[2.25rem]"
              style={{ fontFamily: "var(--font-caveat)", lineHeight: "2rem" }}
            >
              <p>Ich glaube,</p>
              <p>sie brauchen&nbsp;</p>
              <p>weniger Reibung.</p>
            </div>
            {/* Signature — absolute, sits just below the three Caveat lines (3 × 32px = 96px) */}
            <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 vertical divider + author lines */}
          <div className="flex 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: "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 fills full column height */}
      <div className="flex-1 relative overflow-hidden" style={{ minHeight: "14rem" }}>
        <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>
  );
}