einfach-produktiv/app/components/Hero.tsx

import Link from "next/link";
import Image from "next/image";
import { PopIn, Reveal } from "./Reveal";

export function Hero() {
  return (
    <section className="bg-bg-base w-full overflow-hidden">
      {/* Structural breakpoint is lg: (1024px) here, not the site-wide md:
          (768px) — a documented exception (see Gotcha in the figma-to-nextjs
          skill). At md:col-span-5 the text column was only ~320px at
          768-1023px viewports, too narrow for the heading/CTA/social-proof
          row (which wrapped to 3 cramped lines). Staying stacked full-width
          through the whole Tablet range and only splitting into the 5/7
          grid once there's real room (≥1024px) fixes that without touching
          the 5/7 ratio itself, which is fine once it has space. */}
      <div className="flex flex-col lg:grid lg:grid-cols-12 lg:items-center gap-8 lg:gap-[var(--layout-grid-gap)] pt-10 md:pt-12 lg:pt-0">

        {/* Text content — first in DOM/visual order at every breakpoint so
            the CTA stays above the fold on Mobile (deliberate exception to
            the "keep DOM order" default, see Hero decision in the plan).
            Reveal fires ~immediately since Hero is already in the initial
            viewport — this doubles as the page's entrance animation. */}
        <Reveal className="order-1 lg:order-none lg:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 lg:pr-0">

          {/* Heading — forced break after "darf" below lg: (1024px),
              natural wrap from lg: up. Below lg: the Hero is stacked
              full-width and narrower per-viewport, where natural wrap
              produced an awkward break — force it after "darf" there via
              a responsive <br/> (visible by default, turned off at lg:+).
              From lg: up the 5/12 grid's text column wraps fine on its
              own, no forced break needed. */}
          <p
            className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
            style={{ fontFamily: "var(--font-playfair)" }}
          >
            <span className="text-display">
              Produktivität darf<br className="lg:hidden" /> sich leicht anfühlen
            </span>
            {/* Brand's signature orange dot (also in the logo/footer) —
                bouncy pop-in once the heading scrolls into view, timed to
                land just after the Reveal's own 0.6s fade-up so it reads
                as a deliberate flourish, not simultaneous with the text.
                One-shot, not a looping pulse — continuous motion next to
                the primary CTA would be distracting rather than "cool". */}
            <PopIn className="text-display text-brand inline-block" delay={0.5}>
              .
            </PopIn>
          </p>

          {/* Subheading */}
          <p className="font-semibold leading-[2.375rem] min-w-full shrink-0 text-text-primary text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
            Für Menschen mit Familie, Verantwortung und zu wenig Zeit
          </p>

          {/* CTA */}
          <Link
            href="/challenge"
            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
          >
            <span className="font-semibold leading-[2.375rem] text-text-primary text-h3 whitespace-nowrap not-italic">
              Starte mit der 7-Tage-Challenge
            </span>
            <div className="relative h-[1.1875rem] w-[1.5625rem] shrink-0">
              <img
                alt=""
                src="/icon-check.svg"
                className="absolute inset-0 w-full h-full"
              />
            </div>
          </Link>

          {/* Social proof */}
          <div className="flex gap-3 items-start overflow-clip shrink-0 w-full">
            {/* Avatars — gap 2px, not overlapping */}
            <div className="flex gap-[0.125rem] items-center shrink-0">
              {["/avatar-1.jpg", "/avatar-2.jpg", "/avatar-3.jpg"].map((src, i) => (
                <div
                  key={i}
                  className="relative rounded-full overflow-hidden shrink-0"
                  style={{ width: "var(--hero-avatar-size)", height: "var(--hero-avatar-size)" }}
                >
                  <Image src={src} alt="" fill sizes="46px" className="object-cover" />
                </div>
              ))}
            </div>
            <p className="flex-[1_0_0] font-normal leading-[1.5rem] text-text-primary text-body [word-break:break-word]">
              10.000+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
            </p>
          </div>
        </Reveal>

        {/* Image — bleeds to the true edge at every breakpoint (never
            padded). Below lg: (stacked layout) the full 887:583 aspect
            ratio at 100vw would make the image ~600-900px tall and
            dominate the page, so height is capped and object-cover crops
            it into a supporting banner instead; at lg:+ (grid, image only
            58% width) the full aspect ratio looks right again, so the cap
            is lifted. A small negative top margin below lg: pulls it up to
            slightly tuck under the text block (deliberately less than the
            social-proof row's height, so it never covers the avatars/text).
            Scoped to md:-only (mt-0 at base and again at lg:) — it's a
            Tablet-specific touch, not a permanent effect. No shadow: a
            plain box-shadow reads as a hard rectangular edge against the
            existing corner/right/bottom mask-gradient fade below, which
            looked worse than no shadow at all — tried and reverted. */}
        <Reveal
          className="order-2 lg:order-none lg:col-span-7 relative w-full aspect-[887/583] max-h-[16rem] md:max-h-[22rem] lg:max-h-none mt-0 md:-mt-6 lg:mt-0"
          delay={0.15}
        >
          <Image
            src="/hero.png"
            alt=""
            fill
            priority
            sizes="(min-width: 1024px) 58vw, 100vw"
            className="object-cover"
            style={{
              WebkitMaskImage:
                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
              WebkitMaskComposite: "destination-in",
              maskImage:
                "linear-gradient(to right, transparent 0%, black 14%), linear-gradient(to bottom, transparent 0%, black 10%)",
              maskComposite: "intersect",
            }}
          />
        </Reveal>

      </div>
    </section>
  );
}