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: 768px) 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 md: (768px), same as the site-wide
          convention — briefly moved to lg: (see the figma-to-nextjs
          skill's Gotcha #5) because at md:col-span-5 the text column was
          only ~283px at 768px and the full-size CTA/subtitle text made the
          heading/CTA/social-proof row wrap to 3 cramped lines. Reverted
          2026-07-24: the CTA/subtitle/icon sizing added since then for
          true mobile widths (see each one's own comment below) uses fixed
          sizes well under half that column width, so the original problem
          doesn't recur — moving back to md: means Tablet gets the real
          5/7 grid (image beside text) instead of stacking full-width like
          a phone. */}
      <div className="flex flex-col md:grid md:grid-cols-12 md:items-center gap-8 md:gap-[var(--layout-grid-gap)] pt-10 md: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 md:order-none md:col-span-5 flex flex-col gap-7 items-start pl-[var(--layout-padding-x)] pr-10 md:pr-0">

          {/* Heading — forced break after "darf" only in the sm-md tablet
              range (Hero stacked full-width there, natural wrap 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 md: 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 md: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 md:, 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] md:leading-[2.375rem] min-w-full shrink-0 text-text-primary text-[1rem] md: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 md: (tried 2026-07-24)
                put the icon beside a two-line text block, which read as
                broken rather than intentional. Smaller fixed size below
                md: 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] md: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 md: size), full size again from
                md: up alongside text-h3. */}
            <div className="relative h-[0.8125rem] w-[1.0625rem] md:h-[1.1875rem] md:w-[1.5625rem] shrink-0">
              <Image alt="" src="/icon-check.svg" fill sizes="(min-width: 768px) 26px, 17px" />
            </div>
          </Link>

          {/* Social proof — always avatars-then-text on two lines below
              md: (not just when it happens to overflow), single row again
              from md: up where the real column width fits it fine. */}
          <div className="flex flex-col md: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 md: (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 md:+ (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 md: — 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 md: instead; Reveal's fade
            kept from md: up, where the image is beside the text with
            plenty of room and this was never an issue. */}
        <div className="order-2 md:hidden relative w-full aspect-[887/583] max-h-[16rem]">
          <HeroImage />
        </div>
        <Reveal
          className="hidden md:block md:col-span-7 relative w-full aspect-[887/583]"
          delay={0.15}
        >
          <HeroImage />
        </Reveal>

      </div>
    </section>
  );
}