einfach-produktiv/app/components/Hero.tsx

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

// Shared between the plain (below lg:) and Reveal-wrapped (lg:+) render —
// see the two call sites' own comment on why this needs two wrappers.
function HeroImage() {
  return (
    <Image
      src="/hero.png"
      alt=""
      fill
      priority
      sizes="(min-width: 640px) 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",
      }}
    />
  );
}

export function Hero() {
  return (
    <section className="bg-bg-base w-full overflow-hidden">
      {/* Structural breakpoint is sm: (640px, moved down from the old md:
          768px so the grid arrives exactly where the fluid token floor
          also sits — see fluid.ts/globals.css) for the GRID only — the
          text column stays narrow through the whole 640-1023px Tablet
          range regardless. Below, every piece of *content* inside the text
          column (heading/subtitle/CTA/social-proof) deliberately keeps its
          smaller, fixed-below-lg: sizing all the way through Tablet too,
          not just true Mobile — reusing the full fluid-token sizes that
          early put the original ~19-44px fluid floors right back in that
          narrow column, recreating the exact 3-line-wrap problem the old
          `lg:` structural exception existed to avoid. This is a narrower,
          intentional exception to the site-wide sm: consolidation — the
          column's real width at sm: hasn't been visually verified yet
          (no browser in this environment), so full-size content stays
          gated behind lg: as a fast-follow rather than a guess. Splitting
          "grid at sm:" from "full-size content at lg:" gets both: Tablet
          shows the real 5/7 grid, but with content sized for its column's
          actual width, not the column width `lg:` was designed for. */}
      <div className="flex flex-col sm:grid sm:grid-cols-12 sm:items-center gap-8 sm:gap-[var(--layout-grid-gap)] pt-10 sm: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 sm:order-none sm:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 sm:pr-0">

          {/* Heading — smaller fixed-ish size below lg: (text-h1, still a
              real paired font-size+line-height token, not an arbitrary
              value) — text-display's own 44px floor wraps very heavily in
              a ~283-320px Tablet column (even a single word can approach
              that width). The old forced break after "darf" only existed
              for a "wide single-column, not yet grid" band (640-767px
              under the old md: 768px grid switch) that no longer exists
              now the grid itself starts at sm: (640px) — below sm: the
              stack is narrower than that old band ever was, where natural
              wrap already reads fine (confirmed 2026-07-24), so the break
              is removed rather than re-anchored to a new range. Full
              text-display only from lg: up, where the column has real
              room again. */}
          <p
            className="font-semibold leading-[0] shrink-0 text-[0px] text-text-primary"
            style={{ fontFamily: "var(--font-playfair)" }}
          >
            <span className="text-h1 lg:text-display">
              Finde heraus, was wichtig ist
            </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".
                Same text-h1 lg:text-display as the heading itself, so the
                dot scales down to match below lg:. */}
            <PopIn className="text-h1 lg:text-display text-brand inline-block" delay={0.5}>
              .
            </PopIn>
          </p>

          {/* Subheading — smaller fixed size below lg:, text-h-emphasis's
              own 20px floor read too large next to the now-smaller CTA
              text. leading shrinks to match, not just font-size. */}
          <p className="font-semibold leading-[1.75rem] lg:leading-[2.375rem] min-w-full shrink-0 text-text-primary text-[1rem] lg:text-h-emphasis w-[min-content] [word-break:break-word] not-italic">
            Ich helfe dir, zwischen Job, Familie und eigenen Projekten nicht unterzugehen
          </p>

          {/* CTA — centered below sm: (reads better against the centered
              image/banner above it on true Mobile), left-aligned with the
              rest of the text column again from sm: up. */}
          <Link
            href="/challenge"
            className="flex gap-4 items-center justify-center overflow-clip px-6 py-3 rounded-sm shrink-0 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all self-center sm:self-auto"
          >
            {/* Letting this wrap to two lines below lg: (tried 2026-07-24)
                put the icon beside a two-line text block, which read as
                broken rather than intentional. Smaller fixed size below
                lg: instead, so the full phrase fits on one line within
                the column's width — text-h3's own 19px floor was still
                too wide for that, both on a 375px phone AND in the
                ~283-320px Tablet grid column. */}
            <span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
              Jetzt starten
            </span>
            {/* Scaled down to match the smaller CTA text (same ~0.76
                aspect ratio as the lg: size), full size again from lg: up
                alongside text-h3. */}
            <div className="relative h-[0.8125rem] w-[1.0625rem] lg:h-[1.1875rem] lg:w-[1.5625rem] shrink-0">
              <Image alt="" src="/icon-check.svg" fill sizes="(min-width: 1024px) 26px, 17px" />
            </div>
          </Link>

          {/* Social proof — always avatars-then-text on two lines below
              lg: (not just when it happens to overflow), single row again
              from lg: up where the real column width fits it fine. */}
          <div className="flex flex-col lg:flex-row gap-3 items-center justify-center 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 text-center [word-break:break-word]">
              1.120+ Menschen vertrauen <span className="whitespace-nowrap">einfach-produktiv</span>
            </p>
          </div>
        </Reveal>

        {/* Image — bleeds to the true edge at every breakpoint (never
            padded). Below sm: (stacked layout, moved down from the old
            md: 768px) 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 sm:+ (grid, image only 58% width) the full aspect
            ratio looks right again, so the cap is lifted. 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. */}
        {/* No Reveal (fade-in-on-scroll) below sm: — whileInView's -80px
            viewport margin means the image doesn't fade in until scrolled
            that much further into view; on a short mobile viewport this
            image sits right at the initial fold, so it stayed at
            opacity:0 (a white gap, matching the section's own bg-bg-base)
            above the fold until the user scrolled (reported 2026-07-24).
            Plain, always-visible image below sm: instead; Reveal's fade
            kept from sm: up, where the image is beside the text with
            plenty of room and this was never an issue. */}
        <div className="order-2 sm:hidden relative w-full aspect-[887/583] max-h-[16rem]">
          <HeroImage />
        </div>
        <Reveal
          className="hidden sm:block sm:col-span-7 relative w-full aspect-[887/583]"
          delay={0.15}
        >
          <HeroImage />
        </Reveal>

      </div>
    </section>
  );
}