function BrandLogo({
  markClassName = "acc-brand-mark",
  wordmarkClassName = "acc-brand-wordmark",
  markSize = 48,
  wordmarkWidth = 180,
}) {
  return (
    <>
      <img
        src={STYLED_IMAGES.brandMark}
        alt=""
        className={markClassName}
        width={markSize}
        height={markSize}
        aria-hidden="true"
      />
      <img
        src={STYLED_IMAGES.wordmark}
        alt="Steuerberatungsgesellschaft mbH Ruhland"
        className={wordmarkClassName}
        width={wordmarkWidth}
        height={Math.round((wordmarkWidth * 38) / 180)}
      />
    </>
  );
}

function SharedPromoBar({ visible, leaving, onDismiss }) {
  if (!visible) return null;
  return (
    <div className={`acc-promo${leaving ? " is-leaving" : ""}`} id="top-banner">
      <img
        src={STYLED_IMAGES.promoMascot}
        alt=""
        className="acc-promo-mascot"
        width="96"
        height="114"
        aria-hidden="true"
        decoding="async"
      />
      <div className="acc-promo-inner">
        <p className="acc-promo-title">{PROMO.title}</p>
        <p className="acc-promo-sub">{PROMO.subtitle}</p>
        <a href={PROMO.ctaHref} className="acc-btn acc-btn-tertiary-white">
          {PROMO.ctaLabel}
        </a>
      </div>
      <button type="button" className="acc-promo-close close-top-banner" onClick={onDismiss} aria-label="Banner schließen">×</button>
    </div>
  );
}

function SharedHeader({ menu, activePage }) {
  return (
    <header className="acc-header" id="main_navigation">
      <div className="acc-container acc-nav">
        <a href={HOME_HREF} className="acc-brand">
          <BrandLogo />
        </a>
        <ul className="acc-nav-links" data-desktop-nav>
          {NAV_LINKS.map((l) => (
            <li key={l.label}>
              <a
                href={l.href}
                className={activePage === l.id ? "is-active" : undefined}
                aria-current={activePage === l.id ? "page" : undefined}
              >
                {l.label}
              </a>
            </li>
          ))}
        </ul>
        <div className="acc-nav-actions">
          <a href={PHONE_HREF} className="acc-btn acc-btn-outline acc-nav-phone">{PHONE_DISPLAY}</a>
          <a href={FRAGEBOGEN_HREF} className="acc-btn acc-btn-primary acc-nav-cta">Fragebogen starten</a>
          <button
            type="button"
            className="acc-menu-toggle"
            onClick={menu.toggle}
            aria-label="Menü öffnen"
            aria-expanded={menu.open ? "true" : "false"}
            aria-controls="acc-mobile-menu"
          >
            <span className="acc-menu-toggle-bars" aria-hidden="true">
              <span />
              <span />
              <span />
            </span>
          </button>
        </div>
      </div>
    </header>
  );
}

function SharedMobileMenu({ menu, activePage }) {
  return (
    <div
      id="acc-mobile-menu"
      className={`acc-mobile-menu${menu.open ? " is-open" : ""}`}
      data-mobile-menu
      hidden={!menu.open}
    >
      <div className="acc-mobile-menu-top">
        <a href={HOME_HREF} className="acc-brand acc-mobile-menu-brand" onClick={menu.close}>
          <BrandLogo markSize={40} wordmarkWidth={150} />
        </a>
        <button type="button" className="acc-mobile-menu-close" onClick={menu.close} aria-label="Menü schließen">
          ×
        </button>
      </div>
      <nav className="acc-mobile-menu-nav" aria-label="Mobilnavigation">
        {NAV_LINKS.map((l) => (
          <a
            key={l.label}
            href={l.href}
            className={activePage === l.id ? "is-active" : undefined}
            aria-current={activePage === l.id ? "page" : undefined}
            onClick={menu.close}
          >
            {l.label}
          </a>
        ))}
      </nav>
      <div className="acc-mobile-menu-actions">
        <a href={PHONE_HREF} className="acc-btn acc-btn-outline" onClick={menu.close}>{PHONE_DISPLAY}</a>
        <a href={FRAGEBOGEN_HREF} className="acc-btn acc-btn-primary" onClick={menu.close}>Fragebogen starten</a>
      </div>
    </div>
  );
}

