einfach-produktiv/app/components/PageBlocks.tsx

import Image from "next/image";
import Link from "next/link";
import type { PageBlock } from "../lib/payload";
import { getTestimonials } from "../lib/payload";
import { RichText } from "./RichText";
import { Quote } from "./Quote";
import { StepArrow } from "./StepArrow";
import { STEP_ICONS, SYMBOLIC_ICONS } from "./icons/StepIcons";
import { TestimonialsGrid } from "./TestimonialsGrid";

// Renders a Payload Pages document's `layout` blocks field — structurally
// parallel to RichText.tsx's own `blocks: {...}` converter map, but one
// level up (full page sections, not inline Lexical nodes). Each block
// component reuses the exact same visual treatment already hand-built on
// /lebensuhr, /3x3-system, and /7-tage-klarheits-check, rather than
// inventing new styling — this is what those pages' repeated patterns get
// consolidated into for CMS-driven pages going forward.
export async function PageBlocks({ blocks }: { blocks: PageBlock[] }) {
  const rendered = await Promise.all(
    blocks.map(async (block) => {
      if (block.blockType === "testimonialsRef") {
        const testimonials = await getTestimonials(block.page);
        if (testimonials.length === 0) return null;
        return <TestimonialsGrid key={block.id} testimonials={testimonials} />;
      }
      return renderPageBlockSync(block);
    })
  );
  return <>{rendered}</>;
}

