einfach-produktiv/app/components/About.tsx

import Image from "next/image";
import { Reveal } from "./Reveal";

export function About() {
  return (
    <section id="ueber-bjoern" className="bg-bg-dark flex flex-col sm:flex-row sm:items-stretch w-full">

      {/* Text content — relative + z-10 so it renders above the overlapping
          photo at lg+. Comes first in DOM at every breakpoint (no reorder
          here — unlike Hero, there's no conversion CTA at stake).
          The 1:1.4 text:image ratio (text gets the narrower share) applies
          from sm: up unchanged — the photo needs the room, the text
          column doesn't need to be wide (the inner quote/bio row stays
          stacked at Tablet regardless, see below, so a wider text column
          doesn't even help it go inline; it just steals space the photo
          should have — reported 2026-07-29). Only the -ml-48 overlap
          itself (see the photo below) is gated to lg:, since that trick
          needs more absolute room than Tablet has to not look cramped. */}
      <Reveal className="flex flex-col gap-4 justify-center px-[var(--layout-padding-x)] py-8 sm:flex-[1_0_0] min-w-0 relative z-10">

        {/* Large serif statement — width-constrained as per design */}
        <p
          className="font-semibold text-bg-white text-h-section leading-normal w-[17.625rem]"
          style={{ fontFamily: "var(--font-lora)" }}
        >
          Ich glaube nicht, dass Menschen mehr Disziplin brauchen.
        </p>

        {/* Quote row: script quote / divider / author bio — side-by-side
            only from lg: (1024px), a deliberate exception to the site's
            sm: (640px) structural consolidation: quote + divider + the
            whitespace-nowrap bio ("Gründer von einfach produktiv.")
            together need more room than the sm:-anchored text column has
            through the whole 640-1023px range, independent of the outer
            text/image ratio above. Stacked with a horizontal divider
            through that whole range instead, side-by-side (vertical
            divider) only once there's real room at lg:. */}
        <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 lg:gap-0 w-full">

          {/* Caveat script text with signature positioned below */}
          <div className="relative flex-1" style={{ minHeight: "8rem" }}>
            <div
              className="font-normal text-brand 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 underline — hand-drawn organic stroke, sits just below the three Caveat lines (3 × 32px = 96px) */}
            <div
              className="absolute pointer-events-none"
              style={{ top: "6.44rem", left: "1.5rem", width: "9.375rem", height: "1.375rem" }}
            >
              <svg viewBox="0 0 150 22" fill="none" className="w-full h-full text-brand" aria-hidden="true">
                {/* Thin, near-constant-width ease-out sweep, traced from the actual
                    Figma signature-image raster (node 4175:150, page-home) — a single
                    smooth concave rise, no waviness/taper, ending ~88% across. */}
                <path
                  d="M3,10 C20,8.3 35,6.7 50,5.4 C70,3.7 85,2.2 100,1.1 C112,0.5 122,0.3 131,0.1"
                  stroke="currentColor"
                  strokeWidth="1.3"
                  strokeLinecap="round"
                />
              </svg>
            </div>
          </div>

          {/* Divider — horizontal full-width line below lg:, vertical
              gold line beside the author bio from lg: */}
          <div className="bg-brand w-full h-px lg:w-[2px] lg:h-24 lg:mx-6 shrink-0" />

          <div
            className="text-bg-white font-normal whitespace-nowrap lg:shrink-0"
            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>
      </Reveal>

      {/* Author photo — gets the wider 1.4 share from sm: up already (see
          the text column's own comment above); plain, no overlap at
          Tablet. Overlaps the text column via -ml-48 only from lg+, where
          there's real absolute room for the photo to bleed under it
          without looking cramped. Plain full-width photo below the text
          on true Mobile. */}
      <Reveal
        className="relative overflow-hidden w-full sm:flex-[1.4_0_0] lg:-ml-48"
        style={{ minHeight: "14rem" }}
        delay={0.15}
      >
        <Image
          alt="Björn"
          src="/about-author.jpg"
          fill
          sizes="(min-width: 640px) 58vw, 100vw"
          // object-contain, not object-cover — about-author.jpg is a square
          // close-up portrait (1254x1254) and this banner is wide and
          // comparatively short, so object-cover scales the square up to
          // fill the width and then crops most of the height away: the
          // face fills the entire strip, way too large (reported
          // 2026-08-29; simulated the exact crop with sharp to confirm
          // before switching — a plain object-position tweak only moves
          // which part of the face is blown up, it doesn't fix the zoom
          // itself). contain shows the whole photo at its real proportions;
          // the empty sides fall back to the section's own bg-dark behind
          // the image, which reads as a deliberate frame rather than a gap.
          className="object-contain pointer-events-none"
        />
        {/* Left gradient — from sm: up, not just lg:. Even without the
            -ml-48 overlap at Tablet, the photo sits directly against the
            dark text column with no transition, reading as a hard vertical
            seam (reported 2026-07-29). A narrower fade (w-16) softens just
            that seam at Tablet; widens to w-72 at lg: to also cover the
            deeper -ml-48 overlap once that kicks in. */}
        <div className="hidden sm:block absolute inset-y-0 left-0 w-16 lg:w-72 bg-gradient-to-r from-bg-dark to-transparent pointer-events-none" />
      </Reveal>

    </section>
  );
}