function SharedStickyCta() {
  return (
    <a href={FRAGEBOGEN_HREF} className="acc-btn acc-btn-primary acc-sticky-cta" id="stickySignup">
      Fragebogen starten
    </a>
  );
}

function SubpageHeroArt({ kind, alt }) {
  const artSrc =
    (STYLED_IMAGES.featureArt && STYLED_IMAGES.featureArt[kind]) ||
    `${ASSETS}feature-art/${kind}.svg?v=20260716add`;

  return (
    <div className={`acc-feature-art-card acc-feature-art-card--${kind} acc-sub-hero-art`}>
      <div className="acc-feature-art-frame" aria-hidden="true" />
      <div className="acc-feature-art-inner">
        <img
          className="acc-feature-art-image"
          src={artSrc}
          alt={alt || ""}
          width="720"
          height="560"
          loading="eager"
        />
      </div>
    </div>
  );
}

function SubpageHero({
  eyebrow = "Steuerliches Fachwissen aus der Region",
  title,
  lead,
  image,
  artKind,
  artAlt = "",
  actions,
  doodleVariant = "hero",
}) {
  const hasActions = Array.isArray(actions) && actions.length > 0;
  const hasVisual = Boolean(artKind || image);

  return (
    <section className={`acc-sub-hero acc-section--first${hasVisual ? " acc-sub-hero--visual" : ""}`}>
      <div className="acc-container acc-sub-hero-inner">
        <div className="acc-sub-hero-copy acc-heading-with-doodles">
          {doodleVariant ? <SectionDoodles variant={doodleVariant} /> : null}
          {eyebrow && <p className="acc-sub-hero-eyebrow">{eyebrow}</p>}
          <h1>{title}</h1>
          {lead && <p className="acc-sub-hero-lead">{lead}</p>}
          {hasActions && (
            <div className="acc-sub-hero-actions acc-cta-actions">
              {actions.map((action) => (
                <a
                  key={action.href + action.label}
                  href={action.href}
                  className={`acc-btn ${action.variant === "outline" ? "acc-btn-outline" : "acc-btn-primary"}${action.big ? " acc-btn-primary--big" : ""}`}
                >
                  {action.label}
                </a>
              ))}
            </div>
          )}
        </div>
        {image ? (
          <div className="acc-sub-hero-visual">
            <div className="acc-sub-hero-photo-shell">
              <img src={image} alt="" width="1536" height="1024" loading="eager" />
            </div>
          </div>
        ) : artKind ? (
          <div className="acc-sub-hero-visual">
            <SubpageHeroArt kind={artKind} alt={artAlt} />
          </div>
        ) : null}
      </div>
    </section>
  );
}

function PageShell({ children, activePage, hero, showStickyCta = false }) {
  const promo = usePromoDismiss();
  const menu = useMobileMenu();
  useStickyCta();

  return (
    <div className="acc-page">
      <SharedPromoBar visible={promo.visible} leaving={promo.leaving} onDismiss={promo.dismiss} />
      <div
        className={`acc-nav-zone${hero ? "" : " acc-nav-zone--subpage"}`}
        id={showStickyCta ? "trigger-sticky" : undefined}
      >
        <SharedHeader menu={menu} activePage={activePage} />
        {hero}
      </div>
      {showStickyCta && <SharedStickyCta />}
      <SharedMobileMenu menu={menu} activePage={activePage} />
      <main>{children}</main>
      <SharedFooter />
    </div>
  );
}