// Every block EXCEPT testimonialsRef (needs its own async data fetch,
// which a client component can't await — see LivePageContent.tsx, which
// uses this directly and simply skips that one block type in preview,
// same "live-previewable subset" scope-cut LivePostContent.tsx already
// makes for its own author-bio/"Weiterlesen" chrome).
export function renderPageBlockSync(block: PageBlock): React.ReactNode {
  switch (block.blockType) {
    // Same "font-playfair clamp headline" treatment every hand-built page
    // (/lebensuhr, /3x3-system, /ueber-mich) used for its own H1 before
    // this block existed — see HeroBlock.ts's own comment on why the
    // headline moved out of Pages.title and into here.
    case "hero": {
      const headline = (
        <p
          className={
            block.image
              ? "font-semibold text-[clamp(2rem,1.393rem+1.5vw,2.75rem)] text-text-primary leading-[1.15]"
              : "font-semibold text-[clamp(2.25rem,1.393rem+1.786vw,3rem)] text-text-primary leading-[1.15]"
          }
          style={{ fontFamily: "var(--font-playfair)" }}
        >
          {block.headline}
        </p>
      );
      return (
        <div key={block.id} className="flex flex-col gap-4 items-start">
          {/* Optional round portrait beside the headline — e.g. /ueber-mich's
              "Hallo, ich bin Björn." size-20 (80px) read as barely-there/
              easy to miss next to a full headline — bumped to size-32
              (128px) so it actually registers as a real photo, not a
              small decorative blob. */}
          {block.image ? (
            <div className="flex items-center gap-6">
              <div className="relative size-32 shrink-0 rounded-full overflow-hidden ring-1 ring-border">
                <Image alt="" src={block.image} fill sizes="128px" className="object-cover" />
              </div>
              {headline}
            </div>
          ) : (
            headline
          )}
          {/* text-primary + text-h-emphasis, not text-muted body — same
              weight class as the homepage Hero's own subheading
              ("Ich helfe dir..."), which a plain muted text-body read too
              quiet next to. */}
          {block.subline && (
            <p className="font-semibold text-h-emphasis text-text-primary leading-[1.4]">{block.subline}</p>
          )}
          {block.ctaLabel && block.ctaHref && (
            <Link
              href={block.ctaHref}
              className="inline-flex items-center gap-2 bg-brand hover:brightness-95 active:scale-[0.97] transition-all rounded-sm px-6 py-3 font-semibold text-body text-text-primary"
            >
              {block.ctaLabel}
            </Link>
          )}
        </div>
      );
    }

    case "richTextSection":
      return <RichText key={block.id} content={block.content} />;

    case "quote":
      return <Quote key={block.id} label={block.label}>{block.text}</Quote>;

    case "icon": {
      const SymbolIcon = SYMBOLIC_ICONS[block.icon];
      return SymbolIcon ? <div key={block.id}>{SymbolIcon()}</div> : null;
    }

    case "image":
      if (!block.image) return null;
      return (
        <div key={block.id} className="flex flex-col gap-2 w-full">
          <div className="relative w-full aspect-[3/2] rounded-xl overflow-hidden bg-bg-muted">
            <Image alt={block.caption ?? ""} src={block.image} fill sizes="(min-width: 768px) 48rem, 100vw" className="object-contain" />
          </div>
          {block.caption && <p className="text-body-sm text-text-muted text-center">{block.caption}</p>}
        </div>
      );

    case "pillList":
      return (
        <div key={block.id} className="flex flex-wrap gap-2">
          {block.items.map((item) => (
            <span key={item.id} className="text-body-sm text-text-muted bg-bg-muted rounded-full px-3 py-1">{item.label}</span>
          ))}
        </div>
      );

    case "checklistImage":
      return (
        <div key={block.id} className="flex flex-col lg:flex-row gap-8 lg:gap-10 items-center w-full">
          {block.image && (
            <div className="relative w-full lg:w-[44%] lg:shrink-0 rounded-xl overflow-hidden bg-bg-muted" style={{ minHeight: "16rem" }}>
              <Image alt="" src={block.image} fill sizes="(min-width: 1024px) 44vw, 100vw" className="object-cover" />
            </div>
          )}
          <ul className="flex-1 w-full flex flex-col gap-4">
            {block.items.map((item) => (
              <li key={item.id} className="flex items-start gap-3">
                <CheckIcon />
                <p className="text-body text-text-body">{item.text}</p>
              </li>
            ))}
          </ul>
        </div>
      );

    case "table":
      return (
        <div key={block.id} className="bg-bg-muted rounded-xl overflow-hidden w-full">
          <table className="w-full text-left border-collapse">
            <thead>
              <tr className="border-b-2 border-brand">
                <th className="py-3 pl-6 pr-4 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{block.labelHeader}</th>
                <th className="py-3 pr-6 font-semibold text-body-sm text-text-primary uppercase tracking-wide">{block.valueHeader}</th>
              </tr>
            </thead>
            <tbody>
              {block.rows.map((row, i) => (
                <tr key={row.id} className={i % 2 === 1 ? "bg-bg-base/60" : undefined}>
                  <td className="py-2.5 pl-6 pr-4 text-body text-text-body">{row.label}</td>
                  <td className="py-2.5 pr-6 font-semibold text-body text-text-primary">{row.value}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      );

    case "stepRow": {
      const icons = block.items.map((item) => STEP_ICONS[item.icon]);
      return (
        <div key={block.id} className="flex flex-col lg:flex-row items-center lg:items-start gap-8 lg:gap-2 w-full">
          {block.items.flatMap((item, i) => [
            <div key={item.id} className="group flex flex-col items-center gap-4 lg:gap-5 flex-1 min-w-0">
              <div className="flex items-center justify-center w-16 h-14 shrink-0 transition-transform duration-300 group-hover:scale-110">
                {icons[i]?.()}
              </div>
              <div className="flex flex-col gap-1 text-center">
                <p className="font-semibold text-text-primary text-[1rem]">{item.title}</p>
                {item.subtitle && <p className="font-semibold text-[0.75rem] text-brand">{item.subtitle}</p>}
                <p className="text-[0.875rem] text-text-muted leading-[1.5]">{item.description}</p>
              </div>
            </div>,
            i < block.items.length - 1 ? (
              <div key={`arrow-${item.id}`} className="flex items-center justify-center shrink-0 lg:mt-5">
                <StepArrow className="w-8 h-8 rotate-90 lg:w-10 lg:h-4 lg:rotate-0" />
              </div>
            ) : null,
          ])}
        </div>
      );
    }

    case "testimonialsRef":
      // Needs an async fetch — handled by PageBlocks (server) above.
      // Skipped in the client-side live-preview renderer.
      return null;

    case "ctaCard":
      return (
        <Link
          key={block.id}
          href={block.href}
          className="group flex items-center justify-between gap-4 border border-border rounded-md px-6 py-5 hover:border-brand transition-colors"
        >
          <div className="flex flex-col gap-1">
            <p className="font-bold text-[0.8125rem] text-brand">{block.eyebrow}</p>
            <p className="font-semibold text-body text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>{block.title}</p>
            {block.description && <p className="text-body-sm text-text-muted">{block.description}</p>}
          </div>
          <svg viewBox="0 0 20 20" className="size-4 shrink-0 text-text-primary transition-transform duration-200 group-hover:translate-x-1" fill="none" aria-hidden="true">
            <path d="M4 10h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </Link>
      );

    case "storySplit":
      return (
        <div
          key={block.id}
          className={`flex flex-col gap-8 lg:gap-10 items-center w-full ${block.imagePosition === "right" ? "lg:flex-row-reverse" : "lg:flex-row"}`}
        >
          {block.image && (
            <div className="relative w-full lg:w-[44%] lg:shrink-0 rounded-xl overflow-hidden bg-bg-muted" style={{ minHeight: "16rem" }}>
              <Image alt="" src={block.image} fill sizes="(min-width: 1024px) 44vw, 100vw" className="object-cover" />
            </div>
          )}
          <div className="flex-1 w-full flex flex-col gap-4">
            {block.heading && (
              <p className="font-semibold text-h-small text-text-primary" style={{ fontFamily: "var(--font-lora)" }}>
                {block.heading}
              </p>
            )}
            {block.content ? <RichText content={block.content} /> : null}
            {block.bullets.length > 0 && (
              <ul className="flex flex-col gap-2">
                {block.bullets.map((bullet) => (
                  <li key={bullet.id} className="flex items-start gap-3">
                    <CheckIcon />
                    <p className="text-body text-text-body">{bullet.text}</p>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      );

    case "faq":
      return (
        <div key={block.id} className="flex flex-col gap-3 w-full">
          {block.items.map((item) => (
            <details key={item.id} className="group border border-border rounded-md px-5 py-4 open:border-brand transition-colors">
              <summary className="flex items-center justify-between gap-4 cursor-pointer list-none font-semibold text-body text-text-primary">
                {item.question}
                <svg
                  viewBox="0 0 20 20"
                  className="size-4 shrink-0 text-text-muted transition-transform duration-200 group-open:rotate-45"
                  fill="none"
                  aria-hidden="true"
                >
                  <path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
                </svg>
              </summary>
              <div className="pt-3 text-body-sm text-text-muted">
                <RichText content={item.answer} />
              </div>
            </details>
          ))}
        </div>
      );

    default:
      // Unknown/malformed block — same "skip rather than crash" convention
      // RichText.tsx's own blocks use.
      return null;
  }
}

// Same checkmark used by /lebensuhr's and /7-tage-klarheits-check's own
// checklists.
function CheckIcon() {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" className="shrink-0 mt-1">
      <path d="M3 9.5l4 4L15 4" stroke="#f6a701" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}