import * as React from "react"

import { Container, Section, SectionHeading } from "@/components/solenos/section"
import { PageBreadcrumb } from "@/components/solenos/page-breadcrumb"
import { PageHero } from "@/components/solenos/page-hero"
import { FeatureBand } from "@/components/solenos/feature-band"
import { FeatureTile } from "@/components/solenos/icon-tile"

type AudienceFeature = {
  icon?: React.ReactNode
  /** self-contained visual (asset-kit icon/vector) rendered without IconBadge */
  media?: React.ReactNode
  title: React.ReactNode
  sub?: React.ReactNode
}

function AudienceBreadcrumb({ current }: { current: string }) {
  return (
    <PageBreadcrumb
      items={[{ label: "Für wen?", to: "/fuer-wen" }, { label: current }]}
    />
  )
}

/**
 * Shared audience page template (tiles 5–8):
 * split PageHero with breadcrumb, feature tile row, closing slot
 * (teal CtaBanner or slim repeat-CTA section).
 */
function AudiencePage({
  breadcrumb,
  eyebrow,
  title,
  tagline,
  lead,
  actions,
  visual,
  features,
  featureLayout = "tiles",
  children,
  closing,
}: {
  breadcrumb: string
  eyebrow?: React.ReactNode
  title: React.ReactNode
  /** short bold subline under the H1 (e.g. "Bestellen. Montieren. Fertig.") */
  tagline?: React.ReactNode
  lead?: React.ReactNode
  actions?: React.ReactNode
  visual?: React.ReactNode
  features: AudienceFeature[]
  /**
   * `tiles` — bare icon-over-label tiles on the page background.
   * `band` — one divided white card (larger line icons, two-line subs).
   */
  featureLayout?: "tiles" | "band"
  /** additional full-width spec sections between feature row and closing */
  children?: React.ReactNode
  closing?: React.ReactNode
}) {
  return (
    <>
      <PageHero
        breadcrumb={<AudienceBreadcrumb current={breadcrumb} />}
        eyebrow={eyebrow}
        title={title}
        lead={
          <>
            {tagline ? (
              <span className="mb-2 block text-lg font-bold text-navy sm:text-xl">
                {tagline}
              </span>
            ) : null}
            {lead}
          </>
        }
        actions={actions}
        visual={visual}
      />
      <Container>
        <Section className="pt-2 sm:pt-4 lg:pt-6">
          {featureLayout === "band" ? (
            <FeatureBand items={features} />
          ) : (
            <div className="grid grid-cols-2 gap-x-6 gap-y-10 sm:grid-cols-4">
              {features.map((feature, i) => (
                <FeatureTile
                  key={i}
                  icon={feature.icon}
                  media={feature.media}
                  title={feature.title}
                  sub={feature.sub}
                />
              ))}
            </div>
          )}
        </Section>
        {children}
        {closing}
      </Container>
    </>
  )
}

/**
 * Slim closing section repeating the hero CTAs
 * (tiles 7 and 8 close without a gradient band).
 */
function AudienceClosing({
  title,
  lead,
  actions,
}: {
  title: React.ReactNode
  lead?: React.ReactNode
  actions: React.ReactNode
}) {
  return (
    <Section className="pt-0 sm:pt-0 lg:pt-0">
      <SectionHeading align="center" title={title} lead={lead} />
      <div className="mt-7 flex flex-wrap items-center justify-center gap-3">
        {actions}
      </div>
    </Section>
  )
}

export { AudiencePage, AudienceClosing }
export type { AudienceFeature }