import type { ReactNode } from 'react';
import { TextLink } from '../core/TextLink';

export interface DarkHeroLink {
  label: string;
  href: string;
}

export interface DarkHeroTile {
  src: string;
  alt: string;
  /** Bold caption line, e.g. "Anhängerkupplung, starr". */
  title: string;
  /** Muted second caption line, e.g. "Traverse und angeschraubter Kugelkopf". */
  sub?: string;
}

export interface DarkHeroFit {
  /** Vehicle image (wide, on transparent/black). */
  src: string;
  alt: string;
  /** Tiny uppercase label, defaults to "Passend für". */
  label?: string;
  /** Vehicle name, e.g. "VW Touran 5T1". */
  model: string;
  /** Muted line under the model, e.g. "Baujahr 05.2015 – jetzt". */
  sub?: string;
}

export interface DarkHeroProps {
  /** Gray eyebrow above the headline. */
  eyebrow?: string;
  /** Oversized white headline (up to 84px). Use `<br />` for the line break between the two sentences. */
  title: ReactNode;
  /** Muted lead paragraph. */
  lead?: ReactNode;
  /** Light-blue standalone links under the lead. */
  links?: DarkHeroLink[];
  /** Product tiles on light gray below the copy (two in the template). */
  tiles?: DarkHeroTile[];
  /** "Passend für" row with the vehicle image, separated by a dark hairline. */
  fit?: DarkHeroFit;
}

/**
 * Dark full-bleed opening hero (`.kwac-hero.kwac-hero-dark`): near-black band
 * with centered eyebrow, oversized white headline, muted lead and light-blue
 * links, followed by light-gray product tiles and the "Passend für" vehicle row.
 * Replaces `Hero` at the top of the long product page; follows `VehicleBar`,
 * precedes `StatsRow`.
 */
export function DarkHero({ eyebrow, title, lead, links, tiles, fit }: DarkHeroProps) {
  return (
    <section className="kwac-hero kwac-hero-dark" aria-labelledby="kwac-title">
      <div className="kwac-hero-dark-inner">
        {eyebrow ? <p className="kwac-eyebrow">{eyebrow}</p> : null}
        <h1 className="kwac-h1" id="kwac-title">
          {title}
        </h1>
        {lead ? <p className="kwac-lead">{lead}</p> : null}
        {links && links.length ? (
          <div className="kwac-hero-links">
            {links.map((l) => (
              <TextLink key={l.href + l.label} href={l.href}>
                {l.label}
              </TextLink>
            ))}
          </div>
        ) : null}
      </div>
      {(tiles && tiles.length) || fit ? (
        <div className="kwac-hero-showcase">
          {tiles && tiles.length ? (
            <div className="kwac-hero-tiles">
              {tiles.map((t) => (
                <figure className="kwac-hero-tile" key={t.src}>
                  <img src={t.src} alt={t.alt} width={480} height={480} />
                  <figcaption>
                    {t.title}
                    {t.sub ? <span className="kwac-hero-tile-sub">{t.sub}</span> : null}
                  </figcaption>
                </figure>
              ))}
            </div>
          ) : null}
          {fit ? (
            <div className="kwac-hero-fit">
              <img src={fit.src} alt={fit.alt} width={780} height={401} />
              <p>
                <span className="kwac-hero-fit-label">{fit.label ?? 'Passend für'}</span>
                <span className="kwac-hero-fit-model">{fit.model}</span>
                {fit.sub ? <span className="kwac-hero-fit-sub">{fit.sub}</span> : null}
              </p>
            </div>
          ) : null}
        </div>
      ) : null}
    </section>
  );
}