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: 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",
      }}
    />
  );
}

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" only in the sm-lg tablet
              range (Hero stacked full-width, natural wrap there landed
              awkwardly). Removed at true mobile widths (below sm:) 2026-07-24
              — narrower still, natural wrap there reads fine, and the
              forced break made "darf" the whole first line, leaving very
              little text above the CTA. Natural wrap from lg: up too, once
              the 5/12 grid gives the column real width again. */}
          <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="hidden sm:inline 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 — smaller fixed size below lg:, text-h-emphasis's
              own 20px floor read too large next to the now-smaller mobile
              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">
            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 max-w-full bg-brand hover:brightness-95 active:scale-[0.97] transition-all"
          >
            {/* 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 stacked mobile column's width — text-h3's own 19px
                floor was still too wide for that at ~236px of available
                text budget on a 375px phone. */}
            <span className="font-semibold leading-[2.375rem] text-text-primary text-[0.8125rem] lg:text-h3 whitespace-nowrap not-italic">
              Starte mit der 7-Tage-Challenge
            </span>
            {/* Scaled down to match the smaller mobile 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]">
              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. */}
        {/* No Reveal (fade-in-on-scroll) below lg: — 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 lg: instead; Reveal's fade
            kept from lg: up, where the image is beside the text with
            plenty of room and this was never an issue. */}
        <div className="order-2 lg:hidden relative w-full aspect-[887/583] max-h-[16rem] md:max-h-[22rem] mt-0 md:-mt-6">
          <HeroImage />
        </div>
        <Reveal
          className="hidden lg:block lg:col-span-7 relative w-full aspect-[887/583]"
          delay={0.15}
        >
          <HeroImage />
        </Reveal>

      </div>
    </section>
  );